/* ==========================================================================
   LA Intelligence — all.css
   1. Reset  2. Tokens  3. Body/global  4. Wrapper/container  5. Buttons
   6. Header/Nav/Mobile  7. Hero  8. Sections  9. Footer  10. Animations
   11. Responsive (1200 -> 991 -> 767 -> 480)
   ========================================================================== */

/* ============ 1. RESET ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol,
ul,
li {
    list-style: none;
}

p {
    margin: 0;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: normal;
}

html {
    scroll-behavior: smooth;
}

/* ============ 2. TOKENS ============ */
:root {
    --accent: #d34830;
    --ink: #1b1b1b;
    --grey-bg: #f6f7f8;
    --border-grey: #646464;
    --white: #fff;
    --container: 1440px;
    /* design canvas width */
    --pad: 100px;
    /* section side padding in design */
}

/* ============ 3. BODY & GLOBAL ============ */
body {
    font-family: 'Rajdhani', sans-serif;
    color: var(--ink);
    line-height: 1.4;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    /* clip (not hidden) so horizontal overflow is contained WITHOUT creating a
       scroll container — that keeps position: sticky working (e.g. blog sidebar) */
    overflow-x: clip;
	background: #000;
}

.site,
#page,
main {
    background: #fff;
}
 
input,
button,
textarea,
select {
    font-family: inherit;
    outline: none;
    border: none;
}

button {
    cursor: pointer;
    background: none;
}

/* ============ 4. WRAPPER & CONTAINER ============ */
#wrapper {
    /* x-only clip keeps the page from scrolling sideways but does NOT establish
       a scroll container, so descendant position: sticky still anchors to the
       viewport (blog sidebar). Using `hidden` here would silently break sticky. */
    overflow-x: clip;
}

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

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

/* Shared section header */
.section-title {
    font-weight: 600;
    font-size: 62px;
    line-height: 1;
    color: var(--ink);
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    max-width: 845px;
    margin: 0 auto;
}

.section-desc {
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.6;
}

/* ============ 5. BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    transition: 0.3s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: var(--white);
}

.btn-primary:hover {
    background: #b93a24;
}

/* outline variant — red border + red text, fills on hover (Figma) */
.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

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

.btn-arrow {
    width: 20px;
    height: 20px;
    display: inline-flex;
}

.btn-arrow svg {
    width: 100%;
    height: 100%;
}

/* ============ 6. HEADER / NAV ============ */
/* Figma: header sits in a centered 1400px column inside 1440 canvas.
   Top bar: gap 40, justify-end, 20px vertical pad, 80px right pad.
   Nav: glass bar, gap 79, justify-center, logo + links + CTA in one row. */
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.header-col {
    max-width: 1400px;
    margin: 0 auto;
}

/* Top bar */
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    padding: 20px 80px 20px 0px;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}

.topbar-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    flex-shrink: 0;
}

.topbar-icon svg {
    width: 100%;
    height: 100%;
}

/* Navbar (glassmorphism) */
.navbar-wrap {
    width: 100%;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 20px 80px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0.25px solid #ffffff30;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height: 40px;
    width: auto;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap;
}

.desktop-nav>li {
    flex-shrink: 0;
}

.desktop-nav>li>a {
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: 0.3s ease;
}

/* Link accent rahe jab link par hover ho YA jab dropdown-wale <li> ka
   mega-menu open ho (panel par pointer hone par bhi hover barqarar). */
.desktop-nav>li>a:hover,
.desktop-nav>li.has-dropdown:hover>a,
.desktop-nav>li {
    color: var(--accent);
}

.caret {
    font-size: 10px;
}

/* static so the mega panel anchors to .navbar-wrap (full width), not the <li> */
.has-dropdown {
    position: static;
}

/* ---- MEGA MENU (About Us + Services) ---- */
/* Full-width panel dropping below the navbar, like the Figma mega menus.
   Positioned against .navbar-wrap so it spans the whole header width. */
.navbar-wrap {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    width: 89%;
    background: var(--white);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 60;
}

/* Invisible hover-bridge: extends the panel's hoverable area UPWARD to cover
   the gap between the nav link and the panel, so moving the mouse down from
   the trigger doesn't drop the hover and close the menu. */
.mega-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 34px;
    background: transparent;
}

/* keep open while hovering the trigger OR the panel (incl. its bridge) */
.has-dropdown:hover .mega-menu,
.mega-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* About Us — single row of links */
.mega-about .mega-about-row {
    display: flex;
    align-items: center;
    gap: 100px;
    padding: 32px 40px;
}

.mega-about-row a {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    white-space: nowrap;
    transition: 0.3s ease;
}

.mega-about-row a:hover,
.mega-about-row a.is-active {
    color: var(--accent);
}
/* Services — multi-column grid + featured card */
.mega-services-inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding: 40px;
}

.mega-services-cols {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Grid (flex nahi) taake dono rows ke columns EK jaise 5 tracks par align hon —
   Figma jaisa. Flex mein 4-item row apne columns ko stretch kar deta tha (widths
   133px vs 176px), isliye 5th column (Interview & Interrogation) wrap ho ke neeche
   chala jaata tha. Grid har row ko fixed 5 columns deta hai; kam items ho to
   aakhri track khaali rehta hai, wrap nahi hota. */
.mega-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    align-items: start;
}

.mega-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mega-head {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    transition: 0.3s ease;
}

.mega-head:hover,
.mega-head.is-active {
    color: var(--accent);
}

.mega-sub {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-sub li a {
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    opacity: 0.72;
    transition: 0.3s ease;
}

.mega-sub li a:hover,
.mega-sub li a.is-active {
    opacity: 1;
    color: var(--accent);
}

/* Featured blog card (right) */
.mega-feature {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* top-align (columns ke saath), center nahi — Figma jaisa red-line par align */
    align-self: flex-start;
}

.mega-feature-img {
    width: 100%;
    height: 175px;
    overflow: hidden;
}

.mega-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mega-feature:hover .mega-feature-img img {
    transform: scale(1.05);
}

.mega-feature-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.16;
    color: var(--ink);
}

.mega-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    color: var(--accent);
}

.mega-feature-link .btn-arrow {
    width: 20px;
    height: 20px;
}

.nav-cta {
    flex-shrink: 0;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.hamburger span {
    width: 26px;
    height: 2px;
    background: var(--white);
    display: block;
    transition: 0.3s ease;
}

/* ============ MOBILE NAV ============ */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 998;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: var(--ink);
    padding: 64px 24px 24px;
    transition: 0.35s ease;
    z-index: 999;
    overflow-y: auto;
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 24px;
    line-height: 1;
    color: var(--white);
    cursor: pointer;
}

.mobile-nav .menu-list>li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-nav .menu-list>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}

.mobile-arrow {
    font-size: 11px;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    align-self: stretch;
    margin: -14px 0;
    padding: 14px 0px 14px 0px;
    cursor: pointer;
}

.mobile-has-dropdown.open .mobile-arrow {
    transform: rotate(180deg);
}

.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-dropdown>li>a {
    display: block;
    padding: 8px 0 8px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

/* Level-2: a sub-link that itself has children (click to expand) */
.mobile-has-sub>a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-sub-arrow {
    font-size: 10px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    align-self: stretch;
    margin: -8px 0;
    padding: 8px 0px 8px 0px;
    cursor: pointer;
}

.mobile-has-sub.open>a {
    color: var(--accent);
}

.mobile-has-sub.open .mobile-sub-arrow {
    transform: rotate(180deg);
}

/* Level-2 nested list */
.mobile-subdropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-subdropdown li a {
    display: block;
    padding: 7px 0 7px 28px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    transition: 0.3s ease;
}

.mobile-subdropdown li a:hover {
    color: var(--accent);
}

.mobile-cta {
    margin-top: 24px;
    width: 100%;
}

/* ============ 7. HERO ============ */
/* Figma: 800px tall, content block starts ~310px from top, left 100px,
   title w-550 60px, sub 48px below, button below that. Modeled as a
   left-aligned column pushed down with padding-top so it scales cleanly. */
.hero {
    position: relative;
    min-height: 800px;
    overflow: hidden;
}

/* Inline background image (kept in HTML so it can be made dynamic later) */
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    object-position: top;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(221deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 103%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 310px;
}

.hero-title {
    font-weight: 600;
    font-size: 60px;
    line-height: 1.04;
    color: var(--white);
    text-transform: uppercase;
    max-width: 650px;
}

.hero-sub {
    margin-top: 9px;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.04;
    color: #fff;
    min-height: 56px;
    white-space: nowrap;
}
 
.typed-cursor {
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
}

.hero-cta {
    margin-top: 40px;
}

/* ---- Redesigned hero: heading/CTA bottom-left, quote form top-right ---- */
.hero-redesign {
    min-height: 800px;
}

.hero-redesign .hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    min-height: 800px;
    padding-top: 175px;
    padding-bottom: 130px;
}
 
.hero-redesign .hero-title {
    /* not uppercase in the redesign */
    text-transform: none;
}

.hero-redesign .hero-left {
    flex: 1;
    min-width: 0;
    max-width: 650px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* white quote-form card on the right of the hero */
.hero-form {
    width: 505px;
    flex-shrink: 0;
    background: var(--white);
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.hero-form .hero-form-msg {
    height: 94px;
}

.hero-form .cu-form-submit {
    width: 100%;
    margin-top: 24px;
}

/* "Get A Quote" button shows on mobile only (desktop uses the side form) */
.hero-cta-mobile {
    display: none;
    margin-top: 24px;
}

/* ---- Trust bar (4 stats, icon-left) — dark translucent overlay at hero bottom ---- */
.hp-trust {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.24);
    border-top: 0.25px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 20px 0px;
}

.hp-trust-inner {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 40px;
}

/* each item: icon on the left, title + subtitle on the right */
.hp-trust-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}

.hp-trust-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.hp-trust-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hp-trust-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hp-trust-item h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white);
}

.hp-trust-item p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.64;
    color: var(--white);
}

/* ---- Professional Affiliations (white, bordered cells — Figma) ---- */
.hp-affiliations {
    background: var(--white);
    border-top: 0.25px solid #1b1b1b40;
    padding: 100px 0 120px;
}

.hp-affiliations-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.hp-affiliations .section-title {
    width: 90%;
}

.hp-aff-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hp-aff-cell {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 48px;
    border: 0.5px solid #1b1b1b5e;
    margin-left: -0.25px;
}

.hp-aff-cell img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* USA-PI logo is a white asset; render it as solid ink (matches Figma mask) */
.hp-aff-ink {
    filter: brightness(0);
}

/* ============ 8. SECTIONS ============ */

/* ---- Welcome ---- */
/* Figma: gap 125, items-start. Left = 505 big image with a 295 bordered
   image overlapping its bottom-right (offset left 315 / top 357, white 20px
   border). Right = 505 content column, vertically centered to image block. */
.welcome {
    padding: 120px 0;
}

.welcome-flex {
    display: flex;
    gap: 125px;
    align-items: start;
    justify-content: center;
}

.welcome-images {
    position: relative;
    width: 610px;
    height: 652px;
    flex-shrink: 0;
}

.welcome-img-big {
    width: 505px;
    height: 505px;
}

.welcome-img-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.welcome-img-small {
    position: absolute;
    left: 315px;
    top: 357px;
    width: 335px;
    height: 335px;
    border: 20px solid var(--white);
    box-sizing: border-box;
}

.welcome-img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.welcome-content {
    width: 505px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.welcome-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.6;
    font-weight: 500;
}

.welcome-note {
    background: var(--grey-bg);
    padding: 24px;
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.8;
}

.welcome-note strong {
    color: var(--accent);
    font-weight: 600;
}

.welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.welcome-actions-note {
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.6;
}

/* ---- Featured Services ---- */
/* Figma: image 310 tall on top; white body floats UP ~54px overlapping the
   image (inset 16px each side); red button directly under the body.
   Cards are flow-based + equal height (Owl flex) so long text never overflows.
   The carousel is full-bleed to the RIGHT: it starts at the container's left
   edge but runs to the viewport edge so the next card peeks. */
.services {
    background: var(--grey-bg);
    padding: 100px 0;
    overflow: hidden;
}

.services .section-head {
    max-width: 820px;
    margin-bottom: 60px;
}

/* Carousel bounded inside the container (3 cards visible, per Figma) */
.services-bleed {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    overflow: hidden;
}

p.cr-job-sub {
    font-weight: bold !important;
    color: #D34830 !important;
}

section.reputation.reputation-light {
    border-bottom: 1px solid #00000030;
}

section.pi-intro .pi-note {
    background: #F6F7F8;
}

.footer-col.footer-contact li {
    max-width: 200px;
}

.page-template-what-we-do section.hp-affiliations {
    border-bottom: 0.25px solid #1b1b1b40;
    border-top: none;
}

.footer-col.footer-contact li a {
    line-height: normal !important;
}

.page-template-faqs section.hp-affiliations {
    border: none !important;
    background: #F6F7F8;
}

.page-template-testimonials section.hp-affiliations {
    border-bottom: 0.25px solid #1b1b1b40;
    border-top: none;
}

.page-template-contact-us section.hp-affiliations {
    background: #F6F7F8;
    border: none;
}

.page-template-anaheim section.hp-affiliations {
    background: #F6F7F8;
    border: none;
}

.hero-form br {
    display: none !important;
}

