/* Black Zero site styles. Colors, fonts and sizes come from CSS variables set in views/page.ejs (Admin → Fonts & Colors). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--base-size); line-height: 1.8; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s, opacity .25s, background-color .25s, border-color .25s; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  text-transform: var(--heading-transform); letter-spacing: var(--heading-spacing);
  color: var(--text); line-height: 1.2; margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h1.text-h1 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); } /* text block heading used as the page H1: same size as h2 */
h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
h4 { font-size: 1.15rem; }
.section-head h2, .page-header h1, .hero h1, .banner h2 {
  font-family: var(--tf, var(--font-heading)); text-transform: var(--tt, var(--heading-transform));
  letter-spacing: var(--tls, var(--heading-spacing));
}
.section-head h2 { font-size: var(--ts, clamp(1.75rem, 3.4vw, 2.75rem)); }
.page-header h1, .hero h1 { font-size: var(--ts, clamp(2.4rem, 5.5vw, 4rem)); }
.banner h2 { font-size: var(--ts, clamp(1.75rem, 3.4vw, 2.75rem)); }
.card-body h3, .panel-body h3, .job h3, .sa-box-title, .stat-value {
  font-family: var(--if, var(--font-heading));
}
.rich, .lead { font-size: var(--xs, inherit); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
::selection { background: var(--accent); color: var(--accent-text); }
/* scroll bar: public/css/scrollbar.css + public/js/scrollbar.js (shared with the admin) */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 900px; }
.eyebrow {
  font-size: .85rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 1rem; display: inline-block;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 760px; }
.rich { color: var(--muted); }
.rich h2, .rich h3, .rich h4 { margin-top: 1.4em; }
.rich > :first-child { margin-top: 0; }
.rich a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rich strong, .rich b { color: var(--text); }
.rich ul, .rich ol { padding-left: 1.3em; }
.rich li { margin-bottom: .4em; }
.align-center, .text-center { text-align: center; }
.align-center .lead, .text-center .lead { margin-inline: auto; }
.align-right, .text-right { text-align: right; }

/* Buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.align-center .buttons, .text-center .buttons { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 28px; border: 1px solid var(--accent); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: transparent; color: var(--accent); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--bg); }
.btn-link { border: 0; padding: 0; min-height: 0; color: var(--text); }
.btn-link::after { content: "→"; transition: transform .25s; }
.btn-link:hover::after { transform: translateX(4px); }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-height);
  transition: transform .4s cubic-bezier(.25,.1,.25,1);
}
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s ease;
  background: color-mix(in srgb, var(--header-bg) 60%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header.scrolled::after, body.no-hero .site-header::after { opacity: 1; }
/* like the theme (.main-header__layout::before): a 40% band of the header colour is always behind the logo and
   menu, so white text stays readable over light photos */
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header-height) + 13px); z-index: -1; background: var(--header-bg, #000); opacity: .4; pointer-events: none; }
body.nav-open .site-header::before { opacity: 0; }
/* one background at a time: when the solid (blurred) header shows after scrolling, the band hides and the
   solid layer takes the band's exact height, so two layers never stack up */
.site-header::before { transition: opacity .25s ease; }
.site-header.scrolled::before, body.no-hero .site-header::before { opacity: 0; }
.site-header::after { inset: 0 0 auto 0; height: calc(var(--header-height) + 13px); }
.site-header.is-hidden { transform: translateY(calc(-100% - 14px)); } /* includes the 13px band below the header */
body.nav-open .site-header { transform: none; }
body.no-hero main { padding-top: var(--header-height); }
.header-inner {
  height: 100%; max-width: var(--header-width); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* the original theme's logo sits ~11px further left than the menu's right edge padding (measured) */
@media (min-width: 1025px) { .logo { margin-left: -11px; } }
.logo img { width: auto; max-width: 260px; object-fit: contain; }
.logo-text { font-weight: 800; font-size: 1.25rem; letter-spacing: .08em; }
.logo-placeholder {
  display: inline-block; border: 1px dashed var(--border-strong); border-radius: 50%;
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-alt) 6px, var(--surface-alt) 12px);
}
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.site-nav li { position: relative; }
/* Menu links: 20px, and on hover a grey copy of the word rolls up into place */
.site-nav > ul > li > a {
  display: flex; align-items: center; position: relative; overflow: hidden;
  padding: 0 calc(16px + 2pt); font-size: var(--nav-size); font-weight: 400; line-height: 1.8; color: var(--text);
}
/* like the theme: no outer padding on the first / last menu item, so the menu lines up with the page edge */
.site-nav > ul > li:first-child > a { padding-left: 0; }
.site-nav > ul > li:last-child > a { padding-right: 0; }
.site-nav > ul > li > a .nav-label { display: block; transition: transform .6s cubic-bezier(.405,0,.025,1); }
.site-nav > ul > li > a .nav-label::after {
  content: attr(data-text); position: absolute; left: 0; top: 100%; color: var(--primary);
  transform: skewY(20deg); transform-origin: 0 0; transition: transform .6s cubic-bezier(.405,0,.025,1);
}
.site-nav > ul > li > a .nav-label { position: relative; }
.site-nav > ul > li > a:hover .nav-label, .site-nav > ul > li > a:focus-visible .nav-label { transform: translateY(-100%); }
.site-nav > ul > li > a:hover .nav-label::after { transform: none; }
.site-nav > ul > li.active > a { color: var(--primary); }
.sub-menu {
  list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: calc(50% - 100px); width: 220px;
  background: var(--dropdown-bg); border-radius: 8px; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .3s, transform .3s, visibility .3s;
}
.sub-menu::after {
  content: ""; position: absolute; z-index: -1; top: -5px; left: calc(50% - 14px); width: 14px; height: 14px;
  background: var(--dropdown-bg); border-radius: 3px; transform: rotate(45deg);
}
.has-children:hover > .sub-menu, .has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu li { width: 100%; }
.sub-menu a {
  display: block; margin: 0 8px; padding: 8px 11px; border-radius: 5px;
  font-size: 15px; line-height: 1.4; color: var(--dropdown-text); transition: color .15s;
}
.sub-menu li:first-child > a { margin-top: 8px; }
.sub-menu li:last-child > a { margin-bottom: 8px; }
.sub-menu a:hover, .sub-menu .active > a { color: var(--primary); }
.sub-toggle { display: none; }
.header-cta { min-height: 40px; padding: 9px 20px; }
.nav-toggle {
  display: none; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
  color: var(--text); font: 500 16px var(--font-body); padding: 8px 0;
}
.nav-toggle-icon { position: relative; width: 22px; height: 2px; background: currentColor; transition: background .2s; }
.nav-toggle-icon::before, .nav-toggle-icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .25s;
}
.nav-toggle-icon::before { top: -7px; } .nav-toggle-icon::after { top: 7px; }
.nav-open .nav-toggle-icon { background: transparent; }
.nav-open .nav-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero, .page-header, .banner { position: relative; overflow: hidden; isolation: isolate; }
.hero { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-height) + 40px) 0 120px; }
.hero-large { min-height: 80vh; } .hero-medium { min-height: 60vh; }
.hero.align-left .hero-content { text-align: left; }
.hero.align-center .hero-content { text-align: center; }
.hero.align-center .lead { margin-inline: auto; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { font-size: 1.25rem; color: var(--text); opacity: .85; }
.hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.hero-placeholder {
  display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; gap: 8px; padding: 0 32px 32px 0;
  background: radial-gradient(ellipse at 65% 40%, #1c1c1c 0%, #000 65%); color: #3a3a3a;
  font-size: .75rem; letter-spacing: .25em; text-transform: uppercase;
}
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: #000; pointer-events: none; }
.hero-content { position: relative; }
/* Scroll "mouse" (the site's Additional CSS): centred with left 50% / margin-left -15px, 40px from the bottom.
   z-index 100 stays inside the hero's own stacking context, so the fixed header still covers it. */
.hero-mouse {
  position: absolute; bottom: 40px; left: 50%; margin-left: -15px; z-index: 100; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.hero-mouse > span:not(.mouse-icon) { display: block; margin-left: -14px; padding-top: 15px; }
.mouse-icon { position: relative; display: block; box-sizing: content-box; width: 25px; height: 45px; border: 2px solid #dedede; border-radius: 15px; text-align: center; }
.mouse-icon span { display: block; width: 3px; height: 8px; margin: 2px auto 0; background: #dedede; border-radius: 5px; animation: wheel-up-down 1.2s ease infinite; }
@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }
/* Home slider: the mouse is in a 0-height HTML widget right after the slider (20px container gap below it; the
   widget's -100px margin is on its inner wrapper, so the widget box itself stays put). bottom 40px - 20px gap = 20px. */
.hero-slider .hero-mouse { bottom: 20px; }

.page-header { display: flex; align-items: flex-end; min-height: 60vh; padding: calc(var(--header-height) + 80px) 0 90px; }
.page-header.ph-small { min-height: 0; padding-bottom: 60px; }
.page-header.align-center { align-items: center; text-align: center; }
.page-header.align-center .lead { margin-inline: auto; }
.page-header .lead { color: var(--text); opacity: .85; }

/* Sections */
.section { padding: var(--section-space) 0; }
.bg-surface { background: var(--surface); }
.bg-alt { background: var(--surface-alt); }
.bg-light { background: #fff; color: #000; --text: #000; --muted: #444; --border: #e5e5e5; --surface: #f7f7f7; --surface-alt: #eee; }
.section-bg-image { position: relative; isolation: isolate; overflow: hidden; }
.section-head { margin-bottom: 56px; }
.section-head.align-center { max-width: 860px; margin-inline: auto; }
.section-head h2:last-child, .section-head .lead:last-child { margin-bottom: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.img-right .split-media { order: 2; }
.split-img, .split-media .img-placeholder { width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; border-radius: var(--img-radius); }
.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, var(--surface-alt) 12px, var(--surface-alt) 24px);
  border: 1px dashed var(--border-strong); color: var(--muted); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  width: 100%; height: 100%; min-height: 160px;
}

.grid { display: grid; gap: 30px; }
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Cards: "boxed" (image on top) and "overlay" (text on top of the picture) */
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--img-radius); overflow: hidden; transition: border-color .3s, transform .3s; }
.card:hover { border-color: var(--border-strong); }
.card-media { aspect-ratio: 16 / 11; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-media img { transform: scale(1.06); }
.card-media .img-placeholder { min-height: 0; border: 0; }
.card-body { padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .5em; }
.card-body p, .card-body .rich { color: var(--muted); }
.card-body .buttons { margin-top: auto; padding-top: 16px; }
.cards-overlay .card { position: relative; border: 0; min-height: 420px; justify-content: flex-end; background: #000; }
.cards-overlay .card-media { position: absolute; inset: 0; aspect-ratio: auto; }
.cards-overlay .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%); }
.cards-overlay .card-body { position: relative; flex: 0; padding: 30px; }
.cards-overlay .card-body h3 { color: #fff; }
.cards-overlay .card-body p { color: #ddd; }
.cards-plain .card { background: transparent; border: 0; }
.cards-plain .card-body { padding: 22px 0 0; }

.check-list { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 14px 40px; }
.check-list li { position: relative; padding: 16px 20px 16px 52px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.check-list li strong { color: var(--text); }
.check-list li::before {
  content: ""; position: absolute; left: 20px; top: 22px; width: 13px; height: 7px;
  border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg);
}
.list-plain .check-list li { background: none; border: 0; border-bottom: 1px solid var(--border); }

.stat { text-align: center; padding: 20px; }
.stat-value { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; color: var(--text); }
.stat-label { color: var(--muted); font-size: .95rem; }

.gallery figure { margin: 0; }
.gallery img, .gallery .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--img-radius); }
.gallery figcaption { color: var(--muted); font-size: .9rem; padding-top: 8px; }

/* Banner / call to action */
.banner { padding: var(--section-space) 0; background: var(--surface); }
.banner.has-image { background: #000; }
.banner.banner-tall { min-height: 70vh; display: flex; align-items: center; }
.banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.banner.align-center .banner-inner { flex-direction: column; text-align: center; justify-content: center; }
.banner.align-center .lead { margin-inline: auto; }
.banner h2 { margin-bottom: .3em; }
.banner .lead { margin-bottom: 0; }
.banner .buttons { margin-top: 0; flex-shrink: 0; }
.banner.align-center .buttons { margin-top: 1.5rem; }
.banner .big-title { font-size: clamp(3rem, 11vw, 9rem); font-weight: 800; letter-spacing: .02em; line-height: 1; margin: 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; }
.contact-grid.form-only { grid-template-columns: minmax(0, 820px); justify-content: center; }
.contact-details { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 22px; }
.contact-details span { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--primary); margin-bottom: 4px; }
/* Forms: laid out like the original site forms (default style, "material" look on black): a 6-column grid
   (half = 3, third = 2, full = 6), 30px between rows and columns, bold 12px labels above, help text below.
   .ff-enclosed = boxed fields (Contact), .ff-open = only a line under each field (Careers). */
.contact-form {
  --ff-font: 'Roboto', var(--font-body); --ff-line: #fff; --ff-muted: #8c8c8c;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px; font-family: var(--ff-font);
}
.field { display: flex; flex-direction: column; gap: 5px; grid-column: span 3; min-width: 0; }
.field.third { grid-column: span 2; }
.field.full { grid-column: 1 / -1; }
.field label, .field .field-label { font-family: var(--ff-font); font-size: 12px; font-weight: 700; line-height: 1.5; color: #fff; }
.field input, .field textarea, .field select {
  width: 100%; margin: 0; background: #000; color: #fff; border: 1px solid var(--ff-line); border-radius: 2px;
  padding: 9px 12px; font: 400 16px/1.5 var(--ff-font); outline: none; transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ff-muted); opacity: 1; }
.field textarea { min-height: 140px; resize: vertical; }
.ff-enclosed .field input:hover, .ff-enclosed .field textarea:hover, .ff-enclosed .field select:hover,
.ff-enclosed .field input:focus, .ff-enclosed .field textarea:focus, .ff-enclosed .field select:focus { box-shadow: inset 0 0 0 1px var(--ff-line); }
.ff-open .field input, .ff-open .field textarea, .ff-open .field select { border-width: 0 0 1px; border-radius: 0; padding-inline: 0; }
.ff-open .field input:hover, .ff-open .field textarea:hover, .ff-open .field select:hover,
.ff-open .field input:focus, .ff-open .field textarea:focus, .ff-open .field select:focus { box-shadow: 0 1px 0 var(--ff-line); }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center / 12px no-repeat;
}
.ff-open .field select { background-position: right 4px center; padding-right: 26px; }
.field select:has(option[value=""]:checked) { color: var(--ff-muted); }
.field select option { background: #000; color: #fff; }
/* Browsers with a stylable dropdown: black list, hovered/selected option white with black text */
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select::picker-icon { display: none; }
  .field select::picker(select) { margin-top: 2px; padding: 0; border: 1px solid #000; border-radius: 2px; background: #000; color: #fff; }
  .field select option { padding: 9px 12px; font: 400 16px/1.5 var(--ff-font); color: #fff; }
  .field select option::checkmark { display: none; }
  .field select option[value=""] { display: none; } /* the placeholder shows only in the closed field */
  .field select option:hover, .field select option:focus-visible, .field select option:checked { background: #fff; color: #000; }
}
.field-count { align-self: flex-end; font-size: 12px; line-height: 1.5; color: var(--ff-muted); }
.field-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.field-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 3px 0 0; padding: 0;
  border: 1px solid #000; border-radius: 2px; background: #fff center / 12px no-repeat; box-shadow: none; cursor: pointer;
}
.field-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.3 3.3L11 1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.field-check input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.field-check label { font-size: 14px; font-weight: 400; line-height: 1.6; color: #fff; cursor: pointer; }
.form-submit { display: flex; flex-direction: row; justify-content: var(--submit-align, flex-start); }
/* help text on the left, "0 / 180" counter on the right of the same line */
.field:has(.field-count) { flex-flow: row wrap; column-gap: 12px; }
.field:has(.field-count) > * { flex: 0 0 100%; }
.field:has(.field-count) > .field-help { flex: 1 1 0; order: 1; }
.field:has(.field-count) > .field-count { flex: 0 0 auto; order: 2; margin-left: auto; }
/* Submit: the website's own button look (solid white, black text; outlined on hover) */
.contact-form .form-submit .btn {
  min-height: 50px; padding: 12px 34px; border: 1px solid #fff; border-radius: var(--radius, 4px); background: #fff; color: #000;
  font: 600 15px/1.2 var(--font-body); letter-spacing: .3px; transition: background-color .25s, color .25s, box-shadow .25s;
}
.contact-form .form-submit .btn:hover, .contact-form .form-submit .btn:focus-visible { background: transparent; color: #fff; box-shadow: 0 0 0 1px #fff inset; }
.contact-form .form-submit .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.form-captcha { flex-direction: row; justify-content: var(--submit-align, flex-start); } /* lines up with the fields and the Submit button */
.form-captcha .g-recaptcha { min-height: 78px; }
.hp { position: absolute; left: -9999px; }
.form-success { border: 1px solid var(--primary); padding: 16px 20px; margin-bottom: 24px; border-radius: 4px; }

/* Jobs / openings list */
.jobs { display: grid; gap: 16px; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; padding: 26px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--img-radius); }
.job h3 { margin-bottom: .3em; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: .9rem; }
.job .rich { grid-column: 1 / -1; }
.jobs-empty { color: var(--muted); text-align: center; padding: 40px; border: 1px dashed var(--border-strong); }

/* Accordion / FAQ */
.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-weight: 600; font-size: 1.1rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; transition: transform .25s; }
.accordion details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.accordion .rich { padding-bottom: 22px; }

/* Video embed */
.video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border-radius: var(--img-radius); overflow: hidden; }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Footer */
.site-footer { background: var(--footer-bg); padding-top: 80px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 60px; }
.footer-grid > * { flex: 1 1 180px; min-width: 0; }
.footer-grid > .footer-brand { flex: 1.2 1 220px; }
.footer-logo { display: inline-block; }
.footer-logo img { width: auto; }
.footer-about { color: var(--muted); margin-top: 20px; max-width: 340px; font-size: .95rem; }
.footer-col h4 { font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 1.2em; }
.footer-col ul { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.footer-col a, .footer-text { color: var(--muted); font-size: .95rem; }
.footer-text p { margin: 0 0 .6em; }
.footer-col a:hover { color: var(--text); }
.social { display: flex; gap: 10px; }
.social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--muted); }
.social a:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px 0; font-size: .9rem; color: var(--muted); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.bottom-links { display: flex; gap: 24px; }
.bottom-links a:hover { color: var(--text); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .logos-marquee .logos { animation: none; flex-wrap: wrap; width: auto; }
}

/* Responsive */
@media (max-width: 1100px) {
  .cols-4, .cols-5, .cols-6 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid > .footer-brand { flex-basis: 100%; }
}
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; z-index: 2; }
  .site-nav {
    position: fixed; inset: 0; z-index: 1; background: var(--bg); flex-direction: column; align-items: stretch;
    padding: calc(var(--header-height) + 10px) 24px 40px; gap: 24px; overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .logo { z-index: 2; }
  .nav-open .site-nav { opacity: 1; visibility: visible; }
  .site-nav > ul { flex-direction: column; align-items: stretch; }
  .site-nav > ul > li { border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; }
  .site-nav > ul > li > a { flex: 1; padding: 14px 0; font-size: 18px; font-weight: 700; text-transform: uppercase; }
  .site-nav > ul > li > a .nav-label::after { content: none; }
  .site-nav > ul > li > a:hover .nav-label { transform: none; }
  .sub-toggle { display: block; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; color: var(--text); }
  .sub-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s;
  }
  .sub-open > .sub-toggle::after { transform: translate(-50%, -30%) rotate(-135deg); }
  .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; width: 100%; background: transparent; box-shadow: none; padding: 0 0 12px; }
  .sub-open > .sub-menu { display: block; }
  .sub-menu a { color: var(--muted); font-size: 14px; padding: 8px 12px; margin: 0; }
  .sub-menu::after { content: none; }
  .header-cta { align-self: flex-start; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 860px) {
  .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split.img-right .split-media { order: 0; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-5, .cols-6 { grid-template-columns: repeat(2, 1fr); }
  .banner-inner { flex-direction: column; align-items: flex-start; }
  .job { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --section-space: 72px; }
  .container, .header-inner { padding: 0 16px; }
  .footer-grid { flex-direction: column; gap: 36px; }
  .logos { gap: 28px 32px; }
  .cards-overlay .card { min-height: 360px; }
}

.field-help { color: var(--ff-muted, var(--muted)); font-size: 12px; line-height: 1.5; }
/* Upload: grey "Choose File" button with the file name next to it (no box around it) */
.contact-form .field input[type="file"] { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; line-height: 1.5; cursor: pointer; }
/* Choose File: outlined white button that fills white on hover (matches the site's outline buttons) */
.field input[type="file"]::file-selector-button {
  margin-right: 14px; min-height: 44px; padding: 10px 22px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius, 4px); background: transparent; color: #fff;
  font: 600 14px/1.2 var(--font-body); letter-spacing: .3px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.field input[type="file"]:hover::file-selector-button, .field input[type="file"]:focus-visible::file-selector-button { background: #fff; color: #000; border-color: #fff; }
.form-error { border-color: #d9534f; color: #ffb3b0; }
.field-check label a { color: #fff; text-decoration: underline; }
.field-check label a:hover { color: var(--ff-muted, var(--muted)); }
/* like the original forms, the columns stack below 783px */
@media (max-width: 782px) {
  .field, .field.third { grid-column: 1 / -1; }
  .contact-form .form-submit .btn { width: 100%; }
}
@media (max-width: 400px) {
  /* the reCAPTCHA box is 304px wide: shrink it a little on narrow phones */
  .form-captcha .g-recaptcha { transform: scale(.87); transform-origin: var(--captcha-origin, left) top; margin-bottom: -10px; }
}
@media (max-width: 340px) { .form-captcha .g-recaptcha { transform: scale(.8); margin-bottom: -16px; } }
.bg-gradient { background: linear-gradient(90deg, #000 0%, #1b1b1b 50%, #000 100%); }

/* Circle-arrow button (the theme's "btn-circle"): a small 10px ring just left of the underlined label.
   The 45px circle box is clipped to its middle (clip-path 25%); on hover the clip opens to the full circle,
   it fills, an arrow slides in, the label moves right and the underline shrinks away. */
.btn-circle {
  --bc: var(--text); --bc-hover: var(--primary); --bc-ease: cubic-bezier(.49,0,.01,1);
  position: relative; display: inline-flex; align-items: center; margin-left: 18px; padding: 0;
  color: var(--bc); font-size: 1rem; font-weight: 400; line-height: 1.5;
  transition: margin-left .3s var(--bc-ease), color .5s var(--bc-ease);
}
.bc-circle {
  position: absolute; right: calc(100% - 10px); top: 0; bottom: 0; margin: auto; width: 45px; height: 45px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  clip-path: circle(25% at 50% 50%); transition: clip-path .5s var(--bc-ease);
}
.bc-outline { position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; fill: none; stroke: var(--bc); stroke-width: 5; transition: stroke .5s var(--bc-ease); }
.bc-fill { position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: var(--bc); transform: scale(0); transition: transform .5s var(--bc-ease), background-color .5s var(--bc-ease); }
.bc-arrow { position: relative; z-index: 2; width: 20px; height: 20px; fill: var(--bg); transform: translateX(-100%); opacity: 0; transition: transform .5s var(--bc-ease), opacity .5s var(--bc-ease); }
.bc-label { position: relative; z-index: 1; margin-left: 4pt; transition: transform .5s var(--bc-ease); }
.bc-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--bc-ease); }
.btn-circle:hover { margin-left: 35px; color: var(--bc-hover); }
.btn-circle:hover .bc-circle { clip-path: circle(50% at 50% 50%); }
.btn-circle:hover .bc-outline { stroke: var(--bc-hover); }
.btn-circle:hover .bc-fill { transform: scale(1); background: var(--bc-hover); }
.btn-circle:hover .bc-arrow { transform: none; opacity: 1; }
.btn-circle:hover .bc-label { transform: translateX(calc(10px + 4pt)); }
.btn-circle:hover .bc-line { transform: scaleX(0); }
.btn-dark { background: #000; color: #fff; border: 0; font-size: 18px; font-weight: 100; border-radius: 3px; padding: 12px 24px; }
.btn-dark:hover { background: rgba(2,1,1,.04); box-shadow: 0 0 20px #000; }

/* Hero slider (home). Pulled up 100px under the header and exactly one screen tall, so it always reaches the
   bottom of the screen (user request; lvh so it also fills phones when the browser bar hides),
   horizontal "slide" effect with the picture moving at 70% (parallax), radial shade from the right,
   small (40px) blurred round arrows at the bottom, "01 ── 03" progress in the centre. */
.hero-slider { --hs-h: calc(100vh + 100px); --hs-h: calc(100lvh + 100px); position: relative; height: var(--hs-h); min-height: 560px; margin-top: -100px; overflow: hidden; background: #000; isolation: isolate; touch-action: pan-y; }
body.no-hero .hero-slider { margin-top: 0; }
.hero-slider.hs-large { --hs-h: 80vh; }
.hs-track { position: absolute; inset: 0; }
.hs-slide { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc(var(--pos, 2) * 100%)); visibility: hidden; }
.hs-slide.is-active, .hs-slide.is-moving { visibility: visible; }
.hs-slide.is-moving, .hs-slide.is-moving .hs-img, .hs-slide.is-moving .hs-inner { transition: transform var(--hs-speed, 1000ms) cubic-bezier(.25,.46,.45,.94); }
.hs-media { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hs-img { position: absolute; inset: 0; transform: translateX(calc(var(--pos, 0) * -70%)); }
.hs-img img, .hs-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Background videos are decoration: no iPhone play / pause button over them, taps go through to the page */
.hs-img video, video.cover-video, video.hero-media { pointer-events: none; }
.hs-img video::-webkit-media-controls, video.cover-video::-webkit-media-controls, video.hero-media::-webkit-media-controls,
.hs-img video::-webkit-media-controls-panel, video.cover-video::-webkit-media-controls-panel, video.hero-media::-webkit-media-controls-panel,
.hs-img video::-webkit-media-controls-overlay-play-button, video.cover-video::-webkit-media-controls-overlay-play-button, video.hero-media::-webkit-media-controls-overlay-play-button,
.hs-img video::-webkit-media-controls-start-playback-button, video.cover-video::-webkit-media-controls-start-playback-button, video.hero-media::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0; }
.hs-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(at center right, rgba(255,255,255,0) 50%, rgba(0,0,0,.59) 100%); pointer-events: none; }
.hs-dim { position: absolute; inset: 0; background: #000; }
.hs-media .hero-placeholder { position: absolute; inset: 0; }
/* YouTube background: hidden until it is really playing (no black box / YouTube chrome flash) */
.hs-yt { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.hs-yt.is-playing { opacity: 1; }
/* The video always covers the whole slide (no black bars) and is enlarged a little so YouTube's own
   title bar, share / watch-later buttons and logo sit outside the visible area. */
.hs-yt { container-type: size; overflow: hidden; }
.hs-yt iframe, .hs-yt .hs-yt-player {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100%, 177.78vh); height: max(100%, 56.25vw);
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%) scale(1.3);
}
.hs-yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease; }
.hs-yt.is-playing + .hs-yt-poster { opacity: 0; }
.hs-cont { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-start; padding-top: 100px; }
.hs-inner { margin: 0 0 0 50px; text-align: left; max-width: calc(100% - 100px); min-width: 0; transform: translateX(calc(var(--pos, 0) * 30%)); }
.hero-slider.align-center .hs-cont, .hs-slide.align-center .hs-cont { justify-content: center; }
.hero-slider.align-center .hs-inner, .hs-slide.align-center .hs-inner { margin-left: 0; text-align: center; }
.hs-eyebrow { margin: 0; font-family: var(--font-body); font-size: var(--hs-st, 20px); font-weight: 900; text-transform: uppercase; color: #fff; letter-spacing: 0; line-height: 1.3; }
.hs-title {
  margin: 15px 0; font-family: var(--tf, var(--font-display)); font-size: var(--ts, 6.5vw); font-weight: 900;
  text-transform: uppercase; line-height: 1; letter-spacing: var(--tls, 6px); word-spacing: 0; text-indent: -12px; color: #fff;
}
.hs-desc { margin: 0 0 40px; font-size: 20px; font-weight: 400; line-height: 32px; color: rgba(255,255,255,.69); max-width: 720px; }
.hs-inner .buttons { margin-top: 1rem; }
.hero-slider .btn-circle { --bc: #fff; --bc-hover: var(--primary); }
.hero-slider .btn-circle .bc-arrow { fill: #000; }
/* arrows */
.hs-arrow {
  position: absolute; z-index: 4; bottom: 3rem; width: 40px; height: 40px; border-radius: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 0; transition: background-color .3s, opacity .3s;
}
/* thin line arrow (~14px wide), no disc around it; a faint tint only while a mouse is over it */
.hs-arrow svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .hs-arrow:hover { background: rgba(255,255,255,.05); } }
.hs-prev { left: 3rem; } .hs-prev svg { transform: rotate(180deg); }
.hs-next { right: 3rem; }
/* progress: 01 ──── 03 */
.hs-progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 3rem; height: 80px; width: 32%; margin: 0 auto; display: flex; align-items: center; color: #fff; }
.hs-count, .hs-total { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hs-count { margin-right: 16pt; } .hs-total { margin-left: 16pt; }
.hs-bar { position: relative; flex: 1; height: 1px; background: rgba(255,255,255,.47); }
.hs-bar-fill { position: absolute; left: 0; top: -1px; height: 3px; border-radius: 3px; background: #fff; transition: width var(--hs-speed, 1000ms) ease; }
.hs-dots { position: absolute; left: 50%; bottom: 7rem; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; }
.hs-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.hs-dots button.is-active { background: #fff; }
@media (min-width: 2400px) {
  .hs-cont { justify-content: center; }
  .hs-inner { margin-left: 0; text-align: center; }
  .hs-title { text-indent: 0; }
}
@media (max-width: 1024px) {
  .hs-cont { justify-content: center; }
  .hs-inner { text-align: center; margin: 0 15px; max-width: none; }
  .hs-title { font-size: var(--ts-m, 15vw); text-indent: 0; }
  .hero-slider .buttons { justify-content: center; }
}
@media (max-width: 975px) {
  .hs-arrow { bottom: 2rem; }
  .hs-prev { left: 1.5rem; } .hs-next { right: 1.5rem; }
  .hs-progress { bottom: 2rem; height: 60px; width: auto; justify-content: center; }
  .hs-arrow { width: 60px; height: 60px; }
  /* the counter sits in the middle here, so the scroll mouse goes just above it */
  .hero-slider.has-progress .hero-mouse { bottom: calc(2rem + 70px); }
  .hs-bar { display: none; }
  .hs-count { margin: 0; }
  .hs-count::after { content: "/"; margin: 0 8pt; }
  .hs-total { margin: 0; }
}
@media (max-width: 767px) {
  .hs-inner { margin: 0 15px 180px; }
  .hs-eyebrow { font-size: 10px; }
  .hs-title { font-size: var(--ts-m, 1.8rem); }
  .hs-desc { font-size: 16px; line-height: 26px; }
  .hero-slider { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide.is-moving, .hs-slide.is-moving .hs-img, .hs-slide.is-moving .hs-inner { transition: none; }
}

/* Section titles in the accent font ("OUR SERVICES") */
.section-servicesAccordion .section-head h2 { font-size: var(--ts, 50px); font-weight: 400; }
@media (max-width: 767px) { .section-servicesAccordion .section-head h2 { font-size: var(--ts-m, 28px); } }

/* Line under "OUR SERVICES": 1140px boxed container with 10px padding (so max 1120px wide), 10px container
   padding + the divider gap above and below the 1px line */
.section-servicesAccordion .container:has(+ .sa-rule) .section-head { margin-bottom: 0; }
.sa-rule { max-width: 1140px; margin: 0 auto; padding: calc(20px + var(--sa-rule-gap)) 10px calc(10px + var(--sa-rule-gap)); }
.sa-rule hr { margin: 0; border: 0; border-top: 1px solid var(--sa-rule); }
@media (max-width: 1024px) { .sa-rule { padding: calc(20px + var(--sa-rule-gap-t)) 10px calc(20px + var(--sa-rule-gap-t)); } }

/* Services: sideways accordion on desktop */
.sa-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 0 0 100px; background: #000; }
.sa { display: flex; height: var(--sa-size); margin-top: 50px; }
.sa-item { display: flex; }
.sa-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  height: 100%; padding: 30px; border: 0; background: #000; color: #fff; cursor: pointer;
  font-family: var(--if, var(--font-display)); font-size: var(--is, 21px); letter-spacing: 2px; text-transform: uppercase; line-height: 1.2;
  transition: background-color .3s, color .3s;
}
.sa-tab-text { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-shadow: 0 0 10px rgba(0,0,0,.3); }
.sa-tab:hover { background: #fff; color: #000; }
.sa-item.is-open .sa-tab { background: #000; color: #fff; }
.sa-icon { display: none; } /* the original tabs have no +/− marks */
.sa-icon::before, .sa-icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 1.5px; background: currentColor; transition: transform .3s; }
.sa-icon::after { transform: rotate(90deg); }
.is-open .sa-icon::after { transform: rotate(0); }
.sa-panel { width: 0; overflow: hidden; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.sa-item.is-open .sa-panel { width: min(var(--sa-size), calc(100vw - 560px)); }
.sa-panel-inner {
  position: relative; isolation: isolate; width: min(var(--sa-size), calc(100vw - 560px)); height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 50px;
  background-color: #050505; background-size: cover; background-repeat: no-repeat;
}
.sa-panel-inner .hero-placeholder { position: absolute; inset: 0; z-index: -2; }
.sa-dim { position: absolute; inset: 0; z-index: -1; background: #0C0606; }
.sa-title {
  margin: 0; font-family: var(--if, var(--font-display)); font-size: var(--is, 40px); font-weight: 700; text-transform: uppercase; color: #fff;
  text-align: center; line-height: 1.2; text-shadow: 0 0 10px rgba(0,0,0,.3);
}
.sa-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 25px; line-height: 1; background: #000; color: #fff; font-size: 18px; font-weight: 100; border-radius: 3px; transition: background-color .3s, box-shadow .3s; }
.sa-btn:hover { background: rgba(2,1,1,.04); box-shadow: 0 0 20px #000; }
.sa-btn-ico { flex: none; color: #fff; }
/* Services: image-box grid on tablet and phone */
.sa-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-box { display: block; text-align: center; }
.sa-box-img { width: 100%; margin: 0 auto 15px; overflow: hidden; }
.sa-box-img img, .sa-box-img .img-placeholder { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s; }
.sa-box:hover .sa-box-img img { transform: scale(1.04); }
.sa-box-title { margin: 0 0 6px; font-size: var(--is-m, 23px); font-weight: 400; text-transform: uppercase; }
.sa-box-desc { margin: 0; font-weight: 300; color: var(--muted); }
@media (max-width: 1024px) {
  .sa-wrap { display: none; }
  .sa-grid { display: grid; padding-bottom: 40px; }
}
@media (max-width: 767px) {
  .sa-grid { grid-template-columns: 1fr; }
  .sa-box-img { width: 90%; }
  .sa-box-title { font-size: var(--is-m, 18px); }
  .sa-box-desc { font-size: 12px; }
}

/* Agency seal strip: 180px tall, 8 across with 100px gaps, scrolling continuously */
.logo-strip { overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.logo-strip.is-dragging { cursor: grabbing; }
.logo-strip img { -webkit-user-drag: none; pointer-events: none; }
.logo-track { display: flex; align-items: center; gap: var(--logo-gap); }
.logo-cell { flex: 0 0 calc((100vw - (var(--per-view) - 1) * var(--logo-gap)) / var(--per-view)); height: var(--logo-h); display: flex; align-items: center; justify-content: center; }
.logo-cell img { width: 100%; height: 100%; object-fit: contain; }
.logo-cell .img-placeholder { width: var(--logo-h); height: var(--logo-h); max-width: 100%; min-height: 0; border-radius: 50%; font-size: .6rem; }
.logo-strip.is-marquee .logo-track { width: max-content; will-change: transform; }
.logo-track.grayscale img { filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.logo-track.grayscale .logo-cell:hover img { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--logo-gap) / 2)); } }
@media (max-width: 1024px) {
  .logo-track { gap: var(--logo-gap-t); }
  .logo-cell { flex-basis: calc((100vw - (var(--per-view-t) - 1) * var(--logo-gap-t)) / var(--per-view-t)); }
  @keyframes marquee { to { transform: translateX(calc(-50% - var(--logo-gap-t) / 2)); } }
}
@media (max-width: 767px) {
  .logo-track { gap: var(--logo-gap-m); }
  .logo-cell { flex-basis: calc((100vw - (var(--per-view-m) - 1) * var(--logo-gap-m)) / var(--per-view-m)); height: var(--logo-h-m); }
  .logo-cell .img-placeholder { width: var(--logo-h-m); height: var(--logo-h-m); }
}
@media (prefers-reduced-motion: reduce) { .logo-strip.is-marquee .logo-track { animation: none; } }

/* Thin divider lines between home sections */
.section-divider { padding: 40px 0; }
.section-divider hr { border: 0; border-top: var(--divider-w, 1px) solid var(--divider, #101010); margin: 0; }

/* Expanding panels (desktop) / picture boxes (phones) */
.panels { display: flex; gap: 10px; height: var(--panels-height); }
.panel {
  position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: var(--img-radius);
  background: var(--surface); color: #fff; transition: flex .7s cubic-bezier(.2, .7, .2, 1); isolation: isolate;
}
.panel.is-open { flex: 5; }
.panel-media, .panel-media img, .panel-media .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75)); transition: background .5s; }
.panel:not(.is-open) .panel-media::after { background: rgba(0, 0, 0, .6); }
.panel-tab { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; transition: opacity .3s; }
.panel-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.panel.is-open .panel-tab { opacity: 0; }
.panel-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px; opacity: 0; transform: translateY(20px); transition: opacity .4s ease .2s, transform .4s ease .2s; }
.panel.is-open .panel-body { opacity: 1; transform: none; }
.panel-body h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.panel-body .rich { color: #ddd; max-width: 520px; }
.panel-body .btn { margin-top: 10px; color: #fff; border-color: #fff; }
.panel-body .btn-primary { background: #fff; color: #000; }
@media (max-width: 860px) {
  .panels { display: grid; grid-template-columns: 1fr; height: auto; gap: 20px; }
  .panel, .panel.is-open { flex: none; height: 340px; }
  .panel-tab { display: none; }
  .panel .panel-body { opacity: 1; transform: none; }
  .panel:not(.is-open) .panel-media::after { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75)); }
}
@media (min-width: 600px) and (max-width: 860px) { .panels { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------
   Per-device values: templates write variables such as --x-d (desktop), --x-t (tablet <= 1024px)
   and --x-m (phone <= 767px) into the section's style attribute, only when the admin field is filled in.
   The rules below pick the right one per screen size and fall back to the defaults written here.
   ------------------------------------------------------------------ */

/* Any section: optional minimum height (content centred vertically) */
.section.has-min-h { display: flex; flex-direction: column; justify-content: center; }

/* Sticky stack: sections marked "sticky" stay pinned 3px from the top while the next one slides over them.
   page.ejs wraps each run of them in .stack-group and gives every item a higher z-index. */
.stack-group { position: relative; }
.stack-group > * { position: sticky; top: 3px; background: #000; }

/* Cover: full-bleed picture or video with text on top (page hero, image rows) */
.cover { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; background: #000; color: #fff; }
.cover-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cover-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cover-bg.is-parallax { top: -12%; height: 124%; will-change: transform; }
.cover-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--cv-oc, #000); opacity: var(--cv-o-d, 0); }
.cover-inner { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 20px; }
.cover-box { max-width: var(--cv-w-d, none); margin-inline: auto; text-align: var(--cv-a-d, left); }
.cover .cover-title {
  margin: 0; font-family: var(--cv-tf, var(--font-display)); font-size: var(--cv-ts-d); font-weight: var(--cv-tw, 400);
  text-transform: var(--cv-tt, none); letter-spacing: var(--cv-tls, normal); line-height: var(--cv-tlh, 1.1); color: var(--cv-tc, #fff);
  overflow-wrap: break-word;
}
.cover-sub { margin-top: 15px; font-size: var(--cv-ss-d); font-weight: var(--cv-sw, 300); line-height: 1.6; color: var(--cv-sc, #fff); }
.cover-sub p { margin: 0 0 .6em; }
.cover-sub > :last-child { margin-bottom: 0; }
.cover-box .btn { margin-top: 20px; }
@media (max-width: 1024px) {
  .cover-shade { opacity: var(--cv-o-t, var(--cv-o-d, 0)); }
  .cover-box { max-width: var(--cv-w-t, var(--cv-w-d, none)); text-align: var(--cv-a-t, var(--cv-a-d, left)); }
  .cover .cover-title { font-size: var(--cv-ts-t, var(--cv-ts-d)); }
  .cover-sub { font-size: var(--cv-ss-t, var(--cv-ss-d)); }
}
@media (max-width: 767px) {
  .cover-shade { opacity: var(--cv-o-m, var(--cv-o-t, var(--cv-o-d, 0))); }
  .cover-box { max-width: var(--cv-w-m, var(--cv-w-t, var(--cv-w-d, none))); text-align: var(--cv-a-m, var(--cv-a-t, var(--cv-a-d, left))); }
  .cover .cover-title { font-size: var(--cv-ts-m, var(--cv-ts-t, var(--cv-ts-d))); }
  .cover-sub { font-size: var(--cv-ss-m, var(--cv-ss-t, var(--cv-ss-d))); }
}
@media (prefers-reduced-motion: reduce) { .cover-bg.is-parallax { top: 0; height: 100%; transform: none !important; } }

/* Page hero defaults */
.page-hero {
  --cv-ts-d: 60px; --cv-ts-t: 50px; --cv-ts-m: 40px; --cv-ss-d: 19px; --cv-ss-t: 15px; --cv-ss-m: 15px;
  min-height: var(--cv-h, 100vh); margin-top: calc(-1 * var(--cv-pull, 0px));
}
@media (max-width: 767px) { .page-hero { margin-top: calc(-1 * var(--cv-pull-m, var(--cv-pull, 0px))); } }

/* Full-width image rows ("What we handle"); each row is a small cover */
.section-imageRows {
  --cv-ts-d: 50px; --cv-ts-t: 40px; --cv-ts-m: 30px; --cv-tt: uppercase; --cv-ss-d: 15px; --cv-ss-t: 12px; --cv-ss-m: 10px;
  --cv-o-d: .3; --cv-a-m: center; --cv-w-t: 650px; --cv-w-m: 300px;
}
.image-rows { display: grid; }
.image-row { min-height: var(--row-height, 420px); color: #fff; }
.image-rows.is-stacked > .image-row { position: sticky; top: 3px; }

/* Stand-alone heading */
.section-heading { padding: 20px 0; }
.section-heading .hd-text {
  margin: 0; font-family: var(--hd-f, var(--font-heading)); font-size: var(--hd-s-d, clamp(1.75rem, 3.4vw, 2.75rem));
  font-weight: var(--hd-w, var(--heading-weight)); letter-spacing: var(--hd-ls, var(--heading-spacing)); line-height: var(--hd-lh, 1.2);
  text-transform: var(--hd-tt, var(--heading-transform)); color: var(--hd-c, var(--text)); text-align: var(--hd-a-d, left);
}
@media (max-width: 1024px) {
  .section-heading .hd-text { font-size: var(--hd-s-t, var(--hd-s-d, clamp(1.75rem, 3.4vw, 2.75rem))); text-align: var(--hd-a-t, var(--hd-a-d, left)); }
}
@media (max-width: 767px) {
  .section-heading .hd-text { font-size: var(--hd-s-m, var(--hd-s-t, var(--hd-s-d, 1.75rem))); text-align: var(--hd-a-m, var(--hd-a-t, var(--hd-a-d, left))); }
}

/* Split blocks (Mission): big title | light text, optional grey rule above each block */
.section-splitBlocks { padding: 0 0 40px; }
.sb-block { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; justify-items: start; align-items: start; }
.sb-large { padding-top: 80px; }
.sb-small { padding-top: 30px; }
.sb-block.has-rule { border-top: 2px solid var(--sb-bc, #6B6B6B); }
.sb-block .sb-title {
  margin: 0; align-self: center; font-family: var(--sb-tf, var(--font-heading)); font-weight: var(--sb-tw, 700);
  line-height: 1.05; text-transform: none; color: var(--text); max-width: 100%; overflow-wrap: anywhere;
}
.sb-large .sb-title { font-size: var(--sb-ls, 70px); letter-spacing: var(--sb-lsp, 7.4px); }
.sb-small .sb-title { font-size: var(--sb-ss, 45px); letter-spacing: var(--sb-ssp, 3px); }
.sb-block .sb-text { font-size: var(--sb-xs, 16px); font-weight: var(--sb-xw, 300); line-height: 1.7; color: var(--text); }
.sb-block .sb-text > :last-child { margin-bottom: 0; }
.sb-divider { height: 1px; margin: 40px 0; background: var(--border); }
.sb-form { width: var(--sb-fw, 100%); margin: 0 auto; padding-top: 30px; }
@media (max-width: 767px) {
  .sb-block { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 10px; }
  .sb-large { padding-top: 40px; }
  .sb-small { padding-top: 10px; }
  .sb-large .sb-title { font-size: var(--sb-ls-m, 50px); }
  .sb-small .sb-title { font-size: var(--sb-ss-m, 30px); }
  .sb-block .sb-text { font-size: var(--sb-xs-m, 11px); }
  .container.sb-boxed-m { width: var(--sb-bw-m, 100%); padding-inline: 0; }
  .sb-form { width: 100%; }
}

/* Picture-box grid (Services) */
.ib-grid { display: grid; grid-template-columns: repeat(var(--ib-c-d, 3), minmax(0, 1fr)); gap: var(--ib-gap, 20px); }
.ib-item { display: block; text-align: center; color: inherit; }
.ib-img { width: 100%; margin: 0 auto 15px; overflow: hidden; }
.ib-img img, .ib-img .img-placeholder { width: 100%; aspect-ratio: var(--ib-ratio, 3 / 2); object-fit: cover; min-height: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ib-item:hover .ib-img img { transform: scale(1.05); }
.ib-grid .ib-title {
  margin: 0 0 6px; font-family: var(--ib-tf, var(--font-display)); font-size: var(--ib-ts-d, 23px); font-weight: 400;
  text-transform: var(--ib-tt, uppercase); letter-spacing: 0; line-height: 1.25; color: var(--text);
}
.ib-desc { margin: 0; font-size: var(--ib-ds-d, inherit); font-weight: var(--ib-dw, 300); color: var(--muted); }
.ib-item:hover .ib-desc { color: var(--text); }
@media (max-width: 1024px) {
  .ib-grid { grid-template-columns: repeat(var(--ib-c-t, 3), minmax(0, 1fr)); }
  .ib-grid .ib-title { font-size: var(--ib-ts-t, var(--ib-ts-d, 23px)); }
}
@media (max-width: 767px) {
  .ib-grid { grid-template-columns: repeat(var(--ib-c-m, 1), minmax(0, 1fr)); }
  .ib-grid .ib-title { font-size: var(--ib-ts-m, 18px); }
  .ib-desc { font-size: var(--ib-ds-m, 12px); }
  .ib-img { width: var(--ib-iw-m, 90%); }
}

/* Split intro (Services top): big title on one side, picture on the other */
.si-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; }
.si-title-col { display: flex; align-items: center; justify-content: center; text-align: center; }
.si-grid .si-title {
  margin: 0; font-family: var(--si-tf, var(--font-display)); font-size: var(--si-ts-d, 50px); font-weight: var(--si-tw, 400);
  line-height: var(--si-lh, 1); text-transform: var(--si-tt, capitalize); letter-spacing: 0; color: var(--si-tc, var(--text));
}
.si-media { display: flex; justify-content: center; }
.si-media .si-img { position: relative; width: var(--si-iw, 90%); height: var(--si-ih, 400px); min-height: 0; object-fit: cover; margin-top: calc(-1 * var(--si-pull, 100px)); }
.si-img-left .si-media { order: -1; }
@media (max-width: 1024px) { .si-grid .si-title { font-size: var(--si-ts-t, 56px); } }
@media (max-width: 767px) {
  .si-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .si-grid .si-title { font-size: var(--si-ts-m, 32px); }
  .si-media .si-img { margin-top: 0; }
  .si-img-left .si-media { order: 0; }
}

/* Form split (Careers): heading + small text | form */
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
/* Live Careers layout: heading + text centred in a 70% column ABOVE the form (not side by side) */
.fs-grid.fs-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.fs-info .fs-heading { text-align: center; }
.fs-info-inner { width: var(--fs-iw, 70%); margin: 0 auto; }
.fs-info .fs-heading {
  margin: 0 0 20px; text-align: center; font-family: var(--fs-hf, var(--font-display)); font-size: var(--fs-hs-d, 33px);
  font-weight: var(--fs-hw, 300); letter-spacing: var(--fs-hls, 2px); text-transform: var(--fs-htt, uppercase); line-height: 1.2;
}
.fs-text { font-size: var(--fs-xs-d, 10px); text-align: var(--fs-xa, justify); line-height: var(--fs-lh, 1.5); color: var(--text); }
.fs-text p { margin: 0; }
.fs-text a { color: var(--fs-link, #CB4848); }
.fs-text a:hover { color: var(--fs-link-h, #ED9C9C); }
.fs-form-inner { width: var(--fs-fw, 70%); margin: 0 auto; }
@media (max-width: 767px) {
  .fs-grid { grid-template-columns: minmax(0, 1fr); }
  .fs-info .fs-heading { font-size: var(--fs-hs-m, 25px); }
  .fs-text { font-size: var(--fs-xs-m, 10px); }
  .fs-form-inner { width: var(--fs-fw-m, 90%); }
}

/* Contact form in a centred box (boxWidth / boxWidthMobile) */
.contact-grid.is-boxed.form-only { grid-template-columns: minmax(0, var(--cbox-w, 820px)); }
.contact-grid.is-boxed:not(.form-only) .contact-form-col { max-width: var(--cbox-w, none); }
@media (max-width: 767px) {
  .contact-grid.is-boxed.form-only { grid-template-columns: minmax(0, var(--cbox-w-m, 100%)); }
}

/* ------------------------------------------------------------------
   Careers: job openings board (jobs section with source "site") and job pages (/careers/<job>/)
   ------------------------------------------------------------------ */
.jobs-board, .section-jobDetail { --font-label: 'Bebas Neue', var(--font-heading); }
.jobs-board-section { padding: 60px 0 30px; }
.jb-head { text-align: center; margin-bottom: 34px; }
.jobs-board .jb-heading {
  margin: 0; font-family: var(--font-display); font-size: 33px; font-weight: 300; letter-spacing: 2px;
  text-transform: uppercase; line-height: 1.2;
}
.jb-intro { max-width: 680px; margin: 14px auto 0; color: var(--muted); font-size: 15px; font-weight: 300; }
.jb-intro p:last-child { margin-bottom: 0; }
.jb-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 18px 0 20px; margin-bottom: 26px;
  border-top: 2px solid #6B6B6B; border-bottom: 1px solid var(--border);
}
.jb-filter { display: flex; flex-direction: column; gap: 6px; flex: 0 1 230px; min-width: 170px; }
.jb-filter span, .jb-count { font-family: var(--font-label); font-size: 16px; letter-spacing: 2px; line-height: 1.2; color: var(--muted); }
.jb-filter select {
  -webkit-appearance: none; appearance: none; width: 100%; padding: 10px 38px 10px 12px; border: 1px solid var(--border-strong); border-radius: 4px;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23cfcfcf' stroke-width='1.4'/%3E%3C/svg%3E") right 13px center / 11px no-repeat;
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .25s;
}
.jb-filter select:hover, .jb-filter select:focus { border-color: var(--text); outline: none; }
.jb-reset { padding: 10px 2px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.jb-count { margin-left: auto; padding-bottom: 10px; }
.jb-grid { display: grid; gap: 20px; }
.jb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jb-card {
  position: relative; display: flex; flex-direction: column; padding: 30px 30px 24px; background: #050505;
  border: 1px solid var(--border); border-top: 2px solid #6B6B6B; transition: border-color .3s, background-color .3s;
}
.jb-card:hover { border-color: var(--border-strong); border-top-color: #fff; background: #0a0a0a; }
.jb-dept { margin-bottom: 8px; font-family: var(--font-label); font-size: 17px; letter-spacing: 3px; line-height: 1.2; color: var(--muted); }
.jb-card .jb-title { margin: 0 0 18px; font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: .5px; text-transform: uppercase; }
.jb-title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is clickable */
.jb-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 18px; padding: 0; font-size: 14px; }
.jb-meta span { display: block; font-family: var(--font-label); font-size: 14px; letter-spacing: 2px; line-height: 1.3; color: #7a7a7a; }
.jb-summary { margin: 0 0 22px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--muted); }
.jb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); }
.jb-foot .btn-circle { position: relative; z-index: 1; }
.jb-date { font-size: 12px; letter-spacing: .04em; color: var(--muted); text-align: right; }
.jb-nomatch { margin-top: 20px; }
@media (max-width: 860px) { .jb-cols-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .jobs-board .jb-heading { font-size: 25px; }
  .jb-filter { flex: 1 1 100%; }
  .jb-count { margin-left: 0; padding-bottom: 0; }
  .jb-card { padding: 24px 20px 20px; }
  .jb-card .jb-title { font-size: 21px; }
}

.section-jobDetail { padding: 50px 0 0; }
.jd-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; font-family: var(--font-label); font-size: 18px; letter-spacing: 3px; color: var(--muted); }
.jd-back:hover { color: var(--text); }
.jd-notice { margin-bottom: 24px; padding: 12px 16px; border: 1px dashed #fbbf24; color: #fbbf24; font-size: 13px; }
.jd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; }
.jd-summary { margin: 0 0 30px; padding-left: 20px; border-left: 2px solid #6B6B6B; font-size: 20px; font-weight: 300; line-height: 1.6; color: var(--text); }
.jd-desc { font-size: 15px; font-weight: 300; line-height: 1.8; }
.jd-block { margin-top: 46px; }
.jd-block .jd-h {
  margin: 0 0 20px; padding-top: 18px; border-top: 2px solid #6B6B6B; font-family: var(--font-label); font-size: 40px;
  font-weight: 400; letter-spacing: 5px; line-height: 1; text-transform: uppercase;
}
.jd-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.jd-list li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--muted); }
.jd-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 12px; height: 1px; background: var(--text); }
.jd-aside { position: sticky; top: calc(var(--header-height) + 20px); }
.jd-card { padding: 26px; background: #050505; border: 1px solid var(--border); border-top: 2px solid #6B6B6B; }
.jd-card-title { margin-bottom: 6px; font-family: var(--font-label); font-size: 24px; letter-spacing: 3px; line-height: 1.2; }
.jd-facts { margin: 0 0 22px; }
.jd-facts > div { padding: 12px 0; border-bottom: 1px solid var(--border); }
.jd-facts dt { font-family: var(--font-label); font-size: 14px; letter-spacing: 2px; line-height: 1.3; color: #7a7a7a; }
.jd-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.jd-apply { width: 100%; }
.jd-mail { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.jd-mail a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.jd-apply-wrap { margin-top: 90px; padding: 80px 0 70px; background: #050505; border-top: 1px solid var(--border); }
.jd-form { max-width: 720px; margin: 0 auto; }
.jd-form-title { margin: 0; text-align: center; font-family: var(--font-display); font-size: 33px; font-weight: 300; letter-spacing: 2px; line-height: 1.2; text-transform: uppercase; }
.jd-form-job { margin: 8px 0 34px; text-align: center; font-family: var(--font-label); font-size: 20px; letter-spacing: 3px; color: var(--muted); }
.jd-form-intro { margin-bottom: 20px; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 1024px) { .jd-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; } }
@media (max-width: 860px) {
  .jd-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .jd-aside { position: static; order: -1; }
}
@media (max-width: 767px) {
  .section-jobDetail { padding-top: 34px; }
  .jd-summary { font-size: 17px; }
  .jd-block .jd-h { font-size: 32px; letter-spacing: 4px; }
  .jd-apply-wrap { margin-top: 60px; padding: 56px 0 50px; }
  .jd-form-title { font-size: 25px; }
}

/* Policy pages: effective / last-updated dates above the text */
.policy-dates { margin: 0 0 1.6em; color: var(--muted); }
.policy-dates span { display: block; }
.policy-dates strong { color: var(--text); }
/* "[REVIEW]" note at the top of policy pages created from a template (remove it once reviewed) */
.rich .review-note { padding: 12px 16px; border: 1px dashed #fbbf24; color: #fbbf24; }
.rich .review-note strong { color: #fbbf24; }

/* ===== Site Map page (views/sections/sitemapList.ejs) =====
   One row per group: the group title on the left, its pages on the right (two columns), hairlines between.
   Tablet: title above the pages. Phone: one column. Each link: page name, one short line, an arrow on hover / focus. */
.section-sitemapList { padding-top: 70px; padding-bottom: 90px; }
.sm-wrap { max-width: var(--container); }
.sm-intro { max-width: 760px; margin: 0 0 44px; }
.sm-wrap.text-center .sm-intro { margin-inline: auto; }
.sm-heading { margin-bottom: .4em; }
.sm-lead { font-size: 1.1rem; line-height: 1.7; }
.sm-lead p:last-child { margin-bottom: 0; }
.sm-groups { border-top: 1px solid rgba(255,255,255,.16); }
.sm-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 40px; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.sm-title {
  margin: 0; padding-top: 20px; font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1.4;
  letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
}
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
.sm-list.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-item { min-width: 0; border-top: 1px solid rgba(255,255,255,.08); }
.sm-list.is-multi .sm-item:nth-child(-n+2), .sm-list .sm-item:first-child { border-top: 0; }
.sm-link {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 0; color: var(--text); border-radius: 2px; outline-offset: 4px;
}
.sm-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sm-name { font-size: 1.2rem; font-weight: 700; line-height: 1.3; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.sm-line { font-size: .95rem; line-height: 1.5; color: var(--muted); transition: color .25s; }
.sm-arrow {
  flex: none; color: var(--text); opacity: 0; transform: translateX(-8px);
  transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.sm-link:focus-visible .sm-arrow { opacity: 1; transform: none; }
.sm-link:focus-visible .sm-name { transform: translateX(4px); }
.sm-link:focus-visible .sm-line { color: var(--text); }
@media (hover: hover) {
  .sm-link:hover .sm-arrow { opacity: 1; transform: none; }
  .sm-link:hover .sm-name { transform: translateX(4px); }
  .sm-link:hover .sm-line { color: var(--text); }
}
.sm-link:focus-visible { outline: 2px solid #fff; }
.sm-sub { list-style: none; margin: -6px 0 16px; padding: 0 0 0 16px; border-left: 1px solid rgba(255,255,255,.16); }
.sm-link-sub { padding: 10px 0; }
.sm-link-sub .sm-name { font-size: 1rem; font-weight: 600; }
.sm-link-sub .sm-line { font-size: .88rem; }
@media (max-width: 1024px) {
  .sm-group { grid-template-columns: minmax(0, 1fr); padding: 30px 0 18px; }
  .sm-title { padding-top: 0; margin-bottom: 6px; }
}
@media (max-width: 767px) {
  .section-sitemapList { padding-top: 46px; padding-bottom: 60px; }
  .sm-intro { margin-bottom: 30px; }
  .sm-lead { font-size: 1rem; }
  .sm-list.is-multi { grid-template-columns: minmax(0, 1fr); }
  .sm-list.is-multi .sm-item:nth-child(2) { border-top: 1px solid rgba(255,255,255,.08); }
  .sm-name { font-size: 1.08rem; }
  .sm-arrow { opacity: .55; transform: none; }
}
@media (hover: none) { .sm-arrow { opacity: .55; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-name, .sm-arrow { transition: none; } }
/* ===== end Site Map page ===== */

/* Background video headers: black until the video plays, then fade in; picture only as a fallback */
.cover-media { background: #000; }
.cover-media .cover-video { opacity: 0; transition: opacity .8s ease; }
.cover-media.video-on .cover-video { opacity: 1; }
.cover-media .cover-fallback { opacity: 0; transition: opacity .6s ease; }
.cover-media.video-failed .cover-fallback { opacity: 1; }
.cover-media.video-on .cover-fallback { display: none; }

/* Header scroll effects: data-fx="scale" (zoom in + fade to black) and data-fx="fade" */
.page-hero .cover-fx-dark { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.page-hero[data-fx="scale"] .cover-media { transform: scale(var(--fx-scale, 1)); transform-origin: center center; will-change: transform; }
.page-hero[data-fx="scale"] .cover-fx-dark { opacity: var(--fx-dark, 0); }
.page-hero[data-fx] .cover-inner { opacity: var(--fx-fade, 1); }
.page-hero[data-fx="fade"] .cover-media { opacity: var(--fx-fade, 1); }
.image-rows.is-stacked > .image-row .cover-fx-dark { position: absolute; inset: 0; z-index: 1; background: #000; opacity: var(--fx-dark, 0); pointer-events: none; }
.image-rows.is-stacked > .image-row .cover-media { transform: scale(var(--fx-scale, 1)); transform-origin: center center; }
.image-rows.is-stacked > .image-row .cover-inner { opacity: var(--fx-fade, 1); }
.page-hero:not([data-fx]) .cover-fx-dark { display: none; }

/* 404 "page not found" (views/sections/notFound.ejs): full-screen photo, big 404, quick links */
.nf { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-height) + 60px) 20px 40px; text-align: center; color: #fff; background: #000; }
.nf-bg { position: absolute; inset: 0; z-index: -1; }
.nf-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: nf-drift 24s ease-in-out infinite alternate; filter: grayscale(.35); }
.nf-dim { position: absolute; inset: 0; background: #000; }
.nf-title { position: relative; }
.nf-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, #000); }
.nf-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.nf-inner { position: relative; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.nf-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-display); font-size: 14px; letter-spacing: 5px; text-transform: uppercase; color: var(--muted); animation: nf-up .8s .05s both; }
.nf-x { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.nf-code { display: flex; align-items: center; justify-content: center; gap: .04em; font-family: var(--font-accent); font-size: clamp(7rem, 24vw, 17rem); line-height: .95; letter-spacing: .02em; color: #fff; text-shadow: 0 0 60px rgba(255,255,255,.18); animation: nf-up .9s .12s both; }
.nf-title { margin: 18px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; animation: nf-up .9s .22s both; }
.nf-text { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 1.05rem; line-height: 1.6; animation: nf-up .9s .3s both; }
.nf-text p { margin: 0; }
.nf-path { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 20px 0 0; padding: 7px 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; animation: nf-up .9s .36s both; }
.nf-path span { font-family: var(--font-display); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); white-space: nowrap; }
.nf-path code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 56px; margin-top: 34px; animation: nf-up .9s .44s both; }
.nf .btn-circle { --bc: #fff; --bc-hover: var(--primary); font-size: 1.05rem; }
.nf-links { position: relative; max-width: 1100px; width: 100%; margin: 64px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); animation: nf-up .9s .55s both; }
.nf-links-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--primary); }
.nf-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 0; padding: 0; list-style: none; }
.nf-links a { color: var(--muted); font-size: 14px; transition: color .25s; }
.nf-links a:hover, .nf-links a:focus-visible { color: #fff; }
@keyframes nf-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nf-drift { from { transform: scale(1.08) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -1%, 0); } }
@media (max-width: 767px) {
  .nf { padding: calc(var(--header-height) + 40px) 16px 28px; }
  .nf-eyebrow { font-size: 12px; letter-spacing: 4px; }
  .nf-text { font-size: .98rem; }
  .nf-actions { flex-direction: column; align-items: center; gap: 18px; margin-top: 26px; }
  .nf-links { margin-top: 44px; }
  .nf-links ul { gap: 10px 22px; }
  .nf-grid { background-size: 48px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-bg img,   .nf-eyebrow, .nf-code, .nf-title, .nf-text, .nf-path, .nf-actions, .nf-links { animation: none; }
}

/* Draft pages (only signed-in staff see them, src/draft-pages.js): a small bar and every [Add: …] still to fill in */
.bz-draft-bar {
  position: fixed; left: 12px; bottom: 12px; z-index: 10000; max-width: calc(100vw - 24px); padding: 9px 14px;
  background: #000; border: 1px dashed #fbbf24; color: #fbbf24; font-family: var(--font-body); font-size: 13px; line-height: 1.4;
}
mark.bz-ph { background: rgba(251, 191, 36, .14); color: #fbbf24; outline: 1px dashed #fbbf24; outline-offset: 1px; padding: 0 3px; }