/* ==========================================================================
   custom.css — "Dark Signal" design system
   Site-wide overrides for colors, fonts, and layout on top of Bootstrap 5.

   HOW THIS FILE WORKS WITH PINEGROW / BOOTSTRAP:
   - Bootstrap 5 is loaded from a CDN in the <head> of every page and still
     handles the grid (container/row/col-*), buttons, forms, navbar, and
     accordion behavior.
   - This file loads AFTER Bootstrap, so any rule in here wins over the
     Bootstrap default for the same element/class.
   - Do NOT add inline style="" attributes on elements. Instead, either:
       a) use a Bootstrap utility class (e.g. class="mt-4 text-center"), or
       b) add/extend a rule in this file.
   - Pinegrow will show these rules in its CSS panel and let you edit them
     visually, so keep selectors simple and grouped by section below.

   SECTIONS IN THIS FILE
     0. Font faces (your local brand font files)
     1. Brand variables (edit colors/fonts here first)
     1b. Bootstrap theme variable overrides
     2. Reset & base
     3. Typography + eyebrow labels
     4. Buttons
     5. Navbar
     6. Hero
     7. Section rhythm (spacing) + section headers
     8. Cards & icon badges
     9. Pillars / "why us" band
    10. Stats / about band
    11. Reviews
    12. FAQ accordion
    13. Pricing panel
    14. Contact form
    15. Footer
    16. Scroll-reveal animation hooks (paired with js/custom.js)
    16b. Image helpers
    17. Responsive tweaks

   Dropdown nav menus (5b) and the post-card meta line (8b) were added for
   the Services/Sectors dropdowns and the Case Studies/Insights listing
   pages — see those sections inline rather than in this index.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. FONT FACES
   Your two local brand font files (Light + Bold), registered under a single
   font-family name — "font-weight" is what switches between them, so the
   rest of the file (and Pinegrow's font-weight controls) can just say
   "font-weight: 300" for light or "font-weight: 700" for bold and the
   correct file loads automatically. Files live in /fonts, one level up
   from this stylesheet.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DIN Next";
  src: url("../fonts/DIN-Next-LT-Arabic-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next";
  src: url("../fonts/DIN-Next-LT-Arabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono (the small uppercase labels, e.g. eyebrows and meta text).
   Stored in /fonts too, rather than loaded from Google Fonts, so the page
   doesn't have to wait on a second website before it can appear. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   1. BRAND VARIABLES
   Edit these values first — colors, fonts, and spacing cascade from here.

   NOTE: --secondary and the light-mode surface colors below are still
   placeholders — you sent hex codes for Primary and Dark Text only. See the
   chat reply for what's still needed before the rest of the palette (and
   the dark-text-on-dark-background contrast question) can be finished.
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --bg:            #0A0F1C;   /* page background — deep navy */
  --panel:         #10182B;   /* raised panels / cards */
  --panel-2:       #16213A;   /* card hover / input backgrounds */

  /* Borders */
  --border:        rgba(159, 178, 214, .16);   /* hairline borders */
  --border-strong: rgba(159, 178, 214, .32);   /* stronger borders, focus rings */

  /* Text */
  --text:          #EAF0F9;   /* primary text (on the dark background above) */
  --text-muted:    #9FB2CC;   /* secondary / supporting text */
  --text-dark:     #000000;   /* your brand's "Dark Text" color — not wired in yet, see note above */

  /* Accent colors */
  --accent:        #0F4BC1;   /* brand primary */
  --accent-hover:  #5781D4;   /* lightened primary, for hover states */
  --accent-text:   #7FA0E0;   /* light brand blue for blue TEXT on the dark panels (the darker blues are too faint to read there) */
  --accent-ink:    #FFFFFF;   /* text color used ON TOP of the accent color */
  --gold:          #E8B750;   /* sparing warm accent — stars, ticks, highlights */
  --success:       #34D399;   /* status / success indicators */

  /* Fonts */
  --font-display: "DIN Next", Arial, sans-serif;   /* headings — bold weight (700) */
  --font-body:    "DIN Next", Arial, sans-serif;   /* body copy — light weight (300) */
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace; /* labels, meta text */

  /* Layout */
  --radius: 14px;
  --nav-h: 76px;
  --topbar-h: 28px;   /* slim phone/email bar above the main nav, all screen sizes */
}


