@charset "UTF-8";
/* ===========================================================================
   MAYER CINE - dark cinematic layer for mayersecurity.com
   Loads last (priority 30), after the parent's style.css, overrides.css and
   per-page stylesheets. Presentation only.

   Contents
     1  Tokens
     2  Parent token remap
     3  Base surfaces
     4  Type + links
     5  Header / nav
     6  Hero
     7  Stats / insurance / accreditations
     8  About
     9  Services  <- the grid + density fixes
    10  Callout
    11  Reviews
    12  FAQ / accordion
    13  Blog
    14  Footer
    15  Buttons + forms
    16  Bootstrap + block-editor surfaces
    17  Inline-style rescues
    18  Cinematic motion
    19  Responsive
    20  Reduced motion / print / a11y
   ======================================================================== */


/* ---------------------------------------------------------------------------
   1  TOKENS
   Namespaced --cine-*. The green is #00FF66, lifted straight off the existing
   Request Consult CTA, so the accent Jason already approved is the accent the
   whole site now uses. Everything else is a neutral near-black ladder - no
   blue-grey slate, no gold.
   ------------------------------------------------------------------------ */
:root {
  /* Surfaces, darkest to lightest */
  --cine-0:  #060907;   /* page backdrop, behind everything */
  --cine-1:  #0A0E0B;   /* default section */
  --cine-2:  #0E120F;   /* alternating section */
  --cine-3:  #131814;   /* cards, panels */
  --cine-4:  #1A211C;   /* raised / hover */

  /* Text - measured against --cine-1 */
  --cine-text:   #F2F6F3;   /* 17.4:1  headings, body */
  --cine-text-2: #CBD5CE;   /* 11.6:1  secondary body */
  --cine-muted:  #9AA79F;   /*  6.4:1  captions, meta */

  /* Accent */
  --cine-green:      #00FF66;
  --cine-green-soft: #5CFF9B;
  --cine-green-deep: #0B9E4B;
  --cine-green-ink:  #04170B;   /* text placed on a green fill */
  --cine-glow:       rgba(0, 255, 102, 0.55);
  --cine-glow-soft:  rgba(0, 255, 102, 0.16);

  /* Lines */
  --cine-line:   rgba(255, 255, 255, 0.09);
  --cine-line-2: rgba(255, 255, 255, 0.16);
  --cine-line-g: rgba(0, 255, 102, 0.28);

  /* Depth */
  --cine-shadow:    0 10px 34px rgba(0, 0, 0, 0.55);
  --cine-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65);

  --cine-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ---------------------------------------------------------------------------
   2  PARENT TOKEN REMAP

   The parent's tokens split cleanly by role, which is what makes a repaint this
   broad safe. Audited across style.css, overrides.css and every page-*.css:

     --ms-off-white   background only (11 rules)  -> dark surface
     --ms-text-dark   colour only     (25 rules)  -> light text
     --ms-grey-light  border only     (13 rules)  -> hairline
     --ms-dark        background only (15 rules)  -> dark surface
     --ms-slate       background only (19 rules)  -> dark surface
     --ms-slate-light border only      (2 rules)  -> hairline
     --ms-gold        colour/bg/border (144)      -> green

   Two tokens are used in both roles and so are NOT remapped here; the handful
   of rules that need them flipped are listed in section 17:
     --ms-white       27 colour + 13 background
     --ms-black       18 colour (mostly ink on a bright button) + 7 background
   ------------------------------------------------------------------------ */
:root {
  --ms-gold:        var(--cine-green);
  --ms-gold-light:  var(--cine-green-soft);
  --ms-gold-dark:   var(--cine-green-deep);

  --ms-black:       var(--cine-0);
  --ms-dark:        var(--cine-2);
  --ms-slate:       var(--cine-3);
  --ms-slate-light: var(--cine-line-2);

  --ms-off-white:   var(--cine-2);
  --ms-text-dark:   var(--cine-text);
  --ms-grey-light:  var(--cine-line);
  --ms-grey:        var(--cine-muted);
  --ms-text:        var(--cine-text-2);

  --ms-green:       var(--cine-green);
  --flame:          var(--cine-green);

  --ms-shadow:      var(--cine-shadow);
}


/* ---------------------------------------------------------------------------
   3  BASE SURFACES
   ------------------------------------------------------------------------ */
html { background-color: var(--cine-0); }

body.cine {
  background-color: var(--cine-0);
  color: var(--cine-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Every section the parent painted light. Listed explicitly rather than with a
   blanket rule so a section added later fails visibly instead of silently
   inheriting something wrong. */
.cine .ms-stats,
.cine .ms-accreditations,
.cine .ms-reviews,
.cine .ms-faq,
.cine .ms-about,
.cine .ms-insurance,
.cine .ms-blog,
.cine .ms-services,
.cine .careers-why,
.cine .careers-positions,
.cine .careers-faq,
.cine .careers-contact { background-color: transparent !important; }

/* The dark ladder is drawn by a single gradient on the page rather than a
   background per section: one paint, no seams, and the WebGL atmosphere behind
   it stays continuous instead of being chopped up section by section. */
.cine .ms-stats,
.cine .ms-reviews,
.cine .ms-blog,
.cine .ms-services { position: relative; }

.cine .ms-stats::after,
.cine .ms-accreditations::after,
.cine .ms-reviews::after,
.cine .ms-faq::after,
.cine .ms-about::after,
.cine .ms-insurance::after,
.cine .ms-blog::after,
.cine .ms-services::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 9, 7, 0.86), rgba(10, 14, 11, 0.72));
}
.cine .ms-accreditations::after,
.cine .ms-faq::after,
.cine .ms-blog::after {
  background: linear-gradient(180deg, rgba(10, 14, 11, 0.78), rgba(6, 9, 7, 0.88));
}
.cine .ms-stats > *,
.cine .ms-accreditations > *,
.cine .ms-reviews > *,
.cine .ms-faq > *,
.cine .ms-about > *,
.cine .ms-insurance > *,
.cine .ms-blog > *,
.cine .ms-services > * { position: relative; z-index: 1; }

/* Hairline between sections, so the ladder still reads without light bands. */
.cine .ms-stats,
.cine .ms-accreditations,
.cine .ms-reviews,
.cine .ms-faq,
.cine .ms-about,
.cine .ms-blog,
.cine .ms-services { border-top: 1px solid var(--cine-line); }


