/* =============================================================================
   Armko Industries — design system implementation (mockup 2)
   Source of truth: docs/design-system.md + mockups/armko-mockup-2.html
   Loaded by functions.php as 'armko-style' after Divi's stylesheet.

   Scope rule: everything is scoped to an .armko-* class emitted by the page
   generator (work/divi.js) so we never fight Divi globally. The only global
   rules are the sharp-corner guarantee and the type scale.
   ============================================================================= */

:root {
  --primary: #212138;
  --primary-dark: #16162A;
  --primary-mid: #2C2C4A;
  --primary-tint: rgba(33, 33, 56, .06);
  --gold: #fdbf30;
  --gold-dark: #E5AA20;
  --gold-light: #FDD060;
  /* Text-only gold. #E5AA20 measures 2.08:1 on white — a WCAG AA failure at any
     size. This darker gold is 4.6:1 and is used for ALL gold TEXT on light
     backgrounds (eyebrows, card numerals, chips, team roles, meta links).
     #E5AA20/#fdbf30 remain the fills, rules, borders and dark-background text. */
  --gold-text: #8A6410;
  --gold-tint: rgba(253, 191, 48, .1);
  --white: #FFFFFF;
  --offwhite: #F7F8FA;
  --light-gray: #EDEEF2;
  --border: #DDDFE6;
  --mid-gray: #9295A5;
  --dark-gray: #4A4D62;
  --muted: #6A6E82;
}

/* ---------- 1. Foundations -------------------------------------------------- */

body,
body.et-db #et-boc .et-l,
.et_pb_module {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  color: var(--primary);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Sharp corners everywhere — the design has NO border radius at all. */
.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module,
.et_pb_button, .et_pb_image img, .et_pb_team_member_image img,
input, select, textarea, button,
.wpforms-container input, .wpforms-container select, .wpforms-container textarea,
.wpforms-container, .wpforms-container button, .wpforms-submit {
  border-radius: 0 !important;
}

/* Divi likes to add its own drop shadows; the design specifies only two. */
.et_pb_section, .et_pb_row { box-shadow: none; }

/* ---------- 1b. Focus visibility (WCAG 2.4.7 / 1.4.11) --------------------- */
/* Nothing on this site had a focus ring: Divi ships none and our own form rules
   used `outline: none !important` with no replacement, making the site
   un-navigable by keyboard. On light backgrounds a gold ring alone is only
   1.66:1, so gold is paired with a navy ring to clear the 3:1 requirement for
   non-text indicators. On dark backgrounds gold-light alone is well past 3:1. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--gold-tint);
}
.armko-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
#main-footer :where(a, button):focus-visible {
  outline: 2px solid var(--gold-light);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35);
}

/* Form fields need explicit element selectors, NOT :where().
   `:where()` contributes zero specificity, so `.armko-form-panel .wpforms-form
   :where(input):focus-visible` scores (0,3,0) and lost to WPForms'
   `…input:focus { outline: none !important }` at (0,3,1) — measured: 8 of 22
   focusable elements on /contact/ still had no ring after the first attempt.
   The suppression has since been removed too, but these stay explicit so a
   future plugin update can't win the same fight. */
.armko-form-panel .wpforms-form input:focus-visible,
.armko-form-panel .wpforms-form select:focus-visible,
.armko-form-panel .wpforms-form textarea:focus-visible,
.armko-form-panel .wpforms-form button:focus-visible {
  outline: 2px solid var(--gold-light) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35) !important;
}
.armko-form-light .wpforms-form input:focus-visible,
.armko-form-light .wpforms-form select:focus-visible,
.armko-form-light .wpforms-form textarea:focus-visible,
.armko-form-light .wpforms-form button:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--gold-tint) !important;
}

/* Skip link — the first Tab stop was the logo, with no way past the nav. */
.armko-skip-link {
  position: absolute;
  left: 6px; top: 6px;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--white) !important;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.armko-skip-link:focus { transform: translateY(0); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--primary);
  padding-bottom: 0;
}

/* ---------- 2. Type scale (clamp() — Divi can't express fluid type) --------- */

.armko-h1 h1, .armko-h1 h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  color: var(--primary) !important;
}
.armko-h1 .gold { color: var(--gold-text) !important; }

.armko-h2 h1, .armko-h2 h2, .armko-h2 h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

/* Section eyebrow / tag */
.armko-tag,
.armko-tag p {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase;
  color: var(--gold-text) !important;
  margin-bottom: 12px;
  line-height: 1.4 !important;
}
.armko-tag { margin-bottom: 12px !important; }
/* On dark bands the brighter gold is correct and passes comfortably. */
.armko-dark .armko-tag,
.armko-dark .armko-tag p { color: var(--gold) !important; }

/* Lead paragraph */
.armko-lead,
.armko-lead p {
  font-size: 16px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
}
.armko-lead { max-width: 560px; }

/* Section headers are left-aligned sitewide (approved 2026-08-05). Divi writes an
   explicit per-module text-align, so an inherited rule loses — these have to be
   stated at module level with !important to hold. */
.armko-section-head .armko-tag, .armko-section-head .armko-tag p,
.armko-section-head .armko-lead, .armko-section-head .armko-lead p,
.armko-section-head .armko-h2 h1, .armko-section-head .armko-h2 h2,
.armko-cta-row .armko-h2 h2, .armko-cta-row .armko-lead, .armko-cta-row .armko-lead p {
  text-align: left !important;
}
.armko-section-head .armko-lead, .armko-cta-row .armko-lead { margin-left: 0; margin-right: 0; }

/* Body copy inside a split (slightly larger than card copy) */
.armko-body p { font-size: 16px !important; color: var(--muted) !important; line-height: 1.75 !important; }

/* ---------- 3. Buttons ----------------------------------------------------- */
/* Divi does not emit button padding from JSON attrs, so it lives here.
 *
 * BUTTON TEXT IS WHITE, NOT GOLD (client decision, 2026-08-05). The design system
 * and mockup specify "navy bg + gold text"; at button scale that pairing reads
 * muddy, so navy-background buttons now use white text (15.2:1 vs gold's 9.4:1).
 * Applies to .armko-btn, the nav CTA, the skip link and the light-panel form
 * submit. Gold remains the accent everywhere else — eyebrows, badges, chips,
 * rules, footer headings, the nav hover underline, and the gold-filled CTA-band
 * buttons (.armko-btn-gold), which are gold bg + navy text and unchanged.
 * Noted in docs/design-system.md so it isn't "corrected" back. */