/* --------------------------------------------------------------------------
   1b. BOOTSTRAP THEME VARIABLE OVERRIDES
   Bootstrap 5 exposes its own theme as CSS custom properties (--bs-*). Any
   plain Bootstrap component you drag in from Pinegrow that we haven't
   hand-styled (badges, alerts, progress bars, focus rings, plain links,
   etc.) reads from these, so setting them here makes the brand color and
   font apply automatically, site-wide — not just on the custom components
   below.
   -------------------------------------------------------------------------- */
:root {
  --bs-primary:      var(--accent);
  --bs-primary-rgb:  15, 75, 193;   /* RGB of --accent, for Bootstrap's rgba() uses (focus rings, etc.) */
  --bs-link-color:          var(--accent);
  --bs-link-color-rgb:      15, 75, 193;
  --bs-link-hover-color:      var(--accent-hover);
  --bs-link-hover-color-rgb:  87, 129, 212;
  --bs-body-font-family: var(--font-body);

  /* Bootstrap's own light-mode defaults for these are near-black (#212529),
     meant for text on a white background. Left unset, utilities like
     .text-muted and components that inherit .card's color read those
     defaults instead of this theme's palette, making text unreadably dark
     against the site's navy background. Remapping them here fixes every
     current and future use in one place. */
  --bs-body-color:            var(--text);
  --bs-body-color-rgb:        234, 240, 249;
  --bs-secondary-color:       var(--text-muted);
  --bs-secondary-color-rgb:   159, 178, 204;
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--topbar-h) + 12px);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--nav-h) + var(--topbar-h)); /* offsets the fixed header (nav + top-bar) */
}

/* Bootstrap g-5 rows overhang the container by 12px on phones; clip it so the
   page never scrolls sideways (clip, unlike hidden, keeps sticky working). */
main {
  overflow-x: clip;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY + EYEBROW LABELS
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

.lead {
  color: var(--text-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  max-width: 54ch;
}

p {
  color: var(--text-muted);
}

/* Small uppercase label above headings, e.g. "Our Services", in the brand font. */
.eyebrow {
  display: inline-block;
  padding-bottom: .5rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}

/* Pill label in a glass capsule with a glowing green "live" dot (home hero, How It Works steps) */
.eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .95rem .45rem .8rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text);
  background: rgba(159, 178, 214, .08);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.eyebrow--pill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22), 0 0 12px 2px rgba(52, 211, 153, .85);
  animation: eyebrow-glow 2.4s ease-in-out infinite;
}

@keyframes eyebrow-glow {
  50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, .12), 0 0 18px 4px rgba(52, 211, 153, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow--pill::before { animation: none; }
}


/* --------------------------------------------------------------------------
   4. BUTTONS
   Override Bootstrap's default button colors with the brand palette.
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 10px;
  padding: .8rem 1.5rem;
}

.btn-lg {
  padding: 1rem 1.8rem;
  font-size: 1.05rem;
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

.btn-outline-light {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  border-color: var(--accent);
  color: var(--accent);
  background-color: transparent;
}


/* --------------------------------------------------------------------------
   5. NAVBAR
   Fixed header holding a slim contact strip, with the main nav floating
   beneath it as a rounded glass "island". The island gets denser once you
   scroll (is-scrolled is toggled in js/custom.js). The header's total height
   is unchanged, so the body offset still works.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: calc(var(--nav-h) + var(--topbar-h));
  background: transparent;
}

.site-header .navbar {
  --island-bg: rgba(16, 24, 43, .55);
  background: var(--island-bg) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  height: calc(var(--nav-h) - 14px);
  margin: 4px auto 0;
  width: calc(100% - 30px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled .navbar {
  --island-bg: rgba(10, 15, 28, .82);
  border-color: var(--border-strong);
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* The island supplies the edge spacing, so the inner container just pads */
.site-header .navbar > .container {
  max-width: none;
  padding-inline: 1.25rem;
}

