/* =============================================================
   IronNest Theme — Main Stylesheet
   Corporate construction, clean and professional.
   ============================================================= */

/* === 1. CUSTOM PROPERTIES ======================================= */
:root {
    /* ── IronNest palette — BLUE · WHITE · GREY, straight from the logo.
       Logo = azure "Iron" + charcoal-grey "Nest" on white. Clean, light,
       premium. No orange. ── */

    /* Brand blue (logo) — primary accent everywhere */
    --clr-blue:     #006cb5;   /* primary CTAs, icons, links */
    --clr-blue-dk:  #00578f;   /* hover / pressed */
    --clr-blue-br:  #1f8fd8;   /* bright highlight */
    --clr-blue-lt:  #e8f2fb;   /* tint backgrounds */

    /* Legacy "orange" accent vars remapped to blue so nothing is orange */
    --clr-orange:   var(--clr-blue);
    --clr-orange-dk:var(--clr-blue-dk);
    --clr-orange-lt:var(--clr-blue-lt);
    --clr-link:     #006cb5;

    /* Charcoal-grey (logo "Nest") — headings & dark bands, softer than black */
    --clr-navy:     #242a31;   /* dark sections + headings */
    --clr-navy-lt:  #2f3640;
    --clr-black:    #1b2026;
    --clr-grey:     #4a535d;   /* body text */

    /* Neutrals — clean whites & cool greys */
    --clr-white:    #FFFFFF;
    --clr-off-wh:   #F5F8FB;   /* alternating section band */
    --clr-gray-0:   #FAFBFD;
    --clr-gray-1:   #EFF3F8;
    --clr-gray-2:   #E2E8F0;   /* borders */
    --clr-gray-3:   #C7D2DE;
    --clr-gray-4:   #9aa6b4;
    /* #7A8BA0 failed WCAG AA on white (3.48:1) and on --clr-off-wh (3.27:1),
       and it colours every piece of secondary text on the site. */
    --clr-gray-5:   #5f7085;
    --clr-gray-6:   #5a6a7a;
    --clr-gray-7:   #41505d;   /* body text */
    --clr-gray-8:   #2c343d;
    --clr-gray-9:   #1c2228;
    --clr-text:     #1b232b;   /* primary text / headings */
    --clr-green:    #18a558;

    --font:         'Inter', system-ui, -apple-system, sans-serif;
    --font-serif:   'Fraunces', 'DM Serif Display', Georgia, serif;
    --fw-4: 400;
    --fw-5: 500;
    --fw-6: 600;
    --fw-7: 700;
    --fw-8: 800;
    --fw-9: 900;

    --section-pad:  104px;
    --container-w:  1200px;
    --container-p:  24px;
    --gap:          28px;
    --radius:       12px;
    --radius-lg:    18px;

    /* Soft, premium shadows with a faint blue cast */
    --shadow:    0 2px 14px rgba(0,108,181,.07);
    --shadow-md: 0 8px 30px rgba(13,38,59,.10);
    --shadow-lg: 0 20px 60px rgba(13,38,59,.14);
    --glow-blue: 0 10px 34px rgba(0,108,181,.22);

    --tr: .26s cubic-bezier(.22,.61,.36,1);
}

/* === 2. RESET =================================================== */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--clr-text);
    background: var(--clr-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: var(--font); }

/* Content-area link color */
.entry-content a,
.in-city-content a { color: var(--clr-link); }
.in-service-card__link { color: var(--clr-link) !important; }
.in-nav__list a:hover { color: var(--clr-navy) !important; }

/* === 3. TYPOGRAPHY ============================================= */
.in-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--fw-7);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clr-blue);
    margin-bottom: 10px;
}

.in-h1 {
    font-size: clamp(38px, 5.5vw, 62px);
    font-weight: var(--fw-9);
    line-height: 1.07;
    letter-spacing: -.03em;
}

.in-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: var(--fw-8);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--clr-navy);
    font-family: var(--font-serif);
}

.in-h3 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: var(--fw-7);
    color: var(--clr-navy);
}

.in-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--clr-gray-7);
}

/* === 4. LAYOUT ================================================= */
.in-container {
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--container-p);
}

.in-section { padding-block: var(--section-pad); }
.in-section--gray { background: var(--clr-off-wh); }
.in-section--dark { background: var(--clr-navy); }

/* Scroll reveal */
.in-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
}
.in-reveal.is-visible { opacity: 1; transform: none; }
.in-reveal-delay-1 { transition-delay: .1s; }
.in-reveal-delay-2 { transition-delay: .2s; }
.in-reveal-delay-3 { transition-delay: .3s; }
.in-reveal-delay-4 { transition-delay: .4s; }

/* === 5. BUTTONS ================================================ */
.in-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    font-weight: var(--fw-6);
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr);
    white-space: nowrap;
}

.in-btn--primary {
    background: var(--clr-blue);
    color: #fff;
    border-color: var(--clr-blue);
}
.in-btn--primary:hover {
    background: var(--clr-blue-dk);
    border-color: var(--clr-blue-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,108,181,.3);
}

.in-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.45);
}
.in-btn--outline:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.8);
}

.in-btn--outline-dark {
    background: transparent;
    color: var(--clr-navy);
    border-color: var(--clr-gray-2);
}
.in-btn--outline-dark:hover {
    border-color: var(--clr-blue);
    color: var(--clr-blue);
}

.in-btn--lg { padding: 16px 32px; font-size: 15px; }

/* === 6. TOPBAR ================================================= */
.in-topbar {
    background: var(--clr-navy);
    padding: 9px 0;
    font-size: 12px;
}

.in-topbar .in-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.in-topbar__items { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.in-topbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.65);
    transition: color var(--tr);
}
.in-topbar__item:hover { color: #fff; }
.in-topbar__item svg { flex-shrink: 0; }

.in-topbar__license {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--clr-green);
    font-weight: var(--fw-6);
    font-size: 12px;
}

/* === 7. HEADER & NAV =========================================== */
.in-header {
    background: #fff;
    border-bottom: 1px solid var(--clr-gray-2);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow);
    transition: box-shadow var(--tr);
}
.in-header.is-scrolled { box-shadow: var(--shadow-md); }

.in-header .in-container {
    max-width: 1400px;
    display: flex;
    align-items: center;
    height: 88px;
    gap: 32px;
}

/* Logo */
.in-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.in-logo__img {
    height: 76px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}

/* Primary nav */
.in-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.in-nav__list { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.in-nav__list a {
    /* Multi-word items ("Bay Area") must stay on one line or the bar's
       baseline breaks. */
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: var(--fw-5);
    color: var(--clr-gray-7);
    transition: color var(--tr);
    position: relative;
    padding-bottom: 2px;
}
.in-nav__list a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0;
    height: 2px;
    background: var(--clr-orange);
    transition: width var(--tr);
}
.in-nav__list a:hover { color: var(--clr-navy); }
.in-nav__list a:hover::after { width: 100%; }

/* =============================================================
   CALL PICKER — two local numbers, one tap where we already know
   the market, a two-option chooser only where we don't.

   Built on <details>/<summary> so it opens, closes and takes the
   keyboard with no JavaScript at all. JS only closes it on an
   outside click and marks the likelier option.
   ============================================================= */
.in-callpick { position: relative; }
.in-callpick > summary { list-style: none; cursor: pointer; }
.in-callpick > summary::-webkit-details-marker { display: none; }
.in-callpick > summary::marker { content: ''; }

.in-callpick__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: var(--fw-6);
    color: var(--clr-navy);
    white-space: nowrap;
    transition: color var(--tr);
}
.in-callpick__trigger:hover { color: var(--clr-blue); }
.in-callpick__trigger:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 3px; border-radius: 4px; }
.in-callpick__chevron { transition: transform var(--tr); flex-shrink: 0; opacity: .7; }
.in-callpick[open] .in-callpick__chevron { transform: rotate(180deg); }

/* The panel. Anchored to the trigger on desktop; the mobile-menu
   variant below re-flows it inline instead. */
.in-callpick__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 400;
    min-width: 318px;
    padding: 14px;
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.in-callpick__head {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: var(--fw-7);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clr-gray-5);
}
.in-callpick__foot {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--clr-gray-1);
    font-size: 12px;
    color: var(--clr-gray-5);
    text-align: center;
}

.in-callpick__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--clr-gray-2);
    background: var(--clr-white);
    transition: border-color var(--tr), background var(--tr), transform var(--tr);
}
.in-callpick__opt + .in-callpick__opt { margin-top: 8px; }
.in-callpick__opt:hover {
    border-color: var(--clr-blue);
    background: var(--clr-blue-lt);
    transform: translateY(-1px);
}
.in-callpick__opt:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 2px; }
.in-callpick__opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.in-callpick__opt-area {
    font-size: 11.5px;
    font-weight: var(--fw-7);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--clr-gray-5);
}
.in-callpick__opt-num {
    font-size: 16px;
    font-weight: var(--fw-8);
    color: var(--clr-navy);
    letter-spacing: -.01em;
    /* The number is the whole point of the row — it never wraps. */
    white-space: nowrap;
}

/* "Closest to you" is a hint from geo-hint.js and must never be the
   only way to find a number — so it is hidden until that script has
   an opinion, and both options stay fully usable either way. */
.in-callpick__opt-near {
    display: none;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--clr-blue-lt);
    color: var(--clr-blue);
    font-size: 10.5px;
    font-weight: var(--fw-7);
    letter-spacing: .03em;
    white-space: nowrap;
}
.in-callpick__opt[data-region-near="1"] { border-color: var(--clr-blue); }
.in-callpick__opt[data-region-near="1"] .in-callpick__opt-near { display: inline-block; }

/* ── Variant: dark topbar ── */
.in-callpick__trigger--topbar {
    font-size: 13px;
    font-weight: var(--fw-5);
    color: rgba(255,255,255,.82);
    gap: 6px;
}
.in-callpick__trigger--topbar:hover { color: #fff; }

/* ── Variant: mobile menu — opens inline, full width, no overlay ── */
.in-callpick--mobile-menu { display: block; }
.in-callpick__trigger--mobile-menu {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: var(--fw-7);
    background: linear-gradient(180deg, var(--clr-blue-br), var(--clr-blue));
    box-shadow: 0 6px 16px rgba(0,108,181,.28);
}
.in-callpick__trigger--mobile-menu:hover { color: #fff; }
.in-callpick--mobile-menu .in-callpick__panel {
    position: static;
    margin-top: 10px;
    min-width: 0;
    box-shadow: none;
}
/* A plain call link in the mobile menu still fills the button slot. */
.in-callpick__cta { width: 100%; justify-content: center; gap: 8px; }

/* ── Variant: sticky mobile bar — panel opens upward ── */
.in-callpick--mobile-bar { flex: 1; display: flex; }
.in-callpick__trigger--mobile-bar {
    flex: 1;
    justify-content: center;
    gap: 7px;
    padding: 13px 10px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: var(--fw-7);
    color: var(--clr-blue);
    border: 1.5px solid var(--clr-blue);
    background: var(--clr-blue-lt);
}
.in-callpick--mobile-bar .in-callpick__panel {
    top: auto;
    bottom: calc(100% + 12px);
    right: 0;
    left: 0;
}

/* Two labelled numbers in the footer column. */
.in-footer__phone-area {
    margin-left: 8px;
    font-size: 11px;
    font-weight: var(--fw-7);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

@media (max-width: 420px) {
    .in-callpick__panel { min-width: 0; padding: 12px; }
    /* Too narrow for number and badge side by side: the badge steps down. */
    .in-callpick__opt { flex-wrap: wrap; }
    .in-callpick__opt-near { margin-left: auto; }
    .in-callpick__opt { padding: 10px; }
    .in-callpick__opt-num { font-size: 15px; }
}

/* Region hub work gallery. */
.in-region-work { padding: var(--section-pad) 0; background: var(--clr-gray-1); }
.in-region-work__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.in-region-work__item {
    margin: 0; background: #fff; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
}
.in-region-work__img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.in-region-work__cap {
    padding: 13px 15px; font-size: 13.5px; font-weight: var(--fw-6);
    color: var(--clr-gray-7);
}
@media (max-width: 900px) { .in-region-work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .in-region-work__grid { grid-template-columns: 1fr; } }

/* Developer credit in the footer bottom bar. */
.in-footer__credit { font-size: 12.5px; color: rgba(255,255,255,.45); }
.in-footer__credit a { color: rgba(255,255,255,.72); text-decoration: none; }
.in-footer__credit a:hover { color: #fff; text-decoration: underline; }

/* Cloudflare Turnstile inside a form card. The default widget is a fixed
   300px, which overflows a narrow form on a phone and pushes the submit button
   off screen — hence data-size="flexible" plus this. */
.in-turnstile { margin: 4px 0 14px; max-width: 100%; overflow: hidden; }
.in-turnstile iframe { max-width: 100% !important; }

/* Header actions */
.in-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.in-header__phone {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: var(--fw-6); color: var(--clr-navy);
    transition: color var(--tr);
}
.in-header__phone:hover { color: var(--clr-blue); }
/* Narrow desktops: drop the phone text, keep the CTA. */
@media (max-width: 1339px) { .in-header__phone { display: none; } }


/* Hamburger */
.in-nav__toggle {
    display: none;
    /* The bars are small on purpose; the BUTTON must not be. A 390px audit
       measured this at 30x24, under the 44px minimum, and it is the only route
       into the navigation on a phone. Centring the bars in a 44x44 box keeps
       the look and doubles the target. */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    margin-right: -10px; /* keep the bars optically on the same edge as before */
}
.in-nav__toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--clr-navy);
    border-radius: 2px;
    transition: var(--tr);
}
.in-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.in-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.in-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.in-mobile-menu {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--clr-gray-2);
    position: sticky;
    top: 88px;
    z-index: 199;
    box-shadow: var(--shadow-md);
}
.in-mobile-menu.is-open { display: block; }
.in-mobile-menu__list li a {
    display: block;
    padding: 13px var(--container-p);
    font-weight: var(--fw-5);
    color: var(--clr-text);
    border-bottom: 1px solid var(--clr-gray-1);
    transition: color var(--tr), background var(--tr);
}
.in-mobile-menu__list li a:hover { background: var(--clr-gray-1); color: var(--clr-blue); }
.in-mobile-menu__cta { padding: 16px var(--container-p); }

/* === 8. HERO =================================================== */
.in-hero {
    background-color: var(--clr-navy);
    /* Older engines take this line; anything supporting image-set overrides it
       below and never fetches the PNG. */
    background-image:
        linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
        url('/wp-content/uploads/2026/04/header.png');
    background-image:
        linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
        image-set(
            url('/wp-content/uploads/2026/04/header.webp') type('image/webp'),
            url('/wp-content/uploads/2026/04/header.png')  type('image/png')
        );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 104px 0 88px;
    overflow: hidden;
    position: relative;
}

.in-hero::after {
    content: '';
    position: absolute;
    right: -120px; top: -80px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,108,181,.08) 0%, transparent 68%);
    pointer-events: none;
}

.in-hero .in-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 64px;
    align-items: center;
}

.in-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 100px;
    font-size: 11px; font-weight: var(--fw-6);
    color: rgba(255,255,255,.75);
    letter-spacing: .05em;
    margin-bottom: 24px;
}
.in-hero__badge-dot { width: 6px; height: 6px; background: var(--clr-green); border-radius: 50%; }

.in-hero__heading {
    font-size: clamp(36px, 5.5vw, 62px);
    font-weight: var(--fw-9);
    font-family: var(--font-serif);
    line-height: 1.06;
    letter-spacing: -.01em;
    color: #fff;
    margin-bottom: 20px;
}
.in-hero__heading em { font-style: normal; color: #fff; }

.in-hero__sub {
    font-size: 18px; line-height: 1.7;
    color: rgba(255,255,255,.65);
    margin-bottom: 36px;
    max-width: 500px;
}

.in-hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.in-hero__proof {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.in-hero__proof-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: var(--fw-5);
    color: rgba(255,255,255,.55);
}
.in-hero__proof-item svg { color: var(--clr-green); flex-shrink: 0; }
.in-hero__proof-sep { color: rgba(255,255,255,.15); }

/* Hero panel */
.in-hero__panel {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(8px);
}
.in-hero__panel-label {
    font-size: 10px; font-weight: var(--fw-7);
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 18px;
}
.in-hero__stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.in-hero__stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    padding: 14px;
}
.in-hero__stat-num {
    font-size: 28px; font-weight: var(--fw-9);
    color: #fff; line-height: 1;
    margin-bottom: 3px;
}
.in-hero__stat-num span { color: #fff; }
.in-hero__stat-label { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.4; }
.in-hero__panel-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 13px;
    background: var(--clr-blue);
    color: #fff; border-radius: var(--radius);
    font-size: 14px; font-weight: var(--fw-6);
    transition: background var(--tr);
}
.in-hero__panel-cta:hover { background: var(--clr-blue-dk); }

/* === 9. TRUST BAR ============================================== */
.in-trust-bar { background: var(--clr-blue); padding: 14px 0; }
.in-trust-bar .in-container {
    display: flex; align-items: center;
    justify-content: center;
    gap: 28px; flex-wrap: wrap;
}
.in-trust-bar__item {
    display: flex; align-items: center; gap: 8px;
    color: #fff;
    font-size: 13px; font-weight: var(--fw-6);
    white-space: nowrap;
}
.in-trust-bar__sep { color: rgba(255,255,255,.3); font-size: 16px; }

/* === 10. ABOUT ================================================= */
.in-about { padding: var(--section-pad) 0; background: var(--clr-off-wh); }
.in-about .in-container {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 72px;
    align-items: center;
}

.in-about__body { font-size: 16px; line-height: 1.78; color: var(--clr-gray-7); margin: 14px 0 24px; }

.in-about__features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.in-about__feature { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--fw-5); color: var(--clr-text); }
.in-about__feature-check {
    width: 20px; height: 20px;
    background: var(--clr-blue-lt);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--clr-blue);
    font-size: 11px; font-weight: var(--fw-8);
}

/* Stats panel */
.in-stats-panel { background: var(--clr-navy); border-radius: var(--radius-lg); padding: 36px 32px; }

/* Process panel — How We Work */
.in-process-panel {
    background: var(--clr-navy);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.in-process-panel__header { margin-bottom: 24px; }
.in-process-panel__title {
    font-size: 22px; font-weight: var(--fw-8);
    color: #fff; margin: 6px 0 0;
}
.in-process-steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 20px;
    flex: 1;
}
.in-process-steps .in-process-step {
    display: flex; flex-direction: row; align-items: flex-start; gap: 16px;
}
.in-process-steps .in-process-step__num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--clr-blue);
    color: #fff;
    font-size: 13px; font-weight: var(--fw-8);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.in-process-step__body {
    display: flex; flex-direction: column; gap: 3px;
    padding-top: 5px;
}
.in-process-step__body strong {
    font-size: 14px; font-weight: var(--fw-7);
    color: #fff; display: block;
}
.in-process-step__body span {
    font-size: 13px; line-height: 1.5;
    color: rgba(255,255,255,.55);
}

/* Process panel — scroll-reveal initial states (JS adds .is-revealed) */
[data-process-step],
[data-process-cta] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}
[data-process-step] .in-process-step__num {
    transform: scale(0.85);
    transition: transform 500ms ease-out;
}
[data-process-step].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-process-step].is-revealed .in-process-step__num {
    transform: scale(1);
}
[data-process-cta].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Step hover — subtle lift */
@media (hover: hover) {
    [data-process-step] {
        border-radius: 8px;
        padding: 6px 8px;
        margin: -6px -8px;
        cursor: default;
        transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease, box-shadow 200ms ease;
    }
    [data-process-step]:first-child { cursor: pointer; }
    [data-process-step].is-revealed:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,.04);
        box-shadow: 0 4px 16px rgba(0,0,0,.18);
    }
}

/* CTA wrapper */
.in-process-cta-wrap {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.in-process-cta-btn {
    width: 100%;
    justify-content: center;
    gap: 8px;
    display: flex;
    align-items: center;
}
.in-process-cta-btn svg {
    transition: transform 250ms ease;
    flex-shrink: 0;
}
.in-process-cta-btn:hover svg {
    transform: translateX(3px);
}

/* Micro-trust line */
.in-process-microtrust {
    font-size: 12px;
    color: rgba(255,255,255,.38);
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

/* One-time CTA pulse (class added by JS after reveal) */
@keyframes in-process-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--clr-orange-rgb, 234,88,12), .5); }
    60%  { box-shadow: 0 0 0 10px rgba(var(--clr-orange-rgb, 234,88,12), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--clr-orange-rgb, 234,88,12), 0); }
}
.in-process-cta-btn.do-pulse {
    animation: in-process-cta-pulse 700ms ease-out forwards;
}
.in-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.in-stat-box { text-align: center; }
.in-stat-box__num {
    font-size: 44px; font-weight: var(--fw-9);
    color: #fff; line-height: 1;
    margin-bottom: 6px;
}
.in-stat-box__num sup { font-size: 20px; vertical-align: super; }
.in-stat-box__label { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.4; }
.in-stats-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 24px 0; }
.in-stats-license-label {
    font-size: 10px; font-weight: var(--fw-7);
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-bottom: 6px;
}
.in-stats-license-num { font-size: 20px; font-weight: var(--fw-8); color: #fff; margin-bottom: 2px; }
.in-stats-license-sub { font-size: 12px; color: rgba(255,255,255,.45); }

/* === 11. SERVICES ============================================== */
.in-services { padding: var(--section-pad) 0; background: #fff; }
.in-services__head { text-align: center; max-width: 620px; margin: 0 auto 52px; }
.in-services__head .in-lead { margin-top: 14px; }
.in-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.in-service-card {
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
    position: relative;
    overflow: hidden;
    background: #fff;
}
.in-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--clr-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--tr);
}
.in-service-card:hover {
    border-color: var(--clr-blue);
    box-shadow: 0 8px 32px rgba(0,108,181,.12);
    transform: translateY(-4px);
}
.in-service-card:hover::before { transform: scaleX(1); }

