/* ============================================================================
   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   (superseded — see the accent block)
   The four surface/text values are used verbatim below. The accent is NOT:
   it was later re-derived from the NexView logo so the brand mark and the
   interface agree — see the accent block for the sampled values.
   (Originally used verbatim.) 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 — sampled from the NexView logo.
       #1E72DB is the wordmark blue (the single most common colour in the mark)
       and #00ADFF is the digital-square cyan. Measured on --bg #0B0F14:
         #1E72DB  4.10:1 as text (under AA)  ·  white on it 4.68:1 (passes)
       so the exact logo blue carries the FILLS, and a lifted tint of the same
       hue carries text, borders and dots at 5.9:1. The cyan is reserved for
       highlights, where its 7.7:1 does real work. */
    --a:           #4A90E8;   /* accent text/borders — 5.9:1 on --bg         */
    --a-bright:    #00ADFF;   /* logo cyan — highlights, gradient mid        */
    --a-deep:      #1E72DB;   /* logo wordmark blue, verbatim                */
    --a-ink:       #ffffff;   /* label on an accent fill — 4.68:1            */
    --a-soft:      rgba(74, 144, 232, 0.10);
    --a-line:      rgba(74, 144, 232, 0.26);
    --a-amb:       rgba(30, 114, 219, 0.40);

    /* 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:         #1E72DB;   /* logo wordmark blue, verbatim             */
    --btn-bg-hover:   #2E82EB;
    --btn-bg-active:  #1660BE;
    --btn-line:       rgba(255, 255, 255, 0.14);
    --btn-line-hover: rgba(255, 255, 255, 0.30);

    /* Status — semantic only. With a blue accent there is no longer any
       collision with "success", so green returns to a normal mint rather than
       the over-brightened value it needed alongside a green brand colour. */
    --ok:          #35c98f;
    --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(74,144,232,.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(74,144,232,.16), rgba(74,144,232,.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(74,144,232,.13), transparent 64%),
        radial-gradient(ellipse 46% 44% at 96% 18%, rgba(74,144,232,.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, contained.

   An earlier revision let the product column bleed past the right gutter to
   buy height — 16:9 is a wide, short ratio, so standing ~0.7x the text column
   needs ~1000px of width. It bought the size but broke the page's vertical
   rule: every other element (the live-deployment strip, the metric cards, each
   section grid) stops at the container edge, so the one element crossing it
   read as a layout fault rather than as intent.

   Alignment wins. The image now ends exactly where everything else does, and
   the width it lost is recovered from the split (42/58 -> 40/60) and a tighter
   column gap instead. */
@media (min-width: 1024px) {
    /* 42/58 measured as the optimum. Widening the image past this narrows the
       copy column enough that the H1 wraps from 5 lines to 6 (792px -> 887px),
       so the larger image actually scores worse against a taller text column:
         46/54 -> 0.54    44/56 -> 0.56    42/58 -> 0.58
         40/60 -> 0.54 (6-line H1)         38/62 -> 0.56 (6-line H1)          */
    .hero-bg > div.max-w-7xl {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
        gap: clamp(32px, 3vw, 52px) !important;
    }
}

/* 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, #a8d4f7 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(74,144,232,.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(74,144,232,.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;
}

/* --- Certification marks (.nv-certs) --------------------------------------
   Kept on a white plate on the dark theme. The marks are navy line art, so a
   filter-based invert would be the cheap fix — but a certification mark is a
   controlled asset and has to render as issued, so the surface changes rather
   than the mark. The plate gets the same seating shadow as other surfaces so
   it reads as a card rather than a hole punched in the page. */
.tail-container .nv-certs {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--r-md) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .55),
        0 12px 34px -14px rgba(0, 0, 0, .85);
}

/* --- Group-company logo chips (.nv-logo-pill) ----------------------------
   White plate for the same reason as .nv-certs: the marks are navy and red
   and have to render as issued. The organisation row used to carry text chips
   for the office locations alongside these; the geometry here (6px radius,
   seating shadow) was matched to them and is kept now that the row is logos
   only, so it still reads as one set with .nv-certs elsewhere. */
.tail-container .nv-logo-pill {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--r-xs) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .5),
        0 8px 22px -12px rgba(0, 0, 0, .8);
}

/* --- Framed image plate (.nv-plate) --------------------------------------
   Section imagery, in the same bezel language as .hero-shot above: gradient
   hairline rim, 5px bezel, layered contact-plus-drop shadow, specular sheen
   and a vignette that seats the photograph into the dark page.

   Two deliberate differences from the hero: no float animation (a plate this
   far down the page should sit still while you read past it), and a slightly
   tighter accent glow, since it isn't competing for first attention. */
