/* ============================================================================
   SMEC NexView — PREMIUM ENTERPRISE SAAS THEME  ·  v3
   ----------------------------------------------------------------------------
   Presentation only. Sections, order, headings, copy, statistics, anchors,
   forms, CTAs and behaviour are exactly as authored — this file restyles what
   already exists and adds nothing to the document.

   v3 is a layout release, not a colour release. The work is in:
     · a wide 1560px enterprise grid replacing the 1180px editorial column
     · a 45/55 asymmetric hero with the product visual breaking the grid
     · a larger, wider type scale that no longer wraps into narrow ribbons
     · a blue-indigo accent replacing the bright sky blue
     · component proportions — card padding, button geometry, section rhythm

   Loads after styles.css, custom.css and the page-local <style> block. Rules
   are scoped under `.tail-container` (the <body> class) to win on specificity
   rather than reaching for !important wherever possible.

     01  Tokens          06  Navigation        11  Forms + dialogs
     02  Environment     07  Hero              12  Motion
     03  Typography      08  Section system    13  Responsive / a11y / print
     04  Utility remap   09  Surfaces
     05  Buttons         10  Components
   ========================================================================== */


/* ── 01 · TOKENS ─────────────────────────────────────────────────────────── */

/* PALETTE SOURCE — the client's handover package
   ("SMEC NEXVIEW — FINAL TECHNICAL SEO & HANDOVER PACKAGE", dark-theme notes)
   specifies:
       --bg-primary   #0B0F14      --text-primary  #F5F7FA
       --bg-secondary #131A22      --text-muted    #9AA5B1
       --accent       #0B6E4F
   Those five are used verbatim below. The intermediate surface steps and the
   lighter accent tint are derived from them, because the spec only defines two
   background planes and one accent — and it also requires every text/CTA pair
   to clear WCAG AA, which #0B6E4F alone cannot do as a text colour on
   #0B0F14 (3.04:1). See the accent block for the derivation. */