.cu-form-group p {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpcf7-response-output {
    margin-left: 0px !important;
}

.cu-form-card br {
    display: none !important;
}

.cu-form-submit {
    margin-top: 24px;
}

.an-help-form .wpcf7 {
    width: 100%;
}

.an-help-form br {
    display: none;
}

.bs-form-card br {
    display: none;
}

.an-help-form button {
    margin-top: 24px;
}

.an-help-group p {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-id-643 section.reputation.reputation-light {
    background: #F6F7F8;
}

.bs-serve-flex {
    display: flex;
    gap: 30px;
	justify-content: space-between;
}

.page-id-692 .bs-serve-cols {
    flex-direction: column;
    gap: 13px;
}
.page-id-941 .bs-serve-cols {
    flex-direction: column;
    gap: 13px;
}
.page-id-920 .bs-serve-cols {
    flex-direction: column;
    gap: 13px;
} 

.page-id-692 section.reputation.reputation-light {
    background: #F6F7F8;
}

.page-template-services-master .faq-section {
    background: #F6F7F8;
}
 
.page-id-815 .bs-serve-cols {
    flex-direction: column;
    gap: 13px;
}

.bs-serve h2 {
    max-width: 600px;
}

.gallery-top-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 80px;
}

.gallery-top-content p {
    color: #1B1B1B;
    font-family: Rajdhani;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
    opacity: 0.6;
}

.bs-feature-text p a {
    color: #D34830;
    font-weight: 600;
}

.gallery-top-content p a {
    color: #D34830;
    font-weight: 600;
}

.bs-warn-col {
    flex: auto;
    width: 50%;
}

.bs-warning-cols {
    flex-wrap: wrap;
}

.mt-modal-extra-img {
    width: 48% !important;
}

.mt-modal-extra-imgs {
    display: flex;
    flex-direction: row !important;
}

section.reputation.reputation-light.cl2 {
    background: #F6F7F8;
    border: none;
}

body.error404 .navbar {
    background: #1b1b1b;
}

.nav-prev:hover svg {
    filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(2%) hue-rotate(273deg) brightness(110%) contrast(100%);
}
section.an-band iframe {
    width: 100%;
    min-height: 100%;
}
.an-stat a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.bs-band iframe {
    width: 100%;
    min-height: 512px;
}
.blog-article-body h2, .blog-article-body h3, .blog-article-body h4, .blog-article-body h5, .blog-article-body h6 {
    font-weight: 600;
}
a#mobile-call-now {
    display: none;
}

.reputation-cell a {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}
section.faq-sec2 {
    padding: 100px 0px;
    background: #F6F7F8;
}
.faq-sec2 .faq-item:nth-child(n+6) {
    display: none;
}

.blog-cta-box h3 {
    color: #FFF;
    font-family: Rajdhani;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.bs-quote-name {
    padding-right: 40px;
}
.page-template-anaheim .reputation-cell img {
    mix-blend-mode: multiply;
}
 .hero-form.mobile {
    display: none;
}
button.cu-city-loadmore {
    background: var(--accent);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    transition: 0.3s ease;
    white-space: nowrap;
}

button.cu-city-loadmore:hover {
    background: #b93a24;
}
.mob-btn {
    display: none;
}
.bs-bullet a:hover {
    color: #D34830;
}
.mt-modal-extra-img {
    max-width: 246px !important;
}
.wpcf7-not-valid-tip {
    font-weight: 500 !important;
}
p.hero-sub {
    border-bottom: 3px solid var(--accent);
    padding-bottom: 4px;
    max-width: max-content;
}

span.typed-cursor {
    color: var(--accent);
}
.footer-bottom p a {
    color: #fff !important;
}
.service-p p a {
    color: #D34830;
    font-weight: 600;
}

.footer-bottom a:hover {
    color: #d34830 !important;
}
.an-stat a:hover p {
    color: #d34830;
}
.header-col.topbar-inner a:hover svg {
    filter: brightness(0) saturate(100%) invert(33%) sepia(70%) saturate(931%) hue-rotate(331deg) brightness(99%) contrast(98%);
}

.header-col.topbar-inner a:hover span {
    color: #D34830;
}
.blog-article-body a img {
    object-fit: contain;
    object-position: top;
    height: fit-content;
} 
.blog-article-body p:has(img) {
    opacity: 1 !important;
}

.bs-video-container video {
    width: 100%;
    object-fit: cover;
}
.bs-video-container {
    margin-bottom: 20px;
}

.bs-video-controls .pause { display: none; }
.bs-video-controls .play  { display: block; }
.bs-video-container.is-playing .bs-video-controls .play  { display: none; }
.bs-video-container.is-playing .bs-video-controls .pause { display: block; }
.bs-video-container {
    position: relative;
}
.bs-video-controls svg polygon, .bs-video-controls svg rect {
    fill: #fff;
}
.bs-video-controls {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #fff;
    border-radius: 50%;
}
.bs-video-controls svg {
    width: 40px;
    height: 40px;
}
.is-paused .bs-video-player::-webkit-media-controls {
    display: none !important;
}

.bs-video-container.is-playing .bs-video-controls {
    opacity: 0;
}

.bs-video-container.is-playing:hover .bs-video-controls {
    opacity: 1;
}
.bs-feature-body p:not(:last-child) {
    margin-bottom: 15px;
}


@media (min-height: 900px) and (max-height: 1000px) {
    .container.hero-inner {
        padding-bottom: 180px;
    }
} 

@media (min-width: 1400px) and (max-width: 1800px) {
    .hero-redesign {
        min-height: 100vh;
    }
	.hero-redesign .hero-inner {
    height: 100vh;
}


}


@media (max-width: 1440px) {
    .services-bleed {
        margin-left: var(--pad);
    }
}

.service-card {
    display: flex;
    flex-direction: column;
}

.service-img {
    width: 100%;
    height: 310px;
    flex-shrink: 0;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* body floats up over the image, then grows with content; button hugs bottom */
.service-stack {
    margin: -54px 16px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-body {
    background: var(--white);
    padding: 40px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.service-body h3 {
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
}

.service-body p {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.6;
}

.service-btn {
    width: 100%;
}

/* Swiper: equal-height slides, card fills slide. overflow visible so the
   peeking next card shows; we clip via the section's overflow:hidden instead. */
.services-swiper {
    width: 100%;
    overflow: hidden;
}

.services-swiper .swiper-slide {
    height: auto;
    /* lets flex stretch each slide to the tallest */
    display: flex;
}

.services-swiper .swiper-slide .service-card {
    width: 100%;
}

.services-nav-row {
    display: flex;
    align-items: center;
    gap: 88px;
    margin-top: 60px;
}

/* Fill progress bar: red fill grows left->right, reaching 100% on the last
   slide (width controlled by JS via the realIndex / slide-count ratio). */
.services-progress {
    flex: 1;
    height: 2px;
    background: rgba(27, 27, 27, 0.15);
    position: relative;
    border-radius: 2px;
}

.services-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--accent);
    width: 0;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.carousel-nav {
    display: flex;
    gap: 10px;
}

.nav-btn {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.nav-btn svg {
    width: 18px;
    height: 18px;
}

.nav-prev {
    border: 1px solid var(--accent);
    color: var(--accent);
}

.nav-prev:hover {
    background: var(--accent);
    color: var(--white);
}

.nav-next {
    background: var(--accent);
    color: var(--white);
}

.nav-next:hover {
    background: #b93a24;
}

/* Swiper disabled state for the custom prev/next buttons */
.nav-btn.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.nav-btn {
    cursor: pointer;
}

/* ---- How It Works (redesign: image + animated vertical timeline) ---- */
.how {
    background: var(--white);
    padding: 120px 0;
}

.how .section-head {
    max-width: 600px;
    margin-bottom: 60px;
}

.how-flex {
    display: flex;
    gap: 61px;
    align-items: center;
}

.how-img {
    width: 554px;
    height: 567px;
    flex-shrink: 0;
}

.how-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.how-timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 21px;
    align-items: flex-start;
}

/* the track + steps sit in a row; the Call Now button sits below it */
.how-timeline-row {
    display: flex;
    gap: 21px;
    align-items: stretch;
    width: 100%;
}

/* vertical track with the dots overlaid; the red fill grows on scroll */
.how-track {
    position: relative;
    width: 30px;
    flex-shrink: 0;
    padding: 48px 0;
}

.how-track::before {
    /* full grey track line, centered */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(27, 27, 27, 0.12);
}

.how-track-fill {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: var(--accent);
    transition: height 0.2s linear;
    z-index: 1;
}

.how-dots {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.how-dot {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    background: var(--grey-bg);
    color: var(--accent);
    border: 2px solid var(--accent);
    transition: 0.3s ease;
}

.how-dot.active {
    background: var(--accent);
    color: var(--white);
}

.how-steps-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 0;
    gap: 64px;
}

.how-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.how-step h3 {
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
}

.how-step p {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
}

/* ---- Testimonials ---- */
.testimonials {
    padding: 120px 0;
    border-top: 1px solid rgba(27, 27, 27, 0.15);
}

.testimonials .section-title {
    margin-bottom: 60px;
}

/* Figma: speech-bubble card. Light-grey bubble with a tail at the BOTTOM-LEFT
   — the bottom-left corner drops into a small triangular foot, the rest of the
   bottom edge sits higher (diagonal cut up to the right). Author name with a
   red dash sits BELOW the bubble, right-aligned. Card 400w, bubble area ~443h. */
.testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100% !important;
}

.testimonial-bubble {
    position: relative;
    background: var(--grey-bg);
    padding: 48px 40px 64px;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(27, 27, 27, 0.85);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* notched bubble: the LEFT edge runs full height; the bottom-left corner is
       the lowest point, then a wide diagonal rises up to the right to meet the
       main (higher) bottom edge, which continues across. Matches Figma. */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 40px),
            50px calc(100% - 40px),
            0 100%,
            0 0);
    min-height: -webkit-fill-available;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: -25px;
    padding-right: 40px;
    font-weight: 600;
    font-size: 20px;
    color: var(--ink);
}

.testimonial-author .dash {
    width: 20px;
    height: 2px;
    background: var(--accent);
    display: inline-block;
}

/* 3 reviews in a static grid (replaces the old carousel) */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.testimonials-cta {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

/* ---- Yelp reviews "Load More" batching ----
   Wrapper display:contents rakhta hai taake andar ka .testimonial-card seedha
   grid-item bane (layout bilkul same). Hidden batch display:none. Reveal par
   card cu-card-in animation ke saath fade-in hota hai. */
.yelp-card-wrap {
    display: contents;
}

.yelp-card-wrap.yelp-hidden {
    display: none;
}

.yelp-card-wrap.yelp-revealed .testimonial-card {
    animation: cu-card-in 0.5s ease both;
}

/* button ka default cursor (yeh ab <button> hai, <a> nahi) */
.yelp-load-more {
    cursor: pointer;
    border: 0;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Load More button ka spinner (arrow ki jagah). Default hidden — sirf
   .is-loading state par dikhta hai; us waqt "Load More" label chhup jaata hai. */
.yelp-lm-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: yelp-lm-spin 0.7s linear infinite;
}

.yelp-load-more.is-loading {
    cursor: wait;
}

.yelp-load-more.is-loading .yelp-lm-label {
    display: none;
}

.yelp-load-more.is-loading .yelp-lm-spinner {
    display: inline-block;
}

@keyframes yelp-lm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Testimonials PAGE (featured + yelp grid + popups) ---- */
.testimonials-featured {
    padding: 100px 0;
    border-top: none;
}

.testimonials-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
    row-gap: 48px;
}

/* Each card is a fixed-height speech bubble (Figma: 400 box + 43 tail = 443).
   The text fills the box; "Learn More" sits right after the (clamped) text. */
.testimonials-grid-3 .testimonial-bubble {
    height: 450px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 40px;
}

.testimonials-grid-3 .t-text {
    margin: 0;
    /* preserve paragraph breaks (blank lines) like Figma, and clamp to fill box */
    white-space: pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 13;
    line-clamp: 13;
    overflow: hidden;
    flex: 0 1 auto;
    opacity: 0.8;
}

.yelp-card .t-text {
    -webkit-line-clamp: 12;
    line-clamp: 12;
}

/* "Learn More" link — hidden by default; JS reveals it on overflowing cards.
   Sits directly after the clamped text (no big empty gap). */
.t-learn {
    font-weight: 700;
    color: var(--accent);
    text-decoration: underline;
    align-self: flex-start;
    margin-top: -4px;
    display: none;
    opacity: 0.8;
}

.testimonial-card.is-clamped .t-learn {
    display: inline-block;
}

.t-learn:hover {
    color: #b93a24;
}

/* Yelp review card: stars (left) + date (right) row at the top of the bubble */
.yelp-head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.yelp-head img {
    width: 103px;
    height: 20px;
    flex-shrink: 0;
}

.yelp-date {
    flex: 1;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

/* Yelp Reviews section */
.yelp-reviews {
    padding: 100px 0px;
    background: #F6F7F8;
}

.yelp-title {
    margin-bottom: 60px;
    text-align: center;
}

section.yelp-reviews .testimonial-bubble {
    background: #fff;
}

/* ---- Review popup modal (2 layouts) ---- */
.review-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    opacity: 0;
    visibility: hidden;
}

.review-modal.active {
    opacity: 1;
    visibility: visible;
}

.review-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(20px);
}

.review-dialog {
    position: relative;
    background: var(--white);
    width: 100%;
    max-width: 1030px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.review-modal.active .review-dialog {
    transform: translateY(0);
}

.review-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 30px;
    line-height: 1;
    color: #1b1b1b;
    cursor: pointer;
    border: 1px solid #1b1b1b;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    border-radius: 50px;
}

button.review-close:hover {
    background: var(--accent);
    color: var(--white);
    border: 1px solid var(--accent);
}

.review-close:hover {
    color: var(--accent);
}

/* head: name (left) + yelp stars/date (right, only on yelp type) */
.review-head {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-right: 28px;
}

.review-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.4;
    color: var(--ink);
}

