/* ============================================================
   Louisville Web Guy - v2 design system
   Retro local trade-ad aesthetic: Alfa Slab One + Yellowtail +
   Libre Franklin, cream paper, thick ink borders, Louisville
   skyline connectors, halftone and sunburst details.
   Pages load EITHER this file OR styles.css, never both.
   ============================================================ */

:root {
    --cream: #FDF6E9;
    --cream-dark: #F3E7CE;
    --paper: #FAF0DC;
    --brown: #5C3D2E;
    --ink: #3D2518;
    --orange: #E85D24;
    --orange-deep: #C94715;
    --teal: #4A9BA3;
    --teal-dark: #3A7A80;
    --yellow: #E5A836;
    --green: #5A8F5A;
    --display: 'Alfa Slab One', serif;
    --script: 'Yellowtail', cursive;
    --body: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Louisville skyline, west to east: Big Four Bridge, the Belle of
       Louisville, Whiskey Row, Cathedral of the Assumption needle,
       400 W Market spire, National City, Humana's crown, PNC antenna,
       Slugger bat at the museum, Omni, the Kentucky Center arc, Mercer,
       a steeple and a water tower */
    --sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cpath fill='%233D2518' d='M0 150 V108 H28 V118 H56 V98 H88 V124 H284 V128 H380 V104 H420 V96 H448 V64 H456 L462 10 L468 64 H476 V104 H488 V100 H508 V58 H516 V42 H524 L548 8 L572 42 H580 V58 H588 V104 H600 V36 H610 V30 H652 V36 H660 V104 H676 V62 H684 V50 H692 V42 H716 L724 30 L732 42 H740 V50 H748 V62 H756 V104 H772 V46 H780 V40 H824 V46 H832 V104 H846 V96 H904 V104 H920 V44 H932 V38 H964 V44 H976 V104 H988 V92 Q1014 70 1040 92 V104 H1060 V84 H1076 V78 H1112 V84 H1124 V104 H1140 V66 H1188 V104 H1204 V96 H1248 V112 H1260 V92 H1266 L1272 70 L1278 92 H1284 V112 H1316 V100 H1356 V118 H1400 V108 H1440 V150 Z M862 96 L856 34 Q870 8 884 34 L878 96 Z M304 128 Q306 119 314 117 H358 Q366 119 368 128 Z M316 117 V107 H352 V117 Z M322 107 V99 H346 V107 Z M326 99 V85 H331 V99 Z M339 99 V85 H344 V99 Z M1326 100 V90 H1329 V82 H1343 V90 H1346 V100 Z'/%3E%3Cpath stroke='%233D2518' stroke-width='5' fill='none' stroke-linecap='round' d='M96 124 H284 M104 124 Q188 30 272 124 M126 101 V124 M157 72 V124 M188 55 V124 M219 72 V124 M250 101 V124 M800 40 V14'/%3E%3C/svg%3E");
    /* A different, simpler block of buildings for the shadow layer */
    --sky2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cpath fill='%233D2518' d='M0 150 V118 H40 V92 H92 V118 H120 V74 H170 V118 H200 V100 H260 V118 H300 V60 H348 V118 H392 V104 H448 V86 H496 V118 H540 V70 H588 V118 H640 V96 H700 V118 H740 V54 H788 V118 H840 V108 H900 V80 H948 V118 H1000 V66 H1048 V118 H1100 V92 H1156 V118 H1200 V76 H1248 V118 H1300 V100 H1360 V118 H1400 V90 H1432 V118 H1440 V150 Z'/%3E%3C/svg%3E");
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html:focus-within { scroll-behavior: smooth; } /* root-level smooth breaks load-time #anchor jumps in Chrome during font swap; main.js handles click smoothness */
body {
    font-family: var(--body);
    background: var(--cream);
    color: var(--brown);
    line-height: 1.6;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; color: var(--ink); }

/* Paper grain over everything */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    background: var(--orange);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    z-index: 10000;
}
.skip-link:focus { top: 16px; }

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--body);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 12px 22px;
    background: var(--cream);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--orange); color: var(--cream); }
.btn-secondary { background: var(--teal); color: var(--cream); }
.btn svg { flex-shrink: 0; }

/* ============ TOPLINE ============ */
.topline {
    background: var(--ink);
    color: var(--cream);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 0;
}
.topline .container { display: flex; justify-content: space-between; gap: 16px; }
.topline a { color: var(--yellow); }
.topline .est { color: rgba(253, 246, 233, 0.65); }

