/* ==========================================================================
   ORION INTEGRATED SYSTEMS — Design System
   --------------------------------------------------------------------------
   This is the single source of truth for the site's look.
   In WordPress/Elementor this file is enqueued once (see SETUP-GUIDE.md);
   every page then just uses the class names documented below.

   Change a colour, font or spacing value in :root and it updates everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand palette (supplied by Orion) ---- */
  --orion-blue:  #2063A5;   /* Main            */
  --ice-blue:    #68A0D6;   /* Secondary       */
  --orion-navy:  #21467B;   /* Accent          */
  --ice:         #ACC4D8;   /* Accent / text   */
  --white:       #FFFFFF;   /* Background+text */
  --black:       #231F20;   /* Text            */

  /* ---- Accessible text variant ----
     Ice Blue on a white background measures 2.77:1, below the WCAG AA minimum
     (4.5:1 for body text, 3:1 for large text). This slightly deeper shade of
     the same hue measures 4.51:1, so it is safe at any size. It is used ONLY
     for Ice Blue text sitting on white; buttons, rules, borders and text on
     the blue and navy panels keep the exact brand --ice-blue.

     Prefer exact Figma fidelity over the contrast fix? Change the line below
     to:  --ice-blue-text: var(--ice-blue);  */
  --ice-blue-text: #4F7AA4;

  /* ---- Derived / supporting tones ---- */
  --blue-dark:   #1B5490;   /* hover state for --orion-blue           */
  --navy-dark:   #1A3861;   /* hover state for --orion-navy           */
  --pale-blue:   #D8E4EC;   /* soft panel + "MORE" button fill        */
  --pale-tint:   #EEF3F8;   /* very light section wash                */
  --grey-line:   #DCE4EB;   /* hairline dividers                      */
  --body-text:   #3A4A5C;   /* long-form copy on white                */

  /* ---- The Lighting Lofts sub-brand ---- */
  --loft-gold:   #D2AF64;
  --loft-gold-dk:#B8934A;
  --loft-dark:   #1A1A1A;

  /* ---- Typography ----
     Futura and Avenir are commercial faces. The stacks below use the real
     font when it is available (licensed webfont or installed locally) and
     fall back to the closest free equivalent: Jost for Futura,
     Nunito Sans for Avenir. See SETUP-GUIDE.md § Fonts.                    */
  --font-display: 'Futura', 'Futura PT', 'FuturaPT', 'Jost', 'Century Gothic', sans-serif;
  --font-title:   'Poppins', 'Jost', sans-serif;
  --font-body:    'Avenir', 'Avenir Next', 'AvenirNext', 'Nunito Sans', 'Poppins', sans-serif;
  --font-loft:    'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* ---- Type scale (fluid: shrinks on small screens automatically) ---- */
  --fs-display:  clamp(2.25rem, 1.30rem + 2.60vw, 3.75rem);  /* 36 → 60px  */
  --fs-h1:       clamp(2.00rem, 1.35rem + 1.80vw, 3.00rem);  /* 32 → 48px  */
  --fs-h2:       clamp(1.55rem, 1.15rem + 1.10vw, 2.25rem);  /* 25 → 36px  */
  --fs-h3:       clamp(1.20rem, 1.02rem + 0.50vw, 1.50rem);  /* 19 → 24px  */
  --fs-lead:     clamp(1.00rem, 0.95rem + 0.20vw, 1.125rem); /* 16 → 18px  */
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  clamp(0.80rem, 0.76rem + 0.14vw, 0.9375rem);

  /* ---- Spacing ---- */
  --space-2xs: 0.375rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3rem;
  --space-xl:  4.5rem;
  --space-2xl: 6.5rem;

  /* Vertical rhythm between major page sections */
  --section-y:  clamp(3.5rem, 2rem + 5vw, 7rem);

  /* ---- Layout ---- */
  --container:  1680px;
  --gutter:     clamp(1.25rem, 3.5vw, 4.5rem);
  --nav-h:      92px;

  /* ---- Effects ---- */
  --radius:     0px;          /* the design is squared-off throughout */
  --shadow-sm:  0 2px 10px rgba(35, 31, 32, .08);
  --shadow-md:  0 10px 34px rgba(33, 70, 123, .16);
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --t-fast:     .18s var(--ease);
  --t-base:     .32s var(--ease);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--orion-navy);
  margin: 0 0 var(--space-sm);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a { color: var(--orion-blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-dark); }

ul, ol { margin: 0 0 var(--space-sm); padding-left: 1.25rem; }

/* Visible keyboard focus — required for accessibility */
:focus-visible {
  outline: 3px solid var(--ice-blue);
  outline-offset: 3px;
}

/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 999;
  background: var(--orion-navy); color: #fff;
  padding: .75rem 1.25rem; font-family: var(--font-title); font-weight: 600;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.o-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.o-container--narrow { max-width: 1100px; }
.o-container--text   { max-width: 780px; }

.o-section { padding-block: var(--section-y); }
.o-section--tight  { padding-block: calc(var(--section-y) * .6); }
.o-section--flush  { padding-block: 0; }

/* Background variants */
.o-bg-white { background: var(--white); }
.o-bg-tint  { background: var(--pale-tint); }
.o-bg-blue  { background: var(--orion-blue); }
.o-bg-navy  { background: var(--orion-navy); }
.o-bg-dark  { background: var(--loft-dark); }

.o-bg-blue, .o-bg-navy, .o-bg-dark { color: var(--white); }
.o-bg-blue h1, .o-bg-blue h2, .o-bg-blue h3,
.o-bg-navy h1, .o-bg-navy h2, .o-bg-navy h3,
.o-bg-dark h1, .o-bg-dark h2, .o-bg-dark h3 { color: var(--white); }

