/* ===== RESPONSIVE STYLES ===== */

/* ===== INDUSTRIES SHOWCASE — RESPONSIVE ===== */

/* Tablet: 3-column × 2-row tab grid */
@media (max-width: 1100px) {
  /* Navbar + topbar follow hero heading inset */
  .navbar .container { padding: 0 48px; }
  .topbar-left { padding-left: 48px; }

  .ind-content {
    top: 50%;
    left: 56px;
    transform: translateY(-50%);
    max-width: 600px;
  }
  .ind-eyebrow-label { font-size: 14px; letter-spacing: 2.2px; }
  .ind-cta { padding: 16px 40px; font-size: 13px; }
  .ind-strip-outer {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Remove right border on last col of each row */
  .ind-tab:nth-child(3),
  .ind-tab:nth-child(6) { border-right: none; }
  /* Row divider between row 1 and row 2 */
  .ind-tab:nth-child(1),
  .ind-tab:nth-child(2),
  .ind-tab:nth-child(3) {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}

/* Search landing pages */
@media (max-width: 940px) {
  .lp-hero-grid,
  .lp-proof-inner { grid-template-columns: 1fr; }
  .lp-hero-media { max-width: 760px; }
  .lp-path { grid-template-columns: 1fr; }
  .lp-path article { min-height: 0; }
  .lp-path article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .lp-path article:last-child { border-bottom: 0; }
  .lp-path article:not(:last-child)::after { content: "↓"; top: auto; right: 38px; bottom: -13px; }
  .lp-related-grid { grid-template-columns: 1fr; }
  .lp-related-grid a { min-height: 150px; }
}

@media (max-width: 768px) {
  .ind-bg-0 { background-image: url('../assets/images/responsive/hero/hospitality-building-fire-safety-800.webp'); }
  .ind-bg-1 { background-image: url('../assets/images/responsive/hero/industrial-800.webp'); }
  .ind-bg-2 { background-image: url('../assets/images/responsive/hero/healthcare-800.webp'); }
  .ind-bg-3 { background-image: url('../assets/images/responsive/hero/logistics-800.webp'); }
  .ind-bg-4 { background-image: url('../assets/images/responsive/hero/retail-800.webp'); }
  .ind-bg-5 { background-image: url('../assets/images/responsive/hero/it-data-center-800.webp'); }

  .lp-hero { padding: 104px 0 58px; }
  .lp-hero .breadcrumb { margin-bottom: 30px; }
  .lp-hero-grid { gap: 45px; }
  .lp-hero h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .lp-intro,
  .lp-detail,
  .lp-faq,
  .lp-related,
  .lp-system { padding: 70px 0; }
  .lp-detail-grid { grid-template-columns: 1fr; gap: 62px; }
  .lp-proof { padding: 58px 0; }
  .lp-proof-inner { gap: 25px; }
  .lp-cta-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .lp-actions { align-items: flex-start; flex-direction: column; }
  .lp-hero-media::before { inset: -8px 10px 10px -8px; }
  .lp-path article { padding: 28px 24px; }
  .lp-path h3 { margin-top: 24px; }
}

/* ===========================================================
   Mobile: full-viewport hero with a VERTICAL industry rail.
   The horizontal snap carousel it replaces hid 5 of 6 industries
   behind an invisible scroll (1295px off-screen at 390px wide),
   and clipped the second tab mid-word. Here all six sit stacked
   and visible; only the active row reveals its description.
   =========================================================== */
@media (max-width: 768px) {
  /* Navbar + topbar follow hero heading inset on mobile */
  .navbar .container { padding: 0 24px; }
  .topbar-left { padding-left: 24px; }

  /* Fill the phone screen exactly, whatever its height. dvh accounts for
     the collapsing browser chrome on iOS/Android; the vh line is the
     fallback for engines without dvh support. */
  .ind-showcase {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Content sits in normal flow above the rail rather than being
     absolutely centred, so the two share the viewport predictably. */
  .ind-content {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    max-width: none;
    z-index: 3;
    flex: 1 1 auto;            /* soaks up whatever the rail doesn't use */
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
  }
  .ind-eyebrow-label { font-size: 12.5px; letter-spacing: 1.8px; }
  .ind-eyebrow-accent { width: 3px; height: 14px; }
  /* The hero's primary read. Sized off viewport width so it fills the space
     on any phone; line-height tightened so the extra size buys presence
     rather than leading. */
  .ind-headline {
    font-size: clamp(34px, 10.5vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.5px;
    margin-bottom: 0;
  }
  .ind-eyebrow { margin-bottom: 12px; }
  /* Compact CTA sitting directly under the heading — the desktop 20px/48px
     block reads as oversized on a phone, and its default rhythm leaves too
     large a gap once the mobile headline is this size. Uppercase weight-700
     is kept so the type hierarchy is unchanged. */
  .ind-cta {
    margin-top: 14px;
    padding: 9px 16px;
    font-size: 9.5px;
    letter-spacing: 1px;
    gap: 6px;
    align-self: flex-start;
    min-height: 34px;
  }
  .ind-cta span { font-size: 11px; line-height: 1; }

  /* The rail: six stacked rows, no scrolling. */
  .ind-strip-outer {
    position: relative;        /* was absolute/bottom:0 on desktop */
    bottom: auto;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    flex: 0 0 auto;
    background: rgba(6, 6, 6, 0.55);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .ind-tab {
    width: 100%;
    flex: 0 0 auto;
    min-height: 44px;          /* touch target */
    padding: 11px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: padding 0.3s ease;
  }
  .ind-tab:last-child { border-bottom: none; }

  /* Accent moves from the top edge to the left edge, matching a vertical list */
  .ind-tab-topline {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 0;
    height: auto;
    transition: width 0.28s ease, background 0.26s ease;
  }
  /* Active only — no :hover here. On touch, :hover sticks to the last tapped
     row and would leave it accented after the rotation moved on. */
  .ind-tab--active .ind-tab-topline {
    width: 3px;
    height: auto;
    left: 0;
    right: auto;
  }

  .ind-tab-body { padding-top: 0; gap: 4px; }
  .ind-tab-title { font-size: 12.5px; }

  /* Only the selected row carries its description — this is what keeps
     five rows compact while the active one stays informative. */
  .ind-tab-desc { display: none; }
  .ind-tab--active { padding-top: 13px; padding-bottom: 15px; }
  .ind-tab--active .ind-tab-desc {
    display: block;
    font-size: 11.5px;
    line-height: 1.5;
  }

  /* Reset the desktop/tablet grid-position borders — meaningless in one column */
  .ind-tab:nth-child(1),
  .ind-tab:nth-child(2),
  .ind-tab:nth-child(3),
  .ind-tab:nth-child(6) {
    border-right: none;
  }
}

/* Large tablets / small desktops */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .clients-logos { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Tablets */
@media (max-width: 768px) {
  :root { font-size: 15px; }

  .section { padding: 3.5rem 0; }

  /* Topbar removed entirely on mobile — surfaced inside the menu drawer instead */
  .topbar { display: none; }
  .site-header.topbar-collapsed { top: 0; }

  /* Navbar — layout: [Call Us] [Hamburger] ........... [Logo] */
  .hamburger { display: flex; }
  .hamburger span { background: var(--primary); } /* orange on mobile */
  .nav-whatsapp { display: none; }                /* WhatsApp only inside drawer on mobile */
  .nav-call {
    display: inline-flex;                         /* visible in mobile navbar */
    padding: 6px 14px;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
  }
  .nav-call::before { width: 13px; height: 13px; }
  .nav-logo .logo-icon { height: 36px; }          /* smaller logo */

  /* Flex layout: Logo on the left, Call+Hamburger group on the right */
  .nav-right { margin-left: auto; }

  /* ===== MOBILE DRAWER — slides in from right, 80% of viewport width =====
     NOTE: width/height use viewport units (vw/vh) — NOT bottom/left percentages.
     When the navbar gets `.scrolled` (backdrop-filter), it becomes a containing
     block for fixed descendants, so percentage-based bottom/left would measure
     against the 72px navbar and collapse the drawer to ~0px. */
  .nav-menu {
    position: fixed;
    top: 72px;
    right: 0;
    width: 80vw;
    height: calc(100vh - 72px);
    background: #f3f3f3;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 28px 28px 28px;
    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    overflow-y: auto;
    z-index: 1100;
    box-shadow: -10px 0 30px rgba(0,0,0,0.18);
  }
  .nav-menu.open {
    transform: translateX(0);
    pointer-events: all;
  }

  /* Drawer rows */
  .nav-menu li { width: 100%; list-style: none; }

  .nav-link {
    display: block;
    padding: 16px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--secondary);
    width: 100%;
    text-align: left;
    border-radius: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .nav-link:hover,
  .nav-link.active { background: none; color: var(--primary); }

  /* Show mobile-only items in the drawer */
  .nav-mobile-only { display: list-item; }

  /* Catalogue remains distinct without becoming a competing CTA: muted text
     and a trailing arrow separate it gently from the primary page links. */
  .nav-mobile-catalogue {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #737983;
    font-size: 0.98rem;
    font-weight: 600;
    box-shadow: none;
    transition: color 0.2s ease;
  }
  .nav-mobile-catalogue::after {
    content: '\2192';
    margin-left: auto;
    color: currentColor;
    font-size: 1.05rem;
    font-weight: 700;
  }
  .nav-mobile-catalogue:hover,
  .nav-mobile-catalogue:focus-visible,
  .nav-mobile-catalogue.active {
    background: transparent;
    color: var(--primary);
    transform: none;
    box-shadow: none;
  }

  /* Bottom CTAs — Catalogue stays in the link list; Call + WhatsApp remain pinned */
  .nav-mobile-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 28px;
  }
  .nav-mobile-call,
  .nav-mobile-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.96rem;
    letter-spacing: 0.4px;
    text-decoration: none;
  }
  .nav-mobile-call {
    background: var(--primary);
    color: #fff;
  }
  .nav-mobile-whatsapp {
    background: #25D366;
    color: #fff;
  }

  /* Grids */
  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 2rem; }
  .why-visual { height: 250px; }
  .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }

  /* Stats bar */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Page hero */
  .page-hero { padding: 7.5rem 0 3rem; } /* 110px header + buffer */

  /* Clients */
  .clients-logos { grid-template-columns: repeat(2, 1fr); }

  /* Cert */
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .team-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .clients-logos { grid-template-columns: repeat(2, 1fr); }

  .hero-stats { flex-direction: column; gap: 1rem; }

  .section-tag { font-size: 0.72rem; }

  .service-card { padding: 1.5rem; }
  .project-body { padding: 1.25rem; }
  .contact-info-card { padding: 1.75rem; }
  .contact-form-card { padding: 1.75rem; }

  .cta-actions { flex-direction: column; }
  .cta-actions .btn { justify-content: center; }

  /* Keep the pill tucked flush to the right edge on mobile */
  .scroll-top { bottom: 1.5rem; right: 0; height: 44px; }

  .footer-social { flex-wrap: wrap; }
}

/* ===== SOLUTIONS WE OFFER — responsive ===== */
@media (max-width: 1024px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .solutions-section .features-container { padding-inline: 24px; }
  .solutions-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .solution-card { height: 440px; }
  .solution-body { padding: 24px 24px 16px; }
  .solution-body h3 { font-size: 1.5rem; }

  /* Photo spans the card's full width — edge to edge WITHIN the white card,
     not breaking out of it. Side and bottom insets are dropped so it meets the
     card's own edges; the card keeps `overflow: hidden`, so its rounded
     corners clip the photo cleanly at the bottom. */
  .solution-img {
    margin: 0;
    border-radius: 0;
  }
}

/* ===== TRUST / ABOUT — responsive ===== */
@media (max-width: 1024px) {
  .trust-text-panel { padding: 3rem 2.5rem; }
  .trust-text-inner h2 { font-size: 1.8rem; }
  .trust-cards { grid-template-columns: 1fr; gap: 1rem; margin-top: -40px; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-item:hover { transform: scale(1.4); }
}
@media (max-width: 768px) {
  .trust-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .trust-text-panel {
    padding: 2.5rem 1.5rem;
    justify-content: flex-start;
  }
  .trust-text-inner { max-width: none; }
  .trust-text-inner h2 { font-size: 1.5rem; }
  .trust-image-panel { height: 280px; }
  .trust-cards {
    margin-top: -30px;
    padding: 0 0.5rem;
  }
  .trust-card { padding: 1.25rem 1.1rem; }
  .trust-card-icon { flex: 0 0 52px; width: 52px; height: 52px; }
  .trust-card-body h3 { font-size: 1.1rem; }
  .cert-block { margin-top: 2.5rem; }
  .cert-grid { gap: 1rem; }
  /* Tap-to-zoom on touch: scale less so it stays on screen */
  .cert-item:hover, .cert-item:active { transform: scale(1.25); }
}

/* ===== FEATURES CARDS — responsive ===== */
/* Container padding tracks the navbar's inset at each breakpoint */
@media (max-width: 1100px) {
  .features-container { padding: 0 48px; }
}
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .features-container { padding: 0 24px; }
}
@media (max-width: 640px) {
  /* Mobile section headers: labels + headings are enough context.
     Hide optional intro copy while preserving all substantive content. */
  .mobile-section-intro { display: none !important; }
  .section-header { margin-bottom: 2rem; }
  .section-header h2 { margin-bottom: 0; }

  .features-section { padding: 3.5rem 0; }
  .features-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Compact mobile card: icon and heading share the top row, copy sits
     beneath them. A 2-column grid keeps the paragraph aligned to the
     heading rather than wrapping under the icon. */
  .feature-card {
    min-height: 0;
    padding: 1.25rem 1.25rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.4rem;
  }
  .feature-icon {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    margin: 0;
  }
  .feature-icon svg { width: 100%; height: 100%; }
  .feature-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.05rem;
    margin: 0;
  }
  .feature-text {
    grid-column: 1 / -1;   /* full width under both, so lines don't get cramped */
    grid-row: 2;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
  }
  /* Decorative only — they cost vertical space the compact card can't spare.
     .feature-photo-arrow is the matching chevron on the photo tile; the
     invisible .feature-photo-open button beneath it still opens the contact
     dialog, so hiding the arrow costs no functionality. */
  .feature-divider,
  .feature-arrow,
  .feature-photo-arrow { display: none; }

  /* Same height as the three text cards so the four read as one set. */
  .feature-card--photo {
    height: 128px;
    min-height: 128px;
    padding: 0;
    display: block;
  }
  .feature-card--photo img { object-position: center 44%; }
  .feature-photo-tag {
    top: 1.75rem;
    left: 1.75rem;
    right: 1.75rem;
    font-size: 1.25rem;
  }
  .quick-contact-overlay {
    align-items: center;
    padding: 0.75rem;
  }
  .quick-contact-dialog {
    max-height: calc(100vh - 1.5rem);
    border-radius: 12px;
  }
  .quick-contact-header { padding: 1.25rem 3.8rem 0.6rem 1.25rem; }
  .quick-contact-header h2 { font-size: 1.55rem; }
  .quick-contact-form { padding: 0.9rem 1.25rem 1.5rem; }
  .quick-contact-fields { grid-template-columns: 1fr; gap: 0.85rem; }
  .quick-contact-field--wide { grid-column: auto; }
}

/* ===== STATS / RESULTS — responsive ===== */
@media (max-width: 1100px) {
  /* Match navbar's 48px gutter at this breakpoint; keep stats + features close */
  .results-section { padding: 4.5rem 48px 1.25rem; }
  .results-section .features-container { padding: 3rem 2.5rem; }
}
@media (max-width: 900px) {
  .results-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 2rem; }
}
@media (max-width: 768px) {
  /* Match navbar's 24px gutter at this breakpoint */
  .results-section { padding: 3.5rem 24px 1rem; }
  .results-section .features-container { padding: 2.25rem 1.5rem; border-radius: 12px; }
}
@media (max-width: 520px) {
  .results-section {
    padding: 2.75rem 16px 0.75rem;
  }
  .results-section .features-container {
    padding: 1.75rem 1.25rem;
    border-radius: 10px;
  }
  .results-head {
    gap: 1.15rem;
    margin-bottom: 2rem;
  }
  .results-head-text h2 {
    margin-bottom: 0.6rem;
    font-size: 1.45rem;
    line-height: 1.22;
  }
  .results-head-text p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .results-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
  }
  .results-btn {
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: 0.6rem 0.65rem;
    border-radius: 9px;
    font-size: 0.8rem;
  }
  .results-btn-icon svg {
    width: 17px;
    height: 17px;
  }
  .results-btn--dark {
    box-shadow: 0 5px 14px rgba(255, 96, 18, 0.22);
  }
  /* 2x2 instead of a single column: four full-width stats ran the section
     down the whole page. Number + label alone carry the point, so the
     supporting sentence is dropped here. */
  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }
  .result-item { padding-top: 1rem; }
  .result-item::before {
    width: 32px;
    height: 3px;
  }
  .result-num {
    margin-bottom: 0.4rem;
    font-size: 2.1rem;
    letter-spacing: -1px;
  }
  /* Scales with viewport: at 0.95rem flat, "Years of Experience" wrapped to
     two lines at 360px (uneven rows) and every label wrapped at 320px. The
     vw term keeps them on one line down to the narrowest phones. */
  .result-label {
    margin-bottom: 0;
    font-size: clamp(0.72rem, 3.4vw, 0.95rem);
    line-height: 1.35;
  }
  .result-desc { display: none; }
  /* Rows align on a shared baseline even when one label wraps — at 360px
     "Years of Experience" takes two lines while its neighbour takes one. */
  .result-item { align-self: start; }
  .results-grid { align-items: start; }
}