.in-service-card__icon {
    width: 50px; height: 50px;
    background: var(--clr-blue-lt);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    transition: background var(--tr);
}
.in-service-card:hover .in-service-card__icon { background: var(--clr-blue); }
.in-service-card:hover .in-service-card__icon svg { stroke: #fff; }

.in-service-card__title { font-size: 16px; font-weight: var(--fw-7); color: var(--clr-navy); margin-bottom: 10px; }
.in-service-card__desc { font-size: 14px; line-height: 1.65; color: var(--clr-gray-5); margin-bottom: 20px; }
.in-service-card__link {
    font-size: 13px; font-weight: var(--fw-6);
    color: var(--clr-blue);
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap var(--tr);
}
.in-service-card:hover .in-service-card__link { gap: 9px; }

/* Service card photo thumbnail — bleeds to card edges above the padded body */
.in-service-card__thumb {
    margin: -32px -28px 0;
    height: 160px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--clr-navy);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.in-service-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.4) 100%);
    pointer-events: none;
}
.in-service-card:hover .in-service-card__thumb { transform: scale(1.03); }
.in-service-card__body { padding-top: 24px; }

/* === 12. PORTFOLIO ============================================= */
/* === 12. PORTFOLIO / PROJECTS ================================== */
.in-portfolio { padding: var(--section-pad) 0; background: #000; }

.in-portfolio__head {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 20px; flex-wrap: wrap;
}
.in-portfolio__head .in-tag { color: rgba(255,255,255,.72); } /* was .45 — fails 4.5:1 on #000 bg */
.in-portfolio__head .in-h2 { color: #fff; margin-top: 8px; }

/* Responsive 3-col grid; first card spans 2 cols */
.in-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.in-project-card--featured { grid-column: span 2; }

.in-project-card {
    background: var(--proj-color, #0a1628);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
}
.in-project-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    border-color: rgba(0,108,181,.4);
}

/* Visual header area — real photo thumbnail */
.in-project-card__visual {
    position: relative;
    height: 160px;
    /* background-image is set inline via PHP (service photo).
       background-color is the card's --proj-color, shown while image loads
       or if the image fails to load */
    background-color: var(--proj-color, #0a1628);
    background-size: cover;
    background-position: center 30%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    overflow: hidden;
}
/* Dark gradient overlay so badge text stays readable over any photo */
.in-project-card__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.38) 0%,
        rgba(0,0,0,.10) 55%,
        rgba(0,0,0,.45) 100%
    );
    pointer-events: none;
}
/* Badges sit above the gradient overlay */
.in-project-card__visual > * { position: relative; z-index: 1; }
.in-project-card--featured .in-project-card__visual { height: 200px; }

.in-project-card__cat-badge {
    display: inline-flex; align-items: center;
    background: rgba(0,108,181,.35);
    border: 1px solid rgba(0,108,181,.5);
    color: #93c5fd;
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.in-project-card__year {
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.35);
    align-self: flex-start;
}
.in-project-card__status {
    font-size: 10px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: #4ade80;
    background: rgba(74,222,128,.12);
    border: 1px solid rgba(74,222,128,.25);
    border-radius: 20px;
    padding: 2px 8px;
    align-self: flex-start;
    margin-top: auto;
}

/* Content area */
.in-project-card__content {
    padding: 18px 20px 20px;
    flex: 1; display: flex; flex-direction: column;
    gap: 8px;
}
.in-project-card__title {
    font-size: 15px; font-weight: 800;
    color: #fff; line-height: 1.25;
}
.in-project-card--featured .in-project-card__title { font-size: 18px; }
.in-project-card__loc {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: rgba(255,255,255,.4);
}
.in-project-card__desc {
    font-size: 13px; line-height: 1.65;
    color: rgba(255,255,255,.6);
    flex: 1;
    transition: max-height .25s ease;
}
.in-project-card__tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 4px;
}
.in-project-tag {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 3px 8px;
}

/* Project card internal links */
.in-project-card__city-link {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.25);
    transition: border-color .2s;
}
.in-project-card__city-link:hover { border-color: rgba(255,255,255,.7); }
.in-project-card__links {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.in-project-card__link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; text-decoration: none;
    color: rgba(255,255,255,.55);
    transition: color .2s;
}
.in-project-card__link:hover { color: #fff; }

/* Portfolio footer CTA */
.in-portfolio__foot {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* === 13. PROCESS =============================================== */
.in-process { padding: var(--section-pad) 0; background: var(--clr-off-wh); }
.in-process__head { text-align: center; max-width: 600px; margin: 0 auto 52px; }
.in-process__head .in-lead { margin-top: 14px; }

.in-process__steps {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    position: relative;
}
/* ── Standalone process section steps (scoped to grid parent) ── */
.in-process__steps .in-process-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative; z-index: 1;
}

/* Horizontal connector line — absolute, spans between circle centers */
.in-process__connector {
    position: absolute;
    top: 27px;
    left: calc(12.5% + 10px);
    right: calc(12.5% + 10px);
    height: 2px;
    background: var(--clr-gray-2);
    z-index: 0;
}

/* Standalone section circle (56px navy/white) — scoped to grid parent */
.in-process__steps .in-process-step__num {
    width: 56px; height: 56px;
    background: #fff;
    border: 2px solid var(--clr-gray-2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: var(--fw-9);
    color: var(--clr-navy);
    margin: 0 auto 20px;
    position: relative; z-index: 1;
    transition: background var(--tr), border-color var(--tr), color var(--tr), transform 300ms ease;
}
.in-process__steps .in-process-step:hover .in-process-step__num {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
    color: #fff;
    transform: scale(1.08);
}
.in-process-step__title {
    font-size: 15px; font-weight: var(--fw-7);
    color: var(--clr-navy); margin-bottom: 10px;
    line-height: 1.3; overflow-wrap: break-word;
}
.in-process-step__desc {
    font-size: 13px; line-height: 1.7;
    color: var(--clr-gray-5); overflow-wrap: break-word;
}

/* Word-reveal spans — opacity only, so layout never shifts */
.in-ps-word { opacity: 0; transition: opacity 180ms ease; }
.in-ps-word.is-visible { opacity: 1; }

/* Process section — scroll-reveal (JS adds .is-revealed) */
[data-ps-step] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}
[data-ps-step].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (hover: hover) {
    [data-ps-step].is-revealed {
        transition: opacity 500ms ease-out, transform 500ms ease-out, box-shadow 220ms ease;
        border-radius: 10px;
    }
    [data-ps-step].is-revealed:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,.07);
    }
}


/* === 14. TRUST / REVIEWS ======================================= */
/* Reviews sit in the light brand scheme like every other section — blue,
   white and grey. A soft blue-tinted ground keeps the white cards separated
   without going dark. */
.in-trust {
    padding: var(--section-pad) 0;
    background: linear-gradient(180deg, #eef4fa 0%, #f7fafd 55%, #fff 100%);
    color: var(--clr-ink);
}
.in-trust__head {
    text-align: center; max-width: 640px; margin: 0 auto 40px;
}
.in-trust__head .in-h2 { color: var(--clr-ink); }
.in-trust__head .in-lead { color: var(--clr-gray-7); margin-top: 14px; }
.in-trust__widget-wrap { max-width: 960px; margin: 0 auto; }

/* ─── Platform rating cards row ─── */
.in-reviews-platforms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.in-reviews-platform-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 24px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    transition: background .2s;
}
.in-reviews-platform-card:hover { background: rgba(255,255,255,.10); }
.in-reviews-platform-logo {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.10);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.in-reviews-platform-logo svg { width: 24px; height: 24px; }
.in-reviews-score { font-size: 38px; font-weight: 900; color: #fff; line-height: 1; }
.in-reviews-stars { color: #F59E0B; font-size: 18px; letter-spacing: 2px; }
.in-reviews-platform-name {
    font-size: 11px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.in-reviews-count { font-size: 11px; color: rgba(255,255,255,.4); }
.in-reviews-platform-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: var(--clr-blue);
    text-decoration: none; margin-top: 2px;
    transition: color .15s;
}
.in-reviews-platform-link:hover { color: #5bb3f5; }
.in-reviews-platform-link svg { width: 11px; height: 11px; opacity: .7; }

/* ─── Review cards grid ─── */
.in-reviews-wrap { display: flex; flex-direction: column; gap: 0; }
.in-reviews-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-bottom: 32px;
}
.in-review-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px; padding: 22px 20px;
    display: flex; flex-direction: column; gap: 12px;
    transition: background .2s;
}
.in-review-card:hover { background: rgba(255,255,255,.11); }
.in-review-card__stars { color: #F59E0B; font-size: 15px; letter-spacing: 2px; }
.in-review-card__text {
    font-size: 13.5px; line-height: 1.7;
    color: rgba(255,255,255,.82);
    flex: 1;
}
.in-review-card__meta {
    display: flex; align-items: center; gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.in-review-card__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--clr-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.in-review-card__info { flex: 1; min-width: 0; }
.in-review-card__name {
    font-weight: 700; font-size: 13px; color: #fff;
    display: flex; align-items: center; gap: 5px;
}
.in-review-card__verified {
    display: inline-flex;
    color: #3b82f6;
    flex-shrink: 0;
}
.in-review-card__verified svg { width: 13px; height: 13px; }
.in-review-card__sub {
    font-size: 11px; color: rgba(255,255,255,.4);
    margin-top: 1px;
    display: flex; align-items: center; gap: 5px;
}
.in-review-card__platform-badge { display: inline-flex; align-items: center; }
.in-review-card__platform-badge svg { width: 14px; height: 14px; }

/* ─── Footer ─── */
.in-reviews-footer {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.in-reviews-badge {
    display: inline-block;
    background: rgba(0,108,181,.25);
    border: 1px solid rgba(0,108,181,.4);
    color: #7ec8ff;
    font-size: 12px; font-weight: 700;
    padding: 5px 16px; border-radius: 20px;
}
.in-reviews-disclaimer { font-size: 12px; color: rgba(255,255,255,.35); font-style: italic; }

@media (max-width: 900px) {
    .in-reviews-platforms { grid-template-columns: 1fr 1fr; }
    .in-reviews-platform-card:last-child { grid-column: 1 / -1; max-width: 260px; margin: 0 auto; width: 100%; }
}
@media (max-width: 768px) {
    .in-reviews-cards { grid-template-columns: 1fr; }
    .in-reviews-platforms { grid-template-columns: 1fr; }
    .in-reviews-platform-card:last-child { grid-column: auto; max-width: none; }
}

/* === 15. CTA SECTION =========================================== */
.in-cta {
    padding: var(--section-pad) 0;
    background: linear-gradient(135deg, var(--clr-navy) 0%, #162d46 100%);
}

.in-cta .in-container {
    display: grid; grid-template-columns: 1fr 420px;
    gap: 64px; align-items: center;
}

.in-cta__tag { color: rgba(255,255,255,.5); }
.in-cta__heading {
    font-size: clamp(28px, 4vw, 44px); font-weight: var(--fw-8);
    color: #fff; line-height: 1.15; letter-spacing: -.02em;
    margin: 8px 0 14px;
}
.in-cta__sub { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.62); margin-bottom: 30px; }
.in-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Contact info card */
.in-contact-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.in-contact-card__row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 15px 22px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.in-contact-card__row:last-child { border-bottom: none; }
.in-contact-card__icon { color: #93c5fd; flex-shrink: 0; margin-top: 2px; }
.in-contact-card__label {
    font-size: 10px; font-weight: var(--fw-7);
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-bottom: 4px;
}
.in-contact-card__val { font-size: 14px; color: rgba(255,255,255,.82); font-weight: var(--fw-5); line-height: 1.5; }
.in-contact-card__val a { color: inherit; transition: color var(--tr); }
.in-contact-card__val a:hover { color: #fff; }
.in-contact-card__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: rgba(74,222,128,.08);
    border-top: 1px solid rgba(74,222,128,.15);
    font-size: 12.5px;
    font-weight: var(--fw-6);
    color: #4ade80;
}

/* CTA steps */
.in-cta__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.in-cta__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background var(--tr);
}
.in-cta__step:last-child { border-bottom: none; }
.in-cta__step:hover { background: rgba(255,255,255,.03); }
.in-cta__step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,108,181,.3);
    border: 1px solid rgba(0,108,181,.5);
    color: #93c5fd;
    font-size: 12px;
    font-weight: var(--fw-7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.in-cta__step-title {
    font-size: 13.5px;
    font-weight: var(--fw-6);
    color: rgba(255,255,255,.85);
    margin-bottom: 2px;
}
.in-cta__step-desc {
    font-size: 12px;
    color: rgba(255,255,255,.42);
    line-height: 1.5;
}

/* Alt contact row */
.in-cta__alt-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,.35);
}
.in-cta__alt-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.55);
    transition: color var(--tr);
}
.in-cta__alt-link:hover { color: #fff; }

/* === 16. FOOTER ================================================ */
.in-footer { background: #060d15; padding: 64px 0 0; color: rgba(255,255,255,.5); }

.in-footer__main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.6fr;
    gap: 48px;
    padding-bottom: 52px;
}

.in-footer__logo-name { font-size: 18px; font-weight: var(--fw-8); color: #fff; margin-bottom: 12px; letter-spacing: .04em; }
.in-footer__logo-name span { color: #fff; }
.in-footer__logo-img-link { display: inline-block; margin-bottom: 16px; }
.in-footer__logo-img { display: block; width: 180px; height: auto; }
.in-footer__about { font-size: 13px; line-height: 1.75; max-width: 260px; margin-bottom: 20px; }
.in-footer__license-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(0,108,181,.15);
    border: 1px solid rgba(0,108,181,.3);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 12px; color: #93c5fd; font-weight: var(--fw-6);
}

.in-footer__col-title {
    font-size: 11px; font-weight: var(--fw-7);
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.65); /* was .28 — fails 4.5:1 on dark bg */
    margin-bottom: 18px;
}

/* Brand column — tagline + bullets */
.in-footer__tagline { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.55); max-width: 260px; margin-bottom: 16px; }
.in-footer__bullets {
    display: flex; flex-direction: column; gap: 7px;
    list-style: none; padding: 0; margin: 0 0 16px;
}
.in-footer__bullets li {
    font-size: 13px; color: rgba(255,255,255,.55); padding-left: 20px; position: relative; line-height: 1.5;
}
.in-footer__bullets li::before {
    content: '✔';
    position: absolute; left: 0;
    color: var(--clr-blue); font-size: 11px; top: 1px;
}
.in-footer__serving {
    font-size: 12px; color: rgba(255,255,255,.62); /* was .3 — fails contrast on dark bg */
    margin-bottom: 20px; line-height: 1.6;
}

/* Services + Areas links — with slide-arrow on hover */
.in-footer__links { display: flex; flex-direction: column; gap: 10px; }
.in-footer__links a {
    font-size: 13px; color: rgba(255,255,255,.48);
    display: inline-flex; align-items: center; gap: 0;
    transition: color var(--tr), gap var(--tr);
}
.in-footer__links a::after {
    content: '→';
    font-size: 11px; opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--tr), transform var(--tr);
}
.in-footer__links a:hover { color: #fff; gap: 5px; }
.in-footer__links a:hover::after { opacity: 1; transform: translateX(0); }

/* Areas — grouped by region */
.in-footer__areas { display: flex; flex-direction: column; gap: 20px; }
.in-footer__area-region {
    display: block; font-size: 11px; font-weight: var(--fw-6);
    color: rgba(255,255,255,.58); /* was .22 — fails 4.5:1 on dark bg */
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 8px;
}

/* Contact column */
.in-footer__contact-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; }

/* Secondary note under the address. It used to be an inline opacity:.75 on top
   of the footer's already-dimmed text, which compounded to 3.47:1 and failed
   AA. Reading as secondary is a job for size and weight, not transparency. */
.in-footer__note { font-size: 11.5px; color: rgba(255,255,255,.62); }
.in-footer__contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.in-footer__contact-item svg { color: var(--clr-blue); flex-shrink: 0; margin-top: 1px; }
.in-footer__contact-item a,
.in-footer__contact-item span { color: rgba(255,255,255,.5); transition: color var(--tr); }
.in-footer__contact-item a:hover { color: #fff; }
/* Phone + email — brighter by default */
.in-footer__contact-item--primary a {
    color: rgba(255,255,255,.75); font-weight: var(--fw-6);
}
.in-footer__contact-item--primary a:hover { color: #fff; }

/* Footer CTA button */
.in-footer__cta-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--clr-blue); color: #fff;
    font-size: 13px; font-weight: var(--fw-6);
    padding: 11px 20px; border-radius: var(--radius);
    transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
    white-space: nowrap;
}
.in-footer__cta-btn:hover {
    background: #0059a0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,108,181,.35);
    color: #fff;
}

.in-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 20px 0;
    display: flex; align-items: center;
    justify-content: space-between;
    font-size: 12px; gap: 16px; flex-wrap: wrap;
}
.in-footer__bottom-links { display: flex; gap: 20px; }
.in-footer__bottom-links a { color: rgba(255,255,255,.60); transition: color var(--tr); } /* was .32 — fails contrast */
.in-footer__bottom-links a:hover { color: rgba(255,255,255,.9); }

/* === 17. PAGE TEMPLATE ========================================= */
.in-page-hero {
    background: var(--clr-off-wh);
    padding: 56px 0;
    border-bottom: 1px solid var(--clr-gray-2);
}
.in-page-content { padding: 72px 0; }
.in-page-content .entry-content { max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--clr-gray-7); }
.in-page-content .entry-content h2 { margin: 36px 0 14px; }
.in-page-content .entry-content p { margin-bottom: 18px; }
.in-page-content .entry-content a { color: var(--clr-blue); }

/* === 18. RESPONSIVE ============================================ */
@media (max-width: 1060px) {
    :root { --section-pad: 72px; }

    .in-hero .in-container { grid-template-columns: 1fr; }
    .in-hero__panel { display: none; }

    .in-about .in-container { grid-template-columns: 1fr; gap: 44px; }

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

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

    .in-process__steps { grid-template-columns: repeat(2, 1fr); }
    .in-process__connector { display: none; }

    .in-cta .in-container { grid-template-columns: 1fr; gap: 36px; }

    .in-footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --section-pad: 56px; }

    .in-topbar { display: none; }
    .in-nav { display: none; }
    .in-header__actions { display: none; }
    .in-nav__toggle { display: flex; }

    .in-services__grid { grid-template-columns: 1fr; }
    .in-portfolio__grid { grid-template-columns: 1fr; }
    .in-footer__main { grid-template-columns: 1fr; gap: 32px; }

    .in-trust-bar__sep { display: none; }
    .in-trust-bar .in-container { gap: 14px; }
    .in-portfolio__head { flex-direction: column; align-items: flex-start; }
}

/* Landscape phones, tablets & small laptops (769–1199 px) use the mobile
   nav — the ten-item desktop bar cannot fit below ~1200px. */
@media (min-width: 769px) and (max-width: 1199px) {
    .in-nav { display: none; }
    .in-header__actions { display: none; }
    .in-nav__toggle { display: flex; }
}

/* Touch devices always get mobile menu regardless of viewport width / orientation */
@media (hover: none) and (pointer: coarse) {
    .in-nav { display: none; }
    .in-header__actions { display: none; }
    .in-nav__toggle { display: flex; }
}

@media (max-width: 480px) {
    .in-process__steps { grid-template-columns: 1fr; }
    .in-hero__actions { flex-direction: column; align-items: flex-start; }
    .in-cta__actions { flex-direction: column; align-items: flex-start; }
    .in-hero__proof { flex-direction: column; align-items: flex-start; gap: 10px; }
    .in-hero__proof-sep { display: none; }
}

/* =============================================================
   STICKY CTA BUTTON
   ============================================================= */
.in-sticky-cta {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--clr-blue);
    color: #fff;
    border-radius: 100px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: var(--fw-6);
    box-shadow: 0 4px 24px rgba(0,108,181,.35);
    transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
.in-sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.in-sticky-cta:hover {
    background: var(--clr-blue-dk);
    box-shadow: 0 6px 32px rgba(0,108,181,.45);
    transform: translateY(-2px);
}
/* Desktop / mouse devices: never show sticky CTA */
@media (hover: hover) and (pointer: fine) {
    .in-sticky-cta { display: none !important; }
}

/* Mobile ≤768px: icon-only pill */
@media (max-width: 768px) {
    .in-sticky-cta span { display: none; }
    .in-sticky-cta { padding: 16px; border-radius: 50%; bottom: 80px; right: 20px; }
}

/* Very small mobile ≤480px: full-width, above bottom nav safe area */
@media (max-width: 480px) {
    .in-sticky-cta {
        left: 16px;
        right: auto;
        bottom: 16px;
        border-radius: 50%;
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }
    .in-sticky-cta span { display: none; }
}

/* =============================================================
   CITY & AREA PAGES
   ============================================================= */