/* Match the island's outer edges to the page content edges (Bootstrap
   container width minus its 15px side padding) so it lines up with the
   contact strip above and the hero/cards below at every breakpoint. */
@media (min-width: 576px)  { .site-header .navbar { max-width: 510px; } }
@media (min-width: 768px)  { .site-header .navbar { max-width: 690px; } }
@media (min-width: 992px)  { .site-header .navbar { max-width: 930px; } }
@media (min-width: 1200px) { .site-header .navbar { max-width: 1110px; } }
@media (min-width: 1400px) { .site-header .navbar { max-width: 1290px; } }

@media (min-width: 992px) {
  .site-header .navbar > .container {
    padding-inline: 1.25rem;
  }
}

/* Compact pill CTA, like the reference nav */
.site-header .navbar .btn-primary {
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .88rem;
  line-height: 1.4;
}

/* Small up-right arrow on the nav CTA (drawn with a mask so it takes the
   button's text colour). Add the class "btn-arrow" to any other button to
   give it the same arrow, e.g. the home page "Get a Free Quote" button. */
.site-header .navbar .btn-primary::after,
.btn-arrow::after {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .45em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l5-5M4 3.5h4.5V8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l5-5M4 3.5h4.5V8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}

.site-header .navbar .btn-primary:hover::after,
.btn-arrow:hover::after {
  transform: translate(2px, -2px);
}

/* Slim phone/email bar above the main nav row, shown at every screen size —
   sized down further below sm so it still fits on one line on a phone. */
.top-bar {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  overflow-x: auto;
}

.top-bar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.75rem;
  white-space: nowrap;
}

.top-bar a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text);
  font-size: .8rem;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .top-bar .container {
    gap: .85rem;
  }

  .top-bar a {
    font-size: .68rem;
    gap: .3rem;
  }

  .top-bar i {
    font-size: .72rem;
  }
}

.top-bar a:hover {
  color: var(--accent-hover);
}

.top-bar i {
  font-size: .85rem;
}

/* WhatsApp brand green */
.top-bar a[href*="wa.me"] i {
  color: #25D366;
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text) !important;
  letter-spacing: .01em;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand span {
  color: var(--accent);
}

/* Logo image in the navbar. Swap the placeholder src in the HTML for your
   real logo file (e.g. images/logo.png) — this just controls its size. */
.navbar-logo {
  height: 40px;
  width: auto;
  display: block;
}

.site-header .nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  color: var(--text-muted) !important;
  padding: .5rem 1rem !important;
}

/* Seven nav items + a CTA button is tight below ~1200px — trim the
   horizontal padding on large screens so it doesn't wrap awkwardly. */
@media (min-width: 992px) {
  .site-header .nav-link {
    padding: .5rem .6rem !important;
  }
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: var(--text) !important;
}

.navbar-toggler {
  border-color: var(--border-strong);
  border-radius: 999px;
  padding: .4rem .6rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .35);
}