/* ===== FEATURED WORK — responsive ===== */
@media (max-width: 1100px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .work-card { min-height: 340px; }
}
@media (max-width: 768px) {
  /* Heading block centred on mobile */
  .work-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
  .work-head .section-tag { margin-inline: auto; }

  /* Six cards stacked vertically ran ~2150px. As a swipeable row the section
     stays one screen tall: cards scroll horizontally with snap, while the
     page keeps scrolling vertically as normal (touch-action: pan-y). */
  .work-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Both axes: the browser picks by gesture direction, so horizontal drags
       scroll the row and vertical drags still scroll the page. Omitting pan-x
       here disables the swipe this carousel exists for. */
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none;
    /* Bleed to the screen edges so a card can sit flush while scrolling,
       but keep the first card aligned to the container gutter. */
    margin-inline: -24px;
    padding-inline: 24px;
    padding-bottom: 4px;
    scroll-padding-inline: 24px;
  }
  .work-grid::-webkit-scrollbar { display: none; }

  .work-card {
    flex: 0 0 82%;             /* next card peeks in, signalling more to swipe */
    min-height: 340px;
    scroll-snap-align: start;
  }
  /* on mobile, show descriptions by default (no hover) */
  .work-card-text p { max-height: 6rem; opacity: 1; }

  .work-footer { display: flex; justify-content: center; margin-top: 1.5rem; }
  .work-all-btn { width: 100%; justify-content: center; }
}

