/* ==========================================================================
   Reign Consulting, Inc.
   Static stylesheet — converted from the original Phlox Pro / Elementor build.
   Design tokens, typography and animation timings mirror the source site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --green:        #005b23;
  --green-dark:   #00461b;
  --bronze:       #a97e63;
  --black:        #000000;
  --white:        #ffffff;
  --gray:         #8d8d8e;
  --gray-light:   #c7c7c8;
  --border:       #eaeaea;
  --field-bg:     #f0f0f0;

  --text:         rgba(0, 0, 0, 0.9);
  --text-on-dark: rgba(255, 255, 255, 0.9);
  --text-muted:   rgba(0, 0, 0, 0.5);

  --font-head: 'Playfair Display', 'Times New Roman', Times, serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container: 1600px;
  --gutter: 35px;

  --header-h: 105px;
  --header-h-sticky: 80px;

  /* Easing curves lifted from the original Elementor animation config */
  --ease-out-quad:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-circ:  cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-sticky);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 0;
  color: var(--black);
}

p { margin: 0 0 1em; }

a {
  color: var(--green);
  text-decoration: none;
  transition: color .3s var(--ease-out-circ);
}
a:hover { color: var(--bronze); }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul, ol { margin: 0; padding: 0; }

button { font-family: inherit; }

/* Accessibility helpers ---------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  padding: 12px 22px;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  transition: top .25s var(--ease-out-circ);
}
.skip-link:focus { top: 16px; color: var(--white); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding: 110px 0; }

/* --------------------------------------------------------------------------
   4. Display type — the outlined headline treatment
      Original: transparent fill + 1px -webkit-text-stroke, Playfair bold.
      `color: transparent` is the cross-browser fallback for the stroke.
   -------------------------------------------------------------------------- */
.outline-title {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--green);
  text-stroke: 1px var(--green);
  margin: 0;
  white-space: nowrap;
  user-select: none;
}
.outline-title--green  { -webkit-text-stroke-color: var(--green);  }
.outline-title--bronze { -webkit-text-stroke-color: var(--bronze); }
.outline-title--gray   { -webkit-text-stroke-color: var(--gray);   }

/* Browsers without -webkit-text-stroke get a legible outline via shadow. */
@supports not (-webkit-text-stroke: 1px black) {
  .outline-title { color: transparent; text-shadow: 0 0 1px currentColor; }
  .outline-title--green  { color: var(--green);  }
  .outline-title--bronze { color: var(--bronze); }
  .outline-title--gray   { color: var(--gray);   }
}

/* Section eyebrow (ABOUT US / CAREER / CONTACT / CAREERS / PRIVACY / TERMS) */
.eyebrow {
  font-size: 100px;
  line-height: 2.1em;
  margin-bottom: 0;
}

/* The eyebrow and the H2 beneath it overlap, exactly as in the source. */
.section-head { position: relative; }
.section-head .section-title { position: relative; top: -78px; margin-bottom: -50px; }

.section-title {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2em;
  max-width: 916px;
}

/* --------------------------------------------------------------------------
   5. Buttons — 50x50 colour block + 54px rule + label
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--black);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .3s var(--ease-out-circ);
}
.btn::before {                       /* the colour block sitting behind */
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 50px;
  height: 50px;
  transform: translateY(-50%);
  background: var(--green);
  z-index: -1;
  transition: transform .4s var(--ease-out-circ), background-color .3s var(--ease-out-circ);
}
.btn .btn-text { position: relative; display: inline-flex; align-items: center; }
.btn .btn-text::before {             /* the 54px rule */
  content: '';
  display: inline-block;
  width: 54px;
  height: 2px;
  margin-right: 10px;
  background: var(--black);
  transition: width .4s var(--ease-out-circ), background-color .3s var(--ease-out-circ);
}
.btn:hover .btn-text::before { width: 74px; }
.btn:hover::before { transform: translateY(-50%) scale(1.08); }

.btn--light { color: var(--white); }
.btn--light .btn-text::before { background: var(--white); }
.btn--light:hover { color: var(--white); }

.btn--bronze::before { background: var(--bronze); }