/* Bootstrap's default toggler icon is dark — swap it for a light one */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(234,240,249,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-header .navbar-collapse {
  background: rgba(10, 15, 28, .96);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: 18px;
  margin: .6rem -.5rem 0;
  padding: .5rem 1rem;
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
}

@media (min-width: 992px) {
  .site-header .navbar-collapse {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
}

/* ---- Dropdown nav items (Services, Sectors) ---- */
.site-header .dropdown-menu {
  background-color: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: .5rem;
  margin-top: .5rem;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
}

.site-header .dropdown-item {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .92rem;
  border-radius: 7px;
  padding: .55rem .8rem;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
  background-color: var(--panel-2);
  color: var(--text);
}

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* "UniFi Installation" at the bottom of the Services dropdown: an outlined
   brand-blue bubble with the UniFi logo on the right, so it stands out from
   the plain service links above it. */
.site-header .dropdown-item--unifi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .35rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background-color: rgba(var(--bs-primary-rgb), .18);
  color: var(--text);
}

.site-header .dropdown-item--unifi img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.site-header .dropdown-item--unifi:hover,
.site-header .dropdown-item--unifi:focus {
  background-color: rgba(var(--bs-primary-rgb), .32);
  color: var(--text);
}

.site-header .dropdown-item--unifi.active,
.site-header .dropdown-item--unifi:active {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* On mobile, let dropdowns expand inline inside the collapsed menu instead
   of floating as a popover over it. */
@media (max-width: 991.98px) {
  .site-header .navbar-nav .dropdown-menu {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: .75rem;
    margin-top: 0;
  }
}


/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

/* Network rack photo behind the hero, in its natural colours.
   Layers, top to bottom: a fade into the page background at the bottom edge,
   a dark shade (strongest on the left) so the text stays readable, a light
   brand-blue wash, then the photo. To swap the photo, replace the url()
   below; to change the wash, adjust the .14 in the blue layer. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 75%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10, 15, 28, .92) 0%, rgba(10, 15, 28, .72) 45%, rgba(10, 15, 28, .48) 100%),
    linear-gradient(rgba(15, 75, 193, .14), rgba(15, 75, 193, .14)),
    url("../images/network-rack-hero-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Phones and tablets: the text runs across the full width over the busiest
   part of the photo, so use a darker, even shade instead. */
@media (max-width: 991.98px) {
  .hero::before {
    background-image:
      linear-gradient(180deg, transparent 75%, var(--bg) 100%),
      linear-gradient(180deg, rgba(10, 15, 28, .86) 0%, rgba(10, 15, 28, .80) 100%),
      linear-gradient(rgba(15, 75, 193, .14), rgba(15, 75, 193, .14)),
      url("../images/network-rack-hero-background.jpg");
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 1rem 0 1.1rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-ctas .btn {
  margin-right: .75rem;
  margin-bottom: .75rem;
}

.hero-meta {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
}

.hero-meta span {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.hero-meta .mini-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .3);
  color: var(--accent-hover);
  flex-shrink: 0;
}

.hero-meta .mini-badge svg {
  width: 13px;
  height: 13px;
}

.hero-meta strong {
  color: var(--text);
  font-weight: 500;
}

/* Page-banner variant used on interior pages (About/Services/Contact) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--border);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500'%3E%3Cpath d='M-40,120 Q400,40 800,140 T1650,90' stroke='%235781D4' stroke-width='1.6' fill='none' opacity='0.24'/%3E%3Cpath d='M-40,220 Q450,320 850,200 T1650,260' stroke='%239FB2CC' stroke-width='1.4' fill='none' opacity='0.18'/%3E%3Cpath d='M-40,340 Q420,270 830,380 T1650,330' stroke='%2338BDF8' stroke-width='1.3' fill='none' opacity='0.14'/%3E%3C/svg%3E");
  /* Waves and their fade are pinned to the top of the banner at a fixed size,
     so they look the same on every page however tall the banner text makes it. */
  background-size: max(100%, 1100px) auto;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(110% 100% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-size: 100% 460px;
  mask-size: 100% 460px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   6b. "AT A GLANCE" HERO PANEL
   The small stat/status card shown beside the hero heading.
   -------------------------------------------------------------------------- */
.glance-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.glance-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: .95rem;
}

.glance-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Long labels (e.g. the accreditations line) wrap onto a second line,
   right-aligned, rather than running past the edge of their column. */
.glance-list .status {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-align: right;
}

.glance-list .status-accent { color: var(--accent); }
.glance-list .status-success { color: var(--success); }
.glance-list .status-gold { color: var(--gold); }

/* Bold stat grid — an alternative to .glance-list for showing a handful of
   punchy numbers (rating, years, etc.) instead of a checklist. */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 1.2rem;
}

.stat-grid .stat-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.stat-grid .stat-num span {
  color: var(--accent-hover);
}

/* Google "G" logo after the rating number */
.stat-grid .stat-num .stat-google {
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-left: .22em;
  vertical-align: -.02em;
}

.stat-grid .stat-num .stat-google svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stat-grid .stat-label {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .35rem;
}

/* Small "landing" pop played by animateCount() in custom.js once a stat
   number finishes counting up. */
.stat-num {
  display: inline-block;
}

.stat-pop {
  animation: stat-pop .35s ease-out;
}

@keyframes stat-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stat-pop {
    animation: none;
  }
}

/* Fibre-lit top edge — a glowing gradient line with a bright highlight that
   continuously travels across it, like light pulsing through a fibre
   strand. Scoped to .card--fibre only, not the generic .card, so it
   doesn't affect cards elsewhere on the site. */
.card--fibre {
  position: relative;
  overflow: hidden;
  border-top: none;
  padding-top: calc(1.7rem + 3px);
}

.card--fibre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .32) 15%, rgba(125, 211, 252, .4) 50%, rgba(56, 189, 248, .32) 85%, transparent);
}

