/* ArcLight Synergies marketing homepage */

/* Self-hosted OFL fonts (Inter + Josefin Sans) - see assets/fonts/ */
@font-face {
 font-family: "Inter";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("assets/fonts/Inter-400.woff2") format("woff2");
}
@font-face {
 font-family: "Inter";
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url("assets/fonts/Inter-500.woff2") format("woff2");
}
@font-face {
 font-family: "Inter";
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url("assets/fonts/Inter-600.woff2") format("woff2");
}
@font-face {
 font-family: "Inter";
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("assets/fonts/Inter-700.woff2") format("woff2");
}
@font-face {
 font-family: "Josefin Sans";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("assets/fonts/JosefinSans-400.woff2") format("woff2");
}
@font-face {
 font-family: "Josefin Sans";
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("assets/fonts/JosefinSans-700.woff2") format("woff2");
}

:root {
 --navy: #102850;
 --navy-deep: #0a1a33;
 --navy-mid: #173665;
 --amber: #E3861C;
 --amber-hover: #C96F12;
 --gold: #E3861C;
 --white: #FFFFFF;
 --ink: #0B1220;
 --ink-muted: #3a4558;
 --ink-soft: #5a6578;
 --bg: #0d1f3d;
 --bg-card: rgba(255, 255, 255, 0.05);
 --bg-slate: #122744;
 --border: rgba(255, 255, 255, 0.12);
 --border-dark: rgba(255, 255, 255, 0.12);
 --shadow: 0 22px 52px rgba(0, 0, 0, 0.48), 0 6px 18px rgba(0, 0, 0, 0.28);
 --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.36), 0 3px 10px rgba(0, 0, 0, 0.24);
 --shadow-md: 0 20px 44px rgba(0, 0, 0, 0.44), 0 6px 16px rgba(0, 0, 0, 0.28);
 --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.52), 0 10px 24px rgba(0, 0, 0, 0.3);
 --shadow-header: 0 14px 36px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.34);
 --shadow-amber: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 134, 28, 0.2), 0 0 36px rgba(227, 134, 28, 0.16);
 --radius: 12px;
 --radius-sm: 8px;
 --header-h: 56px;
 --max: 1120px;
 --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 --border-soft: rgba(255, 255, 255, 0.14);
 --focus: 0 0 0 3px rgba(227, 134, 28, 0.45);
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
 margin: 0;
 font-family: var(--font);
 font-size: 1.0625rem;
 line-height: 1.65;
 color: rgba(255, 255, 255, 0.92);
 background: var(--bg);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

/* Reserve --ink for light panels (forms, cards on white) */
.contact-panel,
.field input,
.field textarea,
.field select,
.form-success {
 color: var(--ink);
}

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

a {
 color: var(--amber);
 text-decoration-thickness: 1.5px;
 text-underline-offset: 0.18em;
}

a:hover {
 color: var(--amber);
}

:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.skip-link {
 position: absolute;
 left: 1rem;
 top: -3rem;
 z-index: 1000;
 background: var(--navy);
 color: var(--white);
 padding: 0.6rem 1rem;
 border-radius: 8px;
 text-decoration: none;
}

.skip-link:focus {
 top: 1rem;
 color: var(--white);
}

.container {
 width: min(100% - 2.5rem, var(--max));
 margin-inline: auto;
 position: relative;
 z-index: 1;
}

/* Header */
.site-header {
 position: sticky;
 top: 0;
 z-index: 100;
 height: var(--header-h);
 background: rgba(10, 26, 51, 0.92);
 backdrop-filter: blur(10px);
 /* Quiet amber cut — sitewide (match locked Home chrome) */
 border-bottom: 1px solid rgba(227, 134, 28, 0.55);
 box-shadow: var(--shadow-header);
}

.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: var(--header-h);
 gap: 1rem;
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 0.7rem;
 text-decoration: none;
 color: var(--white);
 min-width: 0;
}

.brand:hover,
.brand:focus-visible {
 color: var(--amber);
}

.brand-mark {
 width: 40px;
 height: auto;
 flex-shrink: 0;
}

/* Brand wordmark: stacked Josefin (scoped; body stays Inter) — see end block too */
.brand-wordmark {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 0.08em;
 font-family: "Josefin Sans", "Inter", system-ui, sans-serif;
 line-height: 1.05;
 white-space: nowrap;
 overflow: visible;
 color: inherit;
}



.site-nav {
 display: flex;
 align-items: center;
 gap: 1.25rem;
}


.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  box-sizing: border-box;
}
.header-phone-label,
.header-phone-number {
  display: inline;
}
.header-phone:hover {
  color: var(--amber);
}
.nav-list {
 display: flex;
 align-items: center;
 gap: 1.25rem;
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-list a {
 color: rgba(255, 255, 255, 0.88);
 text-decoration: none;
 font-weight: 500;
 font-size: 0.95rem;
}

.nav-list a:hover {
 color: var(--amber);
}

.nav-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.04);
 padding: 0;
 cursor: pointer;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}

.nav-toggle-bar {
 display: block;
 width: 18px;
 height: 2px;
 background: var(--white);
 border-radius: 1px;
}

/* Buttons */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 font-family: inherit;
 font-weight: 600;
 font-size: 0.95rem;
 line-height: 1.15;
 padding: 0.9rem 1.3rem;
 border-radius: 8px;
 border: 1.5px solid transparent;
 text-decoration: none;
 cursor: pointer;
 transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 text-align: center;
}

.btn:active {
 transform: translateY(1px);
}

.btn-primary {
 background: var(--amber);
 color: var(--navy);
 border-color: var(--amber);
}

.btn-primary:hover {
 background: var(--amber-hover);
 border-color: var(--amber-hover);
 color: var(--navy);
}

.btn-ghost {
 background: transparent;
 color: var(--navy);
 border-color: rgba(16, 40, 80, 0.22);
}

.btn-ghost:hover {
 border-color: var(--navy);
 color: var(--navy);
}

.on-dark .btn-ghost,
.section-navy-soft .btn-ghost {
 color: var(--white);
 border-color: rgba(255, 255, 255, 0.35);
}

.on-dark .btn-ghost:hover,
.section-navy-soft .btn-ghost:hover {
 border-color: var(--amber);
 color: var(--amber);
}

.btn-sm {
 padding: 0.68rem 1rem;
 font-size: 0.86rem;
}

.btn-block {
 width: 100%;
}

/* Hero — composed for widescreen 16:9 shelf (header + hero = designed frame) */
.hero {
 --hero-shelf: min(100svh, calc(100vw * 9 / 16));
 position: relative;
 z-index: 3;
 overflow: hidden;
 width: 100%;
 height: calc(var(--hero-shelf) - var(--header-h));
 min-height: 28rem;
 max-height: none;
 padding: 0;
 display: flex;
 flex-direction: column;
 color: var(--white);
 background: transparent;
 margin-bottom: 0;
}

.hero-media {
 position: absolute;
 inset: 0;
 z-index: 0; /* stacking context: poster/video/scrim stay under text */
 pointer-events: none;
 overflow: hidden;
 border-radius: 0;
 box-shadow: none;
}

.hero-media::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 28%;
 background:
 linear-gradient(180deg, transparent 0%, rgba(6, 14, 28, 0.35) 50%, rgba(6, 14, 28, 0.72) 100%);
 pointer-events: none;
}

.hero-poster,
.hero-bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 72% center;
 display: block;
 transform: none;
 border: 0;
 background: #0a1a33;
}

.hero-poster {
 z-index: 0;
}

video.hero-bg {
 z-index: 1;
 opacity: 0;
 transition: opacity 0.7s ease;
 min-width: 100%;
 min-height: 100%;
}

video.hero-bg.is-ready {
 opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
 video.hero-bg {
 display: none;
 }
}

video.hero-bg {
 /* looping hero movie — same cover framing as poster */
 min-width: 100%;
 min-height: 100%;
}


.hero-scrim {
 position: absolute;
 inset: 0;
 z-index: 2; /* above poster/video */
 pointer-events: none;
 background:
 linear-gradient(90deg, rgba(8, 18, 36, 0.94) 0%, rgba(8, 18, 36, 0.82) 38%, rgba(8, 18, 36, 0.42) 62%, rgba(8, 18, 36, 0.12) 100%),
 linear-gradient(180deg, rgba(8, 18, 36, 0.35) 0%, transparent 32%, transparent 58%, rgba(8, 18, 36, 0.45) 100%);
}

