/* GNG Tech Services LLC - site styles
   Palette: dark navy base, metallic gold primary accent, sterling silver
   secondary accent. */

:root {
    --color-bg: #070c16;
    --color-bg-alt: #0b1220;
    --color-panel: #101a2e;
    --color-panel-2: #142238;
    --color-border: #1f2c44;
    --color-text: #e6edf5;
    --color-muted: #93a1b8;
    --color-accent: #d4af37; /* gold */
    --color-accent-light: #f2d475; /* gold highlight */
    --color-accent-dark: #a3811f; /* deep gold */
    --color-silver: #c9ced6; /* sterling silver */
    --color-silver-dark: #9aa3ad; /* deeper silver */

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --max-width: 1160px;
    --radius: 14px;
    --radius-sm: 8px;
    --header-height: 72px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

section[id] {
    scroll-margin-top: var(--header-height);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 55%, var(--color-accent-dark));
    color: #241c05;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark) 70%);
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Header / nav ---------- */

/* Portfolio pages (the index and every live example) use a solid,
   always-dark header instead of the main site's translucent/blurred one
   - some examples re-theme their own content to a light palette (e.g.
   DMD Construction Service's cream background), and the translucent
   header read as a muddy grey over that instead of a clean bar. It's
   hardcoded to the site's own dark navy (not var(--color-bg-alt), which
   an example can override) because the brand wordmark next to the logo
   mark (web/static/img/logo.svg) is gold/near-white text with no
   background box of its own, and needs a dark backdrop to stay legible
   regardless of which example's page theme is underneath it. */
.portfolio-site-header,
.portfolio-site-footer {
    /* Re-declare the sitewide dark-navy/gold theme here regardless of
     which example's own page theme (e.g. DMD's light cream/orange one)
     is active - the header/footer are shared GNG chrome, not part of
     any one example's own branding, so they should look identical (and
     solid, not translucent) on every demo page. */
    --color-bg-alt: #0b1220;
    --color-text: #e6edf5;
    --color-muted: #93a1b8;
    --color-border: #1f2c44;
    --color-accent: #d4af37;
    --color-accent-light: #f2d475;
    --color-accent-dark: #a3811f;
    --color-silver: #c9ced6;
    background: var(--color-bg-alt);
}

.portfolio-site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
    display: flex;
    align-items: center;
    background: rgba(7, 12, 22, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent) 25%, var(--color-silver) 50%, var(--color-accent) 75%, transparent);
    opacity: 0.7;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand img {
    height: 32px;
    width: auto;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-toggle svg {
    width: 20px;
    height: 20px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav .nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a.nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-muted);
    white-space: nowrap;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.main-nav a.nav-link:hover,
.main-nav a.nav-link.is-active {
    color: var(--color-text);
    border-color: var(--color-accent);
}

.main-nav .btn {
    white-space: nowrap;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
}

.lang-switch a.lang-link {
    color: var(--color-muted);
    padding: 4px 7px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.lang-switch a.lang-link:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.06);
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 72px;
    border-bottom: 1px solid var(--color-border);
}

.hero .container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.12;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.hero h1 .accent {
    color: var(--color-accent);
}

.hero-lede {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 52ch;
    margin: 0 0 32px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.hero-stats .stat-value {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    color: var(--color-accent);
    font-weight: 700;
}

.hero-stats > div:nth-child(2) .stat-value {
    color: var(--color-silver);
}

.hero-stats .stat-label {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.hero-art {
    display: flex;
    justify-content: center;
}

.hero-art img {
    width: 100%;
    max-width: 460px;
}

/* ---------- Section framing ---------- */

.section {
    padding: 88px 0;
    border-bottom: 1px solid var(--color-border);
}

.section-head {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
}

.section-kicker {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 12px;
}

.section-head h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.section-head p {
    color: var(--color-muted);
    margin: 0;
}

/* ---------- About (synced from Facebook) ---------- */

.about-cover {
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    margin-bottom: -56px;
}

.about-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
}

.about-avatar {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-bg-alt);
    background: var(--color-bg-alt);
}

.about-copy .section-kicker,
.about-copy h2 {
    margin-left: 0;
}

.about-copy h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.about-text {
    color: var(--color-muted);
    white-space: pre-line;
    margin: 0;
}

@media (max-width: 640px) {
    .about-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ---------- Featured / highlights ---------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.feature-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}

.feature-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

.icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.12);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.icon-badge svg {
    width: 22px;
    height: 22px;
}

.feature-card h3 {
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.feature-card p {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin: 0;
}

/* ---------- Services ---------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: linear-gradient(180deg, var(--color-panel-2), var(--color-panel));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
}

.service-card .icon-badge {
    background: rgba(201, 206, 214, 0.14);
    color: var(--color-silver);
}

.service-card h3 {
    font-size: 1.2rem;
    margin: 0 0 12px;
}

.service-card p {
    color: var(--color-muted);
    margin: 0 0 20px;
    flex-grow: 1;
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--color-text);
}

.service-list li::before {
    content: "\2192";
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 0.78rem;
}

/* ---------- Contact ---------- */

.contact-info {
    max-width: 480px;
    margin: 0 auto;
}

.contact-info h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0 0 16px;
}

.contact-info > p {
    color: var(--color-muted);
    margin: 0 0 28px;
    max-width: 46ch;
}

.contact-detail-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-detail-list .icon-badge {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-bottom: 0;
}

.contact-detail-list .detail-label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.contact-detail-list .detail-value {
    font-weight: 600;
}

.social-row {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.social-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(212, 175, 55, 0.08);
}

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}

input,
textarea {
    width: 100%;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s ease;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

.form-note {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 12px;
}

.form-status {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    display: none;
}

.form-status.is-visible {
    display: block;
}

.form-status.is-success {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--color-accent);
}

.form-status.is-error {
    background: rgba(242, 100, 65, 0.1);
    border: 1px solid rgba(242, 100, 65, 0.35);
    color: #f26441;
}

/* ---------- Footer ---------- */

.site-footer {
    padding: 40px 0;
}

.site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.footer-brand img {
    height: 24px;
    width: 24px;
}

.footer-links {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.footer-links a:hover {
    color: var(--color-accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .hero .container {
        grid-template-columns: 1fr;
    }

    .hero-art {
        order: -1;
    }

    .hero-art img {
        max-width: 320px;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        align-items: stretch;
        padding: 20px 24px 28px;
        gap: 20px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition:
            opacity 0.15s ease,
            transform 0.15s ease;
    }

    .main-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .main-nav .nav-links {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .site-footer .container {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Portfolio ---------- */

.demo-banner {
    background: rgba(212, 175, 55, 0.12);
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--color-accent-light);
    font-size: 0.85rem;
    padding: 10px 0;
}

.demo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.demo-banner-inner a {
    color: var(--color-accent-light);
    font-weight: 600;
    white-space: nowrap;
}

.demo-banner-inner a:hover {
    text-decoration: underline;
}

.portfolio-hero .section-head {
    margin-bottom: 32px;
}

.portfolio-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.portfolio-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-muted);
    pointer-events: none;
}

.portfolio-search input {
    padding-left: 46px;
}

.portfolio-grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.portfolio-industry-head {
    margin-bottom: 20px;
}

.portfolio-industry-head h2 {
    margin: 0 0 6px;
}

.portfolio-industry-head p {
    color: var(--color-muted);
    margin: 0;
    max-width: 70ch;
}

.portfolio-industry.is-hidden {
    display: none;
}

.portfolio-examples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.portfolio-card {
    display: block;
    background: linear-gradient(180deg, var(--color-panel-2), var(--color-panel));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}

.portfolio-card-link:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.portfolio-card-soon {
    color: var(--color-muted);
}

.portfolio-card-image {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: center 40%;
    transition: transform 0.2s ease;
}

.portfolio-card-link:hover .portfolio-card-image {
    transform: scale(1.04);
}

.portfolio-card-body {
    padding: 28px;
}

.portfolio-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
}

.portfolio-badge svg {
    width: 8px;
    height: 8px;
}

.portfolio-badge-live {
    color: #6be675;
    border-color: rgba(107, 230, 117, 0.35);
    background: rgba(107, 230, 117, 0.08);
}

.portfolio-badge-ai {
    color: var(--color-accent);
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.1);
}

.portfolio-badge-soon {
    color: var(--color-muted);
}

.portfolio-card h3 {
    margin: 0 0 6px;
}

.portfolio-card-tagline {
    color: var(--color-accent-light);
    font-weight: 600;
    margin: 0 0 10px;
}

.portfolio-card p {
    color: var(--color-muted);
    margin: 0 0 10px;
}