/* ===== CLIENT VOICES — responsive ===== */
@media (max-width: 900px) {
  .voices-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .voices-mark { font-size: 8rem; top: -1.5rem; }
}

/* ===== CONTACT — responsive ===== */
@media (max-width: 860px) {
  .contact-split { grid-template-columns: 1fr; min-height: 0; }
  .contact-info { justify-content: flex-start; }
  .contact-info-inner { max-width: none; }
}
@media (max-width: 560px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ===== FOOTER BADGES — responsive ===== */
@media (max-width: 560px) {
  .footer-badges { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}


/* ===== CERTIFICATIONS — responsive ===== */
@media (max-width: 940px) {
  .certs-inner { grid-template-columns: 1fr; gap: 3.5rem; }
  /* featured cert centered below the thumbnails */
  .certs-feature { max-width: 340px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .certs-section { padding: 4rem 0 4.5rem; }
  .certs-inner {
    display: block;
    padding-inline: 24px;
  }
  .certs-main { text-align: center; }
  .certs-main h2 {
    margin: 0 auto 1.5rem;
    font-size: 1.65rem;
    line-height: 1.2;
  }
  .certs-eyebrow { margin-bottom: 0.75rem; }
  .certs-thumbs,
  .certs-feature { display: none; }
  .certs-mobile-list {
    --cert-mobile-width: clamp(142px, 43vw, 172px);
    display: flex;
    gap: 0.9rem;
    width: auto;
    margin-inline: -24px;
    padding: 0.25rem 24px 0.9rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    text-align: left;
  }
  .certs-mobile-list::-webkit-scrollbar { display: none; }
  .certs-mobile-list::after {
    content: "";
    flex: 0 0 calc(100% - var(--cert-mobile-width) - 24px);
  }
  .certs-mobile-item {
    flex: 0 0 var(--cert-mobile-width);
    scroll-snap-align: start;
  }
  .certs-controls {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.15rem;
  }
  .certs-arrow {
    width: 46px;
    height: 46px;
  }
  .hexr--certs-1,
  .hexr--certs-2 { opacity: 0.45; }
}

/* ===== ABOUT PAGE — responsive ===== */
@media (max-width: 940px) {
  .ab-hero-top { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .ab-mission-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* pills become a horizontal wrap above the copy */
  .ab-pills { flex-direction: row; flex-wrap: wrap; }
  .ab-solve-cards { grid-template-columns: 1fr; }
  .ab-card { min-height: 0; }
  .ab-card h3 { padding-bottom: 1rem; }
  .ab-team-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .abp-grid { grid-template-columns: 1fr; gap: 1rem; }
  .abp-copy {
    order: 1;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
  }
  .abp-since { justify-content: center; }
  .abp-summary { margin: 0 auto; }
  .abp-map-stage {
    order: 2;
    height: min(88vw, 720px);
  }
  .ab-scale-photos { grid-template-columns: repeat(2, 1fr); }
  .ab-scale-photos img:nth-child(2),
  .ab-scale-photos img:nth-child(3) { margin-top: 0; }
}
@media (max-width: 560px) {
  .ab-team-cards { grid-template-columns: repeat(2, 1fr); }
  .abp-presence { padding: 4rem 0 3rem; }
  .abp-copy h2 { font-size: clamp(2.5rem, 14vw, 4rem); }
  .abp-map-stage { height: min(138vw, 660px); }
  .abp-india-map { width: min(118%, 560px); }
  .ab-logo-chip { width: 104px; height: 104px; font-size: 0.85rem; }
  .ab-scale-photos { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
}

/* ===== SERVICES PAGE — responsive ===== */
@media (max-width: 940px) {
  .sv-row { grid-template-columns: 1fr; gap: 2rem; }
  /* image always below text when stacked */
  .sv-row:nth-child(even) .sv-media { order: 0; }
  .sv-row + .sv-row { margin-top: 4rem; }
}
@media (max-width: 768px) {
  /* A quiet technical rule separates the moving industry rail from the
     detailed service catalogue without introducing another decorative block. */
  .sv-industries { border-bottom: 1px solid #D7DEE8; }

  /* These specification tags support desktop scanning but add unnecessary
     pill-shaped clutter once each service is stacked into a single column. */
  .sv-pills { display: none; }

  /* Reading order on a phone is icon+title, the summary, then the photo, then
     the feature list — the image earns its place right after the description
     rather than sitting at the very bottom. `.sv-features` lives inside
     `.sv-text` while `.sv-media` is its sibling, so `display: contents`
     dissolves the wrapper and lets both be ordered in one grid. */
  .sv-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 1.35rem;
  }
  .sv-text { display: contents; }

  /* Icon and heading share the first row: stacked, the 64px circle sat alone
     on its own line with the whole right side empty. */
  .sv-icon {
    grid-column: 1;
    grid-row: 1;
    width: 46px;
    height: 46px;
    margin-bottom: 0;
  }
  .sv-icon svg { width: 22px; height: 22px; }
  .sv-text h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    /* `:root` is 15px at this breakpoint, so rem values render 6.25% smaller
       than the 16px-root arithmetic suggests — sized to land on the intended px. */
    font-size: 1.72rem;
    line-height: 1.22;
  }
  /* everything below spans both columns, sequenced by explicit row */
  .sv-sub { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none; }
  .sv-media,
  .sv-row:nth-child(even) .sv-media { grid-column: 1 / -1; grid-row: 3; order: 0; }
  .sv-features { grid-column: 1 / -1; grid-row: 4; margin: 0; }
  .sv-pills { grid-column: 1 / -1; grid-row: 5; }

  /* The marquee had no mobile sizing at all — 1.25rem type in 1.65rem/2.4rem
     padding is a desktop-scale chip on a phone. These sit between that and the
     first pass, which shrank them further than the marquee could carry. */
  .sv-chip {
    padding: 1rem 1.6rem;
    font-size: 1.08rem;
    gap: 0.6rem;
  }
  .sv-chip-ic { width: 21px; height: 21px; }
}
@media (max-width: 560px) {
  .sv-icon { width: 42px; height: 42px; }
  .sv-icon svg { width: 20px; height: 20px; }
  .sv-text h2 { font-size: 1.56rem; }
  .sv-features { padding: 1.25rem 1.25rem; }
  .sv-chip {
    padding: 0.9rem 1.4rem;
    font-size: 1.02rem;
  }
  .sv-chip-ic { width: 19px; height: 19px; }
}

/* ===== CLIENTELE PAGE — responsive ===== */
@media (max-width: 940px) {
  .cl-trust-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .cl-logos-grid { grid-template-columns: repeat(3, 1fr); }
  .cl-story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cl-story-media { order: -1; }
}
@media (max-width: 560px) {
  .cl-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .cl-logo { min-height: 88px; }
  .cl-trust-stats { gap: 1.75rem; }
  .cl-gallery-track img { width: 220px; }
}

/* ===== BLOG POST TEMPLATE — responsive ===== */
@media (max-width: 940px) {
  .bp-shell { grid-template-columns: 1fr; padding-top: 1.75rem; }
  .bp-main { padding-right: 0; }
  .bp-side {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 2.25rem;
    margin-top: 2.5rem;
  }
  .bp-search { min-width: 0; flex: 1; max-width: 240px; }
}
@media (max-width: 560px) {
  .bp-engage {
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    border-radius: 18px;
    padding: 0.85rem 1.1rem;
  }
  .bp-comment-box { flex-basis: 100%; }
  .bp-rel-item { grid-template-columns: 96px 1fr; }
  .bp-rel-item img { width: 96px; height: 68px; }
}

/* ===== BLOG LIST PAGE — responsive ===== */
@media (max-width: 1024px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  .bl-shell { grid-template-columns: 1fr; }
  .bl-side { position: static; border-top: 1px solid var(--border); padding-top: 2rem; }
}
@media (max-width: 560px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-card-imglink img { aspect-ratio: 16 / 10; }
  .bl-search { padding-left: 0.9rem; }
  .bl-search-btn { padding: 0.55rem 1rem; }
}

/* ===== PROJECT PAGE — responsive ===== */
@media (max-width: 1024px) {
  .pj-exec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pj-exec-grid { grid-template-columns: 1fr; }
}

/* ===== CONTACT PAGE — responsive ===== */
@media (max-width: 1100px) {
  .ct2-main-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(500px, 1.2fr);
    gap: 3rem;
  }
  .ct2-channel {
    grid-template-columns: 36px minmax(0, 1fr);
    padding-inline: 1rem;
  }
  .ct2-channel-arrow { display: none; }
}
@media (max-width: 940px) {
  .ct2-hero {
    padding-top: 9rem;
  }
  .ct2-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  .ct2-response {
    max-width: 520px;
  }
  .ct2-channels {
    grid-template-columns: 1fr 1fr;
  }
  .ct2-channel:nth-child(3) { border-left: 0; }
  .ct2-channel:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .ct2-main-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .ct2-info-panel {
    display: block;
    max-width: 680px;
    padding-top: 0;
  }
  .ct2-panel-heading { max-width: 680px; }
  .ct2-location-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ct2-location-copy { justify-self: start; }
  .ct2-map-frame iframe { height: 370px; }
}
@media (max-width: 640px) {
  .ct2-hero { padding-top: 7rem; }
  .ct2-hero-grid { padding-bottom: 0; }
  .ct2-hero-copy h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
    line-height: 1.12;
  }
  .ct2-hero-copy p { font-size: 0.96rem; }
  .ct2-response { padding: 1.2rem; }
  .ct2-channel {
    min-height: 84px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.85rem;
  }
  .ct2-channel-icon { width: 34px; height: 34px; }
  .ct2-channel strong { font-size: 0.79rem; }
  .ct2-info-panel {
    display: block;
  }
  .ct2-details li {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .ct2-detail-icon {
    width: 44px;
    height: 44px;
  }
  .ct2-detail-icon svg {
    width: 21px;
    height: 21px;
  }
  .ct2-form-panel {
    margin-inline: -8px;
    padding: 1.35rem;
    border-radius: 15px;
  }
  .ct2-form-meta { margin-bottom: 0.75rem; }
  .ct2-form-row { grid-template-columns: 1fr; }
  .ct2-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .ct2-submit { width: 100%; }
  .ct2-reassurance { justify-content: center; }
  .ct2-location-heading h2,
  .ct2-panel-heading h2 { font-size: 1.75rem; }
  .ct2-client-track {
    --ct2-logo-gap: 32px;
    --ct2-logo-offset: 16px;
  }
  .ct2-client-track li {
    flex-basis: 150px;
    height: 80px;
  }
  .ct2-client-track img {
    max-width: 135px;
    max-height: 62px;
  }
  .ct2-map-frame {
    margin-inline: -8px;
    border-radius: 13px;
  }
  .ct2-map-frame iframe { height: 330px; }
}

/* ===== PROJECT PAGE v2 — responsive ===== */
/* project gallery: uniform grid steps 4 → 3 → 2 → 1 */
@media (max-width: 1080px) {
  .pj-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 940px) {
  .pj-case { grid-template-columns: 1fr; min-height: 0; }
  .pj-case-media { min-height: 240px; order: -1; }
  .pj-case-text { padding-bottom: clamp(4.5rem, 8vw, 5.5rem); }
  .pj-qa-grid { grid-template-columns: repeat(2, 1fr); }
  .decision-cta {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: 0;
  }
  .decision-cta-copy { max-width: 740px; }
  .decision-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 740px;
  }
  .decision-cta-desktop-break { display: none; }
  .decision-cta-blueprint {
    opacity: 0.42;
    background-position: 62% center;
  }
}
@media (max-width: 720px) {
  .pj-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .decision-cta-section { padding: 2.4rem 0; }
  .decision-cta {
    padding: 2.15rem 1.4rem 1.9rem;
    border-radius: 9px;
  }
  .decision-cta-copy h2,
  .pj-cta-text h2 { font-size: clamp(1.8rem, 8vw, 2.25rem); }
  .decision-cta-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1rem;
    margin-top: 1.7rem;
  }
  .decision-cta-trust li {
    white-space: normal;
    line-height: 1.35;
  }
  .decision-cta-trust-icon {
    flex-basis: 34px;
  }
  .decision-cta-trust-icon svg {
    width: 32px;
    height: 32px;
  }
  .decision-cta-actions {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .decision-cta-actions .btn,
  .decision-cta-actions .pj-cta-call {
    width: 100%;
  }
  .decision-cta-blueprint {
    opacity: 0.3;
    background-position: 68% center;
  }

  /* filter becomes a horizontal scroller on mobile */
  .pj-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 24px;
    margin-left: -24px;
    margin-right: -24px;
    scrollbar-width: none;
  }
  .pj-filter::-webkit-scrollbar { display: none; }
  .pj-chip { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .pj-qa-grid { grid-template-columns: 1fr; }
  .pj-case-pills span { white-space: normal; }
}
@media (max-width: 440px) {
  .pj-gallery-grid { grid-template-columns: 1fr; }
}


/* ===== GLOBAL — container follows navbar gutters ===== */
@media (max-width: 1100px) {
  .container, .certs-inner, .process-inner, .voices-inner { padding: 0 48px; }
}
@media (max-width: 768px) {
  .container, .certs-inner, .process-inner, .voices-inner { padding: 0 24px; }
  /* Internal-page heroes: keep one compact, consistent clearance below the
     72px mobile navbar. Breadcrumbs add an empty-looking row on small screens,
     so the page title becomes the first visible item. */
  .sv-hero,
  .ab-hero,
  .bl-hero,
  .ct2-hero,
  .page-hero {
    padding-top: calc(72px + 2rem);
  }
  .sv-hero .breadcrumb,
  .ab-hero .breadcrumb,
  .ct2-hero .breadcrumb,
  .page-hero .breadcrumb {
    display: none;
  }

  .cat-viewer-section { padding: 3rem 0 4rem; }
  .cat-viewer-head {
    align-items: stretch;
    flex-direction: column;
    gap: 1.25rem;
  }
  .cat-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
  }
  .cat-actions .btn,
  .cat-open-link {
    justify-content: center;
    width: 100%;
  }
  .cat-viewer-shell { display: none; }
  .cat-mobile-pages {
    display: grid;
    gap: 1rem;
  }
  .cat-mobile-pages img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(18, 40, 80, 0.12);
  }
}

