/* ==========================================================================
   SmartBiz × Eirecon — design-system token layer
   Loaded LAST (after style.css + responsive.css) so it wins the cascade.
   Phase P0: tokens + foundational element styling (no page recomposition).
   The values here ARE the contract asserted by the conformance tests
   (tests/Browser/smartbiz-conformance + tests/Feature/SmartbizConformanceTest).
   ========================================================================== */

:root {
    /* ---- Brand palette (from the Eirecon logo: blue primary + orange accent) ---- */
    --sb-primary:        #1B4FA8;
    --sb-primary-dark:   #12347A;
    --sb-primary-light:  #2D6BE4;
    --sb-accent:         #E8921A;   /* eyebrows, icons, hovers, underlines — never a section background */
    --sb-accent-dark:    #C97910;
    --sb-ink:            #0D1B2E;   /* headings, dark bands, footer */
    --sb-ink-soft:       #12244A;
    --sb-body:           #4A5568;   /* paragraph copy */
    --sb-muted:          #718096;   /* meta lines */
    --sb-surface:        #FFFFFF;   /* default section background */
    --sb-surface-alt:    #F7F9FC;   /* alternating tinted bands */
    --sb-border:         #E7EAEF;   /* card / field / divider borders */
    --sb-star:           #FFB800;

    /* Re-point the site's existing brand tokens at the SmartBiz values so the
       whole template inherits them without touching every rule. */
    --color-primary:       var(--sb-primary);
    --color-primary-dark:  var(--sb-primary-dark);
    --color-primary-light: var(--sb-primary-light);
    --color-accent:        var(--sb-accent);
    --color-heading:       var(--sb-ink);
    --color-paragraph:     var(--sb-body);
    --color-muted:         var(--sb-muted);

    /* ---- Typography: Rubik (display) + Roboto (body) ----
       The template references var(--font-heading)/var(--font-body) everywhere,
       so redefining them here flips all type site-wide. */
    --font-display: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: var(--font-display);
    --font-default: var(--font-body);

    /* ---- Radius (the signature): sharp by default ---- */
    --radius-none: 0px;     /* cards, images, sections — DEFAULT */
    --radius-sm:   4px;     /* inputs, selects, chips */
    --radius-md:   5px;     /* buttons */
    --radius-full: 9999px;  /* avatars, circular icon buttons only */

    /* ---- Spacing / rhythm (base 4px) ---- */
    --sb-section-y:        120px;
    --sb-section-y-md:     90px;
    --sb-section-y-sm:     60px;
    --sb-gutter:           30px;
    --sb-card-pad:         30px;
    --sb-eyebrow-gap:      12px;
    --sb-h2-body-gap:      20px;

    /* ---- Elevation: three levels only ---- */
    --shadow-card:  0 10px 60px rgba(13, 27, 46, 0.07);
    --shadow-hover: 0 20px 60px rgba(13, 27, 46, 0.12);
    --shadow-float: 0 30px 80px rgba(13, 27, 46, 0.16);

    /* ---- Motion ---- */
    --sb-ease:  cubic-bezier(0.22, 1, 0.36, 1);
    --sb-dur:   .4s;
}

/* ==========================================================================
   Typography
   ========================================================================== */
body {
    font-family: var(--font-body);
    color: var(--sb-body);
    font-size: 16px;
    line-height: 1.75;               /* SmartBiz body leading — do not compress */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--sb-ink);
    line-height: 1.15;
}
h1, .h1 { font-size: clamp(40px, 5.2vw, 72px); font-weight: 700; line-height: 1.1; }
h2, .h2 { font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; line-height: 1.15; }

/* Section eyebrow — accent, uppercase-ish, sits above every H2 */
.sb-eyebrow,
.site-heading .sub-title,
.heading-left .sub-title {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-accent);
    margin-bottom: var(--sb-eyebrow-gap);
}

/* ==========================================================================
   Sharp edges — the single most distinctive property.
   Cards and images are 0px; only buttons / inputs / circles round.
   ========================================================================== */
.card,
.single-item,
.item .thumb,
.item img,
.services-area .item,
.blog-area .item,
.home-service-card,
.value-card,
img.img-fluid,
.thumb img,
figure img {
    border-radius: var(--radius-none);
}