.portfolio-card-cta {
    display: inline-block;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.portfolio-empty {
    text-align: center;
    color: var(--color-muted);
    margin-top: 32px;
}

.portfolio-empty a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ---------- Portfolio example page ---------- */

.portfolio-example-hero .container {
    grid-template-columns: 1fr;
    max-width: 760px;
    text-align: center;
}

.portfolio-example-hero .hero-actions,
.portfolio-example-hero .hero-stats {
    justify-content: center;
}

.portfolio-example-hero .hero-lede {
    max-width: none;
}

/* Hero photo layer: pages opt in by setting --pf-hero-image (inline,
   via the asset() helper so it gets a hashed/cached URL) on the hero
   section itself. Falls back to "none" so .portfolio-example-hero stays
   a plain gradient for examples that don't set it. */
.portfolio-example-hero {
    background-image: linear-gradient(180deg, rgba(7, 12, 22, 0.82) 0%, rgba(7, 12, 22, 0.93) 55%, var(--color-bg) 100%), var(--pf-hero-image, none);
    background-size: cover;
    background-position:
        center,
        center 38%;
    background-repeat: no-repeat;
}

/* Construction & Logistics example ("Suncoast Heavy Haul") - accent
   palette sampled directly from its own hero photo (a heavy-haul truck
   hauling a Cat D9R dozer on a lowboy trailer, see
   web/static/img/portfolio/construction-logistics-hero.jpg via
   ImageMagick's -unique-colors quantization). Deliberately kept apart
   from the sitewide --color-accent gold (a muted terracotta/rust and an
   olive-khaki, not "gold with a tint") so this page reads as its own
   business rather than a reskin:
     --cl-rust   <- image's dozer undercarriage/dirt tone (#92684f), the
                    primary accent here (eyebrow, hero highlight)
     --cl-amber  <- image's dusty, desaturated equipment-yellow (#b1a05a),
                    kept intentionally duller/olive than the site's gold
     --cl-steel  <- image's overcast-sky/cab-shadow blue-grey (#6b7389) */
.pf-construction-logistics {
    --cl-rust: #92684f;
    --cl-rust-light: #d99a6e;
    --cl-amber: #b1a05a;
    --cl-amber-light: #cfc189;
    --cl-steel: #6b7389;
    --cl-steel-light: #97989d;
}

.pf-construction-logistics .eyebrow {
    color: var(--cl-rust-light);
    background: rgba(217, 154, 110, 0.12);
    border-color: rgba(217, 154, 110, 0.4);
}

.pf-construction-logistics .hero h1 .accent {
    color: var(--cl-rust-light);
}

.pf-construction-logistics .hero-stats > div:nth-child(2) .stat-value {
    color: var(--cl-steel-light);
}

.pf-construction-logistics .hero-stats > div:nth-child(3) .stat-value {
    color: var(--cl-amber-light);
}

.pf-construction-logistics .portfolio-badge-ai {
    color: var(--cl-amber-light);
    border-color: rgba(177, 160, 90, 0.4);
    background: rgba(177, 160, 90, 0.12);
}

.why-section {
    background: var(--color-bg-alt);
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.why-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px;
}

.why-card .portfolio-badge {
    margin-bottom: 14px;
}

.why-card h3 {
    margin: 0 0 10px;
}

.why-card p {
    color: var(--color-muted);
    margin: 0;
}

.why-before {
    border-color: rgba(242, 100, 65, 0.3);
}

.why-after {
    border-color: rgba(212, 175, 55, 0.3);
}

.pf-construction-logistics .why-before {
    border-color: rgba(146, 104, 79, 0.4); /* --cl-rust */
}

.pf-construction-logistics .why-after {
    border-color: rgba(177, 160, 90, 0.4); /* --cl-amber */
}

/* DMD Construction Service example - a light, warm-toned theme built to
   sit closer to DMD's real site (dmdconstructionservice.com, a Wix
   build) than GNG's usual dark navy/gold look: a cream background, a
   vivid orange-red primary accent sampled from DMD's own published brand
   color (#FD5521, with #ff8044/#df3131 as its light/dark steps - found
   in the page's own CSS, not guessed), and a serif display font (Libre
   Baskerville, loaded only on this page - see the templ file's <head>)
   echoing the serif/sans heading-and-body pairing on their real site.
   Every color variable below is redeclared here (not just accent-related
   ones), so every shared component that already reads var(--color-*)
   - header/footer text, cards, buttons, the chat widget - automatically
   re-themes for this one page without touching those shared rules. */
.pf-dmd-construction {
    --color-bg: #fdf6ee;
    --color-bg-alt: #fbe9da;
    --color-panel: #ffffff;
    --color-panel-2: #fffaf3;
    --color-border: #ecdfd0;
    --color-text: #2b1c12;
    --color-muted: #7a6a5a;
    --color-accent: #fd5521;
    --color-accent-light: #ff8044;
    --color-accent-dark: #df3131;

    --dmd-clay: #8a5a34;
    --dmd-moss: #4b6b3a;
    --dmd-stone: #5c6066;
}

.pf-dmd-construction h1,
.pf-dmd-construction h2,
.pf-dmd-construction h3,
.pf-dmd-construction .founder-quote p {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

.pf-dmd-construction .eyebrow {
    background: rgba(253, 85, 33, 0.1);
    border-color: rgba(253, 85, 33, 0.35);
}

.pf-dmd-construction .hero-stats > div:nth-child(2) .stat-value {
    color: var(--dmd-moss);
}

.pf-dmd-construction .hero-stats > div:nth-child(3) .stat-value {
    color: var(--dmd-stone);
}

.pf-dmd-construction .service-card .icon-badge {
    background: rgba(253, 85, 33, 0.1);
    color: var(--color-accent-dark);
}

.pf-dmd-construction .why-before {
    border-color: rgba(138, 90, 52, 0.35); /* --dmd-clay */
}

.pf-dmd-construction .why-after {
    border-color: rgba(253, 85, 33, 0.4); /* --color-accent */
}

.pf-dmd-construction .form-status.is-success {
    background: rgba(253, 85, 33, 0.08);
    border-color: rgba(253, 85, 33, 0.35);
}

.pf-dmd-construction .quote-summary {
    border-color: rgba(253, 85, 33, 0.35);
}

/* .dmd-hero: show the real jobsite photo as-is - no dark gradient
   overlay dimming it (that's what .portfolio-example-hero normally
   layers on top of --pf-hero-image; this replaces that for this page).
   Instead, the actual hero copy sits in its own solid card (see
   .dmd-hero-panel below), so text contrast is guaranteed by a real
   background color instead of depending on what's in the photo. */
.dmd-hero {
    background-image: var(--pf-hero-image, none);
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
}

.dmd-hero-panel {
    max-width: 660px;
    margin: 0 auto;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 40px 44px;
    box-shadow: 0 24px 60px rgba(20, 12, 4, 0.35);
}

@media (max-width: 640px) {
    .dmd-hero-panel {
        padding: 32px 24px;
    }
}

/* ---------- Order Materials (DMD example) ---------- */

.materials-section {
    background: var(--color-bg-alt);
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}

.material-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
}

.material-card h3 {
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.material-card-body p {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0 0 20px;
}

.material-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.material-price {
    display: flex;
    flex-direction: column;
}

.material-price-value {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent);
}

.material-price-unit {
    font-size: 0.76rem;
    color: var(--color-muted);
}

.materials-note {
    text-align: center;
}

@media (max-width: 900px) {
    .materials-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Founder note ---------- */

.founder-section {
    background: var(--color-bg-alt);
}

.founder-card {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 40px 36px;
}

.founder-quote p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 20px;
    font-style: italic;
}

.founder-byline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.founder-name {
    font-weight: 600;
}

.founder-title {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ---------- Quote chat widget ---------- */

.quote-chat {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
}

.quote-chat-window {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 12px;
    margin-bottom: 16px;
    /* Soft top/bottom fade instead of an abrupt clip when a bubble is
     scrolled halfway out of view. */
    mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);

    /* Firefox: slim, theme-matching scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* Chrome/Safari/Edge: slim, theme-matching scrollbar (Firefox uses the
   scrollbar-width/scrollbar-color properties above instead). */
.quote-chat-window::-webkit-scrollbar {
    width: 8px;
}

.quote-chat-window::-webkit-scrollbar-track {
    background: transparent;
}

.quote-chat-window::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}

.quote-chat-window::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted);
}

.chat-bubble {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.chat-bubble-assistant {
    align-self: flex-start;
    background: var(--color-panel-2);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 2px;
}

.chat-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 70%);
    color: #241c05;
    border-bottom-right-radius: 2px;
}

.chat-bubble-error {
    align-self: center;
    background: rgba(242, 100, 65, 0.1);
    border: 1px solid rgba(242, 100, 65, 0.35);
    color: #f26441;
}

.chat-bubble-typing {
    align-self: flex-start;
    background: var(--color-panel-2);
    border: 1px solid var(--color-border);
    display: flex;
    gap: 4px;
    padding: 14px 16px;
}

.chat-bubble-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-muted);
    animation: chat-typing-bounce 1s infinite ease-in-out;
}

.chat-bubble-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.chat-bubble-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chat-typing-bounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.quote-chat-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-chat-form textarea {
    width: 100%;
    min-height: 96px;
    max-height: 240px;
    resize: none;
}

/* Turnstile's widget renders at a semi-fixed width (and can grow taller
   if it ever needs to show a real challenge instead of resolving
   invisibly), so it gets its own row below the textarea instead of
   sharing a flex row with it -- keeps the textarea from getting squeezed
   whenever the widget is visible. */
.quote-chat-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.quote-summary {
    background: var(--color-bg-alt);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.quote-summary h3 {
    margin: 0 0 10px;
    color: var(--color-accent);
}

.quote-summary-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.quote-summary-list li {
    font-size: 0.88rem;
}

.quote-summary-list .quote-summary-label {
    display: block;
    color: var(--color-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.quote-summary-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.quote-summary.is-sent {
    border-color: rgba(107, 230, 117, 0.35);
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .quote-summary-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .quote-chat-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-chat-form-actions button {
        width: 100%;
    }
}

/* ---------- HVAC & Plumbing example (Bayline Comfort) ----------
   A cool, high-contrast service brand for a symptom-first HVAC/plumbing
   demo. It intentionally lives outside the dark GNG gold palette so the
   example reads as a finished small-business site, not a reskinned card. */
.pf-hvac-plumbing {
    --color-bg: #071d27;
    --color-bg-alt: #0b2934;
    --color-panel: #103844;
    --color-panel-2: #154752;
    --color-border: #245a66;
    --color-text: #edfafa;
    --color-muted: #a8c5c8;
    --color-accent: #63d9d3;
    --color-accent-light: #a9f1e5;
    --color-accent-dark: #249e9d;
    --color-silver: #d2e9e9;
    --color-silver-dark: #8fb7bb;

    --hvac-orange: #ff9b5d;
    --hvac-orange-light: #ffc093;
    --hvac-ink: #09222c;
}

.pf-hvac-plumbing .portfolio-example-hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
    max-width: 1220px;
    text-align: left;
    gap: 64px;
}

.pf-hvac-plumbing .hvac-hero {
    min-height: 620px;
    padding: 104px 0 92px;
    background-image: linear-gradient(90deg, rgba(7, 29, 39, 0.98) 0%, rgba(7, 29, 39, 0.9) 42%, rgba(7, 29, 39, 0.34) 100%), var(--pf-hero-image, none);
    background-size: cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

.pf-hvac-plumbing .hvac-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.pf-hvac-plumbing .eyebrow {
    color: var(--color-accent-light);
    background: rgba(99, 217, 211, 0.1);
    border-color: rgba(99, 217, 211, 0.36);
}

.pf-hvac-plumbing .eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hvac-orange);
    box-shadow: 0 0 0 4px rgba(255, 155, 93, 0.14);
}

.pf-hvac-plumbing .hero h1 {
    max-width: 10ch;
    font-size: clamp(2.8rem, 5vw, 4.65rem);
    letter-spacing: -0.055em;
}

.pf-hvac-plumbing .hero h1 .accent {
    color: var(--hvac-orange-light);
}

.pf-hvac-plumbing .hero-lede {
    max-width: 48ch;
    font-size: 1.08rem;
}

.pf-hvac-plumbing .hero-actions,
.pf-hvac-plumbing .hero-stats {
    justify-content: flex-start;
}

.pf-hvac-plumbing .btn-primary {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 70%);
    color: var(--hvac-ink);
}

.pf-hvac-plumbing .btn-primary:hover {
    background: linear-gradient(135deg, #c1fff3, var(--color-accent));
}

.pf-hvac-plumbing .btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 22px;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.trust-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.pf-hvac-plumbing .hvac-hero-visual {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hvac-visual-orbit {
    position: absolute;
    border: 1px solid rgba(99, 217, 211, 0.2);
    border-radius: 50%;
    pointer-events: none;
}

.hvac-visual-orbit-one {
    width: 420px;
    height: 420px;
}

.hvac-visual-orbit-two {
    width: 560px;
    height: 560px;
    border-color: rgba(255, 155, 93, 0.13);
}

.hvac-console {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    padding: 28px;
    border: 1px solid rgba(151, 236, 229, 0.34);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(22, 75, 85, 0.96), rgba(8, 34, 45, 0.96));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hvac-console::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(99, 217, 211, 0.12);
    border-radius: 17px;
    pointer-events: none;
}

.hvac-console-top,
.temperature-readout,
.console-details,
.meter-labels {
    position: relative;
    z-index: 1;
}

.hvac-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #acd8d7;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9bf0bb;
}

.live-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6be675;
    box-shadow: 0 0 0 4px rgba(107, 230, 117, 0.12);
}

.temperature-readout {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin: 50px 0 22px;
}

.temperature {
    color: #f0ffff;
    font-family: var(--font-mono);
    font-size: clamp(4.5rem, 9vw, 6.5rem);
    font-weight: 700;
    letter-spacing: -0.12em;
    line-height: 0.8;
}

.temperature > span {
    color: var(--hvac-orange-light);
    font-size: 2.5rem;
    vertical-align: top;
    letter-spacing: 0;
}

.temperature-copy {
    padding-bottom: 4px;
    color: #91bec1;
    font-size: 0.72rem;
    line-height: 1.5;
}

.temperature-copy strong {
    color: #e7ffff;
    font-size: 0.83rem;
    font-weight: 600;
}

.comfort-meter {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.meter-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5a9ed1, #63d9d3 52%, #ff9b5d);
    padding: 2px;
}

.meter-track span {
    display: block;
    width: 56%;
    height: 6px;
    margin-left: 44%;
    border-radius: inherit;
    background: #f5ffff;
    box-shadow: 0 0 0 3px rgba(245, 255, 255, 0.14), 0 0 16px rgba(245, 255, 255, 0.45);
}

.meter-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: #86b2b6;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
}

.console-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.console-details > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border: 1px solid rgba(99, 217, 211, 0.15);
    border-radius: 12px;
    background: rgba(6, 27, 35, 0.28);
}

.console-details small,
.console-details strong {
    display: block;
}

.console-details small {
    color: #86b2b6;
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.console-details strong {
    color: #e7ffff;
    font-size: 0.78rem;
    font-weight: 600;
}

.console-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255, 155, 93, 0.15);
    color: var(--hvac-orange-light);
    font-size: 1.05rem;
}

.console-icon-drop {
    background: rgba(99, 217, 211, 0.15);
    color: var(--color-accent-light);
}

.hvac-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 210px;
    padding: 12px 15px 12px 12px;
    border: 1px solid rgba(155, 238, 231, 0.27);
    border-radius: 14px;
    background: rgba(8, 32, 42, 0.92);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

.hvac-float-card-top {
    top: 8%;
    left: 0;
}

.hvac-float-card-bottom {
    right: -2%;
    bottom: 8%;
}

.float-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: rgba(255, 155, 93, 0.16);
    color: var(--hvac-orange-light);
    font-family: var(--font-mono);
    font-size: 1rem;
}

.float-card-icon-water {
    background: rgba(99, 217, 211, 0.15);
    color: var(--color-accent-light);
}

.hvac-float-card strong,
.hvac-float-card small {
    display: block;
}

.hvac-float-card strong {
    color: #efffff;
    font-size: 0.76rem;
}

.hvac-float-card small {
    margin-top: 2px;
    color: #91bec1;
    font-size: 0.68rem;
}

.hvac-symptoms-section {
    background: var(--color-bg-alt);
}

.symptom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.symptom-card {
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(21, 71, 82, 0.95), rgba(13, 49, 60, 0.96));
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.symptom-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(99, 217, 211, 0.16);
    border-radius: 50%;
}