/* ============ NAVBAR ============ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cream);
    border-bottom: 3px solid var(--ink);
    transition: box-shadow 0.2s ease;
}
.navbar.scrolled { box-shadow: 0 4px 16px rgba(61, 37, 24, 0.12); }
.nav-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mascot { width: 42px; height: 46px; }
.logo-text {
    font-family: var(--display);
    font-size: 1.18rem;
    color: var(--ink);
    line-height: 1.05;
}
.logo-sub {
    display: block;
    font-family: var(--body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange);
}
.nav-links { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 0.95rem; }
.nav-links a { color: var(--brown); }
.nav-links a:hover { color: var(--orange); }
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: var(--cream) !important;
    font-weight: 800;
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--cream); }
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.mobile-menu-btn span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 2px; }

/* ============ HERO ============ */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 40%, rgba(229, 168, 54, 0.32) 0%, rgba(229, 168, 54, 0) 38%),
        var(--cream);
    border-bottom: 3px solid var(--ink);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brown) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: 0.10;
    mask-image: linear-gradient(115deg, transparent 42%, black 88%);
    -webkit-mask-image: linear-gradient(115deg, transparent 42%, black 88%);
}
.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 28px 170px;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
    align-items: center;
}
.hello {
    font-family: var(--script);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    color: var(--teal-dark);
    transform: rotate(-3deg);
    display: inline-block;
    margin-bottom: 4px;
    animation: riseTilt 0.7s ease-out both;
}
.hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 4.7rem);
    line-height: 0.99;
    text-transform: uppercase;
    margin-bottom: 22px;
    animation: rise 0.7s ease-out 0.12s both;
}
.hero h1 .hero-accent { color: var(--orange); text-shadow: 3px 3px 0 var(--ink); }
.hero-subtitle {
    font-size: 1.13rem;
    line-height: 1.65;
    max-width: 46ch;
    margin-bottom: 14px;
    animation: rise 0.7s ease-out 0.24s both;
}
.hero-tagline {
    font-size: 0.98rem;
    font-style: italic;
    opacity: 0.85;
    max-width: 46ch;
    margin-bottom: 20px;
    animation: rise 0.7s ease-out 0.3s both;
}
.hero-location {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--cream);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 8px 18px 8px 10px;
    margin-bottom: 24px;
    box-shadow: 3px 3px 0 rgba(61, 37, 24, 0.25);
    animation: rise 0.7s ease-out 0.34s both;
}
.hero-location .location-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--orange);
    border-radius: 50%;
    flex-shrink: 0;
}
.hero-location .location-icon svg { fill: #fff; width: 15px; height: 15px; }
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
    animation: rise 0.7s ease-out 0.42s both;
}
.hero-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    font-weight: 600;
    font-size: 0.93rem;
    max-width: 540px;
    animation: rise 0.7s ease-out 0.5s both;
}
.hero-features li { display: flex; gap: 9px; align-items: baseline; }
.hero-features li::before { content: "\2605"; color: var(--orange); font-size: 0.85em; }
.hero-features .check-icon { display: none; }
.hero-mascot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rise 0.8s ease-out 0.2s both;
}
.sunburst {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        rgba(229, 168, 54, 0.38) 0deg 9deg,
        rgba(229, 168, 54, 0) 9deg 18deg
    );
    mask-image: radial-gradient(circle, black 30%, transparent 68%);
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 68%);
    animation: spin 80s linear infinite;
}
.hero-mascot img {
    position: relative;
    width: min(400px, 80%);
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(61, 37, 24, 0.25));
    animation: floaty 4.5s ease-in-out infinite;
}
.hero-stamp {
    position: absolute;
    bottom: 8%;
    right: 2%;
    background: var(--teal);
    color: var(--cream);
    font-family: var(--display);
    font-size: 0.78rem;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    border-radius: 50%;
    transform: rotate(8deg);
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.5);
    animation: stampIn 0.5s cubic-bezier(0.2, 2.2, 0.4, 1) 0.85s both;
}

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes riseTilt { from { opacity: 0; transform: rotate(-3deg) translateY(26px); } to { opacity: 1; transform: rotate(-3deg) translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes stampIn { from { opacity: 0; transform: rotate(8deg) scale(2.2); } to { opacity: 1; transform: rotate(8deg) scale(1); } }

/* ============ SKYLINE ============ */
.skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: var(--sky);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
}
.skyline.front { height: 104px; z-index: 1; }
.skyline.back {
    height: 148px;
    bottom: 0;
    opacity: 0.13;
    background-image: var(--sky2);
    transform: translateX(-150px);
}

/* ============ MARQUEE ============ */
.marquee {
    background: var(--orange);
    border-bottom: 3px solid var(--ink);
    color: var(--cream);
    overflow: hidden;
    padding: 13px 0;
}
.marquee-track { display: flex; width: max-content; animation: scroll 28s linear infinite; }
.marquee span {
    font-family: var(--display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding-right: 18px;
}
.marquee span::after { content: "\2736"; padding-left: 18px; color: var(--yellow); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============ SECTIONS / EDITORIAL HEAD ============ */
section { padding: 92px 0; }
.editorial-head, .sec-head { margin-bottom: 48px; max-width: 780px; }
.sec-script, .editorial-eyebrow {
    font-family: var(--script);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--orange);
    display: inline-block;
    transform: rotate(-2deg);
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: normal;
}
.editorial-head h2, .sec-head h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.04;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.editorial-head h2 em, .sec-head h2 em { font-style: normal; color: var(--orange); }
.editorial-head p, .sec-head p { font-size: 1.05rem; max-width: 58ch; }

/* Reveal on scroll: visible by default, animated only when JS is present */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ============ PROOF (REAL CLIENT WORK) ============ */
.real-client-proof { background: var(--paper); border-bottom: 3px solid var(--ink); }
.proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 28px;
    align-items: stretch;
    align-items: start;
}
.polaroid {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 6px;
    padding: 14px 14px 0;
    box-shadow: 8px 8px 0 rgba(61, 37, 24, 0.18);
    transform: rotate(-1.2deg);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}
.polaroid:hover { transform: rotate(0deg) translateY(-4px); }
.polaroid .shot {
    border: 2px solid var(--cream-dark);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1440 / 900;
    min-height: 0;
}
.polaroid .shot > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.shot-label {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--orange);
    color: var(--cream);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 13px;
    box-shadow: 3px 3px 0 rgba(61, 37, 24, 0.35);
}
.before-pin {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 36%;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 4px;
    padding: 5px 5px 3px;
    transform: rotate(-4deg);
    box-shadow: 5px 6px 0 rgba(61, 37, 24, 0.3);
}
.before-pin img { display: block; width: 100%; border-radius: 2px; }
.before-pin span {
    display: block;
    text-align: center;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brown);
    padding: 4px 0 2px;
}
.polaroid figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 4px 16px;
    font-size: 0.92rem;
}
.polaroid figcaption strong { font-family: var(--display); font-weight: 400; color: var(--ink); }
.polaroid figcaption .tag {
    color: var(--orange);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.proof-side { display: flex; flex-direction: column; gap: 22px; }
.proof-card {
    border: 3px solid var(--ink);
    border-radius: 10px;
    background: var(--cream);
    padding: 26px 26px 24px;
    box-shadow: 6px 6px 0 rgba(61, 37, 24, 0.15);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.proof-card-header { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.proof-card-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--cream-dark);
    background: #fff;
}
.proof-card-title { font-size: 1.2rem; margin-bottom: 2px; }
.proof-card-type {
    color: var(--orange);
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
}
.proof-card-body { font-size: 0.95rem; margin-bottom: 14px; }
.proof-card-list { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 0.92rem; margin-bottom: 18px; }
.proof-card-list li { display: flex; gap: 8px; align-items: baseline; }
.proof-card-list li::before { content: "\2714"; color: var(--teal-dark); font-size: 0.85em; }
.proof-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.proof-card-actions .btn { padding: 9px 15px; font-size: 0.85rem; box-shadow: 3px 3px 0 var(--ink); }

/* ============ TRUST BADGES ============ */
.trust-badges-banner { padding: 0; background: var(--cream); border-bottom: 3px solid var(--ink); }
.trust-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 34px;
    padding: 18px 0;
}
.trust-badge-item { display: flex; align-items: center; gap: 10px; }
.trust-badge-text { display: flex; flex-direction: column; }
.trust-badge-stars { display: flex; gap: 1px; }
.trust-badge-label { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.trust-badge-divider { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ============ SITUATIONS ============ */
.situations-rows-list { display: flex; flex-direction: column; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 8px 8px 0 rgba(61, 37, 24, 0.15); }
.situations-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 4fr) minmax(0, 6fr);
    gap: 24px;
    align-items: center;
    padding: 30px 34px;
    border-bottom: 3px solid var(--ink);
    transition: background 0.2s ease;
}
.situations-row:last-child { border-bottom: none; }
.situations-row:hover { background: var(--paper); }
.situations-row-num {
    font-family: var(--display);
    font-size: 1.6rem;
    color: var(--cream);
    background: var(--teal);
    border: 3px solid var(--ink);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.situations-row:nth-child(1) .situations-row-num { background: var(--orange); }
.situations-row:nth-child(3) .situations-row-num { background: var(--yellow); color: var(--ink); }
.situations-row-headline { font-size: 1.25rem; }
.situations-row-body p { font-size: 0.95rem; margin-bottom: 8px; }
.situations-row-cta { font-weight: 800; color: var(--teal-dark); font-size: 0.9rem; }
.situations-row:hover .situations-row-cta { text-decoration: underline; }

/* ============ HOW I HELP: AD PANELS ============ */
.steps-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
/* Mid-width laptops (~1024px): five cards get cramped, so drop to a comfortable 3+2 before the 2-up tablet breakpoint takes over at <=980px. */
@media (max-width: 1180px) and (min-width: 981px) {
    .steps-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.step-card {
    border: 3px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 5px 5px 0 rgba(61, 37, 24, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 8px 11px 0 rgba(61, 37, 24, 0.22); }
.step-card-header {
    padding: 18px 18px 6px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.step-card:nth-child(1) .step-card-header { background: var(--orange) !important; }
.step-card:nth-child(2) .step-card-header { background: var(--teal) !important; }
.step-card:nth-child(3) .step-card-header { background: var(--yellow) !important; }
.step-card:nth-child(4) .step-card-header { background: var(--green) !important; }
.step-card:nth-child(5) .step-card-header { background: var(--teal) !important; }
.step-card-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(61, 37, 24, 0.5) 1px, transparent 1.3px);
    background-size: 14px 14px;
    opacity: 0.18;
    pointer-events: none;
}
.step-card-icon img { width: 150px; height: auto; position: relative; z-index: 1; }
.step-card-number {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--display);
    background: var(--cream);
    border: 2.5px solid var(--ink);
    color: var(--ink);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.step-card-body { padding: 18px 20px 22px; border-top: 3px solid var(--ink); flex: 1; }
.step-card-title { font-size: 1.06rem; text-transform: uppercase; margin-bottom: 8px; }
.step-card-text { font-size: 0.9rem; line-height: 1.55; }

/* ============ PRICING: MENU BOARD ============ */
.pricing { background: var(--ink); border-bottom: 3px solid var(--ink); position: relative; }
.pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(253, 246, 233, 0.5) 1px, transparent 1.3px);
    background-size: 26px 26px;
    opacity: 0.06;
}
.pricing .container { position: relative; }
.pricing .editorial-eyebrow { color: var(--yellow); }
.pricing .editorial-head h2 { color: var(--cream); }
.pricing .editorial-head p { color: rgba(253, 246, 233, 0.8); }
.pricing-aside { color: rgba(253, 246, 233, 0.85); font-size: 0.95rem; line-height: 1.9; }
.pricing-aside a { color: var(--yellow); font-weight: 700; }
.pricing-head-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px; align-items: end; }
.pricing-head-grid .editorial-head { margin-bottom: 28px; }
.menu-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ticket {
    background: var(--cream);
    border-radius: 12px;
    padding: 30px 28px 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    mask-image: radial-gradient(circle 11px at 0 56%, transparent 98%, black), radial-gradient(circle 11px at 100% 56%, transparent 98%, black);
    mask-composite: intersect;
    -webkit-mask-image: radial-gradient(circle 11px at 0 56%, transparent 98%, black), radial-gradient(circle 11px at 100% 56%, transparent 98%, black);
    -webkit-mask-composite: source-in;
}
.ticket.star { background: #FFF3DC; }
.ticket .lane {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: 6px;
}
.ticket h3 { font-size: 1.5rem; margin-bottom: 4px; }
.ticket .ticket-desc { font-size: 0.9rem; margin-bottom: 10px; }
.ticket .price { font-family: var(--display); font-size: 2.3rem; color: var(--orange); line-height: 1.1; }
.ticket .price small { font-family: var(--body); font-size: 0.95rem; font-weight: 600; color: var(--brown); }
.ticket .setup { font-size: 0.86rem; opacity: 0.85; margin-bottom: 16px; }
.ticket .dashes { border-top: 2px dashed rgba(92, 61, 46, 0.35); margin: 4px 0 16px; }
.ticket ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 0.93rem; margin-bottom: 22px; flex: 1; }
.ticket li { display: flex; gap: 8px; align-items: baseline; }
.ticket li::before { content: "\2714"; color: var(--teal-dark); font-size: 0.85em; }
.ticket .btn { width: 100%; }
.ticket-badge {
    position: absolute;
    top: 22px;
    right: 20px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 999px;
    transform: rotate(3deg);
}
.menu-note {
    margin-top: 30px;
    text-align: center;
    color: rgba(253, 246, 233, 0.85);
    font-size: 0.95rem;
    position: relative;
}
.menu-note a { color: var(--yellow); font-weight: 700; }
.menu-note strong { color: var(--cream); }