/* Simple responsive grid */
.o-grid { display: grid; gap: var(--space-md); }
.o-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .o-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .o-grid--2, .o-grid--3, .o-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: .95rem 2.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-fast);
}
.o-btn:hover { transform: translateY(-2px); }
.o-btn:active { transform: translateY(0); }

/* Translucent light-blue button used over the hero photography */
.o-btn--hero {
  background: rgba(104, 160, 214, .82);
  color: var(--white);
  backdrop-filter: blur(2px);
}
.o-btn--hero:hover { background: var(--ice-blue); color: var(--white); }

.o-btn--primary { background: var(--orion-blue); color: var(--white); }
.o-btn--primary:hover { background: var(--blue-dark); color: var(--white); }

.o-btn--iceblue { background: var(--ice-blue); color: var(--white); }
.o-btn--iceblue:hover { background: var(--orion-blue); color: var(--white); }

.o-btn--pale { background: var(--pale-blue); color: var(--orion-navy); letter-spacing: .12em; }
.o-btn--pale:hover { background: var(--white); color: var(--orion-navy); }

.o-btn--outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.o-btn--outline-white:hover { background: var(--white); color: var(--orion-navy); }

.o-btn--gold { background: var(--loft-gold); color: var(--white); letter-spacing: .12em; }
.o-btn--gold:hover { background: var(--loft-gold-dk); color: var(--white); }

.o-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. SECTION HEADINGS
   The recurring motif: a vertical gradient bar on the left, a small
   uppercase eyebrow with a rule beneath it, then the big title.
   -------------------------------------------------------------------------- */
.o-head {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-lg);
  max-width: 46ch;
}
/* the vertical bar */
.o-head::before {
  content: "";
  position: absolute; left: 0; top: .1em; bottom: .1em;
  width: 5px;
  background: linear-gradient(to bottom, var(--ice-blue), var(--orion-blue));
}

.o-head__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orion-blue);
  margin-bottom: .45rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--orion-blue);
}

.o-head__title {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--orion-navy);
  margin: 0;
  text-transform: uppercase;
  line-height: 1.15;
}
.o-head__title--sentence { text-transform: none; }

.o-head__sub {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--ice-blue-text);
  margin-top: .3rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Light variant, for use on the blue and dark bands */
.o-head--light .o-head__eyebrow { color: var(--white); border-bottom-color: rgba(255,255,255,.85); }
.o-head--light .o-head__title   { color: var(--white); }
.o-head--light .o-head__sub     { color: var(--ice); }
.o-head--light::before { background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.35)); }

/* Right-aligned variant (used by "WHO WE OFFER / OUR SOLUTIONS") */
.o-head--right {
  padding-left: 0; padding-right: 1.5rem;
  text-align: right; margin-left: auto;
}
.o-head--right::before { left: auto; right: 0; }

/* Centred variant (used by "Our Solutions / World Class Quality") */
.o-head--center {
  padding-left: 0; text-align: center;
  margin-inline: auto; max-width: 40ch;
}
.o-head--center::before { display: none; }
.o-head--center .o-head__title {
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--orion-blue);
  display: inline-block;
}
.o-head--center .o-head__eyebrow { border: 0; padding-bottom: 0; }

/* Big page title, e.g. "Our Team / The Best of the Best" */
.o-pagetitle {
  position: relative;
  padding-left: 1.5rem;
  display: inline-block;
  margin-bottom: var(--space-lg);
}
.o-pagetitle::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(to bottom, var(--ice-blue), var(--orion-blue));
}
.o-pagetitle::after {
  content: ""; display: block; height: 3px; margin-top: .75rem;
  background: linear-gradient(to right, var(--ice-blue), var(--orion-blue));
}
.o-pagetitle h1 {
  font-family: var(--font-title);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--orion-navy);
  margin: 0;
}
.o-pagetitle p {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--ice-blue-text);
  margin: .2rem 0 0;
}

/* --------------------------------------------------------------------------
   6. SITE HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.o-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.o-header--bordered { border-bottom-color: var(--orion-blue); }
.o-header.is-stuck { box-shadow: var(--shadow-sm); }

.o-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-h);
}

.o-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.o-logo img { height: 52px; width: auto; }

.o-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.6rem); }

.o-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orion-blue);
  padding: .4rem 0;
  position: relative;
  white-space: nowrap;
}
.o-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--orion-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.o-nav__link:hover::after,
.o-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.o-nav__link[aria-current="page"] { color: var(--orion-navy); }

/* Mobile menu toggle */
.o-navtoggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: .6rem; margin-right: -.6rem;
}
.o-navtoggle span {
  display: block; width: 26px; height: 2px; margin: 5px 0;
  background: var(--orion-blue);
  transition: transform var(--t-base), opacity var(--t-fast);
}
.o-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.o-navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.o-navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .o-navtoggle { display: block; }
  .o-nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--grey-line);
    box-shadow: var(--shadow-sm);
    max-height: 0; overflow: hidden;
    transition: max-height var(--t-base);
  }
  .o-nav.is-open { max-height: 70vh; overflow-y: auto; }
  .o-nav__link {
    padding: 1.1rem var(--gutter);
    border-bottom: 1px solid var(--grey-line);
    font-size: 1rem;
  }
  .o-nav__link::after { display: none; }
  .o-logo img { height: 44px; }
}

/* --------------------------------------------------------------------------
   7. HERO — full-bleed photography behind a blue wash, with a
      cross-fading slideshow background.
   -------------------------------------------------------------------------- */
