/* ==========================================================================
   BRIGS shared theme — tokens, typography, nav, bands, cards, buttons.
   Used by every page. Keep page-only CSS in the page's own <style> block;
   put anything reused across pages here instead — a page then overrides
   only the properties that differ, never re-declares the whole rule.
   ========================================================================== */
  :root{
    /* brand */
    --primary-red:#E33237;
    --primary-blue:#161138;
    --primary-white:#ffffff;
    --secondary-dark:#232a63;
    --secondary-blue:#263b7f;
    --secondary-cyan:#0a9bd8;
    --secondary-green:#29a762;
    --secondary-orange:#f16022;
    --secondary-yellow:#f79f1d;
    --secondary-gray:#a7a9ac;

    /* fixed dark bands (hero / cta / footer) — same in both themes */
    --band-bg:#161138;
    --band-bg-2:#1c1747;
    --band-ink:#ffffff;
    --band-muted:#b9b8d6;
    --band-border:rgba(255,255,255,0.14);

    /* theme tokens (light default) */
    --bg:#ffffff;
    --bg-alt:#f4f5fb;
    --card:#ffffff;
    --border:rgba(22,17,56,0.11);
    --ink:#161138;
    --ink-soft:#423f66;
    --muted:#66647f;
    --accent:#E33237;
    --accent-ink:#ffffff;
    --shadow:0 24px 48px -28px rgba(22,17,56,0.35);
    --shadow-sm:0 4px 6px -1px rgba(0,0,0,0.05);
    --shadow-lg:0 20px 40px rgba(11,37,69,0.15);

    --font-display:'Sora',system-ui,sans-serif;
    --font-body:'Manrope',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;

    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    /* Light only: the site keeps its own colours whatever the device theme
       (also stops browsers that auto-darken pages, e.g. Chrome on Android). */
    color-scheme: only light;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-inline:0;
  }
  img{max-width:100%;}
  /* Browsers give form controls their own default font; use the page's. */
  button,input,select,textarea{font-family:inherit;}
  [hidden]{display:none!important;}
  a{color:inherit;}
  .msym{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;}

  .wrap{max-width:1180px;margin-inline:auto;padding-inline:24px;}
  @media (max-width:640px){ .wrap{padding-inline:16px;} }

  /* .container is the mega-nav pages' (home.html, fos.html) equivalent of
     .wrap above — same 1180px cap, its own gutter approach. Defined here
     so it works wherever it's used, not just on the page that first added
     it (header.mega-nav .container further up widens it to 1800px). */
  .container{width:min(1180px, calc(100% - 48px));margin:0 auto;}
  @media (max-width:600px){ .container{width:calc(100% - 32px);} }

  h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;color:var(--ink);}
  h1{font-weight:800;}
  h2{font-weight:800;letter-spacing:-0.01em;}
  h3{font-weight:700;}
  p{margin:0;color:var(--ink-soft);}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);display:inline-block;}

  .btn{
    font-family:var(--font-body);
    font-weight:700;
    font-size:15px;
    border-radius:10px;
    padding:13px 22px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 24px -12px rgba(227,50,55,0.55);}
  .btn-primary:hover{box-shadow:0 16px 28px -12px rgba(227,50,55,0.65);}
  .btn-ghost-light{background:transparent;border-color:var(--band-border);color:var(--band-ink);}
  .btn-ghost-light:hover{background:rgba(255,255,255,0.08);}
  .btn-outline{background:transparent;border-color:var(--border);color:var(--ink);}
  .btn-outline:hover{background:var(--bg-alt);}

  /* ---------- NAV ----------
     header.site/.navlinks/.navToggle (the old sticky-bar nav) are gone now
     that all three pages share header.mega-nav — see the MEGA MENU section
     below. .nav/.wordmark stay: .nav is reused inside header.mega-nav's
     .container, and .wordmark is still used by the footers. */
  .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px;}
  .wordmark{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--band-ink);display:flex;align-items:center;gap:2px;text-decoration:none;}
  .wordmark .os{color:var(--primary-red);}
  .wordmark img{width:30px;height:30px;border-radius:7px;object-fit:cover;margin-right:6px;}

  /* ---------- MEGA MENU ----------
     A second, floating header/nav system — a transparent header over a hero
     banner, 3-bar toggle, multi-column dropdown panels. Used by home.html
     and fos.html. Deliberately separate from header.site/.navlinks above
     (still used by ert.html): the two look different (sticky bar vs
     floating overlay, icon toggle vs 3-bar toggle) and share no class
     names, so header.mega-nav only ever applies where a page opts in. */
  header.mega-nav{position:absolute;top:0;left:0;right:0;z-index:20;}
  header.mega-nav .container{width:min(1800px, calc(100% - 48px));}

  .logo{display:block;height:30px;width:auto;}
  @media (max-width:600px){ .logo{height:36px;} }
  .logo-link{display:block;line-height:0;}

  .nav-links{display:flex;align-items:center;gap:30px;padding:6px 24px;border-radius:100px;background:linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.75) 18%, rgba(255,255,255,0.75) 82%, rgba(255,255,255,0.3) 100%);}
  .nav-links a{color:var(--primary-blue);text-decoration:none;font-size:14px;font-weight:600;transition:color 0.2s ease;}
  .nav-links a:hover{color:var(--primary-red);}
  .nav-cta{padding:5px 19px;border:1px solid var(--primary-blue);border-radius:100px;background:var(--primary-blue);}
  .nav-links a.nav-cta{color:#fff;}
  .nav-cta:hover{background:var(--primary-red);border-color:var(--primary-red);}
  .nav-links a.nav-cta:hover{color:#fff;}
  .nav-cta .msym{font-size:15px;vertical-align:-3px;margin-right:4px;}

  .megaToggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:1px solid rgba(22,17,56,0.3);border-radius:8px;cursor:pointer;}
  .megaToggle span{display:block;width:16px;height:2px;margin:0 auto;background:var(--primary-blue);border-radius:2px;}

  .nav-item{position:relative;}
  .nav-item > a{display:inline-flex;align-items:center;gap:5px;}
  /* Hover area of a top-level item: the full header height (not just the text), the whole gap to its neighbours,
     and down across the 16px gap into the dropdown, so the pointer can wander without the submenu closing.
     The pseudo-element belongs to .nav-item, so hovering it counts as hovering the item. */
  @media (min-width:901px){
    .nav-item::before{content:"";position:absolute;top:-21px;bottom:-21px;left:-15px;right:-15px;}
  }

  .mega-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border-radius:14px;box-shadow:0 24px 48px -20px rgba(11,37,69,0.35);padding:12px;min-width:230px;max-width:calc(100vw - 48px);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.18s ease, transform 0.18s ease;z-index:30;}
  .nav-item.is-open > .mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .nav-item:last-child > .mega-panel{left:auto;right:0;transform:translateY(6px);}
  .nav-item:last-child.is-open > .mega-panel{transform:translateY(0);}

  .mega-panel--wide{flex-direction:row;gap:28px;min-width:600px;left:auto;right:0;transform:translateY(6px);}
  .nav-item.is-open > .mega-panel--wide{transform:translateY(0);}

  .mega-col{display:flex;flex-direction:column;gap:2px;min-width:200px;}
  .mega-col h5{margin:4px 0 6px;padding:0 12px;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}

  /* a product column is ONE link: heading, name and description are a single block that lights up together */
  .nav-links a.mega-col--link{padding:10px 0 12px;border-radius:10px;text-decoration:none;font-weight:inherit;transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;}
  .mega-col--link h5{margin:0 0 8px;transition:color 0.15s ease;}
  .mega-col--link .mega-link-title,.mega-col--link .mega-link-desc{padding:0 12px;}
  .nav-links a.mega-col--link:hover,.nav-links a.mega-col--link:focus-visible{background:#fff;box-shadow:inset 0 0 0 1.5px var(--primary-red), 0 10px 24px -14px rgba(11,37,69,0.4);transform:translateY(-1px);outline:none;}
  .mega-col--link:hover h5,.mega-col--link:focus-visible h5,
  .mega-col--link:hover .mega-link-title,.mega-col--link:focus-visible .mega-link-title{color:var(--primary-red);}
  .mega-col--link:hover .mega-link-desc,.mega-col--link:focus-visible .mega-link-desc{color:var(--ink-soft);}

  .mega-link{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background 0.15s ease, color 0.15s ease;}
  .nav-links .mega-link{color:var(--primary-blue);}
  .nav-links .mega-link:hover{background:var(--bg-alt);color:var(--primary-red);}

  /* cards sit on the panel's own white with the same 12px inset as the column headings and plain links, so
     headings, card text and links share one left edge; the box only appears on hover/focus */
  .mega-link--feature{white-space:normal;background:transparent;padding:9px 12px;}
  .mega-link-title{display:block;font-size:14.5px;font-weight:800;color:var(--primary-blue);}
  .mega-link-desc{display:block;margin-top:4px;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted);}
  .mega-link--feature:hover{background:#fff;box-shadow:0 10px 24px -14px rgba(11,37,69,0.4);}
  .mega-link--feature:hover .mega-link-title{color:var(--primary-red);}
  /* the whole card is the link: light the entire block up on hover/focus, not just the name */
  .nav-links .mega-link--feature{transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;}
  .nav-links .mega-link--feature:hover,.nav-links .mega-link--feature:focus-visible{background:#fff;box-shadow:inset 0 0 0 1.5px var(--primary-red), 0 10px 24px -14px rgba(11,37,69,0.4);transform:translateY(-1px);outline:none;}
  .nav-links .mega-link--feature:hover .mega-link-title,.nav-links .mega-link--feature:focus-visible .mega-link-title{color:var(--primary-red);}
  .nav-links .mega-link--feature:hover .mega-link-desc,.nav-links .mega-link--feature:focus-visible .mega-link-desc{color:var(--ink-soft);}

  /* Mobile/tablet menu: a white card that drops down under the header.
     Selectors that change link colours use .nav-links so they outrank the
     desktop rules above (.nav-links a / .nav-links .mega-link). */
  @media (max-width:900px){
    .megaToggle{display:flex;background:rgba(255,255,255,0.88);border-color:rgba(22,17,56,0.16);box-shadow:0 4px 12px -6px rgba(22,17,56,0.3);}
    .megaToggle span{transition:transform .2s ease, opacity .2s ease;}
    .megaToggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .megaToggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .megaToggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    .nav-links{
      display:none;position:absolute;top:calc(100% - 4px);left:12px;right:12px;
      flex-direction:column;align-items:stretch;gap:0;
      background:#ffffff;border-radius:18px;padding:6px 20px 20px;
      box-shadow:0 24px 48px -16px rgba(22,17,56,0.4);
      max-height:calc(100vh - 110px);overflow-y:auto;
    }
    .nav-links.is-open{display:flex;}
    .nav-item{width:100%;}
    .nav-links .nav-item > a{width:100%;padding:15px 2px;border-bottom:1px solid var(--border);justify-content:space-between;font-size:16px;font-weight:700;color:var(--primary-blue);}
    .nav-item > a::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;}
    .nav-links .nav-item.is-open > a{color:var(--primary-red);border-bottom-color:transparent;}
    .nav-item.is-open > a::after{transform:translateY(2px) rotate(-135deg);}

    .mega-panel,.mega-panel--wide{
      display:none;position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
      background:transparent;box-shadow:none;border-radius:0;padding:0 0 12px;
      min-width:0;max-width:none;flex-direction:column;gap:0;border-bottom:1px solid var(--border);
    }
    /* transform:none here too: the desktop open-state rules (translateX(-50%)) outrank the plain .mega-panel reset above */
    .nav-item.is-open > .mega-panel,.nav-item.is-open > .mega-panel--wide{display:flex;transform:none;}
    .mega-col{min-width:0;}
    .mega-col h5{margin:12px 0 4px;padding:0 12px;}
    .nav-links .mega-link{white-space:normal;padding:10px 12px;font-size:14.5px;color:var(--ink-soft);border-radius:10px;}
    .nav-links .mega-link:hover{background:var(--bg-alt);color:var(--primary-red);}
    .mega-link--feature{margin:0;}
    .nav-links a.nav-cta{margin-top:18px;padding:13px 19px;justify-content:center;text-align:center;font-size:15px;}
  }

  /* ---------- BAND (hero / cta / footer, fixed dark) ---------- */
  .band{background:var(--band-bg);color:var(--band-ink);}
  .band h1,.band h2,.band h3,.band h4{color:var(--band-ink);}
  .band p{color:var(--band-muted);}
  .band .eyebrow{color:var(--band-muted);}

  /* ---------- HERO ---------- */
  .hero{padding-block:64px 88px;position:relative;overflow:hidden;}
  .hero::before{
    content:"";position:absolute;inset:-20% -10% auto auto;width:640px;height:640px;
    background:radial-gradient(circle, rgba(227,50,55,0.22), transparent 65%);
    pointer-events:none;
  }
  .hero::after{
    content:"";position:absolute;inset:auto auto -30% -10%;width:520px;height:520px;
    background:radial-gradient(circle, rgba(10,155,216,0.18), transparent 65%);
    pointer-events:none;
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;position:relative;}
  @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }

  /* Photo-banner hero (every page except home.html): white gradient over a
     banner photo, single left-aligned text column, extra top clearance for
     the floating header.mega-nav. The page only supplies its photo:
       .xyz-hero{background-image:var(--photo-hero-fade), url('img/...');}
     The red/cyan glow pseudo-elements above are built for a dark hero and
     show up as odd colour patches over a photo, so they're dropped here. */
  .photo-hero{
    --photo-hero-fade:linear-gradient(100deg, rgba(255,255,255,.9) 32%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 60%, rgba(255,255,255,0) 100%);
    background-size:cover;
    background-position:center 50%;
    padding-top:170px;
    padding-bottom:70px;
  }
  /* Phones: the copy spans the full width, so a left-side fade is not enough —
     wash the whole photo so the text never sits on busy image detail. */
  @media (max-width:700px){
    .photo-hero{--photo-hero-fade:linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.72) 100%);}
  }
  .photo-hero::before,
  .photo-hero::after{content:none;}
  .photo-hero .hero-grid{grid-template-columns:1fr;}
  .photo-hero .hero-copy{max-width:700px;min-height:470px;}
  .photo-hero .hero-copy h1 span{color:var(--accent);}

  /* Photo-banner hero pages (fos.html/ert.html/industries.html/
     visual-workplace-program.html) widen their .wrap to match the
     1800px header.mega-nav .container, instead of each page repeating
     style="max-width:1800px" inline. */
  .hero .wrap{max-width:1800px;}
  .hero-copy h1{font-size:clamp(30px,4.4vw,48px);line-height:1.08;margin:16px 0 18px;}
  .hero-copy p.lead{font-size:17px;max-width:52ch;margin-bottom:28px;}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px;}
  .hero-tags{display:flex;flex-wrap:wrap;gap:10px;}
  .tag{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--band-ink);background:rgba(255,255,255,0.08);border:1px solid var(--band-border);padding:6px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;}
  .tag .msym{font-size:15px;}

  /* Photo-banner heroes (fos.html, ert.html) sit on a light gradient over
     the image rather than .band's usual dark fill, so their text needs to
     be dark instead of light. */
  .hero .eyebrow{color:var(--primary-blue);}
  .hero .hero-copy h1{color:var(--primary-blue);}
  .hero .hero-copy p.lead{color:var(--ink-soft);}
  .hero .tag{color:var(--primary-blue);background:rgba(22,17,56,0.05);border-color:rgba(22,17,56,0.16);}
  /* clickable tags (e.g. module links in the fos.html hero) */
  a.tag{text-decoration:none;transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;}
  .hero a.tag:hover{background:var(--card);color:var(--primary-red);border-color:rgba(227,50,55,0.45);transform:translateY(-1px);}
  @media (prefers-reduced-motion: reduce){ a.tag{transition:none;} .hero a.tag:hover{transform:none;} }
  .hero .btn-ghost-light{color:var(--primary-blue);border-color:rgba(22,17,56,0.35);}
  .hero .btn-ghost-light:hover{background:rgba(22,17,56,0.06);}

  /* Single pre-composited laptop+tv+phone shot (fos.html #platform). */
  .device-lineup-img{display:block;width:100%;max-width:640px;height:auto;margin-inline:auto;}

  /* ---------- SECTIONS ---------- */
  section{padding-block:80px;}
  @media (max-width:640px){ section{padding-block:56px;} }
  .section-head{max-width:720px;margin-bottom:44px;}
  .section-head h2{font-size:clamp(24px,3.2vw,34px);margin-top:14px;}
  .section-head h2 span{color:var(--accent);}
  .section-head p{margin-top:14px;font-size:16px;}

  /* platform split */
  .surfaces{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  @media (max-width:860px){ .surfaces{grid-template-columns:1fr;} }
  .surface-card{
    background:var(--card);border:1px solid var(--border);border-radius:20px;padding:30px;
    box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px;
  }
  .surface-card .icon-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;}
  .surface-card.web .icon-badge{background:var(--secondary-cyan);}
  .surface-card.app .icon-badge{background:var(--secondary-green);}
  .surface-card h3{font-size:21px;}
  .surface-card .eyebrow{font-size:11px;}
  .surface-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .surface-list li{display:grid;grid-template-columns:20px 1fr;column-gap:10px;align-items:start;font-size:14.5px;color:var(--ink-soft);}
  .surface-list li .msym{font-size:19px;margin-top:1px;}
  .surface-card.web .surface-list li .msym{color:var(--secondary-cyan);}
  .surface-card.app .surface-list li .msym{color:var(--secondary-green);}
  .surface-visual{border-radius:14px;overflow:hidden;border:1px solid var(--border);line-height:0;}
  .surface-visual img{display:block;width:100%;height:auto;}

  /* modules grid */
  .modules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  @media (max-width:900px){ .modules-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .modules-grid{grid-template-columns:1fr;} }
  .module-card{
    background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;
    display:flex;flex-direction:column;gap:12px;transition:transform .15s ease, box-shadow .15s ease;
    border-top:3px solid var(--m-color, var(--accent));
    text-decoration:none;
  }
  .module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .module-card .icon-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--m-color) 16%, transparent);color:var(--m-color);}
  .module-card h4{font-size:16px;}
  .module-card p{font-size:13.5px;}
  .card-link-hint{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--m-color, var(--accent));display:inline-flex;align-items:center;gap:4px;text-decoration:none;}
  .card-link-hint .msym{font-size:14px;}

  .ready-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px;}
  @media (max-width:1000px){ .ready-strip{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .ready-strip{grid-template-columns:1fr;} }
  .ready-card{background:var(--bg-alt);border:1px dashed var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px;}
  a.ready-card{border-style:solid;background:var(--card);color:inherit;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
  a.ready-card:hover{border-color:var(--m-color);box-shadow:var(--shadow);transform:translateY(-2px);}
  a.ready-card .card-link-hint{display:inline-flex;margin-top:6px;}
  .ready-card .msym{font-size:26px;color:var(--m-color);}
  .ready-card h4{font-size:14.5px;}
  .ready-card p{font-size:12.5px;}

  /* AI section */
  .ai-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  @media (max-width:860px){ .ai-tiles{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .ai-tiles{grid-template-columns:1fr;} }
  .ai-tile{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;}
  .ai-tile .icon-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(227,50,55,0.12);color:var(--accent);}
  .ai-tile h4{font-size:15.5px;}
  .ai-tile p{font-size:13.5px;}

  /* ---------- AI band: dark section with a soft red/blue glow, an open
     "spec sheet" grid of capabilities (hairline dividers, no boxes) and a
     translucent example panel. Markup: section.band.ai-band > .wrap >
     .section-head + .ai-grid > .ai-item (+ .ai-example). ---------- */
  .ai-band{position:relative;overflow:hidden;}
  .ai-band::before,
  .ai-band::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
  .ai-band::before{width:720px;height:720px;top:-300px;right:-220px;background:radial-gradient(circle, rgba(227,50,55,0.22), transparent 65%);}
  .ai-band::after{width:620px;height:620px;bottom:-320px;left:-200px;background:radial-gradient(circle, rgba(10,155,216,0.16), transparent 65%);}
  .ai-band .wrap{position:relative;z-index:1;}
  /* wider than the standard 720px heading so the title fits on one line at full width */
  .ai-band .section-head{max-width:1060px;}
  /* gap + grid background = 1px hairlines between items, none on the outside */
  .ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--band-border);}
  @media (max-width:860px){ .ai-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .ai-grid{grid-template-columns:1fr;} }
  /* compact: icon on the left, title + text beside it */
  .ai-item{position:relative;display:grid;grid-template-columns:38px 1fr;column-gap:16px;row-gap:5px;align-content:start;padding:20px 22px 22px;background:var(--band-bg);transition:background .25s ease;}
  .ai-item:hover{background:var(--band-bg-2);}
  .ai-item-num{position:absolute;top:20px;right:20px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,0.32);}
  .ai-item-icon{
    grid-column:1;grid-row:1 / span 2;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;
    background:linear-gradient(135deg, var(--primary-red), var(--secondary-orange));
    box-shadow:0 8px 18px -8px rgba(227,50,55,0.7);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .ai-item:hover .ai-item-icon{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(227,50,55,0.85);}
  .ai-item-icon .msym{font-size:20px;}
  .ai-item h4{grid-column:2;font-size:15.5px;line-height:1.3;padding-right:26px;margin-top:2px;}
  .ai-item p{grid-column:2;font-size:13.5px;line-height:1.55;}
  .ai-example{
    margin-top:40px;padding:28px 30px;border-radius:16px;
    background:rgba(255,255,255,0.05);border:1px solid var(--band-border);border-left:3px solid var(--primary-red);
  }
  .ai-example p{margin-top:10px;font-size:15px;line-height:1.7;}
  @media (prefers-reduced-motion: reduce){ .ai-item,.ai-item-icon{transition:none;} .ai-item:hover .ai-item-icon{transform:none;} }

  /* workflow */
  .workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
  @media (max-width:860px){ .workflow{grid-template-columns:1fr;} }
  .workflow::before{
    content:"";position:absolute;top:22px;left:8%;right:8%;height:1px;background:var(--border);
  }
  @media (max-width:860px){ .workflow::before{display:none;} }
  .wf-step{position:relative;padding:0 18px 0 0;display:flex;flex-direction:column;gap:10px;}
  @media (max-width:860px){ .wf-step{padding:0 0 22px 0;border-left:1px solid var(--border);padding-left:20px;margin-left:8px;} }
  .wf-step h4{font-size:15px;margin-top:2px;}
  .wf-step p{font-size:13.5px;}

  .infographic-banner{margin-top:40px;border-radius:18px;overflow:hidden;border:1px solid var(--border);}

  /* light tag variant for use on white/grey sections */
  .tag-light{background:var(--card);border-color:var(--border);color:var(--ink-soft);}

  /* 3-card "problem" grid (holds .module-card) */
  .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:760px){ .problem-grid{grid-template-columns:1fr;} }

  /* CTA band */
  .cta-band{padding-block:70px;text-align:center;}
  .cta-band h2{font-size:clamp(24px,3.6vw,36px);margin-inline:auto;}
  .cta-band p{margin-top:14px;margin-inline:auto;}
  .cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px;}
  .cta-band h2 span{color:#ff7377;}
  /* impact stats inside a CTA band */
  .impact-grid{margin-top:32px;margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;}
  @media (max-width:820px){ .impact-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:440px){ .impact-grid{grid-template-columns:1fr;} }
  .imp{border-top:3px solid var(--primary-red);padding-top:14px;}
  .imp b{font-family:var(--font-display);font-size:21px;font-weight:800;display:block;color:var(--band-ink);}
  .imp span{font-size:13px;color:var(--band-muted);display:block;margin-top:6px;}

  /* footer */
  footer.site{padding-block:44px;}
  .footer-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
  .footer-blurb{margin-top:10px;max-width:32ch;font-size:13px;}
  .footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
  .footer-col h5{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted);margin:0 0 12px;}
  .footer-col a{display:block;color:var(--band-ink);opacity:.85;text-decoration:none;font-size:13.5px;margin-bottom:9px;}
  .footer-col a:hover{opacity:1;text-decoration:underline;}
  /* the FactoryOS module list is long: lay it out as two columns, filled top to bottom */
  .footer-col--modules .footer-links{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:40px;}
  @media (max-width:420px){ .footer-col--modules .footer-links{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:1fr;} }
  .footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--band-border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--band-muted);}

  /* footer — social links */
  .footer-social{display:flex;align-items:center;gap:10px;}
  .footer-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;border-radius:50%;border:1px solid var(--band-border);color:var(--band-ink);opacity:.8;transition:background .15s ease, opacity .15s ease, border-color .15s ease;}
  .footer-social a:hover{background:rgba(255,255,255,0.08);opacity:1;border-color:rgba(255,255,255,0.3);}
  .footer-social svg{width:16px;height:16px;display:block;}

  /* shared footer strip — rendered by js/site.js into footer[data-site-footer] */
  .footer-bottom:first-child{margin-top:0;padding-top:0;border-top:0;}
  .footer-legal{display:flex;flex-direction:column;gap:4px;}
  .footer-visits{font-size:11.5px;letter-spacing:.01em;opacity:.8;}
  .footer-visits[hidden]{display:none;}
  .footer-contact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .footer-contact .btn{padding:9px 18px;font-size:13.5px;}

  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.is-visible{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1!important;transform:none!important;transition:none!important;}
    .btn{transition:none;}
  }
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  /* ==========================================================================
     PROGRAM / SERVICE PAGE COMPONENTS
     Shared by loto-implementation, machine-guarding-interlocking,
     process-safety, machine-process-safety, visual-workplace-program and
     industries. A page only overrides the odd size/spacing in its own <style>.
     ========================================================================== */

  /* The Gap — sharp concept cards: red circular icon top-right of the title
     row, thin red left border, natural borders elsewhere, left-aligned copy. */
  .concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  @media (max-width:820px){ .concept-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto;} }
  .concept-card{
    position:relative;background:var(--card);border:1px solid var(--border);
    border-left:1px solid var(--accent);
    height:100%;padding:30px 24px 28px;text-align:left;
    box-shadow:0 2px 10px -6px rgba(22,17,56,0.1);
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .concept-card:hover{box-shadow:0 16px 32px -16px rgba(22,17,56,0.22);transform:translateY(-2px);}
  .concept-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;}
  .concept-icon{
    flex-shrink:0;width:40px;height:40px;border-radius:50%;
    background:var(--accent);display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 14px -4px rgba(227,50,55,0.45);
  }
  .concept-icon .msym{font-size:19px;color:#fff;}
  .concept-body h4{font-size:16.5px;font-weight:800;color:var(--ink);margin:0;}
  .concept-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.65;}

  /* Hazard pill list + pull-quote lines. */
  .pill-list{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 24px;}
  .pill-list .tag{background:var(--card);color:var(--ink-soft);border-color:var(--border);font-size:12.5px;padding:8px 14px;box-shadow:0 2px 6px -2px rgba(22,17,56,0.1);}
  .pull-line{font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:6px;}
  .pull-line b{color:var(--ink);font-weight:700;}

  /* Stat / incident callout — icon disc + label + big line. */
  .risk-callout{
    display:grid;grid-template-columns:68px 1fr;gap:28px;align-items:center;padding:42px 48px;
    background:linear-gradient(105deg, rgba(227,50,55,.07), var(--card) 55%, var(--card));
    border:1px solid rgba(227,50,55,.2);border-radius:22px;margin-top:32px;
  }
  @media (max-width:640px){ .risk-callout{grid-template-columns:1fr;padding:30px;} }
  .risk-callout-icon{
    width:68px;height:68px;border-radius:50%;background:rgba(227,50,55,.1);
    border:1px solid rgba(227,50,55,.3);color:var(--accent);display:flex;align-items:center;justify-content:center;
  }
  .risk-callout-icon .msym{font-size:32px;}
  .risk-callout-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
  .risk-callout h3{font-size:clamp(23px,2.8vw,32px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--primary-blue);margin:0 0 10px;}
  .risk-callout h3 span{color:var(--ink-soft);}
  .risk-callout p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;max-width:780px;}
  /* two statistics side by side, split by a hairline (stacked on narrow screens) */
  .risk-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
  .risk-stat + .risk-stat{padding-left:32px;border-left:1px solid rgba(227,50,55,.2);}
  .risk-stat h3{font-size:clamp(21px,2.2vw,26px);}
  /* a stat spanning the full row, under a hairline (e.g. a 3rd stat below a pair) */
  .risk-stats .risk-stat--wide{grid-column:1 / -1;padding-left:0;border-left:0;padding-top:28px;border-top:1px solid rgba(227,50,55,.2);}
  @media (max-width:860px){ .risk-stats{grid-template-columns:1fr;gap:24px;} .risk-stat + .risk-stat{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid rgba(227,50,55,.2);} }

  /* What BRIGS Helps You Achieve — a wide infographic (circles, icons and
     photos, no baked-in text) with the title/description for each step
     written here instead, in a matching column grid below it. */
  .achieve-infographic{margin-top:36px;}
  .achieve-infographic img{display:block;width:100%;height:auto;}
  .achieve-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:18px;text-align:center;}
  @media (max-width:820px){ .achieve-labels{grid-template-columns:repeat(2,1fr);max-width:480px;margin-inline:auto;} }
  @media (max-width:520px){ .achieve-labels{grid-template-columns:1fr;} }
  .achieve-labels h4{color:var(--accent);font-size:15px;font-weight:800;margin-bottom:6px;}
  .achieve-labels p{color:var(--ink-soft);font-size:12.5px;line-height:1.5;}

  /* The BRIGS Program — numbered phases. */
  .phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;}
  @media (max-width:820px){ .phase-grid{grid-template-columns:1fr;} }
  .phase-card{padding:20px 4px 0;border-top:2px solid var(--accent);}
  .phase-index{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:10px;display:block;}
  .phase-card h4{font-size:15.5px;color:var(--ink);margin-bottom:8px;}
  .phase-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}

  /* Photo tile + caption. Default grid: 3 columns that stack to one narrow
     column; .examples-grid--gallery steps 3 → 2 → 1 with wider 16:10 tiles. */
  .examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  @media (max-width:860px){ .examples-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;} }
  .examples-grid--gallery{gap:32px 28px;}
  @media (max-width:900px){ .examples-grid--gallery{grid-template-columns:repeat(2,1fr);max-width:none;margin-inline:0;} }
  @media (max-width:560px){ .examples-grid--gallery{grid-template-columns:1fr;} }
  .example-card{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);}
  .example-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
  .examples-grid--gallery .example-card img{aspect-ratio:16/10;}
  .example-card .example-label{padding:14px 18px 16px;font-size:13.5px;font-weight:700;color:var(--ink);}

  /* The BRIGS Standard — centered narrow heading, full-width card row, trust
     strip and brochure link below it. */
  #standard .section-head{max-width:680px;margin-inline:auto;text-align:center;margin-bottom:36px;}
  #standard .section-head .eyebrow{justify-content:center;}
  .standard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;}
  @media (max-width:860px){ .standard-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto;} }
  .standard-card{
    position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;
    padding:26px 24px;box-shadow:0 2px 10px -6px rgba(22,17,56,0.08);
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .standard-card:hover{box-shadow:0 20px 36px -20px rgba(22,17,56,0.22);transform:translateY(-3px);}
  .standard-icon{width:40px;height:40px;border-radius:50%;background:rgba(227,50,55,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .standard-icon .msym{font-size:20px;color:var(--accent);}
  .standard-card h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:8px;}
  .standard-card p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;}
  .trust-strip{margin-top:48px;text-align:center;}
  .trust-strip .trust-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
  .trust-logos{max-width:680px;margin-inline:auto;}
  .trust-logos img{display:block;width:100%;border-radius:12px;}

  /* ==========================================================================
     LANDING COMPONENTS (home.html) — usable on any page.
     ========================================================================== */

  /* ---------- Proven strip: stats "flags" (red pennant on a pole + label)
     shown directly under the home banner (css/banner.css). ---------- */
  .proven{padding:60px 0 66px;background:var(--bg-alt);}
  /* a real heading (same scale as the section titles), with a row of five flags beneath it */
  .proven-heading{
    margin:0 0 50px;color:var(--primary-blue);text-align:center;
    font-size:clamp(32px, 3.8vw, 48px);font-weight:800;line-height:1.1;letter-spacing:-0.04em;
  }
  .proven-heading::after{content:"";display:block;width:56px;height:4px;margin:18px auto 0;border-radius:4px;background:var(--primary-red);}
  .flags{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 48px;max-width:1180px;margin:0 auto;}
  /* each figure is a white card; the red flag hangs from its top edge */
  .flag{display:flex;flex-direction:column;align-items:center;flex:0 0 min(204px, calc((100% - 192px) / 5));padding:0 0 22px;background:#ffffff;border-radius:14px;overflow:hidden;}
  /* the red shape is drawn on ::before (so its V-shaped bottom can be clipped) and the soft shadow is on the flag itself */
  .flag-pennant{
    position:relative;width:100%;padding:18px 8px 28px;color:#ffffff;
    font-family:var(--font-display);font-size:clamp(22px, 2.4vw, 30px);font-weight:800;letter-spacing:-0.03em;line-height:1;text-align:center;
    font-variant-numeric:tabular-nums;white-space:nowrap;
    filter:drop-shadow(0 3px 3px rgba(22,17,56,0.28));
  }
  .flag-pennant::before{content:"";position:absolute;inset:0;background:var(--primary-red);clip-path:polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);}
  .flag-pennant span{position:relative;}
  .flag-label{margin-top:14px;padding:0 12px;color:var(--primary-blue);font-size:14px;font-weight:700;text-align:center;line-height:1.4;}

  /* ---------- Section label + big title (landing-style section heading) ---------- */
  .section-label{color:var(--primary-red);font-size:12px;font-weight:850;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:15px;}
  .section-title{margin:0;color:var(--primary-blue);font-size:clamp(36px, 4vw, 54px);line-height:1.08;letter-spacing:-0.04em;font-weight:800;}

  /* ---------- Who we are: label/title left, large copy right ---------- */
  /* ---------- Trusted impact (.trust-*): client-logo board + headline, counters underneath ---------- */
  .trust{padding:105px 0 95px;}
  .trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
  .trust-board{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto;border-radius:24px;box-shadow:var(--shadow);}
  .trust-copy{position:relative;}
  /* The gear shares the "Trusted Impact" label's line: it flies in from the right, across the
     label (it sits above it, z-index:2), and rests just to the left of the text. */
  .trust-gear{position:absolute;left:-72px;top:-21px;width:60px;height:60px;z-index:2;}
  .trust-gear > div,.trust-gear > div > div{width:100%;height:100%;}
  /* Fly-in: starts 300px to the right, beyond the end of the label text (css/parallax.css .parallax). */
  .parallax.trust-gear-fly{--parallax-x:300px;--parallax-duration:1500ms;}
  .trust-gear img{display:block;width:100%;height:100%;animation:trust-spin 24s linear infinite;}
  @keyframes trust-spin{to{transform:rotate(360deg);}}
  .trust-copy .section-title{font-size:clamp(32px, 3.6vw, 46px);}
  .trust-text{margin:0;max-width:520px;color:var(--muted);font-size:16.5px;line-height:1.85;}
  .trust-cta{margin-top:32px;}
  @media (prefers-reduced-motion: reduce){ .trust-gear img{animation:none;} }

  /* ---------- Industries served: dark band (same look as .promise) with a text list of industries ---------- */
  .served{position:relative;overflow:hidden;padding:95px 0;background:var(--primary-blue);color:#ffffff;}
  .served::before,
  .served::after{content:"";position:absolute;border:1px solid rgba(255,255,255,0.07);border-radius:50%;pointer-events:none;}
  .served::before{width:620px;height:620px;left:-300px;bottom:-340px;}
  .served::after{width:420px;height:420px;left:-190px;bottom:-230px;}
  .served .container{position:relative;z-index:1;}
  .served-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:90px;align-items:start;}
  .served .section-label{color:#ff7377;}
  .served .section-title{color:#ffffff;}
  .served-text{margin:0;max-width:470px;color:rgba(255,255,255,0.72);font-size:17px;line-height:1.8;}
  .served-cta{margin-top:34px;}
  .served-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;border-top:1px solid rgba(255,255,255,0.14);}
  .served-item{display:grid;grid-template-columns:26px 1fr;column-gap:8px;padding:14px 0 15px;border-bottom:1px solid rgba(255,255,255,0.14);}
  .served-item b{padding-top:2px;color:#ff7377;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.08em;}
  .served-item h3{margin:0 0 3px;color:#ffffff;font-size:16.5px;line-height:1.25;letter-spacing:-0.02em;}
  .served-item p{margin:0;color:rgba(255,255,255,0.66);font-size:13px;line-height:1.55;}
  .served-more{margin:18px 0 0;color:rgba(255,255,255,0.6);font-size:14px;}
  @media (max-width:560px){ .served-list{grid-template-columns:1fr;} }
  .served-more a{color:#ffffff;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
  .served-more a:hover{color:#ff7377;}

  /* ---------- Three pillars: dark link cards with a watermark glyph ---------- */
  .pillars{padding:115px 0;}
  .pillars-header{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px;}
  .pillars-intro{max-width:430px;margin:0;color:var(--muted);font-size:16px;line-height:1.75;}
  .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .pillar{
    position:relative;display:block;min-height:350px;padding:35px;border-radius:22px;overflow:hidden;
    color:#ffffff;background:var(--primary-blue);box-shadow:var(--shadow-lg);text-decoration:none;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .pillar:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(11,37,69,0.22);}
  .pillar:nth-child(2){background:var(--secondary-blue);}
  .pillar:nth-child(3){background:#242044;}
  .pillar-number{color:rgba(255,255,255,0.45);font-size:11px;font-weight:800;letter-spacing:0.15em;margin-bottom:70px;}
  .pillar h3{margin:0 0 7px;color:#ffffff;font-size:30px;line-height:1.1;letter-spacing:-0.03em;}
  .pillar-subtitle{margin-bottom:22px;color:#ff8588;font-size:11px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;}
  .pillar p{max-width:330px;margin:0;color:rgba(255,255,255,0.72);font-size:15px;line-height:1.7;}
  .pillar-icon{position:absolute;right:25px;bottom:20px;color:rgba(255,255,255,0.08);font-size:110px;font-weight:900;line-height:1;}

  /* ---------- Why BRIGS: intro left, numbered reasons right ---------- */
  .why{padding:115px 0;background:var(--bg-alt);}
  .why-grid{display:grid;grid-template-columns:0.78fr 1.22fr;gap:95px;}
  .why-intro p{max-width:370px;margin:25px 0 0;color:var(--muted);font-size:16px;line-height:1.75;}
  .reasons{border-top:1px solid var(--border);}
  .reason{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:29px 0;border-bottom:1px solid var(--border);}
  .reason-number{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:#ffffff;color:var(--primary-red);font-size:12px;font-weight:850;box-shadow:var(--shadow-sm);}
  .reason h3{margin:0 0 7px;color:var(--primary-blue);font-size:20px;line-height:1.3;}
  .reason p{margin:0;color:var(--muted);font-size:15px;line-height:1.7;}
  .why-hurray{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:64px 0 0;color:var(--muted);font-size:17px;line-height:1.6;text-align:center;}
  .why-hurray-badge{display:inline-block;padding:0 16px;border-radius:30px;background:var(--primary-red);color:#ffffff;font-size:12px;font-weight:700;line-height:32px;letter-spacing:0.04em;text-transform:uppercase;}
  .why-hurray a{color:var(--primary-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
  .why-hurray a:hover{color:var(--primary-red);}

  /* ---------- Film banner: photo with a title and a play button that opens the video lightbox ---------- */
  .film{padding:0 0 105px;background:var(--bg);}
  .film-box{position:relative;height:450px;border-radius:24px;overflow:hidden;background:var(--primary-blue);box-shadow:var(--shadow-lg);}
  .film-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .film-shade{position:absolute;inset:0;background:linear-gradient(90deg, rgba(22,17,56,0.82) 0%, rgba(22,17,56,0.55) 55%, rgba(227,50,55,0.28) 100%);}
  .film-content{position:relative;z-index:2;height:100%;display:flex;align-items:center;gap:40px;padding:0 clamp(26px, 6vw, 80px) 36px;}
  .film-title{margin:0;max-width:600px;color:#ffffff;font-size:clamp(30px, 4.2vw, 54px);line-height:1.1;letter-spacing:-0.035em;font-weight:400;}
  .film-title b{font-weight:800;}
  .film-rotator{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:0.09em;margin-bottom:-0.09em;}
  .film-rotator .rot-word{grid-area:1 / 1;font-weight:800;opacity:0;transform:translateY(70%);transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);}
  .film-rotator .rot-word.is-active{opacity:1;transform:none;}
  .film-rotator .rot-word.is-out{opacity:0;transform:translateY(-70%);}
  .film-note{position:absolute;left:0;right:0;bottom:22px;z-index:2;margin:0;padding:0 20px;color:#ffffff;font-size:11.5px;font-weight:800;line-height:1.5;letter-spacing:0.08em;text-transform:uppercase;text-align:center;}
  .film-note a{color:#ffffff;text-decoration:underline;text-underline-offset:3px;}
  .film-note a:hover{color:#ff7377;}
  .film-play{position:relative;flex:none;width:84px;height:84px;padding:0;border:2px solid #ffffff;border-radius:50%;background:transparent;color:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease,transform .25s ease;}
  .film-play svg{width:30px;height:30px;margin-left:4px;fill:currentColor;}
  .film-play::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,0.7);animation:film-pulse 2.4s ease-out infinite;pointer-events:none;}
  @keyframes film-pulse{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.55);opacity:0;}}
  .film-play:hover,.film-play:focus-visible{background:#ffffff;color:var(--primary-blue);transform:scale(1.06);}
  @media (prefers-reduced-motion: reduce){ .film-play::after{animation:none;opacity:0;} }

  /* ---------- Video lightbox (js/site.js initVideoModal) ---------- */
  .vmodal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:56px 24px 24px;background:rgba(10,8,30,0.86);}
  .vmodal[hidden]{display:none;}
  .vmodal-box{position:relative;width:min(1000px, 100%);}
  .vmodal-frame{aspect-ratio:16 / 9;overflow:hidden;border-radius:14px;background:#000000;box-shadow:0 30px 70px rgba(0,0,0,0.5);}
  .vmodal-frame iframe{display:block;width:100%;height:100%;border:0;}
  .vmodal-close{position:absolute;right:0;top:-46px;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,0.4);border-radius:50%;background:transparent;color:#ffffff;font-size:26px;line-height:1;cursor:pointer;}
  .vmodal-close:hover,.vmodal-close:focus-visible{background:#ffffff;color:var(--primary-blue);}
  body.has-vmodal{overflow:hidden;}

  /* ---------- Testimonial slider (driven by js/site.js) ---------- */
  .testimonials{padding:115px 0;background:var(--bg);}
  .testimonials-heading{max-width:820px;margin:0 auto 60px;text-align:center;}
  .testimonials-poster{display:block;width:100%;max-width:400px;height:auto;margin:18px auto 22px;}
  .testimonials-heading .section-title{font-size:clamp(30px, 3.6vw, 46px);}
  .testimonial-slider{position:relative;max-width:820px;margin:0 auto;}
  .testimonial-track{position:relative;display:grid;}  /* every slide shares one cell, so the track is as tall as the longest quote and the controls never jump */
  .testimonial-slide{
    grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;text-align:center;
    opacity:0;transform:translateY(16px);transition:opacity 0.6s ease, transform 0.6s ease;pointer-events:none;
  }
  .testimonial-slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto;}
  .testimonial-quote-mark{color:var(--primary-red);font-size:60px;line-height:1;font-weight:900;margin-bottom:10px;}
  .testimonial-quote{max-width:680px;margin:0 0 32px;color:var(--primary-blue);font-size:21px;line-height:1.65;font-weight:600;letter-spacing:-0.01em;}
  .testimonial-photo{width:68px;height:68px;border-radius:50%;object-fit:cover;margin-bottom:16px;box-shadow:var(--shadow-sm);}
  /* the photo sits over a circle with the person's initials, so a missing picture still looks intentional */
  .testimonial-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:68px;height:68px;margin-bottom:16px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden;color:var(--primary-blue);font-size:20px;font-weight:800;letter-spacing:.02em;}
  .testimonial-avatar::before{content:attr(data-initials);}
  .testimonial-avatar .testimonial-photo{position:absolute;inset:0;width:100%;height:100%;margin:0;box-shadow:none;}
  .testimonial-name{color:var(--primary-blue);font-size:15px;font-weight:800;}
  .testimonial-role{margin-top:4px;color:var(--muted);font-size:13px;font-weight:600;}
  .testimonial-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:45px;}
  .testimonial-arrow{
    display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--border);background:var(--bg);color:var(--primary-blue);font-size:18px;cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .testimonial-arrow:hover{background:var(--primary-red);border-color:var(--primary-red);color:#ffffff;}
  .testimonial-dots{display:flex;align-items:center;gap:10px;}
  .testimonial-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:var(--border);cursor:pointer;transition:background 0.2s ease, transform 0.2s ease;}
  .testimonial-dot.is-active{background:var(--primary-red);transform:scale(1.3);}

  /* ---------- Promise: dark statement band with ring decoration ---------- */
  .promise{position:relative;overflow:hidden;padding:125px 0;background:var(--primary-blue);color:#ffffff;}
  .promise::before,
  .promise::after{content:"";position:absolute;border:1px solid rgba(255,255,255,0.07);border-radius:50%;}
  .promise::before{width:650px;height:650px;right:-300px;top:-330px;}
  .promise::after{width:430px;height:430px;right:-190px;top:-220px;}
  .promise-content{position:relative;z-index:2;max-width:930px;}
  .promise .section-label{color:#ff7377;}
  .promise h2{margin:0 0 32px;color:#ffffff;font-size:clamp(38px, 5vw, 63px);line-height:1.08;letter-spacing:-0.045em;font-weight:800;}
  .promise p{max-width:850px;margin:0;color:rgba(255,255,255,0.72);font-size:20px;line-height:1.75;}
  .promise-accent{display:block;width:60px;height:4px;margin-top:42px;background:var(--primary-red);}

  /* ---------- Footer brand block: logo + tagline ---------- */
  .footer-brand{display:flex;align-items:center;gap:16px;}
  .footer-logo{display:block;height:34px;width:auto;}
  .footer-text{font-size:13px;color:var(--band-muted);}

  /* ---------- Landing components — responsive ---------- */
  @media (max-width:900px){
    .trust-grid,.why-grid{grid-template-columns:1fr;gap:48px;}
    .served-grid{grid-template-columns:1fr;gap:44px;}
    .trust-gear{left:0;top:-13px;width:44px;height:44px;}
    .trust-copy .section-label{padding-left:58px;}
    .parallax.trust-gear-fly{--parallax-x:260px;}
    .flags{gap:30px 36px;}
    .flag{flex-basis:min(204px, calc((100% - 72px) / 3));}
    .pillar-grid{grid-template-columns:1fr;}
    .pillar{min-height:290px;}
    .pillars-header{display:block;}
    .pillars-intro{margin-top:25px;}
  }
  @media (max-width:600px){
    .trust,.pillars,.why,.promise,.served{padding:75px 0;}
    .film{padding-bottom:75px;}
    .film-box{height:380px;}
    .film-content{flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;}
    .proven{padding:46px 0 52px;}
    .proven-heading{margin-bottom:36px;}
    .flags{gap:24px 22px;}
    .flag{flex-basis:calc((100% - 22px) / 2);padding:0 0 18px;}
    .flag-pennant{font-size:22px;padding:12px 6px 20px;}
    .flag-label{font-size:12.5px;}
    .pillar{padding:30px;}
    .pillar-number{margin-bottom:50px;}
    .testimonial-quote{font-size:18px;}
  }

  /* ==========================================================================
     PRODUCT-PAGE COMPONENTS (learning.html, assets-audits.html, …)
     ========================================================================== */

  /* ---- Connected chain: pill steps joined by arrows, in a soft panel.
     Markup: .chain > .chain-step (+ .chain-arrow between) + .chain-caption.
     The last step is the outcome, so it's filled navy. ---- */
  .chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 6px;margin-top:40px;padding:26px 24px;border-radius:18px;background:var(--bg-alt);border:1px solid var(--border);}
  .chain-step{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;background:var(--card);border:1px solid var(--border);font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:0 4px 10px -6px rgba(22,17,56,0.18);}
  .chain-step .msym{font-size:19px;color:var(--accent);}
  .chain-step:last-of-type{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff;}
  .chain-step:last-of-type .msym{color:#ff7377;}
  .chain-arrow{color:var(--accent);font-size:20px;}
  .chain-caption{width:100%;text-align:center;margin-top:6px;font-size:14px;color:var(--ink-soft);}
  .chain-caption b{color:var(--ink);}

  /* ---- Split: text column + media column (stacks under 900px) ---- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
  @media (max-width:900px){ .split{grid-template-columns:1fr;} }
  .split .section-head{margin-bottom:22px;}
  .split > .section-head{margin-bottom:0;}
  .split .split-note{margin-top:18px;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);}
  .split-media img{display:block;width:100%;height:auto;border-radius:20px;}
  .split-media.is-photo img{box-shadow:var(--shadow);}
  /* Transparent device cut-outs (tablet, laptop, phones): the shadow follows the device shape */
  .cutout-media img{display:block;width:100%;max-width:540px;height:auto;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(22,17,56,0.28));}

  /* ---- Feature list: icon + title + line, hairline between rows ---- */
  .feature-list{display:grid;}
  .feature-row{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:13px 0;border-bottom:1px solid var(--border);}
  .feature-row:last-child{border-bottom:0;}
  .feature-row .icon-badge{grid-row:1 / span 2;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--m-color, var(--accent)) 14%, transparent);color:var(--m-color, var(--accent));}
  .feature-row .icon-badge .msym{font-size:21px;}
  .feature-row h4{font-size:15.5px;margin-top:1px;}
  .feature-row p{font-size:13.5px;line-height:1.5;}

  /* ---- Prompt bubbles (example AI requests, on the dark AI band) ---- */
  .prompt-list{display:flex;flex-wrap:wrap;gap:10px;margin:-8px 0 36px;}
  .prompt{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,0.07);border:1px solid var(--band-border);color:var(--band-ink);font-size:14px;font-weight:600;}
  .prompt .msym{font-size:17px;color:#ff7377;}

  /* ---- Connected flow: numbered steps on one line. Any number of steps —
     set --n on the list to the step count so the line starts/ends at the
     first/last node. Horizontal on wide screens; below 1100px the line turns
     vertical with text beside each node. --flow-ring = section background. ---- */
  .flow{--n:5;list-style:none;margin:0;padding:0;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;}
  .flow::before{
    content:"";position:absolute;top:27px;left:calc(100% / (var(--n) * 2));right:calc(100% / (var(--n) * 2));height:2px;
    background:linear-gradient(90deg, var(--secondary-orange), var(--primary-red) 50%, var(--secondary-blue));
  }
  .flow-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;}
  .flow-node{
    position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--card);border:2px solid var(--accent);color:var(--accent);
    box-shadow:0 0 0 6px var(--flow-ring, var(--bg-alt)), 0 10px 22px -12px rgba(227,50,55,0.6);
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .flow-node .msym{font-size:24px;}
  .flow-step:hover .flow-node{background:var(--accent);color:#fff;transform:translateY(-3px);}
  .flow-num{margin-top:14px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent);}
  .flow-step h4{margin-top:4px;font-size:15.5px;}
  .flow-step p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink-soft);}
  .band .flow-step p{color:var(--band-muted);}
  @media (max-width:1100px){
    .flow{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:0;max-width:560px;}
    .flow::before{top:28px;bottom:28px;left:27px;right:auto;width:2px;height:auto;background:linear-gradient(180deg, var(--secondary-orange), var(--primary-red) 50%, var(--secondary-blue));}
    .flow-step{display:grid;grid-template-columns:56px 1fr;column-gap:18px;align-items:start;text-align:left;padding-bottom:22px;}
    .flow-step:last-child{padding-bottom:0;}
    .flow-node{grid-row:1 / span 3;}
    .flow-num{margin-top:4px;}
    .flow-step h4{margin-top:2px;}
    .flow-step p{margin-top:4px;}
  }
  @media (prefers-reduced-motion: reduce){ .flow-node{transition:none;} .flow-step:hover .flow-node{transform:none;} }

  /* ---------- TOAST (js/site.js showToast) ---------- */
  .site-toast{position:fixed;left:50%;bottom:28px;z-index:1000;max-width:min(480px,calc(100% - 32px));padding:13px 20px;border-radius:12px;background:var(--primary-blue);color:#fff;font-size:14px;font-weight:600;line-height:1.4;text-align:center;box-shadow:var(--shadow-lg);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;}
  .site-toast.is-visible{opacity:1;transform:translate(-50%,0);}
  @media (prefers-reduced-motion: reduce){ .site-toast{transition:none;} }

  /* ---------- Feed-driven pages: Downloads / Gallery albums, search, states (js/site.js) ---------- */
  .dl-area{padding:48px 0 96px;}

  /* search + status row */
  .dl-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px;}
  .dl-search{position:relative;flex:1 1 280px;max-width:420px;}
  .dl-search .msym{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted);pointer-events:none;}
  .dl-search input{width:100%;padding:12px 14px 12px 44px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--primary-blue);font:inherit;font-size:14px;}
  .dl-search input:focus{outline:2px solid var(--primary-red);outline-offset:1px;border-color:transparent;}
  .dl-count{font-size:13px;font-weight:600;color:var(--muted);}

  /* album grid */
  .dl-albums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
  .dl-album{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
  .dl-album:hover,.dl-album:focus-visible{transform:translateY(-3px);border-color:var(--primary-red);box-shadow:0 18px 34px -20px rgba(11,37,69,0.45);outline:none;}
  .dl-cover{position:relative;aspect-ratio:16 / 9;background:linear-gradient(135deg,var(--primary-blue),#3a3270);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.9);}
  .dl-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .dl-cover .msym{font-size:54px;}
  .dl-album-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1;}
  .dl-album-body h2{font-size:19px;line-height:1.3;color:var(--primary-blue);}
  .dl-album:hover h2,.dl-album:focus-visible h2{color:var(--primary-red);}
  .dl-album-body p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
  .dl-album-meta{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);}

  /* album view */
  .dl-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--primary-blue);font-size:14px;font-weight:700;text-decoration:none;}
  .dl-back:hover{color:var(--primary-red);}
  .dl-head{margin-bottom:26px;padding:24px 26px;border:1px solid var(--border);border-left:3px solid var(--primary-red);border-radius:14px;background:var(--bg-alt);}
  .dl-head h2{font-size:26px;line-height:1.25;}
  .dl-head p{margin-top:8px;max-width:78ch;font-size:14.5px;line-height:1.7;color:var(--ink-soft);}

  .dl-files{border-top:1px solid var(--border);}
  .dl-file{display:flex;align-items:center;gap:18px;padding:18px 4px;border-bottom:1px solid var(--border);}
  .dl-type{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--type-color,var(--primary-red)) 13%,transparent);color:var(--type-color,var(--primary-red));}
  .dl-type .msym{font-size:25px;}
  .dl-file-main{flex:1;min-width:0;}
  .dl-file-main h3{font-size:16px;line-height:1.35;color:var(--primary-blue);}
  .dl-file-main p{margin-top:4px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
  .dl-file-meta{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);}
  .dl-file .btn{flex:none;}

  /* states */
  .dl-state{padding:56px 28px;border:1px dashed var(--border);border-radius:16px;background:var(--bg-alt);text-align:center;}
  .dl-state .msym{font-size:42px;color:var(--primary-red);}
  .dl-state h2{margin-top:10px;font-size:22px;}
  .dl-state p{margin:8px auto 0;max-width:52ch;font-size:14.5px;line-height:1.7;color:var(--ink-soft);}
  .dl-state .btn{margin-top:22px;}
  .dl-state .btn .msym{font-size:20px;color:inherit;}  /* the icon inside the button, not the big one above the heading */

  @media (max-width:980px){.dl-albums{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width:640px){
      .dl-albums{grid-template-columns:1fr;}
      .dl-file{flex-wrap:wrap;gap:14px;}
      .dl-file-main{flex-basis:calc(100% - 70px);}
      .dl-file .btn{margin-left:64px;}
      .dl-head{padding:20px 18px;}
  }

  /* ---------- Careers (js/site.js initCareers) ---------- */
  .cr-intro{max-width:78ch;margin-bottom:14px;font-size:16px;line-height:1.75;color:var(--ink-soft);}
  .cr-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 26px;}
  .cr-filters .dl-search{flex:1 1 240px;max-width:360px;}
  .cr-filters select{padding:11px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--primary-blue);font:inherit;font-size:14px;}
  .cr-filters .dl-count{margin-left:auto;}
  .cr-list{display:flex;flex-direction:column;gap:16px;}
  .cr-job{border:1px solid var(--border);border-radius:16px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;scroll-margin-top:90px;}
  .cr-job:hover,.cr-job.is-open{border-color:var(--primary-red);box-shadow:0 18px 34px -24px rgba(11,37,69,0.45);}
  .cr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;width:100%;padding:22px 24px;border:0;background:transparent;text-align:left;cursor:pointer;color:inherit;font:inherit;}
  .cr-head:focus-visible{outline:2px solid var(--primary-red);outline-offset:-2px;border-radius:16px;}
  .cr-head > .msym{flex:none;margin-top:2px;font-size:28px;color:var(--primary-red);transition:transform .2s ease;}
  .cr-job.is-open .cr-head > .msym{transform:rotate(180deg);}
  .cr-head-main h2{font-size:20px;line-height:1.3;color:var(--primary-blue);}
  .cr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .cr-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;background:var(--bg-alt);font-size:12.5px;font-weight:600;color:var(--ink-soft);}
  .cr-chip .msym{font-size:15px;color:var(--primary-red);}
  .cr-summary{margin-top:10px;font-size:14px;line-height:1.65;color:var(--ink-soft);}
  .cr-panel{padding:0 24px 24px;}
  .cr-panel[hidden]{display:none;}
  .cr-panel p{font-size:14.5px;line-height:1.75;color:var(--ink-soft);}
  .cr-panel p + p{margin-top:10px;}
  .cr-block{margin-top:18px;}
  .cr-block h4{font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:var(--primary-blue);margin-bottom:8px;}
  .cr-block ul{margin:0;padding-left:20px;display:grid;gap:6px;}
  .cr-block li{font-size:14.5px;line-height:1.65;color:var(--ink-soft);}
  .cr-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;}
  .cr-posted{font-size:12.5px;font-weight:600;color:var(--muted);}

  /* ---------- Gallery (js/site.js initGallery) ---------- */
  .gl-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
  .gl-photo{position:relative;display:block;padding:0;border:0;border-radius:14px;overflow:hidden;background:#e5e7eb;cursor:zoom-in;aspect-ratio:4 / 3;}
  .gl-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
  .gl-photo:hover img,.gl-photo:focus-visible img{transform:scale(1.05);}
  .gl-photo:focus-visible{outline:3px solid var(--primary-red);outline-offset:2px;}
  /* a video tile: its still picture with a play button over it */
  .gl-video.gl-noimg{background:linear-gradient(135deg,#1b1744,#3a1230);}
  .gl-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(227,50,55,0.92);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,0.4);transition:transform .2s ease;}
  .gl-play .msym{font-size:34px;}
  .gl-video:hover .gl-play,.gl-video:focus-visible .gl-play{transform:scale(1.1);}
  .gl-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(180deg,transparent,rgba(11,12,38,0.78));color:#fff;font-size:12.5px;font-weight:600;text-align:left;line-height:1.4;}
  .gv{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(8,6,24,0.94);}
  .gv[hidden]{display:none;}
  .gv-fig{margin:0;max-width:calc(100vw - 150px);max-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 0 24px;}
  .gv-img,.gv-video{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:6px;}
  .gv-video{width:auto;min-width:min(640px,100%);background:#000;}
  .gv-img[hidden],.gv-video[hidden]{display:none;}
  .gv:fullscreen .gv-img,.gv:fullscreen .gv-video{max-height:calc(100vh - 110px);}
  .gv-cap{margin-top:14px;color:#e5e7eb;font-size:14px;text-align:center;max-width:70ch;}
  .gv-close,.gv-nav,.gv-full{position:absolute;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.08);color:#fff;border-radius:50%;cursor:pointer;line-height:1;}
  .gv-close:hover,.gv-nav:hover,.gv-full:hover,.gv-close:focus-visible,.gv-nav:focus-visible,.gv-full:focus-visible{background:#fff;color:var(--primary-blue);}
  .gv-full{top:16px;right:72px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0;}
  .gv-full .msym{font-size:24px;}
  .gv-close{top:16px;right:18px;width:42px;height:42px;font-size:28px;}
  .gv-nav{top:50%;width:48px;height:48px;margin-top:-24px;font-size:34px;padding-bottom:4px;}
  .gv-prev{left:20px;}
  .gv-next{right:20px;}
  @media (max-width:700px){
    .gv-fig{max-width:100vw;padding:56px 8px 24px;}
    .gv-nav{top:auto;bottom:18px;margin-top:0;width:44px;height:44px;}
    .gv-full{right:68px;}
    .gv-video{min-width:0;}
    .gv-prev{left:calc(50% - 56px);}
    .gv-next{right:calc(50% - 56px);}
    .cr-head{padding:18px;}
    .cr-panel{padding:0 18px 20px;}
    .cr-filters .dl-count{margin-left:0;}
  }

  /* ---------- Posts: blogs / news / case studies / articles (js/site.js initPosts) ---------- */
  .po-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;}
  .po-date{font-weight:600;color:var(--muted);}
  .po-card .dl-album-body h2{font-size:18px;}
  .po-article{max-width:820px;margin:0 auto;}
  .po-title{margin:14px 0 0;font-size:clamp(28px,4vw,42px);line-height:1.15;color:var(--primary-blue);}
  .po-lead{margin-top:14px;font-size:18px;line-height:1.65;color:var(--ink-soft);}
  .po-cover{display:block;width:100%;max-height:480px;object-fit:cover;margin-top:26px;border-radius:16px;}
  .po-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 28px;margin-top:26px;padding:22px 24px;border:1px solid var(--border);border-left:3px solid var(--primary-red);border-radius:14px;background:var(--bg-alt);}
  .po-facts b{display:block;margin-bottom:4px;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
  .po-facts span{font-size:15px;font-weight:600;color:var(--primary-blue);}
  .po-highlights{grid-column:1 / -1;}
  .po-highlights ul{margin:0;padding-left:20px;display:grid;gap:6px;}
  .po-highlights li{font-size:15px;line-height:1.6;color:var(--ink-soft);}
  .po-body{margin-top:30px;}
  .po-body p{margin:0 0 18px;font-size:16.5px;line-height:1.85;color:var(--ink-soft);}
  .po-body h2{margin:38px 0 14px;font-size:26px;line-height:1.3;color:var(--primary-blue);}
  .po-body h3{margin:30px 0 10px;font-size:20px;line-height:1.35;color:var(--primary-blue);}
  .po-body ul,.po-body ol{margin:0 0 20px;padding-left:24px;display:grid;gap:8px;}
  .po-body li{font-size:16.5px;line-height:1.7;color:var(--ink-soft);}
  .po-body a{color:var(--primary-red);text-decoration:underline;text-underline-offset:3px;}
  .po-body blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--primary-red);font-size:19px;line-height:1.7;font-style:italic;color:var(--primary-blue);}
  .po-fig{margin:30px 0;}
  .po-fig img{display:block;width:100%;border-radius:14px;}
  .po-fig figcaption{margin-top:10px;font-size:13px;text-align:center;color:var(--muted);}
  .po-cta{margin-top:56px;}
  @media (max-width:620px){.po-cta{display:block;padding:24px 21px;}.po-cta .btn{margin-top:18px;}}

  /* feed-driven pages scroll to their content (not the page top) when a post / album opens */
  #dlRoot,#galleryRoot,#postsRoot,#careersRoot{scroll-margin-top:84px;}
  .po-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
  .cr-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);}
  .cr-share-label{margin-right:4px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);}
  .cr-share-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--primary-blue);font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
  .cr-share-btn .msym{font-size:16px;}
  .cr-share-btn:hover,.cr-share-btn:focus-visible{background:var(--bg-alt);border-color:var(--primary-blue);}
  .cr-share-wa{--brand:#1fa855;} .cr-share-in{--brand:#0a66c2;} .cr-share-fb{--brand:#1877f2;}
  .cr-share-wa,.cr-share-in,.cr-share-fb{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,#fff);}
  .cr-share-wa:hover,.cr-share-in:hover,.cr-share-fb:hover,.cr-share-wa:focus-visible,.cr-share-in:focus-visible,.cr-share-fb:focus-visible{background:var(--brand);border-color:var(--brand);color:#fff;}