.armko-btn .et_pb_button,
.armko-btn.et_pb_button,
a.armko-btn {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border: none !important;
  line-height: 1.4 !important;
  display: inline-block;
  transition: background-color .2s ease, transform .2s ease;
}
.armko-btn .et_pb_button:hover,
.armko-btn.et_pb_button:hover,
a.armko-btn:hover {
  background-color: var(--primary-mid) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  padding: 14px 30px !important;
}
/* Kill Divi's injected arrow glyph on hover. */
.armko-btn .et_pb_button:after,
.armko-btn.et_pb_button:after { display: none !important; content: none !important; }

/* Text link with arrow: "Our Services →"
   `a.armko-btn-link-a` is the real element on the Home hero (an anchor inside a
   text module, not a Divi button). Without it the link fell through to Divi's
   global link colour and rendered gold 16px/500 — off-spec and 2.08:1 on white. */
a.armko-btn-link-a {
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s ease;
}
a.armko-btn-link-a:hover { gap: 10px; color: var(--primary) !important; }

.armko-btn-link .et_pb_button,
.armko-btn-link.et_pb_button {
  background: transparent !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 14px 0 !important;
  border: none !important;
}
.armko-btn-link .et_pb_button:after,
.armko-btn-link.et_pb_button:after {
  display: inline-block !important;
  content: '\2192' !important;
  font-family: inherit !important;
  opacity: 1 !important;
  margin-left: 6px !important;
  transition: margin-left .2s ease;
}
.armko-btn-link .et_pb_button:hover:after { margin-left: 10px !important; }
.armko-btn-link .et_pb_button:hover { background: transparent !important; }

/* Gold button on dark backgrounds */
.armko-btn-gold .et_pb_button {
  background-color: var(--gold) !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border: none !important;
}
.armko-btn-gold .et_pb_button:hover { background-color: var(--gold-light) !important; }
.armko-btn-gold .et_pb_button:after { display: none !important; content: none !important; }

/* ---------- 4. Global header (child theme, not Theme Builder) -------------- */
/* Divi's default #main-header is replaced wholesale via the et_html_main_header
   filter — see inc/armko-header-footer.php for why this isn't a TB layout. */

#main-header.armko-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 0 6%;
  transition: box-shadow .3s ease;
}
#main-header.armko-nav.armko-nav--scrolled { box-shadow: 0 1px 16px rgba(33, 33, 56, .1); }
.admin-bar #main-header.armko-nav { top: 32px; }

.armko-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  max-width: 1560px;
  margin: 0 auto;
}

/* Offset page content below the fixed bar. Divi's JS also sets this from
   data-height-onload; the CSS value keeps it correct before JS runs. */
body.armko-has-fixed-nav #page-container { padding-top: 68px; }

/* Logo lockup: real Armko brand mark + live-text wordmark.
   The mark inherits `color`, so it is navy in the header and white in the footer. */
.armko-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex: 0 0 auto;
  color: var(--primary);
}
.armko-logo__mark {
  width: auto; height: 38px; flex: 0 0 auto;
  display: block;
  transition: color .2s ease;
}
/* Combined: stacked mark + "ARMKO LLC", caps = 1/3 of logo height */
#main-header .armko-logo--combined {
	--armko-logo-h: 76px;
	--armko-txt-ratio: 0.333;           /* cap height ÷ logo height */
	gap: calc(var(--armko-logo-h) * 0.18);
}
#main-header .armko-logo--combined .armko-logo__mark {
	height: var(--armko-logo-h);
}
#main-header .armko-logo--combined .armko-logo__name,
#main-header .armko-logo--combined .armko-logo__tag {
	font-size: calc(var(--armko-logo-h) * var(--armko-txt-ratio) / 0.727); /* Inter cap height */
	line-height: 1;
	letter-spacing: 0.02em;
}
#main-header:has(.armko-logo--combined) .armko-nav__inner {
	min-height: 96px;
}

@media (max-width: 980px) {
	#main-header .armko-logo--combined { --armko-logo-h: 56px; }
	#main-header:has(.armko-logo--combined) .armko-nav__inner { min-height: 76px; }
}
@media (max-width: 600px) {
	#main-header .armko-logo--combined { --armko-logo-h: 48px; }
}

/* Stacked logo variant *//*
#main-header .armko-logo--stacked .armko-logo__mark {
	height: 76px;
}
#main-header:has(.armko-logo--stacked) .armko-nav__inner {
	min-height: 96px;
}
.armko-footer .armko-logo--stacked .armko-logo__mark {
	height: 96px;
}

@media (max-width: 980px) {
	#main-header .armko-logo--stacked .armko-logo__mark { height: 60px; }
	#main-header:has(.armko-logo--stacked) .armko-nav__inner { min-height: 80px; }
}
*/

.armko-logo:hover .armko-logo__mark { color: var(--gold-text); }
.armko-logo__txt { display: flex; flex-direction: row; line-height: 1.15; gap:.3em; white-space:nowrap; }
.armko-logo__name { font-size: 17px; font-weight: 800; color: var(--primary); letter-spacing: .5px; }
.armko-logo__tag { font-size: 17px; font-weight: 800; color: var(--gold-text); letter-spacing: .5px; text-transform: uppercase; }
.armko-logo--dark { color: var(--white); }
.armko-logo--dark .armko-logo__name { color: var(--white); }
.armko-logo--dark .armko-logo__tag { color: var(--gold); }
.armko-logo--dark:hover .armko-logo__mark { color: var(--gold); }

/* Desktop menu */
.armko-nav__menu { display: flex; justify-content: flex-end; flex: 1 1 auto; }
ul.armko-menu {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
ul.armko-menu > li { margin: 0; padding: 0; list-style: none; position: relative; }
ul.armko-menu > li > a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  display: inline-block;
  transition: color .2s ease;
}
ul.armko-menu > li > a:hover { color: var(--primary); }
/* Gold underline scaling in from the left — the mockup's signature hover. */
ul.armko-menu > li > a:before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
ul.armko-menu > li > a:hover:before { transform: scaleX(1); }
ul.armko-menu > li.current-menu-item > a { color: var(--primary); }
ul.armko-menu > li.current-menu-item > a:before { transform: scaleX(1); }