/* ── City Hero ─────────────────────────────────────────────── */
.in-city-hero {
    background: var(--clr-black);
    color: var(--clr-white);
    padding: 56px 0 64px;
}
.in-city-hero .in-container {
    display: block;
}
.in-city-hero__content {
    max-width: 780px;
}
.in-city-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-bottom: 20px;
}
.in-city-hero__breadcrumb a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color var(--tr);
}
.in-city-hero__breadcrumb a:hover { color: var(--clr-orange); }
.in-city-hero__heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--fw-9);
    line-height: 1.1;
    color: var(--clr-white);
    margin: 16px 0 18px;
}
.in-city-hero__heading em {
    font-style: normal;
    color: #fff;
}
.in-city-hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.75);
    max-width: 620px;
    line-height: 1.65;
    margin-bottom: 28px;
}
.in-city-hero .in-hero__badge {
    margin-bottom: 8px;
}
.in-city-hero .in-hero__actions {
    margin-bottom: 24px;
}
.in-city-hero .in-hero__proof {
    color: rgba(255,255,255,.6);
}

/* ── City About ────────────────────────────────────────────── */
.in-city-about {
    padding: var(--section-pad) 0;
    background: var(--clr-white);
}
.in-city-about .in-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: start;
}
.in-city-about__body {
    font-size: 1rem;
    color: var(--clr-grey);
    line-height: 1.75;
    margin-bottom: 18px;
}
.in-city-climate-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--clr-orange-lt);
    border-left: 3px solid var(--clr-orange);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--clr-grey);
    line-height: 1.55;
    margin-top: 20px;
}
.in-city-climate-note svg { flex-shrink: 0; margin-top: 1px; color: var(--clr-orange); }

.in-city-highlights-card {
    background: var(--clr-off-wh);
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.in-city-highlights-card__title {
    font-size: 13px;
    font-weight: var(--fw-7);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--clr-gray-5);
    margin-bottom: 18px;
}
.in-city-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--clr-grey);
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid var(--clr-gray-1);
}
.in-city-highlight-item:last-of-type { border-bottom: none; }
.in-city-highlight-item .in-about__feature-check {
    width: 20px;
    height: 20px;
    background: var(--clr-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── City Services ─────────────────────────────────────────── */
.in-city-services {
    padding: var(--section-pad) 0;
    background: var(--clr-off-wh);
}
.in-city-services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    margin-top: 48px;
}
.in-city-service-block {
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: box-shadow var(--tr), transform var(--tr);
}
.in-city-service-block:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.in-city-service-block__icon {
    width: 56px;
    height: 56px;
    background: var(--clr-blue-lt);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--clr-blue);
}
.in-city-service-block__title {
    font-size: 1.1rem;
    font-weight: var(--fw-7);
    color: var(--clr-black);
    margin-bottom: 4px;
}
.in-city-service-block__tagline {
    font-size: 12.5px;
    font-weight: var(--fw-6);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--clr-blue);
    margin-bottom: 12px;
}
.in-city-service-block__desc {
    font-size: 14px;
    color: var(--clr-grey);
    line-height: 1.65;
    margin-bottom: 16px;
}
.in-city-service-block__benefits {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.in-city-service-block__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--clr-grey);
    line-height: 1.4;
}
.in-city-service-block__benefits svg { color: var(--clr-blue); flex-shrink: 0; margin-top: 2px; }
.in-city-service-block__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: var(--fw-6);
    color: var(--clr-blue);
    text-decoration: none;
    transition: gap var(--tr);
}
.in-city-service-block__cta:hover { gap: 10px; color: var(--clr-blue-dk); }
.in-city-service-block__svc-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; text-decoration: none;
    color: var(--clr-gray-5); margin-top: 8px;
    transition: color .2s;
}
.in-city-service-block__svc-link:hover { color: var(--clr-blue); }

/* ── Neighborhoods ──────────────────────────────────────────── */
.in-city-neighborhoods {
    padding: var(--section-pad) 0;
    background: var(--clr-white);
}
.in-city-neighborhoods__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
}
.in-city-neighborhood-chip {
    /* Static informational tag — not a link, not a button.
       Square-ish radius + no border = label, not pill-button. */
    background: var(--clr-gray-1);
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: var(--fw-5);
    color: var(--clr-gray-7);
    white-space: nowrap;
    cursor: default;
    user-select: none;
    /* No border, no hover effect — clearly non-interactive */
    display: inline-block;
}
.in-city-neighborhood-chip--sm {
    padding: 3px 10px;
    font-size: 11px;
}

/* ── Sub-city Area Cards ────────────────────────────────────── */
.in-city-areas {
    padding: var(--section-pad) 0;
    background: var(--clr-off-wh);
}
.in-city-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-top: 40px;
}
.in-city-area-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.in-city-area-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--clr-blue);
}
.in-city-area-card__name {
    font-size: 1rem;
    font-weight: var(--fw-7);
    color: var(--clr-black);
    margin-bottom: 8px;
}
.in-city-area-card__desc {
    font-size: 13.5px;
    color: var(--clr-grey);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
}
.in-city-area-card__icon {
    width: 44px; height: 44px;
    background: var(--clr-blue-lt);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    color: var(--clr-blue);
    flex-shrink: 0;
}
.in-city-area-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: var(--fw-6);
    color: var(--clr-blue);
    margin-top: auto;
}

/* ── Homepage Areas Section ─────────────────────────────────── */
/* ── Areas We Serve ─────────────────────────────────────────── */
.in-areas {
    padding: var(--section-pad) 0;
    background: #fff;
    border-top: 1px solid var(--clr-gray-2);
}

/* Tier-1 anchor city cards */
.in-areas__anchors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.in-areas__anchor-card {
    display: flex; flex-direction: column;
    padding: 22px 20px;
    background: var(--clr-off-wh);
    border: 1px solid var(--clr-gray-2);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.in-areas__anchor-card:hover {
    border-color: var(--clr-blue);
    background: var(--clr-blue-lt);
    box-shadow: 0 4px 16px rgba(0,108,181,.08);
}
.in-areas__anchor-region {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--clr-blue);
    margin-bottom: 5px;
}
.in-areas__anchor-name {
    font-size: 17px; font-weight: 800;
    color: var(--clr-text);
    margin-bottom: 10px;
    line-height: 1.2;
}
.in-areas__anchor-cta {
    font-size: 12px; font-weight: 600;
    color: var(--clr-blue);
    margin-top: auto;
}

/* Compact pill grid for remaining cities */
.in-areas__pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-gray-1);
}
.in-areas__pill {
    display: inline-flex; align-items: center;
    padding: 7px 14px;
    background: var(--clr-off-wh);
    border: 1px solid var(--clr-gray-2);
    border-radius: 20px;
    font-size: 13px; font-weight: 600;
    color: var(--clr-gray-7);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.in-areas__pill:hover {
    background: var(--clr-blue-lt);
    border-color: var(--clr-blue);
    color: var(--clr-blue);
}

.in-areas__note {
    margin-top: 24px;
    font-size: 13px;
    color: var(--clr-gray-5);
    text-align: center;
}
.in-areas__note a { color: var(--clr-blue); font-weight: 700; text-decoration: none; }
.in-areas__note a:hover { text-decoration: underline; }

@media (max-width: 960px) {
    .in-areas__anchors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .in-areas__anchors { grid-template-columns: 1fr 1fr; gap: 10px; }
    .in-areas__anchor-card { padding: 16px 14px; }
    .in-areas__pill { font-size: 12px; padding: 6px 11px; }
}
.in-area-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius-lg);
    padding: 36px;
    transition: box-shadow var(--tr);
}
.in-area-card:hover { box-shadow: var(--shadow-md); }
.in-area-card__region {
    font-size: 11px;
    font-weight: var(--fw-7);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--clr-blue);
    margin-bottom: 8px;
}
.in-area-card__name {
    font-size: 1.35rem;
    font-weight: var(--fw-8);
    color: var(--clr-black);
    margin-bottom: 12px;
}
.in-area-card__intro {
    font-size: 14px;
    color: var(--clr-grey);
    line-height: 1.7;
    margin-bottom: 16px;
}
.in-area-card__neighborhoods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* ── Service block "when to hire" note ─────────────────────── */
.in-city-service-block__when {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--clr-blue-lt);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--clr-grey);
    line-height: 1.55;
    margin-bottom: 16px;
    border-left: 3px solid var(--clr-blue);
}
.in-city-service-block__when svg { flex-shrink: 0; margin-top: 1px; color: var(--clr-blue); }

/* ── Neighborhoods note ─────────────────────────────────────── */
.in-city-neighborhoods__note {
    margin-top: 28px;
    font-size: 14px;
    color: var(--clr-grey);
    text-align: center;
}
.in-city-neighborhoods__note a {
    color: var(--clr-blue);
    text-decoration: underline;
}
.in-city-neighborhoods__note a:hover { color: var(--clr-blue-dk); }

/* ── Mid-page CTA strip ─────────────────────────────────────── */
.in-city-mid-cta {
    background: var(--clr-navy);
    padding: 36px 0;
}
.in-city-mid-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.in-city-mid-cta__headline {
    font-size: 1.15rem;
    font-weight: var(--fw-7);
    color: #fff;
}
.in-city-mid-cta__sub {
    font-size: 13.5px;
    color: rgba(255,255,255,.6);
    margin-top: 4px;
}
.in-city-mid-cta__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── City page responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    .in-city-about .in-container { grid-template-columns: 1fr; gap: 40px; }
    .in-city-services__grid { grid-template-columns: 1fr; }
    .in-city-areas__grid { grid-template-columns: repeat(2, 1fr); }
    .in-areas__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .in-city-areas__grid { grid-template-columns: 1fr; }
    .in-city-hero { padding: 40px 0 48px; }
    .in-city-hero__heading { font-size: 1.75rem; }
}
@media (max-width: 480px) {
    .in-city-hero .in-hero__actions { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   NEARBY CITIES SECTION (city template)
   ============================================================= */
.in-city-nearby {
    padding: 56px 0;
    background: var(--clr-off-wh);
    border-top: 1px solid var(--clr-gray-2);
}
.in-city-nearby__head {
    margin-bottom: 28px;
}
.in-city-nearby__head h2 {
    font-size: 1.35rem; font-weight: 800;
    margin-bottom: 6px;
}
.in-city-nearby__head p {
    font-size: 14px; color: var(--clr-gray-5);
}
.in-city-nearby__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.in-city-nearby__card {
    display: flex; flex-direction: column;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 8px;
    text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.in-city-nearby__card:hover {
    border-color: var(--clr-blue);
    background: var(--clr-blue-lt);
    box-shadow: 0 2px 10px rgba(0,108,181,.08);
}
.in-city-nearby__card--all {
    background: var(--clr-off-wh);
    border-style: dashed;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.in-city-nearby__region {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--clr-blue);
    margin-bottom: 3px;
}
.in-city-nearby__name {
    font-size: 14px; font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 8px;
}
.in-city-nearby__cta {
    font-size: 12px; font-weight: 600;
    color: var(--clr-blue);
    margin-top: auto;
}

/* ── City FAQ Section ───────────────────────────────────────── */
.in-city-faq {
    padding: 64px 0;
    background: #fff;
    border-top: 1px solid var(--clr-gray-2);
}
.in-city-faq__head {
    text-align: center; max-width: 600px; margin: 0 auto 36px;
}
.in-city-faq__list {
    max-width: 760px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 2px;
}
.in-city-faq__item {
    border: 1px solid var(--clr-gray-2);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.in-city-faq__q {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 18px 20px;
    background: none; border: none; cursor: pointer;
    font-size: 15px; font-weight: 700; color: var(--clr-dark);
    text-align: left; line-height: 1.4;
    transition: background .15s;
}
.in-city-faq__q:hover { background: var(--clr-off-wh); }
.in-city-faq__chevron { flex-shrink: 0; transition: transform .2s; }
.in-city-faq__a { padding: 0 20px 18px; }
.in-city-faq__a p { font-size: 14px; line-height: 1.7; color: var(--clr-gray-6); margin: 0; }

/* =============================================================
   ESTIMATE EMBED (JOBBER IFRAME)
   ============================================================= */
.in-estimate-embed {
    padding: 72px 0;
    background: var(--clr-off-wh);
    border-top: 1px solid var(--clr-gray-2);
}
.in-estimate-embed__inner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 56px;
    align-items: start;
}
.in-estimate-embed__intro h2 {
    font-size: 1.75rem; font-weight: 800;
    margin: 10px 0 12px;
    line-height: 1.2;
}
.in-estimate-embed__intro > p {
    font-size: 15px; line-height: 1.65;
    color: var(--clr-gray-7);
    margin-bottom: 20px;
}
.in-estimate-embed__bullets {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.in-estimate-embed__bullets li {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: var(--clr-gray-7);
}
.in-estimate-embed__or {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.in-estimate-embed__or::before,
.in-estimate-embed__or::after {
    content: ''; flex: 1;
    height: 1px; background: var(--clr-gray-2);
}
.in-estimate-embed__or span { font-size: 11px; color: var(--clr-gray-6); white-space: nowrap; } /* was gray-5 — fails 4.5:1 on off-white */
.in-estimate-embed__contact { display: flex; flex-direction: column; gap: 8px; }
.in-estimate-embed__contact-link {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700;
    color: var(--clr-blue);
    text-decoration: none;
    transition: color .15s;
}
.in-estimate-embed__contact-link:hover { color: var(--clr-blue-dk); }

/* iframe wrapper */
.in-estimate-embed__frame-wrap {
    border: 1px solid var(--clr-gray-2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0,0,0,.07);
    background: #fff;
}
.in-estimate-embed__frame-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    background: var(--clr-blue);
    color: #fff;
    font-size: 13px; font-weight: 700;
}
.in-estimate-embed__frame-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
}
.in-estimate-embed__iframe {
    width: 100%;
    min-height: 640px;
    border: none;
    display: block;
}

@media (max-width: 960px) {
    .in-estimate-embed__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .in-estimate-embed { padding: 48px 0; }
    .in-estimate-embed__iframe { min-height: 540px; }
}

/* =============================================================
   SERVICE PAGE TEMPLATE
   ============================================================= */

/* ── Service Hero ──────────────────────────────────────────── */
.in-svc-hero {
    background: #000;
    color: #fff;
    padding: 56px 0 64px;
    position: relative;
    overflow: hidden;
}
.in-svc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,108,181,.18) 0%, transparent 70%);
    pointer-events: none;
}
.in-svc-hero__content { position: relative; max-width: 680px; }
.in-svc-hero__breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,.5);
    margin-bottom: 18px;
}
.in-svc-hero__breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; }
.in-svc-hero__breadcrumb a:hover { color: #fff; }
.in-svc-hero__breadcrumb span { color: rgba(255,255,255,.3); }
.in-svc-hero__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 5px 12px;
    margin-bottom: 18px;
}
.in-svc-hero__heading {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 14px;
}
.in-svc-hero__heading span { color: var(--clr-blue); }
.in-svc-hero__tagline {
    font-size: 1.05rem;
    color: rgba(255,255,255,.7);
    margin-bottom: 28px;
    line-height: 1.55;
}
.in-svc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Service About ─────────────────────────────────────────── */
.in-svc-about { padding: 60px 0; }
.in-svc-about__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}
.in-svc-about__body h2 {
    font-size: 1.65rem; font-weight: 800;
    margin-bottom: 16px; line-height: 1.2;
}
.in-svc-about__desc {
    font-size: 1rem; line-height: 1.75;
    color: var(--clr-gray-7);
}
.in-svc-about__desc p { margin-bottom: 12px; }

/* Contact card */
.in-svc-contact-card {
    border: 1px solid var(--clr-gray-2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    position: sticky;
    top: 90px;
}
.in-svc-contact-card__header {
    background: var(--clr-blue);
    color: #fff;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    padding: 12px 18px;
}
.in-svc-contact-card__body { padding: 18px; }
.in-svc-contact-card__body p {
    font-size: 13px; color: var(--clr-gray-7);
    margin-bottom: 14px; line-height: 1.5;
}
.in-btn--full { width: 100%; text-align: center; justify-content: center; }
.in-svc-contact-card__phone {
    display: flex; align-items: center; gap: 7px;
    margin-top: 10px;
    font-size: 14px; font-weight: 700;
    color: var(--clr-blue);
    text-decoration: none;
    justify-content: center;
}
.in-svc-contact-card__phone:hover { color: var(--clr-blue-dk); }
.in-svc-contact-card__hours {
    text-align: center;
    font-size: 11px; color: var(--clr-gray-5);
    margin-top: 6px;
}
.in-svc-contact-card__footer {
    display: flex; justify-content: space-around;
    padding: 10px 18px;
    background: var(--clr-off-wh);
    border-top: 1px solid var(--clr-gray-1);
    font-size: 11px; font-weight: 700; color: var(--clr-gray-5);
}

/* ── Benefits ──────────────────────────────────────────────── */
.in-svc-benefits { padding: 56px 0; background: var(--clr-off-wh); }
.in-svc-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 32px;
}
.in-svc-benefit {
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 10px;
    padding: 22px 20px;
    display: flex; align-items: flex-start; gap: 14px;
}
.in-svc-benefit__num {
    font-size: 28px; font-weight: 900;
    /* Brand blue at opacity .3 computed to 1.57:1 on white — large bold text
       needs 3:1. This tint is the lightest that passes, at 3.15:1. */
    color: #4d98cb;
    line-height: 1; flex-shrink: 0;
}
.in-svc-benefit__text { font-size: 14px; line-height: 1.55; color: var(--clr-gray-7); }

/* ── Process ───────────────────────────────────────────────── */
.in-svc-process { padding: 64px 0; }
.in-svc-process__steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px;
    margin-top: 36px;
    position: relative;
}
.in-svc-process__step {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-top: 3px solid var(--clr-blue);
    border-radius: 8px;
}
.in-svc-process__step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--clr-blue);
    color: #fff;
    font-size: 16px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.in-svc-process__step-body h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.in-svc-process__step-body p { font-size: 13px; line-height: 1.55; color: var(--clr-gray-7); }

/* ── Mid CTA ───────────────────────────────────────────────── */
.in-svc-mid-cta {
    background: var(--clr-blue);
    color: #fff;
    padding: 48px 0;
    text-align: center;
}
.in-svc-mid-cta h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.in-svc-mid-cta p { font-size: 1rem; color: rgba(255,255,255,.92); margin-bottom: 24px; }
.in-svc-mid-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.in-btn--ghost-light {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px; border-radius: 6px;
    font-size: 15px; font-weight: 700;
    color: rgba(255,255,255,.9);
    border: 2px solid rgba(255,255,255,.4);
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.in-btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }

/* ── FAQ ───────────────────────────────────────────────────── */
.in-svc-faq { padding: 64px 0; background: var(--clr-off-wh); }
.in-svc-faq__list { margin-top: 32px; max-width: 760px; margin-left: auto; margin-right: auto; }
.in-svc-faq__item {
    border: 1px solid var(--clr-gray-2);
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}
.in-svc-faq__question {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px;
    background: transparent; border: none; cursor: pointer;
    font-size: 15px; font-weight: 700; text-align: left;
    color: var(--clr-text);
    font-family: inherit;
    transition: background .15s;
}
.in-svc-faq__question:hover { background: var(--clr-gray-1); }
.in-svc-faq__question[aria-expanded="true"] { color: var(--clr-blue); }
.in-svc-faq__question[aria-expanded="true"] .in-svc-faq__icon { transform: rotate(180deg); color: var(--clr-blue); }
.in-svc-faq__icon { flex-shrink: 0; transition: transform .25s ease; }
.in-svc-faq__answer { padding: 0 20px 18px; }
.in-svc-faq__answer p { font-size: 14px; line-height: 1.7; color: var(--clr-gray-7); }

/* ── Cities grid ───────────────────────────────────────────── */
.in-svc-cities { padding: 60px 0; }
.in-section-head__sub {
    font-size: 15px; color: var(--clr-gray-5);
    margin-top: 6px; max-width: 560px;
}
.in-svc-cities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 32px;
}
.in-svc-city-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px;
    background: var(--clr-off-wh);
    border: 1px solid var(--clr-gray-2);
    border-radius: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--clr-text);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.in-svc-city-link:hover {
    background: var(--clr-blue-lt);
    border-color: var(--clr-blue);
    color: var(--clr-blue);
}
.in-svc-city-link svg { flex-shrink: 0; opacity: .4; }