/* Preserve intentional circles */
.rounded-circle,
[class*="circle"],
.social a,
.play-btn,
.avatar {
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Buttons — fill-sweep hover, 5px radius, 700 label
   ========================================================================== */
.btn,
.btn-theme,
.btn-md,
.btn-sm,
button.btn {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color var(--sb-dur) var(--sb-ease),
                color var(--sb-dur) var(--sb-ease),
                border-color var(--sb-dur) var(--sb-ease);
}
/* Sharp 5px on every button except deliberately circular ones (hero play, etc.).
   Uses !important to beat the template's pill-radius rules. */
.btn:not(.circle):not([class*="circle"]) {
    border-radius: var(--radius-md) !important;
}
.btn-theme,
.btn.btn-theme {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
    color: #fff;
}
.btn-theme:hover,
.btn.btn-theme:hover {
    background: var(--sb-primary-dark);
    border-color: var(--sb-primary-dark);
    color: #fff;
}

/* Inputs */
input.form-control,
select.form-control,
textarea.form-control,
.form-control {
    border-radius: var(--radius-sm);
    border-color: var(--sb-border);
}

/* ==========================================================================
   Section rhythm — 120 / 90 / 60. Must beat style.css "40px !important".
   ========================================================================== */
.default-padding,
.default-padding-top,
.default-padding-bottom {
    padding-top: var(--sb-section-y) !important;
    padding-bottom: var(--sb-section-y) !important;
}
.default-padding-top    { padding-bottom: 0 !important; }
.default-padding-bottom { padding-top: 0 !important; }

@media (max-width: 1199px) {
    .default-padding,
    .default-padding-top { padding-top: var(--sb-section-y-md) !important; }
    .default-padding,
    .default-padding-bottom { padding-bottom: var(--sb-section-y-md) !important; }
}
@media (max-width: 767px) {
    .default-padding,
    .default-padding-top { padding-top: var(--sb-section-y-sm) !important; }
    .default-padding,
    .default-padding-bottom { padding-bottom: var(--sb-section-y-sm) !important; }
}

/* ==========================================================================
   Section bands: white → tinted → dark
   ========================================================================== */
.bg-gray, .bg-gray-responsive { background-color: var(--sb-surface-alt) !important; }
.bg-light                      { background-color: var(--sb-surface) !important; }
.bg-dark, .bg-dark-hard        { background-color: var(--sb-ink) !important; }

/* Accent is an accent — never a full section background */
.accent-color { color: var(--sb-accent); }

/* ==========================================================================
   Motion — reduced-motion is honoured for every animation.
   ========================================================================== */
.sb-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--sb-ease), transform .7s var(--sb-ease);
    will-change: opacity, transform;
}
.sb-reveal.is-visible { opacity: 1; transform: none; }

.sb-kenburns { animation: sb-kenburns 14s ease-out both; }
@keyframes sb-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .sb-reveal { opacity: 1; transform: none; }
    .sb-kenburns { animation: none; }
}

/* ==========================================================================
   Homepage P1 recomposition
   ========================================================================== */
.sb-section-head { margin-bottom: 60px; text-align: center; }
.sb-section-head .sb-eyebrow { display: inline-block; }
.sb-section-intro {
    max-width: 760px;
    margin: 16px auto 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--sb-body);
}
/* Eyebrow + intro on the dark services band */
.home-services .sb-eyebrow { color: var(--sb-accent); }
.home-services .sb-section-intro { color: rgba(255, 255, 255, 0.74); }

/* Hero */
.sb-eyebrow--hero {
    color: var(--sb-accent);
    font-size: 15px;
    letter-spacing: 0.14em;
    margin-bottom: 16px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.sb-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* Vision 2030 CTA band on ink */
.sb-cta-band {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}
.sb-cta-band .sb-eyebrow { color: var(--sb-accent); }

/* ==========================================================================
   Motion + interaction pass (custom cursor, Ken Burns hero, nav contrast)
   ========================================================================== */

/* Custom cursor (desktop, fine pointer, reduced-motion off). */
.sb-has-cursor,
.sb-has-cursor a,
.sb-has-cursor button,
.sb-has-cursor .btn,
.sb-has-cursor [role="button"],
.sb-has-cursor .home-service-card { cursor: none !important; }

.sb-cursor-dot,
.sb-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    transition: opacity .3s ease;
}
.sb-cursor-dot {
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--sb-accent);
}
.sb-cursor-ring {
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 1.5px solid rgba(232, 146, 26, 0.55);
    transition: width .25s var(--sb-ease), height .25s var(--sb-ease),
                margin .25s var(--sb-ease), background-color .25s ease, border-color .25s ease, opacity .3s ease;
}
body.sb-cursor-hover .sb-cursor-ring {
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    background: rgba(232, 146, 26, 0.12);
    border-color: var(--sb-accent);
}

