/* =========================================================
   MOBIVITY — Website v8 (one continuous page: seamless artwork, no section cuts; capability strip)
   Built on the Mobivity Brand Guidelines (revised typography, Sep 2026)
   Display: Lastica (UPPERCASE only — titles, section numbers, kickers,
            key figures, service signature; never body, never below 12px)
   Text:    Inter (Light on dark, Regular, Medium sub-headings, Bold sparingly)
   ========================================================= */

/* ---------- 1. Fonts ---------- */
@font-face { font-family: "Lastica"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/lastica-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-style: italic; font-display: swap; src: url("../assets/fonts/inter-lightitalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-bold.woff2") format("woff2"); }

/* ---------- 2. Brand colours (change here only) ---------- */
:root {
  --header-top: 104px;  /* taller header at the very top so the full logo fits */
  /* Primary */
  --blue: #38B6FF;        /* Mobivity Blue — accent only */
  --charcoal: #333333;
  --slate: #545454;
  --white: #FFFFFF;
  /* Secondary */
  --deep-blue: #0B6FA4;
  --midnight: #0E1A24;    /* main background */
  --mid-grey: #A6A6A6;    /* captions */
  --light-grey: #F2F4F5;

  --midnight-2: #13222F;  /* slightly lifted midnight for cards */
  --line: rgba(255,255,255,.1);
  --text: rgba(255,255,255,.86);

  --font: "Inter", Arial, sans-serif;           /* text */
  --font-display: "Lastica", "Inter", Arial, sans-serif;  /* display — uppercase only */
  --ease: cubic-bezier(.77, 0, .18, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 84px;
  --gutter: clamp(20px, 5vw, 60px);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--text);
  background: var(--midnight);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--white); font-weight: 500; line-height: 1.2; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--blue); color: var(--charcoal); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
svg use { pointer-events: none; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(90px, 12vw, 160px) 0; overflow: hidden; }

/* ---------- 4. Type system (brand hierarchy) ---------- */
.kicker {
  font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.k-ico { width: 18px; height: 18px; fill: currentColor; flex: none; margin-right: -4px; }
.display {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(24px, 3.4vw, 48px); line-height: 1.22; margin-bottom: 30px;
}
.lead { font-size: clamp(17px, 1.4vw, 21px); color: var(--white); line-height: 1.6; }
.tagline { font-style: italic; color: var(--blue); font-weight: 300; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(44px, 6vw, 80px); flex-wrap: wrap; }
.section-head .display { margin-bottom: 0; }
.section-intro { max-width: 420px; color: var(--mid-grey); margin: 0; }
/* Stacked head: kicker → title → intro, one under the other */
.section-head.stacked { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
.section-head.stacked .display { margin-bottom: 18px; }
.section-head.stacked .section-intro { max-width: 640px; font-size: clamp(15px, 1.15vw, 18px); }
@media (min-width: 900px) { .display.one-line { white-space: nowrap; } }

/* Icon circle — the brand motif: white glyph in a Mobivity Blue circle, glyph = 55% */
.icon-circle {
  --s: 48px;
  flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--blue); display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(56,182,255,.4); transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.icon-circle svg { width: 55%; height: 55%; fill: var(--white); }
.icon-circle svg.ico-wa { width: 48%; height: 48%; }  /* v9: WhatsApp glyph has no built-in padding, so slightly smaller to match the Material icons */
.icon-circle.lg { --s: 64px; }
.icon-circle.dark { background: var(--charcoal); }
.icon-circle.sm { --s: 38px; }

/* ---------- 5. Buttons ---------- */
.btn {
  --bx: 0px; --by: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px; border-radius: 100px; overflow: hidden; isolation: isolate;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transform: translate(var(--bx), var(--by)); transition: transform .4s var(--ease-out), color .4s, border-color .4s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn::before { /* fill that sweeps in on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: none; }
/* Charcoal on Blue (never white on blue — guideline) */
.btn-primary { background: var(--blue); color: var(--charcoal); }
.btn-primary::before { background: var(--white); }
.btn-ghost { border: 1px solid rgba(255,255,255,.4); color: var(--white); }
.btn-ghost::before { background: var(--white); }
.btn-ghost:hover { color: var(--charcoal); border-color: var(--white); }
.btn-block { width: 100%; }

/* ---------- 6. Intro screen ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200; background: var(--midnight);
  display: grid; place-items: center; pointer-events: none;
  transition: clip-path 1s var(--ease) .1s; clip-path: inset(0 0 0 0);
}
.intro-logo { width: min(420px, 78vw); opacity: 0; transform: translateY(20px) scale(.9); animation: introMark .9s var(--ease-out) .1s forwards; }
.intro-line { position: absolute; left: 50%; bottom: 40%; width: 160px; height: 1px; margin-left: -80px; background: rgba(255,255,255,.12); overflow: hidden; }
.intro-line::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; animation: introLine 1s var(--ease) .2s forwards; }
.is-loaded .intro { clip-path: inset(0 0 100% 0); }
.no-js .intro { display: none; }
@keyframes introMark { to { opacity: 1; transform: none; } }
@keyframes introLine { to { transform: scaleX(1); } }

/* ---------- 7. Mouse pointer & scroll route ----------
   The pointer is a real system cursor with a brand image, so it moves at the
   exact speed of the Windows / Mac mouse (no lag). */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("../assets/images/cursor.png") 16 16, auto; }
  a, button, select, label, [role="tab"], .tilt, .point, .field select { cursor: url("../assets/images/cursor-hover.png") 16 16, pointer; }
  input, textarea { cursor: text; }
}
.route-progress { position: fixed; right: 18px; top: 50%; z-index: 90; width: 2px; height: 34vh; transform: translateY(-50%); background: rgba(255,255,255,.1); border-radius: 2px; }
.route-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(var(--deep-blue), var(--blue)); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 2px; }
.route-dot { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--white); box-shadow: 0 0 12px var(--blue); }