.o-hero {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(520px, 68vh, 820px);
  padding-block: var(--space-xl);
  overflow: hidden;
  color: var(--white);
}

/* --- slideshow layer --- */
.o-slideshow {
  position: absolute; inset: 0; z-index: -2;
  background: var(--orion-navy);   /* shows while the first image loads */
}
.o-slideshow__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  will-change: opacity;
}
.o-slideshow__slide.is-active { opacity: 1; }

/* Very slow Ken-Burns drift; disabled for reduced-motion users below */
.o-slideshow--kenburns .o-slideshow__slide.is-active {
  animation: o-kenburns 14s linear forwards;
}
@keyframes o-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.07); }
}

/* --- blue wash over the photography --- */
.o-hero__wash {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(32, 99, 165, .94)  0%,
    rgba(32, 99, 165, .88) 30%,
    rgba(32, 99, 165, .58) 58%,
    rgba(32, 99, 165, .34) 82%,
    rgba(32, 99, 165, .30) 100%
  );
}
/* Dark-photography variant (The Lighting Lofts) */
.o-hero__wash--warm {
  background: linear-gradient(
    100deg,
    rgba(26, 26, 26, .88)  0%,
    rgba(26, 26, 26, .62) 40%,
    rgba(26, 26, 26, .30) 75%,
    rgba(26, 26, 26, .38) 100%
  );
}

.o-hero__inner { position: relative; width: 100%; }

.o-hero__content {
  max-width: 47rem;
  position: relative;
  padding-left: 1.5rem;
}
/* The vertical rule runs alongside the copy only — not past the buttons —
   which is why the copy lives in its own .o-hero__lede wrapper. */
.o-hero__lede {
  position: relative;
  padding-bottom: .35rem;
  margin-bottom: var(--space-md);
}
.o-hero__lede::before {
  content: ""; position: absolute; left: -1.5rem; top: .25rem; bottom: 0;
  width: 3px; background: rgba(255,255,255,.75);
}
.o-hero__lede > :last-child { margin-bottom: 0; }

.o-hero__title {
  font-family: var(--font-title);
  font-size: var(--fs-display);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 .25rem;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.o-hero__title--serif {
  font-family: var(--font-loft);
  font-weight: 600;
  letter-spacing: 0;
}

.o-hero__kicker {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ice-blue);
  margin: 0 0 .85rem;
}
.o-hero__kicker--gold { color: var(--loft-gold); font-family: var(--font-display); font-weight: 500; letter-spacing: .1em; }

.o-hero__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255,255,255,.96);
  margin: 0 0 var(--space-md);
  max-width: 34rem;
}

.o-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Slideshow dot controls */
.o-slideshow__dots {
  position: absolute; z-index: 3;
  right: var(--gutter); bottom: 1.5rem;
  display: flex; gap: .5rem;
}
.o-slideshow__dot {
  width: 10px; height: 10px; padding: 0;
  border: 1px solid rgba(255,255,255,.85);
  background: transparent; cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast), transform var(--t-fast);
}
.o-slideshow__dot:hover { transform: scale(1.2); }
.o-slideshow__dot[aria-selected="true"] { background: var(--white); }

@media (max-width: 620px) {
  .o-hero { min-height: 560px; }
  .o-hero__actions .o-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   8. STAT BAR
   -------------------------------------------------------------------------- */
.o-stats { background: var(--orion-blue); color: var(--white); }
.o-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
}
.o-stat { padding-inline: clamp(.75rem, 2vw, 2rem); }
.o-stat + .o-stat { border-left: 1px solid rgba(255,255,255,.38); }

.o-stat__num {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  margin-bottom: .35rem;
}
.o-stat__label {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--white);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .o-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
  .o-stat:nth-child(odd) { border-left: 0; }
  .o-stat:nth-child(n+3) { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.28); }
}

/* --------------------------------------------------------------------------
   9. ABOUT — text panel beside offset photography
   -------------------------------------------------------------------------- */
.o-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.o-panel {
  background: var(--orion-blue);
  color: var(--white);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.o-panel p { color: rgba(255,255,255,.97); }
.o-panel--navy { background: var(--orion-navy); }

/* Photo with the offset navy block behind its lower-right corner */
.o-offsetimg { position: relative; display: block; width: 100%; }
.o-offsetimg img {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;        /* the design crops this photo close to square */
  object-fit: cover;
  object-position: center 40%;
}
.o-offsetimg::after {
  content: ""; position: absolute; z-index: 0;
  right: -1.5rem; bottom: -1.5rem;
  width: 42%; height: 55%;
  background: var(--orion-blue);
}
.o-offsetimg--navy::after { background: var(--orion-navy); }

/* Photo framed by two offset brand-blue bars (used for the president) */
.o-framedimg { position: relative; display: inline-block; }
.o-framedimg img { position: relative; z-index: 1; display: block; }
.o-framedimg::before,
.o-framedimg::after {
  content: ""; position: absolute; z-index: 0;
  background: var(--orion-blue);
}
.o-framedimg::before { left: -.85rem; top: -.85rem;    width: 62%; height: 62%; }
.o-framedimg::after  { right: -.85rem; bottom: -.85rem; width: 62%; height: 62%; }

@media (max-width: 860px) {
  .o-about__grid { grid-template-columns: minmax(0, 1fr); }
  .o-offsetimg::after { right: -.75rem; bottom: -.75rem; }
}

/* --------------------------------------------------------------------------
   10. DEFINITION BLOCK ("integrated")
       Centred dictionary entry flanked by two blue gradient panels.
   -------------------------------------------------------------------------- */
.o-definition {
  --def-gap: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--def-gap);
}
.o-definition__flank {
  position: relative;
  z-index: 2;
  background: linear-gradient(160deg, var(--ice-blue), var(--orion-blue));
  min-height: 190px;
  will-change: transform;
  transition: transform 1.15s cubic-bezier(.65, 0, .35, 1);
}
.o-definition__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 3px solid var(--orion-blue);
  border-bottom: 3px solid var(--orion-blue);
  align-self: center;
}