/* ===== PROJECT PROCESS — straight vertical path on small screens ===== */
@media (max-width: 1024px) {
  .pf-row { display: flex; flex-direction: column; height: auto; gap: 0; }
  .pf-row::before, .pf-curve { display: none; }
  .pf-item { padding-bottom: 3.2rem; }
  .pf-row--bottom .pf-item:last-child { padding-bottom: 0; }
  /* vertical connector between nodes */
  .pf-item::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 76px;
    bottom: 0;
    width: 2px;
    background: #1D3A72;
    z-index: -1;
  }
  .pf-row--bottom .pf-item:last-child::after { content: none; }
  .pf-node { box-shadow: none; }
}

/* ===== PRE-FOOTER CTA + FOOTER — responsive ===== */
@media (max-width: 1280px) {
  .fcta-sub { white-space: normal; }
}
@media (max-width: 940px) {
  .fcta-card { grid-template-columns: 1fr; }
  .fcta-media { min-height: 0; }
  /* The source is square (1000x1000). A 16:9 box showed only 56% of its
     height and, centred, cut 22% off the top — taking the technicians'
     heads. 4:3 keeps 75% of the height, and the 20% focal point weights
     what remains toward the top of the frame. */
  .fcta-media img {
    position: static;
    aspect-ratio: 4 / 3;
    height: auto;
    object-position: center 20%;
  }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* 66px reads as oversized once the footer stacks to a single column —
     bring it in line with the header logo's mobile size. */
  .ftr-logo img { height: 44px; }
}
@media (max-width: 560px) {
  .fcta-row,
  .fcta-actions { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .ftr-bottom { padding: 1.35rem 0 1.5rem; }
  .ftr-bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }
  .ftr-bottom-inner > span {
    max-width: 29ch;
    line-height: 1.55;
  }
  .ftr-legal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: min(100%, 310px);
    gap: 0.65rem 0.75rem;
  }
  .ftr-legal a,
  .ftr-legal .ftr-cookie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    white-space: nowrap;
  }
  .ftr-legal .ftr-cookie {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .ftr-logo img { height: 40px; }
}