/* ============ WHY LWG ============ */
.lwg-manifesto .editorial-head { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: end; }
.lwg-manifesto-signature {
    font-family: var(--script);
    font-size: 1.6rem;
    color: var(--teal-dark);
    display: inline-block;
    transform: rotate(-2deg);
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 3px solid var(--ink);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 8px 8px 0 rgba(61, 37, 24, 0.15);
}
.why-cell { padding: 34px 34px 30px; border-bottom: 3px solid var(--ink); }
.why-cell:nth-child(odd) { border-right: 3px solid var(--ink); }
.why-cell:nth-child(3), .why-cell:nth-child(4) { border-bottom: none; }
.why-cell .k { font-family: var(--script); font-size: 1.7rem; color: var(--orange); display: block; margin-bottom: 6px; }
.why-cell h3 { font-size: 1.12rem; text-transform: uppercase; margin-bottom: 8px; }
.why-cell p { font-size: 0.95rem; }

/* ============ FAQ ============ */
.faq-accordion { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.faq-item-accordion {
    border: 3px solid var(--ink);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.12);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--display);
    font-size: 1.02rem;
    color: var(--ink);
    padding: 18px 22px;
}
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.25s ease; }
.faq-item-accordion.active .faq-icon { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item-accordion.active .faq-answer { max-height: 400px; }
.faq-answer p { padding: 0 22px 20px; font-size: 0.97rem; }
/* No-JS fallback: answers stay open */
html:not(.js) .faq-answer { max-height: none; }

/* ============ INDUSTRIES / GOOD FIT ============ */
.good-fit-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.good-fit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 20px 12px 16px;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ink);
    text-align: center;
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.good-fit-card:hover { transform: translateY(-5px); box-shadow: 6px 9px 0 rgba(61, 37, 24, 0.18); }
.good-fit-card img { width: 84px; height: 84px; object-fit: contain; }
.examples-cta { margin-top: 30px; }