/* Contact styled as a button (menu item CSS class "nav-cta") */
ul.armko-menu > li.nav-cta > a {
  background: var(--primary);
  color: var(--white);
  padding: 9px 20px;
  font-weight: 700;
  transition: background-color .2s ease;
}
ul.armko-menu > li.nav-cta > a:hover { background: var(--primary-mid); color: var(--white); }
ul.armko-menu > li.nav-cta > a:before { display: none; }

/* Hamburger */
.armko-burger {
  display: none;
  flex-direction: column; gap: 4px;
  background: none; border: none; padding: 6px; cursor: pointer;
}
.armko-burger span { display: block; width: 22px; height: 2px; background: var(--primary); transition: transform .2s ease, opacity .2s ease; }
.armko-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.armko-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.armko-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile panel */
.armko-mobile-panel {
  border-top: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(33, 33, 56, .08);
  margin: 0 -6%;
  padding: 8px 0;
}
.armko-mobile-panel[hidden] { display: none; }
ul.armko-menu-mobile { list-style: none; margin: 0; padding: 0; }
ul.armko-menu-mobile > li { margin: 0; list-style: none; }
ul.armko-menu-mobile > li > a {
  display: block;
  color: var(--muted);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  padding: 14px 6%;
  border-bottom: 1px solid var(--border);
}
ul.armko-menu-mobile > li:last-child > a { border-bottom: none; }
ul.armko-menu-mobile > li.nav-cta > a { color: var(--primary); font-weight: 700; }
ul.armko-menu-mobile > li.current-menu-item > a { color: var(--primary); }

/* ---------- 5. Hero -------------------------------------------------------- */

.armko-hero.et_pb_section { padding: 0 6% !important; }
.armko-hero .et_pb_row { min-height: calc(100vh - 68px); align-items: center; }
.armko-hero .et_pb_column { margin-bottom: 0 !important; }

.armko-eyebrow p,
.armko-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase;
  color: var(--primary) !important;
  margin-bottom: 20px !important;
}
.armko-eyebrow p:before {
  content: ''; width: 32px; height: 3px; background: var(--gold);
  flex: 0 0 32px; display: inline-block;
}

.armko-hero-sub p {
  font-size: 17px !important; color: var(--muted) !important;
  line-height: 1.75 !important; max-width: 480px;
}

/* Hero visual: image + overlapping badge and stat strip.
   The column is the positioning context. The overlay module is taken out of
   flow entirely so the column's height equals the image height — otherwise the
   overlay adds height and pushes the badge below the image. */
.armko-hero-visual { position: relative !important; }
.armko-hero-visual .et_pb_image { margin-bottom: 0 !important; }
.armko-hero-visual .et_pb_image .et_pb_image_wrap { width: 100%; display: block; }
.armko-hero-visual .et_pb_image img {
  width: 100%;
  display: block;
  /* Divi ships height:auto on module images, hence !important. */
  height: 560px !important;
  object-fit: cover;
}

.armko-hero-overlay {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  pointer-events: none;
}
.armko-hero-overlay .et_pb_text_inner { position: static; }
.armko-hero-overlay a { pointer-events: auto; }

/* DEVIATION FROM MOCKUP (intentional): the mockup positions this badge at the
   image's bottom-right, where its own stat strip completely covers it — the
   "40+ Years" badge is invisible in the mockup as authored. Moved to the
   top-right so the proof point actually reads. Logged in BUILD-LOG.md. */
.armko-hero-badge {
  position: absolute; top: 0; right: 0;
  background: var(--gold); padding: 20px 24px; z-index: 3;
}
.armko-hero-badge .big { font-size: 2.2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.armko-hero-badge .small {
  font-size: 10px; font-weight: 700; color: var(--primary);
  letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px;
}

.armko-hero-stats {
  position: absolute; bottom: -20px; left: -20px; right: 20px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--border); z-index: 4;
}
.armko-hero-stats .stat { background: var(--white); padding: 16px 18px; border-top: 3px solid var(--gold); }
.armko-hero-stats .num { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1; }
.armko-hero-stats .lbl {
  font-size: 10px; font-weight: 600; color: var(--muted);
  margin-top: 2px; letter-spacing: .5px; text-transform: uppercase;
}

/* About-split image: same height treatment as the hero. */
.armko-about-img .et_pb_image img { height: 500px !important; }

/* ---------- 6. Regions strip ---------------------------------------------- */

