/* ==========================================================================
   Atlas Automotive Repair - mobile-first design system
   Palette: deep red + maroon on warm white. Anton display, Inter body.
   No multicolor gradients. No one-sided colored borders.
   ========================================================================== */

:root {
    --red:       #a30a05;
    --red-dark:  #7c0a07;
    --red-bright:#d11f0f;
    --maroon:    #3c130f;
    --ink:       #1a1a1a;
    --ink-soft:  #4d4744;
    --paper:     #ffffff;
    --bg:        #faf8f7;
    --panel:     #f4eeec;
    --line:      #e6dedb;
    --gold:      #e8a90c;

    --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --wrap: 1180px;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 30px rgba(28, 12, 10, 0.10);
    --shadow-sm: 0 4px 14px rgba(28, 12, 10, 0.08);
    --space: clamp(2.6rem, 6vw, 5rem);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
ul { margin: 0; padding: 0; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 0.5em;
    color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 8vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 5.5vw, 3rem); }
h3 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); }
h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin: 0 0 .4em; }
p { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ---- Kicker label + section heading (full-width rule, no side borders) ---- */
.kicker {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    color: var(--red);
	margin-top: 55px;
    margin-bottom: 0.6rem;
}
/* Inside a card/panel the 55px top margin above only makes sense at the top
   of a full section; nested in a smaller box it just reads as stray gap. */
.panel .kicker, .card .kicker { margin-top: 0; }
.section { padding: 30px 0 75px 0; }
.section-head { max-width: 720px; margin-bottom: 2.2rem; }
.section-head.center { margin-left: auto; margin-right: auto; }
/* A second section-head appended lower on a page (e.g. curated reviews
   below the embedded widget) needs its own top gap and a tighter heading. */
.section-head.stacked { margin-top: 2.6rem; }
.section-head.stacked h3 { margin: 0; }
.rule { height: 4px; width: 64px; background: var(--red); border-radius: 4px; margin: 0.8rem 0 0; }
.section-head.center .rule { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-family: var(--font-body); font-weight: 700; font-size: 1rem;
    padding: 0.85rem 1.5rem; border-radius: 999px; cursor: pointer;
    border: 2px solid transparent; transition: transform .15s ease, background .15s ease, color .15s ease;
    text-align: center; line-height: 1.1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--red); }
.btn-light:hover { background: #f1eae8; color: var(--red-dark); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
.btn-block { width: 100%; }

/* ---- Announcement bar ---- */
.announce {
    background: var(--maroon); color: #fff; text-align: center;
    font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em;
}
.announce .wrap { padding-top: 9px; padding-bottom: 9px; }

/* ---- Header / nav (mobile-first) ---- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; padding-bottom: 12px; gap: 1rem;
}
.brand img { width: auto; height: 48px; }
.nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 46px; height: 42px; padding: 9px;
	border: none;
    border-radius: 10px; cursor: pointer;
    background: transparent;
}
.nav-toggle:hover, .nav-toggle:active, .nav-toggle:focus { background: transparent; }
.nav-toggle-bar { display: block; height: 3px; width: 100%; background: #fff; border-radius: 3px; transition: .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.primary-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
    box-shadow: var(--shadow);
}
/* The border-bottom used to sit on the base rule, so even collapsed to
   max-height:0 it still painted a 1px line across the page (a zero-height
   box still renders its own border). Only show it while actually open. */
.primary-nav.open { max-height: 80vh; overflow: auto; border-bottom: 1px solid var(--line); }
.primary-nav ul { display: flex; flex-direction: column; padding: 8px 20px 18px; gap: 2px; }
.primary-nav a {
    display: block; padding: 13px 8px; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line);
}
.primary-nav a.is-active { color: var(--red); }
.primary-nav .nav-cta, .primary-nav .nav-call { margin-top: 10px; }
.primary-nav .nav-cta a, .primary-nav .nav-call a { border-bottom: none; }
.primary-nav .btn { width: 100%; }