/* ============ CONTACT / CLOSER ============ */
.contact-section {
    background:
        radial-gradient(circle at 50% 115%, rgba(232, 93, 36, 0.16), transparent 60%),
        var(--cream-dark);
    position: relative;
    overflow: hidden;
    padding-bottom: 170px;
}
.contact-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(rgba(232, 93, 36, 0.07) 0deg 8deg, transparent 8deg 16deg);
    border-radius: 50%;
}
.contact-section .container { position: relative; z-index: 2; }
.contact-section .skyline { z-index: 1; height: 92px; }
.contact-primary { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.contact-script {
    font-family: var(--script);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    color: var(--teal-dark);
    display: inline-block;
    transform: rotate(-2deg);
}
.contact-primary h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    text-transform: uppercase;
    line-height: 1.02;
    margin-bottom: 18px;
}
.contact-primary-subtitle { font-size: 1.06rem; margin-bottom: 28px; }
.btn-call-large { font-size: 1.15rem; padding: 16px 32px; transform: rotate(-1deg); }
.btn-call-large:hover { transform: rotate(0deg) translate(-2px, -2px); }
.contact-hours { font-size: 0.9rem; opacity: 0.8; margin-top: 22px; }
.contact-form-wrapper {
    max-width: 760px;
    margin: 0 auto;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 14px;
    padding: 36px 38px 34px;
    box-shadow: 8px 8px 0 rgba(61, 37, 24, 0.2);
}
.contact-form-wrapper h3 { font-size: 1.25rem; margin-bottom: 20px; }
.simple-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group-full { grid-column: 1 / -1; }
.form-group label { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.form-group input, .form-group textarea {
    font-family: var(--body);
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 8px;
    padding: 11px 14px;
}
.form-group input:focus, .form-group textarea:focus {
    outline: 3px solid rgba(232, 93, 36, 0.4);
    border-color: var(--orange);
}
.btn-submit { width: 100%; margin-top: 18px; font-size: 1.05rem; }
.closer-lou {
    position: absolute;
    right: 6%;
    bottom: 78px;
    width: clamp(130px, 14vw, 200px);
    filter: drop-shadow(0 10px 18px rgba(61, 37, 24, 0.25));
    z-index: 2;
}

/* ============ FOOTER ============ */
.footer { background: var(--ink); color: rgba(253, 246, 233, 0.85); padding: 56px 0 38px; font-size: 0.92rem; }
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(253, 246, 233, 0.18);
    margin-bottom: 26px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col-heading {
    color: var(--yellow);
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.footer-col a:hover { color: var(--yellow); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.footer-contact a, .footer-legal a { color: var(--cream); font-weight: 600; }
.footer-contact a:hover, .footer-legal a:hover { color: var(--yellow); }
.footer-divider { opacity: 0.4; padding: 0 8px; }
.footer-copyright { opacity: 0.7; }
.footer-mascot { display: flex; justify-content: center; margin-top: 26px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .nav-links { gap: 18px; font-size: 0.88rem; }
    .logo-text { font-size: 1.05rem; white-space: nowrap; }
}
@media (max-width: 980px) {
    section { padding: 68px 0; }
    .hero-container { grid-template-columns: 1fr; padding-bottom: 140px; }
    .hero-mascot { order: -1; }
    .sunburst { width: 420px; height: 420px; }
    .hero-mascot img { width: 280px; }
    .hero-stamp { width: 92px; height: 92px; font-size: 0.68rem; right: 12%; }
    .skyline.front { height: 78px; }
    .skyline.back { height: 112px; }
    .proof-grid { grid-template-columns: 1fr; }
    .steps-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .menu-board { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .pricing-head-grid { grid-template-columns: 1fr; gap: 8px; }
    .why-grid { grid-template-columns: 1fr; }
    .why-cell:nth-child(odd) { border-right: none; }
    .why-cell:nth-child(3) { border-bottom: 3px solid var(--ink); }
    .lwg-manifesto .editorial-head { grid-template-columns: 1fr; }
    .situations-row { grid-template-columns: 64px 1fr; }
    .situations-row-body { grid-column: 1 / -1; }
    .good-fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-section { padding-bottom: 120px; }
    .contact-section .skyline { height: 70px; }
    .closer-lou { position: static; display: block; margin: 26px auto 0; width: 150px; }
}
@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cream);
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 28px;
        border-bottom: 3px solid var(--ink);
        gap: 16px;
    }
    .nav-links.active { display: flex; }
    .mobile-menu-btn { display: flex; }
}
@media (max-width: 600px) {
    .topline .est { display: none; }
    .topline .container { justify-content: center; }
    .nav-container { padding: 12px 18px; gap: 12px; }
    .logo-mascot { width: 34px; height: 38px; }
    .logo-text { font-size: 0.98rem; }
    .logo-sub { display: none; }
    .nav-cta { padding: 10px 14px; font-size: 0.85rem; flex-shrink: 0; }
    .container { padding: 0 20px; }
    .hero-container { padding-bottom: 175px; }
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn { width: 100%; }
    .hero-features { grid-template-columns: 1fr; }
    .sunburst { width: 320px; height: 320px; }
    .hero-mascot img { width: 220px; }
    .hero-stamp { width: 84px; height: 84px; font-size: 0.62rem; right: 4%; bottom: 2%; }
    .skyline.front { height: 64px; }
    .skyline.back { height: 92px; }
    .steps-cards { grid-template-columns: 1fr; }
    .good-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .simple-form-grid { grid-template-columns: 1fr; }
    .contact-form-wrapper { padding: 26px 20px 24px; }
    .polaroid figcaption { flex-direction: column; gap: 2px; }
    .footer-columns { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .why-cell { padding: 26px 22px 24px; }
    .situations-row { padding: 24px 20px; }
}

/* ============================================================
   v2 SUBPAGE COMPONENT LIBRARY (added 2026-06-11)
   Everything below this banner extends v2.css so every page
   family (services, industries, locations, articles, compare,
   work, legal, contact) can migrate off styles.css. Components
   keep their responsive rules inline so the library is
   self-contained. Demo of every component:
   /_dev/v2-component-lab.html (noindex).

   TABLE OF CONTENTS
     C0  Legacy token aliases (styles.css -> v2 tokens)
     C1  Utilities: .v2-section, .eyebrow, .badge-row,
         .skyline-divider, .section-header legacy cover
     C2  Page hero: .page-hero (+ --teal / --orange variants)
     C3  Breadcrumbs: .breadcrumbs
     C4  Card grid: .v2-cards / .v2-card
     C5  Compact pricing: .price-table--inline (menu-board variant)
     C6  Form shell: .form-shell + contact/homepage form contracts
     C7  Article typography: .article-body, .toc-box,
         .article-byline, .article-cta, .related-articles
     C8  Comparison tables: .compare-table
     C9  Inner CTA band: .cta-band (+ --paper variant)
     C10 Mobile sticky CTA bar: .sticky-cta
     C11 Lou placement helpers: .lou-float, .lou-hero-corner,
         .lou-cta
     C12 Legacy structural cover: styles.css classes used on 40+
         pages, restyled in the v2 aesthetic so pages can swap
         stylesheets before their markup is migrated
   ============================================================ */

/* ============ C0 LEGACY TOKEN ALIASES ============
   Subpages carry inline styles and page-level <style> blocks that
   reference the styles.css token names. Mapping them here means a
   page can swap stylesheets without anything going transparent.
   Tan has no v2 equivalent, so the styles.css hex values carry over. */
:root {
    --color-cream: var(--cream);
    --color-cream-dark: var(--cream-dark);
    --color-brown: var(--brown);
    --color-brown-dark: var(--ink);
    --color-orange: var(--orange);
    --color-orange-light: #F07D4A;
    --color-teal: var(--teal);
    --color-teal-dark: var(--teal-dark);
    --color-yellow: var(--yellow);
    --color-yellow-light: #F0C05A;
    --color-tan: #D4A574;
    --color-tan-light: #E8C9A5;
    --font-display: var(--display);
    --font-heading: var(--display);
    --font-script: var(--script);
    --font-body: var(--body);
    --shadow-sm: 3px 3px 0 rgba(61, 37, 24, 0.12);
    --shadow-md: 5px 5px 0 rgba(61, 37, 24, 0.15);
    --shadow-lg: 7px 7px 0 rgba(61, 37, 24, 0.18);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ============ C1 UTILITIES ============ */
/* Section rhythm for non-<section> wrappers or overrides */
.v2-section { padding: 92px 0; }
.v2-section--tight { padding: 56px 0; }
.v2-section--paper { background: var(--paper); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }

/* Yellowtail eyebrow, usable anywhere (matches .editorial-eyebrow) */
.eyebrow {
    font-family: var(--script);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    color: var(--orange);
    display: inline-block;
    transform: rotate(-2deg);
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: normal;
}
.eyebrow--teal { color: var(--teal-dark); }

/* Pill badge row (trust chips, package tags, service tags) */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cream);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    box-shadow: 3px 3px 0 rgba(61, 37, 24, 0.2);
}
.badge--orange { background: var(--orange); color: var(--cream); }
.badge--teal { background: var(--teal); color: var(--cream); }
.badge--yellow { background: var(--yellow); color: var(--ink); }

/* Static skyline divider between sections (reuses the --sky token).
   Drop in as <div class="skyline-divider" aria-hidden="true"></div> */
.skyline-divider {
    height: 90px;
    background-image: var(--sky);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
    pointer-events: none;
}
.skyline-divider--flip { transform: scaleY(-1); }

/* Legacy cover: hundreds of subpages use .section-header for a
   centered section intro. Minimal mapping so unmigrated sections
   still read correctly on v2. */
.section-header { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.section-header h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.04;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.section-header h2 em { font-style: normal; color: var(--orange); }
.section-header p { font-size: 1.05rem; }

@media (max-width: 980px) {
    .v2-section { padding: 68px 0; }
    .skyline-divider { height: 64px; }
}

/* ============ C2 PAGE HERO (SUBPAGES) ============
   Smaller-scale hero for inner pages. Markup:
   <section class="page-hero page-hero--teal">
     <div class="container">
       <span class="eyebrow">Hey Louisville,</span>
       <h1>Restaurant websites that <em>fill tables</em>.</h1>
       <p class="page-hero-sub">...</p>
     </div>
     <img class="lou-hero-corner" ...>   (optional, see C11)
   </section> */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    border-bottom: 3px solid var(--ink);
    padding: 52px 0 60px;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brown) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: 0.08;
    mask-image: linear-gradient(115deg, transparent 48%, black 92%);
    -webkit-mask-image: linear-gradient(115deg, transparent 48%, black 92%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 4px; }
.page-hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.3rem);
    line-height: 1.02;
    text-transform: uppercase;
    max-width: 22ch;
}
.page-hero h1 em, .page-hero h1 .accent { font-style: normal; color: var(--orange); }
/* The ink rule under the headline */
.page-hero h1::after {
    content: "";
    display: block;
    width: 84px;
    height: 6px;
    border-radius: 3px;
    background: var(--ink);
    margin-top: 18px;
}
.page-hero-sub { font-size: 1.08rem; line-height: 1.65; max-width: 58ch; margin-top: 16px; }
.page-hero .badge-row, .page-hero .hero-ctas { margin-top: 22px; }
/* Tinted variants, matching the services hero treatment */
.page-hero--teal {
    background:
        radial-gradient(circle at 82% 22%, rgba(74, 155, 163, 0.30) 0%, rgba(74, 155, 163, 0) 52%),
        var(--cream);
}
.page-hero--orange {
    background:
        radial-gradient(circle at 82% 22%, rgba(232, 93, 36, 0.22) 0%, rgba(232, 93, 36, 0) 52%),
        var(--cream);
}
.page-hero--orange .eyebrow { color: var(--teal-dark); }
.page-hero--orange h1 em, .page-hero--orange h1 .accent { color: var(--orange-deep); }
@media (max-width: 768px) {
    .page-hero { padding: 40px 0 48px; }
}