/* --------------------------------------------------------------------------
   6. Decorative dividers — thin rule with 6px diamonds at the ends
   -------------------------------------------------------------------------- */
.divider-v {
  position: relative;
  width: 1px;
  align-self: stretch;
  min-height: 190px;
  background: rgba(141, 141, 142, 0.91);
}
.divider-v::before,
.divider-v::after {
  content: '';
  position: absolute;
  left: -3px;
  width: 6px;
  height: 6px;
  background: var(--gray);
  transform: rotate(45deg);
}
.divider-v::before { top: 0; }
.divider-v::after  { bottom: 0; }

.divider-v--green { background: var(--green); }
.divider-v--green::before,
.divider-v--green::after { background: var(--green); }

/* Left rule used beside the secondary About / Career paragraph */
.rule-left {
  position: relative;
  padding-left: 22px;
}
.rule-left::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--green);
}
.rule-left::after {
  content: '';
  position: absolute;
  left: -2.5px; bottom: 1px;
  width: 6px; height: 6px;
  background: var(--green);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: transparent;
  transition: background-color .4s var(--ease-out-circ), box-shadow .4s var(--ease-out-circ);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height .4s var(--ease-out-circ);
}
.site-header.is-sticky {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07);
}
.site-header.is-sticky .container { height: var(--header-h-sticky); }

/* Logo */
.site-logo { display: block; max-width: 190px; }
.site-logo img { max-height: 105px; width: auto; transition: max-height .4s var(--ease-out-circ); }
.site-header.is-sticky .site-logo img { max-height: 62px; }

.logo-light { display: block; }
.logo-dark  { display: none; }
/* Inner pages (and the sticky state) use the dark crest on white. */
.site-header.is-sticky .logo-light,
body.header-dark .site-header:not(.is-sticky) .logo-light { display: none; }
.site-header.is-sticky .logo-dark,
body.header-dark .site-header:not(.is-sticky) .logo-dark { display: block; }

/* Navigation */
.site-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
}
.nav-list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  text-transform: capitalize;
  color: var(--gray);
  padding: 6px 0;
  transition: color .3s var(--ease-out-circ);
}
.nav-list a:hover,
.nav-list a:focus-visible { color: var(--white); }
body.header-dark .nav-list a:hover,
.site-header.is-sticky .nav-list a:hover { color: var(--black); }

.nav-list .is-current > a {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 5px;
}
body.header-dark .nav-list .is-current > a,
.site-header.is-sticky .nav-list .is-current > a { color: var(--black); }

/* Dropdown */
.nav-item-has-children { position: relative; }
.nav-toggle-sub {
  display: inline-block;
  margin-left: 6px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  padding: 2.5px;
  transform: translateY(-2px) rotate(45deg);
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 170px;
  padding: 10px 0;
  list-style: none;
  background: var(--white);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out-circ), transform .3s var(--ease-out-circ), visibility .3s;
}
.nav-item-has-children:hover .sub-menu,
.nav-item-has-children:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.sub-menu a {
  display: block;
  padding: 9px 22px;
  color: var(--black);
  font-size: 15px;
}
.sub-menu a:hover { color: var(--green); background: #fafafa; }

/* Search button */
.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--bronze);
  color: var(--white);
  cursor: pointer;
  transition: background-color .3s var(--ease-out-circ);
}
.search-btn:hover { background: var(--green); }
.search-btn svg { width: 17px; height: 17px; }

