@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Manrope", Arial, sans-serif;
  --ink: #02050b;
  --navy: #041127;
  --navy2: #071a36;
  --paper: #f5f1e8;
  --muted: #a9b1bd;
  --gold: #c9993d;
  --gold2: #f4d483;
  --blue: #0a7fff;
  --blue2: #27a5ff;
  --line: rgba(231, 199, 130, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-sans), sans-serif; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 2; }

.hero { min-height: 100vh; position: relative; overflow: hidden; background: #02060f; border-bottom: 1px solid rgba(244,212,131,.22); }
.heroMedia { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(1,4,11,.76) 0%, rgba(1,6,16,.48) 35%, rgba(1,7,19,.27) 63%, rgba(1,5,12,.56) 100%), linear-gradient(180deg, rgba(1,5,14,.05) 0%, rgba(1,5,14,.08) 57%, #02060f 100%), url("assets/dallas-blue-gold-skyline.png"); background-size: cover; background-position: center bottom; filter: saturate(1.08) contrast(1.06); transform: scale(1.012); }
.heroMedia::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 69% 34%, rgba(8,124,255,.14), transparent 32%), linear-gradient(90deg, rgba(2,5,12,.66), transparent 38%, rgba(2,5,12,.22)); }
.hero::after { content: ""; position: absolute; inset: auto -12% -44% 26%; height: 72%; border: 1px solid rgba(200,154,58,.16); border-radius: 50%; transform: rotate(-9deg); }
.heroGlow { position: absolute; width: 680px; height: 680px; left: -10%; top: 12%; border-radius: 50%; background: rgba(0,105,255,.20); filter: blur(105px); }
.heroGrid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 86px 86px; mask-image: linear-gradient(to bottom, black, transparent 76%); }
.nav { height: 102px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.13); z-index: 100; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 25px rgba(8,124,255,.18); }
.brand span { display: flex; flex-direction: column; }
.brand strong { font-family: var(--font-display), serif; font-size: 25px; line-height: 1; letter-spacing: .08em; color: var(--gold2); }
.brand small { margin-top: 5px; color: #d4d8de; letter-spacing: .14em; text-transform: uppercase; font-size: 8px; }
.navlinks { display: flex; align-items: center; gap: 34px; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: #c4cad3; }
.navlinks a { transition: color .2s ease; }
.navlinks a:hover { color: var(--gold2); }
.navCta { border: 1px solid rgba(224,186,103,.52); padding: 13px 19px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; transition: .25s ease; }
.navCta:hover { background: var(--gold); color: #070707; }
.heroInner { min-height: calc(100vh - 102px); display: grid; grid-template-columns: minmax(320px, 390px) minmax(0, 650px); justify-content: space-between; gap: 88px; align-items: center; padding: 70px 0 105px; }
.heroLogoStage { position: relative; min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.heroLogoStage img { position: relative; z-index: 2; width: min(390px, 100%); max-width: 100%; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 34px 62px rgba(0,0,0,.72)) drop-shadow(0 0 32px rgba(0,116,255,.45)) drop-shadow(0 0 4px rgba(244,212,131,.4)); -webkit-mask-image: radial-gradient(circle at center, #000 0 61%, rgba(0,0,0,.96) 66%, transparent 73%); mask-image: radial-gradient(circle at center, #000 0 61%, rgba(0,0,0,.96) 66%, transparent 73%); }
.heroLogoHalo { position: absolute; width: 365px; height: 365px; border-radius: 50%; border: 1px solid rgba(244,212,131,.28); box-shadow: 0 0 110px rgba(0,116,255,.26), inset 0 0 88px rgba(202,155,58,.08); }
.heroLogoTag { margin-top: 2px; position: relative; z-index: 3; width: 100%; text-align: center; white-space: nowrap; color: #b8c0cb; font-size: 9px; text-transform: uppercase; letter-spacing: .24em; text-shadow: 0 0 18px rgba(8,124,255,.28); }
.heroCopy { width: 100%; max-width: 650px; min-width: 0; justify-self: end; padding: 28px 0; text-shadow: 0 2px 22px rgba(0,0,0,.6); }
.eyebrow, .sectionLabel { color: var(--gold2); text-transform: uppercase; letter-spacing: .23em; font-size: 11px; font-weight: 700; }
.eyebrow { display: flex; gap: 11px; align-items: center; }
.eyebrow span { width: 36px; height: 1px; background: var(--gold); }
.hero h1 { margin: 22px 0 26px; max-width: 650px; font-family: var(--font-display), serif; font-size: clamp(57px, 5.4vw, 82px); font-weight: 500; line-height: .92; letter-spacing: -.035em; }
.hero h1 em { display: block; color: var(--gold2); font-weight: 400; }
.lede { max-width: 690px; color: #d2d7df; font-size: 16px; line-height: 1.8; text-shadow: 0 2px 18px rgba(0,0,0,.72); }
.heroActions { display: flex; gap: 14px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 16px 22px; border: 1px solid rgba(255,255,255,.18); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; transition: .25s ease; }
.button.gold { background: linear-gradient(135deg, #ae7921, #e0bb69); color: #060708; border-color: transparent; box-shadow: 0 12px 35px rgba(184,132,37,.16); }
.button.gold:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(184,132,37,.26); }
.button.ghost:hover { border-color: var(--gold); color: var(--gold2); }
.heroProof { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 690px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 22px; }
.heroProof div { display: flex; flex-direction: column; gap: 5px; border-right: 1px solid rgba(255,255,255,.08); padding-right: 18px; }
.heroProof div + div { padding-left: 20px; }
.heroProof strong { color: var(--gold2); font-family: var(--font-display), serif; font-size: 28px; font-weight: 500; }
.heroProof span { color: #8f98a6; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.scrollCue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 15px; color: #747e8b; text-transform: uppercase; letter-spacing: .17em; font-size: 8px; }
.scrollCue i { display: block; width: 70px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

.section { padding: 125px 0; }
.planToReality { position: relative; padding: 110px 0; overflow: hidden; background: radial-gradient(circle at 75% 50%, rgba(8,124,255,.18), transparent 31%), linear-gradient(120deg, #02050b 0%, #06142a 58%, #020812 100%); border-bottom: 1px solid rgba(244,212,131,.14); }
.planToReality::before { content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -200px; border: 1px solid rgba(201,153,61,.16); border-radius: 50%; box-shadow: 0 0 100px rgba(8,124,255,.08); }
.planToRealityGrid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: center; }
.planCopy h2 { font-family: var(--font-display), serif; font-size: clamp(46px, 4.3vw, 67px); line-height: .98; font-weight: 500; letter-spacing: -.025em; margin: 18px 0 26px; }
.planCopy h2 span { color: var(--gold2); }
.planCopy > p:not(.sectionLabel) { max-width: 470px; color: #aeb8c6; font-size: 13px; line-height: 1.85; }
.textLink { display: inline-flex; gap: 24px; margin-top: 23px; color: var(--gold2); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 700; }
.planHero { position: relative; min-height: 560px; margin: 0; overflow: hidden; border: 1px solid rgba(244,212,131,.2); box-shadow: 0 34px 95px rgba(0,0,0,.45), 0 0 70px rgba(8,124,255,.08); }
.planHero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgba(1,5,12,.9)); }
.planHero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.planHero figcaption { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 26px; display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.planHero figcaption strong { font-family: var(--font-display), serif; color: #fff; font-size: 26px; font-weight: 500; }
.planHero figcaption span { color: var(--gold2); font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }

.statement { padding: 115px 0; background: linear-gradient(115deg, #06152c 0%, #030912 65%); color: var(--paper); border-top: 1px solid rgba(39,165,255,.1); border-bottom: 1px solid rgba(244,212,131,.1); }
.statementGrid { display: grid; grid-template-columns: 1.4fr .65fr; gap: 100px; align-items: end; }
.statement .sectionLabel { color: var(--gold2); }
.statement h2, .sectionHeader h2, .process h2, .coverage h2, .contact h2 { font-family: var(--font-display), serif; font-size: clamp(44px, 5vw, 70px); line-height: 1.02; font-weight: 500; letter-spacing: -.025em; margin: 18px 0 0; }
.statement h2 span, .process h2 span, .contact h2 span { color: var(--gold2); }
.statementText { color: #aeb8c5; line-height: 1.8; font-size: 14px; }
.statementText a { display: inline-flex; gap: 20px; margin-top: 20px; color: var(--gold2); font-weight: 700; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; }

.visualStory { padding: 105px 0 120px; background: #030812; }
.visualIntro { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 34px; }
.visualIntro > p:last-child { max-width: 460px; margin: 0; text-align: right; color: #8190a1; font-family: var(--font-display), serif; font-size: 22px; line-height: 1.35; }
.visualStoryGrid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
.visualStack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.visualCard { margin: 0; position: relative; min-height: 300px; overflow: hidden; background: #0a0c10; box-shadow: 0 30px 80px rgba(0,0,0,.28); border: 1px solid rgba(244,212,131,.11); }
.visualCardLarge { min-height: 680px; }
.visualCard img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.88) contrast(1.04); transition: transform .65s ease; }
.visualCard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(4,7,11,.86) 100%); }
.visualCard:hover img { transform: scale(1.025); }
.visualCard figcaption { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 28px; display: flex; align-items: center; gap: 18px; color: white; }
.visualCard figcaption > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(230,190,100,.62); color: var(--gold2); font-size: 9px; }
.visualCard figcaption div { display: flex; flex-direction: column; }
.visualCard figcaption strong { font-family: var(--font-display), serif; font-size: 25px; font-weight: 500; }
.visualCard figcaption small { color: #b4bdc8; text-transform: uppercase; letter-spacing: .12em; font-size: 8px; margin-top: 3px; }

.services { background: radial-gradient(circle at 20% 0%, rgba(8,124,255,.1), transparent 26%), #050a12; }
.sectionHeader { display: grid; grid-template-columns: 1fr 390px; gap: 80px; align-items: end; margin-bottom: 60px; }
.sectionHeader p:last-child { color: #929ba7; line-height: 1.8; font-size: 13px; }
.serviceGrid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.serviceCard { min-height: 360px; padding: 31px 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; background: linear-gradient(180deg, rgba(10,127,255,.025), transparent); transition: .3s ease; }
.serviceCard:hover { background: linear-gradient(180deg, rgba(8,124,255,.1), rgba(197,149,55,.055)); transform: translateY(-4px); }
.serviceTop { display: flex; justify-content: space-between; color: #7f8793; font-size: 11px; }
.serviceTop i { color: var(--gold); font-style: normal; }
.serviceCard h3 { margin: 90px 0 15px; font-family: var(--font-display), serif; font-size: 30px; font-weight: 500; }
.serviceCard p { color: #8f98a5; font-size: 12px; line-height: 1.8; }
.goldLine { position: absolute; left: 27px; right: 27px; bottom: 27px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(200,154,58,0)); transform-origin: left; transform: scaleX(.45); transition: transform .3s ease; }
.serviceCard:hover .goldLine { transform: scaleX(1); }

.process { background: radial-gradient(circle at 85% 25%, rgba(8,124,255,.10), transparent 30%), linear-gradient(115deg, #081a35 0%, #040910 62%); }
.processGrid { display: grid; grid-template-columns: .75fr 1fr; gap: 120px; }
.processIntro > p:last-child { color: #929ba7; max-width: 430px; line-height: 1.8; font-size: 13px; margin-top: 28px; }
.processSteps { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.1); }
.processSteps li { display: grid; grid-template-columns: 70px 1fr; gap: 25px; padding: 30px 5px; border-bottom: 1px solid rgba(255,255,255,.1); }
.processSteps > li > span { color: var(--gold); font-size: 10px; letter-spacing: .15em; padding-top: 8px; }
.processSteps h3 { margin: 0; font-family: var(--font-display), serif; font-weight: 500; font-size: 31px; }
.processSteps p { margin: 8px 0 0; color: #8e98a7; font-size: 12px; line-height: 1.7; }

.coverage { position: relative; overflow: hidden; text-align: center; background: #030812; min-height: 720px; display: flex; align-items: center; }
.coverageMedia { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(2,7,18,.34), rgba(2,7,18,.72)), url("assets/dallas-blue-gold-skyline.png"); background-size: cover; background-position: center bottom; filter: saturate(1.1) contrast(1.06); transform: scale(1.012); }
.coverageGlow { position: absolute; width: 850px; height: 360px; border-radius: 50%; left: 50%; top: 17%; transform: translateX(-50%); background: rgba(0,111,255,.13); filter: blur(90px); }
.coverageInner { max-width: 920px; }
.coverageLead { max-width: 650px; margin: 26px auto 50px; color: #98a1ad; line-height: 1.8; font-size: 13px; }
.cityList { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cityList span { padding: 13px 18px; border: 1px solid rgba(255,255,255,.1); color: #bbc1c9; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.018); }
.cityList span:last-child { border-color: rgba(204,158,66,.48); color: var(--gold2); }

.contact { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(8,124,255,.16), transparent 28%), linear-gradient(135deg, #061a38 0%, #030a15 54%, #02060c 100%); }
.contact::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 82px 82px; mask-image: linear-gradient(90deg, black, transparent 55%); }
.contactGlow { position: absolute; width: 650px; height: 650px; left: -230px; bottom: -300px; border: 1px solid rgba(244,212,131,.15); border-radius: 50%; box-shadow: 0 0 120px rgba(8,124,255,.1); }
.contactIntro { display: grid; grid-template-columns: .78fr 1.22fr; gap: 82px; align-items: start; }
.contactPitch { position: sticky; top: 40px; padding-top: 18px; }
.contactPitch h2 { font-size: clamp(46px, 4.3vw, 67px); }
.contactLead { max-width: 480px; margin: 28px 0 0; color: #9ba8b8; font-size: 13px; line-height: 1.85; }
.contactAssurances { margin-top: 42px; border-top: 1px solid rgba(255,255,255,.11); }
.contactAssurances div { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.contactAssurances strong { color: var(--gold2); font-family: var(--font-display), serif; font-size: 20px; font-weight: 500; }
.contactAssurances span { color: #b6c0cc; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.directContact { margin-top: 40px; }
.directContact p { color: #6f7e90; text-transform: uppercase; letter-spacing: .14em; font-size: 8px; }
.directContact a { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #d5dbe3; font-size: 12px; }
.directContact a span { color: var(--gold); }
.directContact small { display: block; margin-top: 16px; color: #6f7a88; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

.intakeForm { position: relative; padding: 48px; border: 1px solid rgba(228,190,102,.24); background: linear-gradient(145deg, rgba(10,31,62,.88), rgba(3,9,18,.96)); box-shadow: 0 38px 100px rgba(0,0,0,.32), 0 0 70px rgba(8,124,255,.06); }
.intakeForm::before { content: "PROJECT INTAKE"; position: absolute; right: 28px; top: 22px; color: rgba(244,212,131,.28); letter-spacing: .18em; font-size: 7px; }
.formStep { display: flex; align-items: center; gap: 13px; margin: 3px 0 22px; }
.formStep:not(:first-child) { margin-top: 42px; }
.formStep > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(244,212,131,.42); color: var(--gold2); font-family: var(--font-display), serif; font-size: 13px; }
.formStep p { margin: 0; color: #e8ebef; font-family: var(--font-display), serif; font-size: 22px; }
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formGrid label, .formGridDetails label { display: flex; flex-direction: column; gap: 8px; }
.formGrid label > span, .helpFieldset legend, .formGridDetails label > span { color: #9eaabb; text-transform: uppercase; letter-spacing: .1em; font-size: 8px; font-weight: 700; }
.intakeForm input[type="text"], .intakeForm input[type="tel"], .intakeForm input[type="email"], .intakeForm select, .intakeForm textarea { width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 0; outline: 0; background: rgba(255,255,255,.025); color: #eef2f6; padding: 15px 14px; font: inherit; font-size: 12px; transition: border-color .2s ease, background .2s ease; }
.intakeForm input::placeholder, .intakeForm textarea::placeholder { color: #566477; }
.intakeForm select { appearance: auto; color-scheme: light; }
.intakeForm select option { background: #f5f1e8; color: #07101d; }
.intakeForm select option:checked { background: #0a7fff; color: #fff; }
.intakeForm input:focus, .intakeForm select:focus, .intakeForm textarea:focus { border-color: rgba(244,212,131,.56); background: rgba(8,124,255,.04); }
.helpFieldset { padding: 0; margin: 25px 0 0; border: 0; }
.helpFieldset legend { width: 100%; padding: 0 0 12px; }
.helpFieldset legend small { margin-left: 8px; color: #5f6d80; font-size: 7px; letter-spacing: .06em; }
.helpOptions { display: flex; flex-wrap: wrap; gap: 8px; }
.helpOption { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.11); color: #9eabb9; cursor: pointer; background: rgba(255,255,255,.018); transition: .2s ease; }
.helpOption:hover { border-color: rgba(244,212,131,.3); color: #d7dde5; }
.helpOption.active { border-color: rgba(244,212,131,.62); color: var(--gold2); background: linear-gradient(135deg, rgba(201,153,61,.11), rgba(8,124,255,.06)); }
.helpOption input { position: absolute; opacity: 0; pointer-events: none; }
.helpOption span { font-size: 9px; letter-spacing: .03em; }
.helpOption i { color: var(--gold); font-style: normal; font-size: 12px; }
.formGridDetails { margin-top: 26px; }
.fullWidth { grid-column: 1 / -1; }
.intakeForm textarea { resize: vertical; min-height: 128px; line-height: 1.65; }
.fileDrop { min-height: 132px; border: 1px dashed rgba(244,212,131,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; cursor: pointer; background: linear-gradient(135deg, rgba(201,153,61,.035), rgba(8,124,255,.035)); transition: .25s ease; }
.fileDrop:hover { border-color: rgba(244,212,131,.66); background: linear-gradient(135deg, rgba(201,153,61,.07), rgba(8,124,255,.055)); }
.fileDrop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filePlus { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 9px; border: 1px solid rgba(244,212,131,.5); color: var(--gold2); font-size: 18px; }
.fileDrop strong { color: #e4e9ef; font-family: var(--font-display), serif; font-size: 18px; font-weight: 500; }
.fileDrop small { max-width: 92%; margin-top: 5px; color: #667588; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; overflow-wrap: anywhere; }
.fileNote { margin: 8px 0 0; color: #69788a; font-size: 8px; line-height: 1.5; }
.intakeSubmit { width: 100%; margin-top: 28px; border: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; background: linear-gradient(135deg, #b58128, #e6c56f); color: #07101d; text-transform: uppercase; letter-spacing: .12em; font: inherit; font-size: 10px; font-weight: 800; box-shadow: 0 15px 38px rgba(190,143,49,.16); transition: transform .2s ease, box-shadow .2s ease; }
.intakeSubmit:hover { transform: translateY(-2px); box-shadow: 0 19px 45px rgba(190,143,49,.25); }
.intakeSubmit span { font-size: 15px; }
.formFinePrint { margin: 11px 0 0; color: #657386; font-size: 8px; line-height: 1.6; text-align: center; }
.netlifyBotField { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.helpOption:has(input:checked) { border-color: rgba(244,212,131,.62); color: var(--gold2); background: linear-gradient(135deg, rgba(201,153,61,.11), rgba(8,124,255,.06)); }
.helpOption:has(input:checked) i::before { content: "✓"; }
.helpOption:has(input:checked) i { font-size: 0; }
.helpOption:has(input:checked) i::before { font-size: 12px; }
footer { padding: 30px 0; background: #030405; border-top: 1px solid rgba(255,255,255,.07); }
.footerInner { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; color: #636d79; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.footerInner > p:nth-child(2) { text-align: center; }
.footerInner > p:last-child { text-align: right; }
.footerBrand { display: flex; align-items: center; gap: 10px; color: #9da5b0; }
.footerBrand img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }
.footerJournal { color: #aab4c2; transition: color .2s ease; }
.footerJournal:hover { color: var(--gold2); }

.fieldJournal { position: relative; overflow: hidden; padding: 105px 0; background: linear-gradient(115deg, #02060d 0%, #06162f 52%, #02060d 100%); border-top: 1px solid rgba(244,212,131,.11); border-bottom: 1px solid rgba(244,212,131,.15); }
.fieldJournal::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px); background-size: 86px 86px; mask-image: linear-gradient(90deg, transparent, black 35%, black 70%, transparent); }
.fieldJournalGlow { position: absolute; width: 640px; height: 360px; right: -120px; top: -160px; border-radius: 50%; background: rgba(8,124,255,.12); filter: blur(90px); }
.fieldJournalInner { z-index: 2; }
.fieldJournalMeta { display: flex; align-items: center; gap: 13px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--gold2); font-size: 8px; letter-spacing: .2em; }
.journalPulse { width: 7px; height: 7px; border-radius: 50%; background: #22a3ff; box-shadow: 0 0 0 5px rgba(34,163,255,.08), 0 0 18px rgba(34,163,255,.68); }
.journalHandle { margin-left: auto; color: #728096; }
.fieldJournalGrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: end; padding-top: 48px; }
.fieldJournal h2 { margin: 17px 0 0; font-family: var(--font-display); font-size: clamp(50px,5.4vw,76px); line-height: .95; font-weight: 500; letter-spacing: -.03em; }
.fieldJournal h2 em { color: var(--gold2); font-weight: 400; }
.fieldJournalCopy > p { margin: 0 0 27px; max-width: 500px; color: #9ca8b8; font-size: 13px; line-height: 1.85; }
.journalLink { display: flex; align-items: center; justify-content: space-between; max-width: 430px; padding: 19px 20px; border: 1px solid rgba(224,186,103,.42); color: #e8edf4; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; transition: .25s ease; }
.journalLink b { color: var(--gold2); font-size: 15px; font-weight: 400; }
.journalLink:hover { background: linear-gradient(135deg, rgba(201,153,61,.1), rgba(8,124,255,.08)); border-color: rgba(244,212,131,.72); transform: translateY(-2px); }
.fieldJournalCopy small { display: block; margin-top: 13px; color: #596779; text-transform: uppercase; letter-spacing: .12em; font-size: 7px; }

@media (max-width: 980px) {
  .navlinks { display: none; }
  .heroInner { grid-template-columns: 1fr; padding-top: 45px; gap: 8px; }
  .heroLogoStage { min-height: 350px; align-items: center; }
  .heroLogoStage img { width: 300px; }
  .heroLogoHalo { width: 280px; height: 280px; }
  .heroLogoTag { margin-top: 0; }
  .heroCopy { justify-self: start; max-width: 720px; }
  .hero h1 { max-width: 720px; }
  .planToRealityGrid, .statementGrid, .sectionHeader, .processGrid, .contactIntro { grid-template-columns: 1fr; gap: 55px; }
  .contactPitch { position: relative; top: auto; }
  .planHero { min-height: 520px; }
  .visualStoryGrid { grid-template-columns: 1fr; }
  .visualStack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .visualCard { min-height: 390px; }
  .visualCardLarge { min-height: 520px; }
  .serviceGrid { grid-template-columns: repeat(2, 1fr); }
  .footerInner { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .footerInner > p:nth-child(2), .footerInner > p:last-child { text-align: center; }
  .footerBrand { justify-content: center; }
  .fieldJournalGrid { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 30px, 1180px); }
  .nav { height: 82px; }
  .brand span { display: none; }
  .brand img { width: 48px; height: 48px; }
  .navCta { padding: 11px 13px; }
  .heroInner { padding: 62px 0 90px; gap: 55px; }
  .heroLogoStage { min-height: 220px; align-items: center; }
  .heroLogoStage img { width: 250px; }
  .heroLogoHalo { width: 220px; height: 220px; }
  .heroLogoTag { margin-top: 0; font-size: 7px; letter-spacing: .16em; }
  .hero h1 { font-size: 59px; }
  .heroActions { flex-direction: column; align-items: stretch; }
  .heroProof { gap: 0; }
  .heroProof strong { font-size: 24px; }
  .heroProof span { font-size: 7px; }
  .heroProof div + div { padding-left: 10px; }
  .serviceGrid { grid-template-columns: 1fr; }
  .planToReality { padding: 80px 0; }
  .planHero { min-height: 390px; }
  .planHero figcaption { flex-direction: column; align-items: flex-start; }
  .visualStory { padding: 80px 0; }
  .visualIntro { align-items: flex-start; flex-direction: column; }
  .visualIntro > p:last-child { text-align: left; }
  .visualStoryGrid, .visualStack { grid-template-columns: 1fr; }
  .visualCard, .visualCardLarge { min-height: 390px; }
  .serviceCard { min-height: 300px; }
  .serviceCard h3 { margin-top: 60px; }
  .section { padding: 85px 0; }
  .statement { padding: 85px 0; }
  .contactIntro { gap: 42px; }
  .intakeForm { padding: 30px 20px; }
  .formGrid { grid-template-columns: 1fr; }
  .fullWidth { grid-column: auto; }
  .helpOptions { display: grid; grid-template-columns: 1fr; }
  .helpOption { justify-content: space-between; }
  .directContact a { font-size: 11px; overflow-wrap: anywhere; }
  .markCaption { flex-direction: column; gap: 6px; }
  .fieldJournal { padding: 78px 0; }
  .fieldJournalGrid { padding-top: 38px; }
  .fieldJournal h2 { font-size: 52px; }
  .journalLink { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Multi-page architecture */
.navlinks { gap: 23px; font-size: 10px; }
.navlinks a.active { color: var(--gold2); }
.navlinks .journalNav { color: #91a0b4; }
.navlinks .journalNav:hover { color: var(--gold2); }
.mobileMenu { display: none; position: relative; }
.mobileMenu summary { list-style: none; cursor: pointer; border: 1px solid rgba(224,186,103,.45); padding: 11px 13px; color: var(--gold2); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.mobileMenu summary::-webkit-details-marker { display: none; }
.mobileMenu > div { position: absolute; top: 48px; right: 0; width: min(290px, calc(100vw - 30px)); display: grid; padding: 12px; background: #030914; border: 1px solid rgba(244,212,131,.32); box-shadow: 0 25px 60px rgba(0,0,0,.72), 0 0 35px rgba(8,124,255,.10); z-index: 1000; }
.mobileMenu a { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.07); color: #d8dde5; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }
.mobileMenu .journalNav { color: var(--gold2); }
.compactSection { padding: 105px 0; }
.homeServices { padding-top: 110px; padding-bottom: 110px; }
.homeVisual { padding-top: 100px; }
.homeCoverage { min-height: 650px; }
.serviceGrid3 { grid-template-columns: repeat(3, 1fr); }
.serviceGrid3 .serviceCard { min-height: 335px; display: block; }

.innerHeader { position: relative; z-index: 50; background: #030812; border-bottom: 1px solid rgba(244,212,131,.14); }
.innerHeader .nav { height: 94px; }
.pageHero { position: relative; overflow: hidden; padding: 95px 0 115px; background: radial-gradient(circle at 10% 20%, rgba(8,124,255,.15), transparent 27%), linear-gradient(125deg,#061a37 0%,#020711 64%); border-bottom: 1px solid rgba(244,212,131,.14); }
.pageHero::before { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:82px 82px; }
.pageHeroGrid { display:grid; grid-template-columns:.88fr 1.12fr; gap:80px; align-items:center; }
.pageHero h1 { margin:18px 0 25px; font-family:var(--font-display); font-size:clamp(58px,6.5vw,88px); line-height:.92; font-weight:500; letter-spacing:-.035em; }
.pageHero h1 em { color:var(--gold2); font-style:normal; }
.pageHeroGrid > div > p:not(.eyebrow) { max-width:600px; color:#a4afbd; line-height:1.85; font-size:13px; margin-bottom:32px; }
.pageHeroImage { margin:0; min-height:540px; position:relative; overflow:hidden; border:1px solid rgba(244,212,131,.18); box-shadow:0 35px 100px rgba(0,0,0,.4); }
.pageHeroImage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.05); }
.pageHeroImage::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 100px rgba(1,5,12,.55); pointer-events:none; }
.aboutHero .pageHeroImage img { object-position:center bottom; }

.detailSection { padding:120px 0; background:radial-gradient(circle at 85% 20%,rgba(8,124,255,.08),transparent 27%),#050a12; }
.detailGrid { display:grid; grid-template-columns:.72fr 1.28fr; gap:100px; align-items:start; }
.detailGrid > div:first-child { position:sticky; top:35px; }
.detailGrid h2 { margin:17px 0 0; font-family:var(--font-display); font-size:clamp(44px,4.7vw,68px); line-height:1.02; font-weight:500; letter-spacing:-.025em; }
.detailCopy > p { margin:0 0 42px; color:#9ea9b6; font-size:14px; line-height:1.9; }
.capabilityList { border-top:1px solid rgba(255,255,255,.1); }
.capabilityList article { display:grid; grid-template-columns:55px 230px 1fr; gap:22px; align-items:start; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.capabilityList article > span { color:var(--gold2); font-size:9px; letter-spacing:.15em; padding-top:8px; }
.capabilityList h3 { margin:0; font-family:var(--font-display); font-size:25px; font-weight:500; line-height:1.1; }
.capabilityList p { margin:0; color:#8793a2; font-size:11px; line-height:1.75; }
.principles { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.1); }
.principles div { display:grid; grid-template-columns:55px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.principles strong { color:var(--gold2); font-family:var(--font-display); font-weight:500; }
.principles span { color:#c2c9d2; text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
.nextBand { padding:100px 0; text-align:center; background:linear-gradient(120deg,#071a36,#030912); }
.nextBand h2 { margin:16px auto 30px; max-width:900px; font-family:var(--font-display); font-size:clamp(42px,5vw,65px); font-weight:500; line-height:1; }
.nextBand h2 span { color:var(--gold2); }
.imageBand { min-height:580px; position:relative; overflow:hidden; display:flex; align-items:center; }
.imageBand > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.08); }
.imageBand::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,6,14,.93) 0%,rgba(2,7,16,.73) 46%,rgba(2,7,16,.2) 100%); }
.imageBand .shell { z-index:2; }
.imageBand .shell > div { max-width:640px; }
.imageBand h2 { margin:15px 0 30px; font-family:var(--font-display); font-size:clamp(48px,5vw,72px); line-height:1; font-weight:500; }
.aboutCoverage { min-height:650px; }
.contactPage { padding-top:105px; }
.contactPage .contactPitch h1 { margin:18px 0 0; font-family:var(--font-display); font-size:clamp(46px,4.3vw,67px); line-height:1.02; font-weight:500; letter-spacing:-.025em; }
.contactPage .contactPitch h1 span { color:var(--gold2); }

@media (max-width: 1080px) {
  .navlinks { display:none; }
  .mobileMenu { display:block; }
  .navCta { margin-left:auto; margin-right:10px; }
}
@media (max-width: 900px) {
  .pageHeroGrid,.detailGrid { grid-template-columns:1fr; gap:52px; }
  .pageHeroImage { min-height:470px; }
  .detailGrid > div:first-child { position:relative; top:auto; }
  .serviceGrid3 { grid-template-columns:1fr; }
  .capabilityList article { grid-template-columns:45px 190px 1fr; }
}
@media (max-width: 620px) {
  .innerHeader .nav { height:82px; }
  .innerHeader .navCta { display:none; }
  .pageHero { padding:72px 0 80px; }
  .pageHero h1 { font-size:55px; }
  .pageHeroImage { min-height:340px; }
  .detailSection { padding:82px 0; }
  .capabilityList article { grid-template-columns:38px 1fr; gap:14px; }
  .capabilityList article p { grid-column:2; }
  .imageBand { min-height:520px; }
  .compactSection { padding:80px 0; }
  .mobileMenu > div { right:0; }
}