/* ============ C3 BREADCRUMBS ============
   <nav class="breadcrumbs" aria-label="Breadcrumb">
     <ol><li><a href="/">Home</a></li><li><a href="/industries/">Industries</a></li>
     <li aria-current="page">Restaurants</li></ol>
   </nav>
   Also styles a flat a + span.sep pattern. */
.breadcrumbs {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 16px 0 0;
    position: relative;
    z-index: 3;
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.breadcrumbs li { display: flex; align-items: center; gap: 10px; }
.breadcrumbs li + li::before { content: "\203A"; color: var(--orange); font-size: 1.1em; font-weight: 800; }
.breadcrumbs .sep { color: var(--orange); font-weight: 800; padding: 0 4px; }
.breadcrumbs a { color: var(--ink); border-bottom: 2px solid transparent; }
.breadcrumbs a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.breadcrumbs [aria-current="page"] { opacity: 0.65; }
/* Inside a page hero the crumbs sit above the eyebrow */
.page-hero .breadcrumbs { padding: 0 0 18px; }

/* ============ C4 GENERIC CARD GRID ============
   Link grids for services, industries, and locations.
   <div class="v2-cards">
     <a class="v2-card" href="...">
       <span class="v2-card-icon"><img ...></span>
       <h3>HVAC Websites</h3>
       <p>...</p>
       <span class="v2-card-cta">See how it works</span>
     </a>
   </div> */
.v2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.v2-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 26px 24px 22px;
    color: var(--brown);
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.v2-card:hover { transform: translateY(-5px); box-shadow: 6px 9px 0 rgba(61, 37, 24, 0.18); }
.v2-card-icon { display: flex; align-items: center; }
.v2-card-icon img { width: 72px; height: 72px; object-fit: contain; }
.v2-card h3 { font-size: 1.06rem; text-transform: uppercase; }
.v2-card p { font-size: 0.92rem; line-height: 1.55; }
.v2-card-cta { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: 0.88rem; color: var(--teal-dark); }
.v2-card-cta::after { content: " \2192"; }
a.v2-card:hover .v2-card-cta { text-decoration: underline; }
@media (max-width: 980px) {
    .v2-cards, .v2-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .v2-cards, .v2-cards--2, .v2-cards--4 { grid-template-columns: 1fr; }
}

/* ============ C5 COMPACT PRICING (INNER PAGES) ============
   Same .ticket markup contract as the homepage menu-board (lane,
   h3, ticket-desc, price, setup, dashes, ul, btn) but designed for
   cream/paper backgrounds: ink border + offset shadow instead of
   the dark board and punched-hole mask. */
.price-table--inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.price-table--inline .ticket {
    mask-image: none;
    -webkit-mask-image: none;
    border: 3px solid var(--ink);
    border-radius: 12px;
    box-shadow: 5px 5px 0 rgba(61, 37, 24, 0.18);
    padding: 26px 24px 22px;
    background: #fff;
}
.price-table--inline .ticket.star { background: #FFF3DC; }
.price-table--inline .ticket h3 { font-size: 1.35rem; }
.price-table--inline .ticket .price { font-size: 2rem; }
.price-table--inline .ticket-badge { top: -16px; right: 16px; box-shadow: 3px 3px 0 rgba(61, 37, 24, 0.3); }
@media (max-width: 980px) {
    .price-table--inline { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .price-table--inline .ticket-badge { top: 18px; }
}

/* ============ C6 FORM SHELL ============
   Generalized form styling. Compatible with BOTH form contracts:
   - contact/index.html: .contact-page-form > .form-shell >
     .form-intro + form > .contact-form-grid > .form-group /
     .form-group-full, .btn-submit, .contact-form-fineprint
   - homepage: .contact-form-wrapper + .simple-form-grid (already
     styled above; the shared .form-group rules below extend them
     with selects and error states). */
.contact-page-form { padding: 72px 0; background: var(--cream); }
.form-shell {
    max-width: 720px;
    margin: 0 auto;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 14px;
    padding: 36px 38px 34px;
    box-shadow: 8px 8px 0 rgba(61, 37, 24, 0.2);
}
.form-shell h1, .form-shell h2, .form-shell h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 8px; }
.form-intro { font-size: 0.98rem; margin-bottom: 22px; }
.contact-form-grid, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
/* Field shells: extend the homepage .form-group rules to selects
   and to fields living inside .form-shell */
.form-group select,
.form-shell input:not([type="checkbox"]):not([type="radio"]),
.form-shell select,
.form-shell textarea {
    font-family: var(--body);
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 8px;
    padding: 11px 14px;
    width: 100%;
}
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D2518' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}
.form-group select:focus,
.form-shell input:focus,
.form-shell select:focus,
.form-shell textarea:focus {
    outline: 3px solid rgba(232, 93, 36, 0.4);
    border-color: var(--orange);
}
.form-shell label { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.form-shell textarea { resize: vertical; min-height: 110px; }
::placeholder { color: rgba(92, 61, 46, 0.55); opacity: 1; }
/* Error states: add .has-error to .form-group or aria-invalid to the field */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea,
.form-shell [aria-invalid="true"] {
    border-color: #B8402C;
    outline: 3px solid rgba(184, 64, 44, 0.25);
}
.form-error { color: #B8402C; font-weight: 700; font-size: 0.8rem; }
/* reCAPTCHA container (Netlify injects the widget) */
.form-recaptcha, .form-shell [data-netlify-recaptcha] {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    min-height: 78px;
}
.form-shell .btn-submit { width: 100%; margin-top: 18px; font-size: 1.05rem; }
.contact-form-fineprint, .form-fineprint { font-size: 0.8rem; margin-top: 12px; opacity: 0.75; text-align: center; }
.contact-form-fineprint a, .form-fineprint a { color: var(--orange-deep); font-weight: 700; }
/* Live character hint, injected by js/main.js after textarea[minlength] */
.char-hint {
    font-size: 0.8rem;
    color: rgba(92, 61, 46, 0.75);
    text-align: left;
    margin-top: 4px;
}
/* Bot time-trap notice, injected after the submit button. Warning
   tone (yellow family), not error red: the visitor is human, they
   just clicked fast. */
.form-timetrap-note {
    margin-top: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    background: #FFF3DC;
    border: 2.5px solid var(--yellow);
    border-radius: 8px;
    padding: 10px 14px;
}
/* Contact page hero CTA row (call/text first, form second) */
.contact-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 14px; }
.contact-hero-alt { font-size: 0.95rem; opacity: 0.9; }
.contact-hero-alt a { color: var(--orange-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form-shell [data-netlify-recaptcha] iframe, .form-recaptcha iframe { max-width: 100%; }
@media (max-width: 600px) {
    .contact-form-grid, .form-grid { grid-template-columns: 1fr; }
    .form-shell { padding: 26px 20px 24px; }
    .contact-hero-ctas { flex-direction: column; }
    .contact-hero-ctas .btn { width: 100%; }
}

/* ============ C7 ARTICLE TYPOGRAPHY ============
   Long-form prose for /articles/ and /compare/. Wrap the article
   in <div class="article-body"> and write plain HTML inside. */
.article-body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.04rem;
    line-height: 1.75;
}
.article-body > p { margin-bottom: 1.3em; }
.article-body h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
    margin: 2em 0 0.6em;
}
.article-body h2 em { font-style: normal; color: var(--orange); }
.article-body h3 { font-size: 1.2rem; margin: 1.7em 0 0.5em; }
.article-body h4 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 1.5em 0 0.4em; }
/* Prose links need affordance (the global rule strips underlines) */
.article-body a {
    color: var(--orange-deep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(232, 93, 36, 0.45);
    text-underline-offset: 3px;
}
.article-body a:hover { text-decoration-color: var(--orange); }
.article-body ul, .article-body ol { padding-left: 1.5em; margin-bottom: 1.3em; }
.article-body li { margin-bottom: 0.45em; }
.article-body li::marker { color: var(--orange); font-weight: 800; }
.article-body blockquote {
    border-left: 6px solid var(--ink);
    background: var(--paper);
    border-radius: 0 10px 10px 0;
    padding: 18px 24px;
    margin: 1.6em 0;
    font-size: 1.04rem;
}
.article-body blockquote p { margin-bottom: 0.5em; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote cite { display: block; font-style: normal; font-weight: 700; font-size: 0.85rem; color: var(--ink); margin-top: 6px; }
.article-body table {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid var(--ink);
    background: #fff;
    font-size: 0.93rem;
    line-height: 1.5;
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.15);
    margin: 1.6em 0;
}
.article-body th {
    background: var(--ink);
    color: var(--cream);
    font-family: var(--body);
    font-weight: 800;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 14px;
}
.article-body td { padding: 12px 14px; border-top: 2px solid var(--cream-dark); vertical-align: top; }
.article-body tbody tr:nth-child(even) { background: var(--paper); }
.article-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.86em;
    background: var(--paper);
    border: 1.5px solid rgba(61, 37, 24, 0.25);
    border-radius: 4px;
    padding: 0.1em 0.4em;
}
.article-body pre {
    background: var(--ink);
    color: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 18px 20px;
    overflow-x: auto;
    margin: 1.6em 0;
    font-size: 0.88rem;
    line-height: 1.6;
}
.article-body pre code { background: none; border: none; padding: 0; font-size: 1em; }
.article-body img {
    display: block;
    border: 3px solid var(--ink);
    border-radius: 8px;
    box-shadow: 5px 5px 0 rgba(61, 37, 24, 0.15);
    margin: 1.6em 0;
}
.article-body figure { margin: 1.6em 0; }
.article-body figure img { margin: 0; }
.article-body figcaption { font-size: 0.85rem; text-align: center; opacity: 0.8; margin-top: 10px; }
.article-body hr { border: none; border-top: 2px dashed rgba(92, 61, 46, 0.35); margin: 2.4em 0; }

/* Table of contents box */
.toc-box {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 22px 26px;
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.15);
    margin: 0 0 2.2em;
}
.toc-box-title {
    font-family: var(--display);
    font-size: 0.95rem;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px;
}
.toc-box ol { list-style: none; padding-left: 0; margin-bottom: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.toc-box li { counter-increment: toc; margin-bottom: 0; display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; }
.toc-box li::before { content: counter(toc, decimal-leading-zero); font-family: var(--display); font-size: 0.8rem; color: var(--orange); }
.toc-box a { color: var(--brown); font-weight: 600; text-decoration: none; }
.toc-box a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* Author / byline block */
.article-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 2px dashed rgba(92, 61, 46, 0.35);
    border-bottom: 2px dashed rgba(92, 61, 46, 0.35);
    margin: 0 0 2.2em;
}
.article-byline img { width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; object-fit: cover; box-shadow: none; margin: 0; }
.article-byline-name { font-weight: 800; color: var(--ink); display: block; line-height: 1.3; }
.article-byline-meta { font-size: 0.84rem; opacity: 0.75; display: block; }

/* In-article CTA box */
.article-cta {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 12px;
    box-shadow: 6px 6px 0 rgba(61, 37, 24, 0.18);
    padding: 26px 28px;
    margin: 2.2em 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 28px;
    align-items: center;
}
.article-cta h3, .article-cta .article-cta-title {
    font-family: var(--display);
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 8px;
}
.article-cta p { font-size: 0.96rem; margin-bottom: 14px; }
.article-cta p:last-of-type { margin-bottom: 0; }
.article-cta .btn { text-decoration: none; }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.article-cta .lou-cta { width: clamp(96px, 11vw, 140px); }
@media (max-width: 600px) {
    .article-cta { grid-template-columns: 1fr; text-align: center; }
    .article-cta-actions { justify-content: center; }
    .article-cta .lou-cta { margin: 0 auto; }
}

/* Related articles grid (also covers legacy .related-grid/.related-card) */
.related-articles, .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 22px 22px 18px;
    color: var(--brown);
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
    font-weight: 400;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 6px 8px 0 rgba(61, 37, 24, 0.18); }