/* Burger (mobile) */
.burger {
  display: none;
  width: 30px;
  height: 22px;
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: transform .35s var(--ease-out-circ), opacity .2s linear, background-color .3s;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 20px; }
body.header-dark .burger span,
.site-header.is-sticky .burger span { background: var(--black); }
.burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out-circ), visibility .35s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay form {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(680px, 88vw);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 14px;
}
.search-overlay input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 34px;
  padding: 8px 0;
}
.search-overlay input::placeholder { color: rgba(255, 255, 255, 0.45); }
.search-overlay input:focus { outline: none; }
.search-overlay button {
  background: none; border: 0; color: var(--white); cursor: pointer;
}
.panel-close {
  position: absolute;
  top: 34px; right: 40px;
  width: 42px; height: 42px;
  border: 0; background: none; cursor: pointer;
}
.panel-close::before,
.panel-close::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 2px;
  background: var(--white);
}
.panel-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.panel-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 1070px;
  padding: var(--header-h) var(--gutter) 0;
  background: #111 url('../images/hero-bg.jpg') center center / cover no-repeat;
  /* Serve the smaller WebP where the browser supports it. */
  background-image: image-set(url('../images/hero-bg.webp') type('image/webp'),
                              url('../images/hero-bg.jpg') type('image/jpeg'));
  overflow: hidden;
}
.hero::before {                       /* --overlay-opacity: 0.66 on black */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.66;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  padding-bottom: 90px;
}
.hero-copy { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

.hero-title {
  font-size: 200px;
  font-weight: 700;
  line-height: 0.78em;
  margin: 0 0 40px;
  letter-spacing: 0;
}
.hero-lead {
  max-width: 768px;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--text-on-dark);
  margin: 0 0 42px;
}
.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 26px;
  padding-bottom: 4px;
}
.hero-aside .divider-v { min-height: 300px; margin-inline: auto; }

.social-list {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.85);
  transition: color .3s var(--ease-out-circ), transform .3s var(--ease-out-circ);
}
.social-list a:hover { color: var(--white); transform: translateY(-3px); }
.social-list svg { width: 15px; height: 15px; fill: currentColor; }

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */
.about { position: relative; padding: 145px 0 130px; overflow-x: clip; }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 48px;
  align-items: start;
}
.about-copy { max-width: 916px; }

/* The faint outsized circle that sits behind the About artwork */
.circle-mark {
  position: absolute;
  top: -140px;
  right: -280px;
  width: 1180px;
  max-width: none;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.about .container,
.about-grid { position: relative; z-index: 1; }
.about .circle-mark { top: -331px; right: -254px; width: 688px; }

.about-lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--text);
  max-width: 632px;
  margin: 0 0 35px;
}
.about-lead .highlight {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-body {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--text);
  max-width: 566px;
  margin: 0;
}
.about-media { position: relative; padding-top: 68px; }
.about-media img { width: 100%; }

/* -------------------------------------------------------------------------
   10. Career
   ------------------------------------------------------------------------- */
.career { padding: 40px 0 130px; }
.career-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.career-lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  max-width: 470px;
  margin: 0 0 46px;
}

/* Accordion ---------------------------------------------------------------- */
.accordion { border: 0; }
.accordion-item + .accordion-item { margin-top: 4px; }

.accordion-header { margin: 0; }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 18px 26px 18px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 400;
  color: var(--black);
  transition: color .3s var(--ease-out-circ), padding .35s var(--ease-out-circ), background-color .35s var(--ease-out-circ);
}
.accordion-trigger .chevron {
  flex: none;
  width: 12px; height: 12px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .35s var(--ease-out-circ), border-color .3s var(--ease-out-circ);
}
.accordion-item.is-open .accordion-trigger {
  background: var(--green);
  color: var(--white);
  padding-inline: 26px;
}
.accordion-item.is-open .accordion-trigger .chevron {
  border-color: var(--white);
  transform: rotate(-135deg) translate(-3px, -3px);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--green);
  color: rgba(255, 255, 255, 0.9);
  transition: grid-template-rows .4s var(--ease-out-circ);
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p {
  margin: 0;
  padding: 0 26px 26px;
  font-size: 15px;
  line-height: 24px;
}

/* -------------------------------------------------------------------------
   11. Contact
   ------------------------------------------------------------------------- */
.contact { padding: 40px 0 120px; }
.contact-top {
  display: flex;
  align-items: stretch;
  gap: 50px;
  margin-bottom: 60px;
}
.contact-top .section-head { flex: 1 1 40%; }
.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 24%;
  font-size: 14px;
  line-height: 22px;
}
.contact-detail .pin { flex: none; width: 22px; height: 22px; fill: var(--green); }
.contact-detail p { margin: 0; }
.contact-detail .label { color: var(--green); font-weight: 700; }
.contact-detail a { color: var(--text); }
.contact-detail a:hover { color: var(--green); }