.card--fibre::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, transparent 42%, #EAF7FF 48%, #EAF7FF 52%, transparent 58%, transparent 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  filter: drop-shadow(0 0 5px rgba(125, 211, 252, .85));
  animation: fibre-pulse 3.2s linear infinite;
}

@keyframes fibre-pulse {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card--fibre::after {
    animation: none;
  }
}

/* Small pill badge linking out to a Google review/profile page — shown
   under a section heading, e.g. the homepage reviews section. */
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease;
}

.google-badge:hover {
  border-color: var(--accent);
}

.google-badge b {
  color: var(--text);
}

.google-badge .rating-muted {
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   7. SECTION RHYTHM + SECTION HEADERS
   -------------------------------------------------------------------------- */
section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* Decorative full-bleed divider tiling a repeating dashed-cable motif (a
   cable run broken by small connector/junction nodes) between the hero and
   the next section on the homepage. Color is hardcoded to match
   --text-muted / --accent-hover, since a background-image data URI can't
   read CSS custom properties. */
.signal-divider {
  width: 100%;
  height: 20px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 50px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='20' viewBox='0 0 50 20'%3E%3Cline x1='0' y1='10' x2='16' y2='10' stroke='%239FB2CC' stroke-width='1.3' stroke-opacity='0.5'/%3E%3Ccircle cx='22' cy='10' r='2.2' fill='%235781D4' fill-opacity='0.6'/%3E%3Cline x1='28' y1='10' x2='50' y2='10' stroke='%239FB2CC' stroke-width='1.3' stroke-opacity='0.5'/%3E%3C/svg%3E");
}


.section-muted {
  background-color: var(--panel);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head h2 {
  margin: .8rem 0 .75rem;
}

.section-head.text-center {
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   8. CARDS & ICON BADGES
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  height: 100%;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  background-color: var(--panel-2);
}

/* Small manufacturer logo in the top-right corner of a card (e.g. the white
   UniFi logo on the home page Access Control card). Slightly faded, full
   white when the card is hovered. */
.card {
  position: relative;
}

.card-brand {
  position: absolute;
  top: calc(1.7rem + 11px); /* centred on the 46px icon badge */
  right: 1.6rem;
  width: 24px;
  height: 24px;
  opacity: .6;
  transition: opacity .2s ease;
}

.card:hover .card-brand {
  opacity: 1;
}

.card .card-body {
  padding: 0;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 700; /* Bootstrap's .h5 sets 500, which DIN Next doesn't have, so it fell back to Light */
  color: var(--text);
  margin: 1rem 0 .5rem;
}

.card-text {
  color: var(--text-muted);
  font-size: .98rem;
}

.card-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Pin "Learn more" to the bottom of the card so links line up across a row
   of cards with different amounts of text. */
.card > .card-link {
  margin-top: auto;
  align-self: flex-start;
}

/* "Full case study coming soon" on a case study card that isn't a link yet */
.card-link--soon {
  color: var(--text-muted);
}

/* Icon badge shown at the top of a card */
.icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .3);
  color: var(--accent);
  font-size: 1.3rem;
}