/* ---------------------------------------------------------------------------
   4  TYPE + LINKS
   ------------------------------------------------------------------------ */
.cine h1, .cine h2, .cine h3, .cine h4, .cine h5, .cine h6 { color: var(--cine-text); }
.cine p, .cine li, .cine dd, .cine dt, .cine td, .cine th { color: var(--cine-text-2); }
.cine small, .cine figcaption, .cine .ms-meta { color: var(--cine-muted); }

.cine strong, .cine b { color: var(--cine-text); }

/* Bootstrap's default anchor colour (#0D6EFD) was reaching 26 links per page -
   image links mostly, so it never showed, but any new text link inherited it. */
.cine a { color: var(--cine-green); }
.cine a:hover,
.cine a:focus-visible { color: var(--cine-green-soft); }

/* Links inside running copy stay readable as text first, green on hover. */
.cine .ms-about p a,
.cine .ms-faq p a,
.cine .entry-content p a,
.cine .ms-post-content p a {
  color: var(--cine-text);
  text-decoration: underline;
  text-decoration-color: var(--cine-line-g);
  text-underline-offset: 3px;
  transition: color 0.2s var(--cine-ease), text-decoration-color 0.2s var(--cine-ease);
}
.cine .ms-about p a:hover,
.cine .ms-faq p a:hover,
.cine .entry-content p a:hover,
.cine .ms-post-content p a:hover {
  color: var(--cine-green);
  text-decoration-color: var(--cine-green);
}

.cine ::selection { background: var(--cine-green); color: var(--cine-green-ink); }

.cine :focus-visible {
  outline: 2px solid var(--cine-green);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ---------------------------------------------------------------------------
   5  HEADER / NAV
   ------------------------------------------------------------------------ */
.cine .ms-header {
  background-color: rgba(6, 9, 7, 0.82);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--cine-line);
}
.cine .ms-header.cine-stuck {
  background-color: rgba(6, 9, 7, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cine .ms-menu > li > a { color: var(--cine-text-2); }
.cine .ms-menu > li > a:hover,
.cine .ms-menu > li:hover > a { color: var(--cine-green); }

.cine .ms-menu ul {
  background-color: rgba(10, 14, 11, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--cine-line);
  box-shadow: var(--cine-shadow-lg);
}
.cine .ms-menu ul li a { color: var(--cine-text-2); }
.cine .ms-menu ul li a:hover {
  color: var(--cine-green);
  background-color: rgba(0, 255, 102, 0.07);
}

.cine .ms-nav-social a { color: var(--cine-muted); }
.cine .ms-nav-social a:hover { color: var(--cine-green); }

.cine .ms-hamburger span { background-color: var(--cine-text) !important; }

/* The consult CTA is the accent's source - left loud on purpose. */
.cine .ms-nav-cta-call,
.cine .ms-nav-cta-consult {
  background: rgba(0, 0, 0, 0.55);
  color: var(--cine-text);
  border: 1px solid var(--cine-line-g);
}
.cine .ms-nav-cta-call:hover,
.cine .ms-nav-cta-consult:hover {
  background: var(--cine-green);
  color: var(--cine-green-ink);
}

.cine .ms-mobile-cta {
  background: rgba(6, 9, 7, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--cine-line);
}


/* ---------------------------------------------------------------------------
   6  HERO
   ------------------------------------------------------------------------ */
.cine .ms-hero { background-color: var(--cine-0); }

/* The parent paints its hero scrim on ::before with inset:0. Rather than
   redefine that pseudo-element - which would inherit its offsets and fight it
   for geometry - it is blanked here and the whole hero grade is rebuilt as
   layers on ::after, so the treatment lives in one rule.
   Layer order, top first: the green rule, the left-to-right darkening that
   carries the headline, then the foot fade into the section below. */
.cine .ms-hero::before { background: none; }

.cine .ms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--cine-line-g) 22%, var(--cine-green) 50%, var(--cine-line-g) 78%, transparent)
      bottom left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(6, 9, 7, 0.92) 0%, rgba(6, 9, 7, 0.55) 45%, rgba(6, 9, 7, 0.28) 100%),
    linear-gradient(0deg, rgba(6, 9, 7, 0.95) 0%, rgba(6, 9, 7, 0) 55%);
}
.cine .ms-hero > *:not(.ms-hero-slider) { position: relative; z-index: 3; }

.cine .ms-hero-slider { z-index: 1; }
.cine .ms-hero h1 { color: var(--cine-text); }
.cine .ms-hero p { color: var(--cine-text-2); }


/* ---------------------------------------------------------------------------
   7  STATS / INSURANCE / ACCREDITATIONS
   ------------------------------------------------------------------------ */
.cine .ms-stat-card,
.cine .ms-stat-card.ms-stat-green {
  background: linear-gradient(160deg, var(--cine-3), var(--cine-2));
  border: 1px solid var(--cine-line);
  border-radius: 12px;
  box-shadow: var(--cine-shadow);
  transition: transform 0.35s var(--cine-ease), border-color 0.35s var(--cine-ease);
}
.cine .ms-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--cine-line-g);
}
.cine .ms-stat-number { color: var(--cine-green) !important; }
.cine .ms-stat-label { color: var(--cine-text-2); }
.cine .ms-stat-sub { color: var(--cine-muted); }

.cine .ms-insurance { border-top: 1px solid var(--cine-line); }
.cine .ms-insurance h2 { color: var(--cine-text); }

/* Was white-on-gold-12%, a 2.36:1 contrast failure across four badges.
   Scoped to the pills themselves, never their wrapper: `[class*="badge"]` also
   matched .ms-insurance-badges - the 836px-wide container - and painted a green
   bar straight across the section behind the four pills. */
.cine .ms-insurance-badges > span,
.cine .ms-about-badges > span,
.cine span[class*="badge"],
.cine li[class*="badge"] {
  background: rgba(0, 255, 102, 0.10) !important;
  border: 1px solid var(--cine-line-g);
  color: var(--cine-green-soft) !important;
}
.cine .ms-insurance-badges,
.cine .ms-about-badges {
  background: none !important;
  border: 0 !important;
}

/* Third-party credential marks.
 *
 * These arrive in three different polarities, so no single filter is right for
 * all of them - measured with build/tools/logo-polarity.php rather than guessed:
 *
 *   already light on a dark ground   DPS, BBB, Bloomberg, Procore   (4)
 *   transparent background           Fort Bend, D&B, Film Commission (3)
 *   dark artwork on white            Chamber, partner-1, press release (3)
 *
 * Only the last group needs anything doing to it; the other seven already read
 * correctly on a dark tile. An earlier blanket invert was wrong for seven of
 * the ten - it turned the Bloomberg mark into a white box.
 *
 * If a logo is ever swapped, re-run:
 *   php build/tools/logo-polarity.php _stage/logos/*
 */
