/* ==========================================================================
   Bizortien Tech — UI/UX enhancement layer
   Loaded AFTER style.css. Additive only: no existing rule is deleted, so the
   established brand identity is preserved and every change is reversible
   by removing this one <link>.

   Design direction: Trust & Authority + Swiss/Minimalism
   - subtle hover 200-250ms, sharp edges, clear type hierarchy
   - brand palette kept: near-black #1e1e1e, deep red #a80000
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Semantic names for the colours already used across the site, so future
   edits change one value instead of hunting raw hex.
   -------------------------------------------------------------------------- */
:root {
    --color-primary: #1e1e1e;
    --color-on-primary: #ffffff;
    --color-accent: #a80000;
    --color-on-accent: #ffffff;
    --color-background: #f8f8f8;
    --color-surface: #ffffff;
    --color-foreground: #1e1e1e;
    --color-muted-foreground: #5a6b7b;
    --color-border: #dfe4e9;
    --color-on-dark: #ffffff;
    --color-on-dark-muted: rgba(255, 255, 255, .78);

    --focus-ring: 3px;
    --focus-offset: 2px;

    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 160ms;
    --dur-base: 220ms;

    --tap-min: 44px;
}

/* --------------------------------------------------------------------------
   1b. BRAND LOGO — adapts to whatever it sits on
   The wordmark ("Bizortien") has no fill of its own; this sets it to white
   and blends it with `difference` against the backdrop.
   White vs. a light page -> difference gives black (matches the artwork);
   white vs. a dark hero image -> difference gives white. The red "Tech"
   letters keep their own gradient fill, outside this rule, so they stay red
   on every background instead of inverting with the rest of the mark.
   -------------------------------------------------------------------------- */
.logo img,
.logo svg,
.overlay .menu-logo img,
.overlay .menu-logo svg {
    z-index: 3;
    position: relative;
    height: 60px;
    width: 100%
}

.brand-logo .logo-mark {
    fill: #fff;
    mix-blend-mode: difference;
}

/* Homepage hero heading is vertically centered independent of the logo, so
   on shorter viewports the gap between them collapses. padding-top adds the
   gap; trimming the same amount off the button's own top margin keeps the
   block's total height (and so its centered position, and its clearance
   under the fixed scroll-down arrow near the bottom) unchanged. */
.header-content {
    padding-top: 30px;
}

.header-content .btn-white.m-t-50 {
    margin-top: 20px !important;
}

/* --------------------------------------------------------------------------
   1c. SERVICES SECTION TITLES — keep the rotated subtitle on one line
   The four service sections each pair a short h1 with a wider h2, rotated
   vertically. Section 4 reserves room with its own min-width, but section 3
   never did — it only ever held a short word, so a longer subtitle wraps to
   two lines and breaks the rhythm the other three share. nowrap holds it to
   one line at every breakpoint, without pinning a pixel width per font size.
   -------------------------------------------------------------------------- */
.services03 .services3_title h2 {
    white-space: nowrap;
}

/* Every other service panel sets its black heading at 130px; section 3 was left
   at 90px back when it carried the longer "Data ANALYTICS" wording. Both panels
   built on this block now hold short titles, so at 90px the black heading reads
   barely larger than its own grey subtitle and loses the weight the rest have.
   Each breakpoint is restated because enhance.css loads after style.css, so a
   lone unscoped rule here would also win inside its narrower media queries. */
.services03 .services3_title h1 {
    font-size: 130px;
}

@media (max-width: 991px) {

    .services03 .services3_title h1 {
        font-size: 110px;
    }
}

@media (max-width: 640px) {

    .services03 .services3_title h1 {
        font-size: 80px;
    }
}

@media (max-width: 480px) {

    .services03 .services3_title h1 {
        font-size: 65px;
    }
}