.review-yelp {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.review-yelp img {
    width: 103px;
    height: 20px;
}

.review-date {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

.review-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}

/* ---- Unmatched Reputation ---- */
.reputation {
    background: var(--accent);
    padding: 100px 0;
}

.reputation-title {
    color: var(--white);
    margin-bottom: 60px;
}

.reputation-grid {
    display: flex;
}

.reputation-cell {
    flex: 1;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--white);
    padding: 44px;
}

.reputation-cell img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
} 

.page-template-services-master .reputation-cell img {
	mix-blend-mode: multiply;
} 
.page-template-faqs .hp-aff-cell img img{
	mix-blend-mode: multiply;
} 

/* ---- Serving Southern California (3-up Swiper, inside container) ---- */
.serving {
    padding: 120px 0;
    border-top: 0.25px solid #1b1b1b3b;
}

.serving .section-head {
    margin-bottom: 60px;
}

/* bounded slider: clips inside the container, shows exactly 3 cards */
.serving-swiper {
    width: 100%;
    overflow: hidden;
}

.serving-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.serving-swiper .swiper-slide .city-card {
    width: 100%;
}

.serving .services-nav-row {
    margin-top: 60px;
}

.city-card {
    display: flex;
    flex-direction: column;
}

.city-img {
    height: 360px;
}

.city-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 16px 24px;
    background: var(--grey-bg);
    color: rgba(27, 27, 27, 0.6);
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s ease;
}

.city-arrow {
    width: 20px;
    height: 20px;
    display: inline-flex;
}

.city-card.active .city-label,
.city-card:hover .city-label {
    background: var(--accent);
    color: var(--white);
}

/* ---- Get Free Quote + Affiliations ---- */
.quote-affiliations {
    padding: 100px 0;
    border-top: 1px solid rgba(27, 27, 27, 0.15);
}

.qa-flex {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.quote-box {
    width: 610px;
    flex-shrink: 0;
    background: var(--grey-bg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.quote-title {
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
}

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

.form-row {
    display: flex;
    gap: 16px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
}

.form-group label span {
    color: var(--accent);
}

.form-group input,
.form-group textarea {
    background: var(--white);
    border: 0.25px solid #64646430;
    height: 47px;
    padding: 0 14px;
    font-size: 15px;
}

.form-group textarea {
    height: 94px;
    padding: 12px 14px;
    resize: none;
}

.quote-submit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.quote-policy {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
}

.quote-policy a {
    text-decoration: underline;
}

.affiliations {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.affiliations-title {
    font-weight: 600;
    font-size: 48px;
    line-height: 1;
}

.affiliations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.affiliation-cell {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid #1b1b1b38;
    padding: 44px;
}

.affiliation-cell img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.affiliation-cell-wide {
    grid-column: 1 / -1;
}

/* ============ 9. FOOTER ============ */
#footer {
    background: var(--ink);
    color: var(--white);
    padding-top: 80px;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.footer-top {
    display: flex;
    gap: 80px;
    justify-content: space-between;
}

.footer-about {
    width: 315px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-logo {
    height: 48px;
    width: auto;
}

.footer-about p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
}

.footer-about .btn {
    align-self: flex-start;
}

.footer-links {
    display: flex;
    gap: 100px;
    flex-wrap: wrap;
}

.footer-col h4 {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 24px;
}

.footer-col ul li {
    margin-bottom: 4px;
}

.footer-col ul li a {
    font-weight: 400;
    font-size: 14px;
    line-height: 2.04;
    transition: 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--accent);
}

.footer-contact ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.32;
}

.footer-contact ul li i {
    margin-top: 2px;
    width: 18px;
    text-align: center;
}

.footer-articles h4 {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 24px;
}

.footer-articles-row {
    display: flex;
}

.footer-article {
    flex: 1;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 0.25px solid var(--white);
    border-right: none;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.44;
    transition: 0.3s ease;
}

.footer-article:last-child {
    border-right: 0.25px solid var(--white);
}

.footer-article:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}

.footer-bottom {
    border-top: 0.25px solid var(--white);
    margin-top: 60px;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-bottom p {
    font-weight: 500;
    font-size: 14px;
}

.footer-bottom a {
    text-decoration: underline;
}

.footer-pay {
    display: flex;
    gap: 6px;
    align-items: center;
}

.footer-pay img {
    height: 28px;
    width: auto;
}

/* ============ 10. ANIMATIONS ============ */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Owl overrides */
.owl-carousel .owl-item img {
    width: auto;
}


/* ==========================================================================
   INNER PAGES — shared (banner) + "What is a PI?" page
   ========================================================================== */

/* ---- Inner-page banner (header overlays it; title bottom-center) ---- */
.page-banner {
    position: relative;
    height: 512px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.page-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    object-position: top;
}

.page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.55) 100%);
}

.page-banner-inner {
    position: relative;
    z-index: 2;
    padding-bottom: 64px;
    text-align: center;
}

.page-banner-title {
    font-weight: 600;
    font-size: 86px;
    line-height: 1;
    color: var(--white);
    text-transform: uppercase;
}

/* ---- What is a PI? — intro ---- */
.pi-intro {
    padding: 100px 0;
}

.pi-intro-flex {
    display: flex;
    gap: 125px;
    align-items: flex-start;
    justify-content: space-between;
}

.pi-intro-text {
    width: 610px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pi-intro-img {
    width: 505px;
    flex-shrink: 0;
    position: relative;
}

.pi-intro-img img {
    width: 100%;
    height: 578px;
    object-fit: cover;
}

/* red accent line below the content images (Figma: #d34830, 10px, ~40px gap) */
.pi-img-line {
    display: block;
    width: 100%;
    height: 10px;
    background: var(--accent);
    margin-top: 40px;
}

.pi-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.6;
}

.pi-note {
    background: #fff;
    padding: 24px;
    font-size: 16px;
    line-height: 1.4;
    /* rgba instead of opacity so red links inside stay true accent color */
    color: rgba(27, 27, 27, 0.8);
}

.pi-note a {
    color: var(--accent);
    transition: 0.3s ease;
}

.pi-note a:hover {
    text-decoration: underline;
}

.pi-note-white {
    background: var(--white);
}

.pi-paragraph-after {
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.6;
}

.pi-lead-out {
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
    margin-top: 24px;
}

/* ---- Requirements for Licensure (grey section per Figma) ---- */
.pi-requirements {
    background: var(--grey-bg);
    padding: 100px 0;
}

.pi-req-flex {
    display: flex;
    gap: 125px;
    align-items: flex-start;
}

.pi-req-img {
    width: 505px;
    flex-shrink: 0;
}

.pi-req-img img {
    width: 100%;
    height: 506px;
    object-fit: cover;
}

.pi-req-text {
    width: 610px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pi-req-list-wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
}

.pi-req-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.pi-req-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
}

.pi-req-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 1px;
}

.pi-req-icon img {
    width: 100%;
    height: 100%;
}

/* ---- Reputation light variant (white bg, bordered cells) ---- */
.reputation-light {
    background: var(--white);
}

.reputation-light .reputation-title {
    color: var(--ink);
}

.reputation-light .reputation-cell {
    border-color: rgba(27, 27, 27, 0.12);
}


/* ==========================================================================
   WHAT WE DO page
   ========================================================================== */

/* ---- What We Do intro (text + image, red line below image) ---- */
.wwd-intro {
    padding: 120px 0;
}

.wwd-flex {
    display: flex;
    gap: 125px;
    align-items: flex-start;
    justify-content: space-between;
}

.wwd-text {
    width: 610px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* heading with a 50px red line prefix */
.wwd-heading {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wwd-line {
    width: 50px;
    height: 4px;
    background: var(--accent);
    flex-shrink: 0;
}

.wwd-lead {
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

/* 2-column service list with location icons */
.wwd-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 13px;
}

.wwd-services li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
}

.wwd-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.wwd-ico img {
    width: 100%;
    height: 100%;
}

.wwd-note-2 {
    margin-top: 14px;
}

.wwd-note-2 a {
    color: var(--accent);
}

.wwd-img {
    width: 505px;
    flex-shrink: 0;
    position: relative;
}

.wwd-img img {
    width: 100%;
    height: 578px;
    object-fit: cover;
}

/* ---- Why You Should Hire Us (image left + text right) ---- */
.wwd-hire {
    padding: 100px 0px;
}

.wwd-hire-flex {
    display: flex;
    gap: 125px;
    align-items: flex-start;
}

.wwd-hire-text {
    width: 610px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wwd-hire-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wwd-hire-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.wwd-hire-note {
    font-size: 16px;
    line-height: 1.4;
    /* use rgba (not opacity) so the red links inside stay true accent color */
    color: rgba(27, 27, 27, 0.6);
}

/* phone + email are red, clickable */
.wwd-hire-note a {
    color: var(--accent);
    transition: 0.3s ease;
}

.wwd-hire-note a:hover {
    text-decoration: underline;
}

section.wwd-hire {
    background: #F6F7F8;
}

section.wwd-intro .pi-note {
    background: #F6F7F8;
}


/* ==========================================================================
   COMMUNITY RESOURCES page
   ========================================================================== */

.cr-section {
    padding: 120px 0;
}

/* alternating grey section (Veterans) */
.cr-section-grey {
    background: var(--grey-bg);
    padding: 100px 0;
}

/* section that opens with a top hairline (Security & Charities) */
.cr-section-bordered {
    border-top: 0.25px solid #1b1b1b4d;
}

.cr-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.cr-section .section-title {
    text-align: center;
    width: 100%;
}

/* Bordered logo grid — 3 columns, continuous 0.5px borders.
   Each card = logo box (fixed height) + caption box below it. */
.cr-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.cr-card {
    display: flex;
    flex-direction: column;
    /* collapse adjacent borders so the grid reads as one ruled table */
    margin: -0.25px 0 0 -0.25px;
}

.cr-card-logo {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 48px;
    border: 0.5px solid #1b1b1b3d;
}

/* logo never stretches — contain inside the padded box */
.cr-card-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cr-card-cap {
    flex: 1;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 0.5px solid #1b1b1b3d;
    border-top: none;
}

.cr-card-cap p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    text-align: center;
}

.cr-card-cap a {
    color: var(--accent);
}

.cr-card-cap a:hover {
    text-decoration: underline;
}

/* logo-only cards (Missing Persons / Inmate Search) — no caption box */
.cr-grid-logos .cr-card-logo {
    height: 200px;
}

/* clickable logo cards lift slightly on hover */
a.cr-card .cr-card-logo,
.cr-card a {
    transition: 0.3s ease;
}

a.cr-card:hover .cr-card-logo {
    background: rgba(211, 72, 48, 0.04);
}

/* ---- Professional Affiliations (red band, white-bordered logo grid) ---- */
.cr-affiliations {
    background: var(--accent);
    padding: 100px 0;
}

.cr-affiliations-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.cr-affiliations .section-title {
    color: var(--white);
    text-align: center;
    width: 100%;
}

.cr-aff-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.cr-aff-cell {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 48px;
    border: 0.5px solid var(--white);
    /* collapse adjacent borders into one hairline */
    margin-left: -0.25px;
}

.cr-aff-cell img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ==========================================================================
   BLOG page
   ========================================================================== */

.blog-section {
    padding: 120px 0;
}

/* "Blog" + search bar row */
.blog-head {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 40px;
    margin-bottom: 60px;
}
 
.blog-head h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

.blog-search {
    width: 610px;
    max-width: 100%;
    display: flex;
    align-items: center;
    background: var(--grey-bg);
}

.blog-search input {
    flex: 1;
    min-width: 0;
    background: none;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    height: 48px;
}

.blog-search input::placeholder {
    color: var(--ink);
    opacity: 0.4;
}

.blog-search button {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.blog-search button:hover {
    background: #b93a24;
}

.blog-search button img,
.blog-search button svg {
    width: 24px;
    height: 24px;
}

/* 2-column body: sidebar (420) + main posts (715), gap 105 */
.blog-body {
    display: flex;
    align-items: flex-start;
    gap: 105px;
}

/* ---- Sidebar ---- */
.blog-sidebar {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: sticky;
    top: 40px;
}

.blog-side-block h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 20px;
}

/* recent-articles bordered list */
.blog-recent {
    display: flex;
    flex-direction: column;
}

.blog-recent a {
    border: 0.25px solid #1b1b1b4d;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ink);
    transition: 0.3s ease;
}

/* collapse the doubled border between stacked rows */
.blog-recent a+a {
    border-top: none;
}

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

/* Yelp box */
.blog-yelp-box {
    background: var(--grey-bg);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-yelp-box h3 {
    margin: 0;
    color: #1B1B1B;
    font-family: Rajdhani;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.blog-yelp-box img {
    width: 150px;
    height: 20px;
    object-fit: contain;
}

/* "Don't Go It Alone" red box */
.blog-cta-box {
    background: var(--accent);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-cta-box h3 {
    color: var(--white);
    margin: 0 0 10px;
}

.blog-cta-box p {
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.blog-cta-box .blog-cta-phone {
    background: var(--white);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s ease;
}

.blog-cta-box .blog-cta-phone img,
.blog-cta-box .blog-cta-phone svg {
    width: 20px;
    height: 20px;
}

.blog-cta-box .blog-cta-phone:hover {
    opacity: 0.9;
}

/* ---- Main posts column ---- */
.blog-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.blog-post {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-post-img {
    width: 100%;
    height: 447px;
    overflow: hidden;
}

.blog-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-post:hover .blog-post-img img {
    transform: scale(1.03);
}

.blog-post-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-post-text h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    transition: 0.3s ease;
}

.blog-post a:hover .blog-post-text h2,
a.blog-post-title:hover h2 {
    color: var(--accent);
}

.blog-post-text p {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ink);
    opacity: 0.8;
}

/* ---- Pagination ---- */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 60px;
}

.blog-page-count {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
    color: var(--ink);
}

.blog-page-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.blog-page-numbers {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--white);
    transition: 0.3s ease;
}

.blog-page-btn.active,
.blog-page-btn:hover {
    background: var(--accent);
    color: var(--white);
}

.blog-page-arrow {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--white);
    transition: 0.3s ease;
}

.blog-page-arrow:hover {
    background: #b93a24;
}

.blog-page-arrow svg {
    width: 20px;
    height: 20px;
}

/* ---- Blog Detail (single article) ---- */
.blog-article {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-article-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-article-head h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.08;
    color: var(--ink);
}

.blog-article-date {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #000;
}

/* tall infographic hero — keep its native ratio so it never distorts */
.blog-article-hero {
    width: 100%;
    aspect-ratio: 1336 / 4096;
    overflow: hidden;
}

.blog-article-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-article-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-article-body p {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--ink);
    opacity: 0.8;
}