.symptom-card:hover {
    border-color: var(--color-accent);
    background: linear-gradient(160deg, rgba(26, 87, 96, 0.96), rgba(13, 49, 60, 0.98));
    transform: translateY(-4px);
}

.symptom-index {
    color: var(--hvac-orange-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.symptom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 26px 0 18px;
    border: 1px solid rgba(99, 217, 211, 0.28);
    border-radius: 13px;
    background: rgba(99, 217, 211, 0.11);
    color: var(--color-accent-light);
}

.symptom-icon svg {
    width: 23px;
    height: 23px;
}

.symptom-icon-water {
    color: #97d9ff;
    background: rgba(92, 170, 218, 0.13);
    border-color: rgba(92, 170, 218, 0.28);
}

.symptom-icon-warm {
    color: var(--hvac-orange-light);
    background: rgba(255, 155, 93, 0.12);
    border-color: rgba(255, 155, 93, 0.29);
}

.symptom-icon-plan {
    color: #d8c9ff;
    background: rgba(179, 146, 255, 0.12);
    border-color: rgba(179, 146, 255, 0.27);
}

.symptom-card-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.symptom-card h3 {
    margin: 0 0 7px;
    font-size: 1.05rem;
}

.symptom-card p {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.symptom-link {
    margin-top: auto;
    color: var(--color-accent-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.hvac-service-card {
    position: relative;
    overflow: hidden;
}

.hvac-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 3px;
    background: var(--hvac-orange);
}

.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.service-number,
.service-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.07em;
}

.service-number {
    color: var(--hvac-orange-light);
}

.service-label {
    color: var(--color-muted);
    text-align: right;
}

.pf-hvac-plumbing .service-card .icon-badge {
    background: rgba(99, 217, 211, 0.12);
    color: var(--color-accent-light);
}

.pf-hvac-plumbing .service-card:nth-child(2) .icon-badge {
    background: rgba(92, 170, 218, 0.13);
    color: #97d9ff;
}

.pf-hvac-plumbing .service-card:nth-child(3) .icon-badge {
    background: rgba(255, 155, 93, 0.13);
    color: var(--hvac-orange-light);
}

.process-section {
    background: var(--color-bg-alt);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.process-step {
    display: flex;
    gap: 18px;
    min-height: 180px;
    padding: 30px 26px 28px 0;
    border-right: 1px solid var(--color-border);
}

.process-step + .process-step {
    padding-left: 26px;
}

.process-step:last-child {
    border-right: none;
    padding-right: 0;
}

.process-number {
    color: var(--hvac-orange-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.process-step h3 {
    margin: 0 0 9px;
    font-size: 1.05rem;
}

.process-step p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.assurance-section {
    background: linear-gradient(135deg, #0d3440, #09232d);
}

.assurance-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 72px;
}

.assurance-grid h2 {
    max-width: 12ch;
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.03em;
}

.assurance-lede {
    max-width: 45ch;
    margin: 0 0 28px;
    color: var(--color-muted);
}

.assurance-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assurance-list li {
    display: flex;
    gap: 13px;
}

.assurance-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: rgba(99, 217, 211, 0.14);
    color: var(--color-accent-light);
    font-weight: 800;
}

.assurance-list strong,
.assurance-list small {
    display: block;
}

.assurance-list strong {
    margin-bottom: 2px;
    font-size: 0.92rem;
}

.assurance-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.comfort-plan-card {
    padding: 32px;
    border: 1px solid rgba(99, 217, 211, 0.38);
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(21, 80, 89, 0.95), rgba(10, 40, 51, 0.96));
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.plan-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.plan-kicker {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
}

.plan-spark {
    color: var(--hvac-orange-light);
    font-size: 1.3rem;
}

.comfort-plan-card h3 {
    margin: 0 0 9px;
    font-size: 1.5rem;
}

.comfort-plan-card > p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.plan-divider {
    height: 1px;
    margin: 25px 0 19px;
    background: rgba(99, 217, 211, 0.22);
}

.plan-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: #e8ffff;
    font-size: 0.85rem;
}

.plan-detail span {
    color: var(--hvac-orange-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.comfort-plan-card .btn {
    width: 100%;
    margin-top: 18px;
}

.pf-hvac-plumbing .why-before {
    border-color: rgba(255, 155, 93, 0.42);
}

.pf-hvac-plumbing .why-after {
    border-color: rgba(99, 217, 211, 0.42);
}

.pf-hvac-plumbing .portfolio-badge-ai {
    color: var(--color-accent-light);
    border-color: rgba(99, 217, 211, 0.38);
    background: rgba(99, 217, 211, 0.1);
}

.pf-hvac-plumbing .portfolio-badge-soon {
    color: var(--hvac-orange-light);
    border-color: rgba(255, 155, 93, 0.35);
    background: rgba(255, 155, 93, 0.08);
}

.pf-hvac-plumbing .quote-chat-section {
    background: radial-gradient(circle at 50% 0%, rgba(99, 217, 211, 0.09), transparent 40%), var(--color-bg);
}

.pf-hvac-plumbing .quote-summary {
    border-color: rgba(99, 217, 211, 0.38);
}

.pf-hvac-plumbing .quote-summary h3 {
    color: var(--color-accent-light);
}

@media (max-width: 1000px) {
    .pf-hvac-plumbing .portfolio-example-hero .container {
        grid-template-columns: 1fr;
        gap: 42px;
        text-align: center;
    }

    .pf-hvac-plumbing .hero h1 {
        max-width: none;
    }

    .pf-hvac-plumbing .hero-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .pf-hvac-plumbing .hero-actions,
    .pf-hvac-plumbing .hero-stats,
    .pf-hvac-plumbing .hero-trust {
        justify-content: center;
    }

    .pf-hvac-plumbing .hvac-hero-visual {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .symptom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .assurance-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .assurance-grid h2 {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-step,
    .process-step + .process-step {
        min-height: 0;
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .process-step:last-child {
        padding-bottom: 24px;
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .pf-hvac-plumbing .hvac-hero {
        padding: 76px 0 64px;
    }

    .pf-hvac-plumbing .hero h1 {
        font-size: clamp(2.5rem, 13vw, 3.6rem);
    }

    .pf-hvac-plumbing .hvac-hero-visual {
        min-height: 380px;
    }

    .hvac-visual-orbit-one {
        width: 310px;
        height: 310px;
    }

    .hvac-visual-orbit-two {
        width: 390px;
        height: 390px;
    }

    .hvac-console {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .temperature-readout {
        margin-top: 42px;
    }

    .temperature {
        font-size: 4.3rem;
    }

    .console-details {
        grid-template-columns: 1fr;
    }

    .hvac-float-card {
        max-width: 175px;
        padding: 9px 10px 9px 9px;
    }

    .hvac-float-card-top {
        top: 0;
        left: -4px;
    }

    .hvac-float-card-bottom {
        right: -4px;
        bottom: 0;
    }

    .float-card-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .hvac-float-card strong {
        font-size: 0.68rem;
    }

    .hvac-float-card small {
        font-size: 0.59rem;
    }

    .symptom-grid {
        grid-template-columns: 1fr;
    }

    .symptom-card {
        min-height: 0;
    }

    .service-card-top {
        margin-bottom: 18px;
    }

    .service-label {
        font-size: 0.58rem;
    }

    .comfort-plan-card {
        padding: 26px 22px;
    }
}

/* ---------- Landscaping & Lawn Care example (Canopy & Coast) ----------
   An earthy, editorial service brand for a yard-care demo. The light palette
   and plan-view visual make this example feel intentionally different from
   the dark HVAC example and the warm construction build. */
.pf-landscaping {
    --color-bg: #f4f5ed;
    --color-bg-alt: #e8eee2;
    --color-panel: #fffef8;
    --color-panel-2: #f0f5eb;
    --color-border: #d0dccd;
    --color-text: #183326;
    --color-muted: #63766b;
    --color-accent: #3d8761;
    --color-accent-light: #71b486;
    --color-accent-dark: #245f43;
    --color-silver: #7d9283;
    --color-silver-dark: #5b7062;

    --land-sun: #e9b04f;
    --land-sun-light: #f4c96f;
    --land-soil: #8e6445;
    --land-moss: #71915c;
    --land-ink: #173226;
}

.pf-landscaping .portfolio-example-hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
    max-width: 1220px;
    text-align: left;
    gap: 64px;
}

.pf-landscaping .landscape-hero {
    min-height: 650px;
    padding: 106px 0 94px;
    background-image: linear-gradient(90deg, rgba(244, 245, 237, 0.99) 0%, rgba(244, 245, 237, 0.93) 42%, rgba(244, 245, 237, 0.19) 100%), var(--pf-hero-image, none);
    background-size: cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

.pf-landscaping .landscape-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.pf-landscaping .eyebrow {
    color: var(--color-accent-dark);
    background: rgba(61, 135, 97, 0.09);
    border-color: rgba(61, 135, 97, 0.28);
}

.eyebrow-leaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(61, 135, 97, 0.15);
    color: var(--color-accent);
    font-size: 0.75rem;
}

.pf-landscaping .hero h1 {
    max-width: 11ch;
    color: var(--land-ink);
    font-size: clamp(2.75rem, 5vw, 4.55rem);
    letter-spacing: -0.06em;
}

.pf-landscaping .hero h1 .accent {
    color: var(--color-accent-dark);
}

.pf-landscaping .hero-lede {
    max-width: 48ch;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.pf-landscaping .hero-actions,
.pf-landscaping .hero-stats {
    justify-content: flex-start;
}

.pf-landscaping .btn-primary {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 72%);
    color: #f8fff5;
}

.pf-landscaping .btn-primary:hover {
    background: linear-gradient(135deg, #8bca9d, var(--color-accent));
}

.pf-landscaping .btn-outline {
    color: var(--land-ink);
    border-color: var(--color-border);
}

.pf-landscaping .btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

.pf-landscaping .hero-trust {
    color: var(--color-muted);
}

.pf-landscaping .trust-dot {
    background: var(--land-sun);
}

.pf-landscaping .landscape-hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yard-plan-card {
    position: relative;
    z-index: 2;
    width: min(100%, 450px);
    padding: 24px;
    border: 1px solid rgba(36, 95, 67, 0.25);
    border-radius: 22px;
    background: rgba(255, 254, 248, 0.96);
    box-shadow: 0 26px 60px rgba(36, 70, 48, 0.2), 0 2px 0 rgba(255, 255, 255, 0.9) inset;
}

.yard-plan-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(61, 135, 97, 0.1);
    border-radius: 15px;
    pointer-events: none;
}

.yard-plan-top,
.yard-plan-heading,
.yard-plan-details {
    position: relative;
    z-index: 1;
}

.yard-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.07em;
}

.yard-plan-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent-dark);
}

.yard-plan-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.yard-plan-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 34px 0 18px;
}

.yard-plan-heading small,
.yard-plan-details small {
    display: block;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.yard-plan-heading h2 {
    margin: 5px 0 0;
    color: var(--land-ink);
    font-size: 1.55rem;
    letter-spacing: -0.035em;
}

.yard-plan-sun {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(233, 176, 79, 0.17);
    color: var(--land-sun);
    font-size: 1.55rem;
}

.yard-plan-map {
    position: relative;
    height: 250px;
    overflow: hidden;
    border: 1px solid rgba(61, 135, 97, 0.24);
    border-radius: 15px;
    background: #eef3e4;
}

.yard-plan-map::before,
.yard-plan-map::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(61, 135, 97, 0.15);
}

.yard-plan-map::before {
    top: -78px;
    right: -52px;
    width: 220px;
    height: 220px;
}

.yard-plan-map::after {
    bottom: -100px;
    left: -54px;
    width: 250px;
    height: 250px;
}

.map-lawn {
    position: absolute;
    inset: 22px 28px 20px 25px;
    border-radius: 49% 44% 40% 46%;
    background: linear-gradient(135deg, #b7cd99, #86ad78);
    opacity: 0.94;
}

.map-house {
    position: absolute;
    z-index: 2;
    top: 33px;
    left: 50%;
    width: 130px;
    height: 68px;
    border: 5px solid #b78961;
    border-radius: 5px;
    background: #f5e6c9;
    box-shadow: 0 9px 0 -4px rgba(142, 100, 69, 0.3);
    transform: translateX(-50%);
}

.map-house::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 9px;
    width: 101px;
    height: 51px;
    border-top: 5px solid #8e6445;
    border-left: 5px solid #8e6445;
    transform: rotate(45deg) skew(-8deg, -8deg);
}

.map-house::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 53px;
    width: 22px;
    height: 36px;
    background: #a1bbb1;
}

.map-path {
    position: absolute;
    z-index: 3;
    top: 91px;
    left: 50%;
    width: 42px;
    height: 126px;
    border-right: 10px solid #eadab8;
    border-left: 10px solid #eadab8;
    border-radius: 44% 55% 10% 10%;
    transform: translateX(-50%) rotate(6deg);
}

.map-bed {
    position: absolute;
    z-index: 2;
    width: 75px;
    height: 32px;
    border-radius: 55% 42% 58% 42%;
    background: #9b704d;
    box-shadow: inset 0 0 0 7px rgba(111, 74, 48, 0.13);
}

.map-bed-one {
    top: 130px;
    left: 46px;
    transform: rotate(19deg);
}

.map-bed-two {
    top: 145px;
    right: 43px;
    transform: rotate(-18deg);
}

.map-tree {
    position: absolute;
    z-index: 4;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3e7952;
    box-shadow: 8px -7px 0 -4px #5f9665, -7px -5px 0 -5px #7ea36d;
}

.map-tree::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 12px;
    width: 4px;
    height: 12px;
    background: #8e6445;
}

.map-tree-one {
    top: 65px;
    left: 42px;
}

.map-tree-two {
    top: 67px;
    right: 44px;
}

.map-tree-three {
    right: 58px;
    bottom: 39px;
}

.yard-plan-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.yard-plan-details > div {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-panel-2);
}

.yard-plan-details strong {
    display: block;
    margin-top: 4px;
    color: var(--land-ink);
    font-size: 0.77rem;
}

.landscape-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 220px;
    padding: 12px 15px 12px 12px;
    border: 1px solid rgba(36, 95, 67, 0.22);
    border-radius: 14px;
    background: rgba(255, 254, 248, 0.95);
    box-shadow: 0 18px 40px rgba(36, 70, 48, 0.17);
}

.landscape-float-card-top {
    top: 7%;
    left: -2%;
}

.landscape-float-card-bottom {
    right: -3%;
    bottom: 7%;
}

.float-leaf,
.float-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 10px;
    background: rgba(61, 135, 97, 0.13);
    color: var(--color-accent-dark);
    font-size: 1rem;
}