/* ---------- 8. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-top);
  display: flex; align-items: center;
  transition: background-color .4s, height .4s var(--ease-out), transform .5s var(--ease), backdrop-filter .4s;
}
.site-header.is-scrolled { height: 70px; background: rgba(14,26,36,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
/* Primary horizontal lockup (guideline) at the top; switches to the mark only once scrolled */
.brand { min-height: 44px; }
.brand-logo { width: 290px; height: auto; transition: opacity .4s, transform .5s var(--ease-out); transform-origin: left center; }
.brand-mark { position: absolute; left: 0; top: 50%; width: 46px; height: auto; opacity: 0; transform: translateY(-50%) scale(.8); transition: opacity .4s, transform .5s var(--ease-out); }
.site-header.is-scrolled .brand-logo { opacity: 0; transform: scale(.85); }
.site-header.is-scrolled .brand-mark { opacity: 1; transform: translateY(-50%); }
.menu-open .brand-logo { opacity: 1; transform: none; }
.menu-open .brand-mark { opacity: 0; }

.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav-link {
  position: relative; font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.8); padding: 8px 0; transition: color .3s;
}
.nav-ico { display: none; }
@media (min-width: 1280px) { .main-nav .nav-link { white-space: nowrap; } }
.nav-film { display: inline-flex; align-items: center; gap: 6px; }
.nav-film .nav-ico { display: block; width: 14px; height: 14px; fill: var(--blue); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-link:hover, .nav-link.is-current { color: var(--white); }
.nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: 10px 22px; border: 1px solid var(--blue); border-radius: 100px; color: var(--white); }
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--blue); color: var(--charcoal); }

.menu-toggle { display: none; position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--white); transition: transform .45s var(--ease), top .45s var(--ease); }
.menu-toggle span:nth-child(1) { top: 18px; }
.menu-toggle span:nth-child(2) { top: 26px; }
.menu-open .menu-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* ---------- 9. Hero slider ---------- */
.hero { position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--midnight); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(14,26,36,0), var(--midnight)); }
.hero-slides, .slide, .slide-media, .slide-poster, .slide-video { position: absolute; inset: 0; }
.slide { z-index: 1; visibility: hidden; }
.slide.is-active, .slide.is-leaving { visibility: visible; }
.slide.is-leaving { z-index: 1; }
.slide.is-active { z-index: 3; }
/* Mask wipe: diagonal edge sweeping from right to left */
.slide.is-entering { animation: wipeIn 1.25s var(--ease) both; }
.wipe-accent { position: absolute; inset: 0; z-index: 2; background: linear-gradient(110deg, var(--deep-blue), var(--blue)); clip-path: polygon(115% 0, 115% 0, 100% 100%, 100% 100%); pointer-events: none; }
.wipe-accent.is-running { animation: wipeAccent 1.25s var(--ease) both; }
.hero.go-back .slide.is-entering { animation-name: wipeInBack; }
.hero.go-back .wipe-accent.is-running { animation-name: wipeAccentBack; }
@keyframes wipeIn { from { clip-path: polygon(115% 0, 115% 0, 100% 100%, 100% 100%); } 15% { clip-path: polygon(115% 0, 115% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(0 0, 115% 0, 100% 100%, -15% 100%); } }
@keyframes wipeAccent { from { clip-path: polygon(115% 0, 115% 0, 100% 100%, 100% 100%); } 85% { clip-path: polygon(0 0, 115% 0, 100% 100%, -15% 100%); } to { clip-path: polygon(0 0, 115% 0, 100% 100%, -15% 100%); } }
@keyframes wipeInBack { from { clip-path: polygon(-15% 0, -15% 0, 0 100%, 0 100%); } 15% { clip-path: polygon(-15% 0, -15% 0, 0 100%, 0 100%); } to { clip-path: polygon(-15% 0, 100% 0, 115% 100%, 0 100%); } }
@keyframes wipeAccentBack { from { clip-path: polygon(-15% 0, -15% 0, 0 100%, 0 100%); } 85% { clip-path: polygon(-15% 0, 100% 0, 115% 100%, 0 100%); } to { clip-path: polygon(-15% 0, 100% 0, 115% 100%, 0 100%); } }

.slide-media { overflow: hidden; }
.slide-poster { background-size: cover; background-position: center; }
.slide-poster, .slide-video { transform: scale(1.06); }
.slide.is-active .slide-poster, .slide.is-active .slide-video { animation: heroZoom 9s var(--ease-out) both; }
@keyframes heroZoom { from { transform: scale(1.32); } to { transform: scale(1.04); } }
.slide-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.slide-video.is-ready { opacity: 1; }
/* Charcoal/midnight overlay 30–70% behind text (guideline) + cool blue grade */
.slide-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,26,36,.88) 0%, rgba(14,26,36,.55) 45%, rgba(14,26,36,.2) 100%),
    linear-gradient(0deg, rgba(14,26,36,.9) 0%, rgba(14,26,36,0) 40%),
    rgba(0,0,0,.4);   /* black transparent overlay (v5) — calms the photo behind the text */
}