/* ── Bottom CTA ────────────────────────────────────────────── */
.in-svc-bottom-cta { padding: 64px 0; background: #000; color: #fff; }
.in-svc-bottom-cta__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}
.in-svc-bottom-cta__text h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 10px; }
.in-svc-bottom-cta__text p { font-size: 15px; color: rgba(255,255,255,.9); margin-bottom: 16px; }
.in-svc-bottom-cta__checklist {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.in-svc-bottom-cta__checklist li { font-size: 13px; color: rgba(255,255,255,.85); }
.in-svc-bottom-cta__actions {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    min-width: 240px;
}
.in-btn--lg { padding: 15px 28px; font-size: 16px; }
.in-svc-bottom-cta__tel {
    font-size: 14px; font-weight: 700; color: rgba(255,255,255,.8);
    text-decoration: none;
}
.in-svc-bottom-cta__tel:hover { color: #fff; }
.in-svc-bottom-cta__hours { font-size: 11px; color: rgba(255,255,255,.7); }

/* ── Service page responsive ───────────────────────────────── */
@media (max-width: 960px) {
    .in-svc-about__grid { grid-template-columns: 1fr; }
    .in-svc-contact-card { position: static; }
    .in-svc-bottom-cta__inner { grid-template-columns: 1fr; }
    .in-svc-bottom-cta__actions { align-items: flex-start; }
}
@media (max-width: 768px) {
    .in-svc-hero { padding: 40px 0 48px; }
    .in-svc-hero__heading { font-size: 1.75rem; }
    .in-svc-process__steps { grid-template-columns: 1fr; }
    .in-svc-benefits__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .in-svc-hero__actions { flex-direction: column; align-items: flex-start; }
    .in-svc-mid-cta__actions { flex-direction: column; align-items: center; }
}

/* =============================================================
   MICRO-INTERACTIONS & GLOBAL ANIMATION POLISH
   ============================================================= */
.in-btn--primary, .in-btn--outline, .in-req-submit {
    position: relative;
    overflow: hidden;
}
.in-btn-ripple {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transform: scale(0);
    animation: in-ripple .6s ease-out forwards;
    pointer-events: none;
}
@keyframes in-ripple {
    to { transform: scale(80); opacity: 0; }
}

.in-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.in-reveal.is-visible { opacity: 1; transform: translateY(0); }
.in-reveal-delay-1 { transition-delay: .1s !important; }
.in-reveal-delay-2 { transition-delay: .2s !important; }
.in-reveal-delay-3 { transition-delay: .3s !important; }

.in-stagger-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s ease;
}
.in-stagger-item.is-visible { opacity: 1; transform: translateY(0); }

@keyframes in-section-flash {
    0%, 100% { box-shadow: none; }
    40%       { box-shadow: 0 0 0 3px rgba(0,108,181,.3) inset; }
}
.in-section-highlight { animation: in-section-flash 1.5s ease; }

/* =============================================================
   REQUEST ESTIMATE PAGE
   ============================================================= */
.in-req-hero {
    padding: 64px 0 72px;
    background: #fff;
    border-bottom: 1px solid var(--clr-gray-2);
}
.in-req-hero__inner {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 60px;
    align-items: start;
}
.in-req-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    color: var(--clr-blue);
    background: var(--clr-blue-lt);
    border: 1px solid rgba(0,108,181,.2);
    border-radius: 20px;
    padding: 6px 14px;
    margin-bottom: 20px;
}
.in-req-hero__badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    animation: in-req-pulse 2.5s infinite;
}
@keyframes in-req-pulse {
    0%, 100% { transform: scale(1); box-shadow: none; }
    50%       { transform: scale(1.4); box-shadow: 0 0 0 3px rgba(74,222,128,.3); }
}
.in-req-hero__heading {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900; line-height: 1.1;
    letter-spacing: -.02em; margin-bottom: 14px;
}
.in-req-hero__sub {
    font-size: 1rem; line-height: 1.7;
    color: var(--clr-gray-7);
    margin-bottom: 28px; max-width: 480px;
}
.in-req-trust-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.in-req-trust-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600; color: var(--clr-gray-7);
}
.in-req-contact-alt {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid var(--clr-gray-2);
}
.in-req-contact-alt__label { font-size: 13px; color: var(--clr-gray-5); }
.in-req-contact-alt__or    { font-size: 12px; color: var(--clr-gray-5); }
.in-req-contact-alt__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: var(--clr-blue);
    text-decoration: none; transition: color .15s;
}
.in-req-contact-alt__link:hover { color: var(--clr-blue-dk); }

.in-req-form-wrap {
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    position: sticky; top: 100px;
}
.in-req-form-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    background: #000; color: #fff;
    font-size: 13px; font-weight: 700;
}
.in-req-form-header__left { display: flex; align-items: center; gap: 8px; }
.in-req-form-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%; background: #4ade80; display: inline-block;
}
.in-req-form-header__secure {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5);
}

.in-req-form { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.in-req-form__row { display: flex; gap: 14px; }
.in-req-form__row--2 > * { flex: 1; }
.in-req-field { display: flex; flex-direction: column; gap: 5px; }
.in-req-field label { font-size: 12px; font-weight: 700; color: var(--clr-gray-7); letter-spacing: .03em; }
.in-req-field label span { color: var(--clr-blue); }
.in-req-field input,
.in-req-field select,
.in-req-field textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--clr-gray-2);
    border-radius: 7px;
    font-size: 14px; font-family: inherit;
    color: var(--clr-text); background: #fff;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
}
.in-req-field input:focus,
.in-req-field select:focus,
.in-req-field textarea:focus {
    outline: none;
    border-color: var(--clr-blue);
    box-shadow: 0 0 0 3px rgba(0,108,181,.12);
}
.in-req-field input.has-error,
.in-req-field select.has-error,
.in-req-field textarea.has-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.in-req-field textarea { resize: vertical; min-height: 90px; }

.in-req-field--timeline > label:first-child { font-size: 12px; font-weight: 700; color: var(--clr-gray-7); }
.in-req-timeline-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.in-req-timeline-opt { cursor: pointer; }
.in-req-timeline-opt input { display: none; }
.in-req-timeline-opt span {
    display: inline-block; padding: 6px 12px;
    border: 1.5px solid var(--clr-gray-2);
    border-radius: 20px; font-size: 12px; font-weight: 600;
    color: var(--clr-gray-7); background: var(--clr-off-wh);
    transition: border-color .15s, background .15s, color .15s; cursor: pointer;
}
.in-req-timeline-opt:hover span,
.in-req-timeline-opt.is-selected span {
    border-color: var(--clr-blue); background: var(--clr-blue-lt); color: var(--clr-blue);
}
.in-req-form__notice { font-size: 11px; color: var(--clr-gray-5); line-height: 1.5; }

.in-req-submit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 20px;
    background: var(--clr-blue); color: #fff;
    border: none; border-radius: 8px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    font-family: inherit;
}
.in-req-submit:hover:not(:disabled) {
    background: var(--clr-blue-dk);
    box-shadow: 0 4px 20px rgba(0,108,181,.3);
    transform: translateY(-1px);
}
.in-req-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.in-req-form__success {
    text-align: center; padding: 24px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.in-req-form__success strong { font-size: 16px; font-weight: 800; color: #16a34a; }
.in-req-form__success p { font-size: 14px; color: var(--clr-gray-7); }
.in-req-form__error {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 7px; font-size: 13px; color: #dc2626;
}
/* Hidden attribute must win over display:flex on these elements */
.in-req-form__success[hidden],
.in-req-form__error[hidden] { display: none !important; }

.in-req-steps { padding: 64px 0; background: var(--clr-off-wh); }
.in-req-steps__head { text-align: center; margin-bottom: 40px; }
.in-req-steps__head h2 { font-size: 1.5rem; font-weight: 800; margin-top: 8px; }
.in-req-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.in-req-step {
    background: #fff; border: 1px solid var(--clr-gray-2);
    border-top: 3px solid var(--clr-blue);
    border-radius: 8px; padding: 24px 20px;
}
.in-req-step__num {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--clr-blue); color: #fff;
    font-size: 15px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.in-req-step h3 { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.in-req-step p  { font-size: 13px; line-height: 1.6; color: var(--clr-gray-7); }

.in-req-alt { padding: 32px 0; border-top: 1px solid var(--clr-gray-2); }
.in-req-alt__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.in-req-alt__text h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.in-req-alt__text p  { font-size: 13px; color: var(--clr-gray-5); }

@media (max-width: 1024px) {
    .in-req-hero__inner { grid-template-columns: 1fr; }
    .in-req-form-wrap { position: static; }
    .in-req-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .in-req-form__row--2 { flex-direction: column; }
    .in-req-steps__grid { grid-template-columns: 1fr; }
    .in-req-alt__inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   LEGAL PAGE TEMPLATE
   ============================================================= */
.in-legal-hero { background: #000; color: #fff; padding: 40px 0 48px; }
.in-legal-hero__breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,.4); margin-bottom: 14px;
}
.in-legal-hero__breadcrumb a { color: rgba(255,255,255,.4); transition: color .15s; }
.in-legal-hero__breadcrumb a:hover { color: #fff; }
.in-legal-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.in-legal-hero__meta { font-size: 13px; color: rgba(255,255,255,.45); }

.in-legal-body { padding: 56px 0; }
.in-legal-content { max-width: 760px; margin: 0 auto; }
.in-legal-content h2 {
    font-size: 1.15rem; font-weight: 800;
    margin: 36px 0 10px; padding-bottom: 6px;
    border-bottom: 2px solid var(--clr-gray-1);
}
.in-legal-content h2:first-child { margin-top: 0; }
.in-legal-content h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; }
.in-legal-content p  { font-size: 14px; line-height: 1.8; color: var(--clr-gray-7); margin-bottom: 12px; }
.in-legal-content ul { margin: 0 0 14px 20px; list-style: disc; }
.in-legal-content ul li { font-size: 14px; line-height: 1.7; color: var(--clr-gray-7); margin-bottom: 4px; }
.in-legal-content strong { color: var(--clr-text); }
.in-legal-content address {
    font-style: normal;
    background: var(--clr-off-wh);
    border: 1px solid var(--clr-gray-2);
    border-radius: 8px; padding: 16px 20px;
    font-size: 14px; line-height: 1.8; color: var(--clr-gray-7); margin-top: 10px;
}
.in-legal-content address a { color: var(--clr-blue); }
.in-legal-cta {
    display: flex; gap: 12px; flex-wrap: wrap;
    max-width: 760px; margin: 40px auto 0;
}

/* Portfolio responsive */
@media (max-width: 900px) {
    .in-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
    .in-project-card--featured { grid-column: span 2; }
}
@media (max-width: 600px) {
    .in-portfolio__grid { grid-template-columns: 1fr; }
    .in-project-card--featured { grid-column: span 1; }
}

/* ============================================================
   SUB-SERVICE PAGES
   ============================================================ */
.in-sub-svc-hero { padding: 60px 0 40px; background: var(--clr-off-wh); border-bottom: 1px solid var(--clr-gray-2); }
.in-sub-svc-hero__heading { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: var(--fw-7); color: var(--clr-heading); margin: 12px 0 16px; max-width: 720px; }
.in-sub-svc-hero__sub { font-size: 14px; color: var(--clr-gray-6); margin-bottom: 24px; }
.in-sub-svc-nav { background: #fff; border-bottom: 1px solid var(--clr-gray-2); position: sticky; top: 68px; z-index: 100; }
.in-sub-svc-nav .in-container { display: flex; gap: 0; overflow-x: auto; }
.in-sub-svc-nav__item { padding: 14px 20px; font-size: 13px; font-weight: var(--fw-6); color: var(--clr-gray-6); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--tr), border-color var(--tr); }
.in-sub-svc-nav__item:hover { color: var(--clr-blue); }
.in-sub-svc-nav__item--active { color: var(--clr-blue); border-bottom-color: var(--clr-blue); }
.in-sub-svc-body { padding: 60px 0 80px; }
.in-sub-svc-body .in-container { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.in-sub-svc-body__main { min-width: 0; }
@media (max-width: 960px) { .in-sub-svc-body .in-container { grid-template-columns: 1fr; } }
.in-cost-table { border: 1px solid var(--clr-gray-2); border-radius: var(--radius); overflow: hidden; margin-top: 28px; }
.in-cost-table__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 16px; background: var(--clr-blue); color: #fff; font-size: 12px; font-weight: var(--fw-6); text-transform: uppercase; letter-spacing: .05em; }
.in-cost-table__row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--clr-gray-2); font-size: 14px; }
.in-cost-table__row:last-child { border-bottom: none; }
.in-cost-table__row:nth-child(even) { background: var(--clr-off-wh); }
.in-cost-table__range { font-weight: var(--fw-7); color: var(--clr-blue); white-space: nowrap; }
.in-check-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.in-check-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--clr-gray-7); }
.in-check-list li svg { color: var(--clr-blue); flex-shrink: 0; margin-top: 3px; }
.in-process-steps { display: flex; flex-direction: column; gap: 24px; margin-top: 28px; }
.in-sub-svc-body .in-process-step { display: flex; gap: 20px; align-items: flex-start; text-align: left; }
.in-sub-svc-body .in-process-step__num { width: 36px; height: 36px; border-radius: 50%; background: var(--clr-blue); color: #fff; font-weight: var(--fw-7); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; }
.in-sub-svc-body .in-process-step__title { font-size: 1rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 0 0 6px; }
.in-sub-svc-body .in-process-step__desc { font-size: 14px; color: var(--clr-gray-7); line-height: 1.65; margin: 0; }
.in-materials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.in-material-card { background: var(--clr-off-wh); border: 1px solid var(--clr-gray-2); border-radius: var(--radius); padding: 20px; }
.in-material-card__name { font-size: 14px; font-weight: var(--fw-7); color: var(--clr-heading); margin-bottom: 4px; }
.in-material-card__use { font-size: 12px; color: var(--clr-blue); font-weight: var(--fw-6); margin-bottom: 10px; }
.in-material-card__why { font-size: 13px; color: var(--clr-gray-7); line-height: 1.6; margin: 0; }
.in-callout-box { background: #edf3fb; border: 1px solid var(--clr-blue); border-left: 4px solid var(--clr-blue); border-radius: var(--radius); padding: 24px 28px; }
.in-callout-box p { font-size: 15px; color: var(--clr-heading); line-height: 1.65; margin: 0 0 16px; }
.in-sidebar-card { background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg); padding: 24px; }
.in-sidebar-card__title { font-size: 14px; font-weight: var(--fw-7); color: var(--clr-heading); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--clr-gray-2); }
.in-sidebar-card__desc { font-size: 13px; color: var(--clr-gray-7); line-height: 1.6; margin-bottom: 16px; }
.in-sidebar-card__trust { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.in-sidebar-card__trust span { font-size: 12px; color: var(--clr-blue); font-weight: var(--fw-6); }
.in-sidebar-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.in-sidebar-nav li { font-size: 13px; }
.in-sidebar-nav li a { color: var(--clr-gray-7); text-decoration: none; padding: 4px 0; display: block; transition: color var(--tr); }
.in-sidebar-nav li a:hover, .in-sidebar-nav li.active a { color: var(--clr-blue); font-weight: var(--fw-6); }

/* ============================================================
   BLOG / GUIDES
   ============================================================ */
.in-blog-hero { padding: 64px 0 48px; background: var(--clr-off-wh); border-bottom: 1px solid var(--clr-gray-2); }
.in-blog-hero__heading { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--fw-7); color: var(--clr-heading); margin: 12px 0 16px; }
.in-blog-hero__sub { font-size: 16px; color: var(--clr-gray-6); max-width: 640px; line-height: 1.7; }
/* Stats bar */
.in-blog-stats-bar { padding: 10px 0; background: var(--clr-navy); color: rgba(255,255,255,.75); font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.in-blog-stats-bar .in-container { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.in-blog-stats-bar strong { color: #fff; }
.in-blog-stats-bar__sep { color: rgba(255,255,255,.3); }
.in-blog-stats-bar__item { white-space: nowrap; }
/* Featured section */
.in-blog-featured { padding: 56px 0 40px; }
.in-blog-featured__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.in-blog-featured__title { font-size: 1.25rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 6px 0 0; }
.in-blog-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.in-blog-featured__card { background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow var(--tr); }
.in-blog-featured__card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.in-blog-featured__card-title { font-size: 1rem; font-weight: var(--fw-7); color: var(--clr-heading); line-height: 1.4; flex: 1; }
.in-blog-featured__card-title a { color: inherit; text-decoration: none; }
.in-blog-featured__card-title a:hover { color: var(--clr-blue); }
.in-blog-featured__card p { font-size: 13px; color: var(--clr-gray-6); line-height: 1.65; margin: 0; flex: 1; }
@media (max-width: 768px) { .in-blog-featured__grid { grid-template-columns: 1fr; } }
/* Category clusters */
.in-blog-cluster { padding: 40px 0; border-top: 1px solid var(--clr-gray-2); }
.in-blog-cluster__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.in-blog-cluster__title { font-size: 1.15rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 0; }
.in-blog-cluster__all { font-size: 13px; color: var(--clr-blue); text-decoration: none; font-weight: var(--fw-6); white-space: nowrap; }
.in-blog-cluster__all:hover { text-decoration: underline; }
.in-blog-section__head { margin-bottom: 28px; }
/* Service page reviews strip */
.in-svc-reviews { padding: 60px 0; background: var(--clr-off-wh); border-top: 1px solid var(--clr-gray-2); }
.in-svc-reviews__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 32px; }
.in-svc-reviews__score { font-size: 18px; font-weight: var(--fw-7); color: var(--clr-heading); }
.in-svc-reviews__platforms { font-size: 13px; color: var(--clr-gray-5); }
.in-svc-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.in-svc-review { background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius); padding: 24px; }
.in-svc-review__stars { font-size: 13px; color: #f59e0b; letter-spacing: 2px; margin-bottom: 12px; }
.in-svc-review p { font-size: 14px; color: var(--clr-gray-7); line-height: 1.65; margin: 0 0 14px; font-style: italic; }
.in-svc-review__author { font-size: 12px; color: var(--clr-gray-5); }
.in-svc-review__author strong { color: var(--clr-heading); font-style: normal; }
@media (max-width: 768px) { .in-svc-reviews__grid { grid-template-columns: 1fr; } }
.in-blog-cats { padding: 16px 0; background: #fff; border-bottom: 1px solid var(--clr-gray-2); }
.in-blog-cats .in-container { display: flex; gap: 8px; overflow-x: auto; flex-wrap: wrap; }
.in-blog-cat-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: var(--fw-6); background: var(--clr-off-wh); border: 1px solid var(--clr-gray-2); color: var(--clr-gray-7); text-decoration: none; transition: all var(--tr); white-space: nowrap; }
.in-blog-cat-pill:hover, .in-blog-cat-pill--active { background: var(--clr-blue); border-color: var(--clr-blue); color: #fff; }
.in-blog-section { padding: 60px 0 80px; }
.in-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.in-blog-card { background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--tr); }
.in-blog-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.in-blog-card__cat { font-size: 11px; font-weight: var(--fw-7); color: var(--clr-blue); text-transform: uppercase; letter-spacing: .08em; }
.in-blog-card__title { font-size: 1.05rem; font-weight: var(--fw-7); color: var(--clr-navy); line-height: 1.4; flex: 1; }
.in-blog-card__title a { color: inherit; text-decoration: none; }
.in-blog-card__title a:hover { color: var(--clr-blue); }
.in-blog-card__excerpt { font-size: 13px; color: var(--clr-gray-6); line-height: 1.65; flex: 1; }
.in-blog-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--clr-gray-5); margin-top: auto; }
.in-blog-card__read { display: flex; align-items: center; gap: 4px; color: var(--clr-blue); font-weight: var(--fw-7); text-decoration: none; transition: color var(--tr); }
.in-blog-card__read:hover { color: var(--clr-blue-dk); }
.in-blog-service-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.in-blog-service-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--clr-gray-2); border-radius: 6px; font-size: 13px; color: var(--clr-gray-7); text-decoration: none; transition: all var(--tr); }
.in-blog-service-link:hover { border-color: var(--clr-blue); color: var(--clr-blue); }
.in-guide-article .in-container { padding-top: 40px; }
.in-guide-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; padding: 40px 0 80px; }
@media (max-width: 960px) { .in-guide-layout { grid-template-columns: 1fr; } }
.in-guide-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: var(--fw-7); color: var(--clr-heading); line-height: 1.25; margin: 12px 0 16px; }
.in-guide-meta { font-size: 13px; color: var(--clr-gray-5); margin-bottom: 32px; display: flex; gap: 8px; }
.in-guide-body { font-size: 15px; line-height: 1.8; color: var(--clr-gray-7); }
.in-guide-body h2 { font-size: 1.3rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 40px 0 14px; }
.in-guide-body h3 { font-size: 1.05rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 28px 0 10px; }
.in-guide-body p { margin: 0 0 18px; }
.in-guide-internal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 32px; background: var(--clr-off-wh); border-radius: var(--radius); margin-top: 40px; border: 1px solid var(--clr-gray-2); }
.in-guide-internal-links__heading { font-size: 13px; font-weight: 700; color: var(--clr-heading); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.in-guide-internal-links__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.in-guide-internal-links__list a { font-size: 13px; color: var(--clr-blue); text-decoration: none; }
.in-guide-internal-links__list a:hover { text-decoration: underline; }
@media (max-width: 600px) { .in-guide-internal-links { grid-template-columns: 1fr; gap: 24px; padding: 20px; } }
.in-guide-author { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--clr-off-wh); border-radius: var(--radius); margin-top: 40px; border: 1px solid var(--clr-gray-2); }
.in-guide-author__info { display: flex; flex-direction: column; gap: 2px; }
.in-guide-author__info strong { font-size: 14px; color: var(--clr-heading); }
.in-guide-author__info span { font-size: 12px; color: var(--clr-gray-5); }
.in-guide-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.in-guide-nav__item { padding: 16px 20px; border: 1px solid var(--clr-gray-2); border-radius: var(--radius); text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--tr); }
.in-guide-nav__item:hover { border-color: var(--clr-blue); }
.in-guide-nav__item span { font-size: 12px; color: var(--clr-gray-5); }
.in-guide-nav__item strong { font-size: 13px; color: var(--clr-heading); line-height: 1.4; }
.in-guide-nav__item--right { text-align: right; }
.in-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.in-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--clr-gray-2); border-radius: 6px; font-size: 13px; color: var(--clr-gray-7); text-decoration: none; transition: all var(--tr); }
.in-pagination .page-numbers.current { background: var(--clr-blue); border-color: var(--clr-blue); color: #fff; }
.in-pagination .page-numbers:hover { border-color: var(--clr-blue); color: var(--clr-blue); }

/* ============================================================
   SITEMAP
   ============================================================ */
.in-sitemap { padding: 60px 0 100px; }
.in-sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; }
.in-sitemap-section__title { font-size: 1rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--clr-blue); }
.in-sitemap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.in-sitemap-list > li > a { color: var(--clr-gray-7); text-decoration: none; display: block; padding: 5px 0; font-size: 14px; transition: color var(--tr); }
.in-sitemap-list > li > a:hover { color: var(--clr-blue); }
.in-sitemap-sub { list-style: none; padding: 0 0 4px 14px; margin: 0; border-left: 2px solid var(--clr-gray-2); }
.in-sitemap-sub li a { font-size: 12px; color: var(--clr-gray-5); text-decoration: none; display: block; padding: 3px 0; }
.in-sitemap-sub li a:hover { color: var(--clr-blue); }
.in-sitemap-service { margin-bottom: 14px; }
.in-sitemap-service__main { font-size: 14px; font-weight: var(--fw-6); color: var(--clr-blue); text-decoration: none; display: block; margin-bottom: 4px; }
.in-sitemap-service__main:hover { text-decoration: underline; }

