/* =============================================================
   responsive.css — site-wide tablet + mobile layer
   Load LAST on every inner page (after style.css, custom.css and
   reactor-pages.css). The homepage has its own index-responsive.css.

   Why this file exists: custom.css has a second
   `@media (max-width: 991px) :root {...}` block AFTER its 767/480 ones,
   so --body-font-size snaps back to 17.2px on phones; with the
   p { line-height: 1.8 } default every page ran very long. This file
   resets one type scale and the shared template's spacing per device.

     desktop  >=992:  unchanged (style.css / custom.css)
     tablet  768-991: body 16px   · h1 32px · h2 28px · h3 24px
     mobile    <=767: body 15px   · h1 26px · h2 22px · h3 20px
     phone     <=360: body 14.5px · h1 24px · h2 20px · h3 18px
   ============================================================= */

/* ---------- Overflow safety (all sizes) ----------
   Decorative 600px glow divs inside section.in-6 / .base-2 and the
   Bootstrap g-5 gutter pushed pages sideways on phones. `clip` (not
   `hidden`) so position: sticky keeps working. */
html,
body {
    overflow-x: clip;
}

.dev-img img,
.imglist img,
.sol-img img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* pre / Next sat on two lines at every size; on pages where pre and
   Next are two separate <ul>s they also ran together as "preNext" */
.next-pre-btn .buttons-div ul {
    display: flex;
    gap: 20px;
}

.next-pre-btn .buttons-div {
    gap: 20px;
}

/* =============================================================
   TABLET — 991px and below
   ============================================================= */
@media (max-width: 991px) {
    :root {
        --body-font-size: 16px;
        --a-font-size: 16px;
        --hero-heading-size: 2rem;
        --h2-font-size: 1.75rem;
        --h3-font-size: 1.5rem;
        --h4-font-size: 1.25rem;
        --h5-font-size: 1.125rem;
    }

    p,
    li {
        line-height: 1.7;
    }

    .text-size-lg {
        font-size: 17px;
    }

    /* shared page banner */
    .banner {
        min-height: 360px;
    }

    .banner-text h1 {
        font-size: 32px;
    }

    /* section rhythm */
    section.py-5,
    .container.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .p-5 {
        padding: 2rem !important;
    }

    .mb-5 {
        margin-bottom: 2.25rem !important;
    }

    .mt-5 {
        margin-top: 2.25rem !important;
    }

    /* card copy is sized inline (style="font-size:1.1rem;line-height:1.8"
       on ~26 paragraphs), so only !important can reach it */
    .glass-card p,
    .glass-card ul,
    .glass-card li {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .glass-card-orange,
    .glass-card-blue {
        padding: 28px;
    }
}

/* =============================================================
   MOBILE — 767px and below
   ============================================================= */
@media (max-width: 767px) {
    :root {
        --body-font-size: 15px;
        --a-font-size: 15px;
        --hero-heading-size: 1.75rem;
        --h2-font-size: 1.375rem;
        --h3-font-size: 1.25rem;
        --h4-font-size: 1.125rem;
        --h5-font-size: 1.05rem;
    }

    p,
    li {
        line-height: 1.6;
    }

    /* custom.css forces h1/h2 with !important at <=480 only, so 481-767
       fell back to the big desktop vars. One size for the whole range. */
    h1 {
        font-size: 26px !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 22px !important;
        line-height: 1.25;
    }

    h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    h4 {
        font-size: 18px;
        line-height: 1.3;
    }

    h5 {
        font-size: 16.5px;
    }

    h6 {
        font-size: 15.5px;
    }

    .text-size-lg {
        font-size: 16px;
    }

    .btn-premium {
        font-size: 15px;
        padding: 10px 18px;
    }

    /* Bootstrap's 12px container gutter left text blocks hugging the
       screen edge on phones */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ---------- shared page banner ---------- */
    .banner {
        min-height: 280px;
    }

    .banner .container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .banner-text p {
        font-size: 13px;
        letter-spacing: .5px !important;
        line-height: 1.55;
        margin-bottom: 6px !important;
    }

    /* ---------- orange breadcrumb / pre-next bar ---------- */
    .next-pre-btn .pro {
        gap: 4px;
    }

    .next-pre-btn a {
        font-size: 14.5px;
    }

    .pro img {
        height: 32px !important;
        margin: 0 6px;
    }

    .next-pre-btn .buttons-div ul {
        display: flex;
        gap: 16px;
        padding-left: 0 !important;
    }

    /* ---------- section rhythm ---------- */
    section.py-5,
    .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .pt-5 {
        padding-top: 2rem !important;
    }

    .pb-5 {
        padding-bottom: 2rem !important;
    }

    .p-5 {
        padding: 1.5rem 1.25rem !important;
    }

    .p-4 {
        padding: 1.25rem !important;
    }

    .sol-box {
        padding: 1.5rem 1.25rem;
    }

    /* Image/text cards. custom.css centres the heading (+20px top padding)
       and the text on phones, but its later desktop rule pulls the orange
       divider back to the left — so heading centred, line left, and ~44px
       of dead space above the title. Align the whole card left like the
       desktop layout: long paragraphs read better that way and heading,
       divider and copy share one edge. */
    .sol-box h2,
    .sol-box h4,
    .sol-box h5,
    .sol-box h6,
    .sol-box p {
        text-align: left !important;
    }

    .sol-box h2 {
        padding-top: 0;
        font-family: inherit;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0;
    }

    /* .sol-box is a grid with gap: 20px (style.css), which stacked on
       top of these margins: heading → line → text read as three loose
       pieces. Heading and line belong together; text follows. */
    .sol-box .border {
        display: block;
        margin: -8px 0 0;
    }

    .mb-5 {
        margin-bottom: 1.75rem !important;
    }

    .mt-5 {
        margin-top: 1.75rem !important;
    }

    .mb-4 {
        margin-bottom: 1.25rem !important;
    }

    /* Bootstrap g-5 = 3rem gutter: wider than the 12px container padding,
       so the row hangs 12px off each side of a phone. */
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }

    .row.g-5 {
        --bs-gutter-y: 1.75rem;
    }

    .glass-card-orange,
    .glass-card-blue {
        padding: 20px 18px;
    }

    /* Rows without a g-/gy- gutter have no vertical gap, so once their
       col-md-* / col-lg-* columns stack on a phone the image card and
       text card sit glued together. row-gap only acts between wrapped
       lines, so columns that stay side by side (col-6 nav bar) are
       untouched. */
    section .row:not([class*="g-"]):not([class*="gy-"]) {
        row-gap: 24px;
    }

    /* Image/card pairs: 24px between image and its card (row-gap above),
       but 32px + 32px of section padding between one card and the next
       image — so the rhythm read as 24 / 64 / 24 / 64. Trim the stacked
       solution sections so every gap on the page is the same 24px. */
    section.solution.py-5 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .next-pre-btn + section.solution.py-5 {
        padding-top: 28px !important;
    }

    section.solution.py-5:last-of-type {
        padding-bottom: 32px !important;
    }

    .glass-card p,
    .glass-card ul,
    .glass-card li {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .glass-card {
        border-radius: 18px;
    }

    /* a few glass cards carry 35-50px padding inline; with a .sol-box
       (2.5rem) nested inside, kinetics' "14-step protocol" text was left
       ~150px wide */
    .glass-card[style*="padding: 35px"],
    .glass-card[style*="padding: 40px"],
    .glass-card[style*="padding: 45px"],
    .glass-card[style*="padding: 50px"] {
        padding: 18px !important;
    }

    .glass-card .sol-box {
        padding: 14px;
    }

    /* non-stoichiometric "Reaction Matrix": 3 monospace columns,
       sized inline at 0.9rem, wrapped every value onto two lines */
    .glass-card .row[style*="monospace"] {
        font-size: 12px !important;
    }
}

/* =============================================================
   SMALL PHONES — 360px and below
   ============================================================= */
@media (max-width: 360px) {
    :root {
        --body-font-size: 14.5px;
        --a-font-size: 14.5px;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px;
    }

    .p-5 {
        padding: 1.25rem 1rem !important;
    }

    .glass-card p,
    .glass-card ul,
    .glass-card li {
        font-size: 14.5px !important;
    }
}

/* =============================================================
   DESIGN PASS — issues found reviewing every page at 1440 / 820 / 375
   ============================================================= */

/* ---------- all sizes ---------- */

/* Centred titles left a single orphan word on the last line
   ("…for non-catalytic / process"). */
h1,
h2,
h3 {
    text-wrap: balance;
}

/* Orange hero tagline sat on dark / orange-lit photos with nothing to
   separate it — unreadable on several banners. */
.banner-text p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .5);
}

