:root {
    --ink: #102131;
    --ink-soft: #20384b;
    --paper: #f6f3ed;
    --surface: #ffffff;
    --muted: #62717e;
    --line: #dce2e6;
    --accent: #c9473f;
    --accent-dark: #a93631;
    --shadow: 0 18px 55px rgba(16, 33, 49, 0.10);
    --radius: 1.25rem;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}

a {
    color: var(--accent-dark);
}

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

h1,
h2,
h3 {
    color: var(--ink);
    letter-spacing: -0.025em;
}

h1 {
    max-width: 920px;
    font-size: clamp(2.5rem, 6vw, 5.35rem);
    line-height: 0.98;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
}

.page-heading {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: .75rem 1rem;
    color: #fff;
    background: var(--ink);
    border-radius: .5rem;
}

.skip-link:focus {
    top: 1rem;
}

.site-nav {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(16, 33, 49, .08);
    backdrop-filter: blur(14px);
}

.brand-logo {
    width: min(270px, 58vw);
    height: auto;
    aspect-ratio: 391 / 218;
}

.nav-link {
    color: var(--ink);
    font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--accent-dark);
}

.nav-link.active {
    color: var(--accent);
    font-weight: 700;
}

.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .8rem 1.2rem;
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
}

.btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
}

.nav-product-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: .15rem .65rem;
    margin-top: .65rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .8125rem;
}

.nav-product-note a {
    color: var(--muted);
    text-underline-offset: .2em;
}

.nav-product-note a:hover,
.nav-product-note a:focus-visible {
    color: var(--accent-dark);
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 5rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(201, 71, 63, .22), transparent 28rem),
        linear-gradient(145deg, #ffffff 0%, #f7f4ef 52%, #edf1f2 100%);
}

.hero::after {
    content: "";
    position: absolute;
    right: -9rem;
    bottom: -11rem;
    z-index: -1;
    width: 33rem;
    height: 33rem;
    border: 1px solid rgba(16, 33, 49, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 4rem rgba(16, 33, 49, .035),
        0 0 0 8rem rgba(16, 33, 49, .025);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.3rem;
    color: var(--accent-dark);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 2.5rem;
    height: 2px;
    content: "";
    background: currentColor;
}

.hero-copy {
    max-width: 760px;
    color: var(--ink-soft);
    font-size: clamp(1.08rem, 2.2vw, 1.35rem);
}

.trust-strip {
    position: relative;
    z-index: 5;
    margin-top: -1.5rem;
}

.trust-panel {
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.trust-item {
    min-height: 100%;
    padding: 1.25rem 1.4rem;
}

.trust-item strong {
    display: block;
    color: #fff;
    font-size: 1rem;
}

.trust-item span {
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
}

.section {
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
}

.section-label {
    color: var(--accent-dark);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-intro {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.08rem;
}

.service-card,
.feature-card {
    height: 100%;
    padding: 1.7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(16, 33, 49, .045);
}

.service-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 71, 63, .4);
    box-shadow: var(--shadow);
}

.service-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1.25rem;
    color: #fff;
    background: var(--ink);
    border-radius: .8rem;
    font-weight: 600;
}

.service-card h3,
.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.service-card ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.service-card li {
    margin-bottom: .55rem;
    padding-left: .2rem;
}

.service-preview {
    display: block;
    height: 100%;
    text-decoration: none;
}

.service-preview .service-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-preview:hover .service-card,
.service-preview:focus-visible .service-card {
    border-color: rgba(201, 71, 63, .4);
    box-shadow: var(--shadow);
}

.service-preview .service-card h3 {
    margin-bottom: .5rem;
}

.service-preview .service-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
}

.service-group {
    scroll-margin-top: 14rem;
}