/* ===== ABOUT WHO WE ARE — responsive ===== */
@media (max-width: 940px) {
  .abw-grid { grid-template-columns: 1fr; gap: 2rem; }
  .abw-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .ab-hero-media { min-height: clamp(552px, 86.4vw, 744px); }
  .ab-hero-media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
  .abw-cta {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 560px) {
  .ab-hero-media { min-height: 624px; }
  .abw-checks { grid-template-columns: 1fr; }
  .abw-cta-fields input { min-width: 0; flex: 1 1 100%; }
  .abw-cta-btn { flex: 1 1 100%; }
  .abw-tabs { gap: 1.25rem; }
}

/* ===== CUSTOMER REVIEWS — responsive ===== */
@media (max-width: 940px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-feature { min-height: 0; aspect-ratio: 4 / 3; }
}
/* Mobile: the four review cards stack to ~880px of page. Collapse them into a
   single fixed-height card that swaps on swipe or arrow tap. Every card is
   layered in the same grid cell; only the active one is visible. */
@media (max-width: 768px) {
  .rv-cards {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    min-height: 232px;          /* fits the longest quote without jumping */
    touch-action: pan-y;         /* keep vertical page scroll working */
  }
  .rv-cards .rv-card {
    grid-area: 1 / 1;            /* all cards share one cell */
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px);
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
    pointer-events: none;
  }
  .rv-cards .rv-card.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* Arrow row, injected by js/main.js below the card */
  .rv-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
  }
  .rv-nav-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--secondary);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .rv-nav-btn:hover,
  .rv-nav-btn:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .rv-nav-btn svg { width: 17px; height: 17px; }
  .rv-nav-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 3.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-cards .rv-card { transition: none; }
}