/* COMPOSITOR COST
 *
 * This strip is a 4,800px-wide track translated -50% by a 32s linear animation
 * that never stops. Anything expensive applied to its contents is paid for on
 * every frame, forever, and it showed as jank on phones.
 *
 * Three things were making it expensive, and all three are removed below:
 *
 *   1. The parent puts filter: grayscale(30%) on all 22 images plus a
 *      transition on that filter. A filtered layer cannot simply be translated
 *      as a cached texture. The desaturation is also pointless here - these
 *      logos sit on dark tiles and read better in their own colours.
 *   2. An earlier revision of this block put opacity on all 22 images, which is
 *      22 more compositing hints inside the moving layer.
 *   3. Nothing promoted the track, so the browser had a choice about whether to
 *      composite or repaint the translation.
 *
 * Only the three dark-on-white marks keep a filter, because without it they are
 * black artwork on a black tile. Their filter is constant - no transition - so
 * the result is cached once.
 */
.cine .ms-accred-slide {
  background: var(--cine-3);
  border: 1px solid var(--cine-line);
  border-radius: 10px;
}

.cine .ms-accred-slide img {
  filter: none;
  opacity: 1;
  transition: none;
}

.cine .ms-accred-slide img[src*="houston-chamber-of-commerce"],
.cine .ms-accred-slide img[src*="partner-1"],
.cine .ms-accred-slide img[src*="pressrelease_95502"] {
  filter: grayscale(1) invert(1) brightness(1.05) contrast(1.12);
}

/* Hover restores the credential as its owner issued it - but only where a
   pointer exists. On touch it would never fire, and declaring the transition
   anyway keeps the filtered result invalidatable on exactly the devices that
   can least afford it. */
@media (hover: hover) {
  .cine .ms-accred-slide img { transition: filter 0.35s var(--cine-ease); }
  .cine .ms-accred-slide:hover img[src*="houston-chamber-of-commerce"],
  .cine .ms-accred-slide:hover img[src*="partner-1"],
  .cine .ms-accred-slide:hover img[src*="pressrelease_95502"] { filter: none; }
}

/* Stop the strip while it is off screen.
 *
 * Both classes are added BY the script, never assumed: WP Rocket holds cinefx.js
 * until the first interaction, so a default of paused would leave the strip
 * frozen until someone touched the page. Defaulting to the parent's behaviour
 * and letting the observer pause it means the worst case is exactly today. */
.cine .ms-accred-track.cine-paused { animation-play-state: paused; }

/* Promoted only while on screen - holding a 4,800px layer for a strip nobody is
   looking at is the thing being avoided. */
.cine .ms-accred-track.cine-visible { will-change: transform; }

@media (forced-colors: active) {
  .cine .ms-accred-slide img { filter: none; opacity: 1; }
}

/* Was #9A9A9A on #F5F5F5 - 2.58:1, the worst offender on the page. */
.cine .ms-accred-caption { color: var(--cine-muted) !important; }


/* ---------------------------------------------------------------------------
   8  ABOUT
   ------------------------------------------------------------------------ */