/* ---- Hero ---- */
.hero { position: relative; background: var(--maroon); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
/* Longhand on purpose: .hero-inner shares its element with .wrap (which
   sets the 20px left/right padding). A shorthand "padding: X 0" here would
   win the cascade (declared later) and zero that side padding right back
   out, which is exactly what was stripping the hero text's left/right gutter. */
.hero-inner { position: relative; padding-top: clamp(3rem, 9vw, 6rem); padding-bottom: clamp(3rem, 9vw, 6rem); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero p { font-size: 1.15rem; max-width: 52ch; color: #f3e9e7; }
.hero .kicker { color: #ffd9d4; }
.hero .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
/* Plain white-outline ghost buttons were hard to read against the red/maroon
   backgrounds here, so these use the same solid dark fill as .btn-ghost's
   hover state does everywhere else, all the time, not just on hover. */
.hero .btn-ghost, .cta-band .btn-ghost { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }

/* Interior "Pages" hero header (admin/pages.php toggle): same treatment as
   Home/About, but with half the bottom padding since these intros are a
   single short paragraph rather than a full hero with buttons. */
.hero-page .hero-inner { padding-bottom: clamp(1.5rem, 4.5vw, 3rem); }
.hero-warranty {
    display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem;
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25);
    padding: 0.6rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
}

/* ---- Trust bar ---- */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; padding: 1.4rem 20px; }
.trust img { height: 90px; width: auto; opacity: 0.9; }

/* ---- Generic panels / cards ---- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.bg-panel { background: var(--panel); }
.bg-ink { background: var(--ink); color: #fff; }
.bg-ink h2, .bg-ink h3 { color: #fff; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); height: 100%; }
.card h3 { color: var(--red); }
.not-offered .card h3 { color: #8d8d8d; }
.card .card-icon { font-size: 1.6rem; margin-bottom: .4rem; }

/* ---- Service "offer / don't offer" lists ---- */
.list-check li, .list-x li { position: relative; padding: 0.5rem 0 0.5rem 2rem; border-bottom: 1px solid var(--line); list-style: none; }
.list-check li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.list-x li::before { content: "✕"; position: absolute; left: 0; color: var(--ink-soft); font-weight: 800; }

/* ---- Pricing ---- */
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.price-card .price-body { padding: 1.4rem 1.5rem; }
.price-card .price-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.price-card .price { font-family: var(--font-display); color: var(--red); font-size: 1.6rem; white-space: nowrap; }
.price-note { font-size: 0.92rem; color: var(--ink-soft); }

/* Small chips for a card's "common concerns" or similar short tag list. */
.price-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0 0.2rem; }
.price-tag {
    display: inline-flex; align-items: center; padding: 0.3rem 0.7rem;
    border-radius: 999px; background: var(--panel); color: var(--ink);
    font-size: 0.8rem; font-weight: 600; line-height: 1.2;
}

/* Featured image: bleeds edge-to-edge to the card's top and sides, cropped
   to fill a fixed 16:10 box so mixed photo/no-photo rows still line up.
   padding-top sets the box height from plain width math, and object-fit:
   cover on the img crops it to fill that box instead of showing full size. */
.price-image { position: relative; width: 100%; height: 0; padding-top: 62.5%; background: var(--panel); overflow: hidden; }
.price-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.price-image-placeholder { display: flex; align-items: center; justify-content: center; background: #b6b3b3; }
.price-image-placeholder i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 2.1rem; }
/* Below the 2-column breakpoint every card is alone on its own row, so a
   missing-image placeholder has nothing to line up with. Hide it there. */
@media (max-width: 639px) { .price-image-placeholder { display: none; } }

/* ---- FAQ accordion ---- */
.faq-cat { font-family: var(--font-display); text-transform: uppercase; color: var(--ink); font-size: 1.35rem; margin: 2rem 0 0.8rem; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 0.7rem; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; color: var(--ink);
    padding: 1.05rem 3rem 1.05rem 1.1rem; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--red); line-height: 1; }
.faq-item.open .faq-q::after { content: "\2212"; }
.faq-a { padding: 0 1.1rem; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; color: var(--ink-soft); }
.faq-item.open .faq-a { padding: 0 1.1rem 1.1rem; max-height: 1600px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a .rich-heading { font-family: var(--font-body); color: var(--ink); margin: 1rem 0 0.4rem; }
.faq-a h4.rich-heading { font-size: 1.08rem; }
.faq-a h5.rich-heading { font-size: 1rem; }
.faq-a ul, .faq-a ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.faq-a li { margin-bottom: 0.35rem; }
.faq-a blockquote { margin: 0 0 1rem; padding: 0.7rem 1rem; background: var(--panel); border-radius: var(--radius-sm); font-style: italic; color: var(--ink); }
.faq-a code { background: var(--panel); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.92em; color: var(--ink); }

/* ---- Small centered callout panel (e.g. urgent-repair teaser) ---- */
.teaser-panel { max-width: 760px; margin: 0 auto; }
.teaser-panel h3 { margin: 0.3rem 0 0.6rem; }
.teaser-panel p { margin-bottom: 1rem; }

/* ---- Reviews (native cards) ---- */
.review-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.review-card .stars { color: var(--gold); letter-spacing: 2px; }
.review-card .who { font-weight: 700; margin-top: 0.6rem; }
.review-meta { font-size: 0.85rem; color: var(--ink-soft); }

/* ---- Embed (scheduler / map) ---- */
.embed-frame { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm); }
.embed-frame iframe { width: 100%; border: 0; display: block; min-height: 900px; height: 900px; }