:root {
    /* Environment — client's #0B0F14 base and #131A22 surface, with two
       intermediate planes derived so elevation reads from tone alone. */
    --bg:          #0B0F14;   /* client --bg-primary                        */
    --bg-2:        #0D1219;
    --surf-1:      #10161E;
    --surf-2:      #131A22;   /* client --bg-secondary                      */
    --surf-3:      #19212B;
    --surf-4:      #212B37;

    /* Hairlines — found rather than noticed */
    --line:        rgba(255, 255, 255, 0.05);
    --line-2:      rgba(255, 255, 255, 0.085);
    --line-3:      rgba(255, 255, 255, 0.135);

    /* The 1px of light along a surface's top edge that makes it read as a
       physical control instead of a coloured rectangle. */
    --highlight:   inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --highlight-2: inset 0 1px 0 rgba(255, 255, 255, 0.095);

    /* Accent — the client's #0B6E4F.
       It works as a CTA fill (white on it = 6.3:1) but NOT as accent text:
       #0B6E4F on #0B0F14 is 3.04:1, which fails the 4.5:1 the spec itself
       requires for body text. So the exact value is kept for fills, and a
       lighter tint of the same hue carries text, borders and dots at 6.4:1. */
    --a:           #2ea87c;   /* accent text/borders — 6.4:1 on --bg         */
    --a-bright:    #4cc396;   /* highlight / gradient top                    */
    --a-deep:      #0B6E4F;   /* client --accent, verbatim                   */
    --a-ink:       #ffffff;   /* label on an accent fill — 6.3:1             */
    --a-soft:      rgba(46, 168, 124, 0.10);
    --a-line:      rgba(46, 168, 124, 0.26);
    --a-amb:       rgba(11, 110, 79, 0.42);

    /* Buttons — flat fills, no gradient. Hover is a single step lighter, so
       the state change is felt as colour rather than as depth. */
    --btn-bg:         #0B6E4F;   /* client --accent, verbatim                */
    --btn-bg-hover:   #0E8560;
    --btn-bg-active:  #095B41;
    --btn-line:       rgba(255, 255, 255, 0.14);
    --btn-line-hover: rgba(255, 255, 255, 0.30);

    /* Status — semantic only.
       With a green brand accent, "success" would otherwise be indistinguishable
       from brand chrome. Success is therefore pushed to a brighter mint that
       reads as a state against the deeper brand green. */
    --ok:          #45e3a6;
    --warn:        #e0a935;
    --err:         #ea5a63;

    /* Text — client's --text-primary and --text-muted verbatim, plus two
       quieter steps derived for captions and metadata. */
    --t-1:         #F5F7FA;   /* client --text-primary                      */
    --t-2:         #9AA5B1;   /* client --text-muted                        */
    --t-3:         #78838F;
    --t-4:         #58626D;

    /* Space ramp — every margin and padding below comes from here */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
    --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

    /* Radius */
    --r-xs: 6px;  --r-sm: 8px;  --r: 11px;  --r-md: 14px;  --r-lg: 18px;  --r-xl: 24px;

    /* Depth */
    --sh-1: 0 1px 2px rgba(0,0,0,.5);
    --sh-2: 0 4px 14px -4px rgba(0,0,0,.55);
    --sh-3: 0 18px 48px -18px rgba(0,0,0,.75);
    --sh-4: 0 44px 100px -32px rgba(0,0,0,.88);

    /* Layout — the headline change in v3. 1560px with wide gutters uses a
       1440px+ display properly instead of stranding 300px of dead space each
       side of a 1180px column. */
    --maxw:      1560px;
    --maxw-nav:  1600px;
    --gutter:    clamp(20px, 3.4vw, 56px);
    --section-y: clamp(72px, 7.5vw, 136px);

    /* Motion */
    --ease:     cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur:      220ms;
    --dur-2:    400ms;

    /* Fine film grain, layered into section backgrounds. A fixed full-page
       overlay would have to sit above the content and would break stacking
       for the modals and the sticky bars. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}


/* ── 02 · ENVIRONMENT ────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; background: var(--bg); }

body.tail-container {
    background: var(--bg);
    color: var(--t-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
}

/* NOTE: deliberately no fixed full-page overlay and no `body > *` z-index
   rule. Both were tried: every section paints an opaque background so the
   overlay was invisible, and lifting body's children breaks the modals, the
   floating contact stack and the mobile sticky CTA bar — all direct children
   of <body> relying on their own position/z-index. */

::selection { background: rgba(46,168,124,.3); color: #fff; }

.tail-container a:focus-visible,
.tail-container button:focus-visible,
.tail-container summary:focus-visible,
.tail-container input:focus-visible,
.tail-container select:focus-visible {
    outline: 2px solid var(--a);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}


/* ── 03 · TYPOGRAPHY ─────────────────────────────────────────────────────── */
/* Inter throughout. The page preloads Inter at 400/500/600 only, so 600 is the
   heaviest real weight — 700/800 would synthesise a faux bold and smear at
   display sizes. Hierarchy comes from scale, tracking and colour, not weight. */

.tail-container,
.tail-container * { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

.tail-container .heading-font,
.tail-container h1, .tail-container h2, .tail-container h3 {
    color: var(--t-1);
    font-weight: 600 !important;
}

.tail-container h1 {
    font-size: clamp(2.75rem, 4.4vw, 4.75rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.043em;
    text-wrap: balance;
}

.tail-container h2 {
    font-size: clamp(2rem, 3.1vw, 3.1rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.038em;
    text-wrap: balance;
}

.tail-container h3 {
    font-size: 1.0625rem;
    line-height: 1.45;
    letter-spacing: -0.018em;
}

.tail-container p { text-wrap: pretty; }

.tail-container section p.text-base,
.tail-container section p.text-lg,
.tail-container .max-w-3xl > p {
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: var(--t-3);
    letter-spacing: -0.006em;
    max-width: 56ch;
}

/* Eyebrow — compact accent label */
.tail-container .a11y-chip-blue,
.tail-container .a11y-chip-green,
.tail-container section .inline-flex.rounded-full.uppercase {
    display: inline-flex !important;
    align-items: center;
    gap: var(--sp-2);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--a) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin-bottom: var(--sp-5) !important;
    box-shadow: none !important;
    line-height: 1;
}
.tail-container .a11y-chip-blue::before,
.tail-container .a11y-chip-green::before,
.tail-container section .inline-flex.rounded-full.uppercase::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--a);
    flex: none;
    box-shadow: 0 0 0 3px var(--a-soft);
}


/* ── 04 · UTILITY REMAPPING ──────────────────────────────────────────────── */

.tail-container .bg-white        { background-color: var(--bg); }
.tail-container .bg-slate-50     { background-color: var(--surf-1); }
.tail-container .bg-slate-100    { background-color: var(--surf-2); }
.tail-container .bg-gray-900     { background-color: #040609; }
.tail-container .bg-\[\#14202e\] { background-color: var(--surf-1); }
.tail-container .bg-white\/5     { background-color: rgba(255,255,255,.028); }
.tail-container .bg-white\/70    { background-color: rgba(15,20,27,.75); }
.tail-container .bg-slate-50\/50 { background-color: rgba(11,15,20,.6); }

.tail-container .text-slate-900  { color: var(--t-1); }
.tail-container .text-slate-700  { color: var(--t-2); }
.tail-container .text-slate-600  { color: var(--t-3); }
.tail-container .text-slate-500  { color: var(--t-4); }
.tail-container .text-slate-300,
.tail-container .text-slate-200  { color: var(--t-2); }
.tail-container .text-blue-100   { color: rgba(255,255,255,.68); }

.tail-container .text-\[\#15628a\],
.tail-container .text-\[\#0f4d6e\] { color: var(--a); }
.tail-container .text-\[\#b45309\],
.tail-container .text-\[\#f59e0b\] { color: var(--warn); }
.tail-container .text-\[\#16a34a\],
.tail-container .text-\[\#15803d\],
.tail-container .text-\[\#4dd88a\] { color: var(--ok); }
.tail-container .text-\[\#b91c1c\],
.tail-container .text-red-400      { color: var(--err); }

.tail-container .border-slate-100,
.tail-container .border-slate-200,
.tail-container .border-slate-200\/70,
.tail-container .border-slate-300,
.tail-container .border-white\/10,
.tail-container .border-gray-800   { border-color: var(--line); }
.tail-container .border-\[\#15628a\]\/20 { border-color: var(--a-line); }
.tail-container .border-\[\#16a34a\]\/20,
.tail-container .border-\[\#16a34a\]\/30 { border-color: rgba(53,201,143,.24); }
.tail-container .border-\[\#dc2626\]\/20 { border-color: rgba(234,90,99,.24); }
.tail-container .border-\[\#f59e0b\]\/20 { border-color: rgba(224,169,53,.24); }

.tail-container .bg-\[\#15628a\]\/10,
.tail-container .bg-\[\#15628a\]\/15 { background-color: var(--a-soft); }
.tail-container .bg-\[\#16a34a\]\/10,
.tail-container .bg-\[\#16a34a\]\/15,
.tail-container .bg-\[\#16a34a\]\/20 { background-color: rgba(53,201,143,.10); }
.tail-container .bg-\[\#dc2626\]\/5,
.tail-container .bg-\[\#dc2626\]\/10  { background-color: rgba(234,90,99,.10); }
.tail-container .bg-\[\#f59e0b\]\/10  { background-color: rgba(224,169,53,.10); }

.tail-container .hover\:border-\[\#15628a\]:hover     { border-color: var(--a); }
.tail-container .hover\:border-\[\#16a34a\]\/30:hover { border-color: rgba(53,201,143,.33); }
.tail-container .hover\:text-slate-900:hover          { color: var(--t-1); }
.tail-container .hover\:bg-slate-50:hover,
.tail-container .hover\:bg-slate-100:hover            { background-color: rgba(255,255,255,.045); }
.tail-container .hover\:text-\[\#f59e0b\]:hover       { color: var(--a); }

.tail-container .shadow-md,
.tail-container .shadow-lg,
.tail-container .shadow-xl,
.tail-container .shadow-slate-200\/60 { box-shadow: var(--sh-2); }
.tail-container .hover\:shadow-lg:hover,
.tail-container .hover\:shadow-xl:hover { box-shadow: var(--sh-3); }


/* ── 05 · BUTTON SYSTEM ──────────────────────────────────────────────────── */
/* Four levels, applied by mapping the markup's existing classes. No classes
   are added to the document.

     1 Primary   accent fill      hero demo CTA, navbar site assessment,
                                  modernize CTA, popup submit, sticky enquiry
     2 Secondary raised dark      hero "Assess My Existing CCTV",
                                  navbar + drawer "Book a Call back"
     3 Tertiary  text + arrow     case-study link
     4 Utility   bare icon        navbar phone                              */

/* --- 1 · Primary ---------------------------------------------------------
   Flat. No gradient, no inset highlight, no ambient shadow, no lift on hover.
   An earlier revision built these as physical controls — tonal gradient, white
   hairline along the top edge, accent-tinted glow, 1.5px rise — which gave
   them a thickness that reads as a web button rather than an application
   control. The crisp-and-flat treatment is the whole point: one solid fill,
   one border, and a fast colour change on hover. */
.tail-container a.bg-gradient-to-r:not(.nv-link):not(.mob-link),
.tail-container .btn-apply-now,
.tail-container .sticky-cta-apply {
    position: relative;
    background-image: none !important;
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--btn-bg) !important;
    border-radius: var(--r-xs) !important;
    color: var(--a-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.008em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition:
        background-color 150ms var(--ease),
        border-color 150ms var(--ease),
        color 150ms var(--ease);
}
.tail-container a.bg-gradient-to-r:not(.nv-link):not(.mob-link):hover,
.tail-container .btn-apply-now:hover,
.tail-container .sticky-cta-apply:hover {
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    box-shadow: none !important;
}
.tail-container a.bg-gradient-to-r:not(.nv-link):not(.mob-link):active,
.tail-container .btn-apply-now:active { background-color: var(--btn-bg-active) !important; }

/* --- 2 · Secondary -------------------------------------------------------
   Transparent over the page, one hairline border. Hover brightens the border
   and the label — nothing moves. */
.hero-bg a.border-slate-300,
.tail-container .nv-link.bg-gradient-to-r,
.tail-container .mob-link.bg-gradient-to-r,
.tail-container .btn-not-now {
    background-image: none !important;
    background-color: transparent !important;
    border: 1px solid var(--btn-line) !important;
    border-radius: var(--r-xs) !important;
    color: var(--t-2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.008em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition:
        background-color 150ms var(--ease),
        border-color 150ms var(--ease),
        color 150ms var(--ease);
}
.hero-bg a.border-slate-300:hover,
.tail-container .nv-link.bg-gradient-to-r:hover,
.tail-container .mob-link.bg-gradient-to-r:hover,
.tail-container .btn-not-now:hover {
    background-color: rgba(255,255,255,.04) !important;
    border-color: var(--btn-line-hover) !important;
    color: var(--t-1) !important;
}

/* Geometry: hero 44px, navbar 38px */
.hero-bg a.bg-gradient-to-r,
.hero-bg a.border-slate-300 {
    min-height: 44px;
    padding: 0 18px !important;
    display: inline-flex; align-items: center; gap: 8px;
}
/* Scoped to md+ : the site-assessment CTA carries `hidden md:flex`, and an
   unconditional display here overrides the `hidden`, pushing the button onto
   phone viewports where it runs off the right edge. */
@media (min-width: 768px) {
    #main-navbar a.bg-gradient-to-r,
    #main-navbar a[onclick*="openPopup"] {
        min-height: 38px;
        padding: 0 14px !important;
        display: inline-flex; align-items: center; gap: 7px;
        font-size: 13.5px !important;
    }
}

/* Icon micro-interaction — the arrow alone moves, 3px */
.tail-container a svg { transition: transform var(--dur) var(--ease); }
.tail-container a.bg-gradient-to-r:hover > svg,
.tail-container a[onclick*="openPopup"]:hover > svg,
.tail-container .sticky-cta-apply:hover > svg { transform: translateX(3px); }

/* --- 3 · Tertiary -------------------------------------------------------- */
.tail-container main > div .bg-slate-50.rounded-2xl a {
    color: var(--t-2) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -.006em !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: color var(--dur) var(--ease);
}
.tail-container main > div .bg-slate-50.rounded-2xl a:hover { color: var(--a) !important; }

/* --- 4 · Utility --------------------------------------------------------- */
#main-navbar a[href^="tel:"] span:first-child {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#main-navbar a[href^="tel:"]:hover span:first-child {
    background: rgba(255,255,255,.045) !important;
    border-color: var(--line-2) !important;
}
#main-navbar a[href^="tel:"] svg { color: var(--t-3) !important; }
#main-navbar a[href^="tel:"]:hover svg { color: var(--a) !important; }
/* The phone string is a utility affordance, not a headline — at default size
   it was competing with the primary CTA beside it. */
#main-navbar a[href^="tel:"] span.hidden.xl\:block {
    color: var(--t-4) !important;
    font-size: 12.5px !important;
    font-weight: 450 !important;
    letter-spacing: -.006em;
    transition: color var(--dur) var(--ease);
}
#main-navbar a[href^="tel:"]:hover span.hidden.xl\:block { color: var(--t-2) !important; }


/* ── 06 · NAVIGATION ─────────────────────────────────────────────────────── */

#main-navbar {
    background: rgba(6, 8, 11, 0.6) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
#main-navbar.nv-scrolled {
    background: rgba(6, 8, 11, 0.88) !important;
    border-bottom-color: var(--line);
}
#main-navbar .h-16 { height: 72px; }
#main-navbar .max-w-7xl { max-width: var(--maxw-nav) !important; }

.tail-container .nv-link:not(.bg-gradient-to-r) {
    color: var(--t-3);
    font-size: 13.5px !important;
    font-weight: 450;
    letter-spacing: -.008em;
    border-radius: var(--r-sm);
    transition: color var(--dur) var(--ease);
}
.tail-container .nv-link:not(.bg-gradient-to-r):hover { color: var(--t-1); }
.tail-container .nv-link::after { display: none; }

/* The NexView mark is a full-colour logo — the gradient eye and blue wordmark
   carry the brand. The previous rule forced brightness(0) invert(1) to turn the
   flat SMEC wordmark white on dark; applying that here would collapse the whole
   thing into a white silhouette. The footer copy also carries `brightness-0
   invert` as Tailwind utilities in the markup, so those are neutralised too. */
#site-header img[alt="SMEC NexView"],
.tail-container footer img[alt="SMEC NexView"] {
    filter: none !important;
    opacity: 1;
}
#main-navbar a:has(img) { padding-right: var(--sp-6); }

/* --- Navbar fit ----------------------------------------------------------
   Pre-existing defect, measured on the original light page: the bar packs 8
   links + 2 CTAs + a 278px phone string, so the site-assessment CTA was
   clipped at every common laptop width — 167px past the viewport at 1280,
   124px at 1366, 87px at 1440 — and only fitted above ~1600px. It never
   surfaced because custom.css sets overflow-x:hidden, so it clipped rather
   than scrolled. Resolved in three bands; the phone number stays one tap away
   via the adjacent call icon (same tel: link), drawer, footer and sticky bar. */
@media (max-width: 1279.98px) {
    #main-navbar .hidden.lg\:flex { display: none !important; }
    #menuToggle { display: flex !important; }
}
@media (min-width: 1280px) and (max-width: 1535.98px) {
    #main-navbar a[href^="tel:"] span.hidden.xl\:block { display: none !important; }
}
@media (min-width: 1280px) {
    #main-navbar .nv-link:not(.bg-gradient-to-r) { padding-left: 10px !important; padding-right: 10px !important; }
}
/* 1280–1439 is the tightest band — 8 links plus both CTAs leave only a few px
   of clearance at the default padding. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    #main-navbar .nv-link:not(.bg-gradient-to-r) { padding-left: 6px !important; padding-right: 6px !important; font-size: 13px !important; }
    #main-navbar a:has(img) { padding-right: var(--sp-4); }
}

/* Drawer */
.drawer-panel { background: var(--surf-1) !important; border-left: 1px solid var(--line); }
.drawer-panel .border-slate-100 { border-color: var(--line) !important; }
.tail-container .mob-link:not(.bg-gradient-to-r) { color: var(--t-2) !important; border-radius: var(--r-sm); }
.tail-container .mob-link:not(.bg-gradient-to-r):hover { background: rgba(255,255,255,.045) !important; color: var(--t-1) !important; }
.drawer-overlay { background: rgba(4,6,9,.74) !important; backdrop-filter: blur(6px); }

/* The drawer's "Already Have CCTV?" banner is a <div>, so it sits outside the
   button system in §05 and was the one element still painting the original
   Tailwind brand-blue gradient against the green palette. */
.drawer-panel > div > .bg-gradient-to-r {
    background-image: linear-gradient(158deg, rgba(46,168,124,.16), rgba(46,168,124,.04)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--a-line);
    border-radius: var(--r-md) !important;
}

/* Footer */
.tail-container footer { background: #040609; border-top: 1px solid var(--line); color: var(--t-4); }
.tail-container footer > div { max-width: var(--maxw) !important; }
.tail-container footer h3 { color: var(--t-1); font-size: 13px; font-weight: 600; letter-spacing: -.008em; text-transform: none; }
.tail-container footer a { color: var(--t-3); transition: color var(--dur) var(--ease); }
.tail-container footer a:hover { color: var(--t-1); }
.tail-container footer .text-\[\#f59e0b\] { color: var(--a); }
.social-ic {
    background: rgba(255,255,255,.035) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-sm) !important;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social-ic:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: var(--line-2);
    color: var(--t-1) !important;
    transform: translateY(-1px);
}


/* ── 07 · HERO ───────────────────────────────────────────────────────────── */

.hero-bg {
    background:
        var(--grain),
        radial-gradient(ellipse 76% 52% at 42% -12%, rgba(46,168,124,.13), transparent 64%),
        radial-gradient(ellipse 46% 44% at 96% 18%, rgba(46,168,124,.055), transparent 68%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 64%) !important;
    background-blend-mode: overlay, normal, normal, normal;
    position: relative;
    overflow: hidden;
    border-bottom: 0 !important;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 80% 68% at 45% 24%, #000 10%, transparent 88%);
            mask-image: radial-gradient(ellipse 80% 68% at 45% 24%, #000 10%, transparent 88%);
}

.hero-bg > div { position: relative; z-index: 2; }

/* Grid items default to min-width:auto (min-content), so one nowrap string can
   force a column wider than the viewport — clipped silently by the
   overflow-x:hidden on html/body rather than scrolling. */
.hero-bg > div.max-w-7xl > *,
.hero-bg > div.max-w-7xl > * > * { min-width: 0; }

.hero-bg > div.max-w-7xl {
    padding-top: clamp(56px, 6vw, 108px) !important;
    padding-bottom: clamp(56px, 6vw, 108px) !important;
    gap: clamp(40px, 4vw, 72px) !important;
    align-items: center;
}

/* Asymmetric split, and the product column runs off the right edge.

   Measured before this change, the visual was only 0.56–0.58x the height of
   the text column at every width, and at 1920 it stopped 188px short of the
   viewport — small and marooned rather than dominant. 16:9 is a wide, short
   ratio: to stand ~0.7x the text column it needs ~1000px of width, which the
   grid alone cannot give without starving the headline.

   So it bleeds. The dashboard rail — the part carrying the information — sits
   on the LEFT of the photograph, so everything clipped on the right is
   refinery scene. Nothing readable is lost, and the cut is decisive enough
   (~130-190px) to read as a surface continuing past the page rather than as a
   mistake. .hero-bg is overflow:hidden, so this clips, never scrolls. */
@media (min-width: 1024px) {
    .hero-bg > div.max-w-7xl { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important; }
}
@media (min-width: 1280px) {
    .hero-bg > div.max-w-7xl > div.relative { margin-right: calc(-1 * clamp(80px, 13vw, 280px)); }
}

/* Announcement row */
.hero-bg .inline-flex.rounded-3xl {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 999px !important;
    box-shadow: var(--highlight) !important;
    padding: 6px 15px 6px 11px !important;
    margin-bottom: var(--sp-6) !important;
    backdrop-filter: blur(8px);
    max-width: 100%;
}
.hero-bg .inline-flex.rounded-3xl span:last-child {
    color: var(--t-3) !important;
    font-size: 12.5px !important;
    font-weight: 450;
    letter-spacing: -.006em;
    text-transform: none;
    line-height: 1.5;
    min-width: 0;
}
@media (min-width: 1280px) { .hero-bg .inline-flex.rounded-3xl span:last-child { white-space: nowrap; } }
.hero-bg .live-dot { background: var(--ok) !important; box-shadow: 0 0 0 3px rgba(53,201,143,.16); }

.hero-bg h1 { margin-bottom: var(--sp-5) !important; max-width: 17ch; }

/* The accent clause becomes its own line rather than trailing inline. It reads
   as a deliberate second statement, and the wide column lets both halves break
   naturally instead of into narrow ribbons. */
.hero-bg h1 .text-\[\#15628a\] {
    display: block;
    margin-top: .16em;
    background: linear-gradient(102deg, #a8e0c8 0%, var(--a-bright) 34%, var(--a) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--a);
}

.hero-bg p.text-base,
.hero-bg p.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.66 !important;
    color: var(--t-3) !important;
    max-width: 48ch !important;
    margin-bottom: var(--sp-7) !important;
}

.hero-bg .flex.flex-wrap.items-center.gap-3 { gap: var(--sp-3) !important; margin-bottom: var(--sp-7) !important; }

/* --- Credibility strip ---------------------------------------------------
   A fixed 4-up grid, not flex-wrap: wrapping put a leading separator on the
   first item of the second row, which read as a stray rule. */
.hero-bg .border-t.border-slate-200 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-color: var(--line) !important;
    padding-top: var(--sp-6) !important;
    gap: 0 !important;
    max-width: 100% !important;
}
.hero-bg .border-t.border-slate-200 > span {
    display: block;
    min-width: 0;
    padding: 0 var(--sp-4);
    border-left: 1px solid var(--line);
    color: var(--t-4) !important;
    font-size: 10.5px !important;
    font-weight: 450;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}
.hero-bg .border-t.border-slate-200 > span:first-child { padding-left: 0; border-left: 0; }
.hero-bg .border-t.border-slate-200 strong {
    display: block;
    color: var(--t-1) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: -.032em;
    margin-bottom: 5px;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* --- Product showcase ----------------------------------------------------
   Four layers: ambient light -> offset backing plate -> glass frame -> image.
   Low contrast throughout; the depth should be felt rather than counted. */
.hero-bg > div.max-w-7xl > div.relative { position: relative; }

.hero-bg > div.max-w-7xl > div.relative::before {
    content: '';
    position: absolute;
    inset: -14% -10% -20% -10%;
    background: radial-gradient(ellipse 60% 54% at 50% 46%, var(--a-amb), transparent 70%);
    filter: blur(56px);
    opacity: .6;
    pointer-events: none;
    z-index: 0;
}
/* Backing plate — a second surface receding behind the frame. Blurred and
   fading downward so it reads as an out-of-focus panel rather than a hard
   ledge, which is how it looked as a crisp bordered rectangle. */
.hero-bg > div.max-w-7xl > div.relative::after {
    content: '';
    position: absolute;
    left: 3.5%; right: 3.5%; top: 3%; bottom: -3.5%;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.008));
    border: 1px solid var(--line-2);
    filter: blur(.5px);
    -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 42%, transparent 100%);
    transform: translateY(13px) scale(.985);
    pointer-events: none;
    z-index: 0;
}

/* The production image already carries its own product chrome — a camera
   header, an event sidebar and printed detection labels. The theme's overlay
   chips (.cam-hud and the .hero-tags pills) therefore duplicated labels the
   photograph already shows, and the "PPE Compliant" pill landed squarely on
   top of the status donut. Hidden rather than deleted, so restoring them is
   removing this block. */
.hero-shot .cam-hud,
.hero-shot .hero-tags .cmp-tag { display: none !important; }

/* A thin bezel, not a mat: the image supplies its own dark rounded chrome, so
   a wide frame around it just reads as a second border.

   The rim is a GRADIENT hairline rather than a flat 1px line — padding-box for
   the bezel fill, border-box for the stroke, so the top-left edge catches a
   little accent light and falls away to neutral around the bottom. That single
   detail is most of what separates a framed screenshot from a surface. */
.hero-shot {
    position: relative;
    z-index: 1;
    border: 1px solid transparent !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)) padding-box,
        linear-gradient(148deg,
            rgba(46,168,124,.50) 0%,
            rgba(255,255,255,.16) 26%,
            rgba(255,255,255,.04) 55%,
            rgba(255,255,255,.10) 100%) border-box !important;
    border-radius: 16px !important;
    padding: 5px !important;
    box-shadow:
        /* tight contact shadow, so it sits on the page rather than floating */
        0 1px 2px rgba(0,0,0,.6),
        0 2px 8px rgba(0,0,0,.45),
        /* the long soft drop that gives it height */
        0 40px 90px -30px rgba(0,0,0,.95),
        /* close accent rim — reads as light spilling off the panel edge */
        0 0 0 1px rgba(46,168,124,.06),
        0 0 120px -58px var(--a-amb) !important;
    animation: float 9s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* Specular sheen across the bezel — a single soft diagonal, clipped to the
   frame and sitting above the plate. Kept under 10% so it reads as a
   reflection rather than a gloss. */
.hero-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(152deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 24%, transparent 46%);
    pointer-events: none;
    z-index: 3;
}

/* The production images are 16:9, so the frame matches that ratio exactly and
   nothing is cropped — the dashboard's left rail stays whole.
   (The earlier 8:5 crop existed only to salvage the old marketing flyer, whose
   masthead and contact strip had to be cut away.) */
.hero-shot img {
    /* nests inside the 16px bezel at 5px padding */
    border-radius: 11px;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.03) saturate(1);
}
.hero-shot .hero-tags::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 11px;
    background: radial-gradient(ellipse 112% 96% at 50% 42%, transparent 62%, rgba(4,6,9,.45) 100%);
    pointer-events: none;
}

.cam-hud {
    background: rgba(6,8,11,.72) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-sm) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .008em !important;
    text-transform: none;
    color: var(--t-2) !important;
    backdrop-filter: blur(12px);
    box-shadow: var(--highlight);
    z-index: 5;
}
.cam-hud .rec-dot { background: var(--err) !important; box-shadow: 0 0 0 3px rgba(234,90,99,.18); }
.cam-hud .cam-time { color: var(--t-4) !important; font-variant-numeric: tabular-nums; }

.cmp-tag {
    background: rgba(6,8,11,.78) !important;
    border-width: 1px !important;
    border-radius: var(--r-xs) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .008em !important;
    text-transform: none !important;
    padding: 5px 10px !important;
    backdrop-filter: blur(12px);
    box-shadow: var(--highlight), var(--sh-2);
}
.cmp-tag.red   { color: var(--err);  border-color: rgba(234,90,99,.42)  !important; }
.cmp-tag.green { color: var(--ok);   border-color: rgba(53,201,143,.42) !important; }
.cmp-tag.amber { color: var(--warn); border-color: rgba(224,169,53,.42) !important; }
.cmp-tag .cmp-dot { box-shadow: 0 0 5px currentColor; }
.hero-tags .cmp-tag { animation: rise .5s var(--ease-out) backwards; z-index: 4; }
.hero-tags .cmp-tag:nth-child(1) { animation-delay: .5s; }
.hero-tags .cmp-tag:nth-child(2) { animation-delay: .82s; }
.hero-tags .cmp-tag:nth-child(3) { animation-delay: 1.14s; }
@keyframes rise {
    from { opacity: 0; transform: translateY(5px) scale(.97); }
    to   { opacity: 1; transform: none; }
}


/* ── 08 · SECTION SYSTEM ─────────────────────────────────────────────────── */

/* The wide grid. This is the single biggest change in v3 — the page was
   running a 1180px column on 1440px+ displays, stranding ~300px of dead space
   on each side while the content itself stayed cramped. */
.tail-container .max-w-7xl {
    max-width: var(--maxw) !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
}

.tail-container main > section {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
    border-top: 0 !important;
    position: relative;
}
.tail-container main > section#top { padding-top: 0 !important; padding-bottom: 0 !important; }

/* IMPORTANT — base-sheet conflict.
   custom.css:1140 sets a `background` SHORTHAND on `section.bg-slate-50` whose
   second layer, linear-gradient(180deg,#f9fbfe,#f3f7fb), is OPAQUE light.
   Overriding only background-color leaves that image painting over the top and
   every alternating section renders as a white band with white text on it.
   The image layer must be replaced, not merely the colour. */
.tail-container section.bg-slate-50 {
    background-color: var(--surf-1) !important;
    background-image: var(--grain), linear-gradient(180deg, rgba(255,255,255,.012), transparent 42%) !important;
    background-blend-mode: overlay, normal !important;
    background-size: 160px 160px, auto !important;
}
.tail-container section.bg-white {
    background-image: var(--grain) !important;
    background-blend-mode: overlay !important;
    background-size: 160px 160px !important;
}

/* Sections flow into one another rather than stacking as discrete blocks. */
.tail-container main > section:not(#top)::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-3) 20%, var(--line-3) 80%, transparent);
    pointer-events: none;
}
/* custom.css blanks the top border on bg-white sections and redraws its own
   light hairline via ::before — retint rather than fight it. */
.tail-container section.bg-white.border-t::before {
    background: linear-gradient(90deg, transparent, var(--line-3) 20%, var(--line-3) 80%, transparent) !important;
}

.tail-container main > section.bg-\[\#14202e\] {
    background:
        var(--grain),
        radial-gradient(ellipse 52% 90% at 50% 0%, rgba(46,168,124,.075), transparent 68%),
        var(--surf-1) !important;
    background-blend-mode: overlay, normal, normal !important;
    background-size: 160px 160px, auto, auto !important;
}

/* --- Editorial section headers ------------------------------------------
   Heading left, supporting copy right, both using the full width. The intro
   was a narrow left column with a large dead field beside it. DOM order is
   untouched — this is grid placement only. */
@media (min-width: 1024px) {
    .tail-container section .max-w-3xl.mb-12,
    .tail-container section .max-w-3xl.mb-10,
    .tail-container section .max-w-3xl.mb-8 {
        max-width: none !important;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        column-gap: clamp(40px, 4.5vw, 88px);
        align-items: end;
        margin-bottom: var(--sp-9) !important;
    }
    .tail-container section .max-w-3xl.mb-12 > div:first-child,
    .tail-container section .max-w-3xl.mb-10 > div:first-child,
    .tail-container section .max-w-3xl.mb-8  > div:first-child { grid-column: 1 / -1; }
    .tail-container section .max-w-3xl.mb-12 > h2,
    .tail-container section .max-w-3xl.mb-10 > h2,
    /* No character cap on the heading: it left ~230px of slack inside its own
       column, which read as a hole between the heading and the copy. */
    .tail-container section .max-w-3xl.mb-8  > h2 { grid-column: 1; margin-bottom: 0 !important; }
    .tail-container section .max-w-3xl.mb-12 > p,
    .tail-container section .max-w-3xl.mb-10 > p,
    .tail-container section .max-w-3xl.mb-8  > p { grid-column: 2; margin-bottom: 0 !important; padding-bottom: 6px; }
}

/* Wider, more generous card grids */
@media (min-width: 1024px) {
    .tail-container main .grid.gap-4,
    .tail-container main .grid.gap-5 { gap: var(--sp-5) !important; }
    .tail-container #industries .grid.lg\:grid-cols-3 { grid-template-columns: 1.2fr 1fr 1fr !important; }
    .tail-container #case-study  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr 1.14fr 1fr !important; }
}


/* ── 09 · SURFACES ───────────────────────────────────────────────────────── */
/* A surface is a tonal gradient over a base, a near-invisible border and a 1px
   internal highlight — not a flat fill with a visible outline. */

.tail-container main article,
.tail-container main aside,
.tail-container #chainDetail,
.tail-container details.group,
.tail-container section .bg-white\/5 {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--highlight), var(--sh-1);
    position: relative;
    transition:
        transform var(--dur-2) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur-2) var(--ease),
        background-color var(--dur) var(--ease);
}

.tail-container main article { padding: clamp(26px, 2vw, 38px) !important; }

.tail-container main article:hover,
.tail-container #chainDetail:hover {
    transform: translateY(-3px);
    background-color: var(--surf-3) !important;
    border-color: var(--line-2) !important;
    box-shadow: var(--highlight-2), var(--sh-3);
}

.tail-container main article::before {
    content: '';
    position: absolute;
    top: -1px; left: 16%; right: 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--a), transparent);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
}
.tail-container main article:hover::before { opacity: .75; }

.tail-container main article h3 { color: var(--t-1); margin-bottom: var(--sp-3); }

/* Scoped to div: the capability chips are spans that also carry text-[11px]
   and uppercase, and this rule outranked their own styling — forcing every
   chip to shouty caps and wrapping the longer ones onto two lines. */
.tail-container main article div.text-\[11px\].uppercase,
.tail-container main article div.text-\[11px\].tracking-\[0\.14em\],
.tail-container main article div.text-\[11px\].tracking-\[0\.12em\] {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--t-4) !important;
    margin-bottom: var(--sp-4) !important;
}

.tail-container main article .text-2xl.font-black,
.tail-container main article .text-3xl.font-black {
    font-size: 1.625rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--a) !important;
    letter-spacing: -.038em;
    margin-bottom: var(--sp-4) !important;
}

.sol-list li { border-bottom: 1px solid var(--line) !important; color: var(--t-3); padding: 13px 0 !important; }
.sol-list li:last-child { border-bottom: 0 !important; }

/* Capability chips — the tint carries the safety / security / emergency /
   operational colour coding from the markup's own bg-[…]/10 utilities. */
.tail-container main article span.rounded-full {
    border-radius: var(--r-xs) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: .004em !important;
    text-transform: none !important;
    padding: 4px 10px !important;
    border: 1px solid transparent;
}

.tail-container main article.bg-\[\#14202e\],
.tail-container main aside.bg-\[\#14202e\] {
    background-image: linear-gradient(160deg, rgba(46,168,124,.075), rgba(255,255,255,.012)) !important;
    background-color: var(--surf-2) !important;
    border-color: var(--a-line) !important;
    box-shadow: var(--highlight-2), var(--sh-3);
}

.tail-container section span.rounded-full.border {
    border-radius: var(--r-xs) !important;
    background: rgba(255,255,255,.03) !important;
    border-color: var(--line) !important;
    color: var(--t-3) !important;
    font-size: 12.5px !important;
    font-weight: 450 !important;
    letter-spacing: -.006em;
    text-transform: none;
    padding: 7px 13px !important;
}


/* ── 10 · COMPONENTS ─────────────────────────────────────────────────────── */

/* --- Live deployment status ---------------------------------------------- */
.tail-container main > div .bg-slate-50.rounded-2xl {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--highlight), var(--sh-1);
    padding: var(--sp-4) var(--sp-6) !important;
    backdrop-filter: blur(10px);
}
.tail-container main > div .bg-slate-50.rounded-2xl .live-dot {
    background: var(--ok) !important;
    box-shadow: 0 0 0 3px rgba(53,201,143,.14), 0 0 10px rgba(53,201,143,.5);
}
.tail-container main > div .bg-slate-50.rounded-2xl p { font-size: 14px !important; color: var(--t-3) !important; line-height: 1.6; }
.tail-container main > div .bg-slate-50.rounded-2xl strong { color: var(--t-1) !important; font-weight: 550; letter-spacing: .008em; }

/* --- Capability marquee --------------------------------------------------- */
.tail-container main > div.bg-\[\#14202e\] {
    background: var(--bg) !important;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-top: var(--sp-3) !important;
    padding-bottom: var(--sp-3) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track span {
    font-size: 12.5px !important;
    font-weight: 450 !important;
    letter-spacing: .008em !important;
    text-transform: none;
    color: var(--t-4) !important;
    padding-right: var(--sp-7) !important;
    gap: var(--sp-3) !important;
}
.ticker-track strong { color: var(--t-2) !important; font-weight: 500 !important; }
.ticker-track .text-\[\#f59e0b\] { color: var(--a) !important; font-size: 5px; opacity: .85; }

/* --- Alerts console ------------------------------------------------------- */
.tail-container #console .bg-white.rounded-2xl {
    background-image: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.008)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--highlight), var(--sh-3);
    overflow: hidden;
}
.tail-container #console .bg-slate-50 {
    background: rgba(255,255,255,.022) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: var(--sp-4) var(--sp-6) !important;
}
.tail-container #console .bg-slate-50 span:first-child { color: var(--t-1) !important; font-weight: 500 !important; font-size: 13.5px !important; }
.tail-container #console .bg-slate-50 .text-xs { color: var(--t-4) !important; font-size: 12px !important; }
.tail-container #console .live-dot { background: var(--ok) !important; box-shadow: 0 0 0 3px rgba(53,201,143,.14); }

table.alerts-table th {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--t-4) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
    padding: var(--sp-3) var(--sp-6) !important;
}
table.alerts-table td {
    border-bottom: 1px solid var(--line) !important;
    color: var(--t-3) !important;
    padding: var(--sp-5) var(--sp-6) !important;
    font-size: 13.5px !important;
}
table.alerts-table td.evt { color: var(--t-1) !important; font-weight: 500 !important; }
table.alerts-table tbody tr { transition: background var(--dur) var(--ease); }
table.alerts-table tbody tr:hover { background: rgba(255,255,255,.022); }

.status-pill {
    border-radius: var(--r-xs) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: .008em !important;
    text-transform: capitalize !important;
    padding: 3px 10px !important;
    border: 1px solid transparent;
}
.status-pill.open     { color: var(--err);  background: rgba(234,90,99,.10)  !important; border-color: rgba(234,90,99,.24); }
.status-pill.review   { color: var(--warn); background: rgba(224,169,53,.10) !important; border-color: rgba(224,169,53,.24); }
.status-pill.resolved { color: var(--ok);   background: rgba(53,201,143,.10) !important; border-color: rgba(53,201,143,.24); }

/* --- Flow ---------------------------------------------------------------- */
.flow-row { margin-top: var(--sp-8) !important; }
.flow-step {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--highlight);
    color: var(--t-3) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .008em !important;
    text-transform: none !important;
    padding: 16px var(--sp-4) !important;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.flow-step:hover { border-color: var(--line-2) !important; color: var(--t-1) !important; transform: translateY(-2px); }
/* Same flat treatment as the button system — this node is read as a control. */
.flow-step.accent {
    background-image: none !important;
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--a-ink) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.flow-arrow { color: var(--t-4) !important; font-size: 13px !important; }

/* --- Signal chain --------------------------------------------------------- */
.chain-tabs { gap: var(--sp-2) !important; }
.chain-tab {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--highlight);
    padding: var(--sp-3) var(--sp-4) !important;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chain-tab:hover { border-color: var(--line-2) !important; background-color: var(--surf-3) !important; transform: translateY(-1px); }
.chain-tab.is-active {
    border-color: var(--a-line) !important;
    background-image: linear-gradient(180deg, rgba(46,168,124,.15), rgba(46,168,124,.04)) !important;
    box-shadow: var(--highlight-2), 0 0 0 1px rgba(46,168,124,.14) !important;
}
.chain-tab .n { color: var(--t-4) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: .07em; }
.chain-tab.is-active .n { color: var(--a) !important; }
.chain-tab .lbl { color: var(--t-2) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: -.006em; }
.chain-tab.is-active .lbl { color: var(--t-1) !important; }
.chain-tab .lbl em { color: var(--t-4) !important; font-size: 11.5px !important; font-weight: 400; }

#chainDetail { padding: clamp(28px, 2.6vw, 44px) !important; margin-top: var(--sp-4) !important; }
#chainDetail h3 { font-size: 1.375rem !important; margin-bottom: var(--sp-3) !important; letter-spacing: -.032em; }
#chainDetail p { color: var(--t-3) !important; line-height: 1.72 !important; font-size: 15.5px !important; }

.tail-container #signal-chain .bg-white.rounded-xl {
    background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--highlight);
    padding: var(--sp-4) var(--sp-5) !important;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tail-container #signal-chain .bg-white.rounded-xl:hover { border-color: var(--line-2) !important; background-color: var(--surf-3) !important; }
.tail-container #signal-chain .bg-white.rounded-xl .font-black {
    color: var(--a) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .11em !important;
}
.tail-container #signal-chain .bg-white.rounded-xl span:last-child { color: var(--t-4) !important; font-size: 12.5px !important; }

/* --- How it works: numbered nodes ----------------------------------------- */
.tail-container #how-it-works article .text-2xl.font-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background-image: linear-gradient(180deg, rgba(46,168,124,.17), rgba(46,168,124,.05)) !important;
    border: 1px solid var(--a-line);
    box-shadow: var(--highlight);
    color: var(--a) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: var(--sp-5) !important;
}

/* --- #compare · drag-to-compare DISABLED ---------------------------------
   Temporary, and deliberately confined to this one block so it can be undone
   by deleting it.

   The interaction stopped being meaningful once the production imagery landed:
   the detection labels are baked into the photograph, so the "Without NexView"
   half showed the same annotations as the "With NexView" half — and the
   theme's own overlay tags collided with the image's printed ones.

   The panel is now a single static plate: the analysed side, full width, with
   the handle, range input, side labels and duplicate overlay tags removed.
   `clip-path` needs !important because main.js writes it inline on load. */
.compare-slider .compare-handle-track,
.compare-slider .compare-range,
.compare-slider .compare-label,
.compare-slider .compare-side.old,
.compare-slider .compare-boxes { display: none !important; }
.compare-slider .compare-side.new { clip-path: none !important; }
.compare-slider { cursor: default; user-select: auto; }

.compare-slider {
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-xl) !important;
    background: var(--surf-2) !important;
    box-shadow: var(--highlight-2), 0 34px 84px -30px rgba(0,0,0,.92), 0 0 110px -55px var(--a-amb);
    max-height: 620px !important;
}
.compare-side.old img { filter: grayscale(.92) brightness(.38) contrast(.95) !important; }
.compare-side.new img { filter: contrast(1.04) saturate(.99); }
.compare-label {
    background: rgba(6,8,11,.75) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-xs) !important;
    color: var(--t-3) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(12px);
    box-shadow: var(--highlight);
}
.compare-label.new-lbl { color: var(--a) !important; border-color: var(--a-line) !important; }
.compare-handle { border-left: 1.5px solid rgba(255,255,255,.8) !important; box-shadow: 0 0 24px rgba(0,0,0,.6); }
.compare-handle::after {
    background: rgba(255,255,255,.95) !important;
    color: #06080b !important;
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.6) !important;
}

/* --- Glass rows ----------------------------------------------------------- */
.tail-container section .bg-white\/5 {
    padding: var(--sp-5) var(--sp-6) !important;
    color: var(--t-2) !important;
    font-size: 15px !important;
    border-radius: var(--r-md) !important;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tail-container section .bg-white\/5:hover {
    border-color: var(--line-2) !important;
    background-color: var(--surf-3) !important;
    transform: translateX(4px);
}
.tail-container section .bg-white\/5 li { color: var(--t-2) !important; border-color: var(--line) !important; }

/* --- Metric cards --------------------------------------------------------- */
.tail-container main > div.bg-white.py-12 { background: var(--surf-1) !important; padding-top: var(--sp-8) !important; padding-bottom: var(--sp-8) !important; }
.tail-container main > div.bg-white.py-12 .bg-slate-50.rounded-2xl {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--highlight), var(--sh-1);
    padding: clamp(24px, 2vw, 36px) !important;
    text-align: left !important;
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.tail-container main > div.bg-white.py-12 .bg-slate-50.rounded-2xl::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 90% at 0% 0%, var(--a-soft), transparent 68%);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
    pointer-events: none;
}
.tail-container main > div.bg-white.py-12 .bg-slate-50.rounded-2xl:hover {
    border-color: var(--line-2) !important;
    transform: translateY(-3px);
    box-shadow: var(--highlight-2), var(--sh-3);
}
.tail-container main > div.bg-white.py-12 .bg-slate-50.rounded-2xl:hover::after { opacity: 1; }
.tail-container main > div.bg-white.py-12 .text-3xl {
    font-size: clamp(2.25rem, 2.9vw, 3rem) !important;
    font-weight: 600 !important;
    color: var(--t-1) !important;
    letter-spacing: -.048em;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
}
.tail-container main > div.bg-white.py-12 .text-xs {
    color: var(--t-4) !important;
    font-size: 11.5px !important;
    font-weight: 450 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: var(--sp-4) !important;
    line-height: 1.5 !important;
}

/* --- FAQ ------------------------------------------------------------------ */
.tail-container details.group {
    padding: var(--sp-5) var(--sp-6) !important;
    border-radius: var(--r-md) !important;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tail-container details.group:hover { border-color: var(--line-2) !important; background-color: var(--surf-3) !important; }
.tail-container details.group[open] { background-color: var(--surf-3) !important; border-color: var(--line-2) !important; }
.tail-container details.group summary { color: var(--t-1) !important; font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.tail-container details.group summary span { color: var(--t-4) !important; font-weight: 400; transition: color var(--dur) var(--ease); }
.tail-container details.group[open] summary span { color: var(--a) !important; }
.tail-container details.group p { color: var(--t-3) !important; line-height: 1.72 !important; font-size: 14.5px !important; }
.tail-container details.group::before { display: none; }


/* ── 10b · PRODUCTION IMAGERY ────────────────────────────────────────────
   Five of the eight NexView production images are placed here rather than in
   the markup, so no <img> elements are added and the document structure is
   untouched. Each is matched to the section whose content it actually depicts.

     dashboard-overview   -> hero            (in markup, <img>)
     port-perimeter       -> #compare        (in markup, both sides)
     refinery-field       -> #industries card 1 · Oil & Gas / Refineries
     offshore-platform    -> #industries card 2 · Marine & Offshore
     detection-overlay    -> #industries card 3 · Heavy Industry
     control-room         -> #console        · "One console. Every site."
     port-operations      -> multi-site band · "One view, every plant"
     refinery-analytics   -> #modernize      · "Already have CCTV?"

   Card images are a header band fading into the card surface; section images
   are a large, heavily scrimmed backdrop. Both are decorative reinforcement of
   copy that already exists, which is why they carry no alt text — the three
   images that convey unique information are the ones in the markup. */

/* --- Industry cards: image header band ----------------------------------- */
@media (min-width: 640px) {
    .tail-container #industries article {
        padding-top: 190px !important;
        overflow: hidden;
    }
    .tail-container #industries article::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 176px;
        background-size: cover;
        background-position: center;
        /* fade the plate into the card so there is no hard seam */
        -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
        opacity: .85;
        transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
        pointer-events: none;
    }
    .tail-container #industries article:hover::after { opacity: 1; transform: scale(1.03); }

    .tail-container #industries article:nth-child(1)::after { background-image: url('../../images/nexview-refinery-field-md.webp'); }
    .tail-container #industries article:nth-child(2)::after { background-image: url('../../images/nexview-offshore-platform-md.webp'); }
    .tail-container #industries article:nth-child(3)::after { background-image: url('../../images/nexview-detection-overlay-md.webp'); }
}

/* --- Section backdrops ---------------------------------------------------
   Anchored to the inner .max-w-7xl rather than the <section>, because
   custom.css already owns section::before on bg-white sections and §08 owns
   section::after for the flow hairline. */
/* `isolation: isolate` is required on the SECTION, not the container: without
   it the z-index:-1 backdrop escapes to the nearest stacking-context ancestor
   and paints behind the section's own opaque background, i.e. invisibly.
   Isolating clamps it — above the section background, below the content. */
.tail-container #console,
.tail-container #modernize,
.tail-container main > section.bg-\[\#14202e\] { isolation: isolate; }

.tail-container #console > .max-w-7xl,
.tail-container #modernize > .max-w-7xl,
.tail-container main > section.bg-\[\#14202e\] > .max-w-7xl { position: relative; }

.tail-container #console > .max-w-7xl::before,
.tail-container #modernize > .max-w-7xl::before,
.tail-container main > section.bg-\[\#14202e\] > .max-w-7xl::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    opacity: .2;
}

/* "One console. Every site." — the control-room photograph.
   Lifted into the section's top padding and faded downward: at the original
   position it sat directly behind the right-hand paragraph and cost real
   legibility. The mask keeps density near the top edge and is fully clear by
   the time the copy starts. */
.tail-container #console > .max-w-7xl::before {
    top: -120px; right: calc(var(--gutter) * -1);
    width: min(600px, 44%); height: 340px;
    border-radius: var(--r-xl);
    background-image: url('../../images/nexview-control-room.webp');
    opacity: .17;
    -webkit-mask-image: radial-gradient(ellipse 74% 66% at 72% 16%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse 74% 66% at 72% 16%, #000 0%, transparent 72%);
}

/* "Already have CCTV?" — analytics layered over an existing plant. */
.tail-container #modernize > .max-w-7xl::before {
    top: -130px; right: calc(var(--gutter) * -1);
    width: min(640px, 46%); height: 360px;
    background-image: url('../../images/nexview-refinery-analytics.webp');
    opacity: .17;
    -webkit-mask-image: radial-gradient(ellipse 72% 64% at 74% 14%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse 72% 64% at 74% 14%, #000 0%, transparent 70%);
}

/* "One view, every plant, vessel or yard." — the port multi-camera view. */
.tail-container main > section.bg-\[\#14202e\] > .max-w-7xl::before {
    inset: -80px calc(var(--gutter) * -1) -80px auto;
    width: min(760px, 54%);
    background-image: url('../../images/nexview-port-operations.webp');
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
            mask-image: linear-gradient(90deg, transparent, #000 55%);
}

/* Backdrops are atmosphere, not information — drop them where they would
   collide with the stacked mobile layout. */
@media (max-width: 1023.98px) {
    .tail-container #console > .max-w-7xl::before,
    .tail-container #modernize > .max-w-7xl::before,
    .tail-container main > section.bg-\[\#14202e\] > .max-w-7xl::before { display: none; }
}


/* ── 11 · FORMS + DIALOGS ────────────────────────────────────────────────── */

.popup-overlay { background: rgba(4,6,9,.78) !important; backdrop-filter: blur(10px); }

.popup-card,
.brochure-popup-card,
.popup-card--compact {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--highlight-2), var(--sh-4) !important;
    color: var(--t-2);
}
.popup-card::before {
    content: '';
    position: absolute;
    top: 0; left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--a), transparent);
}

.popup-card h2,
.popup-card--compact .popup-title,
#brochurePopupTitle { color: var(--t-1) !important; font-weight: 600 !important; letter-spacing: -.034em; }
.popup-card p,
.popup-card--compact .popup-subtitle { color: var(--t-3) !important; font-size: 14px !important; }

.popup-close {
    background: rgba(255,255,255,.04) !important;
    color: var(--t-3) !important;
    border: 1px solid var(--line-2) !important;   /* base sheet uses #e5e7eb */
    border-radius: var(--r-sm) !important;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.popup-close:hover { background: rgba(255,255,255,.09) !important; color: var(--t-1) !important; }

.demo-badge,
.popup-card--compact .popup-badge {
    background: var(--a-soft) !important;
    color: var(--a) !important;
    border: 1px solid var(--a-line) !important;
    border-radius: var(--r-xs) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.popup-card--compact .popup-badge-dot { background: var(--a) !important; }

.demo-form-label {
    color: var(--t-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -.006em;
    text-transform: none;
}
.demo-form-input {
    background: rgba(0,0,0,.3) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r) !important;
    color: var(--t-1) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.demo-form-input::placeholder { color: var(--t-4) !important; }
.demo-form-input:focus {
    border-color: var(--a) !important;
    background: rgba(0,0,0,.18) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 0 0 3px rgba(46,168,124,.16) !important;
}
.demo-form-input.error { border-color: var(--err) !important; box-shadow: 0 0 0 3px rgba(234,90,99,.14) !important; }
.demo-form-input option { background: var(--surf-4); color: var(--t-1); }

.btn-apply-now { min-height: 44px; padding: 0 18px !important; }
.btn-not-now { min-height: 40px; }

.form-feedback.error { color: var(--err) !important; }
.form-feedback.success { color: var(--ok) !important; }

.sticky-cta-bar {
    background: rgba(6,8,11,.9) !important;
    border-top: 1px solid var(--line) !important;
    backdrop-filter: blur(18px);
}


/* ── 12 · MOTION ─────────────────────────────────────────────────────────── */

/* `nv-reveal` is applied by theme-motion.js at runtime, never in the markup,
   so a failed script load leaves everything visible. */
.nv-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
    will-change: opacity, transform;
}
.nv-in { opacity: 1; transform: none; }

.nv-reveal[data-nv-delay="1"] { transition-delay: 55ms; }
.nv-reveal[data-nv-delay="2"] { transition-delay: 110ms; }
.nv-reveal[data-nv-delay="3"] { transition-delay: 165ms; }
.nv-reveal[data-nv-delay="4"] { transition-delay: 220ms; }
.nv-reveal[data-nv-delay="5"] { transition-delay: 275ms; }

.nv-parallax { will-change: transform; }
.nv-counting { font-variant-numeric: tabular-nums; }


/* ── 13 · RESPONSIVE / A11Y / PRINT ──────────────────────────────────────── */

@media (max-width: 1023.98px) {
    .tail-container #industries .grid.lg\:grid-cols-3,
    .tail-container #case-study  .grid.lg\:grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
    /* The stacked backing plate reads as clutter once the columns collapse. */
    .hero-bg > div.max-w-7xl > div.relative::after { display: none; }
}

@media (max-width: 640px) {
    :root { --section-y: 68px; }
    .tail-container main article { padding: 20px !important; }
    .hero-bg .border-t.border-slate-200 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--sp-5) !important;
    }
    /* 2-up: the left cell of each row starts that row, so it drops its rule. */
    .hero-bg .border-t.border-slate-200 > span { padding: 0 var(--sp-3); }
    .hero-bg .border-t.border-slate-200 > span:nth-child(odd) { padding-left: 0; border-left: 0; }
    .hero-bg a.bg-gradient-to-r,
    .hero-bg a.border-slate-300 { width: 100%; justify-content: center; }
    table.alerts-table tr { border-bottom: 1px solid var(--line) !important; }
}

@media (prefers-contrast: more) {
    body.tail-container { color: #c9d1da; }
    .tail-container main article,
    .tail-container details.group,
    .tail-container #chainDetail { border-color: var(--line-3) !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-shot { animation: none !important; }
    .hero-tags .cmp-tag { animation: none !important; opacity: 1; transform: none; }
    .nv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .tail-container main article:hover,
    .tail-container section .bg-white\/5:hover,
    .flow-step:hover,
    .chain-tab:hover,
    .tail-container a:hover,
    .tail-container .btn-apply-now:hover { transform: none !important; }
    .tail-container a:hover > svg { transform: none !important; }
}

@media print {
    body.tail-container { background: #fff; color: #000; }
    .hero-bg::before { display: none !important; }
    .sticky-cta-bar,
    .floating-contact-stack,
    .popup-overlay { display: none !important; }
}