.armko-regions.et_pb_section {
  background: var(--offwhite) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 6% !important;
}
.armko-regions .et_pb_row { padding: 0 !important; }
.armko-regions .et_pb_module { margin-bottom: 0 !important; }
.armko-regions-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0 32px; }
.armko-regions-inner .label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dark-gray); white-space: nowrap;
}
.armko-regions-inner .items { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.armko-regions-inner .items span { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .3px; white-space: nowrap; }

/* ---------- 7. Service card grid (ruled 1px grid + gold underline hover) --- */

.armko-svc-card.et_pb_column {
  background: var(--white);
  transition: background-color .3s ease;
  position: relative;
  overflow: hidden;
}
.armko-svc-card.et_pb_column:after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.armko-svc-card.et_pb_column:hover:after { transform: scaleX(1); }
.armko-svc-card.et_pb_column:hover { background: var(--gold-tint); }
.armko-svc-card .et_pb_module:last-child { margin-bottom: 0 !important; }

.armko-num p {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--gold-text) !important; letter-spacing: 2px !important;
  margin-bottom: 0 !important;
}
.armko-svc-card h3 { font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.armko-svc-card .armko-card-body p { font-size: 13px !important; color: var(--muted) !important; line-height: 1.65 !important; }

/* Tighten module stacking inside cards */
.armko-svc-card .armko-num { margin-bottom: 14px !important; }
.armko-svc-card .armko-card-h { margin-bottom: 9px !important; }

/* ---------- 8. About split ------------------------------------------------- */

.armko-about-img .et_pb_image img { width: 100%; object-fit: cover; display: block; }

/* The column is the positioning context AND must hug the image rather than
   stretching to match a taller sibling column — otherwise "bottom: 0" on the
   badge resolves to the bottom of the stretched column, not the image. */
.armko-about-visual {
  position: relative !important;
  align-self: flex-start;
}
.armko-about-visual .et_pb_image { margin-bottom: 0 !important; line-height: 0; }

/* Overlay module taken out of flow, same reasoning as the hero. Targeted by an
   explicit class — :last-child is unreliable because Divi can append nodes. */
.armko-overlay {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  pointer-events: none;
}
/* Divi's .et_pb_text_inner is position:relative and collapses to zero height
   when its only child is absolutely positioned — which makes IT the badge's
   containing block, pinning the badge above the image instead of inside it.
   Neutralising it hands the containing block back to .armko-overlay. */
.armko-overlay .et_pb_text_inner { position: static; }
.armko-about-badge {
  position: absolute; bottom: 0; right: 0; z-index: 3;
  background: var(--gold); padding: 20px 24px;
}
.armko-about-badge .big { font-size: 2.2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.armko-about-badge .small {
  font-size: 10px; font-weight: 700; color: var(--primary);
  letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px;
}

/* Principle rows: navy icon square + gold stroke icon, hairline border */
.armko-principle {
  display: flex; gap: 16px; padding: 16px;
  border: 1px solid var(--border);
  transition: border-color .2s ease, background-color .2s ease;
  margin-bottom: 20px;
}
.armko-principle:last-child { margin-bottom: 0; }
.armko-principle:hover { border-color: var(--gold); background: var(--gold-tint); }
.armko-principle .ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.armko-principle .ico svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.armko-principle h4 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.armko-principle p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ---------- 9. Dark "Who We Serve" band ----------------------------------- */

.armko-dark.et_pb_section { background: var(--primary) !important; }
.armko-dark .armko-tag p, .armko-dark .armko-tag { color: var(--gold) !important; }
.armko-dark h1, .armko-dark h2, .armko-dark h3 { color: var(--white) !important; }
.armko-dark .armko-lead p { color: rgba(255, 255, 255, .6) !important; }

.armko-serve-card.et_pb_column {
  background: var(--primary);
  transition: background-color .2s ease;
}
.armko-serve-card.et_pb_column:hover { background: var(--primary-mid); }
/* Card index numerals on the dark bands.
   The mockup and design system specified these as "ghost" numerals — gold at 10%
   opacity — as background texture. In practice they were unreadable (1.2:1 on
   navy), so they are now SOLID gold (client decision, 2026-08-05): 9.41:1 on
   navy. Size dropped 3rem -> 1.9rem at the same time, because a 48px solid gold
   numeral out-shouted the 19px white card heading beneath it; at 1.9rem with
   tracking it reads as a deliberate index, consistent with the 11px tracked
   numerals on the light-background service cards. */
.armko-serve-card .armko-ghost-num p {
  font-size: 1.9rem !important; font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
}
.armko-serve-card h3 { font-size: 19px !important; font-weight: 700 !important; color: var(--white) !important; margin-bottom: 10px; }
.armko-serve-card .armko-card-body p { font-size: 14px !important; color: rgba(255, 255, 255, .55) !important; line-height: 1.65 !important; }
.armko-serve-card .et_pb_module:last-child { margin-bottom: 0 !important; }

/* ---------- 10. Education -------------------------------------------------- */

.armko-aia-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--gold); padding: 7px 16px;
  background: var(--gold-tint);
}
.armko-aia-chip span {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold-text);
}
.armko-aia-chip svg { flex: 0 0 16px; }

.armko-checklist { display: flex; flex-direction: column; gap: 11px; }
.armko-checklist .item { display: flex; gap: 10px; align-items: flex-start; }
.armko-checklist .box {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.armko-checklist .box svg { width: 10px; height: 10px; stroke: var(--gold); fill: none; stroke-width: 2.5; }
.armko-checklist p { font-size: 14px; color: var(--primary); line-height: 1.6; margin: 0; }

/* Seminar cards: white, hairline border, 4px gold left border */
.armko-sem-card {
  background: var(--white); padding: 22px;
  border: 1px solid var(--border); border-left: 4px solid var(--gold);
  transition: box-shadow .2s ease;
  margin-bottom: 14px !important;
}
.armko-sem-card:hover { box-shadow: 0 4px 20px rgba(33, 33, 56, .08); }
.armko-sem-card .sem-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-text); background: var(--gold-tint);
  padding: 3px 8px; margin-bottom: 7px;
}
.armko-sem-card h4 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
.armko-sem-card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ---------- 11. Team cards ------------------------------------------------- */

/* NOTE the lack of a space: `armko-team` is emitted ON the .et_pb_team_member
   element, not as an ancestor of it. The original descendant selector
   (`.armko-team .et_pb_team_member`) matched nothing, so the card frame, the
   hover lift and `height: 100%` were all silently dead — 15 borderless floating
   photos with ragged row bottoms. Same trap applies to any module where the
   generator passes `cls`. */
.armko-team.et_pb_team_member {
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
  margin-bottom: 0 !important;
  height: 100%;
  /* Every other card in the system is left-aligned; this was the odd one out. */
  text-align: left;
}
.armko-team.et_pb_team_member:hover { box-shadow: 0 8px 32px rgba(33, 33, 56, .1); transform: translateY(-4px); }
.armko-team .et_pb_team_member_description { text-align: left; }
.armko-team .et_pb_team_member_image { margin: 0 !important; width: 100%; }
.armko-team .et_pb_team_member_image img {
  width: 100%; height: 340px; object-fit: cover; object-position: center top;
  display: block; background: var(--light-gray);
}
.armko-team .et_pb_team_member_description { padding: 16px 18px; }
.armko-team .et_pb_module_header {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--primary) !important; padding-bottom: 2px !important;
}
/* Specificity: the generic `…_description p` rule below is (0,2,1) and was
   beating this at (0,2,0) — both !important — so the role rendered as muted grey
   11px and the card lost its only colour accent. Matching the element selector
   count fixes it without an id or extra !important. */
.armko-team .et_pb_team_member_description p.et_pb_member_position {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--gold-text) !important; margin-bottom: 5px; display: block;
}
.armko-team .et_pb_team_member_description p { font-size: 11px !important; color: var(--muted) !important; line-height: 1.5 !important; }
.armko-team .et_pb_team_member_description p a { color: var(--muted) !important; }
.armko-team .et_pb_team_member_description p a:hover { color: var(--gold-text) !important; }