/* --- The reveal ---
   The two blue panels start closed over the definition and slide apart when
   the section scrolls into view, like a pair of doors.

   The geometry works because the centre column is exactly twice the width of
   each flank: sliding a flank inward by its own width plus the gap lands it
   over precisely half the centre, so the two together cover it completely.

   Scoped to `html.js` — if the script does not run, the panels simply sit in
   their open position and the definition is readable. It must never be
   possible for this to leave the text permanently hidden. */
/* Mirror the second panel's gradient so that, closed, the pair reads as a
   symmetrical set of doors rather than two mismatched rectangles. */
.o-definition__flank:last-child {
  background-image: linear-gradient(200deg, var(--ice-blue), var(--orion-blue));
}

.js .o-definition:not(.is-revealed) .o-definition__flank:first-child {
  transform: translateX(calc(100% + var(--def-gap)));
}
.js .o-definition:not(.is-revealed) .o-definition__flank:last-child {
  transform: translateX(calc(-100% - var(--def-gap)));
}
.o-definition__word {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ice-blue-text);
  margin: 0 0 .6rem;
}
.o-definition__phonetic {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--orion-blue);
  margin: 0 0 .3rem;
}
.o-definition__pos {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--orion-navy);
  margin: 0 0 1.1rem;
}
.o-definition__quote {
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--orion-blue);
  line-height: 1.9;
  margin: 0;
  max-width: 34ch;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .o-definition { grid-template-columns: minmax(0, 1fr); }
  /* No flanks on narrow screens, so there is nothing to reveal — the
     definition is simply visible. */
  .o-definition__flank { display: none; }
}

/* --------------------------------------------------------------------------
   11. OFFER CARDS (Lighting / Shades / Sound / Smart Systems)
       Photo tile, label top-left, big index number bottom-right.
   -------------------------------------------------------------------------- */
.o-offer {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--loft-dark);
  color: var(--white);
}
.o-offer__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.o-offer:hover .o-offer__img { transform: scale(1.06); }

.o-offer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 40%,
    rgba(0,0,0,.10) 70%, rgba(0,0,0,.55) 100%);
  transition: background var(--t-base);
}
.o-offer:hover::after { background: linear-gradient(to bottom, rgba(32,99,165,.90), rgba(33,70,123,.95)); }

.o-offer__label {
  position: absolute; z-index: 2;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  top: clamp(.85rem, 1.6vw, 1.25rem);
  left: clamp(.85rem, 1.6vw, 1.25rem);
  right: clamp(.85rem, 1.6vw, 1.25rem);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  line-height: 1.15;
}
.o-offer__label::after {
  content: ""; display: block;
  width: 46px; height: 3px; margin-top: .5rem;
  background: var(--ice-blue);
}

.o-offer__index {
  position: absolute; z-index: 2;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  right: clamp(.85rem, 1.6vw, 1.25rem);
  bottom: clamp(.6rem, 1.2vw, 1rem);
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.o-offer__index::before {
  content: ""; width: 3px; height: 1.5em;
  background: var(--white);
}

/* --- Hover copy ---
   On hover the label and index dissolve away and a line of copy takes their
   place over the blue wash. Confined to pointer devices via `hover: hover`:
   on a touch screen there is no hover state, so the label simply stays put.
   The copy stays in the document either way, so screen readers announce it. */
.o-offer__blurb {
  position: absolute; z-index: 2;
  left: clamp(1.1rem, 2.2vw, 1.9rem);
  right: clamp(1.1rem, 2.2vw, 1.9rem);
  top: 50%;
  transform: translateY(-50%) translateY(12px);
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(.875rem, .78rem + .38vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
  text-align: center;
  text-wrap: pretty;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .55s var(--ease);
}

@media (hover: hover) {
  .o-offer:hover .o-offer__label,
  .o-offer:hover .o-offer__index {
    opacity: 0;
    transform: translateY(-8px);
  }
  .o-offer:hover .o-offer__blurb {
    opacity: 1;
    transform: translateY(-50%) translateY(0);
  }
}

/* The tiles are no longer links, so there is no focus state to mirror. The
   copy still sits in the document, so screen readers announce it regardless of
   the hover effect. */

/* --------------------------------------------------------------------------
   12. WHO WE OFFER — brand chip grid on the blue band
   -------------------------------------------------------------------------- */
.o-who {
  position: relative;
  background: var(--orion-blue);
  color: var(--white);
}
/* thin light bar down the far left, as in the design */
.o-who::before {
  content: ""; position: absolute; z-index: 1;
  left: 0; top: var(--section-y); bottom: var(--section-y);
  width: 6px;
  background: linear-gradient(to bottom, var(--ice), rgba(172,196,216,.25));
}

.o-who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.o-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.4rem);
}
.o-chip {
  display: flex; align-items: center; justify-content: center;
  min-height: 62px;
  padding: .85rem 1rem;
  background: var(--orion-navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--t-base), transform var(--t-fast);
}
.o-chip:hover { background: var(--navy-dark); color: var(--white); transform: translateY(-2px); }