/* Ken Burns slow zoom on the active hero slide background. */
.carousel .carousel-item.active .slider-thumb {
    animation: sb-kenburns 8s ease-out both;
}

/* Nav readability over bright/blue hero images (transparent state only). */
nav.navbar:not(.sticked) .logo img,
nav.navbar:not(.sticked) .navbar-brand img {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}
nav.navbar:not(.sticked) ul.nav > li > a {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
/* Soft top scrim behind the transparent header so the logo and nav always read. */
header { position: relative; }
header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 170px;
    background: linear-gradient(180deg, rgba(4, 10, 22, 0.52), rgba(4, 10, 22, 0));
    pointer-events: none;
    z-index: 0;
}
header nav.navbar { position: relative; z-index: 2; }
/* When the nav sticks (solid bg), drop the scrim, shadows and text-shadow. */
header:has(nav.sticked)::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .carousel .carousel-item.active .slider-thumb { animation: none; }
    .sb-cursor-dot, .sb-cursor-ring { display: none; }
}

/* ==========================================================================
   Services CMS (P2): listing tiles + detail panels
   ========================================================================== */
.sb-service-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow var(--sb-dur) var(--sb-ease), transform var(--sb-dur) var(--sb-ease);
}
.sb-service-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.sb-service-tile__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.sb-service-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sb-ease); }
.sb-service-tile:hover .sb-service-tile__media img { transform: scale(1.06); }
.sb-service-tile__body { display: block; padding: var(--sb-card-pad); }
.sb-service-tile__title {
    display: block; margin: 6px 0 10px;
    font-family: var(--font-display); font-size: 20px; font-weight: 600;
    color: var(--sb-ink); transition: color var(--sb-dur) var(--sb-ease);
}
.sb-service-tile:hover .sb-service-tile__title { color: var(--sb-primary); }
.sb-service-tile__summary { display: block; margin-bottom: 16px; color: var(--sb-body); line-height: 1.7; }
.sb-service-tile__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-size: 14px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--sb-primary);
}
.sb-service-tile:hover .sb-service-tile__link { color: var(--sb-accent); }
.sb-service-tile__link i { transition: transform var(--sb-dur) var(--sb-ease); }
.sb-service-tile:hover .sb-service-tile__link i { transform: translateX(4px); }

/* Homepage service cards: hover-reveal summary (clever service surfacing).
   Title, summary and "Explore service" cue live in one bottom-anchored flex
   stack, so the summary expands upward on hover without ever overlapping the
   title, whatever the title's length. (!important defeats the layout's later
   inline <style> block, which absolutely-positions .home-service-name.) */
.home-service-content {
    position: absolute !important;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 clamp(16px, 1.5vw, 24px) clamp(18px, 1.8vw, 26px);
    pointer-events: none;
}
.home-service-card .home-service-content .home-service-name {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
}
.home-service-summary,
.home-service-more {
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: opacity .38s var(--sb-ease), transform .38s var(--sb-ease), max-height .38s var(--sb-ease);
}
.home-service-summary {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 400;
    color: rgba(233, 240, 250, 0.94);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.home-service-more {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.home-service-more::after { content: ' \2192'; }

.home-service-card:hover .home-service-summary,
.home-service-card:focus-visible .home-service-summary {
    opacity: 1;
    max-height: 8.5em;
    transform: translateY(0);
}
.home-service-card:hover .home-service-more,
.home-service-card:focus-visible .home-service-more {
    opacity: 1;
    max-height: 2.5em;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .home-service-summary,
    .home-service-more { transition: none; }
}

/* Touch devices have no hover, so the reveal would be unreachable: show the
   summary and cue by default there. Taller rows give the text room, and the
   bottom scrim is deepened so the always-on copy stays readable over the
   image. (!important defeats the layout's later inline mobile rules.) */
@media (hover: none) {
    .home-services-grid { grid-auto-rows: 300px !important; }
    .home-service-summary {
        opacity: 1;
        max-height: 5em;
        transform: none;
        -webkit-line-clamp: 3;
    }
    .home-service-more {
        opacity: 1;
        max-height: 2.5em;
        transform: none;
    }
    .home-service-card::before {
        background:
            linear-gradient(180deg, rgba(3, 10, 22, 0.05) 10%, rgba(3, 10, 22, 0.92) 80%),
            linear-gradient(110deg, rgba(8, 31, 67, 0.16), rgba(16, 70, 151, 0.34)) !important;
    }
}

/* Detail page */
.sb-service-intro { padding-top: 80px; }
.sb-service-lead { font-size: 20px; line-height: 1.7; font-weight: 500; color: var(--sb-ink); }
.service-panel h2 { margin-bottom: 20px; }
.sb-panel-media img { width: 100%; height: auto; }
.sb-panel-body { color: var(--sb-body); line-height: 1.75; }
.sb-panel-body ul { padding-left: 1.1em; margin: 12px 0; }
.sb-panel-body li { margin-bottom: 8px; }

/* ==========================================================================
   Homepage Leadership / Chairman's Message image (about-area)
   Force a clean, sharp, cover-cropped photo panel regardless of the source
   image's native ratio, matching the SmartBiz sharp-edge system.
   ========================================================================== */
.about-area .thumb {
    overflow: hidden;
    line-height: 0;
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-card);
}
.about-area .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-none);
}
@media (max-width: 991px) {
    .about-area .thumb img { min-height: 300px; max-height: 380px; margin-bottom: 28px; }
}