.blog-article-body a {
    color: var(--accent);
    font-size: inherit;
    text-transform: none;
}

.blog-article-body a:hover {
    text-decoration: underline;
}

/* share row */
.blog-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.blog-share-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.blog-share-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-share-icons a {
    width: 32px;
    height: 32px;
    display: flex;
    transition: 0.3s ease;
}

.blog-share-icons a:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.blog-share-icons img {
    width: 32px;
    height: 32px;
}


/* ==========================================================================
   SERVICE CONTACT page (single banner)
   ========================================================================== */

/* full-screen banner: bg photo + header overlay + heading (bottom-left) + form (bottom-right) */
.sc-banner {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}

.sc-banner .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* dark overlay (Figma rgba(0,0,0,0.2)) */
.sc-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
}

.sc-banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 88px;
    /* leave room for the header at the top; content sits at the bottom */
    padding-top: 200px;
    padding-bottom: 60px;
}

.sc-banner-title {
    flex: 1;
    min-width: 0;
    font-size: 68px;
    font-weight: 600;
    line-height: 1.04;
    color: var(--white);
    text-transform: uppercase;
}

/* reuse the homepage hero white form card on the right */
.sc-banner .hero-form {
    margin: 0;
}


/* ==========================================================================
   CONTACT US page
   ========================================================================== */

/* shared "— heading" with a 50px red accent line before it */
.cu-heading {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cu-heading::before {
    content: '';
    width: 50px;
    height: 5px;
    background: var(--accent);
    flex-shrink: 0;
}

.cu-heading h2 {
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
}

/* ---- Get In Touch (intro + photo) ---- */
.cu-touch {
    padding: 120px 0;
}

.cu-touch-flex {
    display: flex;
    align-items: center;
    gap: 105px;
}

.cu-touch-left {
    width: 525px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
}

.cu-touch-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cu-touch-text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

.cu-touch-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cu-touch-img {
    width: 100%;
    height: 407px;
    overflow: hidden;
}

.cu-touch-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* red accent line under the photo (Figma Line 24) — sits in the 40px gap */
.cu-touch-line {
    width: 100%;
    height: 10px;
    background: var(--accent);
}

/* ---- Form + info (grey band) ---- */
.cu-form-sec {
    background: var(--grey-bg);
    padding: 100px 0;
}

.cu-form-flex {
    display: flex;
    align-items: center;
    gap: 125px;
}

.cu-form-card {
    width: 610px;
    flex-shrink: 0;
    background: var(--white);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cu-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cu-form-row {
    display: flex;
    gap: 16px;
}

.cu-form-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cu-form-group label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
    color: var(--ink);
}

.cu-form-group label span {
    color: var(--accent);
}

.cu-form-group input,
.cu-form-group textarea {
    width: 100%;
    background: var(--white);
    border: 0.25px solid #64646475;
    height: 47px;
    padding: 0 14px;
    font-size: 16px;
    color: var(--ink);
    font-weight: 500;
} 

.cu-form-group textarea {
    height: 128px;
    padding: 12px 14px;
    resize: none;

}

.cu-form-group input:focus,
.cu-form-group textarea:focus {
    border-color: var(--accent);
}

.cu-form-submit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 364px;
    max-width: 100%;
}

.cu-form-policy {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
    color: var(--ink);
}

.cu-form-policy a {
    color: var(--ink) !important;
	font-weight: 500 !important;
    font-size: inherit;
    text-transform: none;
    text-decoration: underline;
}

/* info column */
.cu-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cu-info-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cu-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
}

.cu-info-item .cu-info-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    /* icons are ink/black in Figma (not red) */
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cu-info-item .cu-info-icon i {
    font-size: 20px;
}

.cu-info-item span:not(.cu-info-icon) {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.32;
    color: var(--ink);
}

/* hover affordance on the linked contact rows */
.cu-info-item:hover {
    color: var(--accent);
}

.cu-info-item:hover .cu-info-icon,
.cu-info-item:hover span:not(.cu-info-icon) {
    color: var(--accent);
}

/* ---- Map sections (full-bleed Google Maps embed) ---- */
.cu-map {
    width: 100%;
    height: 512px;
    overflow: hidden;
}

.cu-map img,
.cu-map iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}

.cu-directions {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.cu-directions h2 {
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    text-align: center;
}

/* ---- Serving — static 4x3 grid (no slider on this page) ---- */
.cu-serving {
    padding: 120px 0;
}

.cu-serving-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.cu-serving-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cu-city-card {
    display: flex;
    flex-direction: column;
}

.cu-city-img {
    width: 100%;
    height: 221px;
    overflow: hidden;
}

.cu-city-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cu-city-card:hover .cu-city-img img {
    transform: scale(1.04);
}

.cu-city-label {
    background: var(--grey-bg);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(27, 27, 27, 0.6);
    transition: 0.3s ease;
}

/* first card label is highlighted red in Figma serving sliders elsewhere; here
   all are grey per the static grid design */
.cu-city-card:hover .cu-city-label {
    background: var(--accent);
    color: var(--white);
}

.cu-city-arrow {
    width: 20px;
    height: 20px;
    display: inline-flex;
}

.cu-city-arrow svg {
    width: 100%;
    height: 100%;
}

/* next-batch cards — hidden until the "loading" delay finishes, then fade in */
.cu-city-more {
    display: none;
}

.cu-city-more.revealed {
    display: flex;
    animation: cu-card-in 0.5s ease both;
}

@keyframes cu-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* hide the loading indicator once the next batch has loaded */
.cu-serving-loading.done {
    display: none;
}

/* "Loading..." indicator + progress bar (Figma node 734:3379) */
.cu-serving-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 196px;
    margin: 0 auto;
}

.cu-loading-text {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    color: var(--accent);
    text-align: center;
}

/* faint full track with a short red fill on top */
.cu-loading-bar {
    position: relative;
    width: 196px;
    height: 3px;
    background: rgba(27, 27, 27, 0.15);
    overflow: hidden;
}

.cu-loading-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 85px;
    background: var(--accent);
    animation: cu-loadbar 1.6s ease-in-out infinite;
}

@keyframes cu-loadbar {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(80px);
    }

    100% {
        transform: translateX(196px);
    }
}


/* ==========================================================================
   404 — Page Not Found
   ========================================================================== */
.error-404 {
    padding: 200px 0 140px;
}

.error-404-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.error-404-code {
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--ink);
}

.error-404-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
}

.error-404-text {
    font-size: 20px;
    font-weight: 500;
    color: var(--accent);
    max-width: 620px;
    margin: 0;
}

.error-404-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 16px 40px;
    background: var(--ink);
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    border-radius: 999px;
    transition: background 0.25s ease, transform 0.25s ease;
}
.error-404-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
}
p.cu-form-policy a:hover {
    color: #d34830 !important;
}
.cr-join .faq-item:last-child {
    border: none;
}

/* tablet / mobile */
@media (max-width: 768px) {
    .error-404 {
        padding: 80px 0 96px;
    }

    .error-404-code {
        font-size: 96px;
    }

    .error-404-title {
        font-size: 30px;
    }

    .error-404-text {
        font-size: 17px;
    }
}


/* ==========================================================================
   CONTENT PAGE (Text) — Privacy Policy, Terms, Retainer Agreement, etc.
   Editor content ko readable, centered column mein render karta hai.
   ========================================================================== */
.content-page {
    padding: 80px 0 100px;
}

.content-page-inner {
    max-width: 900px;
}

/* editor se aane wale text elements ka spacing/typography */
.content-page-inner p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 20px;
}

.content-page-inner h2,
.content-page-inner h3,
.content-page-inner h4 {
    color: var(--ink);
    font-weight: 700;
    line-height: 1.25;
    margin: 40px 0 16px;
}

.content-page-inner h2 {
    font-size: 30px;
}

.content-page-inner h3 {
    font-size: 24px;
}

.content-page-inner h4 {
    font-size: 20px;
}

/* pehle element ka upar ka margin hata do */
.content-page-inner> :first-child {
    margin-top: 0;
}

.content-page-inner ul,
.content-page-inner ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.content-page-inner li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 8px;
}

.content-page-inner a {
    color: var(--accent);
    text-decoration: underline;
    word-break: break-word;
}

.content-page-inner a:hover {
    text-decoration: none;
}

.content-page-inner img {
    max-width: 100%;
    height: auto;
}

.content-page-inner strong {
    font-weight: 700;
}

/* tablet / mobile */
@media (max-width: 768px) {
    .content-page {
        padding: 56px 0 72px;
    }

    .content-page-inner p,
    .content-page-inner li {
        font-size: 16px;
    }
	.content-page-inner strong {
    font-weight: 700;
	font-size: 20px;
}

    .content-page-inner h2 {
        font-size: 25px;
    }

    .content-page-inner h3 {
        font-size: 21px;
    }
}


/* ==========================================================================
   ANAHEIM (city) page
   ========================================================================== */

/* ---- PI intro (heading + image/caption + text + fun-facts) ---- */
.an-intro {
    padding: 120px 0;
}

.an-intro-head {
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 40px;
}

.an-intro-flex {
    display: flex;
    align-items: start;
    gap: 124px;
}

/* left: image + caption box */
.an-intro-visual {
    width: 611px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.an-intro-img {
    width: 100%;
    overflow: hidden;
}

.an-intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.an-intro-caption {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 0.25px solid rgb(27 27 27 / 31%);
    border-top: none;
}

.an-intro-caption p {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    text-align: center;
}

/* right: paragraphs + fun-facts box */
.an-intro-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.an-intro-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-intro-text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

.an-intro-text strong {
    font-weight: 600;
    opacity: 1;
}

.an-funfacts {
    background: var(--grey-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.an-funfacts h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.an-funfacts p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.46;
    color: var(--ink);
    opacity: 0.8;
}

/* ---- Stats row (grey band) + city band image ---- */
.an-stats {
    background: var(--grey-bg);
    padding: 100px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.an-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px;
    text-align: center;
}

.an-stat-icon {
    width: 64px;
    height: 64px;
}

.an-stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.an-stat h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
}

.an-stat p {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #000;
    opacity: 0.6;
    word-break: break-word;
}

.an-band {
    width: 100%;
    height: 540px;
    overflow: hidden;
}

.an-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- How May We Help You? (full-width form) ---- */
.an-help {
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.an-help h2 {
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    text-align: center;
    margin-bottom: 56px;
}

.an-help-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* keep the submit button at its natural width (left-aligned), per Figma */
    align-items: flex-start;
}

/* fields block spans the full form width */
.an-help-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-help-row {
    display: flex;
    gap: 16px;
}

.an-help-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.an-help-group label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
    color: var(--ink);
}

.an-help-group label span {
    color: var(--accent);
}

.an-help-group input,
.an-help-group textarea {
    width: 100%;
    background: var(--white);
    border: 0.25px solid #6464645e;
    height: 47px;
    padding: 0 14px;
    font-size: 16px;
    color: var(--ink);
}

.an-help-group textarea {
    height: 128px;
    padding: 12px 14px;
    resize: none;
}

.an-help-group input:focus,
.an-help-group textarea:focus {
    border-color: var(--accent);
}


/* ==========================================================================
   CAREERS page
   ========================================================================== */

/* ---- Join LA Intelligence (intro + accordion + photo) ---- */
.cr-join {
    padding: 120px 0;
}

.cr-join-flex {
    display: flex;
    align-items: flex-start;
    gap: 125px;
}

.cr-join-left {
    width: 610px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cr-join-head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cr-join-head .cu-heading h2 {
    font-size: 62px;
}

.cr-join-head p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

/* bullet points with red location icons */
.cr-bullets {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.cr-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cr-bullet img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cr-bullet span {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

/* accordion (grey wrapper, reuses .faq-item structure) */
.cr-accordion {
    background: var(--grey-bg);
    padding: 8px 0;
    width: 100%;
}

/* right photo + red line */
.cr-join-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cr-join-img {
    width: 100%;
    height: 628px;
    overflow: hidden;
}

.cr-join-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cr-join-line {
    width: 100%;
    height: 10px;
    background: var(--accent);
}

/* ---- Job listings (2x2 grid of cards) ---- */
.cr-jobs {
    padding: 120px 0;
    background: #F6F7F8;
}

.cr-jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cr-job {
    background: var(--white);
    border: 0.25px solid rgba(27, 27, 27, 0.15);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}


.cr-job h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

.cr-job-bar {
    width: 40px;
    height: 3px;
    background: var(--accent);
}

.cr-job-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--accent);
}

.cr-job p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(27, 27, 27, 0.6);
}

/* ---- Benefits (4 icon cards) ---- */
.cr-benefits {
    padding: 100px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.cr-benefit {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px;
    text-align: center;
}

.cr-benefit-icon {
    width: 64px;
    height: 64px;
}

.cr-benefit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cr-benefit h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
}

