/* ═══ MediaNet AV — landing page system ═══════════════════════════════════════
   Loaded by every /landing/ page via one Elementor HTML widget.

   RULE OF THIS FILE
   Elementor owns every property it has a control for. Colour, typography,
   padding, margin, background, border and responsive visibility are all set on
   the widgets themselves and are editable in the Elementor editor.

   This file may ONLY contain what Elementor cannot express, and every selector
   is kept to a single .mn- class (0,1,x) so it can never out-rank Elementor's
   own per-element CSS (0,3,x). If a user changes something in the editor, the
   editor wins. Always.
   ══════════════════════════════════════════════════════════════════════════ */

html{scroll-padding-top:6rem}
body{background:#fff}
::selection{background:#EC1F28;color:#fff}

/* the container holding the stylesheet <link>s */
.mn-headblock{display:none!important}

/* The theme puts `margin-bottom:1.5em` on every <p>, which the mockup does not
   have. Reset it at (0,1,1) so the Text Editor's own "Paragraph Spacing" control
   (which Elementor emits at (0,3,1)) still wins whenever a user sets it. */
.mn-lp p{margin:0}

/* ── 1. width + layout geometry ──────────────────────────────────────────────
   max-width has no control on a full-width container; the 1px hairline grid is
   a geometry trick (gap + background bleed), not a style. */
.mn-wrap{max-width:1280px;margin-inline:auto;width:100%}
/* Measure (line length, DESIGN-RULES §5). Elementor's frontend.min.css pins every
   widget to `max-width:100%` at (0,4,0) — that is plugin CSS, not a user control,
   so !important here beats the plugin without ever beating the editor. The widget's
   own Advanced > Width control sets `width` and still works. */
.mn-measure{max-width:672px!important}      /* mockup max-w-2xl — section + hero ledes */
.mn-measure-lg{max-width:768px!important}   /* mockup max-w-3xl — section H2s, well copy */
.mn-measure-hero{max-width:896px!important} /* mockup max-w-4xl — the hero H1 only */
.mn-full{width:100%}

.mn-stack,.mn-cell,.mn-wrap,.mn-cellbody,.mn-stat,.mn-outline,.mn-well,.mn-hero__inner{
  display:flex!important;flex-direction:column;align-items:flex-start;gap:0!important;
}
/* flex-direction / justify / align / wrap / gap on these rows are set on the
   CONTAINER's own Elementor controls — Elementor's `.e-con.e-flex` rules (0,2,0)
   outrank a single class here, so CSS could never win anyway. All that is left
   is stopping the widgets stretching, which has no control. */
.mn-row > .elementor-widget,
.mn-btnrow > .elementor-widget,
.mn-badgerow > .elementor-widget{width:auto!important;flex:0 0 auto!important}
.mn-row > .elementor-widget:first-child{margin-right:auto}
@media(max-width:767px){.mn-btnrow > .elementor-widget{width:100%!important}}

.mn-grid{display:grid!important;gap:1px!important;grid-template-columns:1fr;align-items:stretch}
@media(min-width:768px){
  .mn-grid--2{grid-template-columns:repeat(2,1fr)}
  .mn-grid--3{grid-template-columns:repeat(3,1fr)}
}
/* 4-up trust strip (sound masking). Mockup breaks 1 / 2 / 4, not 1 / 4. */
@media(min-width:640px){.mn-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mn-grid--4{grid-template-columns:repeat(4,1fr)}}
/* 5-up process row. The mockup is sm:grid-cols-2 lg:grid-cols-5 — one column per
   step. Forcing 5 steps into a 3-up grid leaves a dead sixth cell. */
@media(min-width:640px){.mn-grid--5{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mn-grid--5{grid-template-columns:repeat(5,1fr)}}
/* Lead-in words inside a list item. Elementor has no control for a <strong> inside
   a text editor, so the colour has to live here. */
.mn-list strong{color:#2B161B;font-weight:600}
.mn-statgrid{display:grid!important;gap:1px!important;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.mn-statgrid{grid-template-columns:repeat(4,1fr)}}
.mn-logogrid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:32px!important;
  align-items:center}
@media(min-width:768px){.mn-logogrid{grid-template-columns:repeat(7,1fr)}}
/* Corporate LED display strip: six logos, breaking 3 / 6 — not 4 / 7. Same specificity
   as .mn-logogrid, so it MUST sit after both of that rule's declarations. */
.mn-logogrid--6{grid-template-columns:repeat(3,1fr)}
@media(min-width:768px){.mn-logogrid--6{grid-template-columns:repeat(6,1fr)}}
.mn-split{display:grid!important;gap:48px!important;grid-template-columns:1fr;align-items:start}
@media(min-width:768px){.mn-split{gap:64px!important;grid-template-columns:1.05fr 1fr;
  align-items:center}}
@media(min-width:768px){.mn-split--even{grid-template-columns:1fr 1fr;align-items:start}}
/* Photo-led split: the commissioning section is md:grid-cols-[1fr_1.05fr], photo wider.
   Must sit AFTER .mn-split — same specificity, so source order decides. */
@media(min-width:768px){.mn-split--photo{grid-template-columns:1fr 1.05fr}}
.mn-split--table{gap:32px!important}
@media(min-width:768px){.mn-split--table{gap:48px!important;grid-template-columns:1.1fr 1fr;
  align-items:start}}
.mn-footgrid{display:grid!important;grid-template-columns:1fr;gap:32px!important}
@media(min-width:640px){.mn-footgrid{grid-template-columns:repeat(3,1fr)}}
/* .mn-footer__top layout is on the container's own flex controls */

/* ── 2. the red dash before an eyebrow (a ::before, no control exists) ────── */
.mn-eyebrow--dash p::before{content:"";display:inline-block;height:2px;width:20px;
  background:#EC1F28;margin-right:10px;vertical-align:.2em}

/* ── 3. the red full stop (brand signature, inline span) ─────────────────── */
.mn-period{color:#EC1F28}

/* ── 4. hero scrim layers + film grain (stacked gradients, no control) ───── */
.mn-hero{position:relative;overflow:hidden}
.mn-hero > .mn-hero__img{position:absolute!important;inset:0;z-index:0;margin:0;padding:0;
  pointer-events:none;width:100%!important}
.mn-hero__img img{width:100%;height:100%;object-fit:cover;opacity:.4;display:block}
.mn-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(1100px 560px at 74% -12%,rgba(236,31,40,.18),transparent 62%),
             rgba(26,16,18,.8)}
@media(min-width:768px){
  .mn-hero::before{background:
    radial-gradient(1100px 560px at 74% -12%,rgba(236,31,40,.18),transparent 62%),
    linear-gradient(100deg,rgba(26,16,18,.93) 0%,rgba(26,16,18,.78) 45%,rgba(26,16,18,.38) 100%)}
}
.mn-hero::after,.mn-ph::after{content:"";position:absolute;inset:0;opacity:.4;
  mix-blend-mode:overlay;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.mn-hero__inner,.mn-statband{position:relative;z-index:2}

/* DESIGN-RULES §10.4 locks two rotated, blurred light shafts into the hero
   layering. Pure decoration, no Elementor control can express it. */
.mn-hero__inner::before,.mn-hero__inner::after{
  content:"";position:absolute;top:-33%;height:170%;pointer-events:none;z-index:-1;
}
.mn-hero__inner::before{left:16%;width:80px;transform:rotate(16deg);filter:blur(16px);
  background:linear-gradient(to bottom,rgba(236,31,40,.20),rgba(236,31,40,.04),transparent)}
.mn-hero__inner::after{left:38%;width:144px;transform:rotate(24deg);filter:blur(24px);
  background:linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.03),transparent)}

/* ── 5. photo slot: neutral placeholder texture + pinned caption ─────────── */
.mn-ph{position:relative;overflow:hidden;background-color:#222226;
  background-image:
    radial-gradient(110% 80% at 55% 25%,rgba(255,255,255,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 56px),
    linear-gradient(160deg,#2F2F34 0%,#1C1C20 72%)}
.mn-ph--43{aspect-ratio:4/3}
.mn-ph--1610{aspect-ratio:16/10}
.mn-ph__img{position:absolute!important;inset:0;margin:0;padding:0;width:100%!important}
.mn-ph__img img{width:100%;height:100%;object-fit:cover;display:block}
.mn-ph__tag{position:absolute!important;bottom:12px;left:12px;z-index:3;width:auto!important}
.mn-ph__tag p{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);
  padding:2px 6px;margin:0;backdrop-filter:blur(4px)}

/* ── 6. list markers (::before squares, no control) ──────────────────────── */
.mn-list ul{list-style:none;margin:0;padding:0}
.mn-list li{position:relative;padding-left:24px;margin:0 0 16px}
.mn-list li:last-child{margin-bottom:0}
.mn-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  background:#EC1F28}
.mn-list--cross li::before{background:rgba(75,79,88,.4)}

/* ── 7. table internals (cells are not Elementor controls) ───────────────── */
.mn-tablewrap{border:1px solid rgba(0,0,0,.1);border-bottom:0;overflow-x:auto}
.mn-tablewrap table{width:100%;min-width:420px;border-collapse:collapse;text-align:left;margin:0}
.mn-tablewrap thead tr{background:#2B161B}
.mn-tablewrap th,.mn-tablewrap td{padding:16px;border:0}
@media(min-width:768px){.mn-tablewrap th,.mn-tablewrap td{padding:20px}}
.mn-tablewrap thead th{font-weight:600;color:#fff}
.mn-tablewrap tbody tr{border-top:1px solid rgba(0,0,0,.1)}
.mn-tablewrap tbody th{background:#F6F7F8;font-weight:600;color:#2B161B}
.mn-tablenote p{background:#F6F7F8;border:1px solid rgba(0,0,0,.1);border-top:0;
  padding:16px;margin:0}
.mn-quote p{border-left:2px solid #EC1F28;padding-left:16px;margin:0}

/* ── 8. certification badges (inline pill lockup) ────────────────────────── */
.mn-badge{display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.2);padding:6px 12px;margin:0}
.mn-badge__name{font-family:proxima-nova,Montserrat,sans-serif;font-size:12px;
  font-weight:900;color:#fff;text-transform:none;letter-spacing:0}
.mn-badge__val{font-size:11px;color:rgba(231,229,230,.85)}

/* ── 9. buttons: min-height is not a Button control ──────────────────────── */
.mn-btn .elementor-button{min-height:48px;transition:background-color .15s ease,
  border-color .15s ease,color .15s ease}
.mn-btn--sm .elementor-button{min-height:44px}
.mn-tel .elementor-button,.mn-bigtel .elementor-button,.mn-footertel .elementor-button{
  min-height:44px;justify-content:flex-start}
.mn-tel .elementor-button-icon{color:#EC1F28;fill:#EC1F28}

/* ── 10. page chrome behaviour (position, not style) ─────────────────────── */
.mn-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(4px)}
.mn-sticky{position:fixed;inset-inline:0;bottom:0;z-index:50}
/* The pojo-accessibility button is position:fixed at bottom:24px right:24px INSIDE a
   shadow root (#ea11y-root), so no page CSS can move it. Instead the sticky CTA keeps
   clear of it: 44px button + 24px inset = 68px, +8px breathing room. Keeps the
   accessibility widget reachable, which matters — MediaNet sells to schools and public
   entities and publishes an accessibility statement. */
.mn-sticky{padding-right:76px}
.mn-stickyspacer{height:80px}

/* ── 11. logo sizing — beats Elementor's own
   `.elementor-widget-image a img[src$=".svg"]{width:48px}` (0,3,2), which is
   plugin CSS, not a user control. */
.mn-headerlogo img,.mn-footerlogo img{width:auto!important;max-width:none;display:block}
.mn-headerlogo img{height:32px}
.mn-footerlogo img{height:36px}
@media(min-width:768px){
  .mn-headerlogo img{height:36px}
  .mn-footerlogo img{height:40px}
}
.mn-headerlogo a,.mn-footerlogo a{display:inline-flex;align-items:center;min-height:44px}
.mn-trustlogos img{width:auto;max-width:100%;object-fit:contain;display:block;margin-inline:auto}
.mn-logo-tall img{height:28px}
.mn-logo-mid img{height:24px}
.mn-logo-short img{height:20px}
@media(min-width:768px){
  .mn-logo-tall img{height:32px}
  .mn-logo-mid img{height:28px}
  .mn-logo-short img{height:24px}
}

/* ── 12. form box + select chevron (no widget control for the wrapper) ───── */
.mn-form{border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);padding:24px}
/* Elementor Pro's Form widget has NO label-typography control, so the mono/uppercase
   eyebrow treatment on labels can only live here. Colour IS a control
   (`label_color`) and is deliberately not set below. */
.mn-form .elementor-field-label{
  font-family:ibm-plex-mono,"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:1.04px;
  line-height:1.5;display:block;margin-bottom:4px;
}
@media(min-width:768px){.mn-form{padding:32px}}
.mn-form .elementor-field-textual::placeholder{color:rgba(231,229,230,.6);opacity:1}
.mn-form input.elementor-field-textual,
.mn-form select.elementor-field-textual{height:48px}
/* No custom select arrow here: Elementor already draws one on
   `.elementor-select-wrapper::before`, and its colour is driven by the widget's
   Field Border Color control. Drawing a second one gave a doubled chevron. */
.mn-form select.elementor-field-textual option{background:#1A1012;color:#fff}

/* ── 13. accessibility ───────────────────────────────────────────────────── */
.mn-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mn-lp a:focus-visible,.mn-lp button:focus-visible,.mn-lp input:focus-visible,
.mn-lp select:focus-visible,.mn-lp textarea:focus-visible{
  outline:2px solid #EC1F28;outline-offset:2px}
.mn-lp{font-style:normal}

@media(prefers-reduced-motion:reduce){
  .mn-lp .elementor-invisible{visibility:visible!important;animation:none!important;opacity:1!important}
  .mn-lp *,.mn-lp *::before,.mn-lp *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── 15. Q-SYS room-control page ─────────────────────────────────────────
   Everything below exists because the Q-SYS mockup breaks its grids at
   different widths from the LED pages, or paints something Elementor has no
   control for. Nothing here is used by pages 8965, 8976 or 8997. */

/* Seven white partner logos on the paper band, laid out as a wrapping flex row
   rather than a grid. Direction, wrap and gap are on the container's own flex
   controls; only the invert and the extra-small height need CSS. */
.mn-logorow > .elementor-widget{width:auto!important;flex:0 0 auto!important}
.mn-trustlogos--invert img{filter:invert(1)}
.mn-logo-xs img{height:16px}
@media(min-width:768px){.mn-logo-xs img{height:20px}}

/* Grid break points the LED pages did not need. One class per mockup grid. */
@media(min-width:640px){.mn-grid--23{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mn-grid--23{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.mn-grid--3sm{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.mn-grid--2sm{grid-template-columns:repeat(2,1fr)}}
.mn-grid--ui4{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.mn-grid--ui4{grid-template-columns:repeat(4,1fr)}}
.mn-grid--ui3{grid-template-columns:repeat(3,1fr)}

/* Two-column splits that break at 1024, not 768. These MUST sit after every
   .mn-split rule above: same specificity, so source order decides. */
.mn-split--lg{gap:48px!important;grid-template-columns:1fr;align-items:start}
@media(min-width:1024px){.mn-split--lg{gap:64px!important;grid-template-columns:1fr 1fr}}
.mn-split--lg10{gap:40px!important;grid-template-columns:1fr;align-items:start}
@media(min-width:1024px){.mn-split--lg10{gap:56px!important;grid-template-columns:1fr 1fr}}

.mn-ph--169{aspect-ratio:16/9}

/* The consult band on this page carries the hero's film grain plus a red corner
   glow. Two stacked decorative layers, so no Elementor background control fits. */
.mn-band-glow{position:relative;overflow:hidden}
.mn-band-glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1000px 520px at 82% 0%,rgba(236,31,40,.16),transparent 62%)}
.mn-band-glow::after{content:"";position:absolute;inset:0;z-index:0;opacity:.4;
  mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.mn-band-glow > *{position:relative;z-index:1}

/* The coded control surface. Its keys centre their label, which .mn-cell cannot do
   (it pins children to the start), so they get their own flex class. */
.mn-uikey{display:flex!important;flex-direction:column;align-items:center;
  justify-content:center;gap:0!important}
.mn-uistatus p{display:flex;align-items:center;gap:8px;margin:0}
.mn-uistatus .mn-dot{display:inline-block;width:6px;height:6px;background:#EC1F28;
  flex:0 0 auto}
/* mockup max-w-xl — the consult lede on this page only */
.mn-measure-sm{max-width:576px!important}

/* The #story scene's status chips light up as the room wakes. scene.py's shared BASE
   has no rule for that state, so it lives here, scoped to the scene wrapper. */
.mn-story .l-chip[data-state="on"]{border-color:rgba(255,255,255,.30)}
.mn-story .l-chip[data-state="on"] .l-dot{background-color:#EC1F28}

/* ── 16. Five-logo display strip (Direct-View LED page, Sept 2026) ─────────
   Mobile: three on top and two centred underneath, on a six-track grid.
   Desktop: one row of five. Same specificity as .mn-logogrid, so this MUST
   stay after both of that rule's declarations. */
.mn-logogrid--5{grid-template-columns:repeat(6,1fr)}
.mn-logogrid--5 > *{grid-column:span 2}
.mn-logogrid--5 > :nth-child(4){grid-column:2 / span 2}
@media(min-width:768px){
  .mn-logogrid--5{grid-template-columns:repeat(5,1fr)}
  .mn-logogrid--5 > *,.mn-logogrid--5 > :nth-child(4){grid-column:auto}
}