.o-chips__more { grid-column: 1 / -1; display: flex; justify-content: center; }
.o-chips__more .o-btn { min-width: 220px; }

@media (max-width: 900px) {
  .o-who__grid { grid-template-columns: minmax(0, 1fr); }
  .o-who .o-head--right { text-align: left; padding-right: 0; padding-left: 1.5rem; margin-left: 0; }
  .o-who .o-head--right::before { right: auto; left: 0; }
}

/* --------------------------------------------------------------------------
   13. LIGHTING LOFTS TEASER (dark band + photo band + gold CTA)
   -------------------------------------------------------------------------- */
/* The black intro strip and the photo band below it together fill exactly one
   screen. The intro is given a known height so the band can take the rest with
   a calc — CSS cannot measure a sibling, so one of the two has to be fixed. */
:root { --loft-intro-h: clamp(120px, 14vw, 200px); }

.o-loftteaser__intro {
  background: var(--loft-dark);
  color: var(--white);
  text-align: center;
  min-height: var(--loft-intro-h);
  display: grid;
  place-items: center;
  padding-block: var(--space-sm);
  padding-inline: var(--gutter);
}
.o-loftteaser__intro p {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--white);
  margin: 0;
}

.o-loftband {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center;
  /* Whatever is left of the screen once the intro strip has taken its share.
     max() keeps a sensible floor on very short windows. */
  min-height: max(420px, calc(100vh - var(--loft-intro-h)));
  min-height: max(420px, calc(100svh - var(--loft-intro-h)));
  padding-block: var(--space-xl);
  overflow: hidden;
  color: var(--white);
}
.o-loftband__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.o-loftband__wash {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg,
    rgba(26,26,26,.90) 0%, rgba(26,26,26,.55) 38%,
    rgba(26,26,26,.22) 70%, rgba(26,26,26,.34) 100%);
}
.o-loftband__content { position: relative; padding-left: 1.5rem; max-width: 34rem; }
.o-loftband__content::before {
  content: ""; position: absolute; left: 0; top: .2rem; bottom: .2rem;
  width: 3px; background: rgba(255,255,255,.75);
}
.o-loftband__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--loft-gold);
  margin: 0 0 .1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.o-loftband__sub {
  font-family: var(--font-loft);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  font-weight: 500;
  color: var(--white);
  margin: 0;
}
.o-loftband__actions { margin-top: var(--space-md); }

/* The Lighting Lofts logo, bottom-right of the band.
   Supplied as white-on-transparent artwork, so it only ever sits over the dark
   photography. A dark version (lofts-logo-dark.png) ships alongside it for use
   on light backgrounds. */
.o-loftmark {
  position: absolute; z-index: 2;
  right: var(--gutter); bottom: 1.25rem;
  width: clamp(84px, 8vw, 124px);
  height: auto;
  opacity: .92;
  transition: opacity var(--t-fast);
}
.o-loftmark img { display: block; width: 100%; height: auto; }
a.o-loftmark:hover, .o-loftmark:hover { opacity: 1; }
/* When the mark shares a hero with the slideshow dots, lift it clear of them */
.o-hero .o-loftmark { bottom: 3.5rem; }

/* Showroom city bar */
.o-cities { background: var(--loft-dark); }
.o-cities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.o-city {
  text-align: center;
  padding-inline: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, .9rem + 1vw, 1.75rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--t-fast);
}
.o-city + .o-city { border-left: 1px solid var(--loft-gold); }
.o-city:hover { color: var(--loft-gold); }

@media (max-width: 620px) {
  .o-cities__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .o-city + .o-city { border-left: 0; border-top: 1px solid var(--loft-gold); padding-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   14. PRESIDENT / QUOTE BLOCK
   -------------------------------------------------------------------------- */
.o-president__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.o-president__body { text-align: right; }
.o-president__body .o-head__eyebrow {
  border-bottom: 2px solid var(--orion-blue);
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--orion-blue);
  display: inline-block;
  margin-bottom: var(--space-sm);
}
.o-president__text {
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--orion-navy);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.o-president__quote {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--ice-blue-text);
  line-height: 1.35;
  margin: 0 0 .5rem;
}
.o-president__cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-style: normal;
  color: var(--ice-blue-text);
}

@media (max-width: 860px) {
  .o-president__grid { grid-template-columns: minmax(0, 1fr); }
  .o-president__body { text-align: left; }
  .o-president__media { justify-self: center; }
}

/* --------------------------------------------------------------------------
   15. TEAM GRID
   -------------------------------------------------------------------------- */
.o-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (max-width: 1000px) { .o-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .o-team { grid-template-columns: minmax(0, 1fr); } }