.related-card .kicker {
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
}
.related-card h3 { font-size: 1rem; line-height: 1.25; }
.related-card p { font-size: 0.88rem; line-height: 1.55; }
@media (max-width: 980px) {
    .related-articles, .related-grid { grid-template-columns: 1fr; }
}

/* ============ C8 COMPARISON TABLES ============
   <div class="compare-table-wrap">
     <table class="compare-table">
       <thead><tr><th>Feature</th><th>WordPress</th><th class="is-lwg">Custom-built</th></tr></thead>
       <tbody><tr><td>Speed</td><td class="no">Plugin-heavy</td><td class="yes is-lwg">Hand-built, fast</td></tr></tbody>
     </table>
   </div>
   thead is sticky against page scroll; the wrapper only adds
   horizontal scrolling on small screens. */
.compare-table-wrap {
    border: 3px solid var(--ink);
    border-radius: 12px;
    background: #fff;
    box-shadow: 6px 6px 0 rgba(61, 37, 24, 0.15);
    overflow: hidden;
}
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; line-height: 1.5; }
.compare-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 14px 16px;
}
/* When the navbar is sticky too, offset the header below it */
.compare-table--below-nav th { top: 76px; }
.compare-table td { padding: 13px 16px; border-bottom: 2px solid var(--cream-dark); vertical-align: top; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td:first-child { font-weight: 700; color: var(--ink); }
/* Highlight the LWG column like the starred pricing ticket */
.compare-table .is-lwg { background: #FFF3DC; }
.compare-table th.is-lwg { background: var(--orange); color: var(--cream); }
/* Check / x styling: <span class="check"></span> text, or put
   .yes / .no on the cell for a leading mark */
.compare-table .check, .compare-table td.yes::before { color: var(--green); font-weight: 800; }
.compare-table .x, .compare-table td.no::before { color: #B8402C; font-weight: 800; }
.compare-table td.yes::before { content: "\2714  "; }
.compare-table td.no::before { content: "\2718  "; }
@media (max-width: 768px) {
    .compare-table-wrap { overflow-x: auto; }
    .compare-table { min-width: 560px; }
    .compare-table th { position: static; }
}

/* ============ C9 INNER CTA BAND ============
   Full-width closer band for every inner page bottom.
   <section class="cta-band">
     <div class="container cta-band-inner">
       <div>
         <span class="eyebrow">Alright, Louisville,</span>
         <h2>Let's get you found.</h2>
         <p>...</p>
         <div class="cta-band-actions">
           <a class="btn btn-primary" href="tel:5023054043">Call ...</a>
           <a class="btn btn-secondary" href="sms:5023054043">Text ...</a>
         </div>
       </div>
       <img class="lou-cta" ...>   (optional)
     </div>
   </section> */
.cta-band {
    background: var(--ink);
    color: rgba(253, 246, 233, 0.88);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(253, 246, 233, 0.5) 1px, transparent 1.3px);
    background-size: 26px 26px;
    opacity: 0.06;
    pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; }
.cta-band .eyebrow { color: var(--yellow); }
.cta-band h2 {
    color: var(--cream);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.04;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.cta-band p { font-size: 1.02rem; max-width: 56ch; margin-bottom: 24px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Ink shadows vanish on the ink band; use a dark drop instead */
.cta-band .btn { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); font-size: 1.08rem; padding: 16px 34px; border-width: 3px; }
.cta-band .btn:hover { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.cta-band-phone {
    display: inline-block;
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    color: var(--yellow);
    margin-bottom: 10px;
}
.cta-band-note { font-size: 0.88rem; opacity: 0.75; margin-bottom: 0; }
/* Paper variant for pages whose footer already sits on ink */
.cta-band--paper {
    background: var(--paper);
    color: var(--brown);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}
.cta-band--paper::before { background-image: radial-gradient(var(--brown) 1px, transparent 1.3px); opacity: 0.07; }
.cta-band--paper h2 { color: var(--ink); }
.cta-band--paper .eyebrow { color: var(--orange); }
.cta-band--paper .cta-band-phone { color: var(--orange-deep); }
.cta-band--paper .btn { box-shadow: 4px 4px 0 var(--ink); }
.cta-band--paper .btn:hover { box-shadow: 6px 6px 0 var(--ink); }
@media (max-width: 768px) {
    .cta-band { padding: 56px 0; }
    .cta-band-inner { grid-template-columns: 1fr; text-align: center; }
    .cta-band p { margin-left: auto; margin-right: auto; }
    .cta-band-actions { justify-content: center; }
    .cta-band-actions .btn { flex: 1 1 100%; }
    .cta-band .lou-cta { margin: 0 auto; }
}

/* ============ C10 MOBILE STICKY CTA BAR ============
   Markup contract (injected by js/main.js):
   <div class="sticky-cta">
     <a class="sticky-cta__btn sticky-cta__btn--call" href="tel:5023054043">Call</a>
     <a class="sticky-cta__btn sticky-cta__btn--text" href="sms:5023054043">Text</a>
     <button class="sticky-cta__btn sticky-cta__btn--book" data-cal-link="louisville-web-guy/15min">Book</button>
   </div>
   The JS also sets body.has-sticky-cta so content clears the bar.
   Mobile only: hidden at >768px. */
.sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    background: var(--cream);
    border-top: 3px solid var(--ink);
    padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 54px;
    font-family: var(--body);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--cream);
    padding: 12px 8px;
}
.sticky-cta__btn + .sticky-cta__btn { border-left: 3px solid var(--ink); }
.sticky-cta__btn--call { background: var(--orange); }
.sticky-cta__btn--text { background: var(--teal); }
.sticky-cta__btn--book { background: var(--yellow); color: var(--ink); }
.sticky-cta__btn:active { filter: brightness(0.92); }
@media (max-width: 768px) {
    .sticky-cta { display: flex; }
    body.has-sticky-cta { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
}

/* ============ C11 LOU PLACEMENT HELPERS ============
   Lou is a visual mascot only; captions stay in Hunter's voice. */
/* Float-right figure inside article prose */
.lou-float {
    float: right;
    width: min(190px, 38%);
    margin: 6px 0 14px 24px;
    text-align: center;
}
.lou-float img {
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    filter: drop-shadow(0 10px 16px rgba(61, 37, 24, 0.22));
}
.lou-float figcaption {
    font-family: var(--script);
    font-size: 1.05rem;
    color: var(--teal-dark);
    transform: rotate(-2deg);
    margin-top: 6px;
    opacity: 1;
}
/* Lou standing in the corner of a .page-hero */
.lou-hero-corner {
    position: absolute;
    right: 4%;
    bottom: -6px;
    width: clamp(110px, 15vw, 200px);
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(61, 37, 24, 0.25));
}
/* Companion Lou inside .cta-band / .article-cta */
.lou-cta {
    width: clamp(120px, 14vw, 180px);
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(61, 37, 24, 0.35));
}
@media (max-width: 768px) {
    .lou-hero-corner { display: none; }
    .lou-float { width: min(150px, 42%); margin: 4px 0 10px 16px; }
}
@media (max-width: 380px) {
    .sticky-cta__btn { font-size: 0.8rem; letter-spacing: 0.02em; }
}

/* ============ C12 LEGACY STRUCTURAL COVER ============
   These class names ship in styles.css and appear on 40-130 live
   pages (see _dev/v2-coverage-report.md). Covering the EXISTING
   names here, restyled to the v2 aesthetic, lets pages swap
   stylesheets without mass markup renames. Page-local <style>
   blocks (location/article/legal heroes etc.) travel with their
   pages and only needed the C0 token aliases.
   Pure modifier classes (.nav-cta-primary, .btn-call, .hidden via
   inline style) intentionally have no rules: they ride on .nav-cta
   and .btn. */

/* --- Hero/section text helpers --- */
.hero-subhead { font-size: 1.13rem; line-height: 1.65; max-width: 600px; margin-bottom: 22px; }
.serving-text { font-size: 0.92rem; opacity: 0.8; }
.section-subtitle { font-size: 1.08rem; margin-top: 10px; }

/* --- Trust badge rows (used inside heroes and CTA bands) --- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 24px; }
.trust-badge { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; }
.trust-badge svg { width: 20px; height: 20px; flex-shrink: 0; }

/* --- Industry hero (62 pages) ---
   CONTRACT NOTE: industry pages override the background with a
   dark per-industry gradient in their own <style> block and rely
   on white text from the global sheet. Keep white-on-dark here;
   the v2 fallback background is the ink panel. */
.industry-hero {
    background: var(--ink);
    color: rgba(253, 246, 233, 0.92);
    padding: 72px 0;
    border-bottom: 3px solid var(--ink);
}
.industry-hero-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.industry-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--cream);
    margin-bottom: 18px;
}
.industry-hero p { font-size: 1.13rem; max-width: 600px; margin-bottom: 22px; }
.industry-mascot { width: 260px; }
.industry-mascot img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.3)); }