/* ===== PROJECT PROCESS TIMELINE — responsive ===== */
@media (max-width: 1280px) {
  /* empty pockets vanish below this width — remove the decorative hex
     compositions cleanly rather than letting them collide with content */
  .pp-deco,
  .pp-deco-hero,
  .pp-deco-anchor,
  .hexr { display: none; }
}
@media (max-width: 768px) {
  .pj-case-card { cursor: pointer; }
  .pj-case-card:focus-visible {
    outline: 3px solid rgba(232, 93, 4, 0.5);
    outline-offset: 4px;
  }
  .pj-case-pills { display: none; }
  .pj-case-text p { margin-bottom: 0; }

  /* Mobile process: a dedicated left rail keeps the connector completely
     separate from the stage titles and descriptions. */
  .pj-process { padding: 3.5rem 0; }
  .pj-process .section-header > p { display: none; }
  .pf-wrap { margin-top: 2rem; }
  .pf-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: start;
    text-align: left;
    padding-bottom: 2.35rem;
  }
  .pf-node {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    margin: 0;
  }
  .pf-node svg { width: 23px; height: 23px; }
  .pf-badge {
    top: -5px;
    right: -6px;
    width: 23px;
    height: 23px;
    font-size: 0.61rem;
  }
  .pf-item::after {
    left: 28px;
    top: 58px;
    bottom: 0;
    transform: none;
    background: #AEBBD0;
  }
  .pf-item h3 {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0.1rem 0 0.45rem;
    line-height: 1.3;
  }
  .pf-item p {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 0;
    line-height: 1.55;
  }

  .pp-timeline { --pp-media-h: clamp(180px, 42vw, 240px); padding-left: 0; }
  /* two columns: 44px LEFT RAIL (number + line) | content on the right */
  .pp-step {
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    padding-top: 0;
    margin-bottom: 40px;
  }
  .pp-step:last-child { margin-bottom: 0; }
  /* number sits in normal flow at the top of the rail column */
  .pp-num {
    position: static;
    transform: none;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    font-size: 1.6rem;
    line-height: 1;
    padding-top: 2px;
  }
  /* track + fill run down the rail centre, below the number,
     continuing through the gap toward the next number */
  .pp-step::before,
  .pp-step::after {
    left: 22px;
    top: 40px;
    bottom: -28px;
  }
  /* content stacks in the right column, left-aligned */
  .pp-step--left .pp-body,
  .pp-step--right .pp-body {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    text-align: left;
    max-width: none;
    transform: none;
  }
  .pp-step--left .pp-media,
  .pp-step--right .pp-media { margin: 0 0 0.9rem; }
}