.hero-content {
 position: relative;
 z-index: 3; /* above hero-media (scrim/video/poster) */
 /* keep .container gutters — do not override to full bleed */
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: clamp(1.25rem, 2.2vh, 2rem) 0 clamp(0.85rem, 1.6vh, 1.25rem);
 min-height: 0;
}

.hero-main {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: 1.5rem;
 align-items: center;
 flex: 1;
 min-height: 0;
}

.hero-copy {
 max-width: 36rem;
 /* slight inset so copy isn't flush with the container edge */
 padding-inline-start: clamp(0.35rem, 1.5vw, 1.25rem);
}

.hero-spacer {
 min-height: 1px;
}

/* Soft blend under hero into Fit — sits outside the 16:9 shelf height */
.hero-blend {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 z-index: 0;
 pointer-events: none;
 opacity: 0;
}

.eyebrow,
.section-kicker {
 margin: 0 0 0.55rem;
 color: var(--white);
 font-weight: 650;
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.hero h1 {
 margin: 0 0 0.7rem;
 color: var(--white);
 font-size: clamp(1.65rem, 2.6vw, 2.35rem);
 line-height: 1.12;
 letter-spacing: -0.03em;
 font-weight: 700;
 max-width: 34ch;
}

.hero-rotator {
 position: relative;
 display: grid;
}

.hero-rotator-sizer,
.hero-rotator-line {
 grid-area: 1 / 1;
 max-width: 34ch;
}

.hero-rotator-sizer {
 visibility: hidden;
 pointer-events: none;
}

.hero-rotator-line {
 display: block;
 opacity: 0;
 transform: translateY(0.55rem);
 filter: blur(2px);
 transition:
 opacity 0.55s ease,
 transform 0.55s ease,
 filter 0.55s ease;
}

.hero-rotator-line.is-in {
 opacity: 1;
 transform: translateY(0);
 filter: blur(0);
}

.hero-rotator-line.is-out {
 opacity: 0;
 transform: translateY(-0.45rem);
 filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
 .hero-rotator-line {
 transition: none;
 filter: none;
 transform: none;
 }
}

.hero-lead {
 margin: 0 0 1rem;
 color: rgba(255, 255, 255, 0.9);
 font-size: clamp(0.92rem, 1.15vw, 1.02rem);
 line-height: 1.5;
 max-width: 34rem;
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem;
 margin-bottom: 0;
}

.hero-actions .btn {
 padding: 0.72rem 1.15rem;
 font-size: 0.9rem;
}

.hero-actions .btn-ghost {
 color: var(--white);
 border-color: rgba(255, 255, 255, 0.35);
}

.hero-actions .btn-ghost:hover {
 border-color: var(--amber);
 color: var(--amber);
}

/* Stats = designed bottom band inside the 16:9 frame */
.hero-stats {
 list-style: none;
 margin: 0;
 padding: 0.85rem 0 0;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0.75rem 1.5rem;
 border-top: 1px solid rgba(255, 255, 255, 0.18);
 width: 100%;
 max-width: none;
 text-align: center;
}

.hero-stats li {
 display: grid;
 gap: 0.12rem;
 text-align: center;
 justify-items: center;
}

.hero-stats strong {
 color: var(--white);
 font-size: 0.9rem;
 letter-spacing: -0.01em;
}

.hero-stats span {
 color: rgba(255, 255, 255, 0.78);
 font-size: 0.78rem;
}

.hero-aside {
 display: flex;
 justify-content: center;
}

.hero-visual {
 margin: 0;
 width: min(100%, 360px);
}

.hero-visual-frame {
 position: relative;
 aspect-ratio: 1;
 border-radius: 18px;
 background:
 linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(10, 26, 51, 0.55)),
 #0c1f3d;
 border: 1px solid rgba(227, 134, 28, 0.35);
 box-shadow: var(--shadow);
 overflow: hidden;
 display: grid;
 place-items: center;
}

.circuit-overlay {
 position: absolute;
 inset: 8%;
 width: 84%;
 height: 84%;
 pointer-events: none;
}

