/* ============================================================
   CorevioApp — 2026 design refresh (rx.css)
   Loaded AFTER styles.css. Token-driven, so all four themes
   (deck / light / charcoal / pathfinder) and RTL still apply.
   Adds: airier rhythm, larger type, softer cards, video hero
   + prominent long-form film section. No JS hooks changed.
   ============================================================ */

:root{
  --r-sm:12px; --r:16px; --r-lg:28px;
  --shadow-sm:0 1px 2px rgba(11,31,74,.05), 0 2px 6px rgba(11,31,74,.05);
  --shadow:0 14px 40px rgba(11,31,74,.10), 0 3px 10px rgba(11,31,74,.05);
  --shadow-lg:0 40px 80px rgba(11,31,74,.18), 0 12px 28px rgba(11,31,74,.09);
}

/* ---------- typography: bigger, tighter, airier ---------- */
.h-hero{ font-size:clamp(40px,5.2vw,66px); line-height:1.03; letter-spacing:-1.4px; }
.h-sec{ font-size:clamp(28px,3.6vw,44px); line-height:1.08; letter-spacing:-1px; }
.lead{ font-size:18px; line-height:1.62; }
.hero .lead{ font-size:19px; max-width:38ch; }
.eyebrow{ font-size:12px; letter-spacing:2px; }

/* ---------- more generous section rhythm ---------- */
.sec{ padding:108px 0; }
.sec-sm{ padding:72px 0; }
.sec-head{ max-width:780px; }
.sec-head.center{ margin-left:auto; margin-right:auto; }
.mt56{ margin-top:64px; } .mt40{ margin-top:48px; }

/* ---------- buttons: a touch larger, crisper ---------- */
.btn{ font-size:15px; padding:13px 26px; }
.btn-lg{ font-size:16.5px; padding:16px 34px; }
.btn-p{ box-shadow:0 10px 26px rgba(14,165,233,.30); }
.btn-p:hover{ transform:translateY(-2px); }

/* ---------- cards: soft, rounded, hairline, lift on hover ---------- */
.card,.mcard,.minicard,.reccard,.impcard{
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.hoverable:hover,.mcard:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--tintline);
}

/* ---------- HERO video (replaces the shot cycle) ---------- */
.shotframe{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
            border:1px solid var(--border); background:var(--card); }
.herovid{ display:block; width:100%; height:auto; aspect-ratio:16/9;
          object-fit:cover; background:#08152b; }
.hero .float-kpi,.hero .float-badge{ box-shadow:var(--shadow); }

/* ---------- long-form film section: make it a centrepiece ---------- */
#film{ padding:112px 0; }
#film .videoframe{
  max-width:1080px; margin:44px auto 0; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid var(--border); background:#05070b;
  position:relative;
}
#film .videoframe::after{  /* subtle brand hairline glow */
  content:""; position:absolute; inset:0; border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(14,165,233,.14); pointer-events:none;
}
#film .videoframe video{ width:100%; display:block; aspect-ratio:16/9;
                          object-fit:cover; background:#05070b; }

/* ---------- refined sticky nav ---------- */
.nav{ transition:box-shadow .2s ease, background .2s ease; }
.nav.scrolled{ box-shadow:0 8px 30px rgba(11,31,74,.08); }

/* ---------- stat strip: bigger numbers ---------- */
.stat b{ font-size:clamp(34px,4vw,48px); letter-spacing:-1.5px; }

/* ---------- reveal-on-scroll polish (works with app.js .in) ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sec{ padding:72px 0; }
  #film{ padding:76px 0; }
  .h-hero{ font-size:clamp(34px,8vw,46px); }
}

/* ---------- expanded cookie consent (Optibus-style) ---------- */
.cookie{ left:50% !important; right:auto !important; bottom:24px !important;
         transform:translateX(-50%); margin:0 !important;
         width:calc(100% - 48px); max-width:860px; padding:24px 32px 22px;
         border-radius:18px; box-shadow:var(--shadow-lg); }
.cookie.expanded{ max-width:920px; }
.cookie .ck-body h4{ font-size:17px; color:var(--navy); margin:0 0 8px; letter-spacing:-.3px; }
.cookie .ck-body p{ font-size:13px; line-height:1.55; color:var(--muted); margin:0 0 14px; }
.cookie .ck-body p b{ color:var(--navy); }
.cookie .ck-body a{ color:var(--sky); font-weight:700; }
.cookie .ck-prefs{ display:flex; flex-direction:column; gap:2px; margin:2px 0 14px;
                   padding-top:12px; border-top:1px solid var(--border); }