/* Placeholder portraits (client-supplied silhouette, used where no headshot
   exists). It is a graphic, not a photograph, so it is contained rather than
   cover-cropped — cover-cropping a 3:4 silhouette into the card slices the
   shoulders and reads as a broken image. Sitting it on the light-gray fill
   matches the empty-image treatment in the design system. */
/* The cropped silhouette (170x220) is close enough in aspect to the card's image
   slot that it uses the SAME cover treatment as the real headshots — no special
   framing needed, so placeholder and photo cards are indistinguishable in shape.
   The white background is only a safety net: if the graphic is ever re-cropped to
   an aspect that letterboxes, it letterboxes on white (matching the graphic's own
   background) rather than showing a grey box. */
.armko-team--placeholder .et_pb_team_member_image img {
  background: #FFFFFF;
}

/* ---------- 12. Contact ---------------------------------------------------- */

.armko-office {
  padding: 14px 16px; border: 1px solid var(--border);
  transition: border-color .2s ease; margin-bottom: 10px;
}
.armko-office:last-child { margin-bottom: 0; }
.armko-office:hover { border-color: var(--gold); }
.armko-office h4 { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.armko-office p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.armko-office a { color: var(--muted); text-decoration: none; }
.armko-office a:hover { color: var(--gold-text); }

/* Dark form panel */
.armko-form-panel.et_pb_column { background: var(--primary); padding: 40px !important; }
.armko-form-panel h3, .armko-form-panel h2 {
  font-size: 20px !important; font-weight: 800 !important;
  color: var(--white) !important; margin-bottom: 24px;
}

/* WPForms inside the dark panel */
.armko-form-panel .wpforms-container { margin: 0; }
.armko-form-panel .wpforms-form .wpforms-field { padding: 0 0 12px 0; }
.armko-form-panel .wpforms-form .wpforms-field-label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  color: rgba(255, 255, 255, .5) !important; margin-bottom: 5px !important;
}
.armko-form-panel .wpforms-form .wpforms-required-label { color: var(--gold) !important; }
/* WPForms' First/Last sublabels default to rgba(0,0,0,.55) — black on navy, a
   measured 1.15:1 and effectively invisible. They also rendered at 14px, LARGER
   than the 10px field label above them, inverting the hierarchy. */