/* Image/text card headings: thin Barlow-Light grey on some pages, bold
   orange on others. One weight everywhere. */
.sol-box h2 {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
}

/* Body copy in the white .sol-box cards used Bootstrap's pale
   .text-secondary — too faint on white. */
.sol-box p.text-secondary {
    color: var(--color-text-muted) !important;
}

/* ---------- tablet + mobile ---------- */
@media (max-width: 991px) {

    /* 768-991: the image/text pair stayed side by side, leaving ~330px
       cards with 3-4 words a line next to a vertically centred image.
       Stack them. Owner's call: content card FIRST, image after —
       hide the mobile-order image duplicate that sits before the card
       and show the desktop-order one that follows it. */
    section.solution .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    section.solution .row > .col-md-6.d-md-none {
        display: none !important;
    }

    section.solution .row > .col-md-6.d-md-block.d-none {
        display: block !important;
    }

    section .row:not([class*="g-"]):not([class*="gy-"]) {
        row-gap: 24px;
    }

    .sol-img {
        max-width: 100%;
    }

    .sol-img img {
        object-fit: cover;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .sol-img img {
        max-height: 380px;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {

    /* custom.css centres .buttons-div inside the right half of the bar,
       so "pre  Next" floated mid-bar instead of at the right edge. */
    .next-pre-btn .buttons-div {
        justify-content: flex-end;
    }

    /* Team bios: centred long paragraphs are hard to read. */
    .ceo-box .ceo-text p {
        text-align: left;
    }

    /* ---- footer: logo and link columns were left, buttons / Follow Us /
       copy centred. Put everything on one left edge. ---- */
    #footer-logo-icon .footer-img,
    .footer-btn {
        justify-content: flex-start;
    }

    .footer-btn {
        justify-items: start;
    }

    #footer .footer-info h4,
    #footer .footer-top .footer-info p {
        text-align: left;
    }

    #footer .footer-info .border {
        margin: 0 0 19px !important;
    }

    #footer .f-img {
        justify-content: flex-start;
    }

    #footer .copyright {
        text-align: left;
    }

    #footer .copyright {
        margin-top: 24px;
    }
}