.float-drop {
    background: rgba(233, 176, 79, 0.17);
    color: #b77d1d;
}

.landscape-float-card strong,
.landscape-float-card small {
    display: block;
}

.landscape-float-card strong {
    color: var(--land-ink);
    font-size: 0.76rem;
}

.landscape-float-card small {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 0.68rem;
}

.landscape-intents-section {
    background: var(--color-bg-alt);
}

.landscape-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.landscape-intent-card {
    position: relative;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    padding: 23px 21px 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-panel);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.landscape-intent-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -42px;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(61, 135, 97, 0.16);
    border-radius: 50%;
}

.landscape-intent-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 16px 30px rgba(50, 89, 61, 0.1);
    transform: translateY(-4px);
}

.intent-number {
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.intent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 25px 0 18px;
    border: 1px solid rgba(61, 135, 97, 0.25);
    border-radius: 13px;
    background: rgba(61, 135, 97, 0.1);
    color: var(--color-accent-dark);
}

.intent-icon svg {
    width: 23px;
    height: 23px;
}

.intent-icon-sun {
    color: #b17a1b;
    border-color: rgba(233, 176, 79, 0.32);
    background: rgba(233, 176, 79, 0.14);
}

.intent-icon-path {
    color: var(--land-soil);
    border-color: rgba(142, 100, 69, 0.27);
    background: rgba(142, 100, 69, 0.1);
}

.intent-icon-water {
    color: #4f8290;
    border-color: rgba(79, 130, 144, 0.27);
    background: rgba(79, 130, 144, 0.1);
}

.intent-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.intent-copy h3 {
    margin: 0 0 7px;
    color: var(--land-ink);
    font-size: 1.03rem;
}

.intent-copy p {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.46;
}

.intent-copy > span:last-child {
    margin-top: auto;
    color: var(--color-accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
}

.landscape-service-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-panel), #f8faf1);
}

.landscape-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 3px;
    background: var(--color-accent);
}

.landscape-service-card:nth-child(2)::before {
    background: var(--land-sun);
}

.landscape-service-card:nth-child(3)::before {
    background: var(--land-soil);
}

.landscape-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
}

.landscape-service-top small {
    color: var(--color-muted);
    font-size: 0.6rem;
    text-align: right;
}

.pf-landscaping .service-card .icon-badge {
    background: rgba(61, 135, 97, 0.1);
    color: var(--color-accent-dark);
}

.pf-landscaping .landscape-service-card:nth-child(2) .icon-badge {
    background: rgba(233, 176, 79, 0.14);
    color: #a87216;
}

.pf-landscaping .landscape-service-card:nth-child(3) .icon-badge {
    background: rgba(142, 100, 69, 0.11);
    color: var(--land-soil);
}

.pf-landscaping .service-card h3 {
    color: var(--land-ink);
}

.pf-landscaping .service-list li {
    color: var(--land-ink);
}

.pf-landscaping .service-list li::before {
    color: var(--color-accent);
}

.landscape-process-section {
    background: var(--color-bg-alt);
}

.landscape-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.landscape-process-step {
    display: flex;
    gap: 18px;
    min-height: 185px;
    padding: 31px 26px 29px 0;
    border-right: 1px solid var(--color-border);
}

.landscape-process-step + .landscape-process-step {
    padding-left: 26px;
}

.landscape-process-step:last-child {
    padding-right: 0;
    border-right: none;
}

.pf-landscaping .process-number {
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.landscape-process-step h3 {
    margin: 0 0 9px;
    color: var(--land-ink);
    font-size: 1.05rem;
}

.landscape-process-step p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.landscape-season-section {
    background: linear-gradient(135deg, #dce9d7, #f0f2e4);
}

.landscape-season-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 85px;
}

.landscape-season-grid h2 {
    max-width: 12ch;
    margin: 0 0 15px;
    color: var(--land-ink);
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.04em;
}

.season-lede {
    max-width: 42ch;
    margin: 0 0 28px;
    color: var(--color-muted);
}

.season-track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.season-track-line {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 21px;
    width: 1px;
    background: rgba(61, 135, 97, 0.28);
}

.season-point {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 43px 1fr;
    gap: 16px;
    align-items: start;
}

.season-point > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(61, 135, 97, 0.35);
    border-radius: 50%;
    background: #e7f0df;
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.67rem;
}

.season-point small,
.season-point strong,
.season-point p {
    display: block;
}

.season-point small {
    margin: 2px 0 4px;
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
}

.season-point strong {
    color: var(--land-ink);
    font-size: 1.02rem;
}

.season-point p {
    max-width: 39ch;
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.season-point-sun > span {
    color: #a87216;
    border-color: rgba(233, 176, 79, 0.45);
    background: #fff1c9;
}

.season-point-rain > span {
    color: #4f8290;
    border-color: rgba(79, 130, 144, 0.4);
    background: #e3f1f0;
}

.season-point-cool > span {
    color: var(--land-soil);
    border-color: rgba(142, 100, 69, 0.38);
    background: #f2e5d8;
}

.pf-landscaping .why-section {
    background: var(--color-bg);
}

.pf-landscaping .why-before {
    border-color: rgba(142, 100, 69, 0.38);
}

.pf-landscaping .why-after {
    border-color: rgba(61, 135, 97, 0.38);
}

.pf-landscaping .portfolio-badge-ai {
    color: var(--color-accent-dark);
    border-color: rgba(61, 135, 97, 0.32);
    background: rgba(61, 135, 97, 0.09);
}

.pf-landscaping .portfolio-badge-soon {
    color: var(--land-soil);
    border-color: rgba(142, 100, 69, 0.32);
    background: rgba(142, 100, 69, 0.08);
}

.pf-landscaping .quote-chat-section {
    background: radial-gradient(circle at 50% 0%, rgba(61, 135, 97, 0.11), transparent 40%), var(--color-bg);
}

.pf-landscaping .quote-chat {
    box-shadow: 0 14px 38px rgba(37, 70, 45, 0.08);
}

.pf-landscaping .quote-summary {
    border-color: rgba(61, 135, 97, 0.34);
}

.pf-landscaping .quote-summary h3 {
    color: var(--color-accent-dark);
}

@media (max-width: 1000px) {
    .pf-landscaping .portfolio-example-hero .container {
        grid-template-columns: 1fr;
        gap: 42px;
        text-align: center;
    }

    .pf-landscaping .hero h1 {
        max-width: none;
    }

    .pf-landscaping .hero-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .pf-landscaping .hero-actions,
    .pf-landscaping .hero-stats,
    .pf-landscaping .hero-trust {
        justify-content: center;
    }

    .pf-landscaping .landscape-hero-visual {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .landscape-intent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landscape-season-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .landscape-season-grid h2 {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .landscape-process-grid {
        grid-template-columns: 1fr;
    }

    .landscape-process-step,
    .landscape-process-step + .landscape-process-step {
        min-height: 0;
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .landscape-process-step:last-child {
        padding-bottom: 24px;
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .pf-landscaping .landscape-hero {
        padding: 76px 0 64px;
    }

    .pf-landscaping .hero h1 {
        font-size: clamp(2.45rem, 13vw, 3.6rem);
    }

    .pf-landscaping .landscape-hero-visual {
        min-height: 405px;
    }

    .yard-plan-card {
        padding: 20px 17px;
        border-radius: 18px;
    }

    .yard-plan-top {
        font-size: 0.55rem;
    }

    .yard-plan-heading {
        margin-top: 27px;
    }

    .yard-plan-heading h2 {
        font-size: 1.25rem;
    }

    .yard-plan-map {
        height: 218px;
    }

    .landscape-float-card {
        max-width: 178px;
        padding: 9px 10px 9px 9px;
    }

    .landscape-float-card-top {
        top: 0;
        left: -4px;
    }

    .landscape-float-card-bottom {
        right: -4px;
        bottom: 0;
    }

    .landscape-float-card strong {
        font-size: 0.68rem;
    }

    .landscape-float-card small {
        font-size: 0.59rem;
    }

    .landscape-intent-grid {
        grid-template-columns: 1fr;
    }

    .landscape-intent-card {
        min-height: 0;
    }

    .landscape-service-top small {
        font-size: 0.56rem;
    }

    .yard-plan-details {
        gap: 8px;
    }

    .yard-plan-details > div {
        padding: 9px;
    }
}

/* ---------- Medspas & Dental Practices example (Harborlight) ----------
   A calm, editorial dental brand that makes the first appointment feel like
   a conversation. It deliberately avoids the GNG gold, HVAC teal, and
   landscaping green palettes used by the other portfolio examples. */
.pf-medspas-dental {
    --color-bg: #fbfaf8;
    --color-bg-alt: #f1eef7;
    --color-panel: #ffffff;
    --color-panel-2: #f8f6fb;
    --color-border: #ded9e8;
    --color-text: #2f2b43;
    --color-muted: #756e82;
    --color-accent: #7867b4;
    --color-accent-light: #a395d4;
    --color-accent-dark: #59498e;
    --color-silver: #8e879b;
    --color-silver-dark: #6b6478;

    --dental-plum: #3e385c;
    --dental-coral: #e88477;
    --dental-coral-light: #f2aaa0;
    --dental-gold: #d6a94f;
    --dental-blue: #668da1;
}

.pf-medspas-dental .portfolio-example-hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.93fr);
    max-width: 1220px;
    text-align: left;
    gap: 64px;
}

.pf-medspas-dental .dental-hero {
    min-height: 650px;
    padding: 104px 0 94px;
    background-image: linear-gradient(90deg, rgba(251, 250, 248, 0.99) 0%, rgba(251, 250, 248, 0.93) 43%, rgba(251, 250, 248, 0.2) 100%), var(--pf-hero-image, none);
    background-size: cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

.pf-medspas-dental .dental-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.pf-medspas-dental .eyebrow {
    color: var(--color-accent-dark);
    background: rgba(120, 103, 180, 0.09);
    border-color: rgba(120, 103, 180, 0.28);
}

.eyebrow-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(232, 132, 119, 0.17);
    color: var(--dental-coral);
    font-size: 0.74rem;
}

.pf-medspas-dental .hero h1 {
    max-width: 11ch;
    color: var(--dental-plum);
    font-size: clamp(2.65rem, 4.9vw, 4.45rem);
    letter-spacing: -0.06em;
}

.pf-medspas-dental .hero h1 .accent {
    color: var(--color-accent-dark);
}

.pf-medspas-dental .hero-lede {
    max-width: 48ch;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.pf-medspas-dental .hero-actions,
.pf-medspas-dental .hero-stats {
    justify-content: flex-start;
}

.pf-medspas-dental .btn-primary {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 72%);
    color: #fbfaff;
}

.pf-medspas-dental .btn-primary:hover {
    background: linear-gradient(135deg, #b8ade4, var(--color-accent));
}

.pf-medspas-dental .btn-outline {
    color: var(--dental-plum);
    border-color: var(--color-border);
}

.pf-medspas-dental .btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

.pf-medspas-dental .hero-trust {
    color: var(--color-muted);
}

.pf-medspas-dental .trust-dot {
    background: var(--dental-coral);
}

.pf-medspas-dental .dental-hero-visual {
    position: relative;
    min-height: 465px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dental-visual-ring {
    position: absolute;
    border: 1px solid rgba(120, 103, 180, 0.2);
    border-radius: 50%;
    pointer-events: none;
}

.dental-visual-ring-one {
    width: 430px;
    height: 430px;
}

.dental-visual-ring-two {
    width: 570px;
    height: 570px;
    border-color: rgba(232, 132, 119, 0.17);
}

.dental-visit-card {
    position: relative;
    z-index: 2;
    width: min(100%, 455px);
    padding: 26px;
    border: 1px solid rgba(89, 73, 142, 0.24);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 27px 65px rgba(62, 56, 92, 0.18), 0 2px 0 rgba(255, 255, 255, 0.95) inset;
}

.dental-visit-card::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(120, 103, 180, 0.1);
    border-radius: 16px;
    pointer-events: none;
}

.dental-card-top,
.dental-card-title,
.dental-card-steps,
.dental-card-footer {
    position: relative;
    z-index: 1;
}

.dental-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.07em;
}

.dental-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent-dark);
}

.dental-card-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.dental-card-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 34px 0 24px;
}