.tail-container .nv-plate-frame {
    position: relative;
    display: block;
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)) padding-box,
        linear-gradient(148deg,
            rgba(74,144,232,.44) 0%,
            rgba(255,255,255,.15) 26%,
            rgba(255,255,255,.04) 55%,
            rgba(255,255,255,.10) 100%) border-box;
    border-radius: 16px;
    padding: 5px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.6),
        0 2px 8px rgba(0,0,0,.45),
        0 40px 90px -30px rgba(0,0,0,.95),
        0 0 0 1px rgba(74,144,232,.06),
        0 0 120px -64px var(--a-amb);
}
.tail-container .nv-plate img {
    border: 0 !important;
    border-radius: 11px;
    filter: contrast(1.03) saturate(.99);
}
/* vignette — sits over the photograph, inside the bezel */
.tail-container .nv-plate-frame::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;
    z-index: 2;
}
/* specular sheen across the bezel */
.tail-container .nv-plate-frame::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;
}
/* --t-3, not --t-4: at 13px the caption is body copy, and --t-4 lands at
   3.1:1 on --bg, under the AA floor the handover package requires. --t-3
   is 5.0:1. */
.tail-container .nv-plate figcaption {
    margin-top: var(--sp-4) !important;
    color: var(--t-3) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.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(74,144,232,.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; }
    /* #industries stays on equal thirds. The weighted 1.2fr first column read
       as three cards that didn't line up rather than as intentional
       asymmetry — with an image band on each one, equal widths matter. */
    .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(74,144,232,.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(74,144,232,.15), rgba(74,144,232,.04)) !important;
    box-shadow: var(--highlight-2), 0 0 0 1px rgba(74,144,232,.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: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
}
.tail-container #signal-chain .bg-white.rounded-xl span:last-child { color: var(--t-3) !important; font-size: 13.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(74,144,232,.17), rgba(74,144,232,.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 -------------------------------------------------------------
   The section now renders the self-contained animated .nvc component
   (assets/css/nv-compare.css + assets/js/nv-compare.js), which is drawn in
   this theme's palette already — nothing to re-skin here. The old photo-based
   .compare-slider markup, and the block that disabled it, are gone. */

/* --- 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
     vessel-yards         -> #industries card 2 · Marine & Offshore
                             (replaced offshore-platform, which is now unused)
     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: 226px !important;
        overflow: hidden;
    }
    .tail-container #industries article::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 210px;
        background-size: cover;
        background-position: center;
        /* Hold the plate at full strength for the top 92%, then fade over the
           last ~17px — only enough to soften the seam against the card.
           Earlier values (52%, 72%, 86%) each dissolved more of the lower
           band than intended and left the photographs looking washed out. */
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
        opacity: 1;
        transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
        pointer-events: none;
    }
    .tail-container #industries article:hover::after { transform: scale(1.04); filter: brightness(1.07); }

    .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-vessel-yards-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(74,144,232,.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);
}


/* ── 11b · FINAL CTA — LEAD FORM ─────────────────────────────────────────── */
/* The wireframe's final CTA, retuned to this theme. Styled entirely from
   custom classes rather than utilities: styles.css is a purged Tailwind
   build, so any class the rest of the page never used is absent from it.
   Weights stay at 500/600 — Inter is loaded at 400/500/600 only.
   (The chat-or-form toggle that used to live here went with the in-page
   assistant; live chat is now Tawk.to, loaded at the foot of index.html.) */

.nv-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lead-grid { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1024px) {
    .lead-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: clamp(48px, 5vw, 96px);
    }
}

/* The embedded Tawk widget draws at the width set on widget 1jvqcvj2n in the
   dashboard (Widget Appearance), which is narrower than this grid column — so
   the tab bar sat wider than the chat card under it. Everything in the right
   column is capped to the same figure instead, which also stops the panel
   changing width when the tabs are switched.

   --chat-w must track the dashboard. If the widget's configured width changes,
   change it here too; there is no way to read it from a cross-origin iframe.
   It is a max-width, not a width, so on columns narrower than this (below
   ~1300px viewport) everything still fills the column as before. */
.lead-grid { --chat-w: 600px; }
.lead-toggle,
.chat-panel,
.lead-form,
.lead-thanks { max-width: var(--chat-w); }

.tail-container .lead-sub {
    color: var(--t-3) !important;
    font-size: 16px;
    line-height: 1.72;
    margin-top: var(--sp-5);
    max-width: 48ch;
}