/* ── Sitemap: Blog clusters ───────────────────────────────────── */
.in-sitemap-clusters { margin-top: 56px; }
.in-sitemap-clusters__heading { font-size: 1.25rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 0 0 32px; display: flex; align-items: center; gap: 12px; }
.in-sitemap-clusters__count { font-size: .8rem; font-weight: var(--fw-5); color: var(--clr-blue); background: #e8f2fc; border-radius: 20px; padding: 3px 12px; }
.in-sitemap-cluster { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--clr-gray-2); }
.in-sitemap-cluster:last-child { border-bottom: none; }
.in-sitemap-cluster--empty { opacity: .55; }
.in-sitemap-cluster__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.in-sitemap-cluster__title { font-size: .95rem; font-weight: var(--fw-7); color: var(--clr-heading); margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--clr-blue); }
.in-sitemap-cluster__badge { font-size: .75rem; font-weight: var(--fw-6); color: var(--clr-blue); background: #e8f2fc; border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.in-sitemap-cluster-list { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 32px; }
.in-sitemap-cluster-list li { break-inside: avoid; padding: 3px 0; }
.in-sitemap-cluster-list li a { font-size: 13px; color: var(--clr-gray-7); text-decoration: none; display: block; line-height: 1.4; transition: color var(--tr); }
.in-sitemap-cluster-list li a:hover { color: var(--clr-blue); }
.in-sitemap-cluster__empty { font-size: 13px; color: var(--clr-gray-5); margin: 0; }
@media (max-width: 900px) { .in-sitemap-cluster-list { columns: 2; } }
@media (max-width: 600px) { .in-sitemap-cluster-list { columns: 1; } }

/* ── Homepage Work Gallery ─────────────────────────────────────────────
   3-column grid. Each card uses aspect-ratio so all three images maintain
   the same proportions regardless of screen width — no mismatched heights.
   object-position: center 30% keeps subjects (workers, buildings) in frame
   rather than showing empty sky or floor when the top/bottom gets cropped.
   ───────────────────────────────────────────────────────────────────── */
.in-home-gallery {
    padding: 80px 0;
    background: var(--clr-off-wh);
}
.in-home-gallery__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.in-home-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.in-home-gallery__item {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--clr-gray-1);
    position: relative;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}
/* Placeholder state — shown via onerror JS */
.in-home-gallery__item--placeholder {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #e8edf3 0%, #d4dce8 100%);
}
.in-home-gallery__item--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
}
/* Image wrapper keeps consistent 4:3 crop across all three cards */
.in-home-gallery__img-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}
.in-home-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias toward upper portion: workers and buildings are rarely at the bottom */
    object-position: center 30%;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
    /* Slight sharpness boost for AI-generated images */
    filter: contrast(1.04) brightness(1.01);
}
.in-home-gallery__item:hover .in-home-gallery__img {
    transform: scale(1.05);
}
.in-home-gallery__caption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px 16px;
    background: var(--clr-white);
    flex: 1;
}
.in-home-gallery__caption-label {
    font-size: .9rem;
    font-weight: var(--fw-6);
    color: var(--clr-text);
    line-height: 1.3;
}
.in-home-gallery__caption-loc {
    font-size: .78rem;
    color: var(--clr-gray-6); /* was #7a8ba0 (3.48:1 fail) — #5a6a7a passes 4.5:1 on white */
}

@media (max-width: 960px) {
    .in-home-gallery__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 580px) {
    .in-home-gallery { padding: 56px 0; }
    .in-home-gallery__grid { grid-template-columns: 1fr; gap: 16px; }
    .in-home-gallery__head { margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE IMAGE — Full-width banner between hero and main content
   Used on all service pages and city pages.

   Layout intent:
   - Section background is #000 (same as hero) so image feels connected,
     not dropped in as a random content block
   - Image is truly full viewport width — no container wrapping it
   - A dark→transparent gradient at the image top bridges the dark hero
   - A white gradient at the bottom transitions cleanly into page content
   - max-height cap (560px) prevents oversized display on 1440px+ screens
   - aspect-ratio on the figure ensures perfect proportions at every width
   ═══════════════════════════════════════════════════════════════════════ */

.in-feature-img {
    /* Extends the dark hero downward — image floats within that context */
    background: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    /* Clear any float/inline residue from hero */
    display: block;
}

.in-feature-img__figure {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    /* 21:8 — cinematic widescreen, looks premium without too much height */
    aspect-ratio: 21 / 8;
    max-height: 520px;
    overflow: hidden;
    display: block;
    /* White fade at the bottom transitions into the page content below */
    background: #000;
}

/* Top gradient — dark→transparent, blends image into the hero above */
.in-feature-img__figure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .55) 0%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Bottom gradient — fades image into the white page content below */
.in-feature-img__figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(
        to top,
        #ffffff 0%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

.in-feature-img__img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Center-upper bias: construction subjects (workers, roofs, facades)
       live in the upper-center — not at the very bottom of the frame */
    object-position: center 30%;
    /* Subtle sharpness lift for AI-generated images */
    filter: contrast(1.04) brightness(1.02);
    /* Remove any browser default margin/gap */
    vertical-align: top;
}

/* ── Mid-page variant (second image, between sections) ───────────────── */
.in-feature-img--mid {
    /* Not black — sits within white page content */
    background: var(--clr-off-wh);
    padding: 56px 0;
}
.in-feature-img--mid .in-feature-img__figure {
    /* Shorter than hero feature — this is supporting content, not lead */
    aspect-ratio: 21 / 7;
    max-height: 380px;
    /* Inset on both sides — looks like a deliberate content section */
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--clr-gray-1);
}
/* Mid variant: subtle grey fade, not white */
.in-feature-img--mid .in-feature-img__figure::after {
    background: linear-gradient(
        to top,
        var(--clr-off-wh) 0%,
        transparent 100%
    );
}
/* Slightly lower position for mid-page detail shots */
.in-feature-img--mid .in-feature-img__img {
    object-position: center 40%;
}

/* ── Tablet (≤960px) ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .in-feature-img__figure {
        aspect-ratio: 16 / 7;
        max-height: 380px;
    }
    .in-feature-img--mid {
        padding: 40px 0;
    }
    .in-feature-img--mid .in-feature-img__figure {
        aspect-ratio: 16 / 6;
        max-height: 280px;
        margin: 0 var(--container-p);
    }
}

/* ── Mobile (≤640px) ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .in-feature-img__figure {
        /* Standard 16:9 on phones — familiar, comfortable proportion */
        aspect-ratio: 16 / 9;
        max-height: none;
    }
    /* Top/bottom gradients shorten on mobile to not over-fade small image */
    .in-feature-img__figure::before { height: 40px; }
    .in-feature-img__figure::after  { height: 50px; }

    .in-feature-img--mid {
        padding: 32px 0;
    }
    .in-feature-img--mid .in-feature-img__figure {
        aspect-ratio: 4 / 3;
        max-height: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* Shift down on mobile — avoids cutting heads in portrait crop */
    .in-feature-img__img {
        object-position: center 38%;
    }
}

/* ── Blog: Load More button ────────────────────────────────────────────── */
.in-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0 8px;
}
.in-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--clr-white);
    color: var(--clr-blue);
    font-size: .9rem;
    font-weight: var(--fw-6);
    border: 2px solid var(--clr-blue);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr);
    font-family: var(--font);
}
.in-load-more-btn:hover:not(:disabled) {
    background: var(--clr-blue);
    color: var(--clr-white);
    box-shadow: 0 4px 16px rgba(0,108,181,.22);
    transform: translateY(-2px);
}
.in-load-more-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.in-load-more-btn.is-loading .in-load-more-btn__icon {
    animation: in-spin .7s linear infinite;
}
.in-load-more-btn__icon {
    flex-shrink: 0;
    transition: transform .3s ease;
}
@keyframes in-spin {
    to { transform: rotate(360deg); }
}

/* ── content-visibility: auto on reliably below-fold sections ──────────
   Tells the browser it can skip rendering these sections until they are
   near the viewport. contain-intrinsic-size is a size hint that prevents
   layout shift when the section transitions from skipped to rendered.
   Applied ONLY to sections that are always well below the fold.
   ─────────────────────────────────────────────────────────────────────── */

/* Service pages — cities grid and reviews strip */
.in-svc-cities {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}
.in-svc-reviews {
    content-visibility: auto;
    contain-intrinsic-size: auto 260px;
}

/* City pages — sub-city area cards */
.in-city-areas {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* Homepage — areas/cities section (always below the fold) */
.in-areas {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Blog page — category cluster sections */
.in-blog-cluster-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 440px;
}

/* ── GUIDES TEASER ───────────────────────────────────────────── */
.in-guides-teaser {
    padding: var(--section-pad) 0 calc(var(--section-pad) + 16px);
    background: #fff;
    border-top: 3px solid var(--clr-blue);
    position: relative;
}

/* Section head — two-column: text left, CTA right */
.in-guides-teaser .in-services__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}
.in-guides-teaser .in-services__head > div { flex: 1; min-width: 260px; }

/* Override in-tag to look clean in this section */
.in-guides-teaser .in-tag {
    background: rgba(0,108,181,.1);
    color: var(--clr-blue);
    border: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}

/* Heading in this section */
.in-guides-teaser .in-h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 900;
    color: var(--clr-navy);
    line-height: 1.2;
    margin: 0 0 14px;
}

.in-guides-teaser .in-lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--clr-gray-7);
    max-width: 520px;
    margin: 0;
}

/* CTA button — solid blue, prominent */
.in-guides-teaser .in-services__head .in-btn {
    flex-shrink: 0;
    align-self: flex-end;
    background: var(--clr-blue);
    color: #fff;
    border: 2px solid var(--clr-blue);
    padding: 13px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--tr), transform .15s;
    white-space: nowrap;
}
.in-guides-teaser .in-services__head .in-btn:hover {
    background: var(--clr-blue-dk);
    border-color: var(--clr-blue-dk);
    transform: translateY(-1px);
}
.in-guides-teaser .in-services__head .in-btn--outline {
    background: var(--clr-blue);
    color: #fff;
    border-color: var(--clr-blue);
}
.in-guides-teaser .in-services__head .in-btn--outline:hover {
    background: var(--clr-blue-dk);
    border-color: var(--clr-blue-dk);
}

/* ── Blog card upgrades (only inside guides-teaser) ── */
.in-guides-teaser .in-blog-grid {
    gap: 20px;
}

.in-guides-teaser .in-blog-card {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 14px;
    padding: 26px 24px 22px;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(10,31,61,.04);
    transition: box-shadow .2s, transform .18s, border-color .18s;
    position: relative;
    overflow: hidden;
}
.in-guides-teaser .in-blog-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--clr-blue);
    opacity: 0;
    transition: opacity .2s;
}
.in-guides-teaser .in-blog-card:hover {
    box-shadow: 0 10px 32px rgba(10,31,61,.10);
    transform: translateY(-3px);
    border-color: #b8cce0;
}
.in-guides-teaser .in-blog-card:hover::before {
    opacity: 1;
}

/* Category pill */
.in-guides-teaser .in-blog-card__cat {
    display: inline-block;
    background: rgba(0,108,181,.08);
    color: var(--clr-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 4px;
}

/* Card title */
.in-guides-teaser .in-blog-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: #0d1f3c;
    line-height: 1.38;
}
.in-guides-teaser .in-blog-card__title a {
    color: inherit;
    text-decoration: none;
}
.in-guides-teaser .in-blog-card__title a:hover {
    color: var(--clr-blue);
}

/* Excerpt */
.in-guides-teaser .in-blog-card__excerpt {
    font-size: 13.5px;
    line-height: 1.68;
    color: #5a6a7a;
}

/* Meta row — date + read link */
.in-guides-teaser .in-blog-card__meta {
    padding-top: 14px;
    border-top: 1px solid #edf0f5;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #8898aa;
}

/* Read guide link — pill style */
.in-guides-teaser .in-blog-card__read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--clr-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 20px;
    text-decoration: none;
    letter-spacing: .03em;
    transition: background .15s, transform .12s;
}
.in-guides-teaser .in-blog-card__read:hover {
    background: var(--clr-blue-dk);
    transform: translateX(2px);
}
.in-guides-teaser .in-blog-card__read svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.5;
}

/* Responsive */
@media (max-width: 768px) {
    .in-guides-teaser .in-services__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .in-guides-teaser .in-services__head .in-btn {
        width: 100%;
        justify-content: center;
    }
    .in-guides-teaser .in-h2 {
        font-size: 1.6rem;
    }
}

/* ============================================================
   PORTFOLIO FOOTER — fix missing gap between CTA buttons
   ============================================================ */
.in-portfolio__foot {
    gap: 12px;
}

/* ============================================================
   HOME GALLERY — expand to 6-item wrap grid
   ============================================================ */
@media (min-width: 961px) {
    .in-home-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   HOMEPAGE FAQ SECTION
   ============================================================ */
.in-home-faq {
    padding: var(--section-pad) 0;
    background: var(--clr-off-wh);
    border-top: 1px solid var(--clr-gray-2);
}

.in-home-faq__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
}

.in-home-faq__head .in-lead {
    margin-top: 14px;
}

.in-home-faq__head .in-lead a {
    color: var(--clr-blue);
    font-weight: var(--fw-6);
    text-decoration: none;
}

.in-home-faq__head .in-lead a:hover {
    text-decoration: underline;
}

.in-home-faq__grid {
    max-width: 840px;
    margin: 0 auto;
}

.in-home-faq__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 40px;
}

.in-home-faq__item {
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}

.in-home-faq__item:hover {
    border-color: var(--clr-blue);
}

.in-home-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 15px;
    font-weight: var(--fw-7);
    color: var(--clr-text);
    text-align: left;
    line-height: 1.4;
    transition: background .15s, color .15s;
}

.in-home-faq__q:hover {
    background: var(--clr-off-wh);
    color: var(--clr-blue);
}

.in-home-faq__q[aria-expanded="true"] {
    color: var(--clr-blue);
    background: var(--clr-blue-lt);
}

.in-home-faq__chevron {
    flex-shrink: 0;
    transition: transform .25s ease;
    color: var(--clr-gray-5);
}

.in-home-faq__q[aria-expanded="true"] .in-home-faq__chevron {
    transform: rotate(180deg);
    color: var(--clr-blue);
}

.in-home-faq__a {
    padding: 0 22px 20px;
    border-top: 1px solid var(--clr-gray-1);
}

.in-home-faq__a p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--clr-gray-7);
    margin: 0;
    padding-top: 16px;
}

/* FAQ CTA row */
.in-home-faq__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 12px;
    padding: 22px 28px;
}

.in-home-faq__cta p {
    font-size: 15px;
    font-weight: var(--fw-6);
    color: var(--clr-gray-7);
    margin: 0;
}

.in-home-faq__cta-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .in-home-faq__q { font-size: 14px; padding: 16px 18px; }
    .in-home-faq__a { padding: 0 18px 16px; }
    .in-home-faq__cta { flex-direction: column; align-items: flex-start; }
    .in-home-faq__cta-btns { width: 100%; flex-direction: column; }
    .in-home-faq__cta-btns .in-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FAQ SCHEMA — JSON-LD injected via PHP
   ============================================================ */

/* ============================================================
   BEFORE / AFTER SLIDER  (.in-ba)
   ============================================================ */
.in-ba {
    padding: 80px 0;
    background: var(--clr-off-wh);
}
.in-ba__head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.in-ba__head .in-tag { margin-bottom: 10px; }
.in-ba__head .in-lead { margin-top: 12px; color: var(--clr-gray-6); }

.in-ba__tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.in-ba__tab {
    padding: 10px 24px;
    border-radius: 100px;
    border: 2px solid var(--clr-gray-2);
    background: #fff;
    font-size: 14px;
    font-weight: var(--fw-6);
    color: var(--clr-gray-6);
    cursor: pointer;
    transition: all .18s ease;
}
.in-ba__tab:hover { border-color: var(--clr-blue); color: var(--clr-blue); }
.in-ba__tab--active {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
    color: #fff;
}

.in-ba__panels { position: relative; }
.in-ba__panel { display: none; }
.in-ba__panel--active { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: center; }

/* Slider container */
.in-ba__slider {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.15);
    cursor: ew-resize;
    user-select: none;
    touch-action: pan-y;
    aspect-ratio: var(--ba-w, 800) / var(--ba-h, 530);
}
.in-ba__img { position: absolute; inset: 0; overflow: hidden; }
.in-ba__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.in-ba__img--before { z-index: 1; }
.in-ba__img--after  {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    transition: none;
}

.in-ba__badge {
    position: absolute;
    top: 14px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: var(--fw-7);
    text-transform: uppercase;
    letter-spacing: .06em;
    z-index: 5;
    pointer-events: none;
}
.in-ba__badge--before { left: 14px; background: rgba(0,0,0,.55); color: #fff; }
.in-ba__badge--after  { right: 14px; background: var(--clr-blue); color: #fff; }

/* Drag handle */
.in-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    outline: none;
}
.in-ba__handle-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.5);
}
.in-ba__handle-knob {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--clr-blue);
}
.in-ba__handle:focus .in-ba__handle-knob {
    box-shadow: 0 0 0 3px var(--clr-blue), 0 2px 12px rgba(0,0,0,.3);
}

/* Meta panel */
.in-ba__meta {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.in-ba__meta-title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: var(--fw-8);
    color: var(--clr-navy);
    margin: 0 0 10px;
    line-height: 1.2;
}
.in-ba__meta-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.in-ba__meta-details span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--clr-gray-6);
    font-weight: var(--fw-5);
}
.in-ba__meta-details svg { flex-shrink: 0; color: var(--clr-blue); }
.in-ba__meta-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--clr-gray-7);
    margin: 0;
}

/* Financing / warranty row */
.in-ba__financing {
    margin-top: 40px;
    padding: 24px 32px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--clr-gray-2);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.in-ba__financing-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--fw-7);
    color: var(--clr-navy);
    white-space: nowrap;
}
.in-ba__financing-badge svg { color: var(--clr-blue); flex-shrink: 0; }
.in-ba__financing p {
    font-size: 14px;
    color: var(--clr-gray-6);
    margin: 0;
    flex: 1;
    min-width: 200px;
}
.in-ba__financing a { color: var(--clr-blue); }
.in-ba__warranty-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #f0fff4;
    border: 1px solid #86efac;
    border-radius: 100px;
    font-size: 13px;
    font-weight: var(--fw-6);
    color: #166534;
    white-space: nowrap;
}
.in-ba__warranty-badge svg { color: #16a34a; flex-shrink: 0; }

@media (max-width: 900px) {
    .in-ba__panel--active { grid-template-columns: 1fr; }
    .in-ba__slider { max-width: 100%; }
}
@media (max-width: 640px) {
    .in-ba { padding: 56px 0; }
    .in-ba__slider { border-radius: 8px; max-width: 100%; }
    .in-ba__financing { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .in-ba__financing-badge { font-size: 14px; }
    .in-ba__warranty-badge { font-size: 12px; }
}

/* ============================================================
   BLOG CARD THUMBNAILS
   ============================================================ */
.in-blog-card__thumb-wrap {
    display: block;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    margin: -1px -1px 0;
    aspect-ratio: 5 / 3;
    background: var(--clr-gray-1);
}
.in-blog-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .32s ease;
}
.in-blog-card:hover .in-blog-card__thumb { transform: scale(1.04); }
.in-blog-featured__card .in-blog-card__thumb-wrap {
    border-radius: 8px 8px 0 0;
    aspect-ratio: 16 / 9;
    margin: 0 0 16px;
}

/* ============================================================
   EXIT-INTENT POPUP
   ============================================================ */
.in-exit-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.in-exit-popup[hidden] { display: none; }

.in-exit-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(3px);
    cursor: pointer;
}
.in-exit-popup__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    padding: 40px 44px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    animation: in-popup-in .28s cubic-bezier(.22,1,.36,1);
}
@keyframes in-popup-in {
    from { opacity: 0; transform: scale(.93) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.in-exit-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--clr-gray-1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray-6);
    transition: background .15s;
}
.in-exit-popup__close:hover { background: var(--clr-gray-2); }
.in-exit-popup__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--clr-blue-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.in-exit-popup__title {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: var(--fw-8);
    color: var(--clr-navy);
    margin: 0 0 10px;
    line-height: 1.2;
}
.in-exit-popup__sub {
    font-size: 15px;
    color: var(--clr-gray-6);
    margin: 0 0 18px;
    line-height: 1.6;
}
.in-exit-popup__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    gap: 7px;
}
.in-exit-popup__bullets li {
    font-size: 14px;
    font-weight: var(--fw-5);
    color: var(--clr-gray-7);
}
.in-exit-popup__cta { width: 100%; justify-content: center; margin-bottom: 14px; }
.in-exit-popup__call {
    display: block;
    font-size: 14px;
    color: var(--clr-blue);
    text-decoration: none;
    font-weight: var(--fw-6);
}
.in-exit-popup__call:hover { text-decoration: underline; }

