/* ============================================================
   THE ASCENSION COMPANIES — Production Stylesheet
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: #F7F4EC;
  color: #1B1815;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: #1B1815; }
button { font-family: inherit; }
::selection { background: #1E2D4A; color: #F7F4EC; }

/* Accessibility */
.skip-nav {
  position: absolute; top: -100px; left: 16px;
  background: #1B1815; color: #F7F4EC;
  padding: 8px 16px; font-size: 12px; letter-spacing: .1em;
  z-index: 9999; transition: top .2s;
}
.skip-nav:focus { top: 16px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid #1B1815; outline-offset: 3px;
}

/* ── NAVIGATION ─────────────────────────────────────────────── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
#site-header.scrolled {
  background: rgba(247, 244, 236, .98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(27, 24, 21, 0.12);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 22px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-the { font-size: 8px; letter-spacing: .5em; color: #3d3830; margin-bottom: 4px; padding-left: 2px; }
.nav-logo-name { font-family: 'Newsreader', Georgia, serif; font-size: 21px; font-weight: 400; letter-spacing: .16em; }
.nav-logo-co { font-size: 9.5px; letter-spacing: .42em; color: #3d3830; margin-top: 4px; padding-left: 2px; }
.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #3a352e; transition: color .2s; }
.nav-links a:hover { color: #1B1815; }
.nav-cta {
  border: 1px solid rgba(27, 24, 21, .4) !important;
  padding: 11px 20px;
  transition: all .25s !important;
  white-space: nowrap;
}
.nav-cta:hover { background: #1B1815 !important; color: #F7F4EC !important; }
@media (max-width: 1100px) {
  .nav-cta { padding: 8px 12px !important; font-size: 10px !important; }
}
.nav-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; flex-direction: column; gap: 5px; z-index: 201;
}
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: #1B1815; }

/* ── HERO ───────────────────────────────────────────────────── */
#top { background: #F7F4EC; position: relative; }
.hero-img-wrap { width: 100%; overflow: hidden; position: relative; }
.hero-img-wrap img { width: 100%; height: auto; display: block; filter: brightness(1.25); }
.hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(247,244,236,0) 0%, rgba(247,244,236,0) 15%, rgba(247,244,236,.55) 52%, rgba(247,244,236,.95) 100%);
}
.hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 40px 60px; max-width: 1240px; margin: 0 auto;
}
.hero-h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400; font-size: clamp(28px, 4.8vw, 72px);
  line-height: 1; letter-spacing: -.02em;
  color: #4A4542; margin-bottom: 32px;
  white-space: nowrap;
}
.hero-tags { display: flex; flex-direction: column; gap: 8px; }
.hero-tags span { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #1B1815; }
.hero-body {
  padding: 0 40px 140px; max-width: 1240px; margin: 0 auto;
}
.hero-sub {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end;
  max-width: 960px;
  border-top: 1px solid rgba(27,24,21,.14); padding-top: 36px;
}
.hero-sub p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(18px, 2vw, 23px); font-weight: 400; line-height: 1.5;
  color: #1B1815; max-width: 48ch; flex: 1 1 420px;
}
.hero-btns { display: flex; gap: 16px; flex: 0 0 auto; margin-top: 8px; }
.btn {
  display: inline-block;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(27,24,21,.6); color: #1B1815;
  padding: 16px 28px; white-space: nowrap; transition: all .25s;
}
.btn:hover { background: #1B1815; color: #F7F4EC; }

/* ── SECTIONS ───────────────────────────────────────────────── */
.sec { max-width: 1240px; margin: 0 auto; padding: 80px 40px 0; }
.section-label {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: #6F6A60; display: block; margin-bottom: 40px;
}
.serif-display {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300; line-height: 1.18; letter-spacing: -.01em; color: #1B1815;
}
.body-copy { font-size: 16px; line-height: 1.8; color: #2a2520; }
.small-copy { font-size: 13px; line-height: 1.7; color: #3d3830; }
.divider { border-top: 1px solid rgba(27,24,21,.14); }

/* ── INTERSTITIAL ───────────────────────────────────────────── */
.interstitial { max-width: 1240px; margin: 0 auto; padding: 80px 40px 0; }
.interstitial-inner { max-width: 820px; }
.interstitial-inner .serif-display { font-size: clamp(28px, 3.8vw, 50px); margin-bottom: 32px; }
.interstitial-inner .body-copy { max-width: 58ch; }
.interstitial-inner .body-copy + .body-copy { margin-top: 24px; }
.bourdain-img { margin-top: 48px; max-width: 480px; }
.bourdain-img img { width: 100%; height: auto; display: block; }

/* ── POSITIONING ─────────────────────────────────────────────── */
.positioning { max-width: 1240px; margin: 0 auto; padding: 80px 40px 0; }
.positioning-inner { max-width: 1000px; }
.positioning-inner .serif-display { font-size: clamp(22px, 2.8vw, 38px); line-height: 1.3; }
.positioning-inner .serif-display + .serif-display { margin-top: 32px; }

/* ── SERVICES ────────────────────────────────────────────────── */
.services { max-width: 1240px; margin: 0 auto; padding: 80px 40px 0; }
.services-header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  border-bottom: 1px solid rgba(27,24,21,.14); padding-bottom: 28px;
}
.services-header h2 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -.01em;
}
.service-block { border-bottom: 1px solid rgba(27,24,21,.14); padding: 60px 0; }
.service-num-row {
  display: flex; align-items: baseline; gap: 18px;
  border-bottom: 1px solid rgba(27,24,21,.08); padding-bottom: 28px; margin-bottom: 48px;
}
.service-num { font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .06em; color: #1B1815; }
.service-num-row h3 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.01em; line-height: 1;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.service-lead {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; color: #1B1815; max-width: 22ch;
}
.service-detail { display: flex; flex-direction: column; gap: 24px; }
.service-note { border-top: 1px solid rgba(27,24,21,.1); padding-top: 28px; margin-top: 8px; }

/* Full-bleed image strips */
.strip { width: 100%; margin: 0; padding: 0; overflow: hidden; }
.strip img { width: 100%; height: auto; display: block; }
.strip-fixed-height { height: clamp(320px, 45vh, 560px); overflow: hidden; background: #1B1815; }
.strip-fixed-height img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }

/* ── NOIR ─────────────────────────────────────────────────────── */
#noir { background: #0D0D0D; color: #E8E4DA; padding: 80px 40px; }
#noir .inner { max-width: 1240px; margin: 0 auto; }
.noir-num-row {
  display: flex; align-items: baseline; gap: 18px;
  border-bottom: 1px solid rgba(232,228,218,.12); padding-bottom: 28px; margin-bottom: 48px;
}
.noir-num { font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .06em; color: #9a9488; }
.noir-num-row h2 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.01em; line-height: 1; color: #E8E4DA;
}
.noir-lead {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; color: #E8E4DA; max-width: 22ch;
}
.noir-copy { font-size: 16px; line-height: 1.8; color: #E8E4DA; }
.noir-note { border-top: 1px solid rgba(232,228,218,.12); padding-top: 28px; margin-top: 8px; }
.noir-note p { font-size: 13px; line-height: 1.7; color: #9a9488; }

/* ── CLIENTS ─────────────────────────────────────────────────── */
#clients { background: #1B1815; color: #F7F4EC; margin-top: 80px; }
.clients-inner {
  max-width: 1240px; margin: 0 auto; padding: 130px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 90px;
}
.clients-label { font-size: 12px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: #9a9488; display: block; margin-bottom: 34px; }
.clients-list { display: flex; flex-direction: column; }
.client-item {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.6; color: #F0ECE2;
  border-bottom: 1px solid rgba(247,244,236,.13); padding: 14px 0;
}
.client-item:last-child { border-bottom: none; }
.situations-list { display: flex; flex-direction: column; }
.situation-row {
  display: flex; gap: 22px; align-items: baseline;
  border-bottom: 1px solid rgba(247,244,236,.13); padding: 20px 0;
}
.situation-row:last-child { border-bottom: none; }
.sit-num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #7e8a80; flex: 0 0 auto; }
.sit-label { font-size: 16px; letter-spacing: .01em; color: #E7E3D8; line-height: 1.45; }

/* ── PRINCIPAL ───────────────────────────────────────────────── */
.principal-sec { max-width: 1240px; margin: 0 auto; padding: 80px 40px 0; }
.principal-header { border-top: 1px solid rgba(27,24,21,.14); padding-top: 36px; margin-bottom: 72px; }
.principal-header h2 {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: #6F6A60; display: block; margin-bottom: 40px; font-weight: 400;
}
.principal-headline {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(28px, 4vw, 52px); line-height: 1.18; letter-spacing: -.01em;
  color: #1B1815; max-width: 22ch;
}
.principal-grid { display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: start; }
.principal-sticky { position: sticky; top: 110px; }
.principal-photo { width: 100%; height: 460px; overflow: hidden; background: #1B1815; }
.principal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.principal-name { font-size: 15px; font-weight: 500; color: #1B1815; margin-top: 18px; letter-spacing: .01em; }
.principal-title { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #6F6A60; margin-top: 6px; }
.principal-co { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #6F6A60; margin-top: 3px; }
.principal-stair { width: 100%; overflow: hidden; margin-top: 20px; }
.principal-stair img { width: 100%; height: auto; display: block; }
.principal-bio { display: flex; flex-direction: column; gap: 28px; padding-bottom: 80px; }
.bio-large {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.5; color: #1B1815;
}
.bio-body { font-size: 16px; line-height: 1.75; color: #2a2520; }
.bio-close {
  border-top: 1px solid rgba(27,24,21,.14); padding-top: 36px; margin-top: 12px;
}
.bio-close p {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; color: #1B1815;
}

/* ── PERSPECTIVE ─────────────────────────────────────────────── */
.persp-sec { max-width: 1240px; margin: 0 auto; padding: 80px 40px 0; }
.persp-header { border-top: 1px solid rgba(27,24,21,.14); padding-top: 36px; max-width: 1000px; }
.persp-header h2 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -.01em; color: #1B1815;
}
.persp-main { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 64px; align-items: start; }
.persp-left {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.22; letter-spacing: -.005em; color: #1B1815;
}
.persp-right { display: flex; flex-direction: column; gap: 24px; max-width: 48ch; }
.persp-right .serif-mid {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(18px, 2vw, 26px); line-height: 1.3; color: #1B1815;
}
.persp-right .serif-bold {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: #1B1815;
}
.persp-right .serif-pair {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(18px, 2vw, 26px); line-height: 1.5; color: #1B1815; margin-top: 16px;
}
.persp-right .serif-pair:first-of-type { margin-top: 40px; }
.persp-pairs {
  margin-top: 80px; border-top: 1px solid rgba(27,24,21,.14); padding-top: 56px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 72px;
}
.persp-pairs p {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.45; color: #1B1815;
}
.persp-end { margin-top: 72px; display: flex; flex-direction: column; gap: 6px; }
.persp-end span {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(28px, 4vw, 52px); line-height: 1.15; color: #1B1815;
}

/* ── JOURNAL ─────────────────────────────────────────────────── */
#journal { border-top: 1px solid rgba(27,24,21,.18); padding: 100px 40px; }
#journal .inner { max-width: 1240px; margin: 0 auto; }
#journal h2 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: #1B1815;
}

/* ── PROJECT REVIEW ──────────────────────────────────────────── */
#project-review { border-top: 1px solid rgba(27,24,21,.18); padding: 100px 40px; }
#project-review .inner { max-width: 860px; margin: 0 auto; }
#project-review h2 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(32px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -.02em; color: #1B1815;
  margin-bottom: 48px;
}
#project-review p { font-size: 17px; line-height: 1.8; color: #2a2520; max-width: 60ch; margin-bottom: 28px; }
.btn-outline {
  display: inline-block;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid rgba(27,24,21,.5); color: #1B1815;
  padding: 18px 36px; transition: all .25s;
}
.btn-outline:hover { background: #1B1815; color: #F7F4EC; }

/* ── CONTACT ─────────────────────────────────────────────────── */
#contact { border-top: 1px solid rgba(27,24,21,.18); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.contact-img { overflow: hidden; min-height: 560px; }
.contact-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.contact-form-wrap { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.contact-form-wrap h2 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: clamp(32px, 4vw, 60px); line-height: 1.04; letter-spacing: -.02em;
  color: #1B1815; max-width: 14ch; margin-bottom: 40px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #6F6A60; }
.form-field input,
.form-field textarea {
  background: none; border: none; border-bottom: 1px solid rgba(27,24,21,.3);
  padding: 10px 0; font-size: 14px; color: #1B1815; font-family: inherit;
  outline: none; resize: none; transition: border-color .2s;
  width: 100%;
}
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: #1B1815; }
.form-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.form-submit {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid rgba(27,24,21,.5); color: #1B1815;
  padding: 16px 36px; background: none; cursor: pointer; transition: all .25s;
  font-family: inherit;
}
.form-submit:hover { background: #1B1815; color: #F7F4EC; }
.form-note { font-size: 11px; letter-spacing: .06em; color: #6F6A60; }
.form-success {
  display: none; padding: 20px; border: 1px solid rgba(27,24,21,.2);
  font-size: 14px; line-height: 1.7; color: #2a2520;
}
.form-success strong { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 17px; }
.form-error {
  display: none; padding: 16px; border: 1px solid rgba(180,60,40,.3);
  font-size: 13px; color: #8a2e20;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer { border-top: 1px solid rgba(27,24,21,.14); }
.footer-links {
  max-width: 1240px; margin: 0 auto;
  padding: 40px 40px 20px;
  display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: center;
  border-bottom: 1px solid rgba(27,24,21,.08);
}
.footer-links a { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #6F6A60; }
.footer-links a:hover { color: #1B1815; }
.footer-bottom {
  max-width: 1240px; margin: 0 auto;
  padding: 32px 40px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.footer-logo { display: flex; flex-direction: column; line-height: 1; }
.footer-logo-the { font-size: 7px; letter-spacing: .5em; color: #6F6A60; margin-bottom: 3px; padding-left: 2px; }
.footer-logo-name { font-family: 'Newsreader', Georgia, serif; font-size: 17px; letter-spacing: .16em; }
.footer-logo-co { font-size: 8px; letter-spacing: .42em; color: #6F6A60; margin-top: 3px; padding-left: 2px; }
.footer-tagline { font-size: 11.5px; letter-spacing: .1em; color: #3d3830; }
.footer-copy { font-size: 11.5px; letter-spacing: .06em; color: #3d3830; }

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */
.reveal { transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.reveal.hidden { opacity: 0; transform: translateY(18px); }
.reveal.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-inner { padding: 18px 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  #site-header.menu-open .nav-links {
    display: flex; flex-direction: column;
    position: fixed; inset: 0;
    background: #F7F4EC; z-index: 200;
    align-items: center; justify-content: center;
    gap: 36px; padding: 40px;
  }
  #site-header.menu-open .nav-links a { font-size: 12px; letter-spacing: .22em; }

  .hero-img-wrap { min-height: 90vh; }
  .hero-img-wrap img { min-height: 90vh; object-fit: cover; object-position: center center; }
  .hero-overlay { padding: 0 24px 40px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-h1 { font-size: clamp(32px, 9vw, 48px); margin-bottom: 16px; margin-top: 0; white-space: normal; }
  .hero-tags { margin-top: 0; gap: 6px; }
  .hero-body { padding: 32px 24px 80px; }
  .hero-btns { flex-direction: column; width: 100%; }
  .hero-btns .btn { text-align: center; }

  .interstitial, .positioning, .services, .sec,
  .principal-sec, .persp-sec { padding-left: 24px; padding-right: 24px; }

  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .clients-inner { grid-template-columns: 1fr; gap: 64px; padding: 80px 24px; }
  .principal-grid { grid-template-columns: 1fr; gap: 48px; }
  .principal-sticky { position: static; }
  .persp-main { grid-template-columns: 1fr; gap: 40px; }
  .persp-pairs { grid-template-columns: 1fr; gap: 12px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-img { min-height: 320px; height: 320px; }
  .contact-img img { width: 100%; height: 320px; object-fit: cover; object-position: center top; }
  .contact-form-wrap { padding: 48px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-links, .footer-bottom { padding-left: 24px; padding-right: 24px; }
  #journal, #project-review { padding-left: 24px; padding-right: 24px; }
  #noir { padding-left: 24px; padding-right: 24px; }

  .persp-end { flex-direction: column; }
}

@media (min-width: 769px) {
  .persp-end { flex-direction: row; flex-wrap: wrap; gap: 0 32px; align-items: baseline; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-img-wrap { min-height: 80vh; }
  .hero-img-wrap img { min-height: 80vh; object-fit: cover; object-position: center center; }
  .hero-overlay { display: flex; flex-direction: column; justify-content: flex-end; }
}