/* Theme B — "Field"
   The site's theme, layered on site.css (the original "shop drawing" look). Everything here is
   scoped to [data-theme="b"], which is set on <html> in every page. Navy, cool white and
   hi-vis yellow; wide uppercase display type; full-screen hero; scroll motion.
   The markup it uses that site.css alone hides: .hero-reel, .hero-mark, .hero-cue. */

/* Hidden unless theme B */
.hero-reel, .hero-mark, .hero-cue { display: none; }

[data-theme="b"] {
  --ink: #0d1520;
  --ink-2: #394350;
  --ink-3: #66707d;
  --paper: #f3f4f5;
  --paper-2: #e5e8ec;
  --white: #ffffff;
  --steel: #8e99a6;
  --rule: rgba(13, 21, 32, 0.13);
  --rule-strong: rgba(13, 21, 32, 0.45);
  --hivis: #ffc400;
  --on-dark: #c4cbd4;
}

/* ---------- Type: wide, uppercase display ---------- */
[data-theme="b"] :is(h1, h2) {
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.96;
}
[data-theme="b"] h3 { font-variation-settings: "wdth" 100; letter-spacing: -0.005em; }
[data-theme="b"] .hero h1 { font-size: clamp(38px, 5.4vw, 84px); }
[data-theme="b"] .page-head h1 { font-size: clamp(40px, 6.2vw, 96px); }
[data-theme="b"] .section-head h2 { font-size: clamp(30px, 3.6vw, 52px); }
[data-theme="b"] .cta h2 { font-size: clamp(34px, 4.6vw, 66px); }
[data-theme="b"] .svc-detail h2 { font-size: clamp(28px, 3.2vw, 46px); }
[data-theme="b"] .split-text h2 { font-size: clamp(26px, 2.8vw, 40px); }
[data-theme="b"] .statement p.big em { background: linear-gradient(transparent 60%, var(--hivis) 60%, var(--hivis) 92%, transparent 92%); }

/* ---------- Header: navy, see-through over the home hero ---------- */
[data-theme="b"] .site-header {
  background: var(--ink); color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  transition: background .3s ease, border-color .3s ease;
}
[data-theme="b"] .brand small { color: var(--steel); }
[data-theme="b"] .nav a::after { background: var(--hivis); }
[data-theme="b"] .header-phone { background: var(--hivis); color: var(--ink); }
[data-theme="b"] .header-phone:hover { background: #fff; }
[data-theme="b"] .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
[data-theme="b"] :focus-visible { outline-color: var(--hivis); }
[data-theme="b"] .subnav { background: var(--ink); border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--hivis); }
[data-theme="b"] .subnav a:hover { background: rgba(255, 255, 255, 0.07); }
@media (max-width: 900px) {
  [data-theme="b"] .nav { background: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.1); }
  [data-theme="b"] .nav a { border-bottom-color: rgba(255, 255, 255, 0.1); }
}
[data-theme="b"] body.has-hero .site-header:not(.is-scrolled):not(.nav-open) {
  background: transparent; border-bottom-color: transparent;
}