.hero-canvas { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .7; }

.slide-content { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; padding-top: calc(var(--header-top) + 28px); padding-bottom: 150px; overflow: hidden; }
.slide-kicker { opacity: 0; transform: translateY(20px); transition: opacity .8s, transform .8s var(--ease-out); }
.slide-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.14;
  font-size: clamp(26px, min(5vw, 8.5vh), 76px); margin-bottom: 28px;
}
.slide-title .word { display: inline-block; white-space: nowrap; }
.slide-title .char { display: inline-block; opacity: 0; transform: translateY(110%) rotate(6deg); filter: blur(6px); transition: transform 1s var(--ease-out), opacity .8s, filter .8s; transition-delay: calc(var(--i) * 28ms + .45s); }
.slide-text { max-width: 560px; font-size: clamp(16px, 1.4vw, 20px); color: rgba(255,255,255,.85); opacity: 0; transform: translateY(24px); transition: opacity .9s .9s, transform .9s var(--ease-out) .9s; }
.slide-text.tagline { color: var(--blue); font-size: clamp(18px, 1.7vw, 24px); }
.slide-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; opacity: 0; transform: translateY(24px); transition: opacity .9s 1.05s, transform .9s var(--ease-out) 1.05s; }
.slide.is-active .slide-kicker, .slide.is-active .slide-text, .slide.is-active .slide-actions { opacity: 1; transform: none; }
.slide.is-active .slide-kicker { transition-delay: .35s; }
.slide.is-active .char { opacity: 1; transform: none; filter: none; }

/* Controls */
.hero-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding-bottom: clamp(22px, 4vh, 40px); }
.hero-controls-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.hero-tabs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(10px, 2vw, 26px); }
.hero-tab { text-align: left; padding: 12px 0 0; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; position: relative; transition: color .3s; }
.hero-tab::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.2); }
.hero-tab .bar { position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--blue); }
.hero-tab.is-done .bar { transform: scaleX(1); opacity: .45; }
.hero-tab:hover, .hero-tab.is-active { color: var(--white); }
.hero-buttons { display: flex; gap: 10px; }
.hero-arrow, .hero-play { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.hero-arrow svg, .hero-play svg { width: 18px; height: 18px; fill: var(--white); }
#heroPrev svg { transform: rotate(180deg); }
.hero-arrow:hover, .hero-play:hover { border-color: var(--blue); background: rgba(56,182,255,.15); }
.hero-play .icon-play { display: none; }
.hero.is-paused .hero-play .icon-play { display: block; }
.hero.is-paused .hero-play .icon-pause { display: none; }

.scroll-hint { position: absolute; right: var(--gutter); top: 50%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translateY(-50%); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); writing-mode: vertical-rl; }
.scroll-hint i { position: relative; width: 1px; height: 70px; background: rgba(255,255,255,.2); overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--blue); animation: scrollDrop 2s var(--ease) infinite; }
@keyframes scrollDrop { to { top: 100%; } }

/* ---------- 10. Marquee band ---------- */
/* Capability strip — small, slow, edges dissolve into the page */
.ticker { position: relative; z-index: 1; overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; }
.ticker-group span { font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; transition: color .3s; }
.ticker-group span:hover { color: var(--white); }
.tk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- 11. Motion-line canvas (sections) ---------- */
.motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.page-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; opacity: .38; }  /* v16: calmer (5 lines instead of 12) */
main, .site-footer { position: relative; z-index: 1; }
.section { background: transparent !important; }
.section > .container { position: relative; z-index: 1; }

/* ---------- 12. About ---------- */
.about { background: var(--midnight); }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.feature-list { margin-top: 44px; display: grid; gap: 4px; }
.feature { display: flex; gap: 22px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); transition: padding-left .5s var(--ease-out); }
.feature:hover { padding-left: 10px; }
.feature:hover .icon-circle { box-shadow: 0 0 0 8px rgba(56,182,255,.15); transform: scale(1.05); }
.feature h3 { font-size: 17px; margin-bottom: 4px; }
.feature p { margin: 0; color: var(--mid-grey); font-size: 15px; }
.about-visual { position: sticky; top: 110px; }
.about-image { margin: 0; position: relative; }
/* The skyline photo has a transparent sky, so it sits directly on the page; edges fade out — nothing is cropped or covered */
.about-image img { width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.pull-quote { position: relative; margin: 34px 0 0; padding: 38px 36px 34px 40px; background: rgba(19,34,47,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 460px; border-left: 2px solid var(--blue); }
.quote-mark { position: absolute; top: -44px; left: 26px; font-size: 130px; line-height: 1; color: var(--blue); font-weight: 500; font-family: var(--font); }
.pull-quote p { margin: 0; font-weight: 500; color: var(--white); font-size: 19px; line-height: 1.5; }

/* ---------- 13. Values ---------- */
.values { background: var(--midnight); }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; perspective: 1200px; }
.value-card {
  position: relative; padding: 44px 28px 40px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, rgba(56,182,255,.08) 0%, rgba(19,34,47,.72) 55%); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
}
/* Big letter: centred, filled with Mobivity Blue and glowing (neon) */
.value-letter { display: block; font-family: var(--font-display); font-size: 120px; font-weight: 400; line-height: 1; height: 1em;
  color: var(--blue); text-shadow: 0 0 14px rgba(56,182,255,.75), 0 0 36px rgba(56,182,255,.45), 0 0 70px rgba(56,182,255,.25);
  transform: translateZ(40px); transition: transform .8s var(--ease-out), text-shadow .6s; margin-bottom: 26px; }