.dental-card-title small {
    display: block;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.06em;
}

.dental-card-title h2 {
    margin: 6px 0 0;
    color: var(--dental-plum);
    font-size: 1.55rem;
    letter-spacing: -0.035em;
}

.dental-card-spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(232, 132, 119, 0.15);
    color: var(--dental-coral);
    font-size: 1.35rem;
}

.dental-card-steps {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.dental-card-steps > div {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 11px;
    align-items: start;
}

.dental-card-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    grid-row: span 2;
    border-radius: 9px;
    background: var(--color-panel-2);
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.62rem;
}

.dental-card-steps > div:nth-child(2) span {
    color: #b45f58;
    background: #fbe8e4;
}

.dental-card-steps > div:nth-child(3) span {
    color: #a27525;
    background: #fcf1d9;
}

.dental-card-steps strong,
.dental-card-steps small {
    display: block;
}

.dental-card-steps strong {
    color: var(--dental-plum);
    font-size: 0.82rem;
}

.dental-card-steps small {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 0.72rem;
}

.dental-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
}

.dental-card-footer strong {
    color: var(--color-accent-dark);
    font-size: 0.65rem;
}

.dental-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 220px;
    padding: 12px 15px 12px 12px;
    border: 1px solid rgba(89, 73, 142, 0.21);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 40px rgba(62, 56, 92, 0.15);
}

.dental-float-card-top {
    top: 8%;
    left: -2%;
}

.dental-float-card-bottom {
    right: -3%;
    bottom: 7%;
}

.dental-float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 10px;
    background: rgba(232, 132, 119, 0.15);
    color: #bd655e;
    font-size: 1rem;
}

.dental-float-icon-plan {
    background: rgba(120, 103, 180, 0.12);
    color: var(--color-accent-dark);
}

.dental-float-card strong,
.dental-float-card small {
    display: block;
}

.dental-float-card strong {
    color: var(--dental-plum);
    font-size: 0.76rem;
}

.dental-float-card small {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 0.68rem;
}

.dental-intents-section {
    background: var(--color-bg-alt);
}

.dental-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.dental-intent-card {
    position: relative;
    min-height: 273px;
    display: flex;
    flex-direction: column;
    padding: 23px 21px 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-panel);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.dental-intent-card::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -43px;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(120, 103, 180, 0.15);
    border-radius: 50%;
}

.dental-intent-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 16px 30px rgba(62, 56, 92, 0.09);
    transform: translateY(-4px);
}

.dental-intent-number {
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.dental-intent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 25px 0 18px;
    border: 1px solid rgba(120, 103, 180, 0.25);
    border-radius: 13px;
    background: rgba(120, 103, 180, 0.1);
    color: var(--color-accent-dark);
}

.dental-intent-icon svg {
    width: 23px;
    height: 23px;
}

.dental-intent-icon-coral {
    color: #b35e58;
    border-color: rgba(232, 132, 119, 0.31);
    background: rgba(232, 132, 119, 0.13);
}

.dental-intent-icon-gold {
    color: #a27525;
    border-color: rgba(214, 169, 79, 0.34);
    background: rgba(214, 169, 79, 0.14);
}

.dental-intent-icon-blue {
    color: #547d91;
    border-color: rgba(102, 141, 161, 0.3);
    background: rgba(102, 141, 161, 0.12);
}

.dental-intent-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.dental-intent-copy h3 {
    margin: 0 0 7px;
    color: var(--dental-plum);
    font-size: 1.03rem;
}

.dental-intent-copy p {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.46;
}

.dental-intent-copy > span:last-child {
    margin-top: auto;
    color: var(--color-accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
}

.dental-service-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-panel), #fcfbfe);
}

.dental-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 3px;
    background: var(--color-accent);
}

.dental-service-card:nth-child(2)::before {
    background: var(--dental-coral);
}

.dental-service-card:nth-child(3)::before {
    background: var(--dental-gold);
}

.dental-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
}

.dental-service-top small {
    color: var(--color-muted);
    font-size: 0.6rem;
    text-align: right;
}

.pf-medspas-dental .service-card .icon-badge {
    background: rgba(120, 103, 180, 0.1);
    color: var(--color-accent-dark);
}

.pf-medspas-dental .dental-service-card:nth-child(2) .icon-badge {
    background: rgba(232, 132, 119, 0.12);
    color: #b35e58;
}

.pf-medspas-dental .dental-service-card:nth-child(3) .icon-badge {
    background: rgba(214, 169, 79, 0.14);
    color: #a27525;
}

.pf-medspas-dental .service-card h3 {
    color: var(--dental-plum);
}

.pf-medspas-dental .service-list li {
    color: var(--dental-plum);
}

.pf-medspas-dental .service-list li::before {
    color: var(--color-accent);
}

.dental-comfort-section {
    background: linear-gradient(135deg, #ece8f4, #f8eeee);
}

.dental-comfort-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 78px;
}

.dental-comfort-grid h2 {
    max-width: 10ch;
    margin: 0 0 15px;
    color: var(--dental-plum);
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.04em;
}

.dental-comfort-lede {
    max-width: 44ch;
    margin: 0 0 28px;
    color: var(--color-muted);
}

.dental-comfort-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dental-comfort-list li {
    display: flex;
    gap: 13px;
}

.dental-comfort-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: rgba(120, 103, 180, 0.13);
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.63rem;
}

.dental-comfort-list strong,
.dental-comfort-list small {
    display: block;
}

.dental-comfort-list strong {
    margin-bottom: 2px;
    color: var(--dental-plum);
    font-size: 0.92rem;
}

.dental-comfort-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.dental-comfort-card {
    padding: 32px;
    border: 1px solid rgba(120, 103, 180, 0.27);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.73);
    box-shadow: 0 22px 50px rgba(62, 56, 92, 0.1);
}

.comfort-card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 26px;
    border-radius: 14px;
    background: rgba(232, 132, 119, 0.15);
    color: #bd655e;
    font-size: 1.35rem;
}

.dental-comfort-card > small {
    display: block;
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.dental-comfort-card h3 {
    margin: 13px 0 10px;
    color: var(--dental-plum);
    font-size: 1.45rem;
}

.dental-comfort-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.dental-comfort-card .btn {
    width: 100%;
    margin-top: 24px;
}

.dental-process-section {
    background: var(--color-bg-alt);
}

.dental-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.dental-process-step {
    display: flex;
    gap: 18px;
    min-height: 182px;
    padding: 31px 26px 29px 0;
    border-right: 1px solid var(--color-border);
}

.dental-process-step + .dental-process-step {
    padding-left: 26px;
}

.dental-process-step:last-child {
    padding-right: 0;
    border-right: none;
}

.dental-process-step > span {
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.dental-process-step h3 {
    margin: 0 0 9px;
    color: var(--dental-plum);
    font-size: 1.05rem;
}

.dental-process-step p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.dental-privacy-section {
    background: var(--color-bg);
}

.dental-privacy-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 80px;
}

.dental-privacy-grid h2 {
    max-width: 11ch;
    margin: 0 0 15px;
    color: var(--dental-plum);
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    letter-spacing: -0.04em;
}

.privacy-lede {
    max-width: 43ch;
    margin: 0 0 28px;
    color: var(--color-muted);
}

.privacy-card {
    padding: 29px;
    border: 1px solid rgba(120, 103, 180, 0.27);
    border-radius: 19px;
    background: var(--color-panel-2);
}

.privacy-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 23px;
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

.privacy-shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: rgba(120, 103, 180, 0.12);
    color: var(--color-accent-dark);
    font-size: 1.1rem;
}

.privacy-row {
    display: grid;
    grid-template-columns: 29px 1fr;
    column-gap: 12px;
    margin-bottom: 18px;
}

.privacy-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    grid-row: span 2;
    border-radius: 9px;
    background: var(--color-panel);
    color: var(--color-accent-dark);
    font-family: var(--font-mono);
    font-size: 0.62rem;
}

.privacy-row strong,
.privacy-row small {
    display: block;
}

.privacy-row strong {
    color: var(--dental-plum);
    font-size: 0.84rem;
}