.cine .ms-about-quote {
  color: var(--cine-text);
  border-left: 2px solid var(--cine-green);
  padding-left: 18px;
  font-style: italic;
}
.cine .ms-about-media .cap {
  background: rgba(6, 9, 7, 0.88) !important;
  color: var(--cine-text-2) !important;
  border: 1px solid var(--cine-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cine .ms-about-media img {
  border-radius: 12px;
  box-shadow: var(--cine-shadow-lg);
}


/* ---------------------------------------------------------------------------
   9  SERVICES

   Two defects fixed here.

   (a) Alignment. The ten cards are authored as four sibling grids -
       ms-svc-grid-3 (6 cards), -1 (1), -2 (2), -1 (1) - so the last four
       stretched to 1116px, 546px, 546px and 1116px while the first six sat at
       356px. Making the wrappers display:contents promotes all ten cards into
       one grid on the section container, so they flow 3/3/3/1 at a single
       width. The markup is untouched.

   (b) Density. Card copy runs 112-232 characters against a fixed 280px box, so
       the longest two crowded their CTA. The paragraph is clamped to three
       lines - the full text stays in the DOM for crawlers, only the visible
       run is trimmed - and the CTA is pinned to the bottom of the card so every
       button in a row sits on the same line regardless of title wrap.
   ------------------------------------------------------------------------ */
/* :has() keeps this off containers that hold no card grid at all - the
   Industries page has an .ms-services section built from entirely different
   markup, and turning its container into a three-column grid would wreck it.
   Where :has() is unsupported the rule is simply dropped and the page falls
   back to the parent's original layout, which is a safe place to land. */
.cine .ms-services > .container:has(> [class*="ms-svc-grid"]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
/* Anything that is not a card wrapper - the section heading, a trailing CTA -
   spans the full width rather than being dealt a single column. */
.cine .ms-services > .container:has(> [class*="ms-svc-grid"]) > *:not([class*="ms-svc-grid"]) {
  grid-column: 1 / -1;
}
.cine .ms-services > .container > .text-center { margin-bottom: 8px; }

/* Scoped to the same :has() condition on purpose. Promoting the wrappers to
   display:contents without the parent actually being a grid would drop ten
   cards into a plain block container and lay them out in a single stack. */
.cine .ms-services > .container:has(> [class*="ms-svc-grid"]) > [class*="ms-svc-grid"] {
  display: contents !important;
}

.cine .ms-svc-card {
  background-color: var(--cine-3);
  border: 1px solid var(--cine-line);
  border-radius: 14px;
  box-shadow: var(--cine-shadow);
  isolation: isolate;
  transition: transform 0.45s var(--cine-ease),
              box-shadow 0.45s var(--cine-ease),
              border-color 0.45s var(--cine-ease);
}
.cine .ms-svc-card:hover {
  transform: translateY(-6px);
  border-color: var(--cine-line-g);
  box-shadow: var(--cine-shadow-lg), 0 0 0 1px rgba(0, 255, 102, 0.10);
}

/* Scrim: heavier at the foot so the copy always has something to sit on,
   whatever the photograph behind it is doing. */
.cine .ms-svc-card::before {
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(6, 9, 7, 0.30) 0%,
    rgba(6, 9, 7, 0.62) 45%,
    rgba(6, 9, 7, 0.93) 100%
  ) !important;
}

.cine .ms-svc-card-body {
  z-index: 2;
  justify-content: flex-end;
  gap: 10px;
}
.cine .ms-svc-card-body h3 {
  color: var(--cine-text) !important;
  font-size: 19px;
  line-height: 1.28;
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
.cine .ms-svc-card-body p {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
  /* Clamp is visual only - the full sentence stays in the document. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pins every CTA to the same baseline across a row. */
.cine .ms-svc-card-body .btn-svc {
  margin-top: 6px;
  align-self: flex-start;
}

/* No backdrop-filter here on purpose. There are ten of these on the homepage,
   each sitting over a photograph, and a blurred backdrop per button costs far
   more GPU than a flat scrim for a difference nobody can see. */
.cine .btn-svc {
  border: 1px solid var(--cine-green);
  color: var(--cine-green);
  background-color: rgba(0, 0, 0, 0.55);
  transition: background-color 0.3s var(--cine-ease),
              color 0.3s var(--cine-ease),
              box-shadow 0.3s var(--cine-ease);
}
.cine .btn-svc:hover {
  background-color: var(--cine-green);
  color: var(--cine-green-ink) !important;
  box-shadow: 0 0 22px var(--cine-glow);
}

/* The Critical Infrastructure card was authored as a full-width bar - the
   markup comment says so outright, "prevents orphaning" - so it carries three
   pillar chips none of the other nine have. Now that every card is the same
   width, that extra content has to become denser rather than disappear: the
   chips shrink to a compact row and the paragraph gives up one line, which
   brings the card back in line with its neighbours while leaving every word in
   the document for crawlers. */
.cine .ms-ci-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
}
.cine .ms-ci-pillars span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cine-text);
  background: rgba(6, 9, 7, 0.82);
  border: 1px solid var(--cine-line-g);
  border-radius: 999px;
  text-shadow: none;
}
.cine .ms-ci-pillars i { color: var(--cine-green); font-size: 10px; }

.cine .ms-svc-card:has(.ms-ci-pillars) .ms-svc-card-body p {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* There were ten cards, which left one stranded alone on a fourth row, and it
   was centred here to read as deliberate. The duplicate Private Investigation
   card has since been removed, so nine cards fill three rows exactly and the
   centring rule would now fight auto-placement - it forced the last card into
   column 2 of a row that already had one. Left as a note rather than deleted
   because a tenth service would bring the problem straight back. */

/* Ken Burns layer, injected by cinefx.js. Sits under the scrim and over the
   card's own background, carrying the same image, so nothing changes if the
   script never runs. */
.cine .cine-kb {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.001);
  transition: transform 9s cubic-bezier(0.16, 0.62, 0.30, 1);
}
/* will-change only while the card is actually on screen. Declaring it on all
   ten permanently would hold ten full-size compositor layers for photographs
   that are mostly scrolled past. */
.cine .ms-svc-card.cine-kb-on .cine-kb {
  transform: scale(1.10);
  will-change: transform;
}

/* Alternate cards pull back instead of pushing in. Ten photographs all
   drifting the same direction reads as a glitch; opposing motion across the
   grid is what makes it look shot rather than animated. */
.cine .cine-kb.cine-kb-rev { transform: scale(1.10); }
.cine .ms-svc-card.cine-kb-on .cine-kb.cine-kb-rev { transform: scale(1.001); }


/* ---------------------------------------------------------------------------
   10  CALLOUT
   ------------------------------------------------------------------------ */
.cine .ms-callout {
  background-color: var(--cine-2);
  border-top: 1px solid var(--cine-line);
  border-bottom: 1px solid var(--cine-line);
  position: relative;
}
/* Parent already darkens this band on ::before; stacking a second scrim on
   ::after would crush the photograph behind it, so ::before is blanked and the
   grade is defined here only. */
.cine .ms-callout::before { background: none; }

/* Deliberately an even wash rather than the left-to-right ramp used on the hero.
   Callouts appear with left-aligned copy on some pages and centred copy on
   others, and a directional scrim leaves whichever side it fades toward sitting
   on unmasked photography. */
.cine .ms-callout::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(0, 255, 102, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(6, 9, 7, 0.88) 0%, rgba(6, 9, 7, 0.80) 50%, rgba(6, 9, 7, 0.88) 100%);
}
.cine .ms-callout > * { position: relative; z-index: 1; }
.cine .ms-callout h2 { color: var(--cine-text); }
.cine .ms-callout p { color: var(--cine-text-2); }


/* ---------------------------------------------------------------------------
   11  REVIEWS
   ------------------------------------------------------------------------ */
.cine .ms-review-card,
.cine .ms-review-link,
.cine .wp-reviews-plugin-for-google .rpi-card {
  background: linear-gradient(160deg, var(--cine-3), var(--cine-2)) !important;
  border: 1px solid var(--cine-line);
  border-radius: 12px;
  color: var(--cine-text-2);
  box-shadow: var(--cine-shadow);
}
.cine .ms-review-card p,
.cine .ms-review-text { color: var(--cine-text-2) !important; }
.cine .ms-review-author,
.cine .ms-review-name { color: var(--cine-text) !important; }

/* The review stars were #FACC15 - a gold. Same shape, brand accent. */
.cine .ms-review-stars,
.cine .ms-stars,
.cine [class*="star"] i,
.cine [class*="rating"] svg { color: var(--cine-green) !important; fill: var(--cine-green) !important; }

.cine .ms-reviews-label { color: var(--cine-green) !important; }


/* ---------------------------------------------------------------------------
   12  FAQ / ACCORDION
   ------------------------------------------------------------------------ */
