:root {
  --ink: #0d0d0d;
  --ink-soft: #151515;
  --cream: #ffffff;
  --paper: #ffffff;
  --gold: #fdd100;
  --gold-bright: #fff04a;
  --steel: #8f9591;
  --line-dark: rgba(255, 255, 255, 0.17);
  --line-light: rgba(13, 13, 13, 0.18);
  --display: "Big Shoulders Display", Impact, sans-serif;
  --body: "Crimson Pro", Georgia, serif;
  --quote: "Gloock", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--body); font-size: 18px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; background: var(--gold); color: var(--ink); padding: .75rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; min-height: 82px; padding: 0 clamp(1.25rem,4vw,4.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line-dark); background: rgba(9,10,10,.68); backdrop-filter: blur(18px); transition: background .25s ease; }
.site-header.scrolled { background: rgba(9,10,10,.94); }
.mark { display: inline-flex; align-items: center; gap: .8rem; width: max-content; }
.mark-logo { width: 46px; height: 38px; object-fit: contain; }
.mark-name { font: 800 1.1rem/1 var(--display); letter-spacing: .16em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.4rem,3vw,3rem); }
.desktop-nav a, .footer-links a { color: rgba(255,255,255,.68); font: 700 .92rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .footer-links a:hover, .footer-links a:focus-visible { color: var(--gold-bright); }
.header-cta { justify-self: end; border-bottom: 2px solid var(--gold); padding: .35rem 0; font: 700 .9rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.menu-button, .mobile-menu { display: none; }

.hero { position: relative; min-height: 100svh; overflow: hidden; padding: 9.5rem clamp(1.25rem,7vw,8rem) 5rem; display: flex; align-items: center; background: radial-gradient(circle at 78% 32%, rgba(215,173,86,.13), transparent 28%), linear-gradient(135deg, #070808 0%, #111313 60%, #090a0a 100%); }
.hero-portrait { position: absolute; z-index: 1; top: 82px; right: 3vw; bottom: 0; width: min(48vw, 720px); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hero-portrait::before { content: ""; position: absolute; inset: 9% 0 0 18%; border: 1px solid rgba(215,173,86,.22); transform: skew(-4deg); }
.hero-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, transparent 38%), linear-gradient(0deg, var(--ink) 0%, transparent 38%); }
.hero-portrait img { width: min(100%, 690px); max-height: 90%; object-fit: contain; filter: grayscale(1) contrast(1.08) brightness(.76); opacity: .72; mix-blend-mode: luminosity; }
.hero::before { content: "FE"; position: absolute; right: -1vw; bottom: -17vh; font: 900 min(62vw, 58rem)/.7 var(--display); letter-spacing: -.09em; color: transparent; -webkit-text-stroke: 1px rgba(215,173,86,.12); transform: skew(-6deg); pointer-events: none; }
.hero-noise { position: absolute; inset: 0; opacity: .25; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
.hero-rail { position: absolute; top: 82px; left: clamp(1rem,2vw,2rem); bottom: 0; width: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem; }
.hero-rail span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .65rem/1 var(--display); letter-spacing: .22em; color: rgba(255,255,255,.45); }
.hero-rail i { width: 1px; height: 22px; background: var(--gold); }
.hero-content { position: relative; z-index: 2; max-width: 1050px; margin-left: clamp(1.7rem,4vw,4rem); }
.eyebrow { margin: 0 0 1.3rem; color: var(--gold); font: 700 .8rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.eyebrow.dark { color: #7b5e27; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 1.6rem; font: 800 clamp(4.7rem,11.5vw,10.5rem)/.78 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
h1 span { display: block; }
h1 .gold { color: var(--gold); font-style: italic; transform: translateX(clamp(.5rem,3vw,3rem)); }
.hero-copy { max-width: 620px; margin: 0 0 2.2rem .35rem; color: rgba(255,255,255,.76); font-size: clamp(1.12rem,1.6vw,1.34rem); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-left: .35rem; }
.button { min-height: 52px; padding: .9rem 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 2.5rem; border: 1px solid transparent; font: 800 .92rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-gold { background: var(--gold); color: var(--ink); }
.button-gold:hover, .button-gold:focus-visible { background: var(--gold-bright); }
.button-ghost { border-color: rgba(255,255,255,.36); }
.button-ghost:hover, .button-ghost:focus-visible { border-color: var(--cream); }
.hero-stamp { position: absolute; right: clamp(1.5rem,5vw,5rem); top: 28%; width: 112px; height: 112px; border: 1px solid rgba(215,173,86,.5); border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(8deg); color: var(--gold); }
.hero-stamp span { font: 700 .62rem/1 var(--body); letter-spacing: .17em; }
.hero-stamp strong { margin: .25rem 0; font: 900 1.75rem/1 var(--display); }
.scroll-cue { position: absolute; right: clamp(1.25rem,4vw,4.5rem); bottom: 2rem; display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.4); font: 600 .7rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue i { width: 60px; height: 1px; background: var(--gold); }

.manifesto { position: relative; padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: clamp(3rem,10vw,10rem); color: var(--ink); background: var(--paper); }
.section-number { position: absolute; top: 1.4rem; right: clamp(1.25rem,4vw,4.5rem); font: 700 .8rem/1 var(--body); color: rgba(9,10,10,.42); letter-spacing: .1em; }
.manifesto h2, .brands-heading h2 { font: 800 clamp(3.8rem,8vw,8rem)/.82 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.manifesto h2 em { color: #7b5e27; font-style: italic; }
.manifesto-body { padding-top: 2.7rem; }
.manifesto-body > p { color: rgba(9,10,10,.72); font-size: clamp(1.05rem,1.4vw,1.2rem); line-height: 1.75; }
blockquote { margin: 3rem 0 0; padding: 1.25rem 0 1.25rem 1.3rem; border-left: 3px solid var(--gold); font: 400 clamp(1.5rem,2.2vw,2.25rem)/1.2 var(--quote); }
blockquote cite { display: block; margin-top: .85rem; font: 700 .72rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }

.pillars { padding: clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,8rem); background: var(--ink-soft); }
.pillars-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 4rem; }
.pillars-heading h2, .fit-section h2, .contact h2 { margin-bottom: 0; font: 800 clamp(3.7rem,7vw,7rem)/.82 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.pillars-heading > p { max-width: 510px; margin-bottom: .3rem; color: rgba(255,255,255,.64); font-size: 1.12rem; }
.pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.pillar-card { min-height: 310px; padding: 1.7rem; display: flex; flex-direction: column; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); transition: background .25s ease, transform .25s ease; }
.pillar-card:hover { background: rgba(215,173,86,.055); transform: translateY(-4px); }
.pillar-card > span { color: var(--gold); font-size: .72rem; letter-spacing: .12em; }
.pillar-card h3 { margin: auto 0 1rem; font: 700 clamp(2.5rem,4vw,4rem)/1 var(--display); text-transform: uppercase; }
.pillar-card p { margin: 0; color: rgba(255,255,255,.62); font-size: 1.02rem; }

.scripture-band { padding: clamp(4.5rem,8vw,8rem) clamp(1.25rem,7vw,8rem); background: var(--gold); color: var(--ink); }
.scripture-band .eyebrow { color: rgba(9,10,10,.62); }
.scripture-band blockquote { max-width: 1120px; margin: 0; padding: 0; border: 0; font-size: clamp(2.7rem,6.5vw,6.4rem); line-height: 1.02; letter-spacing: -.025em; }
.scripture-band blockquote cite { margin-top: 1.5rem; }

.brands { position: relative; padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); background: var(--cream); color: var(--ink); }
.brands-heading { max-width: 760px; margin-bottom: clamp(3rem,7vw,6rem); }
.brands-heading > p:last-child { max-width: 610px; color: rgba(9,10,10,.63); font-size: 1.05rem; }
.brand-list { border-top: 1px solid var(--line-light); }
.brand-row { min-height: 118px; padding: 1.5rem .3rem; display: grid; grid-template-columns: 54px minmax(0,1fr) minmax(130px,220px) 54px; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line-light); transition: padding .25s ease, background .25s ease; }
.brand-row:hover, .brand-row:focus-visible { padding-left: 1rem; padding-right: 1rem; background: rgba(215,173,86,.12); outline: none; }
.brand-row-static { cursor: default; }
.brand-row-static:hover { padding-left: .3rem; padding-right: .3rem; background: transparent; }
.brand-index { align-self: start; color: #665500; font: 700 .72rem/1 var(--display); }
.brand-row h3 { margin: 0 0 .28rem; font: 700 clamp(1.8rem,3.2vw,3rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.025em; }
.brand-row p { margin: 0; color: rgba(9,10,10,.58); }
.brand-type { color: rgba(13,13,13,.55); font: 700 .78rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.brand-arrow { justify-self: end; font-size: 1.4rem; transition: transform .2s ease; }
.brand-row:hover .brand-arrow { transform: translate(4px,-4px); }
.brand-row.featured h3::after { content: "FLAGSHIP"; display: inline-block; margin-left: .7rem; padding: .25rem .4rem; vertical-align: middle; background: var(--ink); color: var(--gold); font: 700 .52rem/1 var(--body); letter-spacing: .1em; }

.fit-section { padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); background: #151717; }
.fit-kicker { margin-bottom: 1.5rem; color: var(--gold); font-size: .73rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.fit-section h2 { max-width: 880px; margin-bottom: 4rem; }
.fit-lines { border-top: 1px solid var(--line-dark); }
.fit-lines p { margin: 0; padding: 1.6rem 0; display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid var(--line-dark); color: rgba(255,255,255,.84); font: 600 clamp(1.3rem,2vw,2rem)/1.2 var(--display); text-transform: uppercase; }
.fit-lines span { color: var(--gold); font: 500 .72rem/1.8 var(--body); letter-spacing: .1em; }
.fit-scripture { max-width: 760px; margin: 3.5rem 0 0; color: rgba(255,255,255,.75); font: 400 clamp(1.35rem,2.2vw,2rem)/1.35 var(--quote); }
.fit-scripture span { display: block; margin-top: .8rem; color: var(--gold); font: 700 .7rem/1 var(--body); letter-spacing: .15em; }

.contact { min-height: 80svh; padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(215,173,86,.13), transparent 37%), var(--ink); }
.contact h2 { max-width: 960px; margin-bottom: 2rem; font-size: clamp(4.4rem,10vw,10rem); }
.contact > p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.7); font-size: 1.15rem; }
.button-large { margin-top: 1.6rem; min-height: 60px; padding-inline: 1.8rem; }

footer { min-height: 140px; padding: 2rem clamp(1.25rem,4vw,4.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-top: 1px solid var(--line-dark); color: rgba(255,255,255,.5); font-size: .82rem; }
.footer-logo { width: 116px; height: 76px; display: block; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }
footer > p { margin: 0; text-align: center; }
.footer-links { display: flex; gap: 1rem; }
footer > span:last-child { justify-self: end; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta { display: none; }
  .menu-button { display: flex; width: 44px; height: 44px; padding: 11px; flex-direction: column; justify-content: center; gap: 5px; border: 0; background: transparent; cursor: pointer; }
  .menu-button span:not(.sr-only) { width: 100%; height: 1px; background: var(--cream); transition: transform .2s ease, opacity .2s ease; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: 82px; left: 0; right: 0; padding: 1rem 1.25rem 1.5rem; display: none; flex-direction: column; background: rgba(9,10,10,.98); border-bottom: 1px solid var(--line-dark); }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { padding: .9rem 0; border-bottom: 1px solid var(--line-dark); font: 700 1.4rem/1 var(--display); text-transform: uppercase; }
  .hero-stamp { top: auto; right: 1.5rem; bottom: 5rem; width: 92px; height: 92px; opacity: .72; }
  .hero-portrait { right: -10vw; width: 64vw; opacity: .52; }
  .manifesto { grid-template-columns: 1fr; gap: 1rem; }
  .manifesto-body { padding-top: 0; max-width: 680px; }
  .pillars-heading { align-items: start; flex-direction: column; }
  .pillar-grid { grid-template-columns: repeat(2,1fr); }
  .brand-row { grid-template-columns: 42px minmax(0,1fr) 40px; }
  .brand-type { display: none; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > p { display: none; }
  .footer-links { justify-self: end; }
  footer > span:last-child { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
  .site-header { min-height: 72px; }
  .mobile-menu { top: 72px; }
  .hero { min-height: 820px; padding-top: 8.5rem; align-items: flex-start; }
  .hero::before { font-size: 90vw; bottom: -5vh; right: -12vw; }
  .hero-portrait { top: 120px; right: -36vw; width: 105vw; opacity: .38; }
  .hero-rail { display: none; }
  .hero-content { margin-left: 0; }
  h1 { font-size: clamp(4rem,21vw,6.3rem); }
  h1 .gold { transform: none; }
  .hero-copy { margin-left: 0; }
  .hero-actions { margin-left: 0; }
  .button { width: 100%; }
  .hero-stamp { display: none; }
  .scroll-cue { left: 1.25rem; right: auto; }
  .manifesto h2, .brands-heading h2, .pillars-heading h2, .fit-section h2 { font-size: clamp(3.3rem,17vw,5rem); }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card { min-height: 230px; }
  .brand-row { min-height: 126px; padding-block: 1.35rem; grid-template-columns: 28px minmax(0,1fr) 26px; gap: .7rem; }
  .brand-row h3 { font-size: 1.7rem; }
  .brand-row p { font-size: .88rem; }
  .brand-row.featured h3::after { display: none; }
  .fit-lines p { grid-template-columns: 42px 1fr; }
  .contact h2 { font-size: clamp(4rem,19vw,6.5rem); }
  footer { grid-template-columns: 1fr; }
  .footer-links { justify-self: start; flex-wrap: wrap; }
  footer > span:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}