.armko-form-panel .wpforms-form .wpforms-field-sublabel {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.armko-form-light .wpforms-form .wpforms-field-sublabel {
  color: var(--dark-gray) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* Light-panel inputs: --border on white measured ~1.2:1, below the 3:1 required
   for non-text UI boundaries. */
.armko-form-light .wpforms-form input[type=text],
.armko-form-light .wpforms-form input[type=email],
.armko-form-light .wpforms-form input[type=tel],
.armko-form-light .wpforms-form select,
.armko-form-light .wpforms-form textarea { border-color: var(--dark-gray) !important; }
.armko-form-panel .wpforms-form input[type=text],
.armko-form-panel .wpforms-form input[type=email],
.armko-form-panel .wpforms-form input[type=tel],
.armko-form-panel .wpforms-form select,
.armko-form-panel .wpforms-form textarea {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  padding: 10px 13px !important;
  color: var(--white) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  transition: border-color .2s ease;
}
.armko-form-panel .wpforms-form input:focus,
.armko-form-panel .wpforms-form select:focus,
.armko-form-panel .wpforms-form textarea:focus { border-color: var(--gold) !important; }
.armko-form-panel .wpforms-form input::placeholder,
.armko-form-panel .wpforms-form textarea::placeholder { color: rgba(255, 255, 255, .5) !important; }
.armko-form-panel .wpforms-form select option { background: var(--primary) !important; color: var(--white); }
.armko-form-panel .wpforms-form textarea { height: 100px; resize: vertical; }
.armko-form-panel .wpforms-form button[type=submit] {
  background: var(--gold) !important;
  color: var(--primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important; font-weight: 700 !important;
  padding: 14px 30px !important;
  border: none !important; width: 100%;
  transition: background-color .2s ease;
}
.armko-form-panel .wpforms-form button[type=submit]:hover { background: var(--gold-light) !important; }
/* Two-up field rows */
.armko-form-panel .wpforms-form .wpforms-one-half { width: 48.5% !important; margin-left: 3% !important; }
.armko-form-panel .wpforms-form .wpforms-one-half.wpforms-first { margin-left: 0 !important; }
.armko-form-panel .wpforms-confirmation-container-full,
.armko-form-panel .wpforms-confirmation-container {
  background: rgba(253, 191, 48, .12) !important;
  border: 1px solid var(--gold) !important;
  color: var(--white) !important;
}
.armko-form-panel .wpforms-confirmation-container p { color: var(--white) !important; }
div.wpforms-container-full .wpforms-confirmation-container-full p, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) p { color: var(--white) !important; }
/* Light-panel form (education page) */
.armko-form-light .wpforms-form .wpforms-field-label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  color: var(--mid-gray) !important;
}
.armko-form-light .wpforms-form input[type=text],
.armko-form-light .wpforms-form input[type=email],
.armko-form-light .wpforms-form input[type=tel],
.armko-form-light .wpforms-form select,
.armko-form-light .wpforms-form textarea {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 13px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
.armko-form-light .wpforms-form input:focus,
.armko-form-light .wpforms-form select:focus,
.armko-form-light .wpforms-form textarea:focus { border-color: var(--gold) !important; }
.armko-form-light .wpforms-form button[type=submit] {
  background: var(--primary) !important; color: var(--white) !important;
  font-size: 14px !important; font-weight: 700 !important;
  padding: 14px 30px !important; border: none !important;
  font-family: 'Inter', sans-serif !important;
}
.armko-form-light .wpforms-form button[type=submit]:hover { background: var(--primary-mid) !important; }

/* Association logos. The 460x45 strip holds four lockups — cefpi, IIBEC, CSI,
   TASA — and three of them are WHITE artwork on transparent, which is why the row
   looked like a failed image load on the offwhite section (only IIBEC reads, and
   only because it carries its own white box). Verified by compositing the file
   over each candidate background: on navy all four read clearly.
   So it sits on a navy block at full opacity rather than being hidden. */
.armko-logos { display: block !important; margin-top: 22px !important; }
.armko-logos .et_pb_text_inner { line-height: 0; }
.armko-logos-inner {
  display: inline-block;
  background: var(--primary);
  padding: 14px 20px;
}
.armko-logos-inner img {
  display: block;
  width: 100%;
  max-width: 360px;
  opacity: 1;
}

/* ---------- 13. Blog / Insights ------------------------------------------- */

.armko-blog .et_pb_post {
  border: 1px solid var(--border);
  padding: 0 0 20px 0;
  margin-bottom: 0 !important;
  background: var(--white);
  transition: box-shadow .3s ease, transform .3s ease;
}
.armko-blog .et_pb_post:hover { box-shadow: 0 8px 32px rgba(33, 33, 56, .1); transform: translateY(-4px); }
/* `.et_pb_image_container` does not exist in Divi 5's blog markup, so the old
   crop rule was dead and images rendered at source aspect — measured card heights
   of 553 / 397 / 553px in a single row. Target the image itself and use
   aspect-ratio, which survives the 3-up / 2-up / 1-up steps without a fixed height. */
/* Divi's blog module renders posts as a full-width stack here rather than a grid,
   so the (now correct) 16:10 crop produced 922px-tall cards. Laying the post
   container out as a CSS grid restores the 3-up / 2-up / 1-up rhythm every other
   collection on the site uses. Applied alongside the crop fix because the crop
   alone made the page longer, not better. */
/* The grid must go on .et_pb_blog_posts — the actual parent of the <article>
   elements. Verified DOM: .et_pb_blog > .et_pb_ajax_pagination_container >
   .et_pb_blog_posts > article.et_pb_post. Putting it on the pagination container
   (which holds the posts wrapper PLUS the pagination nav) produced a 3-column grid
   with 2 children, stacking every post in column one. */
.armko-blog .et_pb_blog_posts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.armko-blog .et_pb_post { width: 100% !important; margin: 0 !important; float: none !important; }
.armko-blog .et_pb_post > a:first-child { display: block; margin: 0 0 18px 0; line-height: 0; }
.armko-blog .et_pb_post img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
}
.armko-blog .entry-title { padding: 0 22px 8px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.armko-blog .entry-title a { color: var(--primary) !important; }
.armko-blog .entry-title a:hover { color: var(--gold-text) !important; }
.armko-blog .post-meta {
  padding: 0 22px 8px !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mid-gray) !important;
}
.armko-blog .post-meta a { color: var(--gold-text) !important; font-weight: 700; }
.armko-blog .post-content { padding: 0 22px !important; }
.armko-blog .post-content p { font-size: 13px !important; color: var(--muted) !important; line-height: 1.65 !important; }
.armko-blog .post-content .more-link {
  font-size: 12px; font-weight: 700; color: var(--primary);
  letter-spacing: .5px; text-transform: uppercase;
}
.armko-blog .post-content .more-link:hover { color: var(--gold-text); }
.armko-blog .et_pb_no_thumb .entry-title { padding-top: 22px !important; }

/* Single post readability */
.armko-post-body p { font-size: 17px; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }
.armko-post-body h2 { font-size: 26px; font-weight: 800; margin: 36px 0 14px; letter-spacing: -.02em; }
.armko-post-body h3 { font-size: 19px; font-weight: 700; margin: 28px 0 10px; }
.armko-post-body ul { margin: 0 0 22px 0; padding-left: 20px; }
.armko-post-body li { font-size: 17px; color: var(--muted); line-height: 1.8; margin-bottom: 8px; }
.armko-post-body strong { color: var(--primary); }

/* ---------- 14. Global footer (child theme) ------------------------------- */

#main-footer.armko-footer {
  background: var(--primary-dark);
  padding: 52px 6% 26px;
  border: none;
}
.armko-footer__inner { max-width: 1560px; margin: 0 auto; }
.armko-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.armko-footer__brand p {
  font-size: 13px; color: rgba(255, 255, 255, .58);
  line-height: 1.7; margin-top: 12px; max-width: 240px;
}
.armko-footer__col h4 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px; padding-bottom: 0;
}
.armko-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.armko-footer__col ul li { list-style: none; }
.armko-footer__col ul li a { color: rgba(255, 255, 255, .62); text-decoration: none; font-size: 13px; transition: color .2s ease; }
.armko-footer__col ul li a:hover { color: var(--white); }
.armko-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.armko-footer__bottom p { font-size: 12px; color: rgba(255, 255, 255, .55); margin: 0; }

/* ---------- 14b. Interior page hero -------------------------------------- */

.armko-page-hero .armko-lead p { color: rgba(255, 255, 255, .6) !important; max-width: 640px; }
.armko-page-hero .armko-h1 h1 { max-width: 900px; }

/* ---------- 14c. Process steps (Services) -------------------------------- */

ol.armko-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border); }
.armko-step {
  list-style: none;
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--white);
  padding: 28px 32px;
  transition: background-color .25s ease;
}
.armko-step:hover { background: var(--gold-tint); }
.armko-step__num {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: var(--gold-text); flex: 0 0 40px; padding-top: 3px;
}
.armko-step__body h3 { font-size: 17px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
.armko-step__body p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; max-width: 820px; }

/* ---------- 14d. Technology grid (Services, dark) ------------------------ */

.armko-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); }
.armko-tech-item { background: var(--primary); padding: 32px 28px; transition: background-color .2s ease; }
.armko-tech-item:hover { background: var(--primary-mid); }
.armko-tech-item h3 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.armko-tech-item p { font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.65; margin: 0; }
.armko-tech-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Forward-looking capabilities, held visually apart from the in-service methods
   above so the page never implies they are available today. */
.armko-tech-planned { margin-top: 34px !important; }
.armko-tech-planned .armko-tech-grid {
  grid-template-columns: repeat(2, 1fr);
  /* dashed cards, so no hairline-gap background and a real gap instead */
  background: transparent;
  gap: 14px;
}
.armko-tech-planned__label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase;
  color: var(--gold) !important;
  margin: 0 0 12px !important;
  display: flex; align-items: center; gap: 10px;
}
.armko-tech-planned__label:after {
  content: ''; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .12);
}
.armko-tech-item--planned { background: transparent; border: 1px dashed rgba(255, 255, 255, .18); }
.armko-tech-item--planned:hover { background: rgba(255, 255, 255, .03); }
.armko-tech-item--planned h3 { color: rgba(255, 255, 255, .75); }