.cine .ms-accordion-item {
  background: var(--cine-3) !important;
  border: 1px solid var(--cine-line) !important;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.cine .ms-accordion-item + .ms-accordion-item { margin-top: 0; }

.cine .ms-accordion-header,
.cine .ms-accordion-item button {
  background: transparent !important;
  color: var(--cine-text) !important;
}
.cine .ms-accordion-item.active,
.cine .ms-accordion-item:hover { border-color: var(--cine-line-g) !important; }

.cine .ms-accordion-body,
.cine .ms-accordion-content { color: var(--cine-text-2) !important; }

.cine .ms-accordion-icon,
.cine .ms-accordion-item .icon { color: var(--cine-green) !important; }


/* ---------------------------------------------------------------------------
   13  BLOG
   ------------------------------------------------------------------------ */
.cine .ms-post-card,
.cine .ms-blog-card {
  background: var(--cine-3);
  border: 1px solid var(--cine-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--cine-shadow);
  transition: transform 0.4s var(--cine-ease), border-color 0.4s var(--cine-ease);
}
.cine .ms-post-card:hover,
.cine .ms-blog-card:hover {
  transform: translateY(-5px);
  border-color: var(--cine-line-g);
}
.cine .ms-post-card h3,
.cine .ms-blog-card h3 { color: var(--cine-text); }
.cine .ms-post-card p,
.cine .ms-blog-card p { color: var(--cine-text-2); }
.cine .ms-post-meta,
.cine .ms-post-date { color: var(--cine-muted); }

.cine .ms-post-card img,
.cine .ms-blog-card img {
  transition: transform 1.2s var(--cine-ease);
}
.cine .ms-post-card:hover img,
.cine .ms-blog-card:hover img { transform: scale(1.06); }

.cine .ms-post-arrow { color: var(--cine-green); }
.cine .ms-post-arrow:hover {
  background: var(--cine-green);
  color: var(--cine-green-ink) !important;
}


/* ---------------------------------------------------------------------------
   14  FOOTER
   ------------------------------------------------------------------------ */
.cine .ms-footer {
  background-color: var(--cine-0);
  border-top: 1px solid var(--cine-line);
  color: var(--cine-text-2);
}
.cine .ms-footer h3,
.cine .ms-footer h4 { color: var(--cine-text); }
.cine .ms-footer a { color: var(--cine-text-2); }
.cine .ms-footer a:hover { color: var(--cine-green); }
.cine .ms-footer-bottom,
.cine .ms-footer-disclaimer { color: var(--cine-muted); border-top-color: var(--cine-line); }


/* ---------------------------------------------------------------------------
   15  BUTTONS + FORMS
   ------------------------------------------------------------------------ */
.cine .btn-gold,
.cine .ms-btn-consult,
.cine .ms-mobile-cta-consult,
.cine .wp-block-button__link,
.cine input[type="submit"],
.cine button[type="submit"],
.cine .wpcf7-submit {
  background: linear-gradient(135deg, var(--cine-green) 0%, #17E06B 100%) !important;
  color: var(--cine-green-ink) !important;
  border: none !important;
  font-weight: 700;
  transition: box-shadow 0.3s var(--cine-ease), transform 0.2s var(--cine-ease), filter 0.3s var(--cine-ease);
}
.cine .btn-gold:hover,
.cine .ms-btn-consult:hover,
.cine .ms-mobile-cta-consult:hover,
.cine .wp-block-button__link:hover,
.cine input[type="submit"]:hover,
.cine button[type="submit"]:hover,
.cine .wpcf7-submit:hover {
  box-shadow: 0 0 26px var(--cine-glow);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.cine .btn-outline-white,
.cine .ms-mobile-cta-call {
  border: 1px solid var(--cine-line-2) !important;
  color: var(--cine-text) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.cine .btn-outline-white:hover,
.cine .ms-mobile-cta-call:hover {
  background: var(--cine-green) !important;
  border-color: var(--cine-green) !important;
  color: var(--cine-green-ink) !important;
}

.cine input[type="text"],
.cine input[type="email"],
.cine input[type="tel"],
.cine input[type="url"],
.cine input[type="number"],
.cine input[type="date"],
.cine select,
.cine textarea,
.cine .wpcf7 input,
.cine .wpcf7 select,
.cine .wpcf7 textarea {
  background-color: var(--cine-3) !important;
  border: 1px solid var(--cine-line) !important;
  color: var(--cine-text) !important;
  border-radius: 8px;
}
.cine input::placeholder,
.cine textarea::placeholder { color: var(--cine-muted) !important; opacity: 1; }

.cine input:focus,
.cine select:focus,
.cine textarea:focus {
  border-color: var(--cine-green) !important;
  box-shadow: 0 0 0 3px var(--cine-glow-soft) !important;
  outline: none;
}

.cine label { color: var(--cine-text-2); }

/* Browser autofill repaints inputs white in Chrome; the inset shadow is the
   only way to hold the dark fill. */
.cine input:-webkit-autofill,
.cine input:-webkit-autofill:hover,
.cine input:-webkit-autofill:focus,
.cine textarea:-webkit-autofill,
.cine select:-webkit-autofill {
  -webkit-text-fill-color: var(--cine-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cine-3) inset !important;
  caret-color: var(--cine-text);
}

.cine .wpcf7-not-valid-tip { color: #FF7A7A !important; }
.cine .wpcf7-response-output {
  border-color: var(--cine-line-g) !important;
  color: var(--cine-text-2) !important;
}


/* ---------------------------------------------------------------------------
   16  BOOTSTRAP + BLOCK-EDITOR SURFACES
   Bootstrap 5 is loaded globally and assumes a light page.
   ------------------------------------------------------------------------ */
.cine .card,
.cine .accordion-item,
.cine .list-group-item,
.cine .modal-content,
.cine .dropdown-menu {
  background-color: var(--cine-3) !important;
  border-color: var(--cine-line) !important;
  color: var(--cine-text-2) !important;
}
.cine .accordion-button {
  background-color: var(--cine-3) !important;
  color: var(--cine-text) !important;
  box-shadow: none !important;
}
.cine .accordion-button:not(.collapsed) {
  background-color: var(--cine-4) !important;
  color: var(--cine-green) !important;
}
.cine .accordion-button::after { filter: invert(1) hue-rotate(90deg) brightness(1.4); }
.cine .accordion-body { background-color: var(--cine-3) !important; color: var(--cine-text-2) !important; }

.cine .table { --bs-table-color: var(--cine-text-2); --bs-table-bg: transparent; }
.cine .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--cine-text-2) !important;
  border-color: var(--cine-line) !important;
}
.cine .table thead th { color: var(--cine-text) !important; }

.cine blockquote,
.cine .wp-block-quote {
  border-left: 2px solid var(--cine-green);
  background: rgba(0, 255, 102, 0.04);
  color: var(--cine-text);
  padding: 14px 20px;
  border-radius: 0 8px 8px 0;
}

.cine code, .cine pre {
  background: var(--cine-3);
  color: var(--cine-green-soft);
  border: 1px solid var(--cine-line);
  border-radius: 6px;
}

.cine hr, .cine .wp-block-separator { border-color: var(--cine-line); opacity: 1; }

/* Pagination.
 *
 * Pre-existing bug, visible on the live site too: the parent styles
 * `.page-numbers` as though it were the <ul> wrapper - width:100%, margin:30px 0
 * - and `.page-numbers li a` as the items. But the_posts_pagination() emits
 *   nav.navigation.pagination > div.nav-links > a.page-numbers
 * with no list at all, so `.page-numbers` matches every individual link and
 * gives each one full width and a 30px margin. The result is page numbers
 * stacked vertically down the page in a staggered column.
 *
 * The parent's li-based rules are left alone in case a template somewhere does
 * emit a list; these target the markup WordPress actually produces. */
.cine .navigation.pagination { display: block; margin: 40px 0; }

.cine .navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.cine .navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: auto;
  height: 40px;
  padding: 0 13px;
  margin: 0;
  border: 1px solid var(--cine-line);
  border-radius: 8px;
  background: var(--cine-3);
  color: var(--cine-text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s var(--cine-ease), color 0.25s var(--cine-ease);
}
.cine .navigation.pagination a.page-numbers:hover {
  border-color: var(--cine-green);
  color: var(--cine-green);
}
.cine .navigation.pagination .page-numbers.current {
  background: var(--cine-green);
  border-color: var(--cine-green);
  color: var(--cine-green-ink);
}
.cine .navigation.pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
}

.cine .page-numbers li span.current,
.cine .page-numbers li a:hover {
  background: var(--cine-green) !important;
  color: var(--cine-green-ink) !important;
}
.cine .page-numbers li a {
  background: var(--cine-3);
  border: 1px solid var(--cine-line);
  color: var(--cine-text-2);
}

/* A bare <button> in post_content with no styling of its own, so it was taking
   the browser default: black glyph on no background, i.e. invisible on black. */
.cine #scrollTopBtn {
  background: rgba(6, 9, 7, 0.85) !important;
  color: var(--cine-green) !important;
  border: 1px solid var(--cine-line-g) !important;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  line-height: 1;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.25s var(--cine-ease), color 0.25s var(--cine-ease);
}
.cine #scrollTopBtn:hover {
  background: var(--cine-green) !important;
  color: var(--cine-green-ink) !important;
}

