:root {
   --ground: #101214;
   --ground-card: #16191D;
   --ground-elevated: #1E2328;
   --ground-surface: #252B31;
   --ground-subtle: #131619;
   --ink: #F0F3F6;
   --ink-muted: #ABB8C5;
   --ink-subtle: #96A2AF;
   --ink-inverse: #0D0F11;
   --jewel: #0E5A44;
   --jewel-bright: #1EC291;
   --jewel-dark: #083B2C;
   --jewel-glow: rgba(20, 131, 98, 0.24);
   --brass: #C59B27;
   --brass-bright: #DFB236;
   --brass-dark: #8C6E18;
   --brass-tint: rgba(197, 155, 39, 0.12);
   --border: #283038;
   --border-light: #38434E;
   --border-subtle: rgba(240, 243, 246, 0.08);
   --border-brass: rgba(197, 155, 39, 0.45);
   --hazard-stripe-1: rgba(197, 155, 39, 0.18);
   --hazard-stripe-2: rgba(16, 18, 20, 0.95);
   --danger: #D9383A;
   --danger-surface: rgba(217, 56, 58, 0.12);
   --success: #148362;
   --success-surface: rgba(20, 131, 98, 0.14);

   --vijo-e44: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
   --vijo-de2: "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --vijo-a7f: "JetBrains Mono", 'SF Mono', Consolas, monospace;

   --type-display-hero: clamp(2.4rem, 5.2vw + 1rem, 5.5rem);
   --type-display-1: clamp(2.1rem, 4.2vw + 0.6rem, 4.2rem);
   --type-display-2: clamp(1.75rem, 3vw + 0.5rem, 3rem);
   --type-display-3: clamp(1.35rem, 2vw + 0.4rem, 2.2rem);
   --type-display-4: clamp(1.15rem, 1.4vw + 0.3rem, 1.65rem);

   --type-body-xl: clamp(1.15rem, 0.9vw + 0.85rem, 1.35rem);
   --type-body-lg: clamp(1.05rem, 0.6vw + 0.82rem, 1.18rem);
   --type-body: 1rem;
   --type-body-sm: 0.875rem;
   --type-body-xs: 0.775rem;
   --type-meta: 0.75rem;

   --space-4xs: 0.125rem;
   --space-3xs: 0.25rem;
   --space-2xs: 0.5rem;
   --space-xs: 0.75rem;
   --space-sm: 1rem;
   --space-md: 1.5rem;
   --space-lg: 2rem;
   --space-xl: 3rem;
   --space-2xl: 4.5rem;
   --space-3xl: 6.5rem;

   --space-4xl: 9rem;
   --space-section: clamp(3.75rem, 7.5vw, 8rem);

   --container-max: 1360px;
   --container-wide: 1480px;
   --container-narrow: 920px;
   --container-prose: 74ch;

   --radius-none: 0;
   --radius-sm: 2px;
   --radius-base: 2px;

   --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --dur-fast: 140ms;
   --dur-med: 240ms;
   --dur-slow: 420ms;
   --trans-interactive: 160ms cubic-bezier(0.2, 0, 0, 1);
   --trans-flow: 240ms cubic-bezier(0.16, 1, 0.3, 1);

   --header-height: 4.75rem;
   --header-condensed-height: 3.75rem;
}

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

html {
   background-color: var(--ground);
   color: var(--ink);
   font-size: 16px;
   line-height: 1.65;
   text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body {
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--vijo-de2);
   font-weight: 400;
   font-size: var(--type-body);
   line-height: 1.68;
   letter-spacing: 0.012em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   position: relative;
}

button, input, select, textarea {
   font: inherit;
   color: inherit;
}

img, picture, video, canvas, svg {
   display: block;
   max-width: 100%;
}

img {
   height: auto;
   font-style: italic;
   shape-margin: 0.75rem;
}

svg.icon {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: square;
   stroke-linejoin: miter;
}

ul, ol {
   list-style: none;
}

a {
   color: inherit;
   text-decoration: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
}

fieldset {
   border: none;
   padding: 0;
   margin: 0;
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--vijo-e44);
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.035em;
   line-height: 0.98;
   color: var(--ink);
   overflow-wrap: break-word;
   word-break: normal;
   hyphens: manual;
}

h1 {
   font-size: var(--type-display-hero);
   line-height: 0.94;
   letter-spacing: 0.025em;
}

h2 {
   font-size: var(--type-display-1);
   line-height: 0.96;
}

h3 {
   font-size: var(--type-display-2);
   line-height: 1;
}

h4 {
   font-size: var(--type-display-3);
   line-height: 1.05;
}

h5 {
   font-size: var(--type-display-4);
   line-height: 1.1;
}

h6 {
   font-family: var(--vijo-a7f);
   font-size: var(--type-body-sm);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   line-height: 1.2;
}

p {
   max-width: var(--container-prose);
   color: var(--ink-muted);

   font-size: var(--type-body);
   line-height: 1.68;
}

p strong, span strong, li strong {
   color: var(--ink);
   font-weight: 600;
}

p.lead {
   font-size: var(--type-body-xl);
   line-height: 1.55;
   color: var(--ink);
}

.mono {
   font-family: var(--vijo-a7f);
   letter-spacing: -0.02em;
}