/* --------------------------------------------------------------------------
   2. FOCUS VISIBILITY  — Accessibility / High
   style.css sets `.btn:focus{outline:0!important}` and never replaces it,
   leaving keyboard users with no visible position. :focus-visible restores a
   ring for keyboard/AT users only, so mouse clicks stay visually unchanged.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-white:focus-visible,
.btn-blue:focus-visible,
.btn_white:focus-visible,
.send-btn:focus-visible,
.PD-btn-1:focus-visible,
.menu2-link:focus-visible,
.contact-btn:focus-visible,
.btn-open:focus-visible {
    outline: var(--focus-ring) solid var(--color-accent) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: 0 0 0 1px #fff !important;
    border-radius: 2px;
}

/* On the dark sections a red ring alone is low-contrast against the
   background; pair it with a white halo so it reads in both contexts. */
.Dark_show a:focus-visible,
.we-help a:focus-visible,
.services02 a:focus-visible,
.services04 a:focus-visible,
.footer a:focus-visible,
.overlay .menu2-link:focus-visible,
.request-demo a:focus-visible {
    outline: var(--focus-ring) solid #fff !important;
    box-shadow: 0 0 0 6px rgba(168, 0, 0, .55) !important;
}

/* Skip link — lets keyboard users bypass the logo + full nav stack. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--color-accent);
    color: var(--color-on-accent) !important;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
    top: 16px;
}

/* --------------------------------------------------------------------------
   3. REDUCED MOTION  — Accessibility / High
   Every page drives entrance animation through wow.js + animate.css and the
   header uses parallax. Under `prefers-reduced-motion` the content must still
   arrive in its final, readable state rather than staying stuck at opacity 0.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* wow.js hides elements until it fires; force the resolved state. */
    .wow,
    .animated,
    .fadeIn,
    .fadeInUp,
    .fadeInDown,
    .fadeInLeft,
    .fadeInRight,
    .pulse {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Scroll cue is decorative and loops forever — stop it. */
    .arrow span {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   4. TOUCH TARGETS  — Touch / High
   Social icons and footer links sit well under the 44px minimum and are
   packed edge to edge. Padding grows the hit area without moving the glyphs.
   -------------------------------------------------------------------------- */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    margin-right: 4px;
    transition: color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.social-icons a:hover,
.social-icons a:focus-visible {
    transform: translateY(-2px);
}

.bottom-menu li a,
.menu2-link {
    display: inline-block;
    min-height: var(--tap-min);
    line-height: 1.6;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Hamburger — enlarged hit area and a real hover/focus affordance. */
.menu-b-icon a.btn-open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. INTERACTION FEEDBACK  — Interaction / Critical
   The theme changes several states instantly (0ms). Consistent 220ms easing
   makes the interface feel deliberate instead of abrupt.
   -------------------------------------------------------------------------- */
a,
.btn,
.btn-white,
.btn-blue,
.btn_white,
.send-btn,
.PD-btn-1,
.contact-btn {
    transition: color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

/* Every clickable element gets the pointer cursor, including the JS-driven
   ones that are plain <a> without href. */
a[href],
button,
.btn-open,
.send-btn,
.request_for_demo,
[role="button"] {
    cursor: pointer;
}

.btn-white:hover,
.btn-blue:hover,
.btn_white:hover,
.send-btn:hover,
.PD-btn-1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(30, 30, 30, .18);
}

.btn-white:active,
.btn-blue:active,
.btn_white:active,
.send-btn:active,
.PD-btn-1:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Disabled / in-flight submit needs to look unavailable. */
.send-btn[disabled],
.send-btn[aria-busy="true"] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. SERVICE GRID  — Layout / Style
   The four home-page service blocks read as loose text. A hairline rule and
   a hover lift give them card structure while staying Swiss-flat: no
   rounded corners, no gradients.
   -------------------------------------------------------------------------- */
.we-help .service-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-top: 2px solid var(--color-accent);
    height: 100%;
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.we-help .service-card:hover {
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .3);
    border-top-color: var(--color-accent);
    transform: translateY(-4px);
}

/* The theme centres h5 but leaves h3 and p ranged left, so each card was
   mixing two alignments. One axis per card. */
.we-help .service-card,
.we-help .service-card h3,
.we-help .service-card h5,
.we-help .service-card .service-tags {
    text-align: left;
}

/* Reserve two lines of heading on every card. "WEBSITES" and "GRAPHICS" fit
   on one line while "CUSTOM SOFTWARE" and "SOCIAL MEDIA" need two, which was
   pushing their descriptions 59px lower than the neighbours'. The heading's
   line-height resolves to `normal` (~1.475), so two lines is 2.95em. */
.we-help .service-card h3 {
    min-height: 2.95em;
    margin-bottom: 12px;
    letter-spacing: .5px;
}

.we-help .service-card h5 {
    margin-bottom: 16px;
    line-height: 1.6;
}

/* Counters the "only four things" reading the card grid invites. Sits right
   under the cards, where the reader has just finished counting them. */
.we-help .services-more {
    max-width: 64ch;
    margin: 8px auto 0;
    font-size: 18px;
    line-height: 1.75;
    text-align: center;
    color: var(--color-on-dark);
}

@media (max-width: 767px) {

    .we-help .services-more {
        font-size: 16px;
        text-align: left;
    }
}

/* Tag line beneath each service — muted so the service name stays dominant.
   margin-top:auto drops it to the card floor, so the tag rows stay level even
   if a description runs to a different number of lines. */
.we-help .service-card .service-tags {
    margin: auto 0 0;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .3px;
    color: var(--color-on-dark-muted) !important;
}

@media (max-width: 767px) {

    /* Stacked single column — there is no neighbour to line up with, and the
       reserved heading height would just read as a gap. */
    .we-help .service-card h3 {
        min-height: 0;
    }
}

/* --------------------------------------------------------------------------
   6b. PRODUCT PANELS  — Typography / Contrast
   The two product panels carry a rotated title stack. A third line states the
   platforms, so the phone and laptop imagery is backed up by words instead of
   relying on the pictures alone to make the point.
   -------------------------------------------------------------------------- */
.PD-1_title .PD-platform,
.PD-2_title .PD-platform {
    margin: 14px 0 0 40px;
    padding: 0;
    font-family: Oswald, sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Dark panel — #ffffff at 82% reads 12.4:1 on #1e1e1e. */
.PD-1_title .PD-platform {
    color: rgba(255, 255, 255, .82);
}

/* Light panel — #5a6b7b reads 4.9:1 on #f8f8f8. */
.PD-2_title .PD-platform {
    color: var(--color-muted-foreground);
}

/* The theme sets both panels' subhead to #a3a8ad. On the light panel that is
   2.2:1 — it fails even the 3:1 allowance for large text. Darkened to 4.8:1,
   which clears the stricter normal-text bar too. The dark panel keeps the
   original grey; it already measures 7.0:1 there. */
.PD-2_title h2 {
    color: #656f7b !important;
}

/* --------------------------------------------------------------------------
   7. FORMS  — Forms / High
   Fields were placeholder-only: the label vanishes the moment typing starts
   and screen readers get nothing reliable. Visible labels are added in the
   markup; these rules style them and the inline error text.
   -------------------------------------------------------------------------- */
/* Shared layout for every labelled field, regardless of which panel it sits on.
   .contact-form is the contact page; .job-form is the demo-request and job
   application forms. */
.contact-form .field-label,
.job-form .field-label {
    display: block;
    margin-bottom: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-form .field-label .req,
.job-form .field-label .req {
    margin-left: 2px;
}

.contact-form .form-control:focus-visible,
.job-form .form-control:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 1px !important;
}

/* Inline, per-field error sits directly under its own input. */
.contact-form .field-error,
.job-form .field-error {
    display: none;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.contact-form .field-error.is-visible,
.job-form .field-error.is-visible {
    display: block;
}

.contact-form .form-hint,
.job-form .form-hint {
    margin: 6px 0 0;
    font-size: 13px;
}

/* -- On the dark contact panel ------------------------------------------
   Measured against #1e1e1e: label 10.9:1, error 7.3:1, hint 8.1:1. */
.contact-form .field-label {
    color: #c7d2dc;
}

.contact-form .field-label .req,
.contact-form .field-error,
.contact-form .form-hint .req {
    color: #ff8a75;
}

.contact-form .form-control[aria-invalid="true"] {
    border-color: #ff8a75 !important;
}

.contact-form .form-hint {
    color: #a9b6c2;
}

/* -- On the light #f8f8f8 panels ----------------------------------------
   Measured against #f8f8f8: label 5.2:1, error 7.1:1. */
.job-form .field-label {
    color: var(--color-muted-foreground);
}

.job-form .field-label .req,
.job-form .field-error,
.job-form .form-hint .req {
    color: #c81e00;
}

.job-form .form-control[aria-invalid="true"] {
    border-color: #c81e00 !important;
}

.job-form .form-hint {
    color: var(--color-muted-foreground);
}

/* --------------------------------------------------------------------------
   8. TYPOGRAPHY & CONTRAST  — Typography / Medium
   Long paragraphs ran at a tight line-height and muted grey-on-grey. These
   lift body copy to a 1.6 rhythm and a 4.5:1-passing foreground.
   -------------------------------------------------------------------------- */
.help-section p,
.services01 p,
.services02 p,
.services03 p,
.services04 p,
.TC-text {
    line-height: 1.7;
}

.gray {
    color: var(--color-muted-foreground) !important;
}

/* Cap measure on long-form paragraphs — ~70 characters stays comfortable. */
.SR__content1 p,
.SR__content2 p,
.SR__content3 p,
.SR__content4 p {
    max-width: 68ch;
}

/* Keep short headings from dropping a single orphan word onto its own line. */
h1, h2, h3,
.header-content h3 {
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   9. MEDIA  — Performance / High
   Reserve intrinsic ratio so lazy-loaded images can't shift layout (CLS).
   -------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   9b. WHO WE ARE  — Typography / Layout
   Elements introduced with the About-page copy: the era timeline, the three
   proof points, and the straplines that close a block.
   -------------------------------------------------------------------------- */

/* Sub-heading that sits under a section's h1. .our-story centres its h1, so
   the kicker has to centre with it. */
.our-story .section-kicker,
.Co_logos .section-kicker {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

/* The story column runs the full container width. Justified text over a
   measure that wide opens rivers of whitespace, so cap it and range left. */
.our-story p,
.Co_logos p {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* 1990 -> DOS -> Desktop -> Web -> Mobile -> Cloud -> Today.
   A flex row rather than a fixed set of columns, so it reflows to however
   many fit instead of overflowing on a narrow screen. */
.journey-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 0;
    margin: 36px 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.journey-track li {
    display: inline-flex;
    align-items: center;
    font-family: Oswald, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-foreground);
    white-space: nowrap;
}

/* Separator lives on the pseudo-element so it never wraps onto a line by
   itself, and it is decorative — hidden from assistive tech. */
.journey-track li + li::before {
    content: "\2192";
    margin: 0 14px;
    color: var(--color-accent);
    font-size: 15px;
}

/* First and last markers anchor the range. */
.journey-track li:first-child,
.journey-track li:last-child {
    color: var(--color-accent);
    font-weight: 600;
}

/* Experience that evolves. / Knowledge that lasts. / Solutions that work. */
.proof-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 40px;
    margin: 32px auto;
    padding: 0;
    list-style: none;
}

.proof-points li {
    position: relative;
    padding-top: 16px;
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-foreground);
}

.proof-points li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--color-accent);
}

/* Closing line of a block — "Simple. Practical. Reliable." */
.strapline {
    margin: 28px 0 0;
    font-family: Oswald, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* The measure cap above is scoped to `.our-story p`, which outranks the bare
   `.strapline` class — so the strapline needs to reclaim full width and its
   centring explicitly. */
.our-story .strapline,
.Co_logos .strapline,
.request-demo .strapline {
    max-width: none;
    text-align: center;
}

/* Inside the accent-coloured closing band the accent colour would vanish. */
.strapline-light {
    color: #fff;
}

.request-demo .looking-ahead {
    max-width: 62ch;
    margin: 24px auto 0;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 767px) {

    .journey-track li {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .journey-track li + li::before {
        margin: 0 8px;
    }

    .proof-points {
        gap: 20px;
    }

    .strapline {
        font-size: 21px;
    }
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE GUARDS  — Layout / High
   -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

@media (max-width: 767px) {

    /* Stacked service cards need breathing room between them. */
    .we-help .service-card {
        padding: 24px 20px;
    }

    /* Footer link columns collapse — restore vertical rhythm. */
    .footer .col-md-3 {
        margin-bottom: 32px;
    }
}

/* --------------------------------------------------------------------------
   11. PRODUCTS GRID  — products page card layout
   Numbered product cards, each carrying its own feature list. Uses the tokens
   from section 1 so the grid inherits the brand palette automatically.
   -------------------------------------------------------------------------- */
.PRD-intro {
    padding: 90px 0 10px;
    text-align: center;
}

.PRD-intro h5 {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 10px;
}

.PRD-intro h1 {
    font-family: Oswald, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 auto 22px;
    max-width: 820px;
}

.PRD-intro p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-muted-foreground);
    max-width: 760px;
    margin: 0 auto;
}

.PRD-grid {
    padding: 50px 0 90px;
}

.PRD-grid > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

.PRD-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    padding: 34px 30px 30px;
    transition: border-top-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.PRD-card:hover {
    border-top-color: var(--color-accent);
    box-shadow: 0 14px 34px rgba(30, 30, 30, .10);
    transform: translateY(-4px);
}

.PRD-num {
    font-family: Oswald, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-accent);
    display: block;
    margin-bottom: 10px;
}

.PRD-card h2 {
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 12px;
}

.PRD-card > p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0 0 22px;
}

.PRD-card h3 {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.PRD-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.PRD-features li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--color-foreground);
}