/* ---------- design pass, part 2 ---------- */

/* The class is misspelled across the site (text-capatlize), so hero
   titles and contact headings rendered all-lowercase
   ("liquid-catalyzed", "contact form"). Honour the misspelling. */
.text-capatlize {
    text-transform: capitalize;
}

/* Contactus has no pre/Next list, so its orange bar collapsed thinner
   than every other page's. */
.next-pre-btn .row {
    min-height: 56px;
    align-items: center;
}

/* Footer: logo and the Contact/Access buttons didn't share a centre line. */
#footer .footer-top > .container > .row.py-5 {
    align-items: center;
}

@media (max-width: 991px) {

    /* g-5 = 3rem vertical gutter: once a g-5 row stacks, image → card
       gaps were ~2x the gaps elsewhere. */
    .row.g-5 {
        --bs-gutter-y: 1.75rem;
    }

    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    /* 4-up col-md-3 grids (Edge-one-step capabilities) were ~150px a
       column at 820px; go 2 x 2 on tablet. */
    section .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {

    /* 204px section-title underline was wider than short titles
       ("Bubble column"). */
    .border {
        width: 120px;
    }

    .sol-box .border {
        width: 60px;
    }
}

/* Four cards (base, reactor, bed-package, Insight-4) open with an h6
   card title — ~13px next to the h2 card titles everywhere else. */
.sol-box > h6:first-child {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-main);
}

@media (max-width: 767px) {
    .sol-box > h6:first-child {
        font-size: 19px;
    }
}

/* ---------- design pass, part 3 ---------- */

/* A .sol-box nested in a .sol-box (emergency-response,
   experimental-validation) drew the card twice: two borders, double
   padding. Flatten the inner one. */
.sol-box .sol-box {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* h4 / h5 card titles (debottlenecking, coverage) looked like body
   text next to the h2 titles. Gradient-styled ones keep their colour. */
.sol-box > h4:first-child:not([class*="gradient"]):not([style*="gradient"]),
.sol-box > h5:first-child:not([class*="gradient"]):not([style*="gradient"]) {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-main);
}

/* .in-6 pages mixed `.row.mb-5.pb-5`, `.row.mb-5.py-5` and `.row.mb-5`,
   so gaps between content rows ran ~100 / 150 / 96px. One rhythm. */
.in-6 .container > .row.mb-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reactor-series breadcrumb: the "/" lived on the next item, so a wrap
   started line two with an orphan "/". Keep it on the item before. */
.rx-crumbs li + li::before {
    content: none;
}

.rx-crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.35);
}

.rx-crumbs li {
    white-space: nowrap;
}

@media (max-width: 991px) {

    /* coverage's image/card pair lives in section.base-1, which the
       section.solution stacking rule didn't reach. */
    section.base-1 .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Active "In this series" chip scrolled flush to the edge, leaving a
       sliver of the previous chip showing. */
    .rx-side ol {
        scroll-padding-inline: 16px;
    }
}

@media (max-width: 767px) {

    /* custom.css stretches every .btn-premium full width on phones —
       out of step with every other button on the site. */
    .btn-premium {
        display: inline-block;
        width: auto;
        max-width: 100%;
    }
}

/* ---------- design pass, part 4 ---------- */

/* One hero title weight: pages ranged from 500 to 800 (inline styles
   beat .text-bold-800 on some, not others). */
.banner-text h1 {
    font-weight: 700 !important;
}

/* .sol-bg's background image sat at z-index:-1 with no stacking context,
   so it painted behind the section and the white closing statement
   (homo-geneous, ready-pack) vanished on the pale page. */
.sol-bg {
    isolation: isolate;
}

/* Glass/vista pages: `.row.g-5.mb-5.py-5` / `.pb-5` piled row padding on
   top of the gutter — card → image 48px but section → section ~140px. */
section .container > .row.mb-5.py-5,
section .container > .row.mb-5.pb-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Small h5 card titles (kinetics "Broad Kinetic Spectrum" …) next to
   1.5rem titles in the same section. */
.sol-box > h5 {
    font-size: 1.3rem;
    line-height: 1.3;
}