.privacy-row small {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.privacy-note {
    margin-top: 21px;
    padding: 12px 13px;
    border-left: 3px solid var(--dental-coral);
    background: rgba(232, 132, 119, 0.08);
    color: #765a60;
    font-size: 0.76rem;
}

.pf-medspas-dental .why-section {
    background: var(--color-bg-alt);
}

.pf-medspas-dental .why-before {
    border-color: rgba(232, 132, 119, 0.38);
}

.pf-medspas-dental .why-after {
    border-color: rgba(120, 103, 180, 0.38);
}

.pf-medspas-dental .portfolio-badge-ai {
    color: var(--color-accent-dark);
    border-color: rgba(120, 103, 180, 0.33);
    background: rgba(120, 103, 180, 0.09);
}

.pf-medspas-dental .portfolio-badge-soon {
    color: #b35e58;
    border-color: rgba(232, 132, 119, 0.34);
    background: rgba(232, 132, 119, 0.08);
}

.pf-medspas-dental .quote-chat-section {
    background: radial-gradient(circle at 50% 0%, rgba(120, 103, 180, 0.1), transparent 40%), var(--color-bg);
}

.pf-medspas-dental .quote-chat {
    box-shadow: 0 14px 38px rgba(62, 56, 92, 0.08);
}

.pf-medspas-dental .quote-summary {
    border-color: rgba(120, 103, 180, 0.34);
}

.pf-medspas-dental .quote-summary h3 {
    color: var(--color-accent-dark);
}

@media (max-width: 1000px) {
    .pf-medspas-dental .portfolio-example-hero .container {
        grid-template-columns: 1fr;
        gap: 42px;
        text-align: center;
    }

    .pf-medspas-dental .hero h1 {
        max-width: none;
    }

    .pf-medspas-dental .hero-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .pf-medspas-dental .hero-actions,
    .pf-medspas-dental .hero-stats,
    .pf-medspas-dental .hero-trust {
        justify-content: center;
    }

    .pf-medspas-dental .dental-hero-visual {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .dental-intent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dental-comfort-grid,
    .dental-privacy-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .dental-comfort-grid h2,
    .dental-privacy-grid h2 {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .dental-process-grid {
        grid-template-columns: 1fr;
    }

    .dental-process-step,
    .dental-process-step + .dental-process-step {
        min-height: 0;
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .dental-process-step:last-child {
        padding-bottom: 24px;
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .pf-medspas-dental .dental-hero {
        padding: 76px 0 64px;
    }

    .pf-medspas-dental .hero h1 {
        font-size: clamp(2.35rem, 12.5vw, 3.55rem);
    }

    .pf-medspas-dental .dental-hero-visual {
        min-height: 405px;
    }

    .dental-visual-ring-one {
        width: 310px;
        height: 310px;
    }

    .dental-visual-ring-two {
        width: 410px;
        height: 410px;
    }

    .dental-visit-card {
        padding: 21px 17px;
        border-radius: 18px;
    }

    .dental-card-top {
        font-size: 0.53rem;
    }

    .dental-card-title {
        margin-top: 27px;
    }

    .dental-card-title h2 {
        font-size: 1.27rem;
    }

    .dental-card-steps {
        gap: 14px;
    }

    .dental-card-footer {
        font-size: 0.52rem;
    }

    .dental-card-footer strong {
        font-size: 0.55rem;
    }

    .dental-float-card {
        max-width: 178px;
        padding: 9px 10px 9px 9px;
    }

    .dental-float-card-top {
        top: 0;
        left: -4px;
    }

    .dental-float-card-bottom {
        right: -4px;
        bottom: 0;
    }

    .dental-float-card strong {
        font-size: 0.68rem;
    }

    .dental-float-card small {
        font-size: 0.59rem;
    }

    .dental-intent-grid {
        grid-template-columns: 1fr;
    }

    .dental-intent-card {
        min-height: 0;
    }

    .dental-service-top small {
        font-size: 0.56rem;
    }

    .dental-comfort-card,
    .privacy-card {
        padding: 25px 21px;
    }
}

/* ---------- Auto Shops & Restaurants example (Northline Auto Care) ----------
   A high-contrast service brand for the auto-shop side of the combined
   category. The dashboard visual makes the service handoff concrete without
   pretending that a website can diagnose a vehicle remotely. */
.pf-auto-restaurants {
    --color-bg: #0f171d;
    --color-bg-alt: #17252d;
    --color-panel: #1b2b34;
    --color-panel-2: #213640;
    --color-border: #304a56;
    --color-text: #eef5f4;
    --color-muted: #9bb0b6;
    --color-accent: #f2a33d;
    --color-accent-light: #ffc56e;
    --color-accent-dark: #bc7221;
    --color-silver: #c8d7d9;
    --color-silver-dark: #8da3a9;

    --auto-blue: #66b8d6;
    --auto-green: #76d28e;
    --auto-red: #df766c;
    --auto-ink: #0f171d;
}

.pf-auto-restaurants .portfolio-example-hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.93fr);
    max-width: 1220px;
    text-align: left;
    gap: 64px;
}

.pf-auto-restaurants .auto-hero {
    min-height: 650px;
    padding: 105px 0 95px;
    background-image: linear-gradient(90deg, rgba(15, 23, 29, 0.99) 0%, rgba(15, 23, 29, 0.93) 42%, rgba(15, 23, 29, 0.24) 100%), var(--pf-hero-image, none);
    background-size: cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

.pf-auto-restaurants .auto-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.pf-auto-restaurants .eyebrow {
    color: var(--color-accent-light);
    background: rgba(242, 163, 61, 0.1);
    border-color: rgba(242, 163, 61, 0.34);
}

.eyebrow-bolt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(242, 163, 61, 0.17);
    color: var(--color-accent-light);
    font-size: 0.83rem;
}

.pf-auto-restaurants .hero h1 {
    max-width: 11ch;
    color: #f2f7f6;
    font-size: clamp(2.75rem, 5vw, 4.6rem);
    letter-spacing: -0.06em;
}

.pf-auto-restaurants .hero h1 .accent {
    color: var(--color-accent-light);
}

.pf-auto-restaurants .hero-lede {
    max-width: 48ch;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.pf-auto-restaurants .hero-actions,
.pf-auto-restaurants .hero-stats {
    justify-content: flex-start;
}

.pf-auto-restaurants .btn-primary {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 72%);
    color: var(--auto-ink);
}

.pf-auto-restaurants .btn-primary:hover {
    background: linear-gradient(135deg, #ffd58c, var(--color-accent));
}

.pf-auto-restaurants .btn-outline {
    color: var(--color-text);
    border-color: var(--color-border);
}

.pf-auto-restaurants .btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.pf-auto-restaurants .hero-trust {
    color: var(--color-muted);
}

.pf-auto-restaurants .trust-dot {
    background: var(--auto-green);
}

.pf-auto-restaurants .auto-hero-visual {
    position: relative;
    min-height: 465px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-visual-ring {
    position: absolute;
    border: 1px solid rgba(102, 184, 214, 0.2);
    border-radius: 50%;
    pointer-events: none;
}

.auto-visual-ring-one {
    width: 430px;
    height: 430px;
}

.auto-visual-ring-two {
    width: 575px;
    height: 575px;
    border-color: rgba(242, 163, 61, 0.16);
}

.auto-dashboard-card {
    position: relative;
    z-index: 2;
    width: min(100%, 455px);
    padding: 26px;
    border: 1px solid rgba(139, 177, 188, 0.36);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(37, 57, 67, 0.98), rgba(16, 28, 35, 0.98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.auto-dashboard-card::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(102, 184, 214, 0.12);
    border-radius: 16px;
    pointer-events: none;
}

.auto-card-top,
.auto-vehicle-line,
.auto-alert-panel,
.auto-status-bars,
.auto-card-footer {
    position: relative;
    z-index: 1;
}

.auto-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #9bb8bf;
    font-family: var(--font-mono);
    font-size: 0.59rem;
    letter-spacing: 0.07em;
}

.auto-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ae7aa;
}

.auto-card-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--auto-green);
}

.auto-vehicle-line {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin: 34px 0 22px;
}

.auto-vehicle-line small,
.auto-vehicle-line strong {
    display: block;
}

.auto-vehicle-line small {
    color: #8eaab3;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.07em;
}

.auto-vehicle-line strong {
    margin-top: 5px;
    color: #f0f6f4;
    font-size: 1.22rem;
    letter-spacing: -0.025em;
}

.auto-vehicle-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(102, 184, 214, 0.3);
    border-radius: 13px;
    background: rgba(102, 184, 214, 0.11);
    color: var(--auto-blue);
    font-size: 1.45rem;
}

.auto-alert-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 14px;
    border: 1px solid rgba(242, 163, 61, 0.42);
    border-radius: 14px;
    background: rgba(67, 48, 28, 0.64);
}

.auto-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: rgba(242, 163, 61, 0.2);
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
}

.auto-alert-panel small,
.auto-alert-panel strong,
.auto-alert-panel span {
    display: block;
}

.auto-alert-panel small {
    color: #d6b37a;
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.06em;
}

.auto-alert-panel strong {
    margin-top: 4px;
    color: #fff2d8;
    font-size: 0.98rem;
}

.auto-alert-panel span {
    margin-top: 3px;
    color: #bba789;
    font-size: 0.71rem;
}

.auto-status-bars {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 25px 0 24px;
}

.auto-status-bars > div {
    display: grid;
    grid-template-columns: 72px 1fr 47px;
    align-items: center;
    gap: 10px;
}

.auto-status-bars span,
.auto-status-bars em {
    color: #8eaab3;
    font-family: var(--font-mono);
    font-size: 0.57rem;
    font-style: normal;
    letter-spacing: 0.05em;
}

.auto-status-bars em {
    color: var(--color-accent-light);
    text-align: right;
}

.auto-status-bars b {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #0e2028;
}

.auto-status-bars b i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.auto-status-bars b i.auto-bar-blue {
    background: var(--auto-blue);
}

.auto-status-bars b i.auto-bar-green {
    background: var(--auto-green);
}

.auto-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 17px;
    border-top: 1px solid rgba(139, 177, 188, 0.22);
    color: #9bb8bf;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.04em;
}

.auto-card-footer b {
    color: var(--color-accent-light);
}

.auto-card-footer strong {
    color: #f2f7f6;
    font-size: 0.62rem;
}

.auto-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 220px;
    padding: 12px 15px 12px 12px;
    border: 1px solid rgba(139, 177, 188, 0.3);
    border-radius: 14px;
    background: rgba(16, 29, 36, 0.94);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.auto-float-card-top {
    top: 8%;
    left: -2%;
}

.auto-float-card-bottom {
    right: -3%;
    bottom: 7%;
}

.auto-float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 10px;
    background: rgba(118, 210, 142, 0.14);
    color: var(--auto-green);
    font-family: var(--font-mono);
    font-size: 1rem;
}

.auto-float-icon-blue {
    background: rgba(102, 184, 214, 0.14);
    color: var(--auto-blue);
}

.auto-float-card strong,
.auto-float-card small {
    display: block;
}

.auto-float-card strong {
    color: #edf7f5;
    font-size: 0.76rem;
}

.auto-float-card small {
    margin-top: 2px;
    color: #9bb0b6;
    font-size: 0.68rem;
}

.auto-intents-section {
    background: var(--color-bg-alt);
}

.auto-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.auto-intent-card {
    position: relative;
    min-height: 273px;
    display: flex;
    flex-direction: column;
    padding: 23px 21px 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, #213943, #182b34);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.auto-intent-card::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -43px;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(102, 184, 214, 0.15);
    border-radius: 50%;
}

.auto-intent-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.auto-intent-number {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.auto-intent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 25px 0 18px;
    border: 1px solid rgba(242, 163, 61, 0.3);
    border-radius: 13px;
    background: rgba(242, 163, 61, 0.12);
    color: var(--color-accent-light);
}

.auto-intent-icon svg {
    width: 23px;
    height: 23px;
}

.auto-intent-icon-blue {
    color: var(--auto-blue);
    border-color: rgba(102, 184, 214, 0.3);
    background: rgba(102, 184, 214, 0.12);
}

.auto-intent-icon-coral {
    color: #ef9a90;
    border-color: rgba(223, 118, 108, 0.3);
    background: rgba(223, 118, 108, 0.12);
}

.auto-intent-icon-gold {
    color: #dbca8e;
    border-color: rgba(214, 169, 79, 0.32);
    background: rgba(214, 169, 79, 0.12);
}

.auto-intent-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.auto-intent-copy h3 {
    margin: 0 0 7px;
    color: #f0f6f4;
    font-size: 1.03rem;
}

.auto-intent-copy p {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.46;
}

.auto-intent-copy > span:last-child {
    margin-top: auto;
    color: var(--color-accent-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.auto-service-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-panel-2), var(--color-panel));
}

.auto-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 3px;
    background: var(--color-accent);
}

.auto-service-card:nth-child(2)::before {
    background: var(--auto-blue);
}

.auto-service-card:nth-child(3)::before {
    background: var(--auto-green);
}

.auto-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
}

.auto-service-top small {
    color: var(--color-muted);
    font-size: 0.6rem;
    text-align: right;
}

.pf-auto-restaurants .service-card .icon-badge {
    background: rgba(242, 163, 61, 0.12);
    color: var(--color-accent-light);
}

.pf-auto-restaurants .auto-service-card:nth-child(2) .icon-badge {
    background: rgba(102, 184, 214, 0.12);
    color: var(--auto-blue);
}

.pf-auto-restaurants .auto-service-card:nth-child(3) .icon-badge {
    background: rgba(118, 210, 142, 0.12);
    color: var(--auto-green);
}

.pf-auto-restaurants .service-card h3 {
    color: #f0f6f4;
}

.pf-auto-restaurants .service-list li {
    color: #e0edeb;
}

.pf-auto-restaurants .service-list li::before {
    color: var(--color-accent-light);
}

.auto-process-section {
    background: var(--color-bg-alt);
}

.auto-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.auto-process-step {
    display: flex;
    gap: 18px;
    min-height: 184px;
    padding: 31px 26px 29px 0;
    border-right: 1px solid var(--color-border);
}

.auto-process-step + .auto-process-step {
    padding-left: 26px;
}

.auto-process-step:last-child {
    padding-right: 0;
    border-right: none;
}

.auto-process-step > span {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.auto-process-step h3 {
    margin: 0 0 9px;
    color: #f0f6f4;
    font-size: 1.05rem;
}

.auto-process-step p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.auto-transparency-section {
    background: linear-gradient(135deg, #172e38, #111e25);
}

.auto-transparency-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 78px;
}

.auto-transparency-grid h2 {
    max-width: 12ch;
    margin: 0 0 15px;
    color: #f0f6f4;
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.04em;
}

.transparency-lede {
    max-width: 43ch;
    margin: 0 0 28px;
    color: var(--color-muted);
}

.transparency-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transparency-list li {
    display: flex;
    gap: 13px;
}

.transparency-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: rgba(242, 163, 61, 0.14);
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.63rem;
}

.transparency-list strong,
.transparency-list small {
    display: block;
}

.transparency-list strong {
    margin-bottom: 2px;
    color: #eef5f4;
    font-size: 0.92rem;
}