/* Bigger badge at the top of the thank-you and 404 pages */
.icon-badge--lg {
  width: 56px;
  height: 56px;
  font-size: 1.6rem;
}

/* Cards that include a Bootstrap <img class="card-img-top">, e.g. team photos */
.card-img-top {
  border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0;
  margin: -1.7rem -1.6rem 1.2rem;
  width: calc(100% + 3.2rem);
  max-width: none;
  height: auto;
  /* every card photo is cropped to the same shape so the cards line up
     (so don't add width/height to these <img> tags: with an older copy of
     this file a browser would draw the photo at its full height) */
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* "Our Work" photos on the service pages: every photo is cropped to the same
   square shape, whatever size it was taken at, so the three photos line up. */
.work-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Add to a .work-photo whose subject sits low in the frame and gets cut off */
.work-photo--low {
  object-position: center 75%;
}

/* ...or sits high in the frame */
.work-photo--high {
  object-position: center 25%;
}

/* Small uppercase meta line on post cards (Case Studies / Insights), e.g.
   a category + date shown above the title. */
.post-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}


/* --------------------------------------------------------------------------
   9. PILLARS / "WHY US" BAND
   Cards with a colored top edge and a small tag label — used for
   differentiators / core promises.
   -------------------------------------------------------------------------- */
.pillar {
  border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, rgba(56, 189, 248, .06), transparent 45%), var(--panel);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.7rem 1.6rem 1.9rem;
  height: 100%;
}

/* Pillar with a brand logo in the top-right corner (e.g. UniFi on services.html) */
.pillar--branded {
  position: relative;
}

.pillar-brand {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 40px;
  height: 40px;
}

.pillar .tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pillar h3 {
  margin: .75rem 0 .6rem;
}

.pillar p {
  font-size: .98rem;
}


/* --------------------------------------------------------------------------
   10. STATS / ABOUT BAND
   -------------------------------------------------------------------------- */
.about-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--text);
}

.about-quote span {
  color: var(--accent);
}

/* Founder sign-off under the home page "Our Story" paragraph */
.story-signoff {
  margin: 1.2rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.story-signoff span {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .88rem;
  color: var(--text-muted);
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-left: 2px solid var(--gold);
  padding: .35rem 0 .35rem 1.1rem;
  margin-bottom: 1rem;
}

.stat b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text);
}

.stat small {
  color: var(--text-muted);
  font-size: .95rem;
}


/* --------------------------------------------------------------------------
   11. REVIEWS
   -------------------------------------------------------------------------- */
.review {
  display: flex;
  flex-direction: column;
}

.review .stars {
  color: var(--gold);
  letter-spacing: .18em;
  font-size: .9rem;
}

.review p {
  margin: .95rem 0 1.2rem;
  color: var(--text);
  font-size: .99rem;
  flex: 1;
}

.review cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  line-height: 1.5;
  display: block;
}

.review cite b {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-body);
  font-size: .85rem;
}


/* --------------------------------------------------------------------------
   12. FAQ ACCORDION
   Reskins Bootstrap's .accordion component for the dark theme.
   -------------------------------------------------------------------------- */
.accordion-item {
  background-color: var(--panel);
  border: 1px solid var(--border);
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
  border-radius: var(--radius);
}

.accordion-button {
  background-color: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}

.accordion-button:not(.collapsed) {
  background-color: var(--panel-2);
  color: var(--accent-text);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .25);
}

.accordion-button::after {
  filter: invert(72%) sepia(75%) saturate(1000%) hue-rotate(165deg) brightness(101%);
}

.accordion-body {
  color: var(--text-muted);
  font-size: .97rem;
}


/* --------------------------------------------------------------------------
   13. PRICING PANEL
   -------------------------------------------------------------------------- */