/* Forms -------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }

.form-field > label {
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.form-hint { font-size: 12px; color: var(--text-muted); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3em;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 15px 18px;
  transition: border-color .3s var(--ease-out-circ), background-color .3s var(--ease-out-circ);
}
textarea { min-height: 175px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--text-muted); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
  padding-right: 44px;
}

/* Bordered field variant used on the Apply form */
.form--bordered input[type="text"],
.form--bordered input[type="email"],
.form--bordered input[type="tel"],
.form--bordered input[type="date"],
.form--bordered select,
.form--bordered textarea {
  background: var(--white);
  border: 1px solid #d8d8d8;
}
.form--bordered input:focus,
.form--bordered select:focus,
.form--bordered textarea:focus { border-color: var(--green); }

/* Consent checkbox */
.form-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text);
}
.form-consent input { margin-top: 4px; accent-color: var(--green); flex: none; }

.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.form-actions--left { justify-content: flex-start; }

/* Form feedback */
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 18px;
  font-size: 14px;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: rgba(0, 91, 35, 0.09); color: var(--green); }
.form-status.is-error   { background: rgba(190, 30, 30, 0.08); color: #a01c1c; }

.field-error { font-size: 12px; color: #a01c1c; }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: #a01c1c; }

/* Honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   12. Inner page hero (Apply / Privacy / Terms / 404)
   ------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding: calc(var(--header-h) + 30px) 0 20px;
  /* Clip sideways only: the ring sweeps down past this section as it does on
     the source site, but must never widen the page. */
  overflow-x: clip;
}
.page-head .circle-mark {
  top: -591px;
  right: -597px;
  width: 1378px;
  opacity: 1;
}
.page-head .container { position: relative; z-index: 1; }
.page-body { position: relative; z-index: 1; }
.page-head .eyebrow { font-size: 120px; line-height: 1em; letter-spacing: -3.1px; }
.page-head .section-title { top: -24px; margin-bottom: -16px; max-width: 640px; }

.page-body { padding: 40px 0 110px; }

/* Long-form legal copy */
.legal-copy { max-width: 1250px; }
.legal-copy p {
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  margin: 0 0 20px;
}
.legal-copy a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.legal-copy ol { margin: 0 0 20px; padding-left: 22px; }
.legal-copy li { font-size: 16px; line-height: 26px; margin-bottom: 6px; }

/* -------------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.55);
  padding: 70px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 46px;
}
.footer-brand img { max-width: 160px; margin-bottom: 26px; }
.footer-col h2 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 30px;
}
.footer-col p {
  font-size: 13px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 260px;
  margin: 0;
}
.footer-links { list-style: none; }
.footer-links li + li { margin-top: 14px; }
.footer-links a {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.footer-links a:hover { color: var(--white); }

.site-footer .social-list a { color: rgba(255, 255, 255, 0.7); }
.site-footer .social-list a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.5); }
.footer-bottom a:hover { color: var(--white); }
.footer-bottom p { margin: 0; }

/* -------------------------------------------------------------------------
   14. Back to top
   ------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--green);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .35s var(--ease-out-circ), transform .35s var(--ease-out-circ), visibility .35s, background-color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--bronze); }
.to-top span {
  width: 10px; height: 10px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg) translate(-2px, 2px);
}

/* -------------------------------------------------------------------------
   15. Scroll-reveal animations (mirrors the theme's appear-watch behaviour)
   ------------------------------------------------------------------------- */
/* Elements only start hidden once JS has confirmed it can reveal them, so the
   page stays fully readable with JS disabled or if the observer never fires. */
.js-anim [data-animate] {
  opacity: 0;
  transition: opacity 2000ms var(--ease-out-quad), transform 2000ms var(--ease-out-quad);
  will-change: opacity, transform;
}
.js-anim [data-animate="fade-in-up"]    { transform: translateY(45px); }
.js-anim [data-animate="fade-in-left"]  { transform: translateX(-45px); }
.js-anim [data-animate="fade-in-right"] { transform: translateX(45px); }
/* The wipe reveal uses a sliding overlay rather than an animated clip-path:
   transforms composite reliably, clip-path transitions do not everywhere. */
.js-anim [data-animate="mask-from-left"] {
  opacity: 1;
  position: relative;
  overflow: hidden;
  transition: none;
}
.js-anim [data-animate="mask-from-left"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--white);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1400ms var(--ease-out-circ);
}
.js-anim [data-animate="mask-from-left"].is-visible::after { transform: scaleX(0); }