/* --- Story rows / familiar layout (42 pages) --- */
.story-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 28px;
}
.story-row--reversed .story-row__lou { order: -1; }
.story-row__lou { width: 240px; }
.story-row__lou img, .familiar-lou img { width: 100%; height: auto; filter: drop-shadow(0 18px 32px rgba(61, 37, 24, 0.2)); }
.familiar-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}
.familiar-lou { width: 240px; }

/* --- Persona cards (42 pages; pages override the accent color) --- */
.persona-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.persona-card {
    background: #fff;
    border: 3px solid var(--ink);
    border-left: 8px solid var(--orange);
    border-radius: 12px;
    padding: 26px 28px;
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.12);
}
.persona-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.persona-card p { font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* --- Stat callouts (67 pages use .stat-number/.stat-label) --- */
.stat-callout {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 26px 36px;
    text-align: center;
    margin: 32px auto;
    max-width: 440px;
    box-shadow: 5px 5px 0 rgba(61, 37, 24, 0.15);
}
.stat-number { display: block; font-family: var(--display); font-size: 2.6rem; color: var(--orange); line-height: 1.1; margin-bottom: 6px; }
.stat-label { font-size: 1rem; }

/* --- Numbered how-steps (42 pages; pages override the circle color) --- */
.how-steps { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.how-step { display: flex; gap: 18px; align-items: flex-start; }
.how-step__number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: var(--orange);
    color: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.05rem;
}
.how-step h3 { font-size: 1.08rem; margin-bottom: 4px; }
.how-step p { font-size: 0.95rem; line-height: 1.6; }

/* --- Simple FAQ list, non-accordion (106-115 pages) --- */
.faq-list { max-width: 820px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 4px 4px 0 rgba(61, 37, 24, 0.12);
}
.faq-item h3 { font-size: 1.05rem; margin-bottom: 10px; }
.faq-item p { font-size: 0.97rem; line-height: 1.7; }

/* --- Bottom CTA section (113 pages; same look as .cta-band) --- */
.cta-section, .industry-cta {
    background: var(--ink);
    color: rgba(253, 246, 233, 0.88);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-section::before, .industry-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(253, 246, 233, 0.5) 1px, transparent 1.3px);
    background-size: 26px 26px;
    opacity: 0.06;
    pointer-events: none;
}
.cta-section .container, .industry-cta .container { position: relative; z-index: 1; }
.cta-section h2, .industry-cta h2 {
    color: var(--cream);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.cta-section p, .industry-cta p { font-size: 1.05rem; max-width: 600px; margin: 0 auto 28px; }
.cta-section .btn, .industry-cta .btn { font-size: 1.05rem; padding: 15px 30px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.cta-section .btn:hover, .industry-cta .btn:hover { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.cta-section .serving-text, .industry-cta .serving-text { margin-top: 22px; margin-bottom: 0; color: rgba(253, 246, 233, 0.7); }
.cta-lou { display: block; width: 180px; height: auto; margin: 0 auto 24px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3)); }

/* --- Simple service list grid (44+ pages) --- */
.services-grid { display: grid; gap: 12px; }
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 8px;
    padding: 14px 18px;
    font-weight: 600;
}