.hero-3d {
 position: relative;
 width: 68%;
 height: auto;
 filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

.hero-caption {
 display: flex;
 align-items: center;
 gap: 0.65rem;
 margin-top: 0.85rem;
 color: rgba(255, 255, 255, 0.7);
 font-size: 0.82rem;
 font-weight: 500;
}

.caption-bar {
 width: 28px;
 height: 3px;
 background: var(--amber);
 border-radius: 2px;
}

/* Sections */
.section {
 position: relative;
 padding: 4.5rem 0;
 overflow: hidden;
}

.section-light {
 background: linear-gradient(180deg, #122a4d 0%, var(--bg) 100%);
 color: rgba(255, 255, 255, 0.92);
}

.section-services {
 background: linear-gradient(180deg, #122a4d 0%, var(--navy) 55%, #0d1f3d 100%);
 color: var(--white);
}

.section-about {
 background: linear-gradient(165deg, #0c1d38 0%, #143058 50%, #0a1830 100%);
 color: var(--white);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-paper {
 background: linear-gradient(180deg, #122744 0%, #0f2340 100%);
 color: rgba(255, 255, 255, 0.92);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-slate {
 background: var(--bg-slate);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
}

.section-navy,
.section-navy-soft {
 background: var(--navy);
 color: var(--white);
}

#for.section-navy {
 position: relative;
 z-index: 1;
 padding-top: 3.75rem;
 background: var(--navy);
 box-shadow: none;
 border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.section-navy-soft {
 background: linear-gradient(160deg, var(--navy-mid), var(--navy-deep));
}



.section-intro {
 max-width: 42rem;
 margin-bottom: 2.25rem;
}

.section-intro h2,
.about-copy h2,
.contact-copy h2 {
 margin: 0 0 0.75rem;
 color: var(--navy);
 font-size: clamp(1.65rem, 2.5vw, 2rem);
 letter-spacing: -0.025em;
 line-height: 1.2;
}

.on-dark h2,
.section-navy .section-intro h2,
.section-navy-soft .contact-copy h2 {
 color: var(--white);
}

.section-intro p,
.about-copy p,
.contact-copy > p {
 margin: 0;
 color: var(--ink-muted);
}

.on-dark p,
.section-navy .section-intro p,
.section-navy-soft .contact-copy > p {
 color: var(--white);
}

.about-copy p + p {
 margin-top: 1rem;
}

.card-grid {
 display: grid;
 gap: 1.15rem;
}

.card-grid.three {
 grid-template-columns: repeat(3, 1fr);
}

.card-grid.two {
 grid-template-columns: repeat(2, 1fr);
}

.card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.45rem 1.35rem;
 box-shadow: var(--shadow-md);
}

.card-on-dark {
 background: rgba(255, 255, 255, 0.05);
 border-color: var(--border-dark);
 box-shadow: var(--shadow-md);
 position: relative;
 overflow: hidden;
}

.card-accent {
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 3px;
 background: var(--amber);
}

.card h3 {
 margin: 0 0 0.55rem;
 color: var(--navy);
 font-size: 1.08rem;
 letter-spacing: -0.015em;
}

.card p {
 margin: 0;
 color: var(--ink-muted);
 font-size: 0.98rem;
}

/* Must beat .card h3 / .card p (same specificity otherwise) */
.card.card-on-dark h3,
.card.card-on-dark.feature h3 {
 color: #ffffff;
}

.card.card-on-dark p,
.card.card-on-dark.feature p,
.card.card-on-dark .card-note {
 color: #ffffff;
}

.card.card-on-dark .feature-icon {
 color: var(--white);
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.28);
}

/* Architecture strip */
.arch-panel {
 display: grid;
 grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
 gap: 0.55rem;
 align-items: stretch;
 margin-bottom: 1.5rem;
 padding: 1rem;
 border-radius: var(--radius);
 background: var(--navy);
 color: var(--white);
 border: 1px solid rgba(227, 134, 28, 0.28);
}

.arch-node {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 10px;
 padding: 0.9rem 0.85rem;
 display: grid;
 gap: 0.25rem;
 text-align: center;
}

.arch-label {
 font-size: 0.72rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.9);
 font-weight: 600;
}

.arch-node strong {
 font-size: 0.95rem;
 color: var(--white);
 font-weight: 650;
}

.arch-connector {
 width: 18px;
 align-self: center;
 height: 2px;
 background: linear-gradient(90deg, rgba(227, 134, 28, 0.2), var(--amber), rgba(227, 134, 28, 0.2));
 position: relative;
}

.arch-connector::after {
 content: "";
 position: absolute;
 right: -3px;
 top: 50%;
 width: 6px;
 height: 6px;
 border-right: 2px solid var(--amber);
 border-top: 2px solid var(--amber);
 transform: translateY(-50%) rotate(45deg);
}

.feature {
 display: grid;
 grid-template-columns: auto 1fr;
 grid-template-rows: auto auto;
 column-gap: 0.9rem;
 row-gap: 0.35rem;
 align-items: start;
}

.feature-icon {
 grid-row: 1 / span 2;
 width: 42px;
 height: 42px;
 border-radius: 10px;
 background: rgba(16, 40, 80, 0.08);
 color: var(--navy);
 border: 1px solid rgba(227, 134, 28, 0.35);
 display: grid;
 place-items: center;
}

.feature-icon svg {
 width: 22px;
 height: 22px;
}

.feature h3 {
 grid-column: 2;
 margin: 0.15rem 0 0;
}

.feature p {
 grid-column: 2;
}


.card-note {
 margin: 0.85rem 0 0;
 padding-top: 0.75rem;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 color: var(--white);
 font-size: 0.9rem;
}

.service-grid.card-grid.three .feature {
 /* keep feature icon grid usable in three-up */
}


.services-foot {
 margin: 1.5rem 0 0;
 max-width: 40rem;
 color: var(--white);
 font-size: 0.98rem;
}

/* Trust strip */

/* About */
.about-grid {
 display: grid;
 grid-template-columns: 1.25fr 0.75fr;
 gap: 2.25rem;
 align-items: start;
}

.about-aside {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: var(--radius);
 padding: 1.35rem 1.4rem;
 box-shadow: var(--shadow-md);
 border-top: 3px solid var(--amber);
}

.aside-mark {
 width: 72px;
 margin-bottom: 1rem;
}

.fact-list {
 margin: 0;
 display: grid;
 gap: 1rem;
}

.fact-list > div {
 display: grid;
 gap: 0.15rem;
}

.fact-list dt {
 font-size: 0.75rem;
 font-weight: 650;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.9);
}

.fact-list dd {
 margin: 0;
 color: var(--white);
 font-weight: 550;
}

.fact-list a {
 color: var(--white);
 text-decoration: underline;
 text-underline-offset: 0.18em;
 font-weight: 600;
}

.fact-list a:hover {
 color: var(--amber);
 text-decoration: underline;
 opacity: 0.9;
}

.section-navy a:not(.btn),
.section-navy-soft a:not(.btn),
.section-services a:not(.btn),
.section-about a:not(.btn) {
 color: var(--white);
}

.section-navy a:not(.btn):hover,
.section-navy-soft a:not(.btn):hover,
.section-services a:not(.btn):hover,
.section-about a:not(.btn):hover {
  color: var(--amber);
}

.contact-byline {
 margin: -0.25rem 0 0.9rem;
 color: var(--white);
 font-weight: 600;
 font-size: 0.95rem;
}

.fact-role {
 display: inline-block;
 margin-top: 0.15rem;
 font-weight: 500;
 font-size: 0.9rem;
 color: rgba(255, 255, 255, 0.7);
}

/* Contact */
.contact-grid {
 display: grid;
 grid-template-columns: 0.95fr 1.05fr;
 gap: 2.25rem;
 align-items: start;
}

.contact-points {
 margin: 1.35rem 0 0;
 padding: 0;
 list-style: none;
 display: grid;
 gap: 0.65rem;
}

.contact-points li {
 position: relative;
 padding-left: 1.25rem;
 color: rgba(255, 255, 255, 0.78);
 font-size: 0.98rem;
}

.contact-points li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 0.45rem;
 height: 0.45rem;
 border-radius: 50%;
 background: var(--amber);
}

.contact-panel {
 background: var(--white);
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: calc(var(--radius) + 2px);
 padding: 1.5rem;
 box-shadow: var(--shadow);
}

.contact-form {
 display: grid;
 gap: 1rem;
}

.field {
 display: grid;
 gap: 0.4rem;
}

.field label {
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--navy);
}

.field-help {
 margin: -0.15rem 0 0;
 font-size: 0.8rem;
 line-height: 1.35;
 font-weight: 400;
 color: var(--ink-soft);
}

.field input,
.field textarea,
.field select {
 font: inherit;
 color: var(--ink);
 background: #f8fafc;
 border: 1px solid #94a3b8;
 border-radius: var(--radius-sm);
 padding: 0.75rem 0.9rem;
 width: 100%;
}

.field select {
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 0.9rem center;
 padding-right: 2.4rem;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
 border-color: #64748b;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
 border-color: var(--amber);
 background: var(--white);
}

.field textarea {
 resize: vertical;
 min-height: 120px;
}

.form-note {
 margin: 0;
 font-size: 0.85rem;
 color: var(--ink-soft);
 text-align: center;
}

.form-success {
 text-align: center;
 padding: 1.5rem 0.5rem;
}

.form-success h3 {
 margin: 0 0 0.65rem;
 color: var(--navy);
}

.form-success p {
 margin: 0 0 1.25rem;
 color: var(--ink-muted);
}

.form-success .btn + .btn {
 margin-top: 0.65rem;
}

.field.invalid input,
.field.invalid textarea,
.field.invalid select {
 border-color: #c45c4a;
}

.field .optional {
 font-weight: 400;
 color: var(--ink-soft);
}

/* Footer */
.site-footer {
 position: relative;
 /* Amber cut flush at top — sitewide (match locked Home) */
 padding: 0 0 0.75rem;
 background: #071426;
 color: rgba(255, 255, 255, 0.78);
}

.footer-accent {
 margin: 0;
 height: 2px;
 background: var(--amber);
 opacity: 1;
}

.footer-inner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 0.5rem;
 padding-top: 0.75rem; /* compact breathing room below the amber cut */
}

.brand-footer {
 color: var(--white);
}

.brand-footer:hover,
.brand-footer:focus-visible {
 color: var(--amber);
}

.brand-footer .brand-mark {
 width: 28px;
}

.brand-footer .brand-wordmark {
 color: inherit;
}

.footer-meta {
 margin: 0;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.3rem;
 color: rgba(255, 255, 255, 0.62);
 font-size: 0.9rem;
 line-height: 1.35;
}

.footer-meta a {
 color: rgba(255, 255, 255, 0.78);
 text-decoration: none;
 font-weight: 500;
}

.footer-meta a:hover {
 color: var(--amber);
}

.footer-dot {
 opacity: 0.55;
}

@media (max-width: 480px) {
 .footer-meta {
  flex-wrap: nowrap;
  gap: 0.2rem;
  font-size: 0.8rem;
  white-space: nowrap;
 }
}

/* Responsive */

@media (max-width: 1100px) and (min-width: 901px) {
 .hero {
 min-height: 30rem;
 }
}

@media (max-width: 980px) {
 .arch-panel {
 grid-template-columns: 1fr 1fr;
 gap: 0.75rem;
 }

 .arch-connector {
 display: none;
 }
}

@media (max-width: 900px) {
 .about-grid,
 .contact-grid {
 grid-template-columns: 1fr;
 }

 .hero h1 {
 max-width: none;
 }

 .card-grid.three,
 .card-grid.two {
 grid-template-columns: 1fr;
 }

 /* Mobile/tablet: drop 16:9 shelf; natural stacked height */
 .hero {
 height: auto;
 min-height: 0;
 padding: 0;
 margin-bottom: 0;
 }

 .hero-content {
 padding: 2.25rem 0 1.75rem;
 gap: 1.5rem;
 }

 .hero-main {
 grid-template-columns: 1fr;
 }

 .hero-spacer {
 display: none;
 }

 .hero-media {
 border-radius: 0;
 box-shadow: none;
 }

 .hero-blend {
 display: none;
 }

 #for.section-navy {
 padding-top: 3.25rem;
 }

 /* Narrow: bias RIGHT so orange orb (right of clip) stays in frame */
 .hero-poster,
 .hero-bg {
 object-position: 82% center;
 }

 /* Not on Home/Services — those keep soft L→R #122744 fade */
 body:not(.page-home):not(.page-services) .hero-scrim {
 background:
 linear-gradient(180deg, rgba(10, 26, 51, 0.78) 0%, rgba(10, 26, 51, 0.86) 55%, rgba(10, 26, 51, 0.7) 100%),
 linear-gradient(90deg, rgba(10, 26, 51, 0.8), rgba(10, 26, 51, 0.5));
 }

 body.page-home .hero-scrim {
 z-index: 2;
 background: linear-gradient(90deg, rgba(18, 39, 68, 0.92) 0%, rgba(18, 39, 68, 0.75) 40%, rgba(18, 39, 68, 0.25) 75%, rgba(18, 39, 68, 0) 100%);
 }

 .hero-stats {
 grid-template-columns: 1fr;
 gap: 0.65rem;
 }
}