.cookie .ck-opt{ display:flex; align-items:center; justify-content:space-between; gap:16px;
                 padding:9px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.cookie .ck-opt:last-of-type{ border-bottom:0; }
.cookie .ck-opt span{ display:flex; flex-direction:column; gap:2px; }
.cookie .ck-opt b{ color:var(--navy); font-size:13.5px; font-weight:700; }
.cookie .ck-opt small{ color:var(--faint); font-size:11.5px; line-height:1.35; }
.cookie .ck-opt input{ width:20px; height:20px; accent-color:var(--sky); flex:0 0 auto; cursor:pointer; }
.cookie .ck-opt input:disabled{ opacity:.55; cursor:not-allowed; }
.cookie .ck-save{ align-self:flex-start; margin-top:12px; padding:10px 18px; font-size:13px; }
.cookie .row{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie .row .btn{ font-size:13px; padding:10px 16px; }
@media (max-width:560px){
  .cookie{ width:calc(100% - 24px); bottom:12px !important; padding:20px 18px 18px; }
  .cookie .row .btn{ flex:1 1 auto; justify-content:center; }
}

/* cookie: keep preferences collapsed until "Adjust my preferences" is clicked */
.cookie .ck-prefs[hidden]{ display:none !important; }
.cookie .row{ align-items:center; }
.cookie .row [data-ck-prefs-toggle]{ margin-right:auto; }   /* Adjust on the left, Reject + Accept on the right */

/* ---------- mid-page product-loop section (mirrors #film framing) ---------- */
#overview{ padding:104px 0; }
#overview .videoframe{ max-width:1080px; margin:44px auto 0; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border);
  background:#05070b; position:relative; }
#overview .videoframe video{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#05070b; }
@media (max-width:900px){ #overview{ padding:72px 0; } }
/* hero VO film keeps controls visible */
.hero .herovid{ background:#05070b; }

/* why-choose 3-col grid */
.grid.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:900px){ .grid.g3{ grid-template-columns:1fr; } }

/* ---------- Zammad-style: big centred product screenshots, copy above ---------- */
.pftab-split{ grid-template-columns:1fr !important; gap:30px !important; }
.pftab-copy{ max-width:860px; margin:0 auto; text-align:center; }
.pftab-copy .k{ display:inline-flex; }
.pftab-copy .vp{ text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:12px; }
.pftab-copy > .btn-t{ margin-top:8px; }
.pftab-visual{ max-width:1060px; margin:8px auto 0; width:100%; }
.pftab-visual img{ width:100%; height:auto; display:block; }
@media(max-width:720px){ .pftab-copy .vp{ grid-template-columns:1fr; } }

/* brand logo: show fully, correct aspect (icon is ~1.38:1, not square) */
.brand img{ width:auto !important; height:34px !important; object-fit:contain; }
.footbrand img{ height:32px !important; width:auto !important; }

/* brand: one-word "CorevioTech" (no flex gap between words) + fully-visible padded icon */
.brand{ gap:0 !important; }
.brand img{ height:38px !important; width:auto !important; margin-right:11px; object-fit:contain; }
.footbrand img{ height:34px !important; margin-right:10px; }

/* module grid: each row fills width evenly regardless of tile count (5 vs 6) */
.eco{ display:flex !important; flex-wrap:wrap; gap:16px; }
.eco .mod{ flex:1 1 180px; }
@media(max-width:640px){ .eco .mod{ flex:1 1 140px; } }

/* platform chain: cards flow and fill rows evenly (13 stages) */
.chain-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.chain-grid > .card{ flex:1 1 150px; }
@media(max-width:520px){ .chain-grid > .card{ flex:1 1 120px; } }

/* ---------- mobile app mockups: thicker (less narrow) + CorevioApp brand ---------- */
.appmock{ width:342px !important; }
@media(max-width:520px){ .appmock{ width:300px !important; } }
.am-brand{ display:flex; align-items:center; gap:8px; margin:11px 0 1px; }
.am-brand img{ width:22px; height:22px; border-radius:6px; background:#fff; padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.am-brand span{ font-size:13px; font-weight:800; letter-spacing:.2px; color:#fff; opacity:.96; }

/* ============================================================
   Screenshot proportion fix — always render at the real
   on-screen (wide) ratio; never a boxy / taller crop.
   Natural aspect wins over any legacy width/height attribute.
   ============================================================ */
.pftab-visual img,
.shotframe img,
.thumb img,
.bento .big .thumb img,
.herovis img,
.mediaframe img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;   /* use the image's own (wide) ratio */
  object-fit:contain !important;  /* no cropping/stretching */
  display:block;
}
/* the framed screenshot containers must hug the image, not impose a box height */
.pftab-visual, .shotframe, .bento .big .thumb{ height:auto !important; }
/* click-to-fullscreen affordance on the watchable films */
.videoframe video[controls]{ cursor:pointer; }

/* ============================================================
   Mega-menu polish — tinted header band, per-item icons,
   refined hover + CTA. CSS-only, applies to every page.
   ============================================================ */
.mega{ padding:0; }
.mega .wrap{ padding:14px; gap:3px 12px; }
.mega .mega-lead{
  margin:-14px -14px 12px; padding:15px 16px 13px;
  background:color-mix(in srgb, var(--acc) 7%, var(--card));
  border-bottom:1px solid var(--border);
}
.mega .mega-lead .k{ color:var(--acc); }
.mega .mega-lead h4{ font-size:16.5px; letter-spacing:-.2px; }
.mega .mega-lead p{ font-size:12px; color:var(--muted); }
.mega .mega-lead .btn-t{ color:var(--acc); font-weight:800; letter-spacing:.1px; }
.mega .mega-lead .btn-t:hover{ text-decoration:underline; }

.mega .mi-link{ position:relative; padding:10px 10px 10px 48px !important;
  transition:background .15s ease, transform .15s ease; }
.mega .mi-link:hover{ transform:translateX(2px); }
.mega .mi-link::before{
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:29px; height:29px; border-radius:9px;
  background-color:color-mix(in srgb, var(--acc) 13%, transparent);
  background-repeat:no-repeat; background-position:center; background-size:16px 16px;
}
.mega .mi-link:hover::before{ background-color:color-mix(in srgb, var(--acc) 22%, transparent); }
.mega .mi-link[href*="#plan"]::before{     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='17' rx='2'/><path d='M3 9h18M8 2v4M16 2v4'/></svg>"); }
.mega .mi-link[href*="#vehicle"]::before{  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='13' rx='2'/><path d='M4 11h16'/><path d='M8 17v2M16 17v2'/></svg>"); }
.mega .mi-link[href*="#crew"]::before{     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='7' r='4'/><path d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/></svg>"); }
.mega .mi-link[href*="#ops"]::before{      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M3 10h18M9 20V10'/></svg>"); }
.mega .mi-link[href*="#maintain"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5.5a3.8 3.8 0 0 0-5 5L4 16.5V20h3.5l6-6a3.8 3.8 0 0 0 5-5l-2.4 2.4-2.1-.5-.5-2.1z'/></svg>"); }
.mega .mi-link[href*="#operate"]::before{  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M10 8.5l6 3.5-6 3.5z'/></svg>"); }
.mega .mi-link[href*="#manage"]::before{   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 21H3V3'/><path d='M7 15l4-5 3 3 5-7'/></svg>"); }

/* ---------- hero visual: enlarge the product screen (bigger, same ratio) ---------- */
.hero .split.wide-l{ grid-template-columns:1fr 1fr !important; gap:44px; align-items:center; }
@media (max-width:960px){ .hero .split.wide-l{ grid-template-columns:1fr !important; gap:30px; } }

/* ---------- wider content container on large / ultrawide screens ---------- */
:root{ --wrap:1560px; }
@media (min-width:1700px){ :root{ --wrap:1720px; } }
@media (min-width:2100px){ :root{ --wrap:1960px; } }
@media (min-width:2800px){ :root{ --wrap:2200px; } }

/* ============================================================
   Visual polish pass — UI only (no content/layout changes):
   richer module tiles, softer card hovers, button sheen,
   livelier icon chips, crisper focus.
   ============================================================ */

/* module tiles — premium surface + lively hover */
.eco .mod{
  background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--acc) 4%, var(--card)));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.eco .mod:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 44px -22px rgba(11,31,74,.32), 0 6px 16px -10px rgba(11,31,74,.16);
  border-color:color-mix(in srgb, var(--acc) 42%, var(--border));
}
.eco .mod .mi{ box-shadow:0 8px 16px -6px rgba(11,31,74,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .22s cubic-bezier(.2,.7,.2,1); }
.eco .mod:hover .mi{ transform:scale(1.08) rotate(-3deg); }

/* generic cards — softer, deeper layered lift */
.card, .bt, .mcard, .reccard, .impcard{ border-radius:16px; }
.card.hoverable:hover, .bento .bt:hover, .mcard:hover{
  box-shadow:0 28px 50px -24px rgba(11,31,74,.32), 0 8px 18px -12px rgba(11,31,74,.16) !important;
}

/* primary button — subtle light sweep on hover */
.btn-p{ position:relative; overflow:hidden; isolation:isolate; }
.btn-p::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.30) 50%, transparent 68%);
  transform:translateX(-130%); transition:transform .6s ease; }
.btn-p:hover::after{ transform:translateX(130%); }

/* secondary/ghost buttons — cleaner hover */
.btn-w:hover, .btn-t:hover{ transform:translateY(-1px); }
.btn-w{ transition:transform .16s ease, background .16s ease, border-color .16s ease; }

/* pill chips (audience tabs, value props) — hairline + hover tint */
.pftab-nav button{ transition:background .16s ease, color .16s ease, box-shadow .16s ease; }
.pftab-nav button.on{ box-shadow:0 6px 16px -8px rgba(14,165,233,.5); }

/* keyboard focus — consistent, on-brand ring */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 45%, transparent); border-radius:8px;
}

/* eyebrow — a touch crisper */
.eyebrow{ opacity:.96; }


/* ---------- RTL: keep Latin runs from bidi-reordering ----------
   In Arabic the brand lockup rendered as "TechCorevio" and the phone number as
   "07444 98104 91+". Both are Latin strings inside an RTL paragraph, so the
   bidi algorithm reverses their parts. Isolating them fixes the order without
   moving where they sit on the page. The consent notice is still English-only,
   so it is rendered as the LTR text it is until it is translated. */
[dir="rtl"] .brand,
[dir="rtl"] .phone,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"]{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .cookie{ direction:ltr; text-align:left; }


/* ---------- hero photo + the two floating cards ----------
   The hero used to autoplay a 3.2 MB UI loop that was illegible at this size;
   the 1:58 film directly below does that job properly. A photograph carries the
   claim, and the two cards — both already styled in styles.css for all three
   themes, and hidden below 900px — carry the proof. */
.herovis .photoframe{ position:relative; z-index:2; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background:#08152b; box-shadow:var(--shadow-lg); }
.herovis .photoframe img{ display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; }

.float-badge{ left:-12px; right:auto; top:-14px; bottom:auto; }

/* The tagline sits inside the artwork, which is drawn with clear sky in the
   top-right for exactly this. It is HTML, not baked into the SVG, so it
   translates, stays sharp and reflows — the same reason the logo is a chip. */
.hero-tag{ position:absolute; z-index:3; right:26px; top:24px; margin:0; text-align:right;
  font-family:var(--font-display); font-weight:800; font-size:clamp(15px,1.35vw,19px);
  letter-spacing:.2px; color:#EAF3FF; text-shadow:0 2px 14px rgba(3,12,30,.55); }
.hero-tag em{ font-style:normal; color:#FBBF24; }
@media (max-width:900px){ .hero-tag{ right:14px; top:12px; font-size:13px; } }

/* The company strip sits along the foot of the picture, on a scrim that fades
   up into it, rather than as a white card dropped on top. Inside .photoframe,
   so overflow:hidden clips it to the frame's rounded corners. */
.float-ui{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0 20px;
  padding:34px 24px 17px;
  background:linear-gradient(to top, rgba(5,15,34,.93) 0%, rgba(5,15,34,.80) 52%,
                                     rgba(5,15,34,0) 100%); }
.float-ui b{ display:block; font-family:var(--font-display); font-weight:800;
  font-size:24px; line-height:26px; letter-spacing:-.7px; color:#fff; }
.float-ui b.tx{ font-size:15px; line-height:26px; letter-spacing:-.1px; }
.float-ui span{ display:block; margin-top:5px; font-size:9px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase; color:#74C9F6; }
@media (max-width:900px){
  .float-ui{ grid-template-columns:1fr 1fr; gap:11px 16px; padding:26px 16px 14px; }
  .float-ui b{ font-size:19px; line-height:21px; }
  .float-ui b.tx{ font-size:13px; line-height:21px; }
  .float-ui span{ font-size:8.5px; margin-top:3px; }
}
[data-theme="charcoal"] .float-ui .kpis b,
[data-theme="pathfinder"] .float-ui .kpis b,
[data-theme="charcoal"] .float-ui .cap b,
[data-theme="pathfinder"] .float-ui .cap b{ color:var(--navy); }

/* Two contact numbers in the header. The row already hides below 1280px, so
   the pair only ever renders where there is room for it. */
.nav .phone{ display:flex; align-items:center; gap:9px; white-space:nowrap; }
.nav .phone a{ color:inherit; text-decoration:none; }
.nav .phone a:hover{ color:var(--navy); }
.nav .phone a + a::before{ content:"·"; margin-right:9px; color:#BFCEE2; }
[dir="rtl"] .nav .phone a{ direction:ltr; unicode-bidi:isolate; }
/* styles.css hides this row below 1280px; the display:flex above would
   otherwise win on load order and push both numbers off a phone screen. */
@media (max-width:1280px){ .nav .phone{ display:none; } }
/* Between 1281 and 1440 the nav is tight enough that a second number makes
   "Field apps" and "Why us" wrap to two lines, so only the first shows. */
@media (max-width:1440px){ .nav .phone a + a{ display:none; } }