.value-card:hover .value-letter { transform: translateZ(60px) translateY(-6px); text-shadow: 0 0 18px rgba(56,182,255,.95), 0 0 48px rgba(56,182,255,.6), 0 0 90px rgba(56,182,255,.35); }
/* Icon centred under the letter; titles all start on the same line */
.value-card .icon-circle { margin: 0 0 24px; }
.value-card h3 { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.value-card p { margin: 0; font-size: 15px; color: rgba(255,255,255,.82); }
.excellence-bar { margin-top: 20px; display: flex; align-items: center; gap: 24px; padding: 22px 28px; border-radius: 6px; background: var(--blue); color: var(--charcoal); }
.excellence-bar strong { font-family: var(--font-display); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.excellence-bar p { margin: 0; font-style: italic; font-weight: 300; }

/* Shared tilt + spotlight */
.tilt { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease-out), box-shadow .6s; will-change: transform; }
.tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(56,182,255,.22), transparent 45%); opacity: 0; transition: opacity .4s; }
.tilt:hover::before { opacity: 1; }
.tilt.is-tilting { transition: transform .12s linear, box-shadow .6s; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.tilt.is-tilting .icon-circle { transform: translateZ(30px); box-shadow: 0 0 0 8px rgba(56,182,255,.15); }

/* ---------- 14. Services ---------- */
.services { background: var(--midnight); }
.services-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); }
.services-bg img { width: 100%; height: 130%; object-fit: cover; opacity: .16; filter: grayscale(.3); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1200px; }
.service-card {
  position: relative; padding: 40px 34px; border-radius: 6px;
  background: rgba(19,34,47,.72); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.service-card::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.service-card:hover::after { transform: scaleX(1); }
.service-top { display: flex; align-items: flex-start; margin-bottom: 26px; }
.service-card h3 { font-size: 22px; font-weight: 500; color: var(--blue); margin-bottom: 22px; }
.service-card li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line); font-size: 15px; color: rgba(255,255,255,.85); }
.service-card li::before { content: ""; position: absolute; left: 0; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* ---------- 15. Commitment ---------- */
.commitment { background: var(--midnight); }
.commitment .lead { color: var(--white); }
.commitment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.commitment-points { margin-top: 36px; }
.point { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); transition: background .4s, padding .4s var(--ease-out); cursor: default; }
.point h3 { font-size: 18px; margin-bottom: 4px; }
.point p { margin: 0; font-size: 15px; color: rgba(255,255,255,.9); }
.point.is-hot { padding-left: 14px; background: linear-gradient(90deg, rgba(14,26,36,.35), transparent); }
.point .icon-circle { opacity: .55; transition: opacity .4s, box-shadow .4s, transform .4s var(--ease-out); }
.point.is-hot .icon-circle { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(56,182,255,.18); }

/* Diagram: everything is drawn on one 400×400 grid so lines meet the circles exactly.
   Node centres sit ON the outer ring: Advisory (200,20) · Planning (355.9,290) · Design & Engineering (44.1,290) */
.pillars { position: relative; width: min(calc(100% - 90px), 460px); aspect-ratio: 1; margin: 60px auto 80px; }
.pillars-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pillars-lines .ring { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 1131; stroke-dashoffset: 1131; transition: stroke-dashoffset 2.2s var(--ease); }
.pillars-lines .ring-inner { fill: none; stroke: rgba(56,182,255,.45); stroke-width: 1; stroke-dasharray: 4 8; opacity: 0; transition: opacity 1s 1s;
  transform-box: view-box; transform-origin: 200px 200px; animation: spin 50s linear infinite; }
.pillars-lines .spoke { stroke: rgba(56,182,255,.35); stroke-width: 1.5; stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 1.2s var(--ease) 1s; }
.pillars-lines .spoke-trace { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset .45s ease-in; filter: drop-shadow(0 0 5px rgba(56,182,255,.9)); }
.pillars-lines .core-glow { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 591; stroke-dashoffset: 591;
  transform-box: view-box; transform-origin: 200px 200px; transform: rotate(-90deg); transition: stroke-dashoffset .45s ease-in; filter: drop-shadow(0 0 8px rgba(56,182,255,.9)); }