.o-member {
  display: flex; flex-direction: column;
  border: 1px solid var(--ice-blue);
  background: var(--white);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.o-member:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.o-member__photo {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: center top;
  background: var(--pale-tint);
}

.o-member__body {
  background: var(--orion-blue);
  color: var(--white);
  text-align: center;
  padding: clamp(.85rem, 1.6vw, 1.15rem);
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: .1rem;
}
.o-member__name {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--white);
  margin: 0;
  line-height: 1.2;
}
.o-member__role {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
  margin: 0 0 .6rem;
  line-height: 1.3;
}
.o-member__contact { margin-top: auto; font-size: var(--fs-small); line-height: 1.55; }
.o-member__contact a { color: var(--white); display: block; word-break: break-word; }
.o-member__contact a:hover { color: var(--ice); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. CONTACT-OUR-OFFICE PANEL
   -------------------------------------------------------------------------- */
.o-officecard {
  background: var(--orion-navy);
  color: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 1100px;
  margin-inline: auto;
}
.o-officecard__title {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin: 0 auto var(--space-lg);
  padding-bottom: .6rem;
  border-bottom: 3px solid var(--ice-blue);
  display: table;
}
.o-officecard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.o-infoline {
  display: flex; align-items: flex-start; gap: 1.1rem;
  font-size: var(--fs-lead);
  color: var(--white);
  margin-bottom: var(--space-md);
}
.o-infoline:last-child { margin-bottom: 0; }
.o-infoline svg {
  flex: 0 0 auto;
  width: clamp(34px, 3vw, 42px);
  height: clamp(34px, 3vw, 42px);
  stroke: var(--white);
  fill: none;
}
.o-infoline a { color: var(--white); }
.o-infoline a:hover { color: var(--ice); text-decoration: underline; }

/* Nudge the icon down so it sits optically centred against the first line of
   a multi-line address rather than hugging the cap height. */
.o-infoline--stacked svg { margin-top: .15rem; }

/* Hold the two columns near each other so the card does not read as two
   unrelated halves at wide viewports. */
/* Centre the two groups as ONE unit.
   A two-column grid with each column centred inside itself is not the same
   thing: the phone/email group is wider than the address group, so the pair
   ends up sitting off-centre overall. Laying them out as a centred flex row
   makes the whole cluster symmetrical within the card. */
.o-officecard__grid--tight {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: none;
  margin-inline: auto;
}
.o-officecard__grid--tight > * { text-align: left; }

/* Contact page: the panel sits in a narrow column, so all three lines stack
   in one group, left-aligned against the inside of the box. */
.o-officecard__grid--stack {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
.o-officecard__grid--stack > * { text-align: left; }

@media (max-width: 700px) {
  .o-officecard__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   17. SOLUTIONS PAGE — brand strip + category bands + logo grids
   -------------------------------------------------------------------------- */
.o-brandstrip { background: var(--orion-blue); }
.o-brandstrip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.o-brandstrip__item {
  text-align: center;
  padding: clamp(1.1rem, 2.4vw, 1.75rem) .75rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .85rem + .6vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  transition: background var(--t-fast);
}
.o-brandstrip__item + .o-brandstrip__item { border-left: 1px solid rgba(255,255,255,.55); }
.o-brandstrip__item:hover { background: var(--blue-dark); color: var(--white); }
@media (max-width: 700px) {
  .o-brandstrip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-brandstrip__item:nth-child(odd) { border-left: 0; }
  .o-brandstrip__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.55); }
}

.o-catbar {
  background: var(--orion-blue);
  color: var(--white);
  text-align: center;
  padding: clamp(.85rem, 1.8vw, 1.15rem) 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .5vw, 1.375rem);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
}

.o-logogrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
  justify-items: center;
}
.o-logogrid__item {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 152px; padding: .75rem;
  opacity: .92;
  transition: opacity var(--t-base), transform var(--t-base);
}
.o-logogrid__item:hover { opacity: 1; transform: scale(1.04); }
/* Two constraints rather than one.
   Capping only the height makes a stacked lockup like NAD render 120px wide
   next to a long wordmark like PSB Speakers at 790px. Capping height AND width
   together lets the browser fit each logo inside the same box, so a tall mark
   is limited by height and a wide one by width — and everything lands in a
   similar visual footprint. It also means swapping a logo needs no new CSS:
   drop any file into the Image widget and it sizes itself to match.

   The height cap is deliberately generous relative to the width cap. A wide
   wordmark is always width-limited, so raising the height cap does not touch
   it; what it does do is let square-ish lockups (Big Ass Fans, NAD, Bluesound)
   grow until they carry about the same visual weight as their neighbours. */
.o-logogrid__item img {
  max-height: 128px;
  max-width: 280px;
  width: auto;
  object-fit: contain;
}

/* Placeholder used when a manufacturer logo file has not been supplied yet.
   Reads as an intentional wordmark rather than a broken image. */
.o-logogrid__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}
/* Full-width final item when the row has an odd number */
.o-logogrid__item--wide { grid-column: 1 / -1; }

/* Manufacturer logos link out to the maker's own site */
.o-logogrid__link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: var(--radius);
  transition: transform var(--t-base);
}
.o-logogrid__link:focus-visible { outline-offset: 6px; }
@media (max-width: 560px) {
  .o-logogrid { grid-template-columns: minmax(0, 1fr); }
}

/* Vertical rules framing the solutions column, as in the design */
.o-rules {
  position: relative;
  border-left: 1px solid var(--ice-blue);
  border-right: 1px solid var(--ice-blue);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.o-divider {
  height: 1px; border: 0; margin: 0;
  background: var(--orion-blue);
}

/* --------------------------------------------------------------------------
   18. LIGHTING LOFTS PAGE — showroom cards
   -------------------------------------------------------------------------- */
.o-showroom {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-line);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.o-showroom:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.o-showroom__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.o-showroom__body { padding: clamp(1.25rem, 2.4vw, 1.75rem); flex: 1 1 auto; display: flex; flex-direction: column; }
.o-showroom__city {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orion-navy);
  margin: 0 0 .35rem;
}
.o-showroom__addr { font-size: var(--fs-small); color: var(--body-text); margin-bottom: var(--space-sm); }
.o-showroom__body .o-btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   19. CONTACT PAGE — form
   -------------------------------------------------------------------------- */
.o-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .o-contact__grid { grid-template-columns: minmax(0, 1fr); } }