/* ---- CTA band ---- */
.cta-band { background: var(--red); color: #fff; text-align: center;     padding: 75px 0; }
.cta-band h2 { color: #fff; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.4rem; }

/* ---- Two-up content/image layout (only had a >=980px rule; below that its
   two children stacked as plain blocks with no gap at all, since grid's gap
   never applied outside a grid context) ---- */
.split { display: grid; gap: 2rem; grid-template-columns: 1fr; }

/* ---- Contact info blocks ---- */
.info-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.info-item { display: flex; flex-direction: column; }
.info-item .label { font-weight: 700; }

/* ---- Forms ---- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
    width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--red); border-color: var(--red); }
.form-note { font-size: 0.9rem; color: var(--ink-soft); }
.alert { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; border: 1px solid var(--line); }
.alert-success { background: #eef7ee; border-color: #bcdcbb; color: #1f5d22; }
.alert-error { background: #fdecea; border-color: #f3c0bb; color: #8a1c12; }

/* ---- Footer ---- */
.site-footer { background: var(--maroon); color: #f1e6e4; margin-top: var(--space); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; padding: 3rem 20px 2rem; }
.footer-logo { border-radius: 10px; padding: 0 10px 15px 10px; height: auto; width: 225px; }
.site-footer h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.7rem; }
.site-footer a { color: #f1e6e4; }
.site-footer a:hover { color: #fff; }
.site-footer p { margin: 0 0 0.5rem; }
.footer-links { list-style: none; }
.footer-links li { padding: 0.2rem 0; }
/* On narrow phones the footer's full-width single "Explore" column makes an
   8-item link list needlessly tall; two columns fits the same links in
   about half the height. footer-grid already gains its own multi-column
   layout above this width, so this only needs to apply below it. */
@media (max-width: 639px) {
    .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}
.social { display: flex; gap: 1rem; margin-top: 0.8rem; font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem; padding: 1.5rem 20px; border-top: 1px solid rgba(255,255,255,0.12); }
.badges img { height: 90px; width: auto; padding: 7px 9px; border-radius: 8px; }
.footer-bottom { background: rgba(0,0,0,0.22); font-size: 0.86rem; }
.footer-bottom .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem 20px; text-align: center; }
.footer-bottom-text { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-credit a { color: inherit; opacity: 0.7; }
.footer-credit a:hover { opacity: 1; }

/* ---- Back to top ---- */
.to-top {
    position: fixed; right: 16px; bottom: 16px; z-index: 90;
    background: var(--red); color: #fff; border: none; cursor: pointer;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em;
    padding: 0.7rem 1rem; border-radius: 999px; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.to-top.show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 640px) {
    .grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .info-row { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero .btn-row .btn { min-width: 0; }
}

@media (min-width: 980px) {
    .nav-toggle { display: none; }
    .primary-nav {
        position: static; max-height: none; overflow: visible; box-shadow: none;
        border-bottom: none; background: transparent;
    }
    .primary-nav ul { flex-direction: row; align-items: center; padding: 0; gap: 0.3rem; }
    .primary-nav a { border-bottom: none; padding: 0.5rem 0.85rem; border-radius: 8px; }
    .primary-nav a:hover { background: var(--panel); }
    .primary-nav a.is-active { background: var(--panel); color: var(--red); }
    .primary-nav .nav-cta { margin: 0 0 0 0.5rem; }
    .primary-nav .nav-call { display: none; }
    .primary-nav .btn { width: auto; }
    .brand img { height: 62px; width: auto; }

    .grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
    .footer-bottom .wrap { flex-direction: row; justify-content: center; }
    .footer-bottom-text { flex-direction: row; gap: 1.2rem; }
    .footer-credit { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
    .hero-inner { padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }

    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
}

/* ==========================================================================
   Enhancements: icons, flip cards, footer + button polish
   ========================================================================== */

/* Icon chips and inline icons */
.icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: var(--red); font-size: 41px; margin-bottom: 0.85rem; }
.f-icon { display: inline-flex; font-size: 1.7rem; color: var(--red); margin-bottom: 0.55rem; }
.card .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; margin-bottom: 0.7rem; }

/* Nav fixes: remove stray list bullets, force white CTA text */
.primary-nav ul { list-style: none; }
.primary-nav .btn-primary { color: #fff; }
.primary-nav .btn-primary:hover { color: #fff; }

/* Small button */
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* Pricing: book button anchored to the bottom of each card */
.price-card { display: flex; flex-direction: column; }
.price-card .price-body { display: flex; flex-direction: column; flex: 1; }
.price-card .price-cta { margin-top: auto; padding-top: 1.1rem; }

/* Service flip cards */
.flip-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .flip-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .flip-grid { grid-template-columns: repeat(4, 1fr); } }
.flip { perspective: 1200px; height: 17rem; cursor: pointer; }
.flip:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--radius); }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s ease; transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); padding: 1.4rem; display: flex; flex-direction: column; }
.flip h3 { font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--red); text-align: center; }
.flip-front p { color: var(--ink-soft); margin: 10px 0 0; text-align: center; }
.flip-hint { margin-top: auto; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 0.4rem; }
.flip-back { transform: rotateY(180deg); background: var(--maroon); color: #fff; overflow: auto; }
.flip-back h3 { color: #fff; }
.flip-back p { font-size: 0.92rem; margin: 0; color: #f3e9e7; }
.flip-back .flip-hint { color: #ffd9d4; }

/* Footer polish */
.site-footer { margin-top: 0; }
.site-footer .muted { color: rgba(255, 255, 255, 0.62); }
.fcontact { list-style: none; }
.fcontact li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.55rem; }
.fcontact li i { color: #ef9a90; width: 18px; text-align: center; margin-top: 0.3rem; font-size: 0.95rem; }
.footer-hours { display: flex; align-items: flex-start; gap: 0.6rem; }
.footer-hours > i { color: #ef9a90; width: 18px; text-align: center; margin-top: 0.3rem; }
.social a { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Back to top: circular icon button */
.to-top { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 1.05rem; border-radius: 50%; }
.to-top:hover { background: var(--red-dark); }

/* ==========================================================================
   Round 3: overlay header, centered about chips, bigger service icons
   ========================================================================== */

/* Top bar wrapper handles stickiness so the header can overlay a hero */
.site-header { position: static; }
.site-top { position: sticky; top: 0; z-index: 100; }

/* Transparent header with a single-hue black gradient over hero pages */
.has-hero .site-top {
    position: absolute; left: 0; right: 0; top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0) 100%);
}
.has-hero .announce { background: transparent; }
.has-hero .site-header { background: transparent; border-bottom: none; }
.has-hero .brand { border-radius: 12px; padding: 6px 12px; }
.has-hero .hero-inner { padding-top: clamp(7.5rem, 10vw, 9.5rem); }
@media (min-width: 980px) {
    .has-hero .primary-nav a { color: #fff; }
    .has-hero .primary-nav a:hover { background: rgba(255,255,255,0.14); }
    .has-hero .primary-nav a.is-active { background: rgba(255,255,255,0.18); color: #fff; }
}

/* Cropped header band for pages with no full hero: same photo tint and
   fade-to-transparent gradient as the home header (image dimmed against the
   maroon backdrop, then the same black gradient on top), sized to the
   header's own height, then white content starts immediately below the
   crop line. */
.has-header-crop .site-top {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0) 100%),
        linear-gradient(rgba(60,19,15,0.72), rgba(60,19,15,0.72)),
        url('/assets/img/hero.png') center 10%/cover no-repeat;
}
.has-header-crop .announce { background: transparent; }
.has-header-crop .site-header { background: transparent; border-bottom: none; }
.has-header-crop .brand { border-radius: 12px; padding: 6px 12px; }
/* Shift just the logo up so it sits at the vertical center of the full band
   (announce row + nav row together) without changing the band's height. */
.has-header-crop .site-top:has(.announce) .brand { transform: translateY(-18px); }
@media (min-width: 980px) {
    .has-header-crop .primary-nav a { color: #fff; }
    .has-header-crop .primary-nav a:hover { background: rgba(255,255,255,0.14); }
    .has-header-crop .primary-nav a.is-active { background: rgba(255,255,255,0.18); color: #fff; }
}

/* About feature cards: bigger red chip with a white icon, centered with title */
.feature-grid .icon-chip {
    display: flex; align-items: center; justify-content: center;
    background: var(--red); color: #fff; width: 64px; height: 64px;
    font-size: 1.7rem; margin: 0 auto 0.9rem;
}
.feature-grid .card h3, .feature-grid .card h4 { text-align: center; }

/* Services flip front icon: larger and centered (title stays left) */
.flip-front .f-icon { font-size: 2.6rem; align-self: center;     margin-bottom: 16px; }

/* Warranty badge sizing */
.warranty-badge { width: 300px; max-width: 100%; height: auto; display: block; margin: 0 auto 1.2rem; }

/* Footer icon-to-text breathing room */
.fcontact li { gap: 0.9rem; }
.footer-hours { gap: 0.9rem; }
.social a { gap: 0.55rem; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto; transition: none !important; }
}