/* ---------- 14e. Contact page blocks ------------------------------------- */

.armko-offices-h h2 { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 18px; }
.armko-bigcontact { margin: 0 0 4px; }
.armko-bigcontact a { font-size: 26px; font-weight: 800; color: var(--white); text-decoration: none; letter-spacing: -.01em; }
.armko-bigcontact a:hover { color: var(--gold); }
.armko-subcontact { font-size: 14px; color: rgba(255, 255, 255, .55); line-height: 1.7; margin: 0; }
.armko-subcontact a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.armko-subcontact a:hover { color: var(--gold); }

/* Light form card (Education) */
.armko-form-card.et_pb_column { border: 1px solid var(--border); }

/* Provisional-content note */
.armko-note p {
  font-size: 11px !important; color: var(--mid-gray) !important;
  letter-spacing: .3px; margin: 14px 0 0 !important; font-style: italic;
}

/* Button wrappers (kept block-level so wpautop doesn't add a stray <p>) */
.armko-btn-wrap { display: block; }

/* ---------- 14f. HOME DIRECTION 2 — "Cinematic Band" (page /home-2/) -------
 * Review option built from mockups/home-2.html. Everything here is scoped to
 * `armko-d2-*` so it cannot affect the live home page.
 * (Prefix is `d2` for "design 2" — NOT `h2`, which is the type-scale class.)
 * If this direction is approved, promote it onto / and delete the rest.
 * -------------------------------------------------------------------------- */

/* Hero: the section carries the landscape photo as a background; a flat navy
   scrim (not a gradient — the design system forbids those) makes the type
   legible without hiding the roof. */