.js-anim [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------
   16. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .hero-title { font-size: 160px; }
  .eyebrow { font-size: 82px; }
}

@media (max-width: 1200px) {
  .hero { min-height: 860px; }
  .hero-title { font-size: 130px; margin-bottom: 46px; }
  .section-title { font-size: 44px; }
  .about-grid, .career-grid { gap: 44px; }
}

@media (max-width: 1024px) {
  :root { --gutter: 26px; }

  .burger { display: block; }
  .site-nav {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease-out-circ), visibility .35s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; gap: 22px; text-align: center; }
  .nav-list a,
  .nav-list .is-current > a { color: var(--white); font-size: 22px; }
  body.header-dark .nav-list a,
  body.header-dark .nav-list .is-current > a { color: var(--white); }
  .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    box-shadow: none;
    padding: 12px 0 0;
  }
  .sub-menu a { color: rgba(255, 255, 255, 0.7); font-size: 17px; }
  .nav-toggle-sub { display: none; }

  .hero-title { font-size: 120px; }
  .eyebrow { font-size: 70px; }
  .section-head .section-title { top: -56px; margin-bottom: -36px; }
  .section-title { font-size: 35px; line-height: 42px; }

  .about-grid, .career-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .circle-mark { width: 700px; right: -240px; }

  .contact-top { flex-wrap: wrap; gap: 30px; }
  .contact-top .section-head { flex: 1 1 100%; }
  .contact-top .divider-v { display: none; }
  .contact-detail { flex: 1 1 260px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .page-head .eyebrow { font-size: 82px; line-height: 1em; }
  .page-head .section-title { top: -18px; margin-bottom: -12px; }
}

@media (max-width: 767px) {
  .section, .about { padding: 70px 0; }
  .career, .contact { padding: 20px 0 70px; }

  .hero { min-height: 640px; padding-top: 90px; }
  .hero-inner { flex-direction: column; align-items: flex-start; padding-bottom: 56px; }
  .hero-title { font-size: 76px; letter-spacing: 0; margin-bottom: 34px; }
  .hero-lead { font-size: 15px; margin-bottom: 34px; }
  .hero-aside { flex-direction: row; align-items: center; width: 100%; justify-content: flex-start; }
  .hero-aside .divider-v { display: none; }

  .eyebrow { font-size: 57px; }
  .section-head .section-title { top: -38px; margin-bottom: -24px; }
  .section-title { font-size: 31px; line-height: 1.25em; }

  .about-lead, .about-body, .career-lead, .legal-copy p, .legal-copy li { font-size: 14px; line-height: 22px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions { justify-content: flex-start; }

  .accordion-trigger { font-size: 18px; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { gap: 12px; }

  .page-head .eyebrow { font-size: 54px; }
  .page-head { padding-top: calc(var(--header-h-sticky) + 40px); }

  .to-top { right: 16px; bottom: 16px; }
}

/* -------------------------------------------------------------------------
   17. Motion & print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-anim [data-animate] { opacity: 1; transform: none; }
  .js-anim [data-animate="mask-from-left"]::after { display: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .search-overlay,
  .hero-aside, .circle-mark, .form-actions { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .hero { min-height: auto; background: none; padding: 0; }
  .hero::before { display: none; }
  .hero-title, .outline-title { color: #000; -webkit-text-stroke-width: 0; }
  a { color: #000; text-decoration: underline; }
  .accordion-panel { grid-template-rows: 1fr !important; background: none; color: #000; }
  .section, .about, .career, .contact, .page-body { padding: 12pt 0; }
}