.price-panel {
  background: linear-gradient(180deg, rgba(56, 189, 248, .1), transparent 55%), var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem 1.5rem;
  height: 100%;
}

.price-panel .plan {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.price-panel .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  line-height: 1;
  margin: .5rem 0 .1rem;
  color: var(--text);
}

.price-panel .amount small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-muted);
}

.price-panel ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.price-panel li {
  display: flex;
  gap: .7rem;
  padding: .4rem 0;
  color: var(--text-muted);
  font-size: .96rem;
}

.price-panel li::before {
  content: "\2713";
  color: var(--success);
  font-family: var(--font-mono);
  flex: none;
}


/* --------------------------------------------------------------------------
   13b. PLAIN PRICE CARD (non-highlighted tiers, sits next to .price-panel)
   -------------------------------------------------------------------------- */
.plan-tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.plan-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
  margin: .5rem 0 0;
}

.plan-amount small {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   14. CONTACT FORM
   -------------------------------------------------------------------------- */
.form-card {
  background-color: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

.form-card h2 {
  margin-bottom: .4rem;
}

.form-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
}

.form-control,
.form-select {
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text);
  padding: .78rem .9rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .2);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: .7;
}

/* Dropdown arrow in a light colour so it shows on the dark field */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239FB2CC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
  background-color: var(--panel);
  color: var(--text);
}

/* ---- Quote form (quote.html): numbered sections, tick boxes, survey choice ---- */
.form-step {
  margin: 0;
  padding: 1.6rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.form-step:first-of-type {
  padding-top: .4rem;
  border-top: 0;
}

.form-step legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}

.form-step legend .step-num {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-size: .85rem;
}

.form-hint {
  font-size: .85rem;
  color: var(--text-muted);
  margin: -.2rem 0 .8rem;
}

.form-check-input {
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .2);
}

.form-check-label {
  color: var(--text);
}