@media (max-width: 760px) {
 .site-header {
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
 }

 .nav-toggle {
 display: inline-flex;
 }

 body.nav-open {
 overflow: hidden;
 }

 .site-nav {
 position: fixed;
 top: var(--header-h);
 right: 0;
 bottom: auto;
 height: calc(100vh - var(--header-h));
 height: calc(100dvh - var(--header-h));
 width: 75vw;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.25rem;
 overflow-y: auto;
 padding: clamp(2rem, 8vh, 4rem) 1.5rem 1.5rem;
 background: rgba(10, 26, 51, 0.90);
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -18px 0 42px rgba(0, 0, 0, 0.32);
 transform: translateX(100%);
 visibility: hidden;
 pointer-events: none;
 transition: transform 0.25s ease, visibility 0s linear 0.25s;
 z-index: 101;
 }
.nav-list a {
 border-bottom-color: rgba(255, 255, 255, 0.1);
 }

 .site-nav.is-open {
 transform: translateX(0);
 visibility: visible;
 pointer-events: auto;
 transition-delay: 0s;
 }

 .nav-list {
 width: 100%;
 flex-direction: column;
 align-items: center;
 gap: 0;
 text-align: center;
 }

 .nav-list a {
 display: block;
 width: 100%;
 padding: 0.85rem 0.25rem;
 border-bottom: 1px solid var(--border);
 text-align: center;
 }

 .header-cta {
 width: auto;
 align-self: center;
 }

 /* stacked wordmark sizes: leave to .brand-wordmark-* rules */


 .section {
 padding: 3.5rem 0;
 }

 .footer-inner {
 flex-direction: column;
 align-items: flex-start;
 gap: 0.5rem;
 padding-top: 0.5rem;
 }

 .site-footer {
 padding-bottom: 0.5rem;
 }

 .arch-panel {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 600px) {
 .hero-actions {
 flex-direction: column;
 align-items: stretch;
 }

 .hero-actions .btn {
 width: 100%;
 }
}

@media (max-width: 420px) {
 .container {
 width: min(100% - 1.5rem, var(--max));
 }

 .hero-actions {
 flex-direction: column;
 }

 .hero-actions .btn {
 width: 100%;
 }
}

@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto;
 }

 .btn {
 transition: none;
 }
}


/* Multi-page: active nav */
.nav-list a[aria-current="page"] {
 color: var(--amber);
}

/* Inner page hero — compact horizontal 16:9-aware banner */
.page-hero {
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: center;
 min-height: clamp(11rem, 22vw, 15.5rem);
 padding: clamp(1.75rem, 3.5vh, 2.5rem) 0;
 background: linear-gradient(135deg, #0d2244 0%, var(--navy) 48%, #163968 100%);
 color: var(--white);
}


.page-hero .container {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 gap: 1.5rem;
 align-items: end;
}

.page-hero .eyebrow {
 grid-column: 1 / -1;
}

.page-hero h1 {
 margin: 0;
 color: var(--white);
 font-size: clamp(1.7rem, 2.8vw, 2.35rem);
 line-height: 1.12;
 letter-spacing: -0.03em;
}

.page-hero .hero-lead {
 margin: 0;
 color: rgba(255, 255, 255, 0.84);
 font-size: clamp(0.95rem, 1.2vw, 1.05rem);
 line-height: 1.5;
 max-width: 34rem;
}

@media (max-width: 900px) {
 .page-hero {
 min-height: 0;
 padding: 2.25rem 0 2rem;
 }
 .page-hero .container {
 grid-template-columns: 1fr;
 }
 .page-hero .eyebrow {
 grid-column: auto;
 }
 .page-hero h1 {
 margin-bottom: 0.65rem;
 }
}

/* Home CTA band */
.cta-band {
 padding: 3.5rem 0;
 background: linear-gradient(160deg, var(--navy-mid), var(--navy-deep));
 color: var(--white);
 position: relative;
 overflow: hidden;
 box-shadow: var(--shadow-lg);
}

.cta-band .cta-inner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 1.25rem 2rem;
}

.cta-band h2 {
 margin: 0 0 0.5rem;
 color: var(--white);
 font-size: clamp(1.5rem, 2.4vw, 1.85rem);
 letter-spacing: -0.02em;
}

.cta-band p {
 margin: 0;
 color: rgba(255, 255, 255, 0.78);
 max-width: 34rem;
}

/* Services detail lists */
.layer-list {
 margin: 1.1rem 0 0;
 padding: 0;
 list-style: none;
 display: grid;
 gap: 0.65rem;
}

.layer-list li {
 position: relative;
 padding-left: 1.2rem;
 color: rgba(255, 255, 255, 0.8);
}

.layer-list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 0.45rem;
 height: 0.45rem;
 border-radius: 50%;
 background: var(--amber);
}

.section-block + .section-block {
 margin-top: 2.5rem;
}

.text-link {
 font-weight: 600;
 text-decoration: none;
}

.text-link:hover {
 text-decoration: underline;
}


/* Honeypot: hide from humans; bots that fill every field get dropped in script.js */
.hp-field {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

/* Services presentation V2 + polish: pathway + featured hierarchy */
.pathway-bar {
 background: linear-gradient(180deg, var(--navy-deep) 0%, #0c203c 100%);
 border-top: 2px solid var(--amber);
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 padding: 0.95rem 0;
 box-shadow: var(--shadow-md);
}

.pathway-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.45rem 0.5rem;
 justify-content: flex-start;
}

.pathway-step {
 display: inline-flex;
 align-items: center;
}

.pathway-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.35rem 0.75rem 0.35rem 0.4rem;
 border-radius: 999px;
 border: 1px solid rgba(255, 255, 255, 0.14);
 background: rgba(255, 255, 255, 0.04);
 color: rgba(255, 255, 255, 0.92);
 text-decoration: none;
 font-size: 0.88rem;
 font-weight: 600;
 letter-spacing: 0.01em;
 box-shadow: var(--shadow-sm);
 transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pathway-pill:hover {
 border-color: rgba(227, 134, 28, 0.65);
 background: rgba(227, 134, 28, 0.1);
 color: #fff;
 box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), 0 0 16px rgba(227, 134, 28, 0.12);
}

.pathway-pill:focus-visible {
 outline: none;
 box-shadow: var(--focus);
 border-color: var(--amber);
}

.pathway-num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.4rem;
 height: 1.4rem;
 border-radius: 999px;
 background: rgba(227, 134, 28, 0.2);
 border: 1px solid rgba(227, 134, 28, 0.7);
 color: var(--amber);
 font-size: 0.7rem;
 font-weight: 700;
 line-height: 1;
}

.pathway-pill:hover .pathway-num,
.pathway-pill:focus-visible .pathway-num {
 background: var(--amber);
 color: var(--navy-deep);
 border-color: var(--amber);
}

.pathway-label {
 line-height: 1.2;
}

.pathway-sep {
 width: 0.85rem;
 height: 1px;
 background: rgba(227, 134, 28, 0.4);
 flex: 0 0 auto;
}

/* Align Services page-hero with Home section breathing room */
.page-hero {
 padding: clamp(2.75rem, 5vh, 4rem) 0 clamp(2.25rem, 4vh, 3.25rem);
 min-height: 0;
}

.page-hero .hero-lead {
 line-height: 1.55;
 max-width: 38rem;
}

.section-services-v2 {
 padding-top: 3.25rem;
 padding-bottom: 2rem;
}

.packages-flow {
 display: flex;
 flex-direction: column;
 gap: 2.85rem;
}

.step-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2rem;
 height: 2rem;
 padding: 0 0.55rem;
 border-radius: 999px;
 background: var(--amber);
 color: var(--navy-deep);
 font-size: 0.85rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 line-height: 1;
 box-shadow: 0 0 0 3px rgba(227, 134, 28, 0.2);
}

.step-badge-sm {
 min-width: 1.65rem;
 height: 1.65rem;
 font-size: 0.75rem;
 box-shadow: 0 0 0 2px rgba(227, 134, 28, 0.18);
}

.tier-heading {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin: 0 0 1.2rem;
}