@media (max-width: 991px) {

    /* Images framed by a padded .glass-card came out narrower than the
       text cards stacked above and below them. */
    .glass-card[style*="padding: 10px"]:has(> a.imglist),
    .glass-card[style*="padding: 15px"]:has(> a.imglist) {
        padding: 0 !important;
        overflow: hidden;
    }

    /* refining-processing: a padded, bordered frame inside a padded,
       bordered card. */
    .glass-card-premium .image-container-premium {
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    /* reactor-pages.css drops these to one column at 991px, leaving three
       tall, mostly empty full-width tiles on a tablet. Keep 3 across. */
    .rx-grid--3,
    .rx-analogy {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    /* custom.css centres every .sol-box li (and .gas / product copy) on
       phones: bullets stayed at the left edge while their text drifted to
       the middle. */
    .sol-box ul,
    .sol-box li,
    .gas p,
    .product-2 .p-text p {
        text-align: left !important;
    }

    .sol-box > h5 {
        font-size: 17.5px;
    }
}

@media (max-width: 575px) {

    /* rx CTA: "Contact DIFREX" and "All topics" wrapped to two lines at
       two different widths. */
    .rx-cta__btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .rx-cta__btns .rx-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ---------- design pass, part 5 (final review) ---------- */

/* Icon bullets (<li><i …></i> text): wrapped lines ran back under the
   icon. Hang the text off the icon instead. */
.glass-card li:not(.d-flex):has(> i:first-child),
.sol-box li:not(.d-flex):has(> i:first-child) {
    padding-left: 1.75em;
    text-indent: -1.75em;
}

.glass-card li:not(.d-flex):has(> i:first-child) > i:first-child,
.sol-box li:not(.d-flex):has(> i:first-child) > i:first-child {
    display: inline-block;
    width: 1.75em;
    margin-right: 0 !important;
    text-indent: 0;
}

/* A py-5 column inside a py-5 container (Insight-4, reactor) doubled the
   gap above "Past applications" / "Follow a simple 3-step process". */
.container.py-5 > [class*="col-"].py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Contactus: address in the orange Location / Mail cards touched both
   card edges. */
.info-text {
    padding: 0 16px;
}

/* Hero heights: .development.banner, .pricing.banner … each re-declare
   min-height: 450px with two-class specificity, so those heroes stayed
   taller than the rest on tablet and phone. */
@media (max-width: 991px) {
    .banner {
        min-height: 360px !important;
    }
}

@media (max-width: 767px) {
    .banner {
        min-height: 280px !important;
    }
}

/* ---------- design pass, part 6 ---------- */

/* Navy-gradient card titles still read light at 600 next to the bold
   orange/blue titles on sibling pages. */
.sol-box h2 {
    font-weight: 600;
}

/* better-design mini-card titles (Heat Transfer, Probe Strategy …). */
.glass-card h5.text-ink {
    font-weight: 600;
}

/* Desktop: .sol-img is capped at 440px inside a ~620px column, leaving
   ~180px of dead space beside every image/card pair. Fill the column. */
@media (min-width: 992px) {
    .sol-img {
        max-width: 100%;
    }

    .sol-img img {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
    }
}

@media (max-width: 767px) {

    /* about: bios outside .ceo-box were still centred by custom.css. */
    .row:has(.ceo-box) p,
    .row:has(.ceo-box) h5,
    .row:has(.ceo-box) h6 {
        text-align: left;
    }

    .ceo-box .ceo-text {
        text-align: left;
    }

    .ceo-box {
        justify-content: start;
    }
}

/* ---------- design pass, part 7 (final review) ---------- */

/* Breadcrumb links were "pre"/"Pre"/"Next" depending on the page. */
.next-pre-btn .buttons-div a {
    text-transform: capitalize;
}

/* A stray mt-3 / <br> after the underline made underline → text ~3x the
   heading → underline gap on some cards (certification, custom-model). */
.sol-box .border + p {
    margin-top: 0 !important;
}

@media (max-width: 991px) {

    /* Image frames (.img-wrapper-glass, white padded box) sat ~8px wider
       than the text cards stacked above and below. */
    .img-wrapper-glass {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        overflow: hidden;
    }

    /* The last section ran its CTA to within ~25px of the footer rule. */
    body > section:last-of-type {
        padding-bottom: 48px !important;
    }

    /* Inline-sized card titles (consulting 1.8rem/800 …) dwarfed the rest. */
    .sol-box h2[style*="font-size"],
    .sol-box h3[style*="font-size"],
    .sol-box h4[style*="font-size"] {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    /* kinetics: tiny h5 titles inside the grey panels. */
    .sol-box h5 {
        font-size: 1.25rem;
        line-height: 1.3;
        margin-bottom: 8px;
    }
}

@media (max-width: 767px) {

    .sol-box h2[style*="font-size"],
    .sol-box h3[style*="font-size"],
    .sol-box h4[style*="font-size"] {
        font-size: 20px !important;
    }

    /* Centred blocks inside cards (coverage "Extensive Track Record",
       "Other Details" underline) broke the one-left-edge card rule. */
    .sol-box .text-center,
    .gc-panel,
    .gc-panel .text-center {
        text-align: left !important;
    }

    .sol-box .border.mx-auto,
    .gc-panel .border.mx-auto {
        margin-left: 0 !important;
    }

    /* process-synthesis: cards kept equal heights from the 2-up layout and
       left ~40px of empty space at the bottom once stacked. */
    .glass-card.h-100,
    .sol-box.h-100 {
        height: auto !important;
    }
}

/* ---------- design pass, part 8 ---------- */

/* The flattened inner .sol-box kept overflow:hidden with zero padding,
   which shaved the left side-bearing off the first glyph of every line
   ("For", "reactor" → "ʃor", "ˀeactor"). */
.sol-box .sol-box {
    overflow: visible;
}

@media (max-width: 991px) {

    /* The large .btn-premium glow was clipped by overflow:hidden sections
       into a visible pale rectangle. */
    .btn-premium {
        box-shadow: 0 6px 16px rgba(247, 126, 26, .25) !important;
    }
}

@media (max-width: 767px) {

    /* custom.css centres every .solution p on phones ("More …" + its
       numbered list on ready-to-use). Explicit .text-center stays. */
    .solution p:not(.text-center),
    .solution ol,
    .solution ul {
        text-align: left;
    }

    /* Two-column icon lists (standardized-procedures, what-how) stacked
       with a row-gap between the halves, so one list read as two. */
    .row:has(> .col-md-6 > ul) {
        row-gap: 0 !important;
    }

    .row > .col-md-6 > ul:last-child {
        margin-bottom: 0;
    }
}

/* ---------- design pass, part 9 (last review) ---------- */

/* ready-pack: a short col-md-4 image beside a tall col-md-8 one left a
   large empty block under the short one. Same height, cropped. */
@media (min-width: 768px) {
    .product-2 .row:has(> .col-md-4 .imglist):has(> .col-md-8 .imglist) {
        align-items: stretch;
    }

    .product-2 .row > .col-md-4 .imglist,
    .product-2 .row > .col-md-8 .imglist {
        display: block;
        height: 100%;
    }

    .product-2 .row > .col-md-4 .imglist img,
    .product-2 .row > .col-md-8 .imglist img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 991px) {

    /* Tablet: same 24px rhythm between stacked image/card sections as
       on phones (was 64-130px between sections, ~24px within). */
    section.solution.py-5 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .next-pre-btn + section.solution.py-5 {
        padding-top: 32px !important;
    }

    section.solution.py-5:last-of-type {
        padding-bottom: 40px !important;
    }
}

@media (max-width: 767px) {

    /* .gas / .p-text headings + underlines were still centred by
       custom.css while their paragraphs are now left. */
    .gas h2,
    .gas h3,
    .p-text h2 {
        text-align: left !important;
    }

    .gas .border,
    .p-text .border {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* employment / news heroes are section.service.about-b (no .banner
   class), so the unified hero height above skipped them. */
@media (max-width: 991px) {
    section.about-b {
        min-height: 360px !important;
    }
}

@media (max-width: 767px) {
    section.about-b {
        min-height: 280px !important;
    }

    section.about-b .container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ---------- design pass, part 10 (last review) ---------- */

/* Same doubled py-5, one level deeper: container.py-5 > row > col.py-5
   (Insight-4 "Past applications", about). */
.container.py-5 > .row > [class*="col-"].py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* consulting: the panel's 30px drop shadow was clipped by an
   overflow:hidden ancestor into a hard rectangle. Leave it room. */
.gc-panel--shadow {
    margin-bottom: 32px;
}

/* bed-package / ready-to-use banners put .banner-text straight in the
   section with no .container, so the tagline ran to the screen edge. */
.banner > .banner-text {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px) and (max-width: 991px) {

    /* about: first bio paragraph sat in a centred col-md-9 while the next
       paragraph ran full width — two different left edges. */
    .row:has(.ceo-box) > .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    /* about: LinkedIn "Connect" landed left / indented / centred per person. */
    .ceo-img {
        justify-content: flex-start;
    }
}

/* ---------- card title scale (all card types, one style) ----------
   Glass-card titles were 22px / 800 on phones — same size as section
   headings and heavier than the 700 white-card titles. Card titles sit
   one step below section headings, weight 700, tight to their underline. */
@media (max-width: 991px) {
    .glass-card h2,
    .glass-card h3,
    .glass-card > h4:first-child,
    .sol-box h2 {
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 767px) {
    .glass-card h2,
    .glass-card h3,
    .glass-card > h4:first-child,
    .sol-box h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .glass-card .gradient-divider,
    .glass-card h2 + div[style*="height: 4px"],
    .glass-card h3 + div[style*="height: 4px"] {
        margin-bottom: 16px !important;
    }
}

@media (max-width: 360px) {
    .glass-card h2,
    .glass-card h3,
    .sol-box h2 {
        font-size: 19px !important;
    }
}

/* White .sol-box cards are a grid with gap: 20px, so heading → line →
   text ran ~30px each. Match the glass cards: 10px, then 16px. */
@media (max-width: 767px) {
    .sol-box > h2,
    .sol-box > h4,
    .sol-box > h5,
    .sol-box > h6 {
        margin-bottom: 0 !important;
    }

    .sol-box > .border {
        margin: -10px 0 -4px !important;
    }
}

/* .sol-box is a grid with height:100%: spare height was shared out
   between its rows, stretching heading → line → text gaps unevenly.
   Pack rows at the top so the spacing is what the margins say. */
.sol-box {
    align-content: start;
}

/* Negative margins can't shrink a grid track below 0, so the underline
   row still cost the full 20px gap. On phones lay the card out as a
   plain block and space it with margins: title → line 10px,
   line → text 16px, everything else 16px. */
@media (max-width: 767px) {
    .sol-box {
        display: block;
    }

    .sol-box > * + * {
        margin-top: 16px !important;
    }

    .sol-box > h2 + .border,
    .sol-box > h4 + .border,
    .sol-box > h5 + .border,
    .sol-box > h6 + .border {
        margin-top: 10px !important;
    }

    .sol-box > .border {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /* beats the earlier `.sol-box .border + p { margin-top: 0 }` */
    .sol-box > .border + p,
    .sol-box > .border + ul,
    .sol-box > div[style*="height: 4px"] + p {
        margin-top: 16px !important;
    }

    .sol-box > h2 + div[style*="height: 4px"],
    .sol-box > h4 + div[style*="height: 4px"] {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
}

/* ---------- heading weight: 600 everywhere in page content ----------
   Content headings ran 700-800 from three sources: .gradient-text-blue /
   .gradient-text-orange-bold / .text-bold-800 (800), inline
   style="font-weight: 800" on ~40 headings, and <strong> inside headings.
   Owner's call: 600. :not(#_) lifts specificity above any class rule;
   !important beats the inline styles. Hero h1 (on a photo) stays 700;
   header and footer are not <section>s, so they are untouched. */
section :is(h2, h3, h4, h5, h6):not(#_) {
    font-weight: 600 !important;
}

section :is(h2, h3, h4, h5, h6):not(#_) :is(strong, b) {
    font-weight: inherit !important;
}

/* =============================================================
   ONE CARD STYLE — every content card looks like the white .sol-box
   (white, 1px soft border, 20px radius, soft shadow, navy/grey text).
   The dark translucent cards (.gc-dark, .gc-panel and glass cards with
   an inline rgba(10, 20, …) background) rendered as flat grey slabs on
   the light pages, with white / #d8dde6 text that barely read.
   ============================================================= */
.gc-dark,
.gc-panel,
.glass-card[style*="rgba(10, 20"],
.glass-card[style*="rgba(10,20"] {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 36px var(--color-card-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--color-text-muted);
}

/* light-on-dark text inside those cards → the white-card palette */
:is(.gc-dark, .gc-panel, .glass-card[style*="rgba(10, 20"], .glass-card[style*="rgba(10,20"])
    :is(p, li, span, div, .text-white-50, .card-copy, .card-list):not([class*="text-orange"]):not([class*="gradient"]):not([style*="#ff5e3a"]):not([style*="#f88b39"]):not([style*="#00d2ff"]):not([style*="#1f6fb2"]) {
    color: var(--color-text-muted) !important;
}

:is(.gc-dark, .gc-panel, .glass-card[style*="rgba(10, 20"], .glass-card[style*="rgba(10,20"])
    :is(strong, b):not([class*="text-orange"]):not([style*="color"]) {
    color: var(--color-text-main) !important;
}

:is(.gc-dark, .gc-panel, .glass-card[style*="rgba(10, 20"], .glass-card[style*="rgba(10,20"])
    :is(h2, h3, h4, h5, h6):is(.text-white, [style*="color: white"], [style*="color:white"], [style*="color: #fff"]) {
    color: var(--color-text-main) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Long copy in the former grey panels (coverage "Extensive Track
   Record", consulting) was centred — left like every other card. */
.gc-panel,
.gc-panel .text-center,
.gc-panel .card-copy {
    text-align: left !important;
}

.gc-panel .border.mx-auto {
    margin-left: 0 !important;
}

/* reactor: "Follow a simple 3-step process…" was a bold, centred h4
   floating between sections and touching the images below. Card it. */
section.base-1 .col-md-10 > h4.text-center:not(#_) {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 14px 36px var(--color-card-shadow);
    padding: 28px 32px;
    margin-bottom: 32px !important;
    font-size: 1.1rem;
    font-weight: 400 !important;
    line-height: 1.75;
    color: var(--color-text-muted);
    text-align: left !important;
}

@media (max-width: 767px) {
    section.base-1 .col-md-10 > h4.text-center:not(#_) {
        padding: 20px 18px;
        font-size: 15px;
        margin-bottom: 24px !important;
    }
}

/* Header mega-menu column titles (Insight, Edge …) — 600 like the rest. */
#header h4.text-orange {
    font-weight: 600 !important;
}

/* Underlines in the former grey panels were long solid 120-204px rules;
   every white card uses the short 60px orange fade. */
:is(.gc-dark, .gc-panel, .glass-card) .border {
    width: 60px !important;
    height: 3px !important;
    border: none !important;
    background: linear-gradient(90deg, #f77e1a 0%, transparent 100%) !important;
    opacity: .8;
}

/* Light cards with tinted borders (a2z orange/blue, refining "premium")
   — same border, radius and shadow as the reference white card. */
.glass-card-orange,
.glass-card-blue,
.glass-card-premium {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 36px var(--color-card-shadow) !important;
}

/* An image link inside a flex row kept min-width:auto, i.e. the image's
   natural 1024px, and dragged its card wider than the column — the
   card hit the left edge of the screen and the image sat left with a
   gap on the right (base "Speedy and satisfactory solutions…"). */
.d-flex > a.imglist,
.d-flex > a:has(> img) {
    min-width: 0;
    flex: 0 1 auto;
}

.d-flex > a.imglist > img,
.d-flex > a:has(> img) > img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Stacked layouts (tablet + phone): content card first, image second,
   on every template. Rows whose markup puts the image column before the
   card (e.g. base section 2) get the card pulled to the front. */
@media (max-width: 991px) {
    /* (no :has() nested inside :has() — that is invalid CSS and drops
       the whole rule) */
    .row > [class*="col-"]:has(> .sol-box),
    .row > [class*="col-"]:has(> .glass-card-premium),
    .row > [class*="col-"]:has(> .glass-card > p),
    .row > [class*="col-"]:has(> .glass-card > h2),
    .row > [class*="col-"]:has(> .glass-card > h3),
    .row > [class*="col-"]:has(> .glass-card > h4) {
        order: -1;
    }
}

/* Intro glass cards (reliability-value "Unlocking Potential…",
   Edge-one-step, non-stoichiometric): centred title over a faint 80x5
   two-sided fade — unlike every other card. Same pattern as the
   reference white card at all sizes: title, short underline and copy
   on one left edge. */
.glass-card > h2.text-center:has(+ div.mx-auto),
.glass-card > h2.text-center + div.mx-auto + p.text-center {
    text-align: left !important;
}

.glass-card > h2.text-center + div.mx-auto {
    width: 60px !important;
    height: 3px !important;
    margin: 12px 0 20px !important;
    border-radius: 2px !important;
}

.glass-card > h2.text-center + div.mx-auto + p.text-center {
    max-width: none !important;
    margin: 0 !important;
}

.glass-card:has(> h2.text-center + div.mx-auto) .text-center {
    text-align: left !important;
}

/* Edge-one-step "Technical Capabilities & Support": same centred-title +
   two-sided fade pattern, without the .text-center class on the h2. */
.glass-card > h2:has(+ div.mx-auto[style*="height: 5px"]) {
    text-align: left !important;
}

.glass-card > h2 + div.mx-auto[style*="height: 5px"] {
    width: 60px !important;
    height: 3px !important;
    margin: 12px 0 20px !important;
    border-radius: 2px !important;
}

/* underline takes the colour its heading already uses */
.glass-card > h2 + div.mx-auto[style*="#ff5e3a"] {
    background: linear-gradient(90deg, #ff5e3a 0%, transparent 100%) !important;
}

.glass-card > h2 + div.mx-auto[style*="#00d2ff"] {
    background: linear-gradient(90deg, #00d2ff 0%, transparent 100%) !important;
}

.glass-card:has(> h2 + div.mx-auto[style*="height: 5px"]) > p.text-center {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =============================================================
   Card headings: ONE colour — the orange gradient — on every card.
   (Was alternating orange / blue / navy.) Underlines follow.
   ============================================================= */
:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) :is(h2, h3, h4, h5, h6):not(#_) {
    background: linear-gradient(45deg, #f88b39, #ff5e3a) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #f77e1a !important;
    width: fit-content;
    max-width: 100%;
}

:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) :is(h2, h3, h4, h5, h6):not(#_) :is(strong, b, span, em) {
    -webkit-text-fill-color: transparent !important;
    color: inherit !important;
}

/* centred card titles keep their centring with width: fit-content */
:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) :is(h2, h3, h4, h5, h6).text-center:not(#_) {
    margin-left: auto;
    margin-right: auto;
}

/* blue / navy underlines under card titles → orange */
:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) .gradient-divider-blue,
:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) :is(h2, h3, h4, h5, h6) + div[style*="#00d2ff"],
:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) :is(h2, h3, h4, h5, h6) + div[style*="#3a7bd5"] {
    background: linear-gradient(90deg, #ff5e3a 0%, transparent 100%) !important;
}

.accent-bar-cyan,
.glass-card > h2 + div.mx-auto[style*="#00d2ff"]:not(#_) {
    background: linear-gradient(90deg, #ff5e3a 0%, transparent 100%) !important;
}

/* Blue accents inside cards (quote boxes, icons, cyan pull-quotes)
   follow the card titles to orange. */
:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) .highlight-box-blue {
    background: rgba(255, 94, 58, 0.05) !important;
    border-left-color: #ff5e3a !important;
}

:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) :is(.text-info, .text-info-italic, [style*="#00d2ff"], [style*="#0dcaf0"]):not(h2, h3, h4, h5, h6, div[style*="height"]) {
    color: #f77e1a !important;
    -webkit-text-fill-color: #f77e1a !important;
}

/* refining-processing "premium" cards: same mobile/tablet type scale as
   every other card (title 20/24px, body 15/16px). */
@media (max-width: 991px) {
    .glass-card-premium :is(h2, h3):not(#_) {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .glass-card-premium :is(p, li):not(#_) {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .glass-card-premium {
        padding: 2rem !important;
    }
}

@media (max-width: 767px) {
    .glass-card-premium :is(h2, h3):not(#_) {
        font-size: 20px !important;
    }

    .glass-card-premium :is(p, li):not(#_) {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .glass-card-premium {
        padding: 1.5rem 1.25rem !important;
    }

    .glass-card-premium .accent-bar-cyan,
    .glass-card-premium .accent-bar-orange {
        width: 60px !important;
        height: 3px !important;
        margin: 10px 0 16px !important;
    }
}

/* Intro cards (title + .mx-auto underline): the fit-content centring
   above pulled the title back to the middle while the underline had
   gone left. Whole card on one left edge: title, line, copy. */
:is(.glass-card, .sol-box) :is(h2, h3).text-center:has(+ .mx-auto):not(#_),
:is(.glass-card, .sol-box) :is(h2, h3):has(+ div.mx-auto):not(#_) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

:is(.glass-card, .sol-box) :is(h2, h3) + .mx-auto:not(#_) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:is(.glass-card, .sol-box) :is(h2, h3) + .mx-auto ~ p:not(#_) {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* "Card first" reordering must never lift a card above the section
   title that shares its row (Catalytic, 2-g-l-liquid). */
@media (max-width: 991px) {
    .row > .col-md-12:first-child,
    .row > .col-12:first-child,
    .row > .col-lg-12:first-child {
        order: -2;
    }
}

/* Centred section-title underline (.border.mx-auto under "To choose
   from…", "Bubble column", "Integral/ differential…", page headings on
   employment / news / acknowledgment …): was a flat 1px orange rule.
   Now fades in from both sides — orange in the middle. Card underlines
   (left-aligned, inside cards) keep their one-sided fade. */
.border.mx-auto:not(:is(.sol-box, .glass-card, .gc-panel, .gc-dark, .glass-card-premium) .border) {
    height: 2px !important;
    border: none !important;
    background: linear-gradient(90deg, transparent 0%, #f77e1a 50%, transparent 100%) !important;
    opacity: 1;
}

/* ready-pack "Complete design packs…": bare text on the page with a
   204px solid rule and ~200-character lines. Same white card as every
   other content block, short one-sided underline, readable measure. */
.product-2 .p-text {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 14px 36px var(--color-card-shadow);
    padding: 2.5rem;
}

.product-2 .p-text > h2:not(#_) {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

.product-2 .p-text > .border:not(#_) {
    width: 60px !important;
    height: 3px !important;
    border: none !important;
    margin: 12px 0 18px !important;
    background: linear-gradient(90deg, #f77e1a 0%, transparent 100%) !important;
}

.product-2 .p-text > p {
    max-width: 75ch;
    padding-top: 0 !important;
    color: var(--color-text-muted);
}

.product-2 .p-pack-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-2 .p-pack-list li {
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .product-2 .p-text {
        padding: 1.5rem 1.25rem;
    }

    .product-2 .p-text > .border:not(#_) {
        margin: 10px 0 16px !important;
    }
}

/* full container width, like the image row below it, with a gap */
.product-2 .p-text {
    max-width: none;
    margin: 0 0 32px;
}

/* gallery images under the card: same rounded corners as cards */
.product-2 .row .imglist img {
    border-radius: 20px;
}

@media (max-width: 767px) {
    .product-2 .p-text {
        margin-bottom: 24px;
    }
}

.product-2 .p-text > p {
    max-width: none;
}

/* =============================================================
   ONE TYPE SCALE + READABLE ORANGE (site-wide audit, 2026-10)
   Desktop section headings came in three h2 sizes (33.6 / 35.2 /
   36.8px: inline 2.1rem, the default, and .gradient-text-* 2.3rem)
   and h3/h4 anywhere from 19 to 37px. Desktop only: below 992px
   the card-title scale above already sets one size per level.
   Inline font-size left on purpose (the 1rem uppercase eyebrows on
   Edge-one-step) is respected.
   ============================================================= */
@media (min-width: 992px) {
    section h2:not([style*="font-size"]):not(#_) {
        font-size: var(--h2-font-size) !important;
    }

    section h3:not([style*="font-size"]):not(#_) {
        font-size: var(--h3-font-size) !important;
    }

    section h4:not([style*="font-size"]):not(#_) {
        font-size: var(--h4-font-size) !important;
    }

    /* card copy ran 15.2 / 16 / 16.8 / 17.6px depending on the page;
       same size as the rest of the body text. Leads and .small stay. */
    :is(.glass-card, .sol-box) :is(p, li):not(.text-size-lg, .card-copy--lg, .small, [style*="font-size"]):not(#_) {
        font-size: var(--body-font-size) !important;
    }
}

/* Brand orange #f77e1a is 2.6:1 on white: fine for big headings, too
   faint for body-size copy (quotes, inline highlights, links). Body-size
   orange text uses a deeper shade of the same hue (4.9:1). */
:root {
    --color-accent-text: #b85200;
}

:is(p, li, a, span, em):is(.text-orange, .text-info-italic, .text-orange-bold, .text-info, [style*="#f88b39"], [style*="#00d2ff"]):not(:is(h1, h2, h3, h4, h5, h6, .banner, .banner-text, #header, #footer) *):not(#_) {
    color: var(--color-accent-text) !important;
    -webkit-text-fill-color: var(--color-accent-text) !important;
}

/* Contact page info box: white text on light orange was 2.7:1 */
.box-1.bg-orange:has(.contact-info) {
    background-color: #c2570c;
}

/* Full-width section titles inside intro cards: centred, with their
   underline. Opt-in class; beats the "intro cards on one left edge"
   rule above. Copy below stays left. */
h2.sec-title:not(#_):not(#_) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

h2.sec-title + h5:not(#_):not(#_) {
    text-align: center !important;
}

:is(h2.sec-title, h2.sec-title + h5) + div:not(#_):not(#_) {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Image-only cards: the picture fills the card. Inline/CSS padding (8-15px)
   left a white frame round every image ("space in the card"). Cards holding
   text as well as an image are untouched. */
.glass-card:has(> a.imglist > img):not(:has(p, h2, h3, h4, h5, ul)),
.img-wrapper-glass,
.image-container-premium {
    padding: 0 !important;
    overflow: hidden;
}

.glass-card:has(> a.imglist > img):not(:has(p, h2, h3, h4, h5, ul)) img,
.img-wrapper-glass img,
.image-container-premium img {
    display: block;
    width: 100%;
    border-radius: 0 !important;
}

/* Card borders: one style everywhere (1px soft). The kinetics CAUTION card
   had a 2px red rule, go-no-go a blue one, and several gradient banner cards
   carried white / faint borders that vanished on the light page. */
.sol-box.glass-card[style*="2px solid #ff5e3a"],
.gc-light--blue,
.glass-card[style*="border: 1px solid rgba(255, 255, 255"],
.glass-card[style*="border: 1px solid rgba(255, 94, 58, 0.2)"] {
    border: 1px solid var(--color-border) !important;
}

/* kinetics Caution card: .card-copy's #d8dde6 was meant for dark cards and vanished on the white card */
.solution .sol-box.glass-card > p.card-copy {
    color: inherit;
}

/* diagnosis-solution "Call DIFREX!" pill: the h4 shrinks to its text, so
   the box's text-center had nothing to centre and it sat on the left */
.glass-card-subtle.text-center > h4 {
    margin-left: auto !important;
    margin-right: auto !important;
}