.armko-d2-hero.et_pb_section { position: relative; }
.armko-d2-hero.et_pb_section:before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(22, 22, 42, .62);
  pointer-events: none;
}
.armko-d2-hero .et_pb_row { position: relative; z-index: 2; }
.armko-d2-hero .armko-d2-eyebrow p { color: #fff !important; }
.armko-d2-hero .armko-d2-eyebrow p:before { background: var(--gold); }
.armko-d2-h1 h1 { color: #fff !important; }
.armko-d2-h1 .gold { color: var(--gold) !important; }
.armko-d2-sub p {
  font-size: 16.5px !important;
  color: rgba(255, 255, 255, .82) !important;
  line-height: 1.7 !important;
  max-width: 580px;
}
.armko-d2-actions-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Light button reads on the photo where navy-on-navy-scrim would not. */
a.armko-d2-btn-light {
  background: #fff; color: var(--primary);
  font-size: 14px; font-weight: 700; padding: 14px 30px;
  display: inline-block; transition: background .2s ease, transform .2s ease;
}
a.armko-d2-btn-light:hover { background: var(--offwhite); color: var(--primary); transform: translateY(-2px); }
a.armko-d2-btn-ghost {
  color: #fff; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s ease;
}
a.armko-d2-btn-ghost:hover { gap: 10px; color: #fff; }

/* Proof band: gold top rule + ruled cells, sits directly under the hero so the
   four numbers clear the fold on a 1440x800 laptop. */
.armko-d2-proof.et_pb_section { border-top: 3px solid var(--gold); }
.armko-d2-num p {
  font-size: 2.1rem !important; font-weight: 800 !important;
  color: var(--gold) !important; line-height: 1 !important;
  margin-bottom: 0 !important;
}
.armko-d2-lbl p {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 1.6px !important; text-transform: uppercase;
  color: rgba(255, 255, 255, .62) !important;
  margin: 6px 0 0 !important; line-height: 1.4 !important;
}
.armko-d2-cell.et_pb_column:not(:first-child) { padding-left: 32px !important; }

/* Full-bleed letterbox band — the whole point of this direction. 1744x410 is
   4.25:1, so at full width the natural height is ~340px. No cropping. */
.armko-d2-bandsec.et_pb_section { padding: 0 !important; }
.armko-d2-bandsec .et_pb_row { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.armko-d2-bandsec .et_pb_column { padding: 0 !important; margin-bottom: 0 !important; }
.armko-d2-band { margin-bottom: 0 !important; line-height: 0; }
.armko-d2-band .et_pb_image_wrap, .armko-d2-band img { width: 100%; display: block; }
/* 23.51vw is the image's own ratio (410/1744), so the whole frame shows up to
   ~1960px wide; below the 240px floor the crop keeps the building (right, low). */
.armko-d2-band img {
  height: clamp(240px, 23.51vw, 460px) !important;
  object-fit: cover;
  object-position: 66% 70%;
}

/* Why Armko: four commitments on a 2x2 grid, each under a navy rule (client PDF). */
.armko-why-h { max-width: 640px; }
.armko-why-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 28px; }
.armko-why-grid .armko-why-item { border-top: 2px solid var(--primary); padding-top: 22px; }
.armko-why-grid .armko-why-item h3 { font-size: 18px; font-weight: 700; color: var(--primary); line-height: 1.3; margin: 0 0 4px; padding: 0; }
.armko-why-grid .armko-why-item p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; padding: 0; }
.armko-why-grid .armko-why-item p.armko-why-sub { font-size: 12px; font-weight: 600; color: var(--gold-text); line-height: 1.4; margin: 0 0 14px; }

/* About + Who We Serve: the audience list sits beside the About copy on hairlines. */
.armko-serve-list .item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.armko-serve-list .item:first-child { padding-top: 6px; }
.armko-serve-list h4 { font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.35; margin: 0 0 4px; padding: 0; }
.armko-serve-list p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; padding: 0; }
.armko-d2-about .armko-btn-wrap { margin-top: 8px; }

/* AIA seminars: the roof photo is the section background under the same flat
   navy scrim as the hero; text sits left, the building shows through right. */
.armko-d2-edu.et_pb_section { position: relative; background-position: 75% 100% !important; }
.armko-d2-edu.et_pb_section:before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(22, 22, 42, .70); /* a touch over the hero's .62: this roof is white */
  pointer-events: none;
}
.armko-d2-edu .et_pb_row { position: relative; z-index: 2; }
.armko-d2-edu .et_pb_column { max-width: 640px; }
.armko-d2-edu .armko-tag, .armko-d2-edu .armko-tag p { color: var(--gold) !important; }
.armko-d2-edu h2 { color: #fff !important; }
.armko-d2-edu .armko-body p { color: #fff !important; }
.armko-d2-edu .armko-aia-chip { background: rgba(229, 170, 32, .12); }
.armko-d2-edu .armko-aia-chip span { color: var(--gold); }
.armko-d2-edu .armko-checklist .box { background: rgba(255, 255, 255, .12); }
.armko-d2-edu .armko-checklist p { color: #fff; }

/* Services grid gets the outer hairline so the ruled figure closes. */
.armko-d2-svc .et_pb_row:not(.armko-section-head) { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.armko-d2-svc .et_pb_row:nth-of-type(2) { border-top: 1px solid var(--border); }
.armko-d2-svc .et_pb_row:nth-of-type(3) { border-bottom: 1px solid var(--border); }

/* CTA row */
.armko-d2-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
a.armko-btn-gold-a {
  background: var(--gold); color: var(--primary);
  font-size: 14px; font-weight: 700; padding: 14px 30px;
  display: inline-block; transition: background .2s ease, transform .2s ease;
}
a.armko-btn-gold-a:hover { background: var(--gold-light); color: var(--primary); transform: translateY(-2px); }

@media (max-width: 980px) {
  .armko-d2-cell.et_pb_column:not(:first-child) { padding-left: 0 !important; }
  .armko-d2-cell.et_pb_column { border-left: none !important; border-top: 1px solid rgba(255,255,255,.14) !important; }
  .armko-d2-svc .et_pb_row:not(.armko-section-head) { border-left: none; border-right: none; }
}
@media (max-width: 767px) {
  .armko-d2-band img { height: 240px !important; }
  .armko-d2-num p { font-size: 1.7rem !important; }
  .armko-why-grid { grid-template-columns: 1fr; row-gap: 24px; }
}

/* ---------- 15. Scroll reveal --------------------------------------------- */

/* Gated on .armko-js so content is NEVER invisible when JS doesn't run
   (no-JS, script error, print, crawlers). Without this gate a broken script
   means a blank page — the failure mode is far worse than a missing animation. */
.armko-js .armko-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.armko-js .armko-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .armko-js .armko-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .armko-btn .et_pb_button:hover, a.armko-btn:hover,
  .armko-team .et_pb_team_member:hover, .armko-blog .et_pb_post:hover { transform: none !important; }
}

/* ---------- 16. Responsive ------------------------------------------------- */
/* Divi 5 front-end CSS is desktop-first, so these are max-width queries. */

@media (max-width: 1100px) {
}

@media (max-width: 980px) {
  /* Nav collapses to the hamburger. */
  .armko-nav__menu { display: none; }
  .armko-burger { display: flex; }
  .armko-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Divi emits `display:flex` on any row that sets vertical column alignment,
     but never adds flex-wrap — so Divi's own `width:100%` mobile rule leaves the
     columns on one non-wrapping line and the page scrolls sideways. Force wrap
     and full-width columns so rows actually stack. */
  .et_pb_row { flex-wrap: wrap !important; }
  .et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Divi stacks columns at 980px. Re-establish the ruled-grid hairlines as
     horizontal rules so the card grid still reads as a grid, not floating boxes. */
  .armko-svc-card.et_pb_column,
  .armko-serve-card.et_pb_column {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .armko-serve-card.et_pb_column { border-top-color: rgba(255, 255, 255, .12) !important; }
  .armko-hero .et_pb_row { min-height: 0; padding-top: 32px !important; padding-bottom: 32px !important; }
  .armko-hero-visual .et_pb_image img { height: 420px; }
  .armko-form-panel.et_pb_column { padding: 32px 24px !important; }
  .armko-tech-grid { grid-template-columns: repeat(2, 1fr); }
  .armko-tech-grid--5 > .armko-tech-item:last-child { grid-column: 1 / -1; }
  .armko-blog .et_pb_blog_posts { grid-template-columns: repeat(2, 1fr) !important; }
  .armko-footer .et_pb_column { margin-bottom: 32px !important; }
  .armko-team .et_pb_team_member_image img { height: 300px; }
}

@media (max-width: 767px) {
  body.armko-has-fixed-nav #page-container { padding-top: 68px; }
  #main-header.armko-nav { padding: 0 5%; }
  .armko-mobile-panel { margin: 0 -5%; }
  ul.armko-menu-mobile > li > a { padding: 14px 5%; }
  #main-footer.armko-footer { padding: 48px 5% 24px; }
  .armko-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .armko-footer__bottom { flex-direction: column; }
  .armko-hero.et_pb_section { padding: 0 5% !important; }

  /* The mockup hides the hero visual outright on mobile. We keep the image (it
     carries real proof) and drop the whole overlay out of overlay mode, so the
     badge and stat strip flow beneath the photo instead of covering it. */
  .armko-hero-visual .et_pb_image img { height: 260px !important; }
  .armko-hero-overlay {
    position: static !important;
    inset: auto;
    pointer-events: auto;
  }
  .armko-hero-badge {
    position: static;
    display: block;
    padding: 14px 18px;
    text-align: center;
  }
  .armko-hero-badge .big { font-size: 1.7rem; }
  .armko-hero-stats {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: 1px; gap: 1px;
  }

  .armko-regions-inner { gap: 10px 0; flex-direction: column; align-items: flex-start; }
  .armko-regions-inner .items { gap: 8px 18px; }
  .armko-about-img .et_pb_image img { height: 320px; }
  .armko-about-badge { padding: 14px 18px; }
  .armko-about-badge .big { font-size: 1.7rem; }
  .armko-team .et_pb_team_member_image img { height: 320px; }
  .armko-form-panel .wpforms-form .wpforms-one-half {
    width: 100% !important; margin-left: 0 !important;
  }
  .armko-footer .armko-fbot { flex-direction: column; }
  .armko-post-body p, .armko-post-body li { font-size: 16px; }
  .armko-tech-grid, .armko-tech-planned .armko-tech-grid { grid-template-columns: 1fr; }
  .armko-blog .et_pb_blog_posts { grid-template-columns: 1fr !important; }
  .armko-step { flex-direction: column; gap: 8px; padding: 22px 20px; }
  .armko-step__num { flex: none; padding-top: 0; }
}