.tier-heading-copy {
 display: flex;
 flex-direction: column;
 gap: 0.2rem;
}

.tier-eyebrow {
 margin: 0;
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: rgba(227, 134, 28, 0.9);
}

.tier-title {
 margin: 0;
 color: #ffffff;
 font-size: 1.18rem;
 font-weight: 650;
 letter-spacing: -0.02em;
 line-height: 1.25;
}

/* 1) Featured Core - richer but restrained */
.package-featured {
 position: relative;
 overflow: hidden;
 width: 100%;
 padding: 2.25rem 2.1rem 2rem;
 border-radius: calc(var(--radius) + 2px);
 background:
 radial-gradient(120% 90% at 100% 0%, rgba(227, 134, 28, 0.14) 0%, transparent 55%),
 linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(23, 54, 101, 0.48) 55%, rgba(16, 40, 80, 0.58) 100%);
 border: 1px solid rgba(227, 134, 28, 0.48);
 box-shadow:
 var(--shadow-amber),
 inset 0 1px 0 rgba(255, 255, 255, 0.08);
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.package-featured::before {
 content: "";
 position: absolute;
 inset: -40% -10% auto auto;
 width: 16rem;
 height: 16rem;
 background: radial-gradient(circle, rgba(227, 134, 28, 0.18) 0%, transparent 68%);
 pointer-events: none;
}