/* ---------- Home hero: full screen, centered logo, moving photos ---------- */
[data-theme="b"] .hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  background: var(--ink); color: #fff; border: 0;
  display: flex; align-items: center;
}
[data-theme="b"] .hero .wrap {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--header-h) + 48px) var(--gutter) 120px;
}
[data-theme="b"] .hero-copy { padding: 0; align-items: center; max-width: 1060px; }
[data-theme="b"] .hero-photo { display: none; }
[data-theme="b"] .hero .label { color: var(--on-dark); }
[data-theme="b"] .hero .label b { color: #fff; }
[data-theme="b"] .hero h1 { margin: 18px 0 24px; }
[data-theme="b"] .hero-lede { color: var(--on-dark); max-width: 38em; margin-left: auto; margin-right: auto; }
[data-theme="b"] .hero-actions { justify-content: center; margin-top: 20px; }
[data-theme="b"] .hero .btn { background: var(--hivis); border-color: var(--hivis); color: var(--ink); }
[data-theme="b"] .hero .btn:hover { background: #fff; border-color: #fff; }
[data-theme="b"] .hero .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
[data-theme="b"] .hero .btn--ghost:hover { background: #fff; color: var(--ink); }

[data-theme="b"] .hero-mark { display: block; width: clamp(88px, 9vw, 128px); height: auto; margin: 0 auto 26px; }

[data-theme="b"] .hero-reel { display: block; position: absolute; inset: 0; z-index: 0; }
[data-theme="b"] .hero-reel::after { content: ""; position: absolute; inset: 0; background: rgba(9, 14, 22, 0.6); }
[data-theme="b"] .hero-reel img,
[data-theme="b"] .hero-reel video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
}
[data-theme="b"] .hero-reel .is-active { opacity: 1; }
[data-theme="b"] .hero-reel img.is-active { animation: hh-kenburns 9s ease-out forwards; }
[data-theme="b"] .hero-reel video { opacity: 1; z-index: 1; }
@keyframes hh-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }

[data-theme="b"] .hero-cue {
  display: block; position: absolute; z-index: 2; left: 50%; bottom: 0;
  width: 1px; height: 84px; background: rgba(255, 255, 255, 0.25); overflow: hidden;
}
[data-theme="b"] .hero-cue::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: var(--hivis); animation: hh-cue 2.2s ease-in-out infinite;
}
@keyframes hh-cue { to { top: 100%; } }

/* Fact strip continues the hero band */
[data-theme="b"] .titleblock-row { background: var(--ink); color: #fff; border-bottom: 0; }
[data-theme="b"] .titleblock-row .titleblock > div { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="b"] .titleblock-row .label { color: var(--steel); }
[data-theme="b"] .titleblock-row strong { color: #fff; }
[data-theme="b"] .titleblock-row p.muted { color: var(--on-dark); }
@media (max-width: 760px) {
  [data-theme="b"] .titleblock-row .titleblock > div:nth-child(-n+2) { border-bottom-color: rgba(255, 255, 255, 0.14); }
}

/* ---------- Inner page headers: dark band ---------- */
[data-theme="b"] .page-head { background: var(--ink); color: #fff; border-bottom: 0; }
[data-theme="b"] .page-head .label { color: var(--steel); }
[data-theme="b"] .page-head .label b { color: #fff; }
[data-theme="b"] .page-head p { color: var(--on-dark); }

/* ---------- Dark bands and footer ---------- */
[data-theme="b"] .band-dark p { color: var(--on-dark); }
[data-theme="b"] .site-footer { color: var(--on-dark); }
[data-theme="b"] .motto::before { background: var(--hivis); }

/* Photos in full color */
[data-theme="b"] .svc-list img { filter: none; width: 150px; height: 100px; }
[data-theme="b"] .svc-list a { grid-template-columns: 72px minmax(0, 4fr) minmax(0, 6fr) 150px; }
[data-theme="b"] .svc-list a:hover { background: var(--white); }
@media (max-width: 860px) { [data-theme="b"] .svc-list a { grid-template-columns: 44px 1fr; } }
[data-theme="b"] .person-photo img { filter: none; }

/* Team filter + chips */
[data-theme="b"] .team-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
[data-theme="b"] .team-filter button:hover { border-color: var(--hivis); }

/* ---------- Reveal on scroll (classes added by site.js) ---------- */
[data-theme="b"] .rv {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
[data-theme="b"] .rv.in { opacity: 1; transform: none; }
[data-theme="b"] .rv :is(.img, .split-media) img,
[data-theme="b"] .rv.split-media img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
[data-theme="b"] .rv.in :is(.img, .split-media) img,
[data-theme="b"] .rv.in.split-media img { transform: none; }

/* Parallax photo bands need room to move */
[data-theme="b"] .wide-photo img { height: 124%; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="b"] .rv { opacity: 1; transform: none; transition: none; }
  [data-theme="b"] .rv img { transform: none !important; }
  [data-theme="b"] .hero-reel img.is-active { animation: none; }
  [data-theme="b"] .hero-cue::after { animation: none; }
  [data-theme="b"] .wide-photo img { height: 100%; }
}