/* --- Location x service combo link grids (50+ pages) --- */
.location-combo-links-section { padding: 80px 0; background: var(--paper); border-top: 3px solid var(--ink); }
.location-combo-links-section h2 { text-align: center; margin-bottom: 16px; }
.location-combo-links-section p { text-align: center; max-width: 820px; margin: 0 auto; }
.location-combo-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; }
.location-combo-link {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 16px 20px;
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-align: center;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.location-combo-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--cream); color: var(--orange); }

/* --- Subpage footer variants on the ink .footer --- */
/* Variant A (130 pages): centered .footer-nav links + copyright */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    font-weight: 600;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(253, 246, 233, 0.18);
}
.footer-nav a { color: rgba(253, 246, 233, 0.85); }
.footer-nav a:hover { color: var(--yellow); }
.footer-nav ~ .footer-copyright, .footer-nav + .footer-copyright { text-align: center; }
/* Variant B (36 location pages): brand / links / contact row */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px 28px;
    padding-bottom: 24px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(253, 246, 233, 0.18);
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); color: var(--cream); }
.footer-brand img { width: 40px; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 600; }
.footer-links a { color: rgba(253, 246, 233, 0.85); }
.footer-links a:hover { color: var(--yellow); }

/* --- Singular .breadcrumb (a few service/industry pages) --- */
.breadcrumb { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 16px 0 0; }
.breadcrumb a:hover { color: var(--orange); }

@media (max-width: 768px) {
    .industry-hero-content { grid-template-columns: 1fr; }
    .industry-mascot { width: 180px; margin: 0 auto; }
    .story-row, .familiar-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 56px; padding-bottom: 56px; }
    .familiar-layout { padding-top: 0; padding-bottom: 0; }
    .story-row--reversed .story-row__lou { order: 0; }
    .story-row__lou, .familiar-lou { width: 170px; margin: 0 auto; }
    .persona-cards { grid-template-columns: 1fr; }
    .footer-content { flex-direction: column; text-align: center; justify-content: center; }
}

/* iOS zoom guard: inputs under 16px trigger auto-zoom on focus on iPhones */
@media (max-width: 768px) {
  .form-group input, .form-group select, .form-group textarea,
  .form-shell input, .form-shell select, .form-shell textarea { font-size: 16px; }
}

/* ===== Operator hero + Online Side Dashboard (redesign-revival 2026-06) ===== */
/* Operator split hero (no mascot in the grid), retro "Online Side Dashboard" board
   in the right column, and the Lou + skyline "Made right here in Louisville." band.
   Re-dressed onto live v2 tokens: concept --brown-dark -> var(--ink); hairline -> 2px
   var(--ink); concept --rose -> var(--orange). No dangling var(). */

.operator-board {
    position: relative;
    padding: 22px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(92, 61, 46, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(92, 61, 46, 0.07) 1px, transparent 1px),
        var(--paper);
    background-size: 30px 30px;
    box-shadow: 7px 7px 0 var(--ink);
}
.board-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--ink);
}
.board-title .board-name {
    font-family: var(--display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink);
    line-height: 1;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--green);
    color: var(--cream);
    font-family: var(--body);
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    white-space: nowrap;
}
.status-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 0 2px rgba(253, 246, 233, 0.35);
    animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.ops-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}
.ops-card {
    padding: 14px;
    border: 2px solid var(--ink);
    border-top-width: 5px;
    border-radius: 8px;
    background: var(--cream);
    box-shadow: 3px 3px 0 var(--ink);
}
.ops-card:nth-child(1) { border-top-color: var(--orange); }
.ops-card:nth-child(2) { border-top-color: var(--teal); }
.ops-card:nth-child(3) { border-top-color: var(--yellow); }
.ops-card:nth-child(4) { border-top-color: var(--green); }
.ops-card:nth-child(5) { border-top-color: var(--brown); }
.ops-card:nth-child(6) { border-top-color: var(--orange); }
.ops-label {
    display: block;
    font-family: var(--display);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
    line-height: 1;
}
.ops-card .ops-state {
    display: block;
    margin-top: 7px;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--brown);
    line-height: 1.3;
}
.ops-card .ops-note {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    color: var(--brown);
    line-height: 1.4;
}
.ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--ink);
    overflow: hidden;
}
.ticker .ticker-tag {
    flex-shrink: 0;
    font-family: var(--display);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--yellow);
    border-radius: 4px;
    padding: 4px 8px;
    line-height: 1;
}
.ticker-line {
    display: flex;
    gap: 26px;
    white-space: nowrap;
    color: var(--cream);
    font-weight: 700;
    font-size: 0.8rem;
}
.ticker-line .ticker-item { display: inline-flex; align-items: center; gap: 8px; }
.ticker-line .ticker-item::before {
    content: "\25B8";
    color: var(--yellow);
}

/* ---- Option C layout: split hero (no mascot in grid), Lou + skyline as a band below ---- */
.hero.op-split .hero-container {
    padding-bottom: 64px;
    align-items: center;
}
.op-split .operator-board { width: 100%; }

/* Full-width band: Lou waving in front of the full skyline + the location chip */
.lou-band {
    position: relative;
    background:
        radial-gradient(circle at 50% 120%, rgba(229, 168, 54, 0.30) 0%, rgba(229, 168, 54, 0) 46%),
        var(--paper);
    border-bottom: 3px solid var(--ink);
    overflow: hidden;
    min-height: 230px;
}
.lou-band .band-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 28px 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.lou-band img.band-lou {
    width: min(190px, 42vw);
    height: auto;
    filter: drop-shadow(0 16px 26px rgba(61, 37, 24, 0.25));
    animation: floaty 4.5s ease-in-out infinite;
}
.band-line {
    max-width: 420px;
    text-align: left;
}
.band-line .band-script {
    font-family: var(--script);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    color: var(--teal-dark);
    transform: rotate(-2deg);
    display: inline-block;
    line-height: 1.1;
}
.band-line p {
    margin-top: 8px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--brown);
    max-width: 40ch;
}
.band-line .hero-location { margin-top: 14px; margin-bottom: 0; }

@media (max-width: 980px) {
    /* Live v2.css collapses .hero-container to a bare `1fr` (= minmax(auto,1fr))
       at <=980px. The board's nowrap ticker gives that column a huge max-content
       min, so it would overflow the viewport. Force a shrinkable track. */
    .hero.op-split .hero-container { grid-template-columns: minmax(0, 1fr); }
    /* Live v2.css sets .hero-mascot { order:-1 } at <=980px; here the right
       column is the board, and the brief wants it BELOW the text on mobile. */
    .hero-mascot.op-split-board { order: 0; margin-top: 18px; }
    .hero h1 { overflow-wrap: break-word; }
    /* Let the nowrap ticker scroll within its own box instead of stretching the grid. */
    .op-split .ticker { overflow-x: auto; }
}
@media (max-width: 700px) {
    .band-line { text-align: center; }
    .band-line p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
    /* Operator H1 is longer than the live "Need a web guy?", so trim the
       Alfa Slab One size on small screens to avoid a long word clipping. */
    .hero.op-split h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
    .operator-board { padding: 16px; }
    .ops-card .ops-note { display: none; }
    .ticker-line { font-size: 0.72rem; gap: 18px; }
    .lou-band .band-inner { padding-bottom: 120px; }
}
@media (max-width: 430px) {
    .ops-grid { grid-template-columns: 1fr; }
}

/* 2026-07-04 mobile hero density: hide dashboard tile descriptions on phones */
@media (max-width: 768px) {
  .ops-note { display: none; }
  .hero-board { margin-top: 8px; }
}