/* ============================================================
   BostonFix — "Harbor Chart"
   Boston is read from the water: harbor charts, depth contours,
   and the copper roofs that weather to green above the brick.
   The hairlines here are bathymetric curves, not grids.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Harbor water at depth */
    --color-navy:        #0C2A38;
    --color-navy-dark:   #071C27;
    --color-navy-light:  #14415A;
    /* Weathered copper — the call-to-action colour */
    --color-gold:        #3FA890;
    --color-gold-dark:   #2E8271;
    --color-gold-light:  #6FC9B4;
    --color-off-white:   #EEF2F3;
    --color-gray-50:     #EEF2F3;
    --color-gray-100:    #E2E9EB;
    --color-gray-200:    #CFDADD;

    --brass: #C9A227;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
    --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px;

    --contour: rgba(111,201,180,.22);
}

/* ---- Display type: a serif with weight, set tight ---- */
.hero-h1, .page-hero-title, .section-title,
.logo-text strong, .footer-logo-text strong {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 120, 'SOFT' 0;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.08;
}
.hero-h1, .page-hero-title { font-weight: 700; letter-spacing: -.026em; }
.footer-heading { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }

/* Chart-legend voice for small text */
.section-subtitle, .trust-badge-text, .hero-form-sub,
.footer-license, .breadcrumb-list, .step-number {
    font-family: var(--font-mono);
    font-size: .77rem;
    letter-spacing: .02em;
}

/* ---- Signature: bathymetric contours behind the hero ---- */
.hero, .page-hero {
    position: relative;
    background-color: var(--color-navy-dark);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='260'%3E%3Cg fill='none' stroke='%236FC9B4' stroke-opacity='.20' stroke-width='1'%3E%3Cpath d='M-20 200 C 60 150, 130 235, 220 180 S 330 120, 380 165'/%3E%3Cpath d='M-20 170 C 70 118, 140 205, 225 148 S 330 88, 380 133'/%3E%3Cpath d='M-20 140 C 80 86, 150 175, 230 116 S 332 56, 380 101'/%3E%3Cpath d='M-20 110 C 90 54, 160 145, 236 84 S 334 24, 380 69'/%3E%3Cpath d='M-20 80 C 100 22, 170 115, 242 52 S 336 -8, 380 37'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 340px 260px;
    background-position: center top;
}
/* Waterline: brass rule fading into the depth */
.hero::after, .page-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass) 78%, transparent);
    opacity: .55;
}

/* ---- Soft cards, hairline edges, no heavy shadow ---- */
.service-card, .step-card, .brand-chip, .review-card,
.location-card, .hero-form-card, .faq-item {
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 2px rgba(7,28,39,.04);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.service-card:hover, .step-card:hover, .location-card:hover, .brand-chip:hover {
    border-color: var(--color-gold);
    box-shadow: 0 6px 22px rgba(12,42,56,.10);
}

/* Section mark: a short contour arc, not a bar */
.section-header { position: relative; padding-top: 1.4rem; }
.section-header::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 66px; height: 12px;
    border-bottom: 1px solid var(--brass);
    border-radius: 0 0 60% 60%;
}

/* ---- Buttons: rounded, copper ---- */
.btn { border-radius: 999px; letter-spacing: .005em; font-weight: 600; }
.btn-gold { background: var(--color-gold); color: #06222E; border: 1px solid var(--color-gold-dark); }
.btn-gold:hover { background: var(--color-gold-light); }
.btn-outline-white { border: 1px solid rgba(255,255,255,.5); }

/* Brass hairline separates the chrome from the content */
.site-header { border-bottom: 1px solid var(--color-gray-200); }
.site-footer { background: var(--color-navy-dark); border-top: 1px solid var(--brass); }
.trust-bar { background: var(--color-gray-50); border-block: 1px solid var(--color-gray-200); }

@media (prefers-reduced-motion: reduce) {
    .service-card, .step-card, .location-card, .brand-chip { transition: none; }
}

/* Footer mark is inline SVG with the original brand hexes baked in —
   retint it from the theme so the whole chrome stays on one palette. */
.logo-icon--footer [fill="#f59e0b"]   { fill: var(--color-gold); }
.logo-icon--footer [fill="#1a2744"]   { fill: var(--color-navy-dark); }
.logo-icon--footer [stroke="#1a2744"] { stroke: var(--color-navy-dark); }
.logo-icon--footer [rx="8"] { rx: 12; }
.hero, .page-hero { background-blend-mode: normal; }