.pillars-lines .traveller { fill: var(--white); opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 6px var(--blue)); }
.pillars.in .ring { stroke-dashoffset: 0; }
.pillars.in .ring-inner { opacity: 1; }
.pillars.in .spoke { stroke-dashoffset: 0; }
.pillars.in .traveller { opacity: 1; }
.pillars.dot-hidden .traveller { opacity: 0; }
/* Finale: lines trace from each circle into the centre, one after another */
.pillars.finale .spoke-trace { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.pillars.finale .spoke-trace:nth-of-type(4) { transition-delay: .0s; }
.pillars.finale .spoke-trace:nth-of-type(5) { transition-delay: .35s; }
.pillars.finale .spoke-trace:nth-of-type(6) { transition-delay: .7s; }
.pillars.core-on .core-glow { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease); }
.pillars.static .spoke-trace, .pillars.static .core-glow { stroke-dashoffset: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.pillar-node { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .6s; }
.pillar-node .icon-circle { --s: 62px; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 8px var(--midnight); transition: transform .35s var(--ease-out), box-shadow .35s; }
.pillar-node em { position: absolute; left: 0; top: calc(var(--s, 62px) / 2 + 14px); transform: translateX(-50%); width: max-content; max-width: 150px; text-align: center; line-height: 1.5;
  font-style: normal; font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--white);
  background: none; padding: 0; }  /* v9: no fill behind the labels (it was covering the white ring) */
.pillar-node.label-top em { top: auto; bottom: calc(var(--s, 62px) / 2 + 14px); }
/* v9: bottom labels lean outwards so the white ring never runs through the text (no fill behind them any more) */
.pillar-node.n1 em, .pillar-node.n2 em { top: calc(var(--s, 62px) / 2 + 24px); }
.pillar-node.n1 em { transform: translateX(-30%); }
.pillar-node.n2 em { transform: translateX(-70%); }
.pillar-node.n0 { left: 50%; top: 5%; }
.pillar-node.n1 { left: 88.97%; top: 72.5%; }
.pillar-node.n2 { left: 11.03%; top: 72.5%; }
.pillars.in .pillar-node { opacity: 1; }
.pillars.in .n0 { transition-delay: 1.3s; } .pillars.in .n1 { transition-delay: 1.45s; } .pillars.in .n2 { transition-delay: 1.6s; }
/* "Pop" when the white dot arrives */
.pillar-node.is-hot .icon-circle { transform: translate(-50%, -50%) scale(1.22); box-shadow: 0 0 0 8px var(--midnight), 0 0 0 15px rgba(56,182,255,.45), 0 0 30px rgba(56,182,255,.6); }
/* Finale: all circles light up in turn */
.pillars.finale .pillar-node .icon-circle { box-shadow: 0 0 0 8px var(--midnight), 0 0 0 12px rgba(56,182,255,.5), 0 0 26px rgba(56,182,255,.7); transition-duration: .5s; }
.pillars.finale .n1 .icon-circle { transition-delay: .35s; }
.pillars.finale .n2 .icon-circle { transition-delay: .7s; }
.pillar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--midnight-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 0 0 1px rgba(56,182,255,.35), 0 0 40px rgba(56,182,255,.18); transition: box-shadow .8s; }
.pillars.core-on .pillar-center { box-shadow: 0 0 0 1px rgba(56,182,255,.8), 0 0 70px rgba(56,182,255,.5); }
.pillar-center img { width: 42%; height: auto; }
.pillar-center span { font-family: var(--font-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--white); font-weight: 400; }