.transparency-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.garage-card {
    padding: 32px;
    border: 1px solid rgba(102, 184, 214, 0.3);
    border-radius: 21px;
    background: linear-gradient(155deg, rgba(39, 64, 75, 0.96), rgba(20, 37, 45, 0.96));
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.22);
}

.garage-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.garage-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 11px;
    background: rgba(102, 184, 214, 0.13);
    color: var(--auto-blue);
    font-size: 1.25rem;
}

.garage-card h3 {
    margin: 0 0 10px;
    color: #f0f6f4;
    font-size: 1.48rem;
}

.garage-card > p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.garage-line {
    height: 1px;
    margin: 25px 0 19px;
    background: rgba(102, 184, 214, 0.25);
}

.garage-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: #eaf3f1;
    font-size: 0.85rem;
}

.garage-detail span {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.garage-card .btn {
    width: 100%;
    margin-top: 17px;
}

.pf-auto-restaurants .why-section {
    background: var(--color-bg);
}

.pf-auto-restaurants .why-before {
    border-color: rgba(223, 118, 108, 0.38);
}

.pf-auto-restaurants .why-after {
    border-color: rgba(242, 163, 61, 0.38);
}

.pf-auto-restaurants .portfolio-badge-ai {
    color: var(--color-accent-light);
    border-color: rgba(242, 163, 61, 0.34);
    background: rgba(242, 163, 61, 0.1);
}

.pf-auto-restaurants .portfolio-badge-soon {
    color: #ef9a90;
    border-color: rgba(223, 118, 108, 0.34);
    background: rgba(223, 118, 108, 0.08);
}

.pf-auto-restaurants .quote-chat-section {
    background: radial-gradient(circle at 50% 0%, rgba(242, 163, 61, 0.1), transparent 40%), var(--color-bg);
}

.pf-auto-restaurants .quote-summary {
    border-color: rgba(242, 163, 61, 0.36);
}

.pf-auto-restaurants .quote-summary h3 {
    color: var(--color-accent-light);
}

@media (max-width: 1000px) {
    .pf-auto-restaurants .portfolio-example-hero .container {
        grid-template-columns: 1fr;
        gap: 42px;
        text-align: center;
    }

    .pf-auto-restaurants .hero h1 {
        max-width: none;
    }

    .pf-auto-restaurants .hero-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .pf-auto-restaurants .hero-actions,
    .pf-auto-restaurants .hero-stats,
    .pf-auto-restaurants .hero-trust {
        justify-content: center;
    }

    .pf-auto-restaurants .auto-hero-visual {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .auto-intent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .auto-transparency-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .auto-transparency-grid h2 {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .auto-process-grid {
        grid-template-columns: 1fr;
    }

    .auto-process-step,
    .auto-process-step + .auto-process-step {
        min-height: 0;
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .auto-process-step:last-child {
        padding-bottom: 24px;
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .pf-auto-restaurants .auto-hero {
        padding: 76px 0 64px;
    }

    .pf-auto-restaurants .hero h1 {
        font-size: clamp(2.35rem, 12.5vw, 3.55rem);
    }

    .pf-auto-restaurants .auto-hero-visual {
        min-height: 415px;
    }

    .auto-visual-ring-one {
        width: 310px;
        height: 310px;
    }

    .auto-visual-ring-two {
        width: 410px;
        height: 410px;
    }

    .auto-dashboard-card {
        padding: 21px 17px;
        border-radius: 18px;
    }

    .auto-card-top {
        font-size: 0.52rem;
    }

    .auto-vehicle-line {
        margin-top: 27px;
    }

    .auto-vehicle-line strong {
        font-size: 1rem;
    }

    .auto-alert-panel {
        padding: 13px 11px;
    }

    .auto-alert-panel strong {
        font-size: 0.84rem;
    }

    .auto-alert-panel span {
        font-size: 0.63rem;
    }

    .auto-status-bars > div {
        grid-template-columns: 61px 1fr 42px;
        gap: 7px;
    }

    .auto-status-bars span,
    .auto-status-bars em {
        font-size: 0.5rem;
    }

    .auto-card-footer {
        font-size: 0.48rem;
    }

    .auto-card-footer strong {
        font-size: 0.53rem;
    }

    .auto-float-card {
        max-width: 178px;
        padding: 9px 10px 9px 9px;
    }

    .auto-float-card-top {
        top: 0;
        left: -4px;
    }

    .auto-float-card-bottom {
        right: -4px;
        bottom: 0;
    }

    .auto-float-card strong {
        font-size: 0.68rem;
    }

    .auto-float-card small {
        font-size: 0.59rem;
    }

    .auto-intent-grid {
        grid-template-columns: 1fr;
    }

    .auto-intent-card {
        min-height: 0;
    }

    .auto-service-top small {
        font-size: 0.56rem;
    }

    .garage-card {
        padding: 25px 21px;
    }
}

/* ---------- Restaurant example (Mosaic Supper Club) ----------
   A warm supper-club identity for the restaurant side of the combined
   category. It turns reservation, event, pickup, and menu questions into
   distinct hospitality paths instead of one generic contact button. */
.pf-restaurant {
    --color-bg: #241719;
    --color-bg-alt: #372022;
    --color-panel: #432629;
    --color-panel-2: #4e2d2c;
    --color-border: #6b4138;
    --color-text: #fff5e5;
    --color-muted: #d1b4a2;
    --color-accent: #e2a15a;
    --color-accent-light: #ffd093;
    --color-accent-dark: #a95f3d;
    --color-silver: #d8c4b4;
    --color-silver-dark: #ad8d7d;

    --restaurant-cream: #fff5df;
    --restaurant-coral: #d86f5a;
    --restaurant-sage: #a4bea5;
    --restaurant-ink: #3d2220;
    --restaurant-gold: #e4b867;
}

.pf-restaurant .portfolio-example-hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.93fr);
    max-width: 1220px;
    text-align: left;
    gap: 64px;
}

.pf-restaurant .restaurant-hero {
    min-height: 660px;
    padding: 106px 0 95px;
    background-image: linear-gradient(90deg, rgba(36, 23, 25, 0.99) 0%, rgba(36, 23, 25, 0.91) 43%, rgba(36, 23, 25, 0.23) 100%), var(--pf-hero-image, none);
    background-size: cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

.pf-restaurant .restaurant-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.pf-restaurant .eyebrow {
    color: var(--color-accent-light);
    background: rgba(226, 161, 90, 0.1);
    border-color: rgba(226, 161, 90, 0.34);
}

.eyebrow-flame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(216, 111, 90, 0.18);
    color: var(--restaurant-coral);
    font-size: 0.8rem;
}

.pf-restaurant .hero h1 {
    max-width: 11ch;
    color: var(--restaurant-cream);
    font-size: clamp(2.8rem, 5vw, 4.65rem);
    letter-spacing: -0.06em;
}

.pf-restaurant .hero h1 .accent {
    color: var(--color-accent-light);
}

.pf-restaurant .hero-lede {
    max-width: 48ch;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.pf-restaurant .hero-actions,
.pf-restaurant .hero-stats {
    justify-content: flex-start;
}

.pf-restaurant .btn-primary {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent) 72%);
    color: var(--restaurant-ink);
}

.pf-restaurant .btn-primary:hover {
    background: linear-gradient(135deg, #ffe0ab, var(--color-accent));
}

.pf-restaurant .btn-outline {
    color: var(--color-text);
    border-color: var(--color-border);
}

.pf-restaurant .btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.pf-restaurant .hero-trust {
    color: var(--color-muted);
}

.pf-restaurant .trust-dot {
    background: var(--restaurant-sage);
}

.pf-restaurant .restaurant-hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.restaurant-visual-ring {
    position: absolute;
    border: 1px solid rgba(228, 184, 103, 0.23);
    border-radius: 50%;
    pointer-events: none;
}

.restaurant-visual-ring-one {
    width: 430px;
    height: 430px;
}

.restaurant-visual-ring-two {
    width: 575px;
    height: 575px;
    border-color: rgba(216, 111, 90, 0.18);
}

.mosaic-menu-card {
    position: relative;
    z-index: 2;
    width: min(100%, 455px);
    padding: 26px;
    border: 1px solid rgba(255, 213, 154, 0.4);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 245, 223, 0.98), rgba(234, 213, 178, 0.98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.mosaic-menu-card::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(169, 95, 61, 0.15);
    border-radius: 15px;
    pointer-events: none;
}

.mosaic-card-top,
.mosaic-card-title,
.mosaic-card-dish,
.mosaic-card-footer {
    position: relative;
    z-index: 1;
}

.mosaic-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #966b55;
    font-family: var(--font-mono);
    font-size: 0.59rem;
    letter-spacing: 0.07em;
}

.mosaic-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #65856d;
}

.mosaic-card-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #76a77c;
}

.mosaic-card-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 34px 0 25px;
}

.mosaic-card-title small {
    display: block;
    color: #966b55;
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.06em;
}

.mosaic-card-title h2 {
    margin: 6px 0 0;
    color: var(--restaurant-ink);
    font-size: 1.55rem;
    letter-spacing: -0.035em;
}

.mosaic-card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(216, 111, 90, 0.14);
    color: var(--restaurant-coral);
    font-size: 1.35rem;
}

.mosaic-card-dish {
    display: grid;
    grid-template-columns: 42px 1fr 20px;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.dish-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(216, 111, 90, 0.18);
    color: var(--restaurant-coral);
    font-size: 1.25rem;
}

.dish-orb-two {
    background: rgba(164, 190, 165, 0.45);
    color: #65856d;
}

.dish-orb-three {
    background: rgba(228, 184, 103, 0.3);
    color: #ad7b2f;
}

.mosaic-card-dish strong,
.mosaic-card-dish small {
    display: block;
}

.mosaic-card-dish strong {
    color: var(--restaurant-ink);
    font-size: 0.82rem;
}

.mosaic-card-dish small {
    margin-top: 3px;
    color: #966f5a;
    font-size: 0.7rem;
}

.mosaic-card-dish em {
    color: #b28363;
    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-style: normal;
}

.mosaic-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 23px;
    padding-top: 16px;
    border-top: 1px solid rgba(169, 95, 61, 0.23);
    color: #966b55;
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.04em;
}

.mosaic-card-footer strong {
    color: #a95f3d;
    font-size: 0.62rem;
}

.restaurant-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 225px;
    padding: 12px 15px 12px 12px;
    border: 1px solid rgba(255, 213, 154, 0.28);
    border-radius: 14px;
    background: rgba(50, 28, 29, 0.94);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.restaurant-float-card-top {
    top: 8%;
    left: -2%;
}

.restaurant-float-card-bottom {
    right: -3%;
    bottom: 7%;
}

.restaurant-float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 10px;
    background: rgba(216, 111, 90, 0.17);
    color: #f0a596;
    font-size: 1rem;
}

.restaurant-float-icon-gold {
    background: rgba(228, 184, 103, 0.16);
    color: var(--color-accent-light);
}

.restaurant-float-card strong,
.restaurant-float-card small {
    display: block;
}

.restaurant-float-card strong {
    color: #fff5e5;
    font-size: 0.76rem;
}

.restaurant-float-card small {
    margin-top: 2px;
    color: #d1b4a2;
    font-size: 0.68rem;
}

.restaurant-intents-section {
    background: var(--color-bg-alt);
}

.restaurant-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.restaurant-intent-card {
    position: relative;
    min-height: 273px;
    display: flex;
    flex-direction: column;
    padding: 23px 21px 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, #4e2d2c, #382022);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.restaurant-intent-card::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -43px;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(228, 184, 103, 0.16);
    border-radius: 50%;
}

.restaurant-intent-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.restaurant-intent-number {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.restaurant-intent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 25px 0 18px;
    border: 1px solid rgba(226, 161, 90, 0.31);
    border-radius: 13px;
    background: rgba(226, 161, 90, 0.13);
    color: var(--color-accent-light);
}

.restaurant-intent-icon svg {
    width: 23px;
    height: 23px;
}

.restaurant-intent-icon-coral {
    color: #f0a596;
    border-color: rgba(216, 111, 90, 0.32);
    background: rgba(216, 111, 90, 0.13);
}

.restaurant-intent-icon-blue {
    color: #b1d2c1;
    border-color: rgba(164, 190, 165, 0.3);
    background: rgba(164, 190, 165, 0.13);
}

.restaurant-intent-icon-gold {
    color: #f2d58d;
    border-color: rgba(228, 184, 103, 0.32);
    background: rgba(228, 184, 103, 0.13);
}

.restaurant-intent-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.restaurant-intent-copy h3 {
    margin: 0 0 7px;
    color: var(--restaurant-cream);
    font-size: 1.03rem;
}

.restaurant-intent-copy p {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.46;
}