/* Lead capture form inside exit popup */
.in-exit-popup__form { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 12px; }
.in-exit-popup__input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--clr-gray-3);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--clr-ink);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.in-exit-popup__input:focus { outline: none; border-color: var(--clr-brand); }
.in-exit-popup__input::placeholder { color: var(--clr-gray-5); }
.in-exit-popup__error {
    font-size: 13px;
    color: #dc2626;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

@media (max-width: 520px) {
    .in-exit-popup__box { padding: 28px 22px; }
    .in-exit-popup__title { font-size: 20px; }
}

/* ============================================================
   SOCIAL PROOF TOAST  (.in-toast)
   ============================================================ */
.in-toast {
    position: fixed;
    bottom: 90px;
    left: 20px;
    z-index: 9000;
    max-width: 300px;
    pointer-events: auto;
}
.in-toast[hidden] { display: none !important; }
.in-toast__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.16);
    border-left: 3px solid var(--clr-blue);
    animation: in-toast-slide .3s cubic-bezier(.22,1,.36,1);
    position: relative;
}
@keyframes in-toast-slide {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.in-toast.is-hiding .in-toast__inner {
    animation: in-toast-out .25s ease forwards;
}
@keyframes in-toast-out {
    to { opacity: 0; transform: translateX(-16px); }
}
.in-toast__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--clr-blue);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: var(--fw-7);
    color: #fff;
}
.in-toast__body { flex: 1; min-width: 0; }
.in-toast__name {
    font-size: 13px;
    font-weight: var(--fw-7);
    color: var(--clr-navy);
    margin-bottom: 2px;
}
.in-toast__action {
    font-size: 12px;
    color: var(--clr-gray-6);
    line-height: 1.4;
}
.in-toast__time {
    font-size: 11px;
    color: var(--clr-gray-5);
    margin-top: 4px;
}
.in-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-gray-5);
    padding: 2px;
    display: flex;
    align-items: center;
}
.in-toast__close:hover { color: var(--clr-gray-7); }

@media (max-width: 640px) {
    .in-toast { max-width: calc(100vw - 40px); bottom: 80px; }
}

/* ============================================================
   STICKY CTA — PULSE ANIMATION + MOBILE CALL VARIANT
   ============================================================ */
.in-sticky-cta {
    animation: in-cta-pulse 3s ease-in-out infinite;
}
@keyframes in-cta-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,108,181,.5); }
    50%       { box-shadow: 0 4px 32px rgba(0,108,181,.8), 0 0 0 6px rgba(0,108,181,.15); }
}

/* ============================================================
   SMOOTH SCROLL + CARD HOVER POLISH
   ============================================================ */
html { scroll-behavior: smooth; }

.in-service-card { transition: transform .22s ease, box-shadow .22s ease; }
.in-service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.12); }

.in-blog-card { transition: transform .2s ease, box-shadow .2s ease; }
.in-blog-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.1); }

.in-review-card { transition: transform .2s ease, box-shadow .2s ease; }
.in-review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.1); }

/* Hero WebP applied inline above in section 8 */

/* ============================================================
   AVAILABILITY BAR
   ============================================================ */
.in-availability-bar {
    background: linear-gradient(90deg, #003d6b 0%, #006cb5 100%);
    color: #fff;
    padding: 12px 20px;
    font-size: .875rem;
}
.in-availability-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 500;
}
.in-availability-bar__dot {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(74,222,128,.25);
    animation: in-dot-pulse 2s ease-in-out infinite;
}
@keyframes in-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
    50%       { box-shadow: 0 0 0 6px rgba(74,222,128,.1); }
}
.in-availability-bar strong { color: #fbbf24; }
.in-availability-bar a { color: #93c5fd; text-decoration: underline; }

/* ============================================================
   COST CALCULATOR
   ============================================================ */
.in-calc {
    padding: 80px 0;
    background: #f8fafc;
}
.in-calc__head { text-align: center; margin-bottom: 40px; }

.in-calc__widget {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

/* Step nav dots */
.in-calc__steps-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}
.in-calc__step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    flex: 1;
}
.in-calc__step-dot::before {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: #e2e8f0;
    transition: background .3s;
}
.in-calc__step-dot:last-child::before { display: none; }
.in-calc__step-dot.is-done::before { background: var(--clr-blue); }

.in-calc__step-dot span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--clr-gray-5);
    font-size: .8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s;
    letter-spacing: .02em;
    z-index: 1;
    position: relative;
}
.in-calc__step-dot small {
    font-size: .7rem;
    color: var(--clr-gray-4);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .25s;
}
.in-calc__step-dot.is-active span {
    background: var(--clr-blue);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0,108,181,.15);
}
.in-calc__step-dot.is-active small { color: var(--clr-blue); }
.in-calc__step-dot.is-done span {
    background: #16a34a;
    color: #fff;
}
.in-calc__step-dot.is-done small { color: #16a34a; }

/* Progress bar */
.in-calc__progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}
.in-calc__progress-bar {
    height: 100%;
    background: var(--clr-blue);
    border-radius: 99px;
    transition: width .4s ease;
}
.in-calc__step-label {
    font-size: .8rem;
    color: var(--clr-gray-5);
    margin-bottom: 24px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Card grid */
.in-calc__grid {
    display: grid;
    gap: 12px;
    margin-bottom: 8px;
}
.in-calc__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .in-calc__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .in-calc__grid--3 { grid-template-columns: 1fr; } }

.in-calc__card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.in-calc__card:hover {
    border-color: var(--clr-blue);
    background: #f0f7ff;
    transform: translateY(-2px);
}
.in-calc__card.is-selected {
    border-color: var(--clr-blue);
    background: #ebf5ff;
}
.in-calc__card-icon { color: var(--clr-blue); line-height: 1; }
.in-calc__card-label { font-weight: 700; font-size: .9rem; color: var(--clr-gray-8); }
.in-calc__card-sub   { font-size: .78rem; color: var(--clr-gray-5); }

/* Scope cards (JS-generated) */
.in-calc__scope-card {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: #fff;
    text-align: left;
}
.in-calc__scope-card:hover { border-color: var(--clr-blue); background: #f0f7ff; }
.in-calc__scope-card.is-selected { border-color: var(--clr-blue); background: #ebf5ff; }
.in-calc__scope-name { font-weight: 700; font-size: .9rem; color: var(--clr-gray-8); }
.in-calc__scope-sub  { font-size: .78rem; color: var(--clr-gray-5); margin-top: 2px; }

/* Back button */
.in-calc__back {
    background: none;
    border: none;
    color: var(--clr-blue);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: 16px;
}
.in-calc__back:hover { text-decoration: underline; }

/* Result */
.in-calc__result { text-align: center; padding: 8px 0; }
.in-calc__result-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--clr-gray-5);
    margin-bottom: 8px;
}
.in-calc__result-range {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--clr-blue);
    line-height: 1.1;
    font-family: var(--font-serif);
}
.in-calc__result-note {
    font-size: .88rem;
    color: var(--clr-gray-5);
    margin: 10px auto 20px;
    max-width: 440px;
}
.in-calc__result-disclaimer {
    font-size: .76rem;
    color: var(--clr-gray-4);
    margin: 16px auto;
    max-width: 480px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    justify-content: center;
    text-align: left;
}
.in-calc__result-cta { margin: 0 auto 12px; display: inline-flex; }
.in-calc__result-call {
    display: block;
    margin-top: 10px;
    font-size: .85rem;
    color: var(--clr-blue);
    text-decoration: none;
}
.in-calc__result-call:hover { text-decoration: underline; }

/* Trust row */
.in-calc__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
    font-size: .82rem;
    color: var(--clr-gray-6);
    font-weight: 600;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.in-compare {
    padding: 80px 0;
    background: #fff;
}
.in-compare__head { text-align: center; margin-bottom: 40px; }

.in-compare__table {
    max-width: 740px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    font-size: .92rem;
}
.in-compare__head-row {
    display: grid;
    grid-template-columns: 1fr 120px 160px;
    background: #1e3a5f;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.in-compare__head-row > div { padding: 14px 18px; }
.in-compare__col-us, .in-compare__col-other { text-align: center; }
.in-compare__col-us { background: var(--clr-blue); }
.in-compare__col-us-badge { color: #fff; }

.in-compare__row {
    display: grid;
    grid-template-columns: 1fr 120px 160px;
    border-bottom: 1px solid #edf2f7;
}
.in-compare__row:last-child { border-bottom: none; }
.in-compare__row:nth-child(odd) > div { background: #f8fafc; }
.in-compare__row:hover > div { background: #f0f7ff; }
.in-compare__row > div { padding: 13px 18px; display: flex; align-items: center; gap: 6px; }
.in-compare__feature { font-weight: 600; color: var(--clr-gray-8); }
.in-compare__us, .in-compare__other { justify-content: center; font-size: .88rem; }

.in-compare__check { flex-shrink: 0; }
.in-compare__warn  { flex-shrink: 0; }
.in-compare__x     { flex-shrink: 0; }

.in-compare__cta {
    text-align: center;
    margin-top: 32px;
}

@media (max-width: 600px) {
    .in-compare__head-row,
    .in-compare__row { grid-template-columns: 1fr 80px 100px; font-size: .8rem; }
    .in-compare__head-row > div,
    .in-compare__row > div { padding: 10px 10px; }
}

/* ============================================================
   GUIDE: TOC + MID-ARTICLE CTA + META
   ============================================================ */
.in-guide-toc {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 28px;
    font-size: .9rem;
}
.in-guide-toc__title {
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--clr-blue);
    margin-bottom: 10px;
}
.in-guide-toc ol {
    margin: 0;
    padding-left: 20px;
}
.in-guide-toc li { margin-bottom: 4px; }
.in-guide-toc a { color: var(--clr-gray-7); text-decoration: none; }
.in-guide-toc a:hover { color: var(--clr-blue); text-decoration: underline; }

.in-guide-mid-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(90deg, #003d6b 0%, #006cb5 100%);
    border-radius: 12px;
    padding: 22px 26px;
    margin: 36px 0;
    flex-wrap: wrap;
}
.in-guide-mid-cta__text {
    flex: 1;
    min-width: 200px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.in-guide-mid-cta__text strong { font-size: 1rem; }
.in-guide-mid-cta__text span   { font-size: .875rem; opacity: .9; }
.in-guide-mid-cta .in-btn { white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   GALLERY FILTERS
   ============================================================ */
.in-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}
.in-gallery-filter {
    padding: 8px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 99px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: var(--clr-gray-6);
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}
.in-gallery-filter:hover {
    border-color: var(--clr-blue);
    color: var(--clr-blue);
}
.in-gallery-filter.is-active {
    border-color: var(--clr-blue);
    background: var(--clr-blue);
    color: #fff;
}

.in-home-gallery__item {
    transition: opacity .25s, transform .25s;
}
.in-home-gallery__item.is-hidden {
    display: none;
}

/* ===================================================================
   ████  IRONNEST · LIGHT LUXURY LAYER  ████
   Clean blue · white · grey (from the logo), lively micro-motion, and
   a lazy-loading per-word text reveal. Appended last so it wins.
   =================================================================== */

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(0,108,181,.18); color: var(--clr-navy); }

/* ── Typography — Fraunces display, refined hierarchy ───────────── */
.in-h1, .in-h2, .in-h3, .in-hero__heading { font-family: var(--font-serif); letter-spacing: -.015em; }
.in-h2 { font-weight: var(--fw-7); font-size: clamp(30px,4.2vw,46px); color: var(--clr-navy); }
.in-h2 em, .in-hero__heading em { color: var(--clr-blue); font-style: italic; }

/* Eyebrow tag — blue with a leading rule */
.in-tag { color: var(--clr-blue); letter-spacing: .2em; font-weight: var(--fw-7); }
.in-tag::before { content:""; display:inline-block; width:22px; height:1px; background:var(--clr-blue); vertical-align:middle; margin-right:9px; opacity:.7; }

/* ── Header — clean white, blue accents ─────────────────────────── */
.in-header { background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--clr-gray-2); }
.in-header.is-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 6px 28px rgba(13,38,59,.10); }

/* ── Buttons — lively blue ──────────────────────────────────────── */
.in-btn { border-radius: 10px; }
.in-btn--primary { background: linear-gradient(180deg, var(--clr-blue-br), var(--clr-blue)); border-color: transparent; box-shadow: 0 8px 20px rgba(0,108,181,.26); }
.in-btn--primary:hover { background: linear-gradient(180deg, var(--clr-blue), var(--clr-blue-dk)); box-shadow: 0 12px 30px rgba(0,108,181,.4); transform: translateY(-2px); }
.in-btn--outline-dark:hover { border-color: var(--clr-blue); color: var(--clr-blue); transform: translateY(-1px); }

/* ── Cards — soft premium shadow + lively hover lift, blue accent ─ */
.in-service-card, .in-project-card, .in-review-card, .in-platform-card,
.in-blog-card, .in-blog-featured__card, .in-svc-review, .in-material-card,
.in-sidebar-card, .in-req-step, .in-stat {
    border: 1px solid var(--clr-gray-2);
    box-shadow: var(--shadow);
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.in-service-card:hover, .in-project-card:hover, .in-blog-card:hover,
.in-blog-featured__card:hover, .in-svc-review:hover, .in-platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0,108,181,.35);
}
.in-service-card__icon { background: var(--clr-blue-lt); color: var(--clr-blue); }

/* Links come alive */
.in-service-card__link, .in-blog-card a, .entry-content a { transition: color var(--tr); }
.in-service-card__link:hover { color: var(--clr-blue-dk); }

/* ===================================================================
   LAZY TEXT-REVEAL  (JS splits .lux-rt into .lux-w word spans)
   Per-word blur-up + fade as each heading scrolls into view.
   =================================================================== */
.lux-rt .lux-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.6em);
    filter: blur(7px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1),
                transform .8s cubic-bezier(.2,.7,.2,1),
                filter .7s ease;
    transition-delay: var(--lux-d, 0ms);
    will-change: opacity, transform, filter;
}
.lux-rt.is-in .lux-w { opacity: 1; transform: none; filter: none; }

.lux-fade { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.lux-fade.is-in { opacity: 1; transform: none; }

.lux-img { opacity: 0; transform: scale(1.04); filter: blur(10px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1s ease; }
.lux-img.is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    .lux-rt .lux-w, .lux-fade, .lux-img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ── Hero — premium directional scrim (dark-left for legibility → bright-right
   so the California home shows) + soft brand-blue glow top-right ───────────── */
.in-hero {
    background-image:
        linear-gradient(100deg, rgba(11,21,33,.90) 0%, rgba(11,21,33,.62) 42%, rgba(11,21,33,.16) 100%),
        radial-gradient(120% 95% at 88% 16%, rgba(0,108,181,.32), transparent 56%),
        url('/wp-content/uploads/2026/04/header.png') !important;
    background-image:
        linear-gradient(100deg, rgba(11,21,33,.90) 0%, rgba(11,21,33,.62) 42%, rgba(11,21,33,.16) 100%),
        radial-gradient(120% 95% at 88% 16%, rgba(0,108,181,.32), transparent 56%),
        image-set(
            url('/wp-content/uploads/2026/04/header.webp') type('image/webp'),
            url('/wp-content/uploads/2026/04/header.png')  type('image/png')
        ) !important;
}
/* Phones get a 1000px hero instead of the 1920px one. It is the LCP element,
   and on a 390px viewport the large file spends its bandwidth on pixels the
   screen cannot show. Declared after the desktop rule so it wins on width. */
@media (max-width: 768px) {
    .in-hero {
        background-image:
            linear-gradient(100deg, rgba(11,21,33,.90) 0%, rgba(11,21,33,.62) 42%, rgba(11,21,33,.16) 100%),
            radial-gradient(120% 95% at 88% 16%, rgba(0,108,181,.32), transparent 56%),
            url('/wp-content/uploads/2026/04/header-mobile.webp') !important;
    }
}

.in-hero__heading { text-shadow: 0 2px 26px rgba(0,0,0,.42); }
.in-hero__sub { color: rgba(255,255,255,.92); }

/* Section eyebrow + heading breathing room for an editorial, premium feel */
.in-section, .in-about, .in-services, .in-process { scroll-margin-top: 90px; }
/* Trust bar — keep it brand-blue and crisp */
.in-trust-bar { background: var(--clr-blue); }
.in-trust-bar__item, .in-trust-bar__sep { color: rgba(255,255,255,.95); }

/* ── Sticky mobile bottom bar (Call + Free Estimate) — conversion ──── */
.in-mobile-bar { display: none; }
@media (max-width: 768px) {
    .in-mobile-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 350;
        display: flex; gap: 10px;
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.97);
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
        border-top: 1px solid var(--clr-gray-2);
        box-shadow: 0 -8px 28px rgba(13,38,59,.14);
        /* Out of the way until the reader is a third of the way down; main.js
           adds .is-on. Translated rather than hidden so it slides rather than
           blinks, and pointer-events keeps it untappable while it is away. */
        transform: translateY(105%);
        pointer-events: none;
        transition: transform .28s cubic-bezier(.22,.61,.36,1);
    }
    .in-mobile-bar.is-on {
        transform: translateY(0);
        pointer-events: auto;
    }
    .in-mobile-bar__btn {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 14px 8px; border-radius: 11px;
        font-weight: var(--fw-7); font-size: 15px; line-height: 1;
        transition: transform var(--tr), box-shadow var(--tr);
    }
    .in-mobile-bar__btn:active { transform: scale(.97); }
    .in-mobile-bar__btn--call { color: var(--clr-blue); border: 1.5px solid var(--clr-blue); background: var(--clr-blue-lt); }
    .in-mobile-bar__btn--primary { color: #fff; background: linear-gradient(180deg, var(--clr-blue-br), var(--clr-blue)); box-shadow: 0 6px 16px rgba(0,108,181,.32); }
    /* room so the bottom bar never covers footer content */
    body { padding-bottom: 70px; }
    /* Keep whatever floats bottom-right clear of the bar. The fabricated
       activity toast that used to sit here has been removed. */
    .in-social-proof { bottom: 84px !important; }
}

/* ===================================================================
   LUXURY JOBBER ESTIMATE CARD — single, unified estimate experience
   (request-estimate page + homepage #estimate section)
   =================================================================== */
.in-jobber-card {
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(13,38,59,.16);
    overflow: hidden;
}
.in-jobber-card__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; color: #fff;
    background: linear-gradient(135deg, var(--clr-blue-br), var(--clr-blue-dk));
}
.in-jobber-card__header-left { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-7); font-size: 15px; }
.in-jobber-card__dot { width: 9px; height: 9px; border-radius: 50%; background: #7CFFB2; box-shadow: 0 0 0 4px rgba(124,255,178,.25); }
.in-jobber-card__secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-6); opacity: .92; }
.in-jobber-card__body { position: relative; background: #fff; }
.in-jobber-card__iframe { width: 100%; height: 1180px; border: 0; display: block; background: #fff;
    overflow: hidden; transition: height .28s ease, opacity .3s ease; }
.in-jobber-card__foot {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 18px; font-size: 12.5px; color: var(--clr-gray-6);
    background: var(--clr-off-wh); border-top: 1px solid var(--clr-gray-2);
}
.in-jobber-card__foot svg { color: var(--clr-blue); }

/* Homepage #estimate embed — match the same premium frame */
.in-estimate-embed__frame-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(13,38,59,.16); border: 1px solid var(--clr-gray-2); }
.in-estimate-embed__frame-header { background: linear-gradient(135deg, var(--clr-blue-br), var(--clr-blue-dk)); color: #fff; }
.in-estimate-embed__iframe { width: 100%; height: 1180px; border: 0; display: block; background: #fff;
    overflow: hidden; transition: height .28s ease, opacity .3s ease; }

/* ── Loading skeleton — shown until Jobber reports its height ─────────── */
.in-jobber-card__body.is-loading .in-jobber-card__iframe,
.in-jobber-card__body.is-loading .in-estimate-embed__iframe { opacity: 0; }
.in-jobber-card__body.is-loading .in-jobber-skeleton { display: flex; }
.in-jobber-skeleton {
    display: none; position: absolute; inset: 0; z-index: 1;
    flex-direction: column; gap: 16px; padding: 38px 30px; background: #fff;
}
.in-jobber-skeleton span {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafd 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: in-jobber-shimmer 1.4s ease infinite;
}
.in-jobber-skeleton__bar        { height: 14px; }
.in-jobber-skeleton__field      { height: 46px; }
.in-jobber-skeleton__field--tall{ height: 110px; }
@keyframes in-jobber-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
    .in-jobber-skeleton span { animation: none; }
    .in-jobber-card__iframe, .in-estimate-embed__iframe { transition: none; }
}

/* The form is now full-height, so it is the intro column that should follow
   the reader instead of leaving a tall empty gutter beside the form. */
.in-req-form-wrap { position: static; align-self: start; }
@media (min-width: 1025px) {
    .in-req-hero__text { position: sticky; top: 104px; align-self: start; }
}