.cr-benefit p {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #000;
    opacity: 0.6;
}

/* ---- Apply form (image + form, top hairline) ---- */
.cr-apply {
    border-top: 0.25px solid #1b1b1b66;
    padding: 120px 0;
}

.cr-apply-flex {
    display: flex;
    align-items: stretch;
    gap: 60px;
}

.cr-apply-img {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cr-apply-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cr-apply-card {
    width: 610px;
    flex-shrink: 0;
    background: var(--grey-bg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cr-apply-card h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

.cr-apply-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cr-apply-row {
    display: flex;
    gap: 16px;
}

.cr-apply-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-apply-group label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.64;
    color: var(--ink);
}

.cr-apply-group label span {
    color: var(--accent);
}


.cr-apply-group input,
.cr-apply-group textarea {
    width: 100%;
    background: var(--white);
    border: 0.25px solid #6464645e;
    height: 47px;
    padding: 0 14px;
    font-size: 16px;
    color: var(--ink);
}

.cr-apply-group textarea {
    height: 94px;
    padding: 12px 14px;
    resize: none;
}

.cr-apply-group input:focus,
.cr-apply-group textarea:focus {
    border-color: var(--accent);
}

/* drag-and-drop upload */
.cr-upload {
    width: 100%;
    background: var(--white);
    border: 0.25px dashed var(--border-grey);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

.cr-upload:hover {
    border-color: var(--accent);
}

.cr-upload img {
    width: 20px;
    height: 20px;
}

.cr-upload p {
    font-size: 16px;
    line-height: 20px;
    color: rgba(27, 27, 27, 0.6);
    text-align: center;
}

.cr-upload input[type="file"] {
    display: none;
}


/* ==========================================================================
   SERVICE (Bug Sweeps) page
   ========================================================================== */

/* ---- Watched? / Why Vital — image + text (square/landscape) ---- */
.bs-feature {
    padding: 120px 0;
}

.bs-feature-flex {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 8vw, 124px);
}

.bs-feature-img {
    flex: 0 1 611px;
    min-width: 0;
    overflow: hidden;
}

.bs-feature-img.is-square {
    width: 611px;
    max-width: 100%;
    height: auto;
}

.bs-feature-img.is-land {
    width: 611px;
    max-width: 100%;
    aspect-ratio: 611 / 433;
    height: auto;
}

.bs-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bs-feature-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bs-feature-text h2 {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.bs-feature-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 505px;
}

.bs-feature-body p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

/* ---- Clients + quote form (grey band) ---- */
.bs-clients {
    background: var(--grey-bg);
    padding: 100px 0;
}

.bs-clients-flex {
    display: flex;
    align-items: center;
    gap: clamp(40px, 8vw, 125px);
}

.bs-clients-left {
    width: 505px;
    max-width: 100%;
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bs-clients-left h2 {
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

.bs-clients-cols {
    display: flex;
    gap: 13px;
}

.bs-clients-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.bs-bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bs-bullet img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.bs-bullet span {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

.bs-clients-note {
    background: var(--white);
    padding: 24px;
}

.bs-clients-note p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.48;
    color: var(--ink);
    opacity: 0.8;
}

/* quote form card (reuses cu-form styles via bs-form) */
.bs-form-card {
    width: 610px;
    max-width: 100%;
    flex: 1 1 480px;
    min-width: 0;
    background: var(--white);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---- What Is a Bug Sweep? (centered head + full-bleed image) ---- */
.bs-whatis {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.bs-centerhead {
    max-width: 1070px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 0 var(--pad);
}

.bs-centerhead h2 {
    font-size: 62px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.bs-centerhead p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

.bs-band {
    width: 100%;
    height: 512px;
    overflow: hidden;
}

.bs-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Gallery (4-col cards w/ caption) ---- */
.bs-gallery {
    padding: 100px 0px;
}

.bs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
	align-items:stretch;
}

.bs-gallery-card {
    display: flex;
    flex-direction: column;
	border: 0.25px solid rgba(27, 27, 27, 0.3);
}

.bs-gallery-img {
    width: 100%;
    height: 413px;
    overflow: hidden;
}

.bs-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bs-gallery-cap {
    padding: 20px;
/*     border: 0.25px solid rgba(27, 27, 27, 0.3); */
    border-top: none;
    text-align: center;
}

.bs-gallery-cap p {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #000;
}

.bs-gallery-cap p {
    min-height: 36px;
}

/* ---- We Serve (grey band, title + 2-col bullets) ---- */
.bs-serve {
    background: var(--grey-bg);
    padding: 100px 0;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.bs-serve h2 {
    flex: 1;
    font-size: 62px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.bs-serve-cols {
    max-width: 505px;
    flex-shrink: 0;
    display: flex;
    gap: 60px;
    justify-content: flex-start;
	padding-top: 10px;
}

.bs-serve-col {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* ---- Warning Signs (centered head + 2 bordered columns + closing) ---- */
.bs-warning {
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.bs-warning .bs-centerhead {
    padding: 0;
}

.bs-warning-cols {
    width: 100%;
    display: flex;
}

.bs-warn-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border: 0.25px solid #1b1b1b3d !important;
}

.bs-warn-col+.bs-warn-col {
    border-left: none;
}

.bs-warn-col h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

.bs-warn-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.bs-warn-close {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
    text-align: center;
    max-width: max-content;
}

.bs-warn-close strong {
    font-weight: 600;
    color: var(--accent);
    opacity: 1;
}

/* ---- Client testimonials (3 quote cards) ---- */
.bs-quotes {
    background: var(--grey-bg);
    padding: 120px 0;
}

.bs-quotes-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.bs-quotes-inner>h2 {
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    text-align: center;
    width: 100%;
}

.bs-quotes-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bs-quote-card {
    background: var(--white);
    border-radius: 8px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bs-quote-card p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.8;
}

.bs-quote-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.bs-quote-name::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--ink);
    flex-shrink: 0;
}

.bs-quote-name span {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    opacity: 1;
}


/* ==========================================================================
   MEET THE TEAM page
   ========================================================================== */

/* ---- Intro (image + heading + text + note) ---- */
.mt-intro {
    padding: 120px 0;
}

.mt-intro-flex {
    display: flex;
    align-items: center;
    gap: clamp(40px, 8vw, 125px);
}

.mt-intro-col {
    flex: 0 1 505px;
    min-width: 0;
    width: 505px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mt-intro-img {
    width: 100%;
    aspect-ratio: 505 / 578;
    overflow: hidden;
}

.mt-intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* red accent line under the intro photo (Figma Line 24) */
.mt-intro-line {
    width: 100%;
    height: 10px;
    background: var(--accent);
}

.mt-intro-right {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mt-intro-head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mt-intro-head .cu-heading h2 {
    font-size: 62px;
}

.mt-intro-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mt-intro-text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

.mt-intro-note {
    background: var(--grey-bg);
    padding: 24px;
}

.mt-intro-note p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.8;
}

.mt-intro-note strong {
    color: var(--accent);
    font-weight: 600;
    opacity: 1;
}

/* ---- Team cards (grey band) ---- */
.mt-team {
    background: var(--grey-bg);
    padding: 100px 0;
}

.mt-team-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.mt-team-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mt-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: center;
}

.mt-card-img {
    width: 100%;
    height: 295px;
    overflow: hidden;
}

.mt-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}

.mt-card:hover .mt-card-img img {
    transform: scale(1.05);
}

.mt-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 0.25px solid rgba(27, 27, 27, 0.5);
    border-top: none;
    /* transparent by default (sits on the grey band), white on hover — per Figma */
    background: transparent;
    transition: background 0.3s ease;
}

.mt-card:hover .mt-card-meta {
    background: var(--white);
}

.mt-card-name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    transition: 0.3s ease;
}

.mt-card:hover .mt-card-name {
    color: var(--accent);
}

.mt-card-role {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #000;
}

/* ---- Team member popup (modal) ---- */
.mt-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
}

.mt-modal.active {
    opacity: 1;
    visibility: visible;
}

.mt-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(20px);
}

.mt-modal-dialog {
    position: relative;
    z-index: 2;
    width: 1102px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    background: var(--white);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.mt-modal.active .mt-modal-dialog {
    transform: translateY(0);
}

/* the dialog scrolls internally when content is tall */
.mt-modal-scroll {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding: 48px;
    overflow-y: auto;
    width: 100%;
    /* Scrollbar Figma jaisa — accent thumb, halka track (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(27, 27, 27, 0.1);
}

/* Scrollbar — WebKit (Chrome/Edge/Safari): accent thumb Figma ke mutabiq */
.mt-modal-scroll::-webkit-scrollbar {
    width: 8px;
}

.mt-modal-scroll::-webkit-scrollbar-track {
    background: rgba(27, 27, 27, 0.1);
    border-radius: 8px;
}

.mt-modal-scroll::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 8px;
}

.mt-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #b93c27;
}

/* simple (bio-only) variant keeps the photo full-bleed, no padding */
.mt-modal-dialog.is-simple .mt-modal-scroll {
    padding: 0;
    gap: 0;
}

/* ---- left column ---- */
.mt-modal-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;

}

.mt-modal-dialog.is-simple .mt-modal-left {
    gap: 0;
}

.mt-modal-img {
    width: 295px;
    height: 295px;
    overflow: hidden;
    flex-shrink: 0;
}

/* simple variant: tall full-height image */
.mt-modal-dialog.is-simple .mt-modal-img {
    width: 515px;
    height: auto;
    align-self: stretch;
}

.mt-modal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.mt-sec:nth-child(4) h4,
.mt-sec:nth-child(5) h4 {
    font-size: 18px;
}


/* ---- popup extra images (member_images) — headshot ke neeche stacked ---- */
.mt-modal-extra-imgs {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.mt-modal-extra-img {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.mt-modal-dialog.is-simple .mt-modal-extra-img {
    width: 515px;
    max-width: 100%;
}

.mt-modal-extra-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ---- right column ---- */
.mt-modal-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mt-modal-dialog.is-simple .mt-modal-body {
    padding: 40px;
}

.mt-modal-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.mt-modal-head h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.mt-modal-head span {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

/* generic section (sidebar + body share these) */
.mt-sec {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mt-sec h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.mt-sec h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.mt-modal-bio p,
.mt-sec-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
}

.mt-modal-bio {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* job entry: bold title + role/description */
.mt-job {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mt-job-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.mt-job-desc {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}

.mt-job-desc strong {
    font-weight: 600;
}

/* bullet list with red target icons */
.mt-bullets {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.mt-bullet {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mt-bullet img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.mt-bullet span {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
}

/* two-up bullet columns (J.P. skills) */
.mt-bullets-2 {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.mt-bullets-2 .mt-bullets {
    flex: 1;
    min-width: 220px;
}

/* close button */
.mt-modal-close {
    position: absolute;
    top: 5px;
    right: 20px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
    border: 1px solid #1b1b1b;
	padding-top: 2px;
}

.mt-modal-close:hover {
    background: var(--accent);
    color: var(--white);
}


/* ==========================================================================
   FAQs page
   ========================================================================== */

.faq-section {
    padding: 120px 0;
}

/* The Figma list column is narrower than the full container (205px side
   padding around a 1440px frame). Centre the block and cap its width. */
.faq-inner {
    max-width: 1030px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.faq-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.faq-head .section-title {
    font-size: 62px;
}

.faq-head .section-desc {
    max-width: 100%;
}

/* Accordion list */
.faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    border-bottom: 0.25px solid #1b1b1b52;
    padding: 20px;
}

.faq-q {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.faq-q-text {
    flex: 1 0 0;
    min-width: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
}

/* +/× icon — single SVG that rotates 45° when open (plus becomes cross) */
.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform 0.4s ease;
}

.faq-icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--ink);
    border-radius: 1px;
}

/* horizontal bar */
.faq-icon span:nth-child(1) {
    width: 18px;
    height: 2px;
    transform: translate(-50%, -50%);
}

/* vertical bar */
.faq-icon span:nth-child(2) {
    width: 2px;
    height: 18px;
    transform: translate(-50%, -50%);
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

/* answer — smooth height animation via max-height */
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease;
    opacity: 0;
    margin-top: 0;
}

.faq-item.open .faq-a {
    opacity: 1;
    margin-top: 20px;
}

.faq-a p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.6;
}

.page-id-856 section.bs-warning {
    padding: 0px !important;
}

.page-template-templatesservices-master-php p a {
    color: #D34830;
    font-weight: 600;
}

.page-id-856 section.reputation.reputation-light {
    background: #F6F7F8;
}

/* .bs-feature-text h2 {
    font-size: 52px;
} */

.page-id-874 section.reputation.reputation-light {
    background: #F6F7F8;
}

.page-id-880 section.bs-warning {
    padding-top: 0px;
}

section.bs-feature:nth-child(3) {
    padding-top: 0px;
}

section.bs-feature:nth-child(3) .bs-feature-flex {
    flex-direction: row-reverse;
}

.gallery-top-content ul li {
    color: #1B1B1B;
    font-family: Rajdhani;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    opacity: 0.6;
    list-style: disc;
    margin-left: 15px;
}

.gallery-top-content ol li {
    color: #1B1B1B;
    font-family: Rajdhani;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    opacity: 0.6;
    list-style: decimal;
    margin-left: 15px;
}

.gallery-top-content ol {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gallery-top-content ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-id-890 section.bs-gallery {
    padding-bottom: 30px;
}

.page-id-890 .bs-feature:nth-child(6) {
    padding-top: 0px;
}

.page-id-903 section.reputation.reputation-light {
    background: #F6F7F8;
    border: none;
}
.page-id-1028 section.reputation.reputation-light {
    padding-top: 0px;
}
.page-id-1025 section.bs-gallery {
    padding-top: 0px;
    padding-bottom: 0px;
}


.page-id-914 .gallery-top-content {
    padding-bottom: 0px !important;
}

.page-id-914 section.bs-gallery {
    padding-top: 0px;
}

.page-id-914 section.reputation.reputation-light {
    background: #F6F7F8;
}

/* Caret arrow ko <span class="nav-caret"> mein wrap kiya gaya hai. Rotation
   span par hoti hai (SVG root par CSS transform Chrome mein reliably apply nahi
   hota — filter chalta hai par transform nahi), color/accent filter SVG par. */
.nav-caret {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.desktop-nav>li>a svg {
    display: block;
    transition: filter 0.3s ease;
}

/* Arrow accent (filter) — link/dropdown hover par SVG ka rang accent */
.desktop-nav>li>a:hover svg,
.desktop-nav>li.has-dropdown:hover>a svg {
    filter: brightness(0) saturate(100%) invert(19%) sepia(62%) saturate(7452%) hue-rotate(356deg) brightness(97%) contrast(122%);
}

/* Arrow upward-rotate — link par hover ho YA dropdown open ho (panel hover) */
.desktop-nav>li>a:hover .nav-caret,
.desktop-nav>li.has-dropdown:hover>a .nav-caret {
    transform: rotate(180deg);
}

.mt-modal-left .mt-sec {
    max-width: 295px !important;
}

section.wwd-intro .pi-note p {
    opacity: 0.8;
}

.pi-note p {
    opacity: 0.8;
}

.cr-card-cap strong {
    color: #D34830;
    font-family: Rajdhani;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}
.content-page-inner strong {
    font-weight: 700;
	font-size: 20px;
}



/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1400px) {
    .cu-form-flex {
        gap: 65px;
    }

    .cu-form-card {
        width: 560px;
    }

    .cr-join-flex {
        gap: 65px;
    }

    .cr-join-left {
        width: 510px;
    }

    .cr-join-head .cu-heading h2 {
        font-size: 52px;
    }

    .footer-links {
        display: flex;
        gap: 70px;
    }

    .footer-top {
        gap: 60px;
    }

    .welcome-flex {
        display: flex;
        gap: 35px
    }

    .quote-box {
        width: 560px;
    }

    .navbar {
        margin: 0px 20px;
        padding: 20px 40px;
    }

    .pi-intro-flex {
        gap: 65px;
    }

    .pi-intro-img {
        width: 390px;
    }

    .pi-req-flex {
        display: flex;
        gap: 65px;
    }

    .pi-req-img {
        width: 435px;
    }

    .pi-req-text {
        width: 560px;
    }

    .wwd-flex {
        display: flex;
        gap: 65px;
    }

    .wwd-text {
        width: 540px;
    }

    .wwd-img {
        width: 465px;
    }

    .wwd-hire-flex {
        display: flex;
        gap: 65px;
    }

    .wwd-hire-text {
        width: 520px;
    }

    .an-intro-flex {
        gap: 64px;
    }

    .an-intro-visual {
        width: 541px;
    }

    .cr-apply-card {
        width: 550px;
    }

    .cr-apply-flex {
        gap: 40px;
    }

    .bs-feature-flex {
        gap: clamp(40px, 4vw, 124px);
    }

    .bs-feature-text h2 {
        font-size: 52px;
    }

    .sc-banner-title {
        font-size: 56px;
    } 
	.bs-serve h2 {
    font-size: 52px; 
	}
	

/*     section.bs-serve .container {
        padding: 0px !important;
    } */

    .service-body h3 {
        min-height: 60px;
    }










}



/* iPad Pro */
@media (max-width: 1200px) {

    :root {
        --pad: 60px;
    }

    .section-title {
        font-size: 52px;
    }

    .topbar-inner {
        padding-right: 30px;
    }

    /* ---- "What is a PI?" page: stack the image/text columns below 1200 ---- */
    .page-banner-title {
        font-size: 62px;
    }

    .pi-intro {
        padding: 80px 0;
    }

    .pi-intro-flex,
    .pi-req-flex,
    .wwd-flex,
    .wwd-hire-flex {
        flex-direction: column;
        gap: 48px;
        align-items: stretch;
    }

    .pi-intro-text,
    .pi-intro-img,
    .pi-req-text,
    .pi-req-img,
    .wwd-text,
    .wwd-img,
    .wwd-hire-text {
        width: 100%;
    }

    /* image goes BELOW the text on the intro (text-first), keep visual order */
    .pi-intro-img img {
        height: auto;
        max-height: auto;
    }

    .pi-req-img img {
        height: auto;
        max-height: auto;
    }

    .wwd-img img {
        height: auto;
    }

    .wwd-intro {
        padding: 80px 0;
    }

    .wwd-hire {
        padding-bottom: 80px;
    }

    .pi-requirements {
        padding: 80px 0px;
    }

    .pi-req-list-wrap {
        margin-top: 60px;
    }

    /* welcome: 610 + 125 + 505 no longer fits below 1200 -> stack it cleanly
       so text never gets cut. Center the stacked column. */
    .welcome {
        padding: 90px 0;
    }

    .welcome-flex {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .welcome-content {
        width: 100%;
        max-width: 48%;
        gap: 20px;
    }

    /* keep the big+overlap image composition but let it scale to the column */
    .welcome-images {
        width: 100%;
        max-width: 48%;
        height: auto;
        aspect-ratio: 610 / 652;
    }

    .welcome-img-big {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .welcome-img-small {
        left: 52%;
        top: 55%;
        width: 48%;
        height: auto;
        aspect-ratio: 1;
        border-width: 14px;
        display: none;
    }

    /* section vertical rhythm tightened for tablets */
    .how,
    .testimonials,
    .serving {
        padding: 90px 0;
    }

    .services,
    .reputation,
    .quote-affiliations {
        padding: 90px 0;
    }

    /* testimonials: 3 tall bubbles don't fit comfortably -> single column */

    .qa-flex {
        flex-wrap: wrap;
    }

    .quote-box {
        width: 100%;
    }

    .sc-banner-inner {
        gap: 20px;
    }
	.an-intro-head {
    font-size: 52px;
	}
	.an-help h2 {
    font-size: 52px;
	}
	.cu-heading h2 {
    font-size: 52px;
	}
	.cu-directions h2 {
    font-size: 52px;
	}
	.bs-clients-left h2 {
    font-size: 52px;
	}
	
	
}

/* Switch to hamburger below 1100px (covers iPad Pro portrait, etc.) */
@media (max-width: 1100px) {

    .desktop-nav,
    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .navbar {
        padding: 16px 40px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
        justify-content: space-between;
    }

    .testimonial-bubble {
        padding: 20px 20px 80px 20px;
    }

    .footer-top {
        flex-wrap: wrap;
    }

    .footer-about {
        width: 100%;
        gap: 30px;
        align-items: start;
    }

    .footer-article {
        font-size: 16px;
    }

    .blog-body {
        gap: 35px;
    }

    .blog-sidebar {
        width: 340px;
    }

    .cu-form-flex {
        flex-direction: column-reverse;
        gap: 50px;
    }

    .cu-form-card {
        width: 100%;
    }

    .cu-info {
        width: 100%;
    }

    .cr-join-flex {
        flex-direction: column;
    }

    .cr-join-left {
        width: 100%;
    }

    .cr-join-right {
        width: 100%;
    }

    .cr-apply-flex {
        flex-direction: column;
    }

    .cr-apply-card {
        width: 100%;
    }

    section.cr-benefits.fade-in.visible {
        padding: 60px 20px;
    }

    .bs-feature-flex {
        flex-direction: column;
    }

    .bs-feature-img.is-square {
        width: 100%;
    }

    .bs-feature-body {
        max-width: 100%;
    }

    .bs-feature-img.is-land {
        width: 100%;
    }

    .container.bs-centerhead {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-title {
        font-weight: 600;
        font-size: 50px;
    }

    .how-steps-list {
        padding: 0px 0;
        gap: 30px;
    }

    .how-step {
        gap: 15px;
    }

    .an-stats {
        padding: 50px 20px;
    }

    .hero-sub {
        font-size: 36px;
    }

    .footer-links {
        width: 100%;
        justify-content: space-between;
    }

    .mt-intro-head .cu-heading h2 {
        font-size: 52px;
    }

    .mt-card-meta {
        padding: 10px;
    }

    .faq-head .section-title {
        font-size: 52px;
    }
.bs-gallery-cap p {
    min-height: 54px;
}
.mob-btn {
    display: block !important;
}
	





}

/* iPad */
@media (max-width: 991px) {
    .mt-intro-right {
        flex: auto;
    }
    .bs-gallery-cap p {
        min-height: 44px;
    }
    :root {
        --pad: 40px;
    }

    /* service-contact banner: stack heading + form */
    .sc-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding-top: 180px;
        padding-bottom: 48px;
    }

    .sc-banner-title {
        font-size: 52px;
    }

    /* keep this page's form visible (overrides the homepage hero-form hide) */
    .sc-banner .hero-form {
        display: flex;
        width: 100%;
        max-width: 560px;
    }

    .section-title {
        font-size: 44px;
    }

    /* meet the team: stack intro, 2-up team grid */
    .mt-intro,
    .mt-team {
        padding: 80px 0;
    }

    .mt-intro-head .cu-heading h2 {
        font-size: 44px;
    }

    .mt-intro-flex {
        flex-direction: column;
        gap: 40px;
        align-items: stretch;
    }

    .mt-intro-col {
        width: 100%;
    }

    .mt-intro-right {
        width: 100%;
    }

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

    /* popup: stack into one column on narrower screens */
    .mt-modal-dialog {
        max-height: 88vh;
        width: 640px;
    }

    .mt-modal-scroll,
    .mt-modal-dialog.is-simple .mt-modal-scroll {
        flex-direction: column;
        gap: 32px;
        padding: 32px;
    }

    .mt-modal-left {
        width: 100%;
    }

    .mt-modal-img,
    .mt-modal-dialog.is-simple .mt-modal-img {
        width: 100%;
        height: auto;
        align-self: auto;
    }

    /* extra images mobile pe full-width */
    .mt-modal-dialog.is-simple .mt-modal-extra-img {
        width: 100%;
    }

    .mt-modal-dialog.is-simple .mt-modal-body {
        padding: 0;
    }

    /* bug sweeps: stack features, narrower heads, 2-up gallery/quotes */
    .bs-feature,
    .bs-warning {
        padding: 80px 0;
    }

    .bs-feature-flex {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }

    .bs-feature-img.is-square,
    .bs-feature-img.is-land {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 11;
    }

    .bs-feature-text h2,
    .bs-clients-left h2,
    .bs-serve h2,
    .bs-centerhead h2,
    .bs-quotes-inner>h2 {
        font-size: 44px;
    }

    .bs-clients,
    .bs-quotes {
        padding: 80px 0;
    }

    .bs-clients-flex {
        flex-direction: column;
        gap: 48px;
        align-items: stretch;
    }

    .bs-clients-left,
    .bs-form-card {
        width: 100%;
    }

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

    .bs-serve {
        flex-direction: column;
        gap: 32px;
        padding: 60px 40px;
    }

    .bs-serve-cols {
        width: 100%;
        justify-content: flex-start;
        gap: 80px;
    }

    .bs-quotes-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    /* careers: stack join, narrower headings, wrap benefits */
    .cr-join,
    .cr-jobs,
    .cr-apply {
        padding: 80px 0;
    }

    .cr-join-head .cu-heading h2 {
        font-size: 44px;
    }

    .cr-join-flex {
        flex-direction: column;
        gap: 48px;
    }

    .cr-join-left {
        width: 100%;
    }

    .cr-join-img {
        height: auto;
        aspect-ratio: 505 / 560;
    }

    .cr-benefits {
        flex-wrap: wrap;
        padding: 60px 40px;
        gap: 20px;
    }

    .cr-benefit {
        flex: 0 0 calc(50% - 10px);
    }

    .cr-job {
        padding: 32px;
    }

    .cr-job h3 {
        font-size: 26px;
    }

    /* anaheim: stack intro, wrap stats, smaller headings */
    .an-intro,
    .an-help {
        padding: 80px 0;
    }

    .an-intro-head,
    .an-help h2 {
        font-size: 44px;
    }

    .an-intro-flex {
        flex-direction: column;
        gap: 40px;
    }

    .an-intro-visual {
        width: 100%;
    }

    .an-intro-img {
        height: auto;
        aspect-ratio: 611 / 458;
    }

    .an-stats {
        flex-wrap: wrap;
        padding: 60px 20px;
        gap: 20px;
    }

    .an-stat {
        flex: 0 0 calc(33.333% - 14px);
    }

    .an-band {
        height: 400px;
    }

    /* contact us: tighten gaps, smaller headings, 2-up serving grid */
    .cu-heading h2,
    .cu-directions h2 {
        font-size: 44px;
        white-space: normal;
    }

    .cu-touch,
    .cu-serving {
        padding: 80px 0;
    }

    .cu-touch-flex {
        gap: 48px;
    }

    .cu-touch-left {
        width: 45%;
    }

    .cu-form-sec {
        padding: 80px 0;
    }

    .cu-form-flex {
        gap: 48px;
    }

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

    /* blog: tighten the 2-col gap, narrow sidebar */
    .blog-section {
        padding: 80px 0;
    }

    .blog-body {
        gap: 48px;
    }

    .blog-sidebar {
        width: 320px;
    }

    .blog-search {
        width: 420px;
    }

    .blog-post-img {
        height: 360px;
    }

    .blog-post-text h2 {
        font-size: 28px;
    }

    .navbar {
        padding: 14px 24px;
    }

    .topbar-inner {
        padding-right: 24px;
        gap: 20px;
    }

    /* hero */
    .hero {
        min-height: 640px;
    }

    .hero-title {
        font-size: 46px;
    }

    .hero-sub {
        font-size: 34px;
    }

    /* redesigned hero (tablet): heading + Get A Quote button, NO side form;
       trust bar as a dark overlay strip at the bottom (matches Figma mobile) */
    .hero-redesign {
        min-height: 0;
    }

    .hero-redesign .hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding-top: 180px;
        padding-bottom: 0;
    }

    .hero-redesign .hero-left {
        max-width: 100%;
        margin-top: 0;
        padding-bottom: 48px;
        align-self: auto;
    }

    .hero-form {
        display: none;
        margin-bottom: 50px;
    }
	.hero-form.mobile {
    display: block;
		width: 100%;
		        padding: 0;
}

    .hero-cta-mobile {
        display: inline-flex;
        max-width: max-content !important;
    }

    /* trust bar: dark translucent full-bleed strip, in-flow, 2-up on tablet */
    .hp-trust {
        position: relative;
        background: rgba(0, 0, 0, 0.24);
        border-top: 0.25px solid rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        margin: 0 calc(-1 * var(--pad));
        padding: 32px 40px;
    }

    .hp-trust-inner {
        flex-wrap: wrap;
        gap: 28px 40px;
    }

    .hp-trust-item {
        flex: 0 0 calc(50% - 20px);
    }

    .hp-trust-item h3 {
        color: var(--white);
    }

    .hp-trust-item p {
        color: var(--white);
    }

    /* affiliations: keep 3-up but tighten padding */
    .hp-affiliations {
        padding: 80px 0;
    }

    .hp-aff-cell {
        height: 200px;
        padding: 28px 24px;
    }

    /* welcome already stacked at 1200; just tighten gap/padding here */
    .welcome {
        padding: 70px 0;
    }

    .welcome-flex {
        gap: 48px;
    }

    /* faqs: narrower question text on tablet */
    .faq-section {
        padding: 80px 0;
    }

    .faq-head .section-title {
        font-size: 44px;
    }

    .faq-q-text {
        font-size: 20px;
        line-height: 1.15;
    }

    /* community resources: 2-up grid on tablet */
    .cr-section,
    .cr-section-grey {
        padding: 80px 0;
    }

    .cr-inner {
        gap: 40px;
    }

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

    .cr-card-logo {
        height: 220px;
        padding: 36px 40px;
    }

    .cr-affiliations {
        padding: 80px 0;
    }

    .cr-affiliations-inner {
        gap: 40px;
    }

    .cr-aff-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cr-aff-cell {
        height: 200px;
        padding: 28px 24px;
    }

    /* how: image stacks above the timeline */
    .how {
        padding: 70px 0;
    }

    .how-flex {
        flex-direction: column;
        gap: 40px;
        align-items: stretch;
    }

    .how-img {
        width: 100%;
        height: auto;
        aspect-ratio: 554 / 494;
    }

    /* testimonials: 3 -> can't fit, stack to single column below 992 handled at 767;
       keep grid here but allow wrapping */

    /* quote + affiliations stack */
    .qa-flex {
        flex-direction: column;
    }

    .quote-box {
        width: 100%;
    }

    .affiliations {
        width: 100%;
    }

    /* reputation + affiliation cells: shorter so logos aren't lost in space */
    .reputation-cell {
        height: 200px;
        padding: 32px;
    }

    .affiliation-cell {
        height: 190px;
        padding: 32px;
    }

    .qa-flex {
        gap: 40px;
    }

    /* footer */
    .footer-top {
        flex-direction: column;
        gap: 48px;
    }

    .footer-links {
        gap: 48px;
    }

    .footer-articles-row {
        flex-wrap: wrap;
    }

    .footer-article {
        flex: 1 1 40%;
        border: 0.25px solid var(--white);
    }

    .container.welcome-flex {
        flex-wrap: wrap;
        gap: 0px;
    }

    .welcome-images {
        max-width: 100%;
    }

    .welcome-content {
        max-width: 100%;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
        gap: 40px;
    }

    /* testimonials PAGE grid keeps 2 columns on tablet (more content) */
    .testimonials-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
        gap: 20px;
        row-gap: 40px;
    }

    /* review modal narrower on tablet */
    .review-dialog {
        max-width: 760px;
    }

    .blog-body {
        flex-direction: column-reverse;
        gap: 48px;
    }

    .blog-sidebar {
        width: 100%;
    }

    .bs-clients-left {
        flex: auto;
    }

    .testimonial-bubble {
        min-height: 280px;
    }

    .mt-card-img {
        height: 400px;
    }
	a#mobile-call-now {
    position: fixed !important;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 999999;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border-radius: 9999px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    background: #D34830;
}
	



}

@media (min-width: 480px) and (max-width: 1200px) {
    .container.welcome-flex {
        flex-direction: column-reverse;
        gap: 50px;
    }

    .welcome-images {
        width: 100%;
        max-width: 100%;
    }

    .welcome-content {
        width: 100%;
        max-width: 100%;
    }

    .welcome-img-small {
        display: block !important;
    }

    .welcome-img-big {
        max-width: 80%;
    }
}
  
/* ============================================================
   iPhone / MOBILE (<=767px) — matched to the Figma 390px design.
   Side padding 20px, content 350px, section titles 40px, body 14px.
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --pad: 20px;
    }

    /* shared section header */
    .section-title {
        font-size: 40px;
    }

    /* service-contact banner (mobile) */
    .sc-banner-inner {
        padding-top: 150px;
        padding-bottom: 40px;
    }

    .sc-banner-title {
        font-size: 40px;
    }

    .sc-banner .hero-form {
        display: flex;
        max-width: 100%;
        padding: 28px 20px;
    }

    .sc-banner .hero-form .cu-form-row {
        flex-direction: column;
        gap: 16px;
    }

    /* ---- Meet the Team (mobile) ---- */
    .mt-intro,
    .mt-team {
        padding: 60px 0;
    }

    .mt-intro-head .cu-heading h2 {
        font-size: 34px;
    }

    .mt-intro-head .cu-heading::before {
        width: 36px;
    }

    .mt-team-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .mt-card-img {
        height: 400px;
    }

    .mt-modal {
        padding: 16px;
    }

    .mt-modal-dialog {
        width: 100%;
    }

    .mt-modal-scroll,
    .mt-modal-dialog.is-simple .mt-modal-scroll {
        padding: 24px;
        gap: 24px;
    }

    .mt-modal-img,
    .mt-modal-dialog.is-simple .mt-modal-img {
        height: 400px !important;
    }

    .mt-modal-body {
        gap: 24px;
    }

    .mt-modal-head h3 {
        font-size: 26px;
    }

    .mt-bullets-2 {
        flex-direction: column;
        gap: 13px;
    }

    .mt-modal-close {
        top: 8px;
        right: 8px;
        z-index: 3;
    }

    /* ---- Bug Sweeps (mobile) ---- */
    .bs-feature,
    .bs-clients,
    .bs-warning,
    .bs-quotes {
        padding: 60px 0;
    }

    .bs-feature-text h2,
    .bs-clients-left h2,
    .bs-serve h2,
    .bs-centerhead h2,
    .bs-quotes-inner>h2 {
        font-size: 32px;
    }

    .bs-clients-cols {
        flex-direction: column;
        gap: 13px;
    }

    .bs-whatis {
        padding-top: 60px;
        gap: 32px;
    }

    .bs-band {
        height: 280px;
    }

    .bs-gallery {
        padding-bottom: 60px;
    }

    .bs-gallery-grid {
        grid-template-columns: 1fr;
    }

    .bs-gallery-img {
        height: auto;
        aspect-ratio: 345 / 413;
    }

    .bs-serve {
        padding: 48px 20px;
    }

    .bs-serve-cols {
        flex-direction: column;
        gap: 13px;
    }

    .bs-warning-cols {
        flex-direction: column;
    }

    .bs-warn-col+.bs-warn-col {
        border-left: 0.25px solid var(--ink);
        border-top: none;
    }

    .bs-quote-card {
        padding: 32px 24px;
    }

    /* ---- Careers (mobile): single column everywhere ---- */
    .cr-join,
    .cr-jobs,
    .cr-apply {
        padding: 60px 0;
    }

    .cr-join-head .cu-heading h2 {
        font-size: 34px;
    }

    .cr-join-head .cu-heading::before {
        width: 36px;
    }

    .cr-join-img {
        aspect-ratio: 16 / 12;
    }

    .cr-jobs-grid {
        grid-template-columns: 1fr;
    }

    .cr-benefits {
        padding: 48px 20px;
        gap: 12px;
    }

    .cr-benefit {
        flex: 0 0 100%;
        padding: 16px 12px;
    }

    .cr-apply {
        padding-top: 60px;
    }

    .cr-apply-flex {
        flex-direction: column;
        gap: 32px;
    }

    .cr-apply-img {
        height: 300px;
        flex: none;
    }

    .cr-apply-card {
        width: 100%;
    }

    .cr-apply-card h2 {
        font-size: 32px;
    }

    .cr-apply-row {
        flex-direction: column;
        gap: 16px;
    }

    /* ---- Anaheim (mobile) ---- */
    .an-intro,
    .an-help {
        padding: 60px 0;
    }

    .an-intro-head,
    .an-help h2 {
        font-size: 34px;
    }

    .an-help h2 {
        margin-bottom: 32px;
    }

    .an-intro-img {
        aspect-ratio: 16 / 11;
    }

    .an-stats {
        padding: 48px 20px;
        gap: 12px;
    }

    .an-stat {
        flex: 0 0 calc(50% - 6px);
        padding: 16px 12px;
        gap: 14px;
    }

    .an-stat-icon {
        width: 48px;
        height: 48px;
    }

    .an-stat h3 {
        font-size: 18px;
    }

    .an-band {
        height: 280px;
    }

    .an-help-row {
        flex-direction: column;
        gap: 16px;
    }

    /* ---- Contact Us (mobile): stack everything to one column ---- */
    .cu-touch,
    .cu-serving,
    .cu-form-sec {
        padding: 60px 0;
    }

    .cu-heading h2,
    .cu-directions h2 {
        font-size: 36px;
    }

    .cu-heading::before {
        width: 36px;
    }

    .cu-touch-flex,
    .cu-form-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .cu-touch-left,
    .cu-form-card,
    .cu-info {
        width: 100%;
    }

    .cu-touch-img {
        height: auto;
        aspect-ratio: 610 / 407;
    }

    .cu-form-submit {
        width: 100%;
    }

    .cu-map {
        height: 320px;
    }

    .cu-directions {
        padding-top: 60px;
        gap: 32px;
    }

    .cu-serving-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .cu-city-img {
        height: 160px;
    }

    /* ---- Blog (mobile): stack head + single column ---- */
    .blog-section {
        padding: 60px 0;
    }

    .blog-head {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-bottom: 40px;
    }

    .blog-head h1 {
        font-size: 40px;
    }

    .blog-search {
        width: 100%;
    }

    .blog-body {
        flex-direction: column;
        gap: 48px;
    }

    .blog-sidebar {
        width: 100%;
        position: static;
        order: 2;
    }

    .blog-main {
        order: 1;
        gap: 40px;
    }

    .blog-post-img {
        height: auto;
        aspect-ratio: 715 / 447;
    }

    .blog-post-text h2 {
        font-size: 26px;
    }

    .blog-post-text p {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .section-head {
        gap: 16px;
    }

    .section-desc {
        font-size: 14px;
    }

    /* ---- Community Resources (mobile): single column ---- */
    .cr-section,
    .cr-section-grey {
        padding: 60px 0;
    }

    .cr-inner {
        gap: 28px;
    }

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

    .cr-card-logo {
        height: 200px;
        padding: 32px;
    }

    .cr-affiliations {
        padding: 60px 0;
    }

    .cr-affiliations-inner {
        gap: 28px;
    }

    .cr-aff-grid {
        grid-template-columns: 1fr;
    }

    .cr-aff-cell {
        height: 180px;
        padding: 32px;
    }

    /* ---- FAQs (mobile) ---- */
    .faq-section {
        padding: 60px 0;
    }

    .faq-inner {
        gap: 32px;
    }

    .faq-head .section-title {
        font-size: 34px;
    }

    .faq-item {
        padding: 16px;
    }

    .faq-q {
        gap: 16px;
    }

    .faq-q-text {
        font-size: 18px;
        line-height: 1.2;
    }

    .faq-icon {
        width: 20px;
        height: 20px;
    }

    .faq-icon span:nth-child(1) {
        width: 14px;
    }

    .faq-icon span:nth-child(2) {
        height: 14px;
    }

    /* ---- HEADER (mobile): top bar 12px centered, glass nav with red sq. menu ---- */

    .topbar-inner {
        justify-content: center;
        gap: 24px;
        padding: 16px 0 0;
    }

    .topbar-item {
        font-size: 12px;
        gap: 8px;
    }

    .topbar-icon {
        width: 20px;
        height: 20px;
    }

    .navbar {
        padding: 16px 24px;
        gap: 16px;
    }

    .logo img {
        height: 32px;
    }

    /* hamburger as a red square button with a centered icon */
    .hamburger {
        width: 52px;
        height: 52px;
        background: var(--accent);
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        flex-shrink: 0;
    }

    .hamburger span {
        width: 22px;
    }

    /* ---- HERO (mobile): 720 tall, title 48, sub 28 ---- */
    .hero {
        min-height: 640px;
    }

    .hero-inner {
        padding-top: 280px;
    }

    .hero-title {
        font-size: 48px;
        line-height: 1.04;
    }

    .hero-sub {
        font-size: 28px;
        min-height: 34px;
    }

    .typed-cursor {
        font-size: 36px;
    }

    .hero-cta {
        margin-top: 24px;
    }

    /* ---- redesigned hero (mobile): match Figma 390 — heading + button, NO form,
       trust bar as a dark overlay list at the bottom (icon-left) ---- */
    .hero-redesign {
        min-height: 0;
    }

    .hero-redesign .hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding-top: 150px;
        padding-bottom: 0;
    }

    .hero-redesign .hero-left {
        margin-top: 0;
        max-width: 100%;
        padding-bottom: 50px;
        align-self: auto;
    }

    form.hero-form {
        width: 100%;
    }

    .hero-cta-mobile {
        display: inline-flex;
    }

    /* trust bar: stays a dark translucent overlay-style strip, full-bleed,
       in-flow at the bottom of the hero (single-column, icon-left) */
    .hp-trust {
        position: relative;
        background: rgba(0, 0, 0, 0.24);
        border-top: 0.25px solid rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        margin: 0 calc(-1 * var(--pad));
        padding: 24px 20px;
    }

/*     .hp-trust-inner {
        flex-direction: column;
        gap: 16px;
    } */
	.hp-trust-inner {
    flex-direction: row;
   gap: 20px 10px;
}
	.hp-trust-item:nth-child(2) h3 {
    max-width: 125px;
}
 
.hp-trust-item {
    flex: unset !important;
    width: 47% !important;
    gap: 10px !important;
}

    .hp-trust-item {
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
		align-items: center;
    }

    .hp-trust-item h3 {
        font-size: 18px;
        color: var(--white);
    }
	.hp-trust-item p {
        display: none;
    }

    .hp-trust-item p {
        color: var(--white);
    }

    /* affiliations: single column on mobile */
    .hp-affiliations {
        padding: 60px 0;
    }

    .hp-aff-grid {
        grid-template-columns: 1fr;
    }

    .hp-aff-cell {
        height: 255px;
    }

    /* how it works: button full-width left on mobile */
    .how-cta {
        margin-left: 0;
    }

    /* ---- WELCOME (mobile): heading 40, body 14, gap 32, note pad 24 ---- */
    .welcome {
        padding: 60px 0;
    }

    .welcome-flex {
        gap: 32px;
    }

    .welcome-content {
        gap: 32px;
    }

    .welcome-text {
        gap: 20px;
        font-size: 14px;
    }

    .welcome-note {
        padding: 24px;
        font-size: 14px;
    }

    .welcome-actions {
        gap: 20px;
    }

    .welcome-actions-note {
        font-size: 14px;
    }

    /* keep the overlapping image composition (Figma keeps it on mobile) */
    .welcome-images {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 350 / 478;
		overflow: hidden;
    }

    .welcome-img-big {
        width: 100%;
    }

    .welcome-img-small {
        display: block;
        left: 26.6%;
        top: 46%;
        width: 73.4%;
        border-width: 14px;
    }

    /* ---- FEATURED SERVICES (mobile) ---- */
    .services {
        padding: 60px 0;
    }

    .services .section-head {
        margin-bottom: 40px;
    }

    .service-body h3 {
        font-size: 24px;
    }

    .services-nav-row {
        gap: 48px;
        margin-top: 48px;
    }

    .nav-btn {
        width: 52px;
        height: 52px;
    }

    /* ---- HOW IT WORKS (mobile): image on top, timeline below ---- */
    .how {
        padding: 60px 0;
    }

    .how .section-head {
        margin-bottom: 40px;
    }

    .how-timeline {
        gap: 16px;
    }

    .how-step h3 {
        font-size: 24px;
    }

    /* ---- TESTIMONIALS (mobile): single column ---- */
    .testimonials {
        padding: 60px 0;
    }

    .testimonials .section-title {
        margin-bottom: 40px;
    }

    .testimonials-grid,
    .testimonials-grid-3 {
        grid-template-columns: 1fr;
        gap: 32px;
        row-gap: 32px;
    }

    .testimonials-cta {
        margin-top: 40px;
    }

    .testimonial-bubble {
        padding: 40px 32px 75px;
        font-size: 14px;
    }

    /* testimonials page mobile spacing */
    .testimonials-featured {
        padding: 60px 0;
    }

    .yelp-reviews {
        padding-bottom: 60px;
    }

    .yelp-title {
        margin-bottom: 40px;
    }

    /* review modal mobile */
    .review-dialog {
        padding: 32px 24px;
        gap: 24px;
        max-height: 88vh;
    }

    .review-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .review-name {
        font-size: 26px;
    }

    .review-body {
        font-size: 14px;
    }

    .testimonial-author {
        font-size: 18px;
    }

    /* ---- UNMATCHED REPUTATION (mobile): stacked logos ---- */
    .reputation {
        padding: 60px 0;
    }

    .reputation-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .reputation-grid {
        flex-direction: column;
    }

    .reputation-cell {
        min-height: 285px;
        border-width: 0.5px;
    }

    /* ---- SERVING SOCAL (mobile): swiper peeks next card ---- */
    .serving {
        padding: 60px 0;
    }

    .serving .section-head {
        margin-bottom: 40px;
    }

    .city-img {
        height: 165px;
    }

    .city-label {
        height: 52px;
        font-size: 14px;
    }

    /* ---- QUOTE + AFFILIATIONS (mobile) ---- */
    .quote-affiliations {
        padding: 60px 0;
    }

    .qa-flex {
        gap: 40px;
    }

    .quote-title {
        font-size: 32px;
    }

    .affiliations {
        gap: 32px;
    }

    .affiliations-title {
        font-size: 40px;
    }

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

    .affiliation-cell {
        height: 200px;
        padding: 40px;
    }

    .affiliation-cell-wide {
        grid-column: auto;
    }

    /* ---- FOOTER (mobile): Investigative + Company side-by-side (per Figma),
       Contact Us drops below full-width ---- */
    .footer-links {
        gap: 24px;
        flex-wrap: wrap;
    }

    .footer-col {
        flex: 1 1 40%;
        min-width: 140px;
    }

    .footer-contact {
        flex: 1 1 100%;
    }

    .footer-article {
        flex: 1 1 100%;
        height: auto;
        min-height: 74px;
        justify-content: start;
        text-align: start;
    }

    .welcome-flex {
        flex-direction: column-reverse;
        gap: 48px !important;
    }

    .quote-box {
        padding: 30px;
    }

    /* ---- "What is a PI?" page (mobile) ---- */
    .page-banner {
        height: 360px;
    }

    .page-banner-inner {
        padding-bottom: 40px;
    }

    .page-banner-title {
        font-size: 40px;
    }

    .pi-intro {
        padding: 60px 0;
    }

    .pi-intro-flex,
    .pi-req-flex,
    .wwd-flex,
    .wwd-hire-flex {
        gap: 32px;
    }

    .pi-intro-img img,
    .pi-req-img img,
    .wwd-img img {
        height: auto;
        max-height: none;
        aspect-ratio: 350 / 350;
    }

    .pi-paragraphs,
    .pi-note,
    .pi-paragraph-after,
    .pi-lead-out,
    .pi-req-list li {
        font-size: 14px;
    }

    /* blog: keep pagination controls from overflowing tiny screens */
    .blog-page-nav {
        gap: 12px;
        flex-wrap: wrap;
    }

    .blog-page-numbers {
        gap: 8px;
    }

    /* What We Do mobile */
    .wwd-intro {
        padding: 60px 0;
    }

    .wwd-hire {
        padding-bottom: 60px;
    }

    .wwd-text {
        gap: 24px;
    }

    .wwd-line {
        width: 30px;
    }

    .wwd-lead,
    .wwd-services li,
    .wwd-hire-note {
        font-size: 14px;
    }

    .wwd-services {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wwd-hire-btns {
        flex-direction: column;
        align-items: flex-start;
    }

    .wwd-hire-btns .btn {
        width: 100%;
    }

    .pi-note {
        padding: 24px;
    }

    .pi-requirements {
        padding: 60px 0px;
    }

    .pi-req-list-wrap {
        margin-top: 40px;
    }

    .blog-page-arrow {
        width: 30px;
        height: 30px;
    }

    .blog-page-btn {
        width: 30px;
        height: 30px;
    }

    .blog-share {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .blog-article-head h1 {
        font-size: 32px;
    }

    .cu-form-row {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .cu-form-group {
        width: 100% !important;
    }

    .cr-join-head .cu-heading h2 {
        font-size: 32px;
    }

    .cr-apply-card {
        padding: 30px 12px
    }

    .cr-apply-card h2 {
        font-size: 28px;
    }

    .mt-intro-col {
        flex: 0 1 auto;
    }

    .services-nav-row {
        flex-wrap: wrap;
    }

    .services-progress {
        width: 100%;
    }

    .carousel-nav {
        width: 100%;
        justify-content: center;
    }

    .hero::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%), url(image1.jpg) -217px 0 / 342% 100% no-repeat, url(image2.jpg) -488px 0 / 328% 100% no-repeat;
    }

    .bs-serve-flex {
        flex-wrap: wrap;
    }

    .service-body h3 {
        min-height: auto;
    }

    .topbar {
        padding-bottom: 16px;
    }

.topbar {
    visibility: hidden;
    padding: 0;
}
	.hero-bg {
    object-position: 7% 100%;
}
	.bs-quote-name {
    padding-right: 20px;
}
.container.mb-ful {
    padding: 0px !important;
}

.bs-serve-cols {
	padding-top: 0px !important;
}
	
	
	

}

/* iPhone (small) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 40px;
    }

    .cu-city-img {
        height: 140px;
    }
	.service-body {
    padding: 20px 10px;
	}

    .testimonial-bubble {
        min-height: 350px;
    }
	.service-stack {
    margin: -54px 10px 0;
	}
	    .hero-form {
        margin-bottom: 10px;
    }
 
    .hero-sub {
        font-size: 28px;
    }

    .section-title,
    .reputation-title,
    .affiliations-title {
        font-size: 40px;
    }

    .how-step h3 {
        font-size: 18px;
    }

    .how-step {
        gap: 8px;
    }

    .how-step p {
        font-size: 12px;
    }

    .how-track {
        padding: 0px 0px 50px 0px;
    }

    .footer-article {
        font-size: 18px;
    }

    .form-row {
        flex-direction: column;
        gap: 16px;
    }

    .welcome-img-small {
        display: block;
        left: 19.6%;
        top: 45%;
        width: 85%;
        border-width: 14px;
    }

    /* footer 2-col links stay side by side on small phones (per Figma) */
    .footer-bottom-inner {
        flex-direction: column;
        gap: 16px;
    }

    .footer-col h4 {
        font-size: 16px;
        margin-bottom: 20px;
    }


}


/* qa fixes css  */

article.blog-article ul, article.blog-article ol {
    list-style: disc;
    padding-left: 20px;
}

article.blog-article li {
    list-style: disc;
    font-weight: 500;
    line-height: 24px;
    color: var(--ink);
    opacity: 0.8;
}

article.blog-article li::marker {
    color: #D34830;
}

.blog-body iframe {
    width: 100% !important;
}

.faq-a p a, .an-intro-text p a {
    color: #D34830;
}

.an-intro-head {
    max-width: 610px;
}

.cr-apply-card button {
    width: max-content;
}

.cr-benefits {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
}

.cu-form-submit {
    width: 100%;
}

.page-id-815 .bs-feature-text h2 {
    font-size: 62px;
}

.bs-quote-card {
    background: transparent;
    padding: 0;
}

.bs-quote-card-box {
    background: #fff;
    padding: 48px 40px;
    height: 100%;
    position: relative;
}

.bs-quote-card-box::after {
    content:'';
    position:absolute;
    bottom: -40px;
    left: 0;
    background: url(https://wp26.jaidenshannon.com/la-intelligence/wp-content/uploads/2026/07/icon.png);
    width: 41px;
    height: 41px;
    object-fit: contain;
    background-size: contain;
}

.bs-quote-name {
    justify-content: flex-end;
}

.bs-quote-name::before {
    background: #D34830;
}

.page-id-933 .bs-warning {
    padding-top: 0 !important;
}
/* Video wrapper container */
.blog-article-body .wp-video {
    width: 100% !important;
    height: 400px !important;
    position: relative;
    overflow: hidden;
}

/* MediaElement.js main player container */
.blog-article-body .wp-video .mejs-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Actual target: HTML5 video element aur uski wrappers */
.blog-article-body .wp-video video,
.blog-article-body .wp-video mediaelementwrapper,
.blog-article-body .wp-video .mejs-mediaelement {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Is se black bars bilkul khatam ho jayenge */
}

/* Video poster image ko bhi cover karne ke liye */
.blog-article-body .wp-video .mejs-poster {
    background-size: cover !important;
    background-position: center !important;
}

@media screen and (max-width:1100px){
	.cr-join-img {
    height: auto;
}
	.bs-feature-img {
    height: auto !important;
    aspect-ratio: unset !important;
    flex: unset !important;
}
	.bs-centerhead h2 {
    font-size: 52px;
}
	
	section.bs-feature:nth-child(3) .bs-feature-flex {
    flex-direction: column-reverse;
}
	.page-id-815 .bs-feature-text h2 {
    font-size: 52px;
}
.bs-quotes-inner>h2
 {
    font-size: 52px;
	}
	
	
}

@media screen and (max-width:991px){
	.an-intro-head {
    max-width: unset;
}
	.bs-serve-flex {
    flex-direction: column;
}
	.page-id-815 .bs-feature-text h2, .bs-centerhead h2 {
    font-size: 44px;
}
	    
}

@media screen and (max-width:767px){
	.blog-pagination {
    margin-top: 0;
}
	.blog-article-body img {
    object-fit: contain;
    height: auto;
}
	.bs-warn-col {
    width: 100%;
}
		.page-id-815 .bs-feature-text h2, .bs-centerhead h2, .section-title {
    font-size: 34px;
}
}