/* ==========================================================================
   Unified premium page hero (About / Services / Sectors / Contact / FAQ).
   Full-bleed generated photo + left-weighted dark scrim for legibility,
   eyebrow-with-rule + large left-aligned Rubik title + left breadcrumb.
   Matches the Projects/Insights polish while keeping the photo the star.
   ========================================================================== */
.sb-page-hero {
    position: relative;
    min-height: 460px !important;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    text-align: left !important;
    padding: 0 !important;
}
.sb-page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(6,14,28,0.93) 0%, rgba(6,14,28,0.74) 40%, rgba(6,14,28,0.30) 72%, rgba(6,14,28,0.42) 100%),
        linear-gradient(180deg, rgba(6,14,28,0.30), rgba(6,14,28,0.60));
}
.sb-page-hero .container { position: relative; z-index: 2; }
.sb-page-hero__inner { max-width: 760px; padding: 56px 0; text-align: left; }
.sb-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    color: var(--sb-accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.sb-page-hero__eyebrow::before {
    content: '';
    width: 42px;
    height: 2px;
    background: var(--sb-accent);
}
.sb-page-hero__title {
    font-family: var(--font-display);
    color: #ffffff;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.sb-page-hero__lead {
    color: rgba(233,240,250,0.9);
    font-size: 18px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 0 22px;
}
.sb-page-hero__crumbs {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}
.sb-page-hero__crumbs li,
.sb-page-hero__crumbs li a { color: rgba(255,255,255,0.82); }
.sb-page-hero__crumbs li.active { color: var(--sb-accent); }
@media (max-width: 767px) {
    .sb-page-hero { min-height: 340px !important; }
    .sb-page-hero__inner { padding: 36px 0; }
}

/* ==========================================================================
   About page body — SmartBiz treatment (eyebrow + H2 + lead, sharp image)
   ========================================================================== */
.about-area .info-content .sb-about-title { margin-bottom: 20px; }
.about-area .info-content .sb-about-lead {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--sb-ink);
    margin-bottom: 20px;
}
.about-area .info-content p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--sb-body);
    margin-bottom: 16px;
}
.about-area .info-content p:last-child { margin-bottom: 0; }
.about-area .sb-about-thumb {
    overflow: hidden;
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-card);
}
.about-area .sb-about-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 460px;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-none) !important;
}

/* ==========================================================================
   Contact + FAQ body polish (P4 rollout)
   ========================================================================== */
/* Contact: faint facility backdrop behind the form (was an off-brand cartoon) */
.contact-area .sb-contact-bg { opacity: 0.10; }
.contact-area .sb-contact-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-none); }
/* Contact: SmartBiz section head (was inline blue) */
.sb-contact-head { text-align: left; }
.global-presence-title { color: var(--sb-ink) !important; font-family: var(--font-display) !important; }

/* Reusable sharp "side photo" panel (FAQ etc.) — replaces cartoon illustrations */
.sb-side-photo {
    overflow: hidden;
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-card);
    height: 100%;
    min-height: 380px;
}
.sb-side-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-none);
}