.cine .load-more-btn {
  border: 1px solid var(--cine-green);
  color: var(--cine-green);
  background: transparent;
}
.cine .load-more-btn:hover {
  background: var(--cine-green);
  color: var(--cine-green-ink) !important;
}


/* ---------------------------------------------------------------------------
   17  INLINE-STYLE RESCUES

   Colours hard-coded into post_content or into rules that use --ms-white as a
   background / --ms-black as a colour. These are the cases section 2 could not
   reach by remapping a token, enumerated from a full sweep of the stylesheets
   and of the rendered pages.
   ------------------------------------------------------------------------ */

/* Rules the parent paints with background: var(--ms-white). */
.cine body,
.cine .ms-about,
.cine .ms-faq,
.cine .ms-accordion-item,
.cine .ms-review-link,
.cine .careers-why,
.cine .position-card,
.cine .careers-team-photo,
.cine .faq-item { background-color: transparent; }

.cine .position-card,
.cine .faq-item {
  background-color: var(--cine-3) !important;
  border: 1px solid var(--cine-line);
  border-radius: 10px;
}

/* Careers headings were black-on-white via color: var(--ms-black). */
.cine .careers-why h2,
.cine .careers-positions h2,
.cine .careers-faq h2,
.cine .position-card h3,
.cine .faq-item h3 { color: var(--cine-text) !important; }
.cine .careers-contact { background: var(--cine-2) !important; color: var(--cine-text-2) !important; }

/* Mid and dark greys written straight into a style attribute: on black these
   range from hard to read to invisible. Case-insensitive for the same reason
   as the gold rules above. */
.cine [style*="color:#555" i],
.cine [style*="color: #555" i],
.cine [style*="color:#333" i],
.cine [style*="color: #333" i],
.cine [style*="color:#444" i],
.cine [style*="color: #444" i],
.cine [style*="color:#666" i],
.cine [style*="color: #666" i],
.cine [style*="color:#111827" i],
.cine [style*="color: #111827" i],
.cine [style*="color:#1f2937" i],
.cine [style*="color:#374151" i],
.cine [style*="color:#4b5563" i],
.cine [style*="color: #4b5563" i],
.cine [style*="color:#6b7280" i],
.cine [style*="color: #6b7280" i],
.cine [style*="color:#9a9a9a" i],
.cine [style*="color: #9a9a9a" i],
.cine [style*="color:#b5b5bd" i],
.cine [style*="color:#ccc" i] { color: var(--cine-text-2) !important; }

/* Gold written straight into a style attribute - by the editor, or by the
   mayer-lp-links mu-plugin, which builds its whole CTA block inline and writes
   the gold as #C8A45A. Attribute selectors match values case-sensitively by
   default, so every one of these carries the `i` flag; without it the
   upper-case spellings slip through. Inline styles also outrank any rule that
   is not !important, hence the marks on every declaration. */
.cine [style*="color:#c8a45a" i],
.cine [style*="color: #c8a45a" i],
.cine [style*="color:#c8a84e" i],
.cine [style*="color: #c8a84e" i],
.cine [style*="color:#d4b76a" i],
.cine [style*="color: #d4b76a" i] { color: var(--cine-green) !important; }

/* A gold rule, most often `border:1px solid #C8A45A`. */
.cine [style*="solid #c8a45a" i],
.cine [style*="solid#c8a45a" i],
.cine [style*="solid #c8a84e" i] { border-color: var(--cine-green) !important; }

/* A gold fill. The dark ink sitting on it is correct and is kept dark. */
.cine [style*="background:#c8a45a" i],
.cine [style*="background: #c8a45a" i],
.cine [style*="background-color:#c8a45a" i],
.cine [style*="background-color: #c8a45a" i] {
  background: var(--cine-green) !important;
  color: var(--cine-green-ink) !important;
}

/* Gold used as a translucent tint - a panel wash rather than a fill. */
.cine [style*="rgba(200,168,78" i],
.cine [style*="rgba(200, 168, 78" i],
.cine [style*="rgba(200,164,90" i],
.cine [style*="rgba(200, 164, 90" i] {
  background: rgba(0, 255, 102, 0.08) !important;
  border-color: var(--cine-line-g) !important;
  color: var(--cine-text-2) !important;
}