@media (max-width: 768px) {
    .in-jobber-card__iframe, .in-estimate-embed__iframe { height: 1450px; }
    .in-jobber-skeleton { padding: 26px 18px; }
}

/* ── City pages — unique "Building & Permits" local-knowledge section ─── */
.in-city-local { padding: var(--section-pad) 0; background: var(--clr-off-wh); }
.in-city-local__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px;
}
.in-city-local__card {
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg);
    padding: 30px 28px; box-shadow: var(--shadow);
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.in-city-local__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(0,108,181,.3); }
.in-city-local__icon {
    width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--clr-blue-lt); color: var(--clr-blue); margin-bottom: 18px;
}
.in-city-local__title { font-size: 18px; font-weight: var(--fw-7); color: var(--clr-navy); margin-bottom: 10px; line-height: 1.3; }
.in-city-local__body { font-size: 15px; line-height: 1.7; color: var(--clr-gray-7); }
@media (max-width: 960px) { .in-city-local__grid { grid-template-columns: 1fr; } }

/* Honeypot — off-screen for bots, invisible and unreachable for people. */
.in-exit-popup__hp {
    position: absolute !important; left: -9999px !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   REGIONAL COST ESTIMATOR
   ═══════════════════════════════════════════════════════════════════ */
.in-est {
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(13,38,59,.10); padding: 30px 30px 26px; max-width: 900px; margin: 0 auto;
}
.in-est__steps { display: flex; gap: 6px; margin-bottom: 16px; }
.in-est__dot {
    flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px;
    background: var(--clr-off-wh); color: var(--clr-gray-5); transition: background .2s, color .2s;
}
.in-est__dot span   { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.in-est__dot small  { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.in-est__dot.is-done   { background: #e8f2fb; color: var(--clr-blue); }
.in-est__dot.is-active { background: var(--clr-blue); color: #fff; }

.in-est__progress { height: 4px; border-radius: 4px; background: var(--clr-gray-2); overflow: hidden; }
.in-est__progress-bar { height: 100%; background: var(--clr-blue); transition: width .3s ease; }
.in-est__label { font-size: 12.5px; font-weight: 600; color: var(--clr-gray-5); margin: 10px 0 20px; }

.in-est__q    { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.in-est__hint { font-size: 13.5px; color: var(--clr-gray-6); margin: 0 0 18px; max-width: 62ch; line-height: 1.6; }

/* Step 1 — trades */
.in-est__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.in-est__card {
    display: flex; align-items: center; min-height: 58px; padding: 12px 16px; text-align: left;
    background: #fff; border: 1.5px solid var(--clr-gray-2); border-radius: 10px;
    font-size: 14.5px; font-weight: 650; color: var(--clr-ink); cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.in-est__card:hover { border-color: var(--clr-blue); box-shadow: 0 8px 20px rgba(0,108,181,.12); transform: translateY(-2px); }

/* Step 2 — ZIP */
.in-est__zip-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.in-est__zip {
    width: 190px; padding: 13px 16px; font-size: 17px; font-weight: 700; letter-spacing: .06em;
    border: 1.5px solid var(--clr-gray-2); border-radius: 10px; background: #fff; color: var(--clr-ink);
}
.in-est__zip:focus { outline: none; border-color: var(--clr-blue); box-shadow: 0 0 0 3px rgba(0,108,181,.15); }
.in-est__zip-msg { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; min-height: 1.2em; max-width: 60ch; }
.in-est__zip-msg.is-ok   { color: #15803d; }
.in-est__zip-msg.is-warn { color: #b45309; }

/* Step 3 — options */
.in-est__options { display: flex; flex-direction: column; gap: 9px; }
.in-est__option {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: 100%; padding: 14px 18px; text-align: left; cursor: pointer;
    background: #fff; border: 1.5px solid var(--clr-gray-2); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.in-est__option:hover { border-color: var(--clr-blue); box-shadow: 0 6px 18px rgba(0,108,181,.10); }
.in-est__option-main  { display: block; min-width: 0; }
.in-est__option-label { display: block; font-size: 15px; font-weight: 700; color: var(--clr-ink); }
.in-est__option-note  { display: block; font-size: 12.5px; color: var(--clr-gray-6); margin-top: 3px; line-height: 1.5; }
.in-est__option-rate  {
    flex: none; font-size: 13.5px; font-weight: 800; color: var(--clr-blue);
    background: #e8f2fb; border-radius: 20px; padding: 6px 13px; white-space: nowrap;
}

/* Step 4 — size */
.in-est__size { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.in-est__size-input {
    width: 170px; padding: 12px 16px; font-size: 22px; font-weight: 800;
    border: 1.5px solid var(--clr-gray-2); border-radius: 10px; color: var(--clr-ink); background: #fff;
}
.in-est__size-input:focus { outline: none; border-color: var(--clr-blue); box-shadow: 0 0 0 3px rgba(0,108,181,.15); }
.in-est__size-unit { font-size: 15px; font-weight: 700; color: var(--clr-gray-6); }
.in-est__slider { width: 100%; max-width: 520px; accent-color: var(--clr-blue); margin-bottom: 22px; }
.in-est__size-actions { margin-bottom: 6px; }

/* Step 5 — result */
.in-est__result-eyebrow {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--clr-blue); margin-bottom: 10px;
}
.in-est__result-range {
    font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 900; letter-spacing: -.02em;
    line-height: 1.05; color: var(--clr-ink); margin-bottom: 8px;
}
.in-est__result-basis { font-size: 14px; color: var(--clr-gray-6); margin-bottom: 16px; }
.in-est__result-save {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
    background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0;
    border-radius: 22px; padding: 8px 15px; font-size: 13px; font-weight: 700;
}
.in-est__result-note {
    font-size: 13px; color: var(--clr-gray-6); line-height: 1.65; max-width: 62ch;
    padding-top: 16px; border-top: 1px solid var(--clr-gray-2); margin-bottom: 20px;
}
.in-est__result-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.in-est__result-call { font-size: 14px; font-weight: 700; color: var(--clr-blue); text-decoration: none; }
.in-est__result-call:hover { text-decoration: underline; }

.in-est__back {
    background: none; border: 0; padding: 6px 0; margin-top: 16px; cursor: pointer;
    font-size: 13.5px; font-weight: 650; color: var(--clr-gray-6);
}
.in-est__back:hover { color: var(--clr-blue); }

@media (max-width: 600px) {
    .in-est { padding: 20px 18px 18px; }
    .in-est__dot small { display: none; }
    .in-est__grid { grid-template-columns: 1fr 1fr; }
    .in-est__option { flex-direction: column; align-items: flex-start; gap: 8px; }
    .in-est__zip { width: 100%; }
}

/* ── Owner's own photography ──────────────────────────────────────────── */
.in-footer__logo-img { display:block; width:auto; max-width:220px; height:auto; margin-bottom:14px; }
.in-about__photo {
    margin: 26px 0 28px; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 18px 44px rgba(13,38,59,.14); max-width: 420px;
}
.in-about__photo img { display:block; width:100%; height:auto; }
.in-req-badge { display:block; width:92px; height:auto; margin: 0 0 20px; }
@media (max-width: 782px) { .in-about__photo { max-width: 100%; } }

/* ── Text selection ───────────────────────────────────────────────────────
   The browser default washed out over the dark hero and footer. A solid
   brand-blue fill with white text stays legible on every background we use,
   and text-shadow is cleared so selected hero copy does not smear. */
::selection      { background: #006cb5; color: #fff; text-shadow: none; }
::-moz-selection { background: #006cb5; color: #fff; text-shadow: none; }
input::selection, textarea::selection { background: #006cb5; color: #fff; }

/* Before/after pairs must share one frame or the wipe reads as two
   different photos. Lock the aspect and cover-fit whatever is uploaded. */
/* The frame takes its shape from the photograph. A portrait pair is also
   width-capped so it cannot tower over the rest of the page. */
.in-ba__slider {
    /* width must be stated: an auto margin on a grid item stops it stretching,
       and every child here is absolutely positioned, so it collapsed to zero. */
    width: 100%;
    justify-self: center;
    aspect-ratio: var(--ba-w, 800) / var(--ba-h, 530);
    max-width: calc(72vh * var(--ba-w, 800) / var(--ba-h, 530));
}

/* ═══════════════════════════════════════════════════════════════════
   REVIEWS — summary strip + carousel
   Replaces the old six-card grid, which ran ~1,960px tall with ragged
   card heights and a lopsided platform row once Google was hidden.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Rating summary ── */
.in-rv-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px;
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg);
    padding: 20px 26px; margin: 0 auto 30px; max-width: 1080px;
    box-shadow: 0 14px 40px rgba(13,38,59,.07);
}
.in-rv-summary__score { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.in-rv-summary__score:hover .in-rv-summary__count { color: var(--clr-blue); }
.in-rv-summary__num { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--clr-ink); }
.in-rv-summary__stars { color: #f59e0b; font-size: 17px; letter-spacing: 1px; }
.in-rv-summary__meta { display: flex; flex-direction: column; gap: 2px; }
.in-rv-summary__platform { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--clr-ink); }
.in-rv-summary__platform svg { width: 15px; height: 15px; }
.in-rv-summary__count { font-size: 12.5px; color: var(--clr-gray-6); transition: color .15s; }
.in-rv-summary__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.in-rv-chip {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: 12px; font-weight: 700; color: var(--clr-gray-7);
    background: var(--clr-off-wh); border: 1px solid var(--clr-gray-2);
    border-radius: 20px; padding: 7px 13px;
}
.in-rv-chip svg { color: var(--clr-blue); flex: none; }
.in-rv-chip--ok svg { color: #16a34a; }

/* ── Carousel shell ── */
.in-rv { position: relative; max-width: 1080px; margin: 0 auto; }
.in-rv__viewport {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    /* room for the cards' hover lift and shadow */
    padding: 6px 2px 14px;
}
.in-rv__viewport::-webkit-scrollbar { display: none; }
.in-rv__viewport:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 4px; border-radius: var(--radius-lg); }
.in-rv__track { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.in-rv__slide { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; display: flex; }

/* ── Card ── */
.in-rv-card {
    display: flex; flex-direction: column; width: 100%; margin: 0;
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: var(--radius-lg);
    padding: 22px 22px 20px; box-shadow: 0 8px 26px rgba(13,38,59,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.in-rv-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(13,38,59,.12); border-color: #cfe0f0; }
.in-rv-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.in-rv-card__stars { color: #f59e0b; font-size: 15px; letter-spacing: 1.5px; }
.in-rv-card__source svg { width: 18px; height: 18px; display: block; }

.in-rv-card__text {
    margin: 0 0 18px; font-size: 14.5px; line-height: 1.68; color: var(--clr-gray-7);
    /* Equal card heights whatever the review length; the full text stays
       one click away on Yelp. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
    overflow: hidden; flex: 1 1 auto;
}
.in-rv-card__text::before { content: '\201C'; }
.in-rv-card__text::after  { content: '\201D'; }

.in-rv-card__foot { display: flex; align-items: center; gap: 11px; padding-top: 15px; border-top: 1px solid var(--clr-gray-2); }
.in-rv-card__avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .02em;
    background: linear-gradient(135deg, var(--clr-blue), var(--clr-blue-dk)); color: #fff;
}
.in-rv-card__who { min-width: 0; }
.in-rv-card__name { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; color: var(--clr-ink); }
.in-rv-card__verified { color: #16a34a; flex: none; }
.in-rv-card__sub { display: block; font-size: 12px; color: var(--clr-gray-5); margin-top: 1px; }

/* ── Controls ── */
.in-rv__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: #fff; color: var(--clr-ink);
    border: 1px solid var(--clr-gray-2); box-shadow: 0 6px 20px rgba(13,38,59,.14);
    transition: background .15s, color .15s, opacity .15s;
}
.in-rv__nav:hover:not(:disabled) { background: var(--clr-blue); color: #fff; border-color: var(--clr-blue); }
.in-rv__nav:disabled { opacity: .3; cursor: default; }
.in-rv__nav--prev { left: -22px; }
.in-rv__nav--next { right: -22px; }
.in-rv.is-single-page .in-rv__nav, .in-rv.is-single-page .in-rv__dots { display: none; }

.in-rv__dots { display: flex; justify-content: center; gap: 2px; margin-top: 0; }

/* The button is a 24x24 touch target — the minimum anyone can reliably hit —
   while the dot you actually see stays 8px, drawn as a pseudo-element. */
.in-rv__dot {
    width: 24px; height: 24px; padding: 0; border: 0; background: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.in-rv__dot::before {
    content: ''; display: block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--clr-gray-3, #c9d3de);
    transition: width .2s, background .2s;
}
.in-rv__dot.is-active::before { width: 24px; border-radius: 5px; background: var(--clr-blue); }
.in-rv__dot:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 2px; border-radius: 6px; }

/* ── Footer ── */
.in-rv__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; text-align: center; margin-top: 30px; }
.in-rv__foot .in-rv__disclaimer { flex: 1 0 100%; }
.in-rv__disclaimer { margin: 14px auto 0; max-width: 60ch; font-size: 12.5px; color: var(--clr-gray-5); line-height: 1.6; }

/* ── Breakpoints ── */
@media (max-width: 1140px) {
    .in-rv { max-width: calc(100% - 96px); }
}
@media (max-width: 900px) {
    .in-rv__slide { flex: 0 0 calc((100% - 18px) / 2); }
    .in-rv-summary__badges { margin-left: 0; }
}
@media (max-width: 640px) {
    .in-rv { max-width: 100%; }
    .in-rv__slide { flex: 0 0 88%; }
    .in-rv__nav--prev { left: -6px; }
    .in-rv__nav--next { right: -6px; }
    .in-rv-summary { padding: 18px; gap: 14px 20px; }
    .in-rv-summary__num { font-size: 2.1rem; }
    .in-rv-card__text { -webkit-line-clamp: 9; }
}
@media (prefers-reduced-motion: reduce) {
    .in-rv-card, .in-rv__nav, .in-rv__dot, .in-rv__dot::before { transition: none; }
}

/* Reviews CTA on the light ground. */
.in-trust .in-rv__foot .in-btn--outline-dark {
    color: var(--clr-blue);
    border-color: rgba(0,108,181,.35);
    background: #fff;
}
.in-trust .in-rv__foot .in-btn--outline-dark:hover,
.in-trust .in-rv__foot .in-btn--outline-dark:focus-visible {
    background: var(--clr-blue);
    color: #fff;
    border-color: var(--clr-blue);
}
.in-trust .in-rv__disclaimer { color: var(--clr-gray-6); }
/* Slightly firmer edges so white cards read against the tinted ground. */
.in-trust .in-rv-summary, .in-trust .in-rv-card { border-color: #dbe6f1; }

/* The bare Yelp glyph read as a red smudge at 18px; pair it with the name. */
.in-rv-card__source {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
    padding: 4px 9px; border-radius: 20px;
    background: var(--clr-off-wh); color: var(--clr-gray-6);
    border: 1px solid var(--clr-gray-2);
}
.in-rv-card__source svg { width: 13px; height: 13px; display: block; flex: none; }
.in-rv-card__source--yelp   { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.in-rv-card__source--google { color: #1a56db; background: #eff6ff; border-color: #c7ddfb; }

/* ── Credential badge ─────────────────────────────────────────────────────
   Replaces a flat JPEG shield: vector icon plus live text, so it is sharp at
   any density and the licence number is never out of date. */
.in-credential {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 20px 14px 16px; margin-bottom: 24px;
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: 14px;
    box-shadow: 0 8px 24px rgba(13,38,59,.07);
}
.in-credential__shield {
    flex: none; width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--clr-blue), var(--clr-blue-dk));
}
.in-credential__shield svg { width: 23px; height: 23px; }
.in-credential__body { display: flex; flex-direction: column; gap: 1px; }
.in-credential__title {
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--clr-gray-6);
}
.in-credential__no { font-size: 17px; font-weight: 900; letter-spacing: -.01em; color: var(--clr-ink); }
.in-credential__note { font-size: 11.5px; color: var(--clr-gray-5); }
@media (max-width: 600px) { .in-credential { width: 100%; } }


/* ── About: story beside a real photo of the crew ─────────────────────────
   The second column used to repeat the Process section step for step. */
.in-about__photo {
    margin: 0; align-self: start; position: relative;
    border-radius: var(--radius-lg); overflow: hidden; max-width: none;
    box-shadow: 0 22px 54px rgba(13,38,59,.16);
}
.in-about__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.in-about__photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 30px 18px 14px; font-size: 12.5px; line-height: 1.5; color: #fff;
    background: linear-gradient(180deg, rgba(10,31,61,0) 0%, rgba(10,31,61,.82) 60%);
}
@media (max-width: 900px) { .in-about__photo { margin-top: 26px; } }

/* ═══════════════════════════════════════════════════════════════════
   CASE STUDIES — brought into the light scheme
   The section was pure black with cards tinted by each project's accent
   colour, which fought the blue/white/grey identity used everywhere else.
   The accent now shows as a top rule on a white card instead of flooding it.
   ═══════════════════════════════════════════════════════════════════ */
.in-portfolio { background: linear-gradient(180deg, #fff 0%, #f4f8fc 100%); }
.in-portfolio__head .in-h2 { color: var(--clr-ink); }
.in-portfolio__head .in-tag { color: var(--clr-blue); }

/* Three real projects read better as equal columns than as one hero plus two. */
.in-portfolio__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-project-card--featured { grid-column: span 1; }
.in-project-card--featured .in-project-card__title { font-size: 17px; }

.in-project-card {
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-top: 3px solid var(--proj-color, var(--clr-blue));
    box-shadow: 0 10px 30px rgba(13,38,59,.07);
    overflow: hidden;
}
.in-project-card:hover { box-shadow: 0 22px 50px rgba(13,38,59,.14); }
.in-project-card__title { color: var(--clr-ink); }
.in-project-card__desc  { color: var(--clr-gray-7); }
.in-project-card__loc, .in-project-card__loc span { color: var(--clr-gray-6); }
.in-project-card__city-link { color: var(--clr-blue); }
.in-project-tag {
    background: var(--clr-off-wh); color: var(--clr-gray-6);
    border: 1px solid var(--clr-gray-2);
}
.in-project-card__link { color: var(--clr-blue); }

/* The badge was in normal flow and landed on top of the next card's title. */
.in-project-card__visual { position: relative; }
.in-project-card__status {
    position: absolute; right: 12px; bottom: 12px; margin: 0;
    background: rgba(255,255,255,.94); color: #15803d;
    border-radius: 20px; padding: 5px 11px; font-size: 11px; font-weight: 800;
    box-shadow: 0 2px 8px rgba(13,38,59,.18);
}
.in-project-card__year {
    background: rgba(255,255,255,.92); color: var(--clr-ink);
    border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 800;
}
.in-portfolio__foot .in-btn--outline { color: var(--clr-blue); border-color: rgba(0,108,181,.35); background: #fff; }
.in-portfolio__head .in-btn--outline { color: var(--clr-blue); border-color: rgba(0,108,181,.35); background: #fff; }

@media (max-width: 900px) { .in-portfolio__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .in-portfolio__grid { grid-template-columns: 1fr; } }

/* The featured card kept its own visual height, so with three equal columns
   the titles no longer lined up. One height for all three. */
.in-portfolio .in-project-card__visual,
.in-portfolio .in-project-card--featured .in-project-card__visual { height: 190px; }
.in-portfolio .in-project-card__content { display: flex; flex-direction: column; }
.in-portfolio .in-project-card__links { margin-top: auto; }

/* Hovering the already-selected tab turned its label blue on a blue pill,
   so the text vanished under the cursor. */
.in-ba__tab--active:hover { color: #fff; border-color: var(--clr-blue); }

/* ═══════════════════════════════════════════════════════════════════
   CREDENTIALS — licence, insurance, bond
   Layout follows the reference the owner supplied; the palette is the
   site's own blue rather than the reference's electric blue, and the
   background photograph is one of ours instead of stock.
   ═══════════════════════════════════════════════════════════════════ */
.in-cred {
    position: relative; isolation: isolate; overflow: hidden;
    padding: var(--section-pad) 0;
    background: linear-gradient(135deg, #f2f7fc 0%, #ffffff 45%, #eef4fa 100%);
}
/* Angular brand marks, echoing the reference's chevrons. */
.in-cred::before, .in-cred::after {
    content: ''; position: absolute; z-index: -2; pointer-events: none;
}
.in-cred::before {
    top: 0; left: 0; width: 46%; height: 8px;
    background: linear-gradient(90deg, var(--clr-blue) 0%, var(--clr-blue-dk) 70%, transparent 100%);
}
.in-cred::after {
    bottom: 0; right: 0; width: 46%; height: 8px;
    background: linear-gradient(270deg, var(--clr-blue) 0%, var(--clr-blue-dk) 70%, transparent 100%);
}
.in-cred__photo {
    position: absolute; z-index: -1; inset: 0 0 0 auto; width: 38%;
    background-size: cover; background-position: center;
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

.in-cred__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.in-cred__tag {
    display: inline-block; margin-bottom: 18px;
    background: var(--clr-blue); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: 8px 20px; border-radius: 20px;
}
.in-cred__heading {
    font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -.03em;
    line-height: 1.06; color: var(--clr-ink); margin: 0 0 16px;
}
.in-cred__heading em {
    font-style: normal; color: var(--clr-blue);
    box-shadow: inset 0 -.14em 0 rgba(0,108,181,.28);
}
.in-cred__lead {
    font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.75;
    color: var(--clr-gray-7); text-transform: uppercase; margin: 0;
}

.in-cred__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px; margin-bottom: 26px;
}
.in-cred-card {
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: 18px;
    padding: 26px 26px 28px; box-shadow: 0 14px 40px rgba(13,38,59,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.in-cred-card:hover { transform: translateY(-3px); box-shadow: 0 24px 56px rgba(13,38,59,.14); }
.in-cred-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.in-cred-card__icon {
    flex: none; width: 50px; height: 50px; border-radius: 13px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--clr-blue), var(--clr-blue-dk));
}
.in-cred-card__icon svg { width: 26px; height: 26px; }
.in-cred-card__title {
    display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--clr-ink);
}
.in-cred-card__sub {
    display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--clr-blue);
}
.in-cred-card__figure {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 900; font-style: italic;
    letter-spacing: -.02em; color: var(--clr-blue);
    margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--clr-gray-2);
}
.in-cred-card__body { margin: 0; font-size: 14px; line-height: 1.7; color: var(--clr-gray-7); }

.in-cred__strip {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--clr-gray-2); border-radius: 18px;
    padding: 20px 26px; box-shadow: 0 14px 40px rgba(13,38,59,.08);
}
.in-cred__strip-badge {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--clr-ink), #34424f);
}
.in-cred__strip-badge svg { width: 27px; height: 27px; }
.in-cred__strip-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.in-cred__strip-main strong {
    font-size: 17px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; color: var(--clr-ink);
}
.in-cred__strip-facts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--clr-blue);
}
.in-cred__strip-facts i { font-style: normal; color: var(--clr-gray-4, #9aa7b4); }
.in-cred__verify {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; color: #fff; text-decoration: none;
    background: var(--clr-blue); border-radius: 12px; padding: 13px 20px;
    transition: background .15s;
}
.in-cred__verify:hover { background: var(--clr-blue-dk); }

@media (max-width: 980px) {
    .in-cred__grid { grid-template-columns: 1fr; }
    .in-cred__photo { width: 60%; opacity: .1; }
    .in-cred__verify { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .in-cred-card { transition: none; } }

/* The company's own licensed/insured/bonded shield, in place of a generic
   icon tile. Transparent PNG, so it sits on any card colour. */
.in-credential__badge { flex: none; width: 66px; height: auto; display: block; }
@media (max-width: 600px) { .in-credential__badge { width: 56px; } }

/* The badge was reading as an icon rather than a credential — give it the
   presence it deserves and let the block breathe around it. */
.in-credential { gap: 18px; padding: 18px 24px 18px 20px; }
.in-credential__badge { width: 96px; }
@media (max-width: 600px) { .in-credential__badge { width: 76px; } }


/* ══════════════════════════════════════════════════════════════
   Skip rendering for sections that are far below the fold
   ══════════════════════════════════════════════════════════════
   The page runs to roughly 16,000px. Without this the browser lays out and
   paints every one of those pixels before it can show the first screen. Each
   intrinsic size is the section's measured height, and the `auto` keyword lets
   the browser replace it with the real value once the section has rendered
   once — so scroll position stays stable and nothing shifts.

   Not applied to .in-trust, .in-ba or .in-calc: the carousel, the before/after
   slider and the estimator all measure their own geometry on load, and content
   that has been skipped has no geometry to measure. */
.in-home-gallery {
    content-visibility: auto;
    contain-intrinsic-size: auto 2085px;
}
.in-portfolio {
    content-visibility: auto;
    contain-intrinsic-size: auto 701px;
}
.in-cred {
    content-visibility: auto;
    contain-intrinsic-size: auto 637px;
}
.in-process {
    content-visibility: auto;
    contain-intrinsic-size: auto 433px;
}
.in-compare {
    content-visibility: auto;
    contain-intrinsic-size: auto 942px;
}
.in-about {
    content-visibility: auto;
    contain-intrinsic-size: auto 718px;
}
.in-areas {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
.in-home-faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 777px;
}
.in-cta {
    content-visibility: auto;
    contain-intrinsic-size: auto 681px;
}
.in-guides-teaser {
    content-visibility: auto;
    contain-intrinsic-size: auto 761px;
}

/* Printing and find-in-page want everything rendered. */
@media print {
    .in-home-gallery,
    .in-portfolio,
    .in-cred,
    .in-process,
    .in-compare,
    .in-about,
    .in-areas,
    .in-home-faq,
    .in-cta,
    .in-guides-teaser { content-visibility: visible; }
}

/* The before/after handle is a drag control, so the browser must not also read
   the gesture as a scroll. Without this a horizontal drag on a phone moved the
   page vertically at the same time. */
[data-ba-slider] { touch-action: none; }
[data-ba-handle] { touch-action: none; }

/* The guides archive reuses .in-hero__badge, but its hero is light while the
   class is built for the dark home-page hero — white on a white wash rendered
   at 1.04:1, which is not low contrast so much as no contrast. */
.in-blog-hero .in-hero__badge {
    background: var(--clr-blue-lt, #e8f2fb);
    border-color: rgba(0, 108, 181, .22);
    color: #2a4356;
}

/* === REGION HUBS + RENTAL (two-market structure) ================= */

.in-regions {
    padding: var(--section-pad) 0;
    background: var(--clr-off-wh);
    border-top: 1px solid var(--clr-gray-2);
}
.in-regions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.in-regions__card {
    display: flex; flex-direction: column;
    padding: 30px 28px;
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.in-regions__card:hover {
    border-color: var(--clr-blue);
    box-shadow: 0 6px 22px rgba(0,108,181,.10);
    transform: translateY(-2px);
}
.in-regions__eyebrow {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--clr-blue);
    margin-bottom: 8px;
}
.in-regions__name {
    font-size: 24px; font-weight: 800; line-height: 1.2;
    color: var(--clr-navy);
    margin-bottom: 10px;
}
.in-regions__blurb {
    font-size: 14.5px; line-height: 1.6;
    color: var(--clr-gray-5);
    margin-bottom: 20px;
    flex: 1;
}
.in-regions__cta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 700;
    color: var(--clr-blue);
}
/* The geo hint marks the visitor's likely region; it is a suggestion only,
   never a content swap, so the other card stays exactly as prominent. */
.in-regions__card[data-region-near="1"] {
    border-color: var(--clr-blue);
    box-shadow: 0 6px 22px rgba(0,108,181,.10);
}
.in-regions__card[data-region-near="1"] .in-regions__eyebrow::after {
    content: " · Closest to you";
}

.in-rental {
    padding: var(--section-pad) 0;
    background: #fff;
    border-top: 1px solid var(--clr-gray-2);
}
.in-rental__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 36px 0 32px;
}
.in-rental__item {
    display: flex; align-items: center; gap: 9px;
    padding: 14px 16px;
    background: var(--clr-off-wh);
    border: 1px solid var(--clr-gray-2);
    border-radius: 9px;
    font-size: 14px; font-weight: 600;
    color: var(--clr-navy);
}
.in-rental__item svg { color: var(--clr-blue); flex: none; }
.in-rental__actions {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

@media (max-width: 900px) {
    .in-regions__grid { grid-template-columns: 1fr; }
    .in-rental__grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .in-rental__grid  { grid-template-columns: 1fr; }
    .in-regions__name { font-size: 21px; }
}

/* ── Address autocomplete ─────────────────────────────────────────────────
   The list is positioned against a wrapper the script inserts, so it follows
   the input wherever the input lives - booking card, estimate form, landing
   page - without any per-form styling. */
.in-ac { position: relative; }

.in-ac__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 264px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--clr-gray-2);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(13, 38, 59, .16);
}

.in-ac__item {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--clr-gray-8);
    cursor: pointer;
}

.in-ac__item:hover,
.in-ac__item.is-on {
    background: var(--clr-blue-lt);
    color: var(--clr-blue-dk);
}

/* ── Client login link (top bar + mobile menu) ───────────────────────── */
.in-topbar__login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    font-weight: var(--fw-6);
    color: #fff;
    text-decoration: none;
}
.in-topbar__login:hover { text-decoration: underline; text-underline-offset: 3px; }
.in-mobile-menu__login a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-blue);
    font-weight: var(--fw-7);
}

/* ═══════════════════════════════════════════════════════════════════════
   REFINED HEADER
   Quieter and more deliberate: one call control instead of two, a muted
   utility bar, larger and more open navigation with a thin centred rule on
   hover and on the current section, a flat button instead of a gradient, and
   a header that settles to a slimmer height once you start reading.
   ═══════════════════════════════════════════════════════════════════════ */

/* Utility bar: present, not loud. */
.in-topbar { background: #1f252c; }
.in-topbar__item { color: rgba(255, 255, 255, .72); letter-spacing: .01em; }
.in-topbar__item:hover { color: #fff; }
.in-topbar__license { color: rgba(255, 255, 255, .72) !important; font-weight: 500; letter-spacing: .02em; }
.in-topbar__license svg { color: #6fb3e8; }
.in-topbar__login { color: #fff; }

/* The bar itself. */
.in-header {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(27, 35, 43, .07);
    box-shadow: none;
}
.in-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 rgba(27, 35, 43, .06), 0 10px 30px rgba(13, 38, 59, .08);
}
.in-header .in-container { height: 84px; transition: height .28s ease; }
.in-header.is-scrolled .in-container { height: 68px; }
.in-logo__img { transition: height .28s ease; }
.in-header.is-scrolled .in-logo__img { height: 58px; }

/* Navigation. */
.in-nav__list { gap: clamp(16px, 1.7vw, 30px); }
.in-nav__list a {
    padding: 10px 0;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .012em;
    color: #3a4550;
}
.in-nav__list a::after {
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 1.5px;
    border-radius: 2px;
    background: var(--clr-blue);
    transform: translateX(-50%);
    transition: width .28s cubic-bezier(.22, .61, .36, 1);
}
.in-nav__list a:hover,
.in-nav__list a.is-current { color: var(--clr-text); }
.in-nav__list a:hover::after,
.in-nav__list a.is-current::after { width: 100%; }
.in-nav__list a:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 4px; border-radius: 3px; }

/* The one call control, and a flat, confident button. */
.in-header__actions { gap: 22px; }
.in-header__actions .in-btn--primary {
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--clr-blue);
    background-image: none;
    box-shadow: 0 1px 2px rgba(0, 60, 110, .18);
    font-weight: 600;
    letter-spacing: .015em;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.in-header__actions .in-btn--primary:hover {
    background: var(--clr-blue-dk);
    box-shadow: 0 8px 20px rgba(0, 108, 181, .24);
    transform: translateY(-1px);
}

/* A little less space at the narrow end of the desktop range. */
@media (min-width: 1200px) and (max-width: 1360px) {
    .in-nav__list a { font-size: 14px; }
    .in-header .in-container { gap: 24px; }
    .in-logo__img { height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
    .in-header .in-container, .in-logo__img, .in-nav__list a::after,
    .in-header__actions .in-btn--primary { transition: none; }
}

/* ── Services dropdown ───────────────────────────────────────────────────
   Opens on hover and keyboard focus for mouse users; the chevron button
   opens it on touch screens and toggles aria-expanded (assets/js/main.js). */
.in-nav__has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.in-nav__sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 28px; padding: 0; border: 0; background: none;
    color: #6b7785; cursor: pointer; transition: transform .2s ease, color .2s ease;
}
.in-nav__has-sub:hover .in-nav__sub-toggle,
.in-nav__sub-toggle[aria-expanded="true"] { color: var(--clr-blue); }
.in-nav__sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.in-nav__sub-toggle:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 2px; border-radius: 4px; }

.in-nav__sub {
    position: absolute; top: 100%; left: 50%;
    display: block;
    width: 320px; padding: 20px 16px;
    background: #fff; border: 1px solid rgba(27, 35, 43, .08); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(13, 38, 59, .16);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 300;
}
/* A transparent bridge so the pointer can cross the gap without it closing. */
.in-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.in-nav__has-sub:hover .in-nav__sub,
.in-nav__has-sub:focus-within .in-nav__sub,
.in-nav__has-sub.is-open .in-nav__sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.in-nav__sub-h {
    display: block; margin: 0 0 8px; padding: 0 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--clr-blue);
}
.in-nav__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.in-nav__list .in-nav__sub a {
    display: block; padding: 9px 10px; border-radius: 9px;
    font-size: 14.5px; color: var(--clr-text); letter-spacing: 0; white-space: normal;
}
.in-nav__list .in-nav__sub a::after { display: none; }
.in-nav__sub a strong { display: block; font-weight: 600; }
.in-nav__sub a small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #66727f; }
.in-nav__list .in-nav__sub a:hover,
.in-nav__list .in-nav__sub a:focus-visible { background: var(--clr-blue-lt); color: var(--clr-blue-dk); outline: none; }

/* Mobile menu: the dropdown's links sit indented under "Services". */
.in-mobile-menu__list li.in-mobile-menu__sub a {
    padding-left: calc(var(--container-p) + 18px);
    font-size: 15px; font-weight: 400; color: var(--clr-gray-7);
    background: #fafbfc;
}
@media (prefers-reduced-motion: reduce) {
    .in-nav__sub, .in-nav__sub-toggle { transition: none; }
}

/* ── Phones: nothing may be wider than the screen ────────────────────────
   The footer's bottom links ran past the right edge once "Client login" and
   "Homeowner Guides" joined them, and a long button label ("Rental Property
   & Make-Ready Services") could not wrap - either one made every page scroll
   sideways on a phone. */
.in-footer__bottom-links { flex-wrap: wrap; row-gap: 8px; min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
    .in-footer__bottom-links { justify-content: center; }
    .in-btn { white-space: normal; max-width: 100%; text-align: center; }
}
@media (max-width: 600px) {
    /* City pages: the two mid-page buttons refused to shrink (+95px). */
    .in-city-mid-cta__actions { flex-shrink: 1; width: 100%; }
    .in-city-mid-cta__actions .in-btn { flex: 1 1 100%; justify-content: center; }
    /* Bay Area trust bar: "Jurisdictions: SF DBI, Oakland ..." is one long item. */
    .in-trust-bar__item { white-space: normal; text-align: center; justify-content: center; }
    /* Homepage financing note: stack it instead of squeezing it sideways. */
    .in-ba__financing { flex-direction: column; align-items: flex-start; padding: 20px; gap: 12px; }
    .in-ba__financing > * { max-width: 100%; }
    .in-ba__financing p { min-width: 0; width: 100%; flex: none; }
}

/* ── Book a Visit, visible site-wide ──────────────────────────────────── */
.in-header__book { gap: 7px; white-space: nowrap; }
.in-header__book svg { flex: 0 0 15px; }
/* On narrower desktops the header is full: keep the calendar icon only. */
@media (min-width: 1201px) and (max-width: 1360px) {
    .in-header__book span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .in-header__book { padding-left: 12px; padding-right: 12px; }
}
.in-mobile-menu__book { width: 100%; justify-content: center; gap: 8px; margin-bottom: 10px; }
.in-hero__wa { margin: 10px 0 0; font-size: 14px; color: rgba(255, 255, 255, .75); }
.in-hero__wa a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.in-hero__actions .in-btn svg, .in-svc-hero__actions .in-btn svg { flex-shrink: 0; }

/* ══ Phones: customer-first layout ═══════════════════════════════════════
   The first screen used to be all headline - no button until the visitor
   scrolled. The hero is tighter, the buttons come up into view, the bottom
   bar (Call · Free Estimate · Book) is always there, and the chat button
   sits above the bar instead of on top of the text. */
@media (max-width: 768px) {
    .in-hero { padding: 26px 0 36px !important; }
    .in-hero__badge { margin-bottom: 12px; }
    .in-hero__heading { font-size: 31px !important; line-height: 1.12; margin-bottom: 12px; }
    .in-hero__sub { font-size: 15.5px !important; line-height: 1.55; margin-bottom: 18px; }
    .in-hero__actions { flex-direction: column; align-items: stretch !important; gap: 10px; }
    .in-hero__actions .in-btn { width: 100%; justify-content: center; min-height: 50px; }
    .in-hero__wa { text-align: center; }

    /* Bottom bar: three even buttons, always visible. */
    .in-mobile-bar { transform: none !important; pointer-events: auto !important; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .in-mobile-bar__btn { padding: 12px 4px; font-size: 13.5px; gap: 6px; min-height: 48px; border-radius: 10px; }
    .in-mobile-bar__btn svg { flex: 0 0 16px; }
    .in-mobile-bar__btn--book { color: var(--clr-text); border: 1.5px solid var(--clr-gray-3, #c9d3de); background: #fff; }
    .in-mobile-bar .in-callpick--mobile-bar { flex: 1; display: flex; }
    .in-mobile-bar .in-callpick--mobile-bar > summary { width: 100%; }
    body { padding-bottom: 74px; }

    /* Chat: smaller, and above the bar. */
    #inest-ai-bubble { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 84px !important; }
    #inest-ai-panel { bottom: 140px !important; right: 8px !important; left: 8px !important; width: auto !important; max-height: calc(100vh - 170px) !important; }

    /* Review dots: easier to hit with a thumb. */
    .in-rv__dot { width: 32px; height: 36px; }
}
@media (max-width: 360px) {
    .in-mobile-bar__btn span { font-size: 12.5px; }
    .in-hero__heading { font-size: 28px !important; }
}
@media (max-width: 768px) {
    .in-mobile-bar__btn span { white-space: nowrap; }
}
/* Narrow phones: the middle button drops its icon so "Free Estimate" stays on one line. */
@media (max-width: 430px) {
    .in-mobile-bar__btn--primary svg { display: none; }
    .in-mobile-bar__btn { font-size: 13px; }
}
@media (max-width: 768px) {
    .in-svc-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .in-svc-hero__actions .in-btn { width: 100%; justify-content: center; min-height: 50px; }
    .in-svc-hero__actions .in-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .38); border-radius: 12px; }
}

/* ── Phone menu: full screen, scrollable, nothing on top of it ────────── */
@media (max-width: 1200px) {
    .in-mobile-menu.is-open {
        position: fixed; left: 0; right: 0; bottom: 0; top: 72px;
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        z-index: 400; padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    body.in-menu-open { overflow: hidden; }
    body.in-menu-open .in-mobile-bar,
    body.in-menu-open #inest-ai-bubble { display: none !important; }
}
.in-about__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.in-about__why { font-weight: 700; color: var(--clr-blue); text-decoration: none; }
.in-about__why:hover { text-decoration: underline; }

/* ── Trust logos (inc/trust-logos.php) ────────────────────────────────── */
.in-tlogos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.in-tlogos li { margin: 0; }
.in-tlogos a, .in-tlogos__static {
	display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 10px;
	border-radius: 12px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.in-tlogos a:hover { transform: translateY(-1px); }
.in-tlogos__mark { flex: 0 0 auto; }
.in-tlogos__txt { display: grid; line-height: 1.2; }
.in-tlogos__txt > span { font-size: 14px; white-space: nowrap; }
.in-tlogos__txt small { font-size: 12px; white-space: nowrap; }
.in-tlogos__stars { color: #f5a623; letter-spacing: 1px; font-size: 13px; }

.in-tlogos--light a, .in-tlogos--light .in-tlogos__static { background: #fff; border: 1px solid #dde5ee; box-shadow: 0 4px 14px rgba(13, 38, 59, .05); color: #1b232b; }
.in-tlogos--light a:hover { box-shadow: 0 8px 22px rgba(13, 38, 59, .10); }
.in-tlogos--light small { color: #5f7085; }
.in-tlogos--light .in-tlogos__mark--icon { color: #006cb5; }

.in-tlogos--dark a, .in-tlogos--dark .in-tlogos__static { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.in-tlogos--dark small { color: rgba(255, 255, 255, .72); }
.in-tlogos--dark .in-tlogos__mark--icon { color: #fff; }
.in-tlogos--dark .in-tlogos__mark:not(.in-tlogos__mark--icon) { background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }

.in-tlogos--center { justify-content: center; }
@media (max-width: 600px) {
	.in-tlogos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.in-tlogos a, .in-tlogos__static { padding: 8px 10px; gap: 8px; }
	.in-tlogos__txt > span { font-size: 13px; }
	.in-tlogos__txt small { font-size: 11.5px; }
}

/* ── The blue strip with the trust logos ──────────────────────────────── */
.in-trust-bar--logos { padding: 14px 0; }
.in-trust-bar--logos .in-container { display: block; }
.in-tlogos--bar { margin: 0; }
.in-tlogos--bar a, .in-tlogos--bar .in-tlogos__static { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
.in-tlogos--bar a:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 600px) {
    .in-trust-bar--logos { padding: 12px 0; }
}

/* Home services, short version: the other trades as one line of links */
.in-services__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; justify-content: center; }
.in-services__more-label { font-size: 14px; color: var(--clr-gray-5); font-weight: 600; margin-right: 2px; }
.in-services__more a { font-size: 14px; font-weight: 600; color: var(--clr-primary, #006cb5); background: #eef5fc; border: 1px solid #d6e6f5; border-radius: 999px; padding: 7px 14px; text-decoration: none; transition: background var(--tr), border-color var(--tr); }
.in-services__more a:hover { background: #e0eefb; border-color: #b9d5ef; }
.in-services__more a.in-services__more-all { background: var(--clr-primary, #006cb5); color: #fff; border-color: transparent; display: inline-flex; align-items: center; gap: 6px; }
.in-services__more a.in-services__more-all svg { width: 14px; height: 14px; }
@media (max-width: 600px) { .in-services__more { justify-content: flex-start; } }