.o-field { margin-bottom: var(--space-sm); }
.o-field label {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orion-navy);
  margin-bottom: .4rem;
}
.o-field input,
.o-field select,
.o-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--ice);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.o-field textarea { min-height: 150px; resize: vertical; }
.o-field input:focus,
.o-field select:focus,
.o-field textarea:focus {
  outline: none;
  border-color: var(--orion-blue);
  box-shadow: 0 0 0 3px rgba(104,160,214,.28);
}

/* --------------------------------------------------------------------------
   20. CTA BAND ("Want to connect?")
   -------------------------------------------------------------------------- */
.o-cta { background: var(--orion-navy); color: var(--white); }
.o-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, .75fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.o-cta__title {
  font-family: var(--font-title);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--white);
  margin: 0;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--ice-blue);
  display: table;
}
.o-cta__sub {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--white);
  margin: .65rem 0 0;
}
.o-cta__meta {
  text-align: right;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  line-height: 1.8;
  color: var(--white);
}
.o-cta__meta a { color: var(--white); }
.o-cta__meta a:hover { color: var(--ice); text-decoration: underline; }

@media (max-width: 980px) {
  .o-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .o-cta__meta { text-align: left; }
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.o-footer { background: var(--orion-blue); color: var(--white); }

.o-footer__main {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr) auto minmax(0, .9fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.o-footer__rule { width: 1px; align-self: stretch; background: rgba(255,255,255,.45); }

.o-footer__logo img { height: 62px; width: auto; }

.o-footer__social { display: flex; gap: 1rem; justify-content: center; }
.o-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--white);
  transition: color var(--t-fast), transform var(--t-fast);
}
.o-footer__social a:hover { color: var(--ice); transform: translateY(-2px); }

/* Each glyph fills a different share of its 24-unit viewBox — the X mark
   spans the full 24 while LinkedIn's spans only 18 — so sizing them all
   identically makes the X look oversized. These per-icon sizes equalise the
   INK rather than the box, which is what the eye actually reads. */
.o-footer__social svg { fill: currentColor; width: 24px; height: 24px; }
.o-footer__social .o-social--linkedin  svg { width: 26px; height: 26px; }
.o-footer__social .o-social--instagram svg { width: 24px; height: 24px; }
.o-footer__social .o-social--facebook  svg { width: 24px; height: 24px; }
.o-footer__social .o-social--x         svg { width: 20px; height: 20px; }

.o-footer__contact { text-align: center; font-size: var(--fs-body); }
.o-footer__contact a { color: var(--white); }
.o-footer__contact a:hover { color: var(--ice); text-decoration: underline; }

.o-footer__address {
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: .05em;
  line-height: 1.85;
  color: var(--white);
}
.o-footer__address a { color: var(--white); }
.o-footer__address a:hover { color: var(--ice); text-decoration: underline; }

.o-footer__bar {
  border-top: 1px solid rgba(255,255,255,.28);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem;
  padding-block: 1rem;
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.9);
}
.o-footer__legal { display: flex; gap: 1.75rem; }
.o-footer__legal a { color: rgba(255,255,255,.9); }
.o-footer__legal a:hover { color: var(--white); text-decoration: underline; }

@media (max-width: 980px) {
  .o-footer__main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: var(--space-md);
  }
  .o-footer__rule { display: none; }
  .o-footer__address, .o-footer__contact { text-align: center; }
  .o-footer__bar { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   22. UTILITIES
   -------------------------------------------------------------------------- */
.o-text-center { text-align: center; }
.o-text-right  { text-align: right; }
.o-mt-0  { margin-top: 0 !important; }
.o-mb-0  { margin-bottom: 0 !important; }
.o-mb-sm { margin-bottom: var(--space-sm) !important; }
.o-mb-md { margin-bottom: var(--space-md) !important; }
.o-mb-lg { margin-bottom: var(--space-lg) !important; }
.o-pb-0  { padding-bottom: 0 !important; }
.o-lead  { font-size: var(--fs-lead); line-height: 1.7; }

/* Reveal-on-scroll.
   Deliberately scoped to `html.js` — that class is added by orion.js. If JS is
   blocked, slow, or stripped by a caching plugin the content simply renders
   visible instead of being stuck at opacity 0. */
.o-reveal { opacity: 1; transform: none; }
.js .o-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .o-reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. MOTION / PRINT PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .o-reveal { opacity: 1; transform: none; }
  .o-slideshow--kenburns .o-slideshow__slide.is-active { animation: none; }
}