/* Light panels written into post_content. */
.cine [style*="background:var(--ms-white)"],
.cine [style*="background: var(--ms-white)"],
.cine [style*="background:var(--ms-off-white)"],
.cine [style*="background: var(--ms-off-white)"],
.cine [style*="background-color:var(--ms-white)"],
.cine [style*="background:#fff"],
.cine [style*="background: #fff"],
.cine [style*="background:#ffffff"],
.cine [style*="background:#f5f5f5"],
.cine [style*="background:#f8fafc"] {
  background: var(--cine-3) !important;
  border: 1px solid var(--cine-line);
  color: var(--cine-text-2) !important;
}

/* Dark ink deliberately placed on a green fill - keep it dark. */
.cine [style*="background:#3ddc84"],
.cine [style*="background: #3ddc84"],
.cine [style*="background:#00ff66"],
.cine [style*="background: #00ff66"] {
  background: var(--cine-green) !important;
  color: var(--cine-green-ink) !important;
}
.cine [style*="background:#3ddc84"] *,
.cine [style*="background:#00ff66"] * { color: var(--cine-green-ink) !important; }

/* The logo PNG carries real alpha (black keyed out at the asset level), so
   no blend trickery is needed. The gold in the logo is brand identity, not
   an accent, so it is deliberately left alone by the rest of this stylesheet. */


/* ---------------------------------------------------------------------------
   17b  COOKIE CONSENT (Complianz)

   The banner ships white with #222 text and #1E73BE links, and it is rendered
   by the plugin rather than the theme - it never appeared during local review
   because the dev harness disables Complianz. On a black site it lands like a
   floodlight.

   Accept and reject are styled identically on purpose. Consent rules require
   equal prominence, so the brand green is used for neither: it is reserved for
   the neutral "save preferences" action and the always-active marker.
   ------------------------------------------------------------------------ */
/* Complianz drives the whole banner from its own custom properties, generated
   into /uploads/complianz/css/ from the plugin's settings - and that stylesheet
   is enqueued AFTER this one, so a selector fight would need !important on every
   line and would still miss anything not enumerated here. Redefining the
   variables on body wins instead: custom properties inherit, so a value set on
   an ancestor beats the :root definition for everything inside, whatever the
   source order. Chasing selectors is what left .cmplz-message at #222 on black,
   a 1.19:1 contrast ratio on the consent text itself. */
body.cine {
  --cmplz_banner_background_color: #0E120F;
  --cmplz_banner_border_color: rgba(255, 255, 255, 0.09);
  --cmplz_text_color: #CBD5CE;
  --cmplz_hyperlink_color: #00FF66;
  --cmplz_category_header_always_active_color: #00FF66;

  /* Accept and reject identical - consent rules require equal prominence, so
     the accent goes to neither. */
  --cmplz_button_accept_background_color: #1B211C;
  --cmplz_button_accept_border_color: rgba(255, 255, 255, 0.16);
  --cmplz_button_accept_text_color: #F2F6F3;
  --cmplz_button_deny_background_color: #1B211C;
  --cmplz_button_deny_border_color: rgba(255, 255, 255, 0.16);
  --cmplz_button_deny_text_color: #F2F6F3;
  --cmplz_button_settings_background_color: #1B211C;
  --cmplz_button_settings_border_color: rgba(255, 255, 255, 0.16);
  --cmplz_button_settings_text_color: #F2F6F3;

  --cmplz_slider_active_color: #00FF66;
  --cmplz_slider_inactive_color: #2A322C;   /* was a warm orange */
  --cmplz_slider_bullet_color: #060907;
}

.cine .cmplz-cookiebanner,
.cine #cmplz-manage-consent .cmplz-manage-consent,
.cine .cmplz-cookiebanner .cmplz-body,
.cine .cmplz-cookiebanner .cmplz-header {
  background-color: var(--cine-2) !important;
  color: var(--cine-text-2) !important;
  border-color: var(--cine-line) !important;
}

/* The consent copy itself. */
.cine .cmplz-cookiebanner .cmplz-message,
.cine .cmplz-cookiebanner .cmplz-message * { color: var(--cine-text-2) !important; }
.cine .cmplz-cookiebanner {
  border: 1px solid var(--cine-line) !important;
  box-shadow: var(--cine-shadow-lg) !important;
}

.cine .cmplz-cookiebanner .cmplz-title,
.cine .cmplz-cookiebanner .cmplz-category-title,
.cine .cmplz-cookiebanner h1,
.cine .cmplz-cookiebanner h2,
.cine .cmplz-cookiebanner h3 { color: var(--cine-text) !important; }

.cine .cmplz-cookiebanner .cmplz-desc,
.cine .cmplz-cookiebanner .cmplz-description,
.cine .cmplz-cookiebanner p,
.cine .cmplz-cookiebanner li { color: var(--cine-text-2) !important; }

.cine .cmplz-cookiebanner .cmplz-close,
.cine .cmplz-cookiebanner .cmplz-close svg { color: var(--cine-text-2) !important; fill: currentColor !important; }

.cine .cmplz-cookiebanner .cmplz-category {
  background-color: var(--cine-3) !important;
  border: 1px solid var(--cine-line) !important;
  border-radius: 8px;
}
.cine .cmplz-cookiebanner .cmplz-always-active { color: var(--cine-green) !important; }

.cine .cmplz-cookiebanner .cmplz-link,
.cine .cmplz-cookiebanner a {
  color: var(--cine-text) !important;
  text-decoration: underline;
  text-decoration-color: var(--cine-line-g);
  text-underline-offset: 3px;
}
.cine .cmplz-cookiebanner .cmplz-link:hover,
.cine .cmplz-cookiebanner a:hover { color: var(--cine-green) !important; }

.cine .cmplz-cookiebanner .cmplz-divider,
.cine .cmplz-cookiebanner hr { background-color: var(--cine-line) !important; border-color: var(--cine-line) !important; }

/* Equal weight for accept and reject. */
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--cine-line-2) !important;
  color: var(--cine-text) !important;
  border-radius: 8px;
}
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
  border-color: var(--cine-green) !important;
  color: var(--cine-green) !important;
}
.cine .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background-color: var(--cine-green) !important;
  border: 1px solid var(--cine-green) !important;
  color: var(--cine-green-ink) !important;
  border-radius: 8px;
}

