.direction-page { min-height: 100vh; color: var(--ink); background: var(--paper); }
.direction-header { position: relative; background: rgba(7, 24, 22, 0.97); }
.direction-hero { overflow: hidden; padding: clamp(70px, 8vw, 118px) 0 clamp(80px, 9vw, 130px); color: var(--white); background: var(--ink); }
.direction-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr); align-items: center; gap: clamp(46px, 7vw, 100px); }
.direction-copy h1 { margin: 28px 0 28px; font-size: clamp(57px, 6.6vw, 98px); font-weight: 720; letter-spacing: -.067em; line-height: .91; }
.direction-copy h1 em { color: transparent; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; -webkit-text-stroke: 1.25px var(--acid); }
.direction-copy > p:not(.eyebrow) { max-width: 620px; margin: 0; color: rgba(255,255,255,.67); font-size: 18px; line-height: 1.72; }
.direction-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 36px; }
.direction-link { color: var(--white); font-size: 15px; font-weight: 750; text-decoration-color: rgba(255,255,255,.32); text-underline-offset: 5px; }
.direction-link:hover, .direction-link:focus-visible { color: var(--acid); }
.direction-visual { overflow: hidden; margin: 0; border: 1px solid rgba(104,246,206,.28); border-radius: 24px; box-shadow: 0 34px 90px rgba(0,0,0,.32); }
.direction-visual img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.direction-content { padding: clamp(88px, 10vw, 145px) 0; }
.direction-intro { display: grid; grid-template-columns: minmax(0,.7fr) minmax(420px,1.3fr); gap: 30px 80px; align-items: start; }
.direction-intro h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); font-weight: 690; letter-spacing: -.055em; line-height: 1; }
.direction-intro > p:last-child { grid-column: 2; max-width: 760px; margin: 0; color: #4f625d; font-size: 18px; line-height: 1.72; }
.direction-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 72px; }
.direction-cards article { min-height: 320px; padding: 32px; color: var(--white); background: var(--ink-soft); border-radius: var(--radius); }
.direction-cards article:nth-child(2), .direction-cards article:nth-child(3) { color: var(--ink); background: var(--white); border: 1px solid var(--dark-line); }
.direction-cards span, .objective-list > article > span { color: #32665b; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.direction-cards article:not(:nth-child(2)):not(:nth-child(3)) span { color: var(--mint); }
.direction-cards h3 { margin: 80px 0 15px; font-size: 30px; letter-spacing: -.035em; }
.direction-cards p { margin: 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.68; }
.direction-cards article:nth-child(2) p, .direction-cards article:nth-child(3) p { color: #51615d; }
.objective-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 40px; margin-top: 72px; border-top: 1px solid var(--dark-line); }
.objective-list article { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 32px 0; border-bottom: 1px solid var(--dark-line); }
.objective-list h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.025em; }
.objective-list p { margin: 0; color: #51615d; font-size: 16px; line-height: 1.65; }
.direction-cta { padding: 0 0 clamp(86px,10vw,140px); }
.direction-cta-panel { display: flex; align-items: end; justify-content: space-between; gap: 48px; padding: clamp(42px,7vw,86px); color: var(--white); background: radial-gradient(circle at 88% 15%,rgba(199,255,74,.14),transparent 28%),var(--ink); border-radius: var(--radius); }
.direction-cta-panel h2 { max-width: 800px; margin: 22px 0 0; font-size: clamp(42px,5vw,70px); font-weight: 690; letter-spacing: -.055em; line-height: 1; }
.direction-cta-panel .button { flex: 0 0 auto; }
@media (max-width: 980px) { .direction-hero-grid, .direction-intro { grid-template-columns: 1fr; } .direction-intro > p:last-child { grid-column: auto; } .direction-visual { max-width: 760px; } .direction-cta-panel { align-items: flex-start; flex-direction: column; } }
@media (max-width: 680px) { .direction-hero { padding-top: 58px; } .direction-copy h1 { font-size: clamp(50px,15vw,72px); } .direction-copy > p:not(.eyebrow), .direction-intro > p:last-child { font-size: 16px; } .direction-cards, .objective-list { grid-template-columns: 1fr; } .direction-cards article { min-height: 280px; } .direction-cta-panel { width: calc(100% - 32px); } }