.restaurant-intent-copy > span:last-child {
    margin-top: auto;
    color: var(--color-accent-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.restaurant-menu-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-panel-2), var(--color-panel));
}

.restaurant-menu-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 3px;
    background: var(--color-accent);
}

.restaurant-menu-card:nth-child(2)::before {
    background: var(--restaurant-sage);
}

.restaurant-menu-card:nth-child(3)::before {
    background: var(--restaurant-coral);
}

.restaurant-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
}

.restaurant-menu-top small {
    color: var(--color-muted);
    font-size: 0.6rem;
    text-align: right;
}

.pf-restaurant .service-card .icon-badge {
    background: rgba(226, 161, 90, 0.13);
    color: var(--color-accent-light);
}

.pf-restaurant .restaurant-menu-card:nth-child(2) .icon-badge {
    background: rgba(164, 190, 165, 0.14);
    color: #b1d2c1;
}

.pf-restaurant .restaurant-menu-card:nth-child(3) .icon-badge {
    background: rgba(216, 111, 90, 0.13);
    color: #f0a596;
}

.pf-restaurant .service-card h3 {
    color: var(--restaurant-cream);
}

.pf-restaurant .service-list li {
    color: #f1e2d2;
}

.pf-restaurant .service-list li::before {
    color: var(--color-accent-light);
}

.restaurant-menu-note {
    margin: 20px auto 0;
    color: var(--color-muted);
    font-size: 0.74rem;
    text-align: center;
}

.restaurant-hospitality-section {
    background: linear-gradient(135deg, #412526, #2b1b1d);
}

.restaurant-hospitality-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 78px;
}

.restaurant-hospitality-grid h2 {
    max-width: 11ch;
    margin: 0 0 15px;
    color: var(--restaurant-cream);
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.04em;
}

.hospitality-lede {
    max-width: 43ch;
    margin: 0 0 28px;
    color: var(--color-muted);
}

.hospitality-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hospitality-list li {
    display: flex;
    gap: 13px;
}

.hospitality-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: rgba(226, 161, 90, 0.15);
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.63rem;
}

.hospitality-list strong,
.hospitality-list small {
    display: block;
}

.hospitality-list strong {
    margin-bottom: 2px;
    color: var(--restaurant-cream);
    font-size: 0.92rem;
}

.hospitality-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.restaurant-note-card {
    padding: 32px;
    border: 1px solid rgba(228, 184, 103, 0.3);
    border-radius: 21px;
    background: linear-gradient(155deg, rgba(95, 50, 45, 0.95), rgba(50, 28, 29, 0.96));
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.23);
}

.restaurant-note-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 26px;
    border-radius: 14px;
    background: rgba(226, 161, 90, 0.16);
    color: var(--color-accent-light);
    font-size: 1.35rem;
}

.restaurant-note-card > small {
    display: block;
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.restaurant-note-card h3 {
    margin: 13px 0 10px;
    color: var(--restaurant-cream);
    font-size: 1.45rem;
}

.restaurant-note-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.restaurant-note-card .btn {
    width: 100%;
    margin-top: 24px;
}

.restaurant-process-section {
    background: var(--color-bg-alt);
}

.restaurant-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.restaurant-process-step {
    display: flex;
    gap: 18px;
    min-height: 184px;
    padding: 31px 26px 29px 0;
    border-right: 1px solid var(--color-border);
}

.restaurant-process-step + .restaurant-process-step {
    padding-left: 26px;
}

.restaurant-process-step:last-child {
    padding-right: 0;
    border-right: none;
}

.restaurant-process-step > span {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.restaurant-process-step h3 {
    margin: 0 0 9px;
    color: var(--restaurant-cream);
    font-size: 1.05rem;
}

.restaurant-process-step p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.restaurant-events-section {
    background: #2c1c1e;
}

.restaurant-events-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 78px;
}

.restaurant-events-grid > div:last-child h2 {
    max-width: 10ch;
    margin: 0 0 15px;
    color: var(--restaurant-cream);
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.04em;
}

.events-lede {
    max-width: 43ch;
    margin: 0 0 27px;
    color: var(--color-muted);
}

.restaurant-event-card {
    padding: 32px;
    border: 1px solid rgba(216, 111, 90, 0.38);
    border-radius: 21px;
    background: linear-gradient(155deg, #5a2e2d, #3b2223);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.2);
}

.restaurant-event-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 28px;
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.restaurant-event-card h2 {
    margin: 0 0 10px;
    color: var(--restaurant-cream);
    font-size: 1.65rem;
}

.restaurant-event-card > p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.event-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 17px;
    color: #f1e2d2;
    font-size: 0.85rem;
}

.event-detail span {
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.restaurant-event-card .btn {
    width: 100%;
    margin-top: 22px;
}

.pf-restaurant .why-section {
    background: var(--color-bg);
}

.pf-restaurant .why-before {
    border-color: rgba(216, 111, 90, 0.4);
}

.pf-restaurant .why-after {
    border-color: rgba(226, 161, 90, 0.4);
}

.pf-restaurant .portfolio-badge-ai {
    color: var(--color-accent-light);
    border-color: rgba(226, 161, 90, 0.34);
    background: rgba(226, 161, 90, 0.1);
}

.pf-restaurant .portfolio-badge-soon {
    color: #f0a596;
    border-color: rgba(216, 111, 90, 0.34);
    background: rgba(216, 111, 90, 0.08);
}

.pf-restaurant .quote-chat-section {
    background: radial-gradient(circle at 50% 0%, rgba(226, 161, 90, 0.11), transparent 40%), var(--color-bg);
}

.pf-restaurant .quote-summary {
    border-color: rgba(226, 161, 90, 0.37);
}

.pf-restaurant .quote-summary h3 {
    color: var(--color-accent-light);
}

@media (max-width: 1000px) {
    .pf-restaurant .portfolio-example-hero .container {
        grid-template-columns: 1fr;
        gap: 42px;
        text-align: center;
    }

    .pf-restaurant .hero h1 {
        max-width: none;
    }

    .pf-restaurant .hero-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .pf-restaurant .hero-actions,
    .pf-restaurant .hero-stats,
    .pf-restaurant .hero-trust {
        justify-content: center;
    }

    .pf-restaurant .restaurant-hero-visual {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .restaurant-intent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .restaurant-hospitality-grid,
    .restaurant-events-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .restaurant-hospitality-grid h2,
    .restaurant-events-grid > div:last-child h2 {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .restaurant-process-grid {
        grid-template-columns: 1fr;
    }

    .restaurant-process-step,
    .restaurant-process-step + .restaurant-process-step {
        min-height: 0;
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .restaurant-process-step:last-child {
        padding-bottom: 24px;
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .pf-restaurant .restaurant-hero {
        padding: 76px 0 64px;
    }

    .pf-restaurant .hero h1 {
        font-size: clamp(2.4rem, 13vw, 3.6rem);
    }

    .pf-restaurant .restaurant-hero-visual {
        min-height: 420px;
    }

    .restaurant-visual-ring-one {
        width: 310px;
        height: 310px;
    }

    .restaurant-visual-ring-two {
        width: 410px;
        height: 410px;
    }

    .mosaic-menu-card {
        padding: 21px 17px;
        border-radius: 18px;
    }

    .mosaic-card-top {
        font-size: 0.52rem;
    }

    .mosaic-card-title {
        margin-top: 27px;
    }

    .mosaic-card-title h2 {
        font-size: 1.25rem;
    }

    .mosaic-card-dish {
        grid-template-columns: 37px 1fr 17px;
        gap: 9px;
    }

    .dish-orb {
        width: 37px;
        height: 37px;
    }

    .mosaic-card-dish strong {
        font-size: 0.73rem;
    }

    .mosaic-card-dish small {
        font-size: 0.62rem;
    }

    .mosaic-card-footer {
        font-size: 0.49rem;
    }

    .mosaic-card-footer strong {
        font-size: 0.53rem;
    }

    .restaurant-float-card {
        max-width: 180px;
        padding: 9px 10px 9px 9px;
    }

    .restaurant-float-card-top {
        top: 0;
        left: -4px;
    }

    .restaurant-float-card-bottom {
        right: -4px;
        bottom: 0;
    }

    .restaurant-float-card strong {
        font-size: 0.68rem;
    }

    .restaurant-float-card small {
        font-size: 0.59rem;
    }

    .restaurant-intent-grid {
        grid-template-columns: 1fr;
    }

    .restaurant-intent-card {
        min-height: 0;
    }

    .restaurant-menu-top small {
        font-size: 0.56rem;
    }

    .restaurant-note-card,
    .restaurant-event-card {
        padding: 25px 21px;
    }
}

/* ---------- Blog ---------- */

.blog-hero .container,
.blog-post-hero .container {
    max-width: 860px;
    text-align: center;
}

.blog-hero h1,
.blog-post-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.blog-hero > .container > p:not(.section-kicker),
.blog-post-excerpt {
    max-width: 68ch;
    margin: 0 auto;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.blog-hero-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.blog-hero-points span,
.blog-card-kicker,
.blog-post-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-index-head {
    margin-bottom: 30px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--color-panel-2), var(--color-panel));
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

.blog-card-image-wrap {
    overflow: hidden;
    aspect-ratio: 1;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.blog-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.blog-card:hover .blog-card-image {
    transform: scale(1.025);
}

.blog-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.blog-card-meta .blog-card-kicker {
    min-height: 0;
    padding: 4px 8px;
    font-size: 0.62rem;
}

.blog-card h2 {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 1.35rem;
    line-height: 1.18;
}

.blog-card p {
    margin: 0 0 22px;
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.blog-card-cta,
.blog-aside-link {
    color: var(--color-accent-light);
    font-weight: 700;
}

.blog-card-cta {
    margin-top: auto;
    font-size: 0.9rem;
}

.blog-card-cta span,
.blog-aside-link span {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.15s ease;
}

.blog-card:hover .blog-card-cta span,
.blog-aside-link:hover span {
    transform: translateX(3px);
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
    color: var(--color-accent-light);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.blog-back-link:hover {
    text-decoration: underline;
}

.blog-post-hero .section-kicker {
    margin-bottom: 16px;
}

.blog-post-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.blog-post-meta span:last-child {
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-muted);
}

.blog-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: start;
    gap: 64px;
}

.blog-post-main {
    min-width: 0;
    max-width: 760px;
}

.blog-post-cover {
    width: min(100%, 560px);
    margin: 0 auto 52px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.blog-post-cover img {
    display: block;
    width: 100%;
    height: auto;
}

.blog-post-section {
    margin-top: 42px;
}

.blog-post-section:first-of-type {
    margin-top: 0;
}

.blog-post-section h2 {
    margin: 0 0 14px;
    color: var(--color-text);
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: -0.025em;
}

.blog-post-section p,
.blog-post-section li,
.blog-article-cta p,
.blog-post-aside p {
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.blog-post-section p {
    margin: 0 0 16px;
}

.blog-post-section ul {
    display: grid;
    gap: 11px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.blog-post-section li {
    position: relative;
    padding-left: 25px;
    margin: 0;
}

.blog-post-section li::before {
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
    transform: translateY(-50%);
}

.blog-post-section blockquote {
    margin: 22px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(212, 175, 55, 0.08);
    color: var(--color-text);
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.6;
}

.blog-post-aside {
    position: sticky;
    top: 100px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(20, 34, 56, 0.82), rgba(12, 20, 34, 0.92));
}

.blog-post-aside .section-kicker {
    margin: 0 0 10px;
}

.blog-post-aside p {
    margin: 0 0 20px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.blog-aside-link {
    display: inline-block;
    font-size: 0.9rem;
}

.blog-article-cta {
    margin-top: 56px;
    padding: 30px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.12), rgba(16, 26, 46, 0.82));
}

.blog-article-cta .section-kicker {
    margin: 0 0 10px;
}

.blog-article-cta h2 {
    margin: 0 0 10px;
}

.blog-article-cta p {
    margin: 0 0 22px;
}

@media (max-width: 1000px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-post-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .blog-post-main {
        max-width: none;
    }

    .blog-post-aside {
        position: static;
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    .blog-hero h1,
    .blog-post-hero h1 {
        font-size: clamp(2.3rem, 12vw, 3.3rem);
    }

    .blog-hero-points {
        align-items: stretch;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        max-width: 260px;
    }

    .blog-hero-points span {
        justify-content: center;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card-image-wrap {
        aspect-ratio: 1.15;
    }

    .blog-post-cover {
        margin-bottom: 38px;
    }

    .blog-post-section {
        margin-top: 34px;
    }

    .blog-article-cta {
        padding: 24px;
    }
}