/* ---------- 16. Contact ---------- */
.contact { background: var(--midnight); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 30px 24px; margin-top: 44px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list h3 { font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.contact-list a, .contact-list p { margin: 0; color: var(--white); font-size: 15px; overflow-wrap: anywhere; transition: color .3s; }
.contact-list a:hover { color: var(--blue); }
.contact-list li:hover .icon-circle { box-shadow: 0 0 0 8px rgba(56,182,255,.15); }

.contact-form { background: var(--midnight-2); padding: clamp(28px, 4vw, 48px); border-radius: 6px; border: 1px solid var(--line); }
.form-title { font-size: 20px; margin-bottom: 26px; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field { position: relative; display: block; margin-bottom: 22px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 22px 0 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); background: transparent;
  color: var(--white); font: 400 15px/1.5 var(--font); border-radius: 0; resize: vertical; outline: none; transition: border-color .3s;
  cursor: text;
}
.field select { cursor: pointer; appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2338B6FF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right center / 22px; }
.field select option { background: var(--midnight-2); color: var(--white); }
.field span { position: absolute; left: 0; top: 22px; font-size: 14px; color: var(--mid-grey); pointer-events: none; transition: transform .35s var(--ease-out), color .3s, font-size .35s; transform-origin: left; }
.field input:focus ~ span, .field input:not(:placeholder-shown) ~ span,
.field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span,
.field-select span { transform: translateY(-22px) scale(.82); color: var(--blue); letter-spacing: .06em; }
.field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.field-select::after { bottom: 0; }
.field:focus-within::after { transform: scaleX(1); }
.field.has-error input, .field.has-error textarea { border-bottom-color: #ff8a80; }
.field textarea { min-height: 110px; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 16px 0 0; min-height: 1.5em; font-size: 14px; }
.form-status.ok { color: var(--blue); }
.form-status.err { color: #ff8a80; }

/* ---------- 17. Footer ---------- */
.site-footer { background: transparent; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 80px; padding-bottom: 70px; }
.footer-about { color: rgba(255,255,255,.75); font-size: 15px; max-width: 340px; margin: 0; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--blue); margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,.75); font-size: 15px; transition: color .3s, transform .3s var(--ease-out); width: fit-content; }
.footer-col a:hover { color: var(--white); transform: translateX(4px); }
.socials { display: flex; gap: 10px; margin-bottom: 8px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; transition: transform .4s var(--ease-out), background .3s; }
.socials a:hover { transform: translateY(-4px); background: var(--white); }
.socials svg { width: 18px; height: 18px; fill: var(--white); transition: fill .3s; }
.socials a:hover svg { fill: var(--charcoal); }
.footer-band { background: linear-gradient(180deg, rgba(19,34,47,0), rgba(19,34,47,.85) 40%); }
.footer-band-inner { display: flex; align-items: center; gap: 30px; padding-top: 34px; padding-bottom: 30px; }
.band-logo { width: 190px; height: auto; flex: none; }
.band-signature { margin: 0 0 6px; font-family: var(--font-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--white); font-weight: 400; }
.band-tagline { margin: 0; color: var(--blue); }  /* blue on Midnight passes contrast (guideline 7.8:1) */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 26px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; color: rgba(255,255,255,.75); }
.footer-bottom p { margin: 0; }
.to-top { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; transition: background .3s, transform .4s var(--ease-out); }
.to-top svg { width: 18px; height: 18px; fill: var(--white); transform: rotate(-45deg); }
.to-top:hover { background: var(--blue); transform: translateY(-4px); }

/* ---------- 18. Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .display.reveal { letter-spacing: .14em; transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out), letter-spacing 1.6s var(--ease-out); }
.js .display.reveal.in { letter-spacing: .02em; }
.js .value-card.reveal, .js .service-card.reveal { transform: translateY(70px) rotateX(-12deg); }
.js .value-card.reveal.in, .js .service-card.reveal.in { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.js .reveal-mask { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
.js .reveal-mask img { transform: scale(1.3); transition: transform 1.8s var(--ease-out); }
.js .reveal-mask.in { clip-path: inset(0 0 0 0); }
.js .reveal-mask.in img { transform: scale(1); }

.js .tilt.reveal.in { transition: opacity 1s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s), box-shadow .6s; }
.js .tilt.reveal.in.is-tilting { transition: transform .12s linear, box-shadow .6s; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1100px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
/* v21: the menu button (burger) is used below 1280px wide - the top menu has 6 items now ("Mobivity in one minute" added) */
@media (max-width: 1279px) {
  .menu-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    padding: 100px var(--gutter) 60px; background: var(--midnight);
    clip-path: circle(0 at calc(100% - 45px) 36px); transition: clip-path .8s var(--ease); visibility: hidden;
  }
  .menu-open .main-nav { clip-path: circle(150% at calc(100% - 45px) 36px); visibility: visible; }
  .main-nav .nav-link { font-family: var(--font-display); font-size: clamp(22px, 6vw, 34px); font-weight: 400; letter-spacing: .02em; color: var(--white); display: flex; align-items: center; gap: 18px; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s var(--ease-out); }
  .main-nav .nav-ico { display: block; width: 26px; height: 26px; fill: var(--blue); flex: none; align-self: center; }
  .main-nav .nav-link::after { display: none; }
  .menu-open .main-nav .nav-link { opacity: 1; transform: none; }
  .menu-open .main-nav .nav-link:nth-child(1) { transition-delay: .25s; }
  .menu-open .main-nav .nav-link:nth-child(2) { transition-delay: .31s; }
  .menu-open .main-nav .nav-link:nth-child(3) { transition-delay: .37s; }
  .menu-open .main-nav .nav-link:nth-child(4) { transition-delay: .43s; }
  .menu-open .main-nav .nav-link:nth-child(5) { transition-delay: .49s; }
  .menu-open .main-nav .nav-link:nth-child(6) { transition-delay: .55s; }
  .main-nav .nav-film .nav-ico { width: 26px; height: 26px; }
  .nav-cta { border: 0; padding: 8px 0; }
  .nav-cta:hover { background: none; color: var(--blue); }
  .menu-open { overflow: hidden; }
  .menu-open .site-header { background: transparent; backdrop-filter: none; border-color: transparent; }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; --header-top: 84px; }

  .about-grid, .commitment-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-visual { position: relative; top: 0; }
  .pull-quote { margin: 30px 0 0; }
  .service-grid { grid-template-columns: 1fr; }
  .scroll-hint, .route-progress { display: none; }
}
@media (max-width: 640px) {
  .brand-logo { width: 200px; }
  .brand-mark { width: 40px; }
  .slide-content { padding-top: calc(var(--header-top) + 18px); padding-bottom: 150px; }
  .slide-title { font-size: clamp(24px, 7.2vw, 34px); margin-bottom: 18px; }
  .slide-text { font-size: 15px; }
  .slide-text.tagline { font-size: 17px; }
  .slide-actions { gap: 10px; margin-top: 10px; }
  .slide-title { letter-spacing: .01em; }
  .slide-actions .btn { padding: 12px 18px; font-size: 11.5px; gap: 8px; }
  .hero-controls-inner { flex-wrap: wrap; row-gap: 14px; }
  .hero-tabs { flex-basis: 100%; order: 2; }
  .hero-tab { font-size: 10px; letter-spacing: .08em; }
  .hero-buttons { order: 1; margin-left: auto; }
  .hero-arrow, .hero-play { width: 40px; height: 40px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-letter { font-size: 100px; }
  .excellence-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .form-row, .contact-list { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 34px; }
  .footer-band-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-bottom { flex-direction: row; }
  .pull-quote { margin: 26px 0 0; }
  .pillar-node { --s: 48px; }
  .pillar-node .icon-circle { --s: 48px; box-shadow: 0 0 0 6px var(--midnight); }
  .pillar-node em { letter-spacing: 0; max-width: 120px; }
  .pillar-node.n1 em, .pillar-node.n2 em { top: calc(var(--s, 48px) / 2 + 28px); }
  .pillar-node.n1 em { transform: translateX(-36%); }
  .pillar-node.n2 em { transform: translateX(-64%); }
  .pillars { width: min(calc(100% - 70px), 360px); margin: 50px auto 70px; }
  .pillar-center { gap: 6px; }
  .pillar-center span { font-size: 12px; letter-spacing: .02em; }
}

/* ---------- v11: Our story film (after the ticker) ---------- */
#film { scroll-margin-top: 40px; }
.film { padding-bottom: clamp(30px, 5vw, 70px); }
.film-head { text-align: center; }
.film-head .kicker { justify-content: center; }
.film-head .display { margin-bottom: clamp(26px, 3vw, 40px); }
/* v17: film frame. Before play: semi-transparent panel, so the cover blends with the page but still reads as a frame */
.film-frame {
  position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden;
  background: rgba(19,34,47,.55); box-shadow: 0 0 0 1px rgba(56,182,255,.16);
  transition: background .6s, box-shadow .6s;
}
.film-frame.is-started { background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(56,182,255,.22); }
/* YouTube player: hidden until the film is actually playing, then fades in (no YouTube thumbnail / buttons flash) */
.film-player, .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* v20: the YouTube player is made twice as tall as the frame and centred. The film still fills the frame exactly
   (YouTube fits it to the width), while YouTube's own corner buttons / title / logo sit in the extra space,
   which the frame crops away (overflow: hidden). */
.film-frame iframe { top: -50%; height: 200%; }
.film-frame iframe { opacity: 0; transition: opacity .7s ease; }
.film-frame.is-started iframe { opacity: 1; }
.film-frame.is-paused iframe { opacity: 0; }  /* v20: paused = the cover on a clean black stage (no YouTube still / panels behind the see-through cover) */
/* The cover is the click layer at all times: click = play / pause (YouTube's own links are never reachable) */
.film-play { position: absolute; inset: 0; display: block; z-index: 2; cursor: pointer; }
.film-play picture, .film-play img { display: block; width: 100%; height: 100%; }
.film-play img { object-fit: contain; transition: opacity .7s ease, filter .6s; }
.film-frame:hover .film-play img { filter: brightness(1.1); }
.film-frame.is-playing .film-play img { opacity: 0; }
/* v21: paused = the video is blacked out; the glowing play button moves to the centre */
.film-frame.is-paused .film-play img { opacity: 0; }
.film-pulse { transition: opacity .5s, left .5s var(--ease-out), width .5s var(--ease-out); }
.film-frame.is-paused .film-pulse { left: 50%; width: 12%; min-width: 54px; opacity: 1; }
.film-pulse em { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .4s; border-radius: 50%; background: rgba(19,34,47,.75); }
.film-pulse em svg { width: 34%; height: 34%; fill: var(--white); margin-left: 6%; }
.film-frame.is-paused .film-pulse em { opacity: 1; }
/* Futuristic play button: the cover's own play circle blinks, glows and sends out signal rings */
.film-pulse { position: absolute; left: 78.89%; top: 50%; width: 17.15%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.film-pulse::before, .film-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(56,182,255,.85); animation: filmRing 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.film-pulse::after { animation-delay: 1.4s; }
.film-pulse i { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(56,182,255,.38) 0%, rgba(56,182,255,.12) 45%, rgba(56,182,255,0) 70%); mix-blend-mode: screen; animation: filmGlow 2.8s ease-in-out infinite; }
.film-pulse b { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px #38B6FF, 0 0 22px 4px rgba(56,182,255,.65), inset 0 0 22px 2px rgba(56,182,255,.35); animation: filmBlink 1.4s ease-in-out infinite alternate; }
.film-frame:hover .film-pulse b { animation-duration: .55s; }

.film-frame.is-playing .film-pulse { opacity: 0; }

.film-frame.is-loading .film-pulse b { animation-duration: .4s; }
/* v19: Mobivity control bar UNDER the video (never over the film): play, seek bar + time, sound + volume, restart, full screen */
.film-wrap { position: relative; max-width: 1100px; margin: 0 auto; padding-bottom: 70px; }
/* v21: on short screens the film is narrowed so the whole video + control bar fit in the window */
@media (min-width: 641px) { .film-wrap { max-width: min(1100px, calc((100vh - 190px) * 16 / 9)); } }
.film-ctrls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 14px;
  background: rgba(14,26,36,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(56,182,255,.3), 0 8px 24px rgba(0,0,0,.35);
  opacity: .85; transition: opacity .4s;
}
.film-wrap.is-started .film-ctrls, .film-ctrls:hover, .film-ctrls:focus-within { opacity: 1; }
.fc-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--white);
  transition: background .25s, color .25s, box-shadow .25s;
}
.fc-btn:hover, .fc-btn:focus-visible { background: var(--blue); color: var(--midnight); box-shadow: 0 0 16px rgba(56,182,255,.7); outline: none; }
.fc-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; }
.fc-play svg { fill: currentColor; stroke: none; }
.fc-btn .alt, .fc-btn.is-on svg:not(.alt) { display: none; }
.fc-btn.is-on .alt { display: block; }
.fc-btn[hidden] { display: none; }
.fc-sound.is-on { color: var(--blue); }
.fc-sound.is-on:hover { color: var(--midnight); }
.fc-bar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.fc-vol { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.fc-seek, .fc-volume { height: 4px; -webkit-appearance: none; appearance: none; border-radius: 4px; cursor: pointer; margin: 0;
  background: linear-gradient(to right, var(--blue) var(--p, 0%), rgba(255,255,255,.25) var(--p, 0%)); }
.fc-seek { flex: 1 1 auto; min-width: 0; }
.fc-volume { width: 84px; --p: 50%; }
.fc-seek::-webkit-slider-thumb, .fc-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(56,182,255,.8); }
.fc-seek::-moz-range-thumb, .fc-volume::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--blue); }
.fc-seek:focus-visible, .fc-volume:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.fc-time { font-size: 13px; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Full screen: the video uses the full screen WIDTH.
   fs-roomy (screen taller than 16:9): the bar sits in the space under the video.
   fs-overlay (16:9 screens): no space below, so the bar floats at the bottom and hides 2.5 s after the mouse stops (shows while paused). */
.film-wrap.is-fs { max-width: none; width: 100%; height: 100%; padding: 0; background: #000; display: flex; flex-direction: column; justify-content: center; }
.film-wrap.is-fs .film-frame { width: 100%; max-width: none; border-radius: 0; box-shadow: none; background: #000; flex: 0 0 auto; aspect-ratio: 16 / 9; }
.film-wrap.is-fs .film-ctrls { position: static; flex: 0 0 auto; width: min(1100px, calc(100% - 32px)); margin: 12px auto 0; }
.film-wrap.is-fs.fs-overlay .film-frame { aspect-ratio: auto; height: 100%; }
/* screens wider than 16:9: keep the film's full height visible (black bars at the sides instead of cropping) */
.film-wrap.is-fs.fs-overlay .film-frame iframe { width: min(100%, calc(100vh * 16 / 9)); left: 50%; transform: translateX(-50%); }
.film-wrap.is-fs.fs-overlay .film-ctrls { position: absolute; left: 50%; bottom: 10px; margin: 0; transform: translateX(-50%); opacity: 0; transition: opacity .35s; }
/* v20: compact play bar in full screen (smaller footprint over the film) */
.film-wrap.is-fs .film-ctrls { width: min(560px, calc(100% - 24px)); gap: 2px; padding: 2px 10px 2px 2px; border-radius: 12px; background: rgba(14,26,36,.6); }
.film-wrap.is-fs .fc-btn { width: 30px; height: 30px; }
.film-wrap.is-fs .fc-btn svg { width: 16px; height: 16px; }
.film-wrap.is-fs .fc-bar { gap: 8px; padding: 0 4px; }
.film-wrap.is-fs .fc-time { font-size: 11px; }
.film-wrap.is-fs .fc-volume { width: 60px; }
.film-wrap.is-fs .fc-seek::-webkit-slider-thumb, .film-wrap.is-fs .fc-volume::-webkit-slider-thumb { width: 11px; height: 11px; }
.film-wrap.is-fs .fc-seek, .film-wrap.is-fs .fc-volume { height: 3px; }
.film-wrap.is-fs.fs-overlay.show-ctrls .film-ctrls { opacity: 1; }
.film-wrap.is-fs.fs-overlay:not(.show-ctrls) { cursor: none; }
.btn-film svg { width: 16px; height: 16px; }
.btn-film:hover svg { transform: none; }
@media (max-width: 640px) {
  .film-frame { border-radius: 12px; }
  .film-pulse::before, .film-pulse::after, .film-pulse b { border-width: 1.5px; }
  /* phones: seek bar on its own row above the buttons; volume slider hidden (phones use their own volume keys) */
  .film-wrap { padding-bottom: 94px; }
  .film-ctrls { flex-wrap: wrap; justify-content: center; gap: 2px 6px; padding: 8px 8px 4px; }
  .fc-bar { order: -1; flex: 1 1 100%; padding: 0 6px 2px; }
  .fc-volume { display: none; }
  .fc-btn { width: 34px; height: 34px; }
  .fc-btn svg { width: 17px; height: 17px; }
}

/* Respect "reduce motion" system setting */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}