@media print {
  .o-header, .o-slideshow, .o-footer__social, .o-navtoggle { display: none !important; }
  body { color: #000; background: #fff; }
  .o-bg-blue, .o-bg-navy, .o-bg-dark, .o-panel, .o-member__body,
  .o-officecard, .o-cta, .o-footer { background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}


/* --------------------------------------------------------------------------
   24. MARQUEE — continuously scrolling banner
   --------------------------------------------------------------------------
   Used for the manufacturer banner at the top of the Solutions page.

   Markup (the JavaScript builds this for you from whatever you put inside
   an element with class .o-marquee, so in Elementor you can simply drop a
   Text Editor widget, type the list, and add the class):

     <div class="o-marquee" data-speed="55">
       <a href="…">Lutron</a><a href="…">Ketra</a>…
     </div>

   data-speed is pixels per second. It is a SPEED, not a duration, so adding
   or removing items never changes how fast the text travels.

   Accessibility: WCAG 2.2.2 requires a way to pause content that moves for
   more than five seconds. This scrolls on hover-out, pauses on hover, pauses
   on keyboard focus, exposes a real pause button, and does not animate at all
   for visitors who have "reduce motion" enabled — for them it becomes an
   ordinary horizontally scrollable strip with every item still reachable.
   -------------------------------------------------------------------------- */

.o-marquee {
  position: relative;
  overflow: hidden;
  background: var(--orion-blue);
  color: var(--white);
  /* stops a partly-visible item at the edges from looking like a cut-off word */
  border-block: 1px solid rgba(255, 255, 255, .18);
}

.o-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: o-marquee-scroll var(--o-marquee-duration, 40s) linear infinite;
}

/* Two identical groups sit side by side; translating the track by exactly
   -50% lands the second group where the first began, so the loop is seamless. */
@keyframes o-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.o-marquee__group { display: flex; flex: 0 0 auto; }

/* Any child becomes an item — a link, a span, or an <img> for a logo ticker */
.o-marquee__group > * {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, .85rem + .6vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  border-right: 1px solid rgba(255, 255, 255, .55);
  transition: background var(--t-fast), color var(--t-fast);
}
.o-marquee__group > a:hover { background: var(--blue-dark); color: var(--white); }
.o-marquee__group > img { max-height: 46px; width: auto; padding-block: .75rem; }

/* Pause on hover, and whenever anything inside takes keyboard focus */
.o-marquee:hover .o-marquee__track,
.o-marquee:focus-within .o-marquee__track,
.o-marquee.is-paused .o-marquee__track { animation-play-state: paused; }

/* --- pause / play control ---
   Hidden until hovered or focused so it stays out of the design, but always
   reachable by keyboard, which is what makes it a genuine WCAG mechanism. */
.o-marquee__toggle {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(33, 70, 123, .75);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.o-marquee:hover .o-marquee__toggle,
.o-marquee__toggle:focus-visible { opacity: 1; }
.o-marquee__toggle:hover { background: var(--orion-navy); }
.o-marquee__toggle::before {
  content: "";
  width: 9px; height: 10px;
  background: currentColor;
  /* two bars = pause */
  clip-path: polygon(0 0, 3px 0, 3px 10px, 0 10px, 6px 0, 9px 0, 9px 10px, 6px 10px);
}
.o-marquee.is-paused .o-marquee__toggle::before {
  /* right-pointing triangle = play */
  width: 9px; height: 10px;
  clip-path: polygon(0 0, 9px 5px, 0 10px);
}

/* Variants */
.o-marquee--navy { background: var(--orion-navy); }
.o-marquee--dark { background: var(--loft-dark); }
.o-marquee--reverse .o-marquee__track { animation-direction: reverse; }

/* Before the JavaScript runs, show the list as an ordinary strip rather than
   a stack, so there is no visible jump on load. */
.o-marquee:not(.is-ready) { display: flex; flex-wrap: nowrap; overflow-x: hidden; }
.o-marquee:not(.is-ready) > * { flex: 0 0 auto; }
.o-marquee:not(.is-ready) p { display: flex; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  /* `animation: none` must be !important here: the global reduced-motion rule
     in section 23 forces a 0.001ms duration, which would snap the track to
     its end position and hide half the items. */
  .o-marquee__track {
    animation: none !important;
    width: auto;
  }
  .o-marquee {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  /* the duplicate exists only to make the loop seamless — drop it */
  .o-marquee__group[aria-hidden="true"] { display: none; }
  .o-marquee__toggle { display: none; }
}


/* --------------------------------------------------------------------------
   26. LEGAL PAGES — privacy policy, terms of use
   --------------------------------------------------------------------------
   Long-form prose. The measure is held to roughly 78 characters, which is the
   comfortable reading width for body text — wider than that and the eye loses
   its place returning to the start of each line.
   -------------------------------------------------------------------------- */

.o-legal {
  max-width: 78ch;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--body-text);
}

.o-legal__intro {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.7;
  color: var(--orion-navy);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--grey-line);
  margin-bottom: var(--space-lg);
}

.o-legal h2 {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--orion-navy);
  margin: var(--space-lg) 0 var(--space-xs);
  padding-left: .875rem;
  border-left: 4px solid var(--orion-blue);
  line-height: 1.3;
}
.o-legal h2:first-child { margin-top: 0; }

.o-legal h3 {
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--orion-blue);
  margin: var(--space-md) 0 .35rem;
}

.o-legal p { margin-bottom: var(--space-sm); }

.o-legal ul,
.o-legal ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.35rem;
}
.o-legal li { margin-bottom: .5rem; }
.o-legal li::marker { color: var(--orion-blue); }

.o-legal a { color: var(--orion-blue); text-decoration: underline; text-underline-offset: 2px; }
.o-legal a:hover { color: var(--orion-navy); }

.o-legal strong { color: var(--orion-navy); font-weight: 600; }

/* Definition-style rows, used for the list of data collected */
.o-legal dl { margin: 0 0 var(--space-sm); }
.o-legal dt {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--orion-navy);
  margin-top: .85rem;
}
.o-legal dd { margin: 0 0 0 0; }

/* Pulled-out note — used for the contact-for-requests block */
.o-legal__note {
  background: var(--pale-tint);
  border-left: 4px solid var(--ice-blue);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0;
}
.o-legal__note p:last-child { margin-bottom: 0; }

/* Effective-date line under the page title */
.o-legal__meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--body-text);
}

/* Quick jump list at the top of a long document */
.o-legal__toc {
  margin-bottom: var(--space-lg);
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-lg);
}
.o-legal__toc li { margin-bottom: .4rem; break-inside: avoid; }
.o-legal__toc a { text-decoration: none; font-size: var(--fs-body); }
.o-legal__toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .o-legal__toc { columns: 1; } }