.service-group h2 {
    font-size: 1.25rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.service-group:target {
    border-color: var(--accent);
}

.service-card .service-detail-links {
    list-style: none;
    border-top: 1px solid var(--line);
    margin-top: 1.25rem;
    padding: .75rem 0 0;
}

.service-detail-links li {
    margin: 0;
    padding: 0;
}

.service-detail-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem 0;
    font-weight: 600;
    line-height: 1.4;
    text-underline-offset: .2em;
}

.service-detail-links a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.dark-section {
    background:
        radial-gradient(circle at 10% 15%, rgba(201, 71, 63, .18), transparent 25rem),
        var(--ink);
    color: #fff;
}

.dark-section h2,
.dark-section h3 {
    color: #fff;
}

.dark-section .section-label {
    color: #ef8f87;
}

.dark-section .section-intro,
.dark-section p {
    color: rgba(255, 255, 255, .74);
}

.process-step {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.process-step:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.process-index {
    color: #ef8f87;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
}

.project-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1rem;
    transition: transform .25s ease, filter .25s ease;
}

.gallery-button {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 9px 24px rgba(16, 33, 49, .09);
}

.gallery-button:hover .project-image,
.gallery-button:focus-visible .project-image {
    transform: scale(1.025);
    filter: contrast(1.03);
}

.gallery-button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

@media (min-width: 992px) {
    .gallery-col {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

.cta-panel {
    padding: clamp(2rem, 5vw, 4rem);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .96), rgba(247, 244, 239, .96)),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + .4rem);
    box-shadow: var(--shadow);
}

.service-area-coverage {
    padding-top: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}

.service-area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.service-area-group {
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    border-radius: .9rem;
}

.service-area-group dt {
    color: var(--ink);
    font-weight: 700;
}

.service-area-group dd {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}

.contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.25rem;
    padding: 0;
    margin: 1.25rem 0 0;
    list-style: none;
}