.package-featured .card-accent {
 width: 5px;
 background: linear-gradient(180deg, var(--amber) 0%, #f0a04a 100%);
 box-shadow: 0 0 18px rgba(227, 134, 28, 0.35);
}

.package-featured-top {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 0.65rem;
 position: relative;
 z-index: 1;
}


.package-featured .section-kicker {
 margin: 0;
 letter-spacing: 0.06em;
}

.package-featured h2 {
 margin: 0 0 0.6rem;
 color: #ffffff;
 font-size: clamp(1.5rem, 2.5vw, 1.95rem);
 letter-spacing: -0.03em;
 line-height: 1.18;
 position: relative;
 z-index: 1;
}

.package-featured .card-lead {
 margin: 0 0 0.85rem;
 color: #ffffff;
 font-size: 1.1rem;
 line-height: 1.5;
 position: relative;
 z-index: 1;
}

.package-featured > p:not(.section-kicker):not(.card-lead):not(.card-best) {
 margin: 0;
 max-width: 52rem;
 color: rgba(255, 255, 255, 0.88);
 font-size: 1.02rem;
 line-height: 1.7;
 position: relative;
 z-index: 1;
}

.package-featured .card-best {
 margin: 1.25rem 0 0;
 padding-top: 0.95rem;
 border-top: 1px solid rgba(227, 134, 28, 0.28);
 color: rgba(255, 255, 255, 0.72);
 font-size: 0.9rem;
 line-height: 1.5;
 position: relative;
 z-index: 1;
}

.package-featured .card-best strong {
 color: rgba(255, 255, 255, 0.9);
 font-weight: 600;
}

.package-featured:hover {
 transform: translateY(-3px);
 border-color: var(--amber);
 box-shadow:
 0 24px 52px rgba(0, 0, 0, 0.34),
 0 0 0 1px rgba(227, 134, 28, 0.28),
 0 0 36px rgba(227, 134, 28, 0.12);
}

.package-featured:focus-within {
 box-shadow: var(--focus), var(--shadow-lg);
}

/* 2) Secondary cards */
.package-secondary-grid {
 align-items: stretch;
}

.package-card {
 display: flex;
 flex-direction: column;
 gap: 0.55rem;
 padding: 1.6rem 1.5rem 1.4rem;
 height: 100%;
 border: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: var(--shadow-md);
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.package-card .section-kicker {
 margin: 0 0 0.05rem;
 letter-spacing: 0.05em;
}

.package-card h2,
.package-card h3 {
 margin: 0;
 color: #ffffff;
 font-size: 1.2rem;
 letter-spacing: -0.02em;
 line-height: 1.22;
}

.package-card .card-lead {
 margin: 0.05rem 0 0;
 color: #ffffff;
 font-size: 0.98rem;
 line-height: 1.45;
}

.package-card > p:not(.section-kicker):not(.card-lead):not(.card-best) {
 margin: 0;
 flex: 1 1 auto;
 color: rgba(255, 255, 255, 0.86);
 font-size: 0.94rem;
 line-height: 1.6;
}

.package-card .card-best {
 margin: 0.8rem 0 0;
 padding-top: 0.75rem;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 color: rgba(255, 255, 255, 0.7);
 font-size: 0.84rem;
 line-height: 1.45;
}

.package-card .card-best strong {
 color: rgba(255, 255, 255, 0.88);
 font-weight: 600;
}

.package-secondary:hover,
.package-panel:hover,
.package-ai:hover {
 transform: translateY(-3px);
 border-color: rgba(227, 134, 28, 0.75);
 box-shadow: var(--shadow-amber);
}

.package-secondary:focus-within,
.package-panel:focus-within,
.package-ai:focus-within {
 box-shadow: var(--focus);
}

/* 3) Design slim panel */
.package-panel {
 position: relative;
 overflow: hidden;
 width: 100%;
 padding: 1.45rem 1.6rem 1.35rem;
 border-radius: var(--radius);
 background: rgba(255, 255, 255, 0.045);
 border: 1px solid rgba(255, 255, 255, 0.14);
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.package-panel .card-accent {
 width: 3px;
}

.package-panel-inner {
 display: block;
}

.package-panel .section-kicker {
 margin: 0 0 0.25rem;
}

.package-panel h3 {
 margin: 0 0 0.4rem;
 color: #ffffff;
 font-size: 1.14rem;
 letter-spacing: -0.02em;
 line-height: 1.25;
}

.package-panel .card-lead {
 margin: 0 0 0.45rem;
 color: #ffffff;
 font-size: 0.96rem;
 line-height: 1.45;
}

.package-panel p:not(.section-kicker):not(.card-lead):not(.card-best) {
 margin: 0;
 color: rgba(255, 255, 255, 0.86);
 font-size: 0.94rem;
 line-height: 1.6;
 max-width: 48rem;
}

.package-panel .card-best {
 margin: 0.75rem 0 0;
 padding-top: 0.7rem;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 color: rgba(255, 255, 255, 0.7);
 font-size: 0.84rem;
 line-height: 1.45;
}

.package-panel .card-best strong {
 color: rgba(255, 255, 255, 0.86);
 font-weight: 600;
}

/* 4) AI band - intentional distinct surface */
.ai-addons-band {
 background:
 linear-gradient(180deg, rgba(8, 18, 34, 0.94) 0%, rgba(12, 28, 52, 0.99) 100%);
 border-top: 1px solid rgba(227, 134, 28, 0.28);
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 padding: 2.85rem 0 3rem;
 margin-top: 0.75rem;
 position: relative;
}

.ai-addons-band::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 3px;
 background: linear-gradient(90deg, transparent 0%, rgba(227, 134, 28, 0.55) 20%, rgba(227, 134, 28, 0.55) 80%, transparent 100%);
 opacity: 0.9;
}

.tier-heading-ai {
 margin-bottom: 1.35rem;
 padding-bottom: 0.85rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-addons-grid {
 align-items: stretch;
}

.package-ai {
 background: rgba(255, 255, 255, 0.03);
 border: 1px dashed rgba(255, 255, 255, 0.22);
 box-shadow: var(--shadow-sm);
 position: relative;
}

.package-ai .section-kicker {
 color: rgba(227, 134, 28, 0.95);
}

.package-ai .card-lead,
.package-ai h3 {
 color: #ffffff;
}

.package-ai > p:not(.section-kicker):not(.card-lead):not(.card-best) {
 color: rgba(255, 255, 255, 0.82);
}

.package-ai .card-best {
 border-top-color: rgba(255, 255, 255, 0.1);
 color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 900px) {
 .pathway-list {
 gap: 0.45rem 0.4rem;
 }

 .pathway-sep {
 width: 0.55rem;
 }

 .package-featured {
 padding: 1.8rem 1.4rem 1.55rem;
 }

 .packages-flow {
 gap: 2.25rem;
 }

 .ai-addons-band {
 padding: 2.25rem 0 2.45rem;
 }

 .section-services-v2 {
 padding-top: 2.5rem;
 }
}

@media (max-width: 640px) {
 .pathway-list {
 flex-direction: column;
 align-items: stretch;
 }

 .pathway-sep {
 display: none;
 }

 .pathway-pill {
 width: 100%;
 }

 .package-featured-mark {
 display: none;
 }
}


@media (prefers-reduced-motion: reduce) {
 .package-featured,
 .package-card,
 .package-panel,
 .package-ai,
 .pathway-pill {
 transition: none;
 }

 .package-featured:hover,
 .package-secondary:hover,
 .package-panel:hover,
 .package-ai:hover {
 transform: none;
 }
}


/* ==========================================================================
 HOME PROOF — same palette, new cues (scoped to body.page-home only)
 Design Reviewer SAME-PALETTE-NEW-CUES · 2026-09-21
 Does not restyle Services / About / Contact page chrome.
 ========================================================================== */

body.page-home {
 --home-chapter-gap: clamp(4.75rem, 8vw, 6.5rem);
}

/* Header: secondary CTA (ghost), not amber pill — Home only */
/* Header amber seam now sitewide on .site-header */

body.page-home .site-header .header-cta.btn-ghost {
 color: rgba(255, 255, 255, 0.92);
 border-color: rgba(255, 255, 255, 0.28);
 background: transparent;
}

body.page-home .site-header .header-cta.btn-ghost:hover {
 color: var(--amber);
 border-color: var(--amber);
}

/* Amber TEXT kickers (not pill chips) */
body.page-home .eyebrow,
body.page-home .section-kicker {
 color: var(--amber);
 font-weight: 650;
 font-size: 0.7rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

/* Display: Inter only (Josh revert 2026-09-21) */

body.page-home .section-lead {
 max-width: 34ch;
 font-size: 1.05rem;
 line-height: 1.65;
}

/* Hero: static poster + editorial scrim + oversized type */
body.page-home .hero {
 min-height: clamp(30rem, 72vh, 42rem);
 height: auto;
 max-height: none;
 padding-bottom: 0;
}

body.page-home .hero-media {
 inset: 0;
}

body.page-home .hero-poster,
body.page-home .hero-bg {
 object-fit: cover;
 object-position: 68% center;
 filter: saturate(0.92) contrast(1.02);
}

/* Mobile/tablet: MORE right-bias than desktop 68% so orange orb stays fully visible */
@media (max-width: 900px) {
 body.page-home .hero-poster,
 body.page-home .hero-bg {
 object-position: 82% center;
 }
}

@media (max-width: 760px) {
 body.page-home .hero-poster,
 body.page-home .hero-bg {
 object-position: 85% center;
 }
}

body.page-home .hero-scrim {
 /* Soft L→R: Why-blue tint, text readable; right third clear. Under .hero-content. */
 z-index: 2;
 pointer-events: none;
 background: linear-gradient(
 90deg,
 rgba(18, 39, 68, 0.92) 0%,
 rgba(18, 39, 68, 0.75) 40%,
 rgba(18, 39, 68, 0.25) 75%,
 rgba(18, 39, 68, 0) 100%
 );
}
body.page-home .hero-media {
 z-index: 0;
}

body.page-home .hero-content {
 z-index: 3;
}

body.page-home .hero-blend {
 z-index: 1;
}

body.page-home .hero-stats {
 position: relative;
 z-index: 3;
}


body.page-home .hero-media::after {
 /* Subtle bottom seam only; stays inside hero-media under text */
 height: 16%;
 z-index: 3;
 background: linear-gradient(180deg, transparent 0%, rgba(18, 39, 68, 0.1) 100%);
}

body.page-home .hero-content {
 padding: clamp(2rem, 5vh, 3.25rem) 0 clamp(1.5rem, 3vh, 2.25rem);
 justify-content: center;
 gap: 2rem;
}

body.page-home .hero-main {
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 align-items: end;
}

body.page-home .hero-copy {
 max-width: 40rem;
}

body.page-home .hero h1 {
 font-size: clamp(1.65rem, 2.6vw, 2.35rem);
 line-height: 1.12;
 letter-spacing: -0.02em;
 max-width: 22ch;
 font-weight: 600;
}

body.page-home .hero-rotator-sizer,
body.page-home .hero-rotator-line {
 max-width: 16ch;
}

body.page-home .hero-lead {
 max-width: 32ch;
 font-size: clamp(1.02rem, 1.35vw, 1.12rem);
 line-height: 1.6;
 color: rgba(255, 255, 255, 0.88);
 margin-bottom: 1.35rem;
}

body.page-home .hero-actions {
 gap: 1rem;
 align-items: center;
}

body.page-home .hero-actions .btn-ghost {
 color: var(--white);
 border-color: rgba(255, 255, 255, 0.4);
}

body.page-home .hero-actions .btn-ghost:hover {
 border-color: var(--amber);
 color: var(--amber);
}

body.page-home .hero-secondary-link {
 color: rgba(255, 255, 255, 0.88);
 font-weight: 550;
 font-size: 0.95rem;
 text-decoration: none;
 border-bottom: 1px solid rgba(227, 134, 28, 0.55);
 padding-bottom: 0.1rem;
}

body.page-home .hero-secondary-link:hover {
 color: var(--amber);
 border-bottom-color: var(--amber);
}

body.page-home .hero-stats {
 margin-top: 0.5rem;
 border-top: 1px solid rgba(255, 255, 255, 0.14);
 padding-top: 1rem;
}

/* Chapter rhythm + whitespace */
body.page-home .section {
 padding: var(--home-chapter-gap) 0;
}

body.page-home .section-intro {
 margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.page-home .section-intro h2 {
 font-size: clamp(1.85rem, 3.2vw, 2.45rem);
 letter-spacing: -0.02em;
 line-height: 1.15;
}

/* Why ArcLight — dark band, soft glass cards, no left rails (layout kept) */
body.page-home .home-why.section-paper {
 background: linear-gradient(180deg, #122744 0%, #0f2340 55%, #0d1f3d 100%);
 color: rgba(255, 255, 255, 0.92);
 /* Hero seam hairline — slightly stronger than default section edges */
 border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Hero → Why seam: soft light cut, a bit stronger than section defaults (not amber) */
body.page-home .hero {
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

body.page-home .home-why.section-paper {
 border-top-color: rgba(255, 255, 255, 0.16);
}

body.page-home .home-why::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 1px;
 background: rgba(255, 255, 255, 0.16);
 z-index: 6;
 pointer-events: none;
}

body.page-home .home-why .section-intro h2 {
 color: var(--white);
}

body.page-home .home-why .section-intro p,
body.page-home .home-why .section-lead {
 color: rgba(255, 255, 255, 0.82);
 max-width: 36ch;
}

body.page-home .home-why-grid {
 gap: 1.35rem;
}

body.page-home .card-soft {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: var(--shadow-md);
 position: relative;
 overflow: visible;
 padding: 1.65rem 1.45rem;
}

body.page-home .card-soft h3 {
 color: var(--white);
 font-family: var(--font);
 font-weight: 600;
 font-size: 1.2rem;
 margin-bottom: 0.65rem;
}

body.page-home .card-soft p {
 color: rgba(255, 255, 255, 0.82);
 max-width: 32ch;
 font-size: 0.98rem;
}

body.page-home .home-fit-line {
 margin-top: 2rem;
 color: rgba(255, 255, 255, 0.7);
 max-width: 42rem;
 font-size: 0.95rem;
}

/* Services teaser — one featured Core cue (not equal tile wall) */
body.page-home .home-services-teaser.section-slate {
 background: linear-gradient(180deg, #142a4c 0%, var(--bg-slate) 45%, #0f2340 100%);
 color: var(--white);
 border-top: none;
 /* bottom seam set below with services→about soft light hairline */
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

body.page-home .home-services-teaser .section-intro h2 {
 color: var(--white);
}

body.page-home .home-services-teaser .section-intro p,
body.page-home .home-services-teaser .section-lead {
 color: rgba(255, 255, 255, 0.86);
 max-width: 34ch;
}

body.page-home .home-core-feature {
 max-width: 38rem;
 padding: 1.85rem 1.75rem 1.9rem;
 border-radius: var(--radius);
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-soft);
 box-shadow: var(--shadow-amber);
 position: relative;
 transform: scale(1.01);
}

body.page-home .home-core-feature::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 2px;
 background: var(--amber);
 border-radius: var(--radius) var(--radius) 0 0;
}

body.page-home .home-core-feature h3 {
 margin: 0.15rem 0 0.75rem;
 color: var(--white);
 font-size: clamp(1.45rem, 2.4vw, 1.85rem);
 letter-spacing: -0.02em;
 line-height: 1.15;
}

body.page-home .home-core-feature > p {
 margin: 0;
 color: rgba(255, 255, 255, 0.88);
 max-width: 34ch;
 font-size: 1.02rem;
}

body.page-home .home-outcome-line {
 margin-top: 1.15rem !important;
 padding-top: 1.05rem;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 color: rgba(255, 255, 255, 0.72) !important;
 font-size: 0.95rem !important;
 max-width: 42ch !important;
 line-height: 1.55;
}

body.page-home .home-services-link {
 margin-top: 1.35rem !important;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.55rem 0.75rem;
 max-width: none !important;
}

body.page-home .home-services-link .text-link {
 color: var(--amber);
 font-weight: 600;
 text-decoration: none;
 border-bottom: 1px solid rgba(227, 134, 28, 0.45);
}

body.page-home .home-services-link .text-link:hover {
 color: var(--amber);
 border-bottom-color: #f0a04a;
}

body.page-home .home-link-sep {
 color: rgba(255, 255, 255, 0.35);
}

/* Services → About seam: soft light cut (match hero→Why; not amber) */
body.page-home .home-services-teaser {
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* About teaser — quieter deep band so it doesn't clash */
body.page-home .home-about-teaser.section-about {
 background: var(--navy-deep);
 border-top: 1px solid rgba(255, 255, 255, 0.16);
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.page-home .home-about-teaser::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 1px;
 background: rgba(255, 255, 255, 0.16);
 z-index: 6;
 pointer-events: none;
}

body.page-home .home-about-teaser .section-intro h2 {
 color: var(--white);
}

body.page-home .home-about-teaser .section-intro p {
 color: rgba(255, 255, 255, 0.84);
 max-width: 36ch;
}

body.page-home .home-about-teaser .text-link {
 color: var(--amber);
 font-weight: 600;
 text-decoration: none;
 border-bottom: 1px solid rgba(227, 134, 28, 0.45);
}

body.page-home .home-about-teaser .text-link:hover {
 color: var(--amber);
}

/* CTA band — the single amber primary for this view */
body.page-home .home-cta-band.cta-band {
 background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 55%, var(--navy-deep) 100%);
 padding: clamp(3.25rem, 6vw, 4.25rem) 0;
}

body.page-home .home-cta-band h2 {
 font-size: clamp(1.65rem, 2.8vw, 2.15rem);
}

body.page-home .home-cta-band .btn-primary {
 flex-shrink: 0;
}

/* Footer amber cut now sitewide on .site-footer / .footer-accent / .footer-inner */

@media (max-width: 900px) {
 body.page-home .hero-scrim {
 z-index: 2;
 background: linear-gradient(90deg, rgba(18, 39, 68, 0.92) 0%, rgba(18, 39, 68, 0.75) 40%, rgba(18, 39, 68, 0.25) 75%, rgba(18, 39, 68, 0) 100%) !important;
 }

 body.page-home .hero-main {
 grid-template-columns: 1fr;
 }

 body.page-home .hero-spacer {
 display: none;
 }

 body.page-home .hero h1 {
 max-width: 18ch;
 }

 body.page-home .home-why-grid.card-grid.three {
 grid-template-columns: 1fr;
 }

 body.page-home .home-core-feature {
 transform: none;
 }
}

@media (max-width: 640px) {
 body.page-home .hero {
 min-height: 28rem;
 }

 body.page-home .hero h1 {
 font-size: clamp(1.5rem, 5.5vw, 2.1rem);
 }

 body.page-home .hero-actions {
 flex-direction: column;
 align-items: flex-start;
 }
}

@media (prefers-reduced-motion: reduce) {
 body.page-home .home-core-feature {
 transform: none;
 }
}



/* ==========================================================================
 Josh depth pass — stronger drop shadows on dark navy (2026-09-21)
 Tasteful separation; Inter-only / no white panels / layout unchanged
 ========================================================================== */
.package-card,
.package-panel,
.package-ai,
.contact-panel,
.arch-panel,
.feature {
 box-shadow: var(--shadow-md);
}

.package-card:hover,
.package-panel:hover,
.feature:hover {
 box-shadow: var(--shadow-lg);
}

.btn-primary {
 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 18px rgba(227, 134, 28, 0.18);
}

.btn-primary:hover {
 box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), 0 0 22px rgba(227, 134, 28, 0.24);
}

body.page-home .home-cta-band.cta-band {
 box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
 .package-card:hover,
 .package-panel:hover,
 .feature:hover {
 box-shadow: var(--shadow-md);
 }
}


/* ==========================================================================
 Josh Home section separation shadows (2026-09-21)
 Home/index only — layered elevation between major sections on dark navy.
 Services/About/Contact get the same pattern after Josh approves Home.
 ========================================================================== */
body.page-home .hero,
body.page-home .home-why,
body.page-home .home-services-teaser,
body.page-home .home-about-teaser,
body.page-home .home-cta-band {
 position: relative;
 isolation: isolate;
}

body.page-home .hero {
 z-index: 5;
 box-shadow:
 0 20px 44px rgba(0, 0, 0, 0.4),
 0 6px 16px rgba(0, 0, 0, 0.22);
}

body.page-home .home-why {
 z-index: 4;
 box-shadow:
 0 24px 52px rgba(0, 0, 0, 0.44),
 0 -12px 36px rgba(0, 0, 0, 0.22),
 0 8px 20px rgba(0, 0, 0, 0.24);
}

body.page-home .home-services-teaser {
 z-index: 3;
 box-shadow:
 0 24px 52px rgba(0, 0, 0, 0.44),
 0 -12px 36px rgba(0, 0, 0, 0.22),
 0 8px 20px rgba(0, 0, 0, 0.24);
}

body.page-home .home-about-teaser {
 z-index: 2;
 box-shadow:
 0 24px 52px rgba(0, 0, 0, 0.42),
 0 -12px 36px rgba(0, 0, 0, 0.2),
 0 8px 20px rgba(0, 0, 0, 0.22);
}

body.page-home .home-cta-band {
 z-index: 1;
 box-shadow:
 0 -16px 40px rgba(0, 0, 0, 0.36),
 0 20px 48px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
 body.page-home .hero,
 body.page-home .home-why,
 body.page-home .home-services-teaser,
 body.page-home .home-about-teaser,
 body.page-home .home-cta-band {
 /* keep static separation; no motion involved */
 }
}


/* ==========================================================================
 Sitewide — amber mark on brand hover (header + footer)
 Default stays mark-white; hover/focus swaps to mark-amber-hover
 ========================================================================== */
.brand-mark-stack {
 position: relative;
 display: inline-grid;
 width: 40px;
 flex-shrink: 0;
 place-items: center;
}

.brand-footer .brand-mark-stack {
 width: 28px;
}

.brand-mark-stack .brand-mark {
 grid-area: 1 / 1;
 width: 100%;
 height: auto;
 display: block;
 transition: opacity 0.18s ease;
}

.brand-mark-stack .brand-mark-amber {
 opacity: 0;
}

.brand:hover .brand-mark-stack .brand-mark-base,
.brand:focus-visible .brand-mark-stack .brand-mark-base,
.brand-mark-stack:hover .brand-mark-base {
 opacity: 0;
}

.brand:hover .brand-mark-stack .brand-mark-amber,
.brand:focus-visible .brand-mark-stack .brand-mark-amber,
.brand-mark-stack:hover .brand-mark-amber {
 opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
 .brand-mark-stack .brand-mark {
 transition: none;
 }
}

/* ==========================================================================
 Sitewide chrome (2026-09-22) — Services / About / Contact
 Soft light hairlines + section elevation matching Home depth language.
 Does NOT invent Home-only class names; uses each page's real sections.
 Home-specific hero/orb/hairlines remain under body.page-home above.
 ========================================================================== */

/* Soft light hairlines at real multi-section seams.
 Judgment: leave .ai-addons-band's existing amber top cue alone (not a soft-white replace). */
body:not(.page-home) .page-hero {
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

body:not(.page-home) .section-services-v2,
body:not(.page-home) .section-about,
body:not(.page-home) .section-navy-soft {
 border-top: 1px solid rgba(255, 255, 255, 0.16);
 position: relative;
}

/* ::before hairline so section drop shadows don't swallow the seam */
body:not(.page-home) .section-services-v2::before,
body:not(.page-home) .section-about::before,
body:not(.page-home) .section-navy-soft::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 1px;
 background: rgba(255, 255, 255, 0.16);
 z-index: 6;
 pointer-events: none;
}

/* Services: packages → AI add-ons (AI keeps amber ::before; soft cut on packages bottom) */
body:not(.page-home) .section-services-v2 {
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

body:not(.page-home) .ai-addons-band {
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Services CTA after AI band */
body:not(.page-home) .cta-band {
 border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Section drop shadows / elevation — same depth language as Home */
body:not(.page-home) .page-hero,
body:not(.page-home) .section-services-v2,
body:not(.page-home) .ai-addons-band,
body:not(.page-home) .section-about,
body:not(.page-home) .section-navy-soft,
body:not(.page-home) .cta-band {
 position: relative;
 isolation: isolate;
}

body:not(.page-home) .page-hero {
 z-index: 5;
 box-shadow:
 0 20px 44px rgba(0, 0, 0, 0.4),
 0 6px 16px rgba(0, 0, 0, 0.22);
}

body:not(.page-home) .section-services-v2,
body:not(.page-home) .section-about,
body:not(.page-home) .section-navy-soft {
 z-index: 4;
 box-shadow:
 0 24px 52px rgba(0, 0, 0, 0.44),
 0 -12px 36px rgba(0, 0, 0, 0.22),
 0 8px 20px rgba(0, 0, 0, 0.24);
}

body:not(.page-home) .ai-addons-band {
 z-index: 3;
 box-shadow:
 0 24px 52px rgba(0, 0, 0, 0.44),
 0 -12px 36px rgba(0, 0, 0, 0.22),
 0 8px 20px rgba(0, 0, 0, 0.24);
}

body:not(.page-home) .cta-band {
 z-index: 2;
 box-shadow:
 0 -16px 40px rgba(0, 0, 0, 0.36),
 0 20px 48px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
 SERVICES HERO — Home-style treatment (scoped; Home orb framing untouched)
 ========================================================================== */

body.page-services .hero.hero-services {
 min-height: clamp(30rem, 72vh, 42rem);
 height: auto;
 max-height: none;
 padding-bottom: 0;
}

body.page-services .hero-media {
 z-index: 0;
 inset: 0;
}

body.page-services .hero-poster,
body.page-services .hero-bg {
 object-fit: cover;
 /* Clip 02 is center-tunnel (vanishing point mid-frame); light right bias */
 object-position: 52% center;
 filter: saturate(0.92) contrast(1.02);
}

@media (max-width: 900px) {
 body.page-services .hero-poster,
 body.page-services .hero-bg {
 object-position: 55% center;
 }
}

@media (max-width: 760px) {
 body.page-services .hero-poster,
 body.page-services .hero-bg {
 object-position: 58% center;
 }
}

body.page-services .hero-scrim {
 z-index: 2;
 pointer-events: none;
 background: linear-gradient(
 90deg,
 rgba(18, 39, 68, 0.92) 0%,
 rgba(18, 39, 68, 0.75) 40%,
 rgba(18, 39, 68, 0.25) 75%,
 rgba(18, 39, 68, 0) 100%
 );
}

body.page-services .hero-content {
 z-index: 3;
 padding: clamp(2rem, 5vh, 3.25rem) 0 clamp(1.5rem, 3vh, 2.25rem);
 justify-content: center;
}

body.page-services .hero-blend {
 z-index: 1;
}

body.page-services .hero-media::after {
 height: 16%;
 z-index: 3;
 background: linear-gradient(180deg, transparent 0%, rgba(18, 39, 68, 0.1) 100%);
}

body.page-services .hero-main {
 grid-template-columns: minmax(0, 1fr);
 align-items: center;
}

body.page-services .hero-copy {
 max-width: 36rem;
}

body.page-services .hero h1 {
 max-width: 20ch;
}

body.page-services .hero-lead {
 margin: 0;
 color: rgba(255, 255, 255, 0.88);
 font-size: clamp(0.98rem, 1.25vw, 1.1rem);
 line-height: 1.55;
 max-width: 38rem;
}

/* Services hero → pathway seam: soft light hairline (match Home hero→Why; not amber) */
body.page-services .hero.hero-services {
 border-bottom: 1px solid rgba(255, 255, 255, 0.16);
 position: relative;
}

body.page-services .pathway-bar {
 position: relative;
 border-top: 1px solid rgba(255, 255, 255, 0.16); /* was 2px amber — match Home soft cut */
}

body.page-services .pathway-bar::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 1px;
 background: rgba(255, 255, 255, 0.16);
 z-index: 6;
 pointer-events: none;
}

/* Old short navy .page-hero must not affect Services (uses .hero now) */
body.page-services .page-hero {
 display: none;
}

/* ==========================================================================
 Brand wordmark — Josefin Sans stacked ARCLIGHT / SYNERGIES (text only)
 Scoped to .brand-wordmark*; does not touch Inter body/UI or mark images.
 ========================================================================== */
.brand-wordmark {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 0.08em;
 font-family: "Josefin Sans", "Inter", system-ui, sans-serif;
 line-height: 1.05;
 white-space: nowrap;
 overflow: visible;
 text-overflow: clip;
 color: inherit;
}

.brand-wordmark-arclight {
 font-weight: 700;
 font-size: 1.06rem;
 letter-spacing: 0.02em;
 line-height: 1.05;
}

.brand-wordmark-synergies {
 font-weight: 400;
 font-size: 0.66rem; /* ~0.62 of ARCLIGHT */
 letter-spacing: 0.37em; /* fixed tracking so width ~matches ARCLIGHT */
 line-height: 1.05;
}

.brand-footer .brand-wordmark-arclight {
 font-size: 0.84rem;
}

.brand-footer .brand-wordmark-synergies {
 font-size: 0.52rem;
 letter-spacing: 0.38em;
}

@media (max-width: 900px) {
 .brand-wordmark-arclight {
 font-size: 1.00rem;
 }
 .brand-wordmark-synergies {
 font-size: 0.62rem;
 letter-spacing: 0.37em;
 }
 .brand-footer .brand-wordmark-arclight {
 font-size: 0.80rem;
 }
 .brand-footer .brand-wordmark-synergies {
 font-size: 0.50rem;
 }
}

/* Optical align: lift mark stack slightly vs stacked Josefin wordmark (white + amber hover) */
.brand-mark-stack {
 transform: translateY(-3px);
}
.brand-footer .brand-mark-stack {
 transform: translateY(-2px);
}
/* Contact marketing opt-in */
.contact-form .field-consent {
  margin: 0.75rem 0 1rem;
}
.contact-form .consent-label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 400;
  color: inherit;
  cursor: pointer;
}
.contact-form .consent-label input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
}


/* Header click-to-call: keep Call label + 44px tap target on small screens */
@media (max-width: 900px) {
  .header-phone {
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    justify-content: center;
  }
  .header-phone-label {
    display: inline !important;
  }
  .header-phone-number {
    display: inline !important;
  }
}

/* Service status page */
.status-page {
  max-width: 58rem;
}
/* Status only: pull green banner a bit closer to the hero/section seam */
.section.section-about:has(.status-page) {
  padding-top: 3.85rem;
}
.status-banner {
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.status-banner-green {
  background: rgba(34, 160, 90, 0.18);
  color: #b7f0cb;
}
.status-banner-yellow {
  background: rgba(220, 170, 40, 0.18);
  color: #ffe6a3;
}
.status-banner-red {
  background: rgba(210, 70, 70, 0.2);
  color: #ffc4c4;
}
.status-banner-unknown,
.status-banner-warn {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}
.status-meta,
.status-help,
.status-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}
.status-section-title {
  margin: 1.15rem 0 0.55rem;
  font-size: 1.02rem;
}
.status-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.status-row {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 0;
}
.status-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}
.status-row-body strong {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}
.status-row-meta {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
  line-height: 1.3;
}
.status-row-msg {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.28rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.status-dot-green { background: #2ecc71; }
.status-dot-yellow { background: #f1c40f; }
.status-dot-red { background: #e74c3c; }
.status-dot-unknown { background: #8899aa; }


/* Extra space between public feeds and following copy */
#status-public-list {
  margin-bottom: 2rem;
}
#status-public-list + #status-note {
  margin-top: 0.5rem;
}
#status-note + .status-disclaimer,
#status-public-list + .status-disclaimer {
  margin-top: 1.5rem;
}
.status-disclaimer {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 1rem 0 0.85rem;
  max-width: 58rem;
}

@media (max-width: 900px) {
  .status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .status-list {
    grid-template-columns: 1fr;
  }
  .status-row {
    padding: 0.5rem 0.6rem;
  }
}