/* The little "Manage consent" tab that sits on the page afterwards. */
.cine .cmplz-manage-consent,
.cine #cmplz-manage-consent-container .cmplz-manage-consent {
  background-color: var(--cine-3) !important;
  color: var(--cine-text-2) !important;
  border: 1px solid var(--cine-line) !important;
}

/* Toggle switches. */
.cine .cmplz-cookiebanner .cmplz-slider { background-color: var(--cine-4) !important; }
.cine .cmplz-cookiebanner input:checked + .cmplz-slider { background-color: var(--cine-green) !important; }


/* ---------------------------------------------------------------------------
   18  CINEMATIC MOTION
   Classes are applied by cinefx.js; the styles live here so the CSS stays the
   single source of truth for how the site looks.
   ------------------------------------------------------------------------ */
.cine .cine-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--cine-ease), transform 0.85s var(--cine-ease);
}
.cine .cine-reveal.cine-in { opacity: 1; transform: none; }

/* Hero slide drift. Swiper marks the visible slide with .swiper-slide-active. */
.cine .ms-hero-swiper .swiper-slide img {
  transform: scale(1.02);
  transition: transform 0.6s linear;
}
.cine .ms-hero-swiper .swiper-slide-active img {
  animation: cineKenBurns 9s var(--cine-ease) forwards;
}
@keyframes cineKenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.13); }
}

.cine .ms-about-media img,
.cine .ms-callout {
  transition: transform 1.4s var(--cine-ease);
}
.cine .ms-about-media { overflow: hidden; border-radius: 12px; }
.cine .ms-about-media:hover img { transform: scale(1.05); }

/* WebGL canvases. Fixed, behind the page; the grain plate sits above it. */
#cine-bg, #cine-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#cine-bg { z-index: -1; }
#cine-grain { z-index: 2147482000; opacity: 0.9; }

/* Once the WebGL backdrop is live the sections go translucent so the
   atmosphere reads through them. Applied only when the canvas exists. */
.cine.cine-gl .ms-stats::after,
.cine.cine-gl .ms-accreditations::after,
.cine.cine-gl .ms-reviews::after,
.cine.cine-gl .ms-faq::after,
.cine.cine-gl .ms-about::after,
.cine.cine-gl .ms-insurance::after,
.cine.cine-gl .ms-blog::after,
.cine.cine-gl .ms-services::after {
  background: linear-gradient(180deg, rgba(6, 9, 7, 0.66), rgba(10, 14, 11, 0.54));
}
.cine.cine-gl .ms-footer { background-color: rgba(6, 9, 7, 0.80); }

/* The body itself must go transparent or it paints straight over the canvas,
   which sits at z-index -1. Note this is `body.cine.cine-gl`, not
   `.cine.cine-gl body` - the latter asks for a <body> inside the body and
   matches nothing, which is exactly how the backdrop ended up invisible.
   !important because the generated sheet gives body an opaque surface colour
   (the parent painted it var(--ms-white)). */
body.cine.cine-gl { background-color: transparent !important; }
html:has(body.cine-gl) { background-color: var(--cine-0); }


/* ---------------------------------------------------------------------------
   19  RESPONSIVE
   ------------------------------------------------------------------------ */
/* These repeat the :has() qualifier deliberately. The base grid rule carries it,
   which makes it more specific than a bare `.cine .ms-services > .container`;
   without matching that specificity the responsive columns never win and the
   cards stay three-across at every width - 101px each on a phone. */
@media (max-width: 1100px) {
  .cine .ms-services > .container:has(> [class*="ms-svc-grid"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The full desktop navigation switches on at 768px, but its contents need about
   1,125px to sit on one line: seven menu items, three social icons and two
   CTAs. Everywhere between those two numbers the header was ~160px wider than
   the viewport, which gave every page a horizontal scrollbar - at 1150px the
   document scrolled to 1256px.

   Rather than move the breakpoint and bury the whole menu behind a hamburger on
   a laptop, the row is allowed to wrap and the space is reclaimed: the social
   icons step aside (the same three links are in the footer) and the menu and
   CTAs tighten. Above 1280px nothing here applies. */
@media (min-width: 768px) and (max-width: 1279px) {
  .cine .ms-nav,
  .cine .ms-nav-right,
  .cine .ms-menu {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .cine .ms-nav-right,
  .cine .ms-menu { justify-content: flex-end; }

  .cine .ms-nav-social { display: none; }

  .cine .ms-menu > li > a {
    font-size: 11px;
    letter-spacing: 0.02em;
    padding-left: 7px;
    padding-right: 7px;
  }
  .cine .ms-nav-ctas { gap: 8px; }
  .cine .ms-nav-cta-call,
  .cine .ms-nav-cta-consult {
    padding: 7px 11px;
    font-size: 9.5px;
  }
}

@media (max-width: 680px) {
  .cine .ms-services > .container:has(> [class*="ms-svc-grid"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .cine .ms-svc-card-body p { -webkit-line-clamp: 4; line-clamp: 4; }
  .cine .ms-svc-card,
  .cine .ms-svc-card-body { min-height: 240px; }

  /* Hover states never fire on touch, so the Ken Burns layer would sit at
     rest forever - drive it off view instead (see cinefx.js). */
  .cine .ms-svc-card:hover { transform: none; }

  /* Slightly brighter secondary text: small type on a phone in daylight. */
  .cine { --cine-text-2: #D5DED8; --cine-muted: #A6B2AA; }
}

@media (max-width: 480px) {
  .cine .ms-svc-card-body { padding: 18px; }
  .cine .ms-svc-card-body h3 { font-size: 17px; }
}


/* ---------------------------------------------------------------------------
   20  REDUCED MOTION / PRINT / A11Y
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cine *,
  .cine *::before,
  .cine *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cine .cine-reveal { opacity: 1; transform: none; }
  .cine .cine-kb { transform: scale(1.04); }
  #cine-grain { display: none; }
}

@media print {
  #cine-bg, #cine-grain { display: none !important; }
  .cine, .cine body { background: #fff !important; color: #000 !important; }
  .cine h1, .cine h2, .cine h3, .cine p, .cine li { color: #000 !important; }
}

/* Windows high-contrast mode: drop the decoration, keep the structure. */
@media (forced-colors: active) {
  #cine-bg, #cine-grain { display: none !important; }
  .cine .ms-svc-card::before { background: none !important; }
}