.contact-strip {
    margin-top: var(--sp-6);
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--sp-2);
}
.tail-container .contact-strip a {
    font-size: 15px;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.tail-container .contact-strip .contact-strip-main { color: var(--a) !important; font-weight: 500; }
.tail-container .contact-strip .contact-strip-alt  { color: var(--t-3) !important; }
.tail-container .contact-strip a:hover { color: var(--a-bright) !important; }

/* Segmented control — a track with an inset fill, not two adjacent buttons,
   so the inactive half still reads as part of one control. */
.lead-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 4px;
    margin-bottom: var(--sp-5);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.tail-container .lead-toggle button {
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--t-3);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.004em;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tail-container .lead-toggle button:hover { color: var(--t-1); background: rgba(255,255,255,.045); }
.tail-container .lead-toggle button.is-active {
    background: var(--btn-bg);
    color: var(--a-ink);
    box-shadow: var(--highlight-2), var(--sh-2);
}

/* Tawk.to inline chat panel. The widget is a cross-origin iframe, so nothing
   inside it can be styled from here — its colours are set in the Tawk
   dashboard (Administration → Chat Widget → Widget Appearance).

   SIZE IS SET IN THE DASHBOARD, NOT HERE. This widget (1jvqcvj2n) is a
   dedicated embedded widget with its own configured width and height under
   Widget Appearance, and there are deliberately no width/height rules below —
   an earlier version forced the wrapper and iframe to 100%/620px with
   !important and fought the dashboard, which is what made the size wrong.

   Give #tawk_… (.chat-embed) NO width, height or min-height either way. Tawk
   measures that container to size itself, and any height on it makes the
   widget render 0px tall (bisected: min-height alone reproduces it).

   All that is left is centring the card in the column, since the widget is
   narrower than the ~730px tab bar above it. */
.chat-panel { display: none; padding: 0; }
.chat-panel.is-active { display: block; }
.chat-embed { display: flex; justify-content: center; }

/* Shared panel shell for the form and the thank-you state */
.lead-panel,
.lead-thanks {
    background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
    background-color: var(--surf-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--highlight), var(--sh-3);
}

/* Lead form */
.lead-form { padding: var(--sp-6); }
.lead-form-row { display: grid; gap: 0 var(--sp-5); }
@media (min-width: 640px) { .lead-form-row { grid-template-columns: 1fr 1fr; } }
.tail-container .lead-form .req { color: var(--err); }
.tail-container .lead-form .opt { color: var(--t-4); font-weight: 400; }
.tail-container .lead-form textarea.demo-form-input { min-height: 92px; resize: vertical; }

.lead-consent {
    display: flex; align-items: flex-start; gap: 10px;
    margin: var(--sp-2) 0 var(--sp-5);
    color: var(--t-3);
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
}
.lead-consent input { margin-top: 2px; accent-color: var(--a); flex: 0 0 auto; }

.tail-container .lead-form-note {
    color: var(--t-4) !important;
    font-size: 12px !important;
    line-height: 1.6;
    margin-top: var(--sp-3);
}

/* Thank-you state — shown by the assistant once it has everything */
.lead-thanks { padding: var(--sp-6); margin-top: var(--sp-5); }
.lead-thanks-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    background: rgba(53,201,143,.1);
    border: 1px solid rgba(53,201,143,.26);
    border-radius: var(--r-xs);
    color: var(--ok);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.lead-thanks-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.tail-container .lead-thanks h3 {
    color: var(--t-1) !important;
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    letter-spacing: -.03em;
    margin-top: var(--sp-4);
}
.tail-container .lead-thanks p {
    color: var(--t-3) !important;
    font-size: 14.5px !important;
    line-height: 1.7;
    margin-top: var(--sp-3);
    max-width: 46ch;
}
/* .btn-apply-now is width:100% in the base sheet, which an inline <a> ignores */
.tail-container .lead-thanks .btn-apply-now {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto;
    margin-top: var(--sp-5);
    text-decoration: none;
}


/* ── 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; }
}

/* ---------------------------------------------------------------------------
   Honeypot field (spam trap)
   Paired with the "website" input on #leadForm and #popupForm, and with the
   check in leads/views.py that silently discards any submission carrying a
   value here.

   Deliberately NOT display:none / visibility:hidden / type="hidden" — the
   better bots skip fields hidden those ways, which is exactly the wrong
   outcome for a trap. This moves it out of view while leaving it a normal,
   fillable text input in the DOM. aria-hidden + tabindex="-1" on the markup
   keep screen readers and keyboard users away from it.
--------------------------------------------------------------------------- */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}