.contact-list a {
    font-weight: 600;
    text-decoration: none;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.link-grid li {
    height: 100%;
}

@media (min-width: 992px) {
    .link-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The 3rem gutter on g-5 rows is wider than the container's 12px side padding,
   which pushes a 12px horizontal scroll onto phones. The columns in these rows
   are stacked at this width, so the narrower gutter costs nothing. */
@media (max-width: 767.98px) {
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

.link-grid a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.link-grid a:hover,
.link-grid a:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(201, 71, 63, .4);
    box-shadow: var(--shadow);
}

footer {
    padding: 2.5rem 0;
    color: rgba(255, 255, 255, .68);
    background: #0b1722;
}

footer a {
    color: #fff;
    text-decoration: none;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem .875rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: #fff;
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.footer-social a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.footer-social svg {
    flex-shrink: 0;
}

.modal-content {
    background: #0c1823;
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.modal-header {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
}

.modal-header .btn-close {
    filter: invert(1);
}

/* Shared contact form, independent of the gallery's dark Bootstrap modal. */
body.contact-open {
    overflow: hidden;
}

.contact-dialog {
    width: min(540px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    overscroll-behavior: contain;
}

.contact-dialog::backdrop {
    background: rgba(16, 33, 49, .55);
}

.contact-dialog-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-dialog h2 {
    font-size: 1.65rem;
    line-height: 1.15;
    margin: .25rem 0 .75rem;
}

.contact-close {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -8px -8px 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.75rem;
    line-height: 1;
}

.contact-close:hover {
    background: var(--paper);
    color: var(--ink);
}

#contact-description,
.contact-dialog small,
.contact-privacy {
    color: var(--muted);
}

.contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-fields > div {
    min-width: 0;
}

.contact-dialog label {
    display: block;
    margin: .8rem 0 .3rem;
    font-size: .875rem;
    font-weight: 600;
}

.contact-dialog input:not([type="hidden"]),
.contact-dialog select,
.contact-dialog textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.contact-dialog :is(input, select, textarea, button):focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}

.contact-dialog textarea {
    display: block;
    resize: vertical;
    min-height: 110px;
}

.contact-dialog small {
    font-size: .75rem;
}

.contact-honeypot {
    display: none;
}

#contact-verification {
    margin-top: .75rem;
}

.contact-status {
    margin: .75rem 0;
    font-size: .875rem;
    color: var(--accent-dark);
}

.contact-submit {
    width: 100%;
    margin-top: .5rem;
}

.contact-privacy {
    margin: .75rem 0 0;
    font-size: .75rem;
    line-height: 1.5;
}

@media (max-width: 479.98px) {
    .contact-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 1rem 0 .4rem;
    }

    .hero {
        padding-top: 2rem;
    }

    .nav-product-note {
        justify-content: flex-start;
        margin-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .service-area-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ------------------------------------------------------------------ */
/* Light visual texture: section accents, card rules, and link icons.  */
/* Kept to strokes, gradients, and a faint grid so the pages still     */
/* read as documents rather than marketing pages.                      */
/* ------------------------------------------------------------------ */

:root {
    --i-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
    --i-dimension: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M6 8v8M18 8v8M12 10v4'/%3E%3C/svg%3E");
    --i-structure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18M3 17h18M8 7v10M16 7v10'/%3E%3C/svg%3E");
    --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 6 14h5l-1 7 8-11h-5l1-7z'/%3E%3C/svg%3E");
    --i-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4h8v16h-8'/%3E%3Cpath d='M4 12h9'/%3E%3Cpath d='M10 9l3 3-3 3'/%3E%3C/svg%3E");
    --i-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15c2-3 4-3 6 0s4 3 6 0 4-3 6 0'/%3E%3Cpath d='M3 9c2-3 4-3 6 0s4 3 6 0 4-3 6 0'/%3E%3C/svg%3E");
    --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20H4z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
    --i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16v11H4z'/%3E%3Cpath d='M4 9l1.5-5h13L20 9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
    --i-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v17H5z'/%3E%3Cpath d='M9 4V2.5h6V4'/%3E%3Cpath d='M9 11h6M9 15h4'/%3E%3C/svg%3E");
    --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
    --i-letter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v13H3z'/%3E%3Cpath d='M3 8l9 6 9-6'/%3E%3C/svg%3E");
    --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v16H4z'/%3E%3Cpath d='M8 3v4M16 3v4M4 11h16'/%3E%3C/svg%3E");
    --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E");
    --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c4.4-4.6 7-7.9 7-11a7 7 0 1 0-14 0c0 3.1 2.6 6.4 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l2.7 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.3 6.5 20.2l1.1-6.2L3 9.6l6.3-.9z'/%3E%3C/svg%3E");
}

/* Short rule before an eyebrow label, so sections start with a mark. */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.section-label::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    border-radius: 2px;
    opacity: .5;
}

/* A short accent rule above card headings, echoing the eyebrow label. */
.service-card h3::before,
.feature-card h3::before {
    content: "";
    display: block;
    width: 1.9rem;
    height: 3px;
    margin-bottom: .8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(201, 71, 63, .1) 100%);
}

/* Numbered cards (the service previews) float the number so the heading sits
   beside it, and anything after the heading clears the number and starts back
   at the card's left edge. No accent rule on these: the number is the marker. */
.service-card .service-number {
    float: left;
    margin: 0 1rem .65rem 0;
}

.service-card:has(.service-number) h3::before {
    display: none;
}

.service-card:has(.service-number) h3 {
    overflow-wrap: anywhere;
}

.service-card:has(.service-number) :is(p, ul) {
    clear: left;
}

/* Faint drawing grid in the dark bands, on top of the existing glow. */
.dark-section {
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 2.75rem repeat,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 2.75rem 100% repeat,
        radial-gradient(circle at 12% 12%, rgba(201, 71, 63, .2), transparent 26rem) center / auto no-repeat,
        var(--ink);
}

/* Cards that sit inside a dark band keep the light surface otherwise, which
   makes their headings white on white. Give them a translucent surface. */
.dark-section .service-card,
.dark-section .feature-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.dark-section .service-card ul,
.dark-section .service-card li,
.dark-section .service-card p,
.dark-section .feature-card ul,
.dark-section .feature-card li,
.dark-section .feature-card p {
    color: rgba(255, 255, 255, .78);
}

/* Accent edge on the closing call-to-action panel. */
.cta-panel {
    position: relative;
    overflow: hidden;
}

.cta-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: min(12rem, 45%);
    height: 4px;
    background: var(--accent);
    border-radius: 0 999px 999px 0;
}

/* Link cards carry an icon keyed to where they point. */
.link-grid a {
    gap: .75rem;
}

.link-grid a::before {
    content: "";
    flex: 0 0 auto;
    align-self: flex-start;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
    background-color: currentColor;
    opacity: .5;
    transition: opacity .2s ease, transform .2s ease;
    -webkit-mask: var(--link-icon, var(--i-sheet)) center / contain no-repeat;
    mask: var(--link-icon, var(--i-sheet)) center / contain no-repeat;
}

.link-grid a:hover::before,
.link-grid a:focus-visible::before {
    opacity: .9;
}

.link-grid a[href^="/locations/"] {
    --link-icon: var(--i-pin);
}

.link-grid a[href^="/contact/"] {
    --link-icon: var(--i-letter);
}

.link-grid a[href="/services/architectural-design-permit-plans/"] {
    --link-icon: var(--i-sheet);
}

.link-grid a[href="/services/civil-engineering-site-development/"] {
    --link-icon: var(--i-dimension);
}

.link-grid a[href="/services/structural-engineering/"] {
    --link-icon: var(--i-structure);
}

.link-grid a[href="/services/mep-plans/"] {
    --link-icon: var(--i-bolt);
}

.link-grid a[href="/services/life-safety-egress-plans/"] {
    --link-icon: var(--i-exit);
}

.link-grid a[href="/services/grading-drainage-stormwater-plans/"] {
    --link-icon: var(--i-water);
}

.link-grid a[href="/services/residential-additions-renovations/"] {
    --link-icon: var(--i-home);
}

.link-grid a[href="/services/commercial-build-out-tenant-improvement/"] {
    --link-icon: var(--i-store);
}

.link-grid a[href="/services/permit-corrections/"] {
    --link-icon: var(--i-clipboard);
}

.link-grid a[href="/services/after-the-fact-permits-code-violations/"] {
    --link-icon: var(--i-shield);
}

.link-grid a[href="/services/engineering-letters-professional-opinions/"] {
    --link-icon: var(--i-letter);
}

.link-grid a[href="/services/missed-failed-inspection-support/"] {
    --link-icon: var(--i-calendar);
}

.link-grid a[href="/services/existing-condition-assessments-repair-plans/"] {
    --link-icon: var(--i-search);
}

/* ------------------------------------------------------------------ */
/* Client reviews                                                      */
/* ------------------------------------------------------------------ */

.review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(16, 33, 49, .045);
}

.review-stars {
    display: flex;
    gap: .22rem;
    margin-bottom: 1rem;
    color: var(--accent);
}

.review-stars i {
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
    -webkit-mask: var(--i-star) center / contain no-repeat;
    mask: var(--i-star) center / contain no-repeat;
}

.review-quote {
    margin: 0 0 1.15rem;
    color: var(--ink);
    font-size: 1.02rem;
}

.review-person {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
}

.review-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
    background: var(--ink);
    border-radius: 50%;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.review-name {
    margin: 0;
    font-weight: 600;
}

.review-source {
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .88rem;
}

/* Remove this note along with the placeholders it refers to. */
.review-draft-note {
    padding: .85rem 1.1rem;
    color: var(--accent-dark);
    background: rgba(201, 71, 63, .07);
    border: 1px dashed rgba(201, 71, 63, .45);
    border-radius: var(--radius);
    font-size: .92rem;
}