.brass-rule {
   height: 1px;
   background: var(--brass);
   width: 100%;
   border: none;
}

.hazard-bar {
   height: 4px;
   width: 100%;
   background: repeating-linear-gradient(
      -45deg,
      var(--hazard-stripe-1),
      var(--hazard-stripe-1) 8px,
      var(--hazard-stripe-2) 8px,
      var(--hazard-stripe-2) 16px
   );
   border-bottom: 1px solid var(--border);

}

.asymmetric-lockup {
   display: flex;
   flex-direction: column;
   position: relative;
   padding-left: var(--space-md);
   border-left: 2px solid var(--brass);
}

.asymmetric-lockup .lockup-primary {
   font-family: var(--vijo-e44);
   font-size: var(--type-display-hero);
   line-height: 0.92;
   color: var(--ink);
   text-transform: uppercase;
   letter-spacing: 0.03em;
}

.asymmetric-lockup .lockup-offset {
   font-family: var(--vijo-e44);
   font-size: var(--type-display-hero);
   line-height: 0.92;
   color: var(--brass);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   transform: translateX(clamp(0.75rem, 2vw, 2.5rem));
   position: relative;
   display: inline-block;
}

.asymmetric-lockup .lockup-rule {
   width: clamp(3rem, 10vw, 8rem);
   height: 2px;
   background-color: var(--brass);
   margin: var(--space-xs) 0;
}

.container {
   width: 100%;
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: clamp(1rem, 4vw, 2.5rem);
   padding-right: clamp(1rem, 4vw, 2.5rem);
}

.container-wide {
   width: 100%;
   max-width: var(--container-wide);
   margin-left: auto;
   margin-right: auto;
   padding-left: clamp(1rem, 4vw, 2.5rem);
   padding-right: clamp(1rem, 4vw, 2.5rem);
}

.container-narrow {
   width: 100%;
   max-width: var(--container-narrow);
   margin-left: auto;
   margin-right: auto;
   padding-left: clamp(1rem, 4vw, 2rem);
   padding-right: clamp(1rem, 4vw, 2rem);
}

.grid {
   display: grid;
   gap: var(--space-lg);
}

.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--space-lg);
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--space-lg);
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-md);
}

.flex-row {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

.flex-col {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.flow > * + * {
   margin-top: var(--space-md);
}

.flow-tight > * + * {
   margin-top: var(--space-xs);
}

.flow-loose > * + * {
   margin-top: var(--space-xl);
}

.split-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
   min-height: calc(100vh - var(--header-height));
   align-items: stretch;
}

.hero-copy-pane {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
   background-color: var(--ground);
   z-index: 2;
   position: relative;
}

.hero-photo-pane {
   position: relative;
   min-height: 28rem;
   overflow: hidden;
   background-color: var(--ground-card);
}

.hero-photo-pane img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.hero-photo-pane::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      90deg,
      rgba(16, 18, 20, 0.8) 0%,
      rgba(16, 18, 20, 0.2) 30%,
      rgba(16, 18, 20, 0.4) 100%
   );
   pointer-events: none;
}

.feature-strip {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   background-color: var(--ground-card);
}

.feature-item {
   padding: var(--space-lg) var(--space-md);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
}

.feature-item:last-child {
   border-right: none;
}

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

.skip-link {
   position: absolute;
   top: -100px;
   left: 1rem;
   background: var(--brass);
   color: var(--ground);
   font-family: var(--vijo-a7f);
   font-size: var(--type-body-sm);
   font-weight: 600;
   padding: 0.75rem 1.5rem;
   z-index: 9999;
   border: 2px solid var(--ink);
   transition: top var(--dur-fast) var(--ease-out-cubic);
}

.skip-link:focus {
   top: 1rem;
}

.full-photo-break {
   width: 100%;
   position: relative;
   margin: var(--space-section) 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   overflow: hidden;
   background-color: var(--ground-card);
}

.full-photo-break img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   object-position: center;
   filter: contrast(1.05) brightness(0.92);
}

.photo-caption-tag {
   position: absolute;
   bottom: 0;
   right: 0;
   background-color: rgba(16, 18, 20, 0.92);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-top: 1px solid var(--border);
   border-left: 1px solid var(--border);
   padding: 0.65rem 1.25rem;
   font-family: var(--vijo-a7f);
   font-size: var(--type-meta);
   color: var(--ink-muted);
   display: flex;
   align-items: center;
   gap: 0.5rem;
   letter-spacing: 0.04em;
}

.photo-caption-tag strong {
   color: var(--brass);
}

@media (max-width: 960px) {
   .split-hero-grid {
      grid-template-columns: 1fr;
      min-height: auto;
   }
   .hero-photo-pane {
      min-height: 20rem;
      order: -1;
   }
   .hero-photo-pane::after {
      background: linear-gradient(
         0deg,
         rgba(16, 18, 20, 0.95) 0%,
         rgba(16, 18, 20, 0.2) 60%
      );
   }
   .grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .grid-3 {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 640px) {
   .grid-2 {
      grid-template-columns: 1fr;
   }
   .grid-4 {
      grid-template-columns: 1fr;
   }
   .feature-strip {
      grid-template-columns: 1fr;
   }
   .feature-item {
      border-right: none;
      border-bottom: 1px solid var(--border);
   }
   .feature-item:last-child {
      border-bottom: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}