.PRD-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    background: var(--color-accent);
}

@media (max-width: 991px) {
    .PRD-intro {
        padding-top: 60px;
    }

    .PRD-intro h1 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .PRD-intro h1 {
        font-size: 30px;
    }

    .PRD-intro p {
        font-size: 16px;
    }

    .PRD-grid {
        padding-bottom: 60px;
    }

    .PRD-card {
        padding: 28px 22px 24px;
    }
}

/* Cards sit side by side from the tablet breakpoint up — reserve room for the
   longest title and blurb so the FEATURES rule lines up across a row. */
@media (min-width: 768px) {
    .PRD-card h2 {
        min-height: 58px;
    }

    .PRD-card > p {
        min-height: 74px;
    }
}

/* --------------------------------------------------------------------------
   12. TEMPORARILY HIDDEN  — social profiles
   The Facebook / LinkedIn / Instagram accounts are not live yet, so the icons
   are hidden everywhere (slide-out menu and footer) rather than pointing at
   dead "#" links. The whole footer column goes with them, otherwise a
   "Follow Us" heading is left standing on its own.

   TO RESTORE: delete this section and put real URLs on the .social-icons
   anchors. No markup was removed — only the .footer-social hook was added.
   -------------------------------------------------------------------------- */
.social-icons,
.footer .footer-social {
    display: none !important;
}

@media (min-width: 768px) {

    /* Three link columns remain — spread them across the full row so the
       footer does not sit in the left three-quarters with a gap on the right. */
    .footer .row > .col-md-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}