/* Survey method: each option is a clickable tile */
.choice-tile {
  display: block;
  height: 100%;
  padding: .9rem 1rem;
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.choice-tile:hover {
  border-color: var(--accent-hover);
}

.choice-tile:has(input:checked) {
  border-color: var(--accent);
  background-color: rgba(15, 75, 193, .12);
}

.choice-tile .form-check-input {
  float: none;
  margin: 0 .5rem 0 0;
  vertical-align: -.15em;
}

.choice-tile strong {
  color: var(--text);
}

.choice-tile small {
  display: block;
  margin-top: .3rem;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

/* "How it works" steps beside the quote form */
.quote-steps {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  counter-reset: quote-step;
}

.quote-steps li {
  position: relative;
  padding: 0 0 1.4rem 3.1rem;
  counter-increment: quote-step;
}

.quote-steps li::before {
  content: counter(quote-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background-color: var(--panel);
  color: var(--accent-hover);
  font-family: var(--font-display);
  font-weight: 700;
}

.quote-steps h3 {
  font-size: 1.05rem;
  margin: .2rem 0 .3rem;
}

.quote-steps p {
  margin: 0;
  font-size: .95rem;
}

.contact-info .line {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
}

.contact-info .line a,
.contact-info .line .line-title {
  color: var(--text);
  font-weight: 500;
}

.contact-info .line a:hover {
  color: var(--accent);
}

.contact-info .line small {
  display: block;
  color: var(--text-muted);
  font-size: .85rem;
  margin-top: .1rem;
}

/* Coverage map (contact page): a hand-drawn SVG of the North East.
   .cm-area is each county shape, .cm-core is the Newcastle / Tyne and Wear
   area (shaded strongest), .cm-town is a town dot + label. */
.coverage-map {
  margin: 1.4rem 0 0;
  padding: 1.2rem 1.2rem 1rem;
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.coverage-map svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}

.coverage-map .cm-area {
  fill: rgba(15, 75, 193, .22);
  stroke: var(--accent-hover);
  stroke-width: 1;
  stroke-linejoin: round;
}

.coverage-map .cm-core {
  fill: rgba(87, 129, 212, .55);
}

.coverage-map .cm-region {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.coverage-map .cm-sea {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  opacity: .6;
}

.coverage-map .cm-town circle {
  fill: var(--text);
}

.coverage-map .cm-town text {
  fill: var(--text);
  font-family: var(--font-body);
  font-size: 10px;
}

.coverage-map .cm-home circle {
  fill: var(--gold);
}

.coverage-map .cm-home .cm-halo {
  fill: rgba(232, 183, 80, .25);
}

.coverage-map .cm-home text {
  fill: var(--gold);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.coverage-map figcaption {
  margin-top: .8rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
}


/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--panel);
  border-top: 1px solid var(--border);
  padding: 3.2rem 0 2.2rem;
  color: var(--text-muted);
}

.site-footer h2,
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-weight: 500;
}

.site-footer .footer-brand {
  margin-bottom: .75rem;
  display: inline-block;
}

.footer-logo {
  height: 40px;
  width: auto;
  display: block;
}

.footer-blurb {
  max-width: 32ch;
}

.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Generic centered-paragraph width helper, e.g. under a CTA heading */
.text-measure {
  max-width: 50ch;
  margin-inline: auto;
}

.site-footer a {
  color: var(--text-muted);
  font-size: .93rem;
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer .legal {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.site-footer .footer-credit {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
}

.site-footer .uk-flag-icon {
  width: 18px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   16. SCROLL-REVEAL ANIMATION HOOKS
   Paired with js/custom.js, which toggles .is-in on scroll into view.
   If JavaScript is disabled, .reveal elements are still fully visible
   (see the no-js fallback below) — this is a progressive enhancement only.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* Centers and caps the width of an accordion so it doesn't stretch full-bleed */
.accordion-narrow {
  max-width: 860px;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   16b. IMAGE HELPERS
   -------------------------------------------------------------------------- */
.img-outline {
  border: 1px solid var(--border);
}

.team-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   16c. LOGO STRIP ("Working with" scrolling logos, home page)
   The track holds two identical groups; sliding it left by 50% loops
   seamlessly. Each group is at least as wide as the strip, so there is
   never a gap on wide screens.
   -------------------------------------------------------------------------- */
.logo-strip {
  padding-block: 0 clamp(3rem, 5vw, 4.5rem);
}

.logo-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.logo-strip-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-strip-track {
  display: flex;
  width: max-content;
  min-width: 200%;
  animation: logo-strip-scroll 45s linear infinite;
}

.logo-strip-viewport:hover .logo-strip-track {
  animation-play-state: paused;
}

.logo-strip-group {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-around;
  gap: 3.5rem;
  min-width: 50%;
  margin: 0;
  padding: 0 1.75rem;
  list-style: none;
}

.logo-strip-group img {
  display: block;
  height: 38px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}

.logo-strip-group img.logo-lg {
  height: 50px;
}

.logo-strip-group img:hover {
  opacity: 1;
}

@keyframes logo-strip-scroll {
  to { transform: translateX(-50%); }
}

/* No motion: show the logos as a static, wrapped row (first group only) */
@media (prefers-reduced-motion: reduce) {
  .logo-strip-track {
    animation: none;
    width: auto;
    min-width: 0;
  }

  .logo-strip-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .logo-strip-group[aria-hidden="true"] {
    display: none;
  }

  .logo-strip-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* --------------------------------------------------------------------------
   17. RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .card-img-top {
    margin: -1.7rem -1.6rem 1.2rem;
  }
}

/* Privacy link in the footer's small print: same size as the text around it */
.site-footer .legal a {
  font-size: inherit;
  text-decoration: underline;
}

/* Privacy policy: readable line length for long text */
.policy {
  max-width: 72ch;
}

.policy h2 {
  margin-top: 2.5rem;
}

.policy h2:first-child {
  margin-top: 0;
}

.policy h3 {
  margin-top: 1.5rem;
}