:root {
  --bg: #07090c;
  --bg-soft: #0b0f14;
  --panel: rgba(15, 19, 25, 0.82);
  --panel-strong: #10151c;
  --line: rgba(255,255,255,0.1);
  --text: #f4f5f6;
  --muted: #a7adb7;
  --accent: #ff7417;
  --accent-2: #ffa33b;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 4%, rgba(255,116,23,0.07), transparent 24rem),
    linear-gradient(180deg, #05070a 0%, #090c10 55%, #05070a 100%);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .18; pointer-events: none; }
.ambient-a { width: 28rem; height: 28rem; background: #ff7417; top: 20rem; right: -15rem; }
.ambient-b { width: 25rem; height: 25rem; background: #1a6f8f; bottom: 0; left: -16rem; }

.section-shell, .site-header { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; }
.brand-mark { color: var(--accent); font-family: "Space Grotesk", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.08em; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .94rem; }
.brand-copy small { margin-top: .2rem; color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a, .footer-links a { color: #d8dbe0; text-decoration: none; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; transition: color .2s ease; }
.main-nav a:hover, .footer-links a:hover { color: var(--accent); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: 8px; }
.menu-toggle span { display:block; width: 18px; height: 1px; background: white; margin: 5px auto; }

.hero { min-height: 720px; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 2rem; padding-block: 78px 64px; }
.eyebrow { margin: 0 0 1rem; color: var(--accent); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.08; margin-top: 0; }
h1 { max-width: 740px; margin-bottom: 1.45rem; font-size: clamp(3.25rem, 6.2vw, 6.25rem); letter-spacing: -.065em; }
h1 span { color: var(--accent); }
h2 { font-size: clamp(2.1rem, 4vw, 4rem); letter-spacing: -.045em; }
h3 { font-size: 1.45rem; }
.hero-lede { max-width: 620px; color: #c0c4ca; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.3rem; border-radius: 7px; text-decoration: none; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--accent), #e95d00); color: white; box-shadow: 0 12px 34px rgba(255,116,23,.2); }
.button-ghost { border: 1px solid rgba(255,255,255,.28); color: white; }
.button-ghost:hover { border-color: var(--accent); }
.hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 3.25rem; max-width: 600px; border-top: 1px solid var(--line); }
.hero-meta div { padding: 1.4rem 1.25rem 0 0; }
.hero-meta strong { display: block; font-size: 1.4rem; font-family: "Space Grotesk", sans-serif; }
.hero-meta span { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }

.hero-visual { min-height: 590px; position: relative; display: grid; place-items: center; isolation: isolate; }
.ray-grid { position: absolute; inset: 8% -6% 0 0; background-image: linear-gradient(rgba(255,116,23,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,116,23,.06) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at center, black 0%, transparent 72%); transform: perspective(500px) rotateX(68deg) translateY(35%); transform-origin: bottom; }
.orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #48505a 0, #171d22 25%, #090b0d 62%, #020304 100%); box-shadow: inset -20px -24px 38px rgba(0,0,0,.8), 0 0 40px rgba(255,116,23,.12); }
.orb::after { content: ""; position: absolute; inset: 10%; border-radius: inherit; border: 1px solid rgba(255,145,48,.2); filter: blur(1px); }
.orb-large { width: 210px; height: 210px; right: 1%; bottom: 12%; }
.orb-small { width: 62px; height: 62px; }
.orb-one { left: 9%; bottom: 25%; }
.orb-two { right: 6%; top: 22%; width: 38px; height: 38px; }
.book-stage { z-index: 2; width: min(68%, 390px); aspect-ratio: 7 / 10; transform: perspective(1200px) rotateY(-8deg) rotateX(2deg); transform-origin: center; filter: drop-shadow(28px 35px 42px rgba(0,0,0,.72)); transition: transform .35s ease, filter .35s ease; }
.book-stage:hover { transform: perspective(1200px) rotateY(-2deg) translateY(-5px); filter: drop-shadow(28px 40px 46px rgba(0,0,0,.78)); }
.book-stage img { width: 100%; height: 100%; object-fit: contain; }

.section-card { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(15,19,25,.86), rgba(7,9,12,.74)); border-radius: 15px; overflow: hidden; }
.two-column { display: grid; grid-template-columns: 1fr .9fr; align-items: stretch; margin-block: 35px 115px; }
.section-copy { padding: clamp(2rem, 6vw, 5rem); align-self: center; }
.section-copy p:not(.eyebrow) { color: var(--muted); max-width: 610px; }
.inline-links { display: flex; gap: 1.4rem; margin-top: 2rem; }
.inline-links a, .journal-card a { color: var(--accent); font-size: .82rem; font-weight: 700; text-decoration: none; }
.portrait-wrap { position: relative; min-height: 520px; overflow: hidden; background: #11161c; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.84) contrast(1.06); }
.portrait-wrap::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(7,9,12,.72), transparent 30%); }
.portrait-glow { position: absolute; z-index: 1; width: 250px; height: 250px; right: -70px; top: -50px; background: rgba(255,116,23,.34); filter: blur(100px); border-radius: 50%; }

.book-section { margin-bottom: 120px; }
.book-panel { display: grid; grid-template-columns: 1.2fr .58fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; padding: clamp(2rem, 6vw, 5.5rem); border: 1px solid var(--line); border-radius: 15px; background: radial-gradient(circle at 86% 50%, rgba(255,116,23,.12), transparent 26rem), var(--panel); }
.book-copy .subhead { max-width: 700px; color: var(--muted); font-size: 1.06rem; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; padding: 0; margin: 2rem 0; list-style: none; }
.feature-list li { color: #d4d7dc; font-size: .9rem; }
.feature-list li::before { content: "✓"; color: var(--accent); margin-right: .65rem; }
.book-flat { max-width: 315px; justify-self: center; filter: drop-shadow(0 28px 32px rgba(0,0,0,.7)); }
.book-flat img { width: 100%; height: auto; object-fit: contain; }

.section-heading { max-width: 780px; margin-bottom: 2.5rem; }
.expertise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 125px; }
.expertise-card { min-height: 290px; padding: 2rem; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(18,23,30,.92), rgba(9,12,16,.9)); transition: transform .22s ease, border-color .22s ease; }
.expertise-card:hover { transform: translateY(-5px); border-color: rgba(255,116,23,.42); }
.expertise-card .icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 3rem; color: var(--accent); border: 1px solid rgba(255,116,23,.38); border-radius: 50%; font-family: "Space Grotesk"; font-weight: 700; font-size: .72rem; }
.expertise-card p { color: var(--muted); font-size: .9rem; }

.journal { margin-bottom: 120px; }
.journal-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1rem; }
.journal-card { min-height: 450px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); }
.journal-card > div:last-child { padding: 1.5rem 1.6rem 1.8rem; }
.journal-card p { color: var(--muted); font-size: .9rem; }
.journal-card .card-label { color: var(--accent); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.journal-art { height: 210px; position: relative; overflow: hidden; background-color: #0e1217; }
.journal-art::before, .journal-art::after { content:""; position:absolute; border-radius:50%; }
.journal-art-a::before { width: 210px; height: 210px; right: 10%; top: 20px; background: radial-gradient(circle at 28% 25%, #76604a, #1b1c1c 35%, #050607 70%); box-shadow: 0 0 50px rgba(255,116,23,.2); }
.journal-art-a::after { width: 380px; height: 1px; background: var(--accent); transform: rotate(-18deg); left: -40px; bottom: 55px; }
.journal-art-b { background: repeating-linear-gradient(120deg, transparent 0 19px, rgba(255,116,23,.09) 20px), radial-gradient(circle at center, #1d242c, #080a0d 62%); }
.journal-art-b::before { inset: 30px; border: 1px solid rgba(255,116,23,.35); border-radius: 0; transform: perspective(400px) rotateX(55deg) rotateZ(45deg); }
.journal-art-c { background: radial-gradient(circle at 65% 50%, rgba(255,116,23,.32), transparent 8%, transparent 26%), linear-gradient(135deg, #121922, #050607); }
.journal-art-c::before { width: 140px; height: 140px; left: 20%; top: 35px; border: 1px solid rgba(255,255,255,.18); box-shadow: 35px 25px 0 -1px #0c1117, 35px 25px 0 0 rgba(255,116,23,.25); border-radius: 4px; transform: rotate(12deg); }

.contact { margin-bottom: 80px; }
.contact-inner { padding: clamp(2.3rem, 7vw, 6rem); text-align: center; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 50% 0, rgba(255,116,23,.15), transparent 24rem), #0c1015; }
.contact-inner h2 { max-width: 850px; margin-inline: auto; }
.contact-inner p:not(.eyebrow) { max-width: 650px; margin-inline: auto; color: var(--muted); }
.contact-inner .button { margin-top: 1.5rem; text-transform: none; letter-spacing: 0; }

.site-footer { min-height: 145px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.footer-links { justify-self: end; display: flex; gap: 1.35rem; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--delay, 0ms); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 64px; }
  .hero-visual { min-height: 520px; order: -1; }
  .book-stage { width: min(48%, 330px); }
  .two-column, .book-panel { grid-template-columns: 1fr; }
  .portrait-wrap { min-height: 520px; }
  .book-flat { order: -1; max-width: 250px; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .journal-card.featured { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-header { min-height: 76px; }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; top: 76px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .7rem; border: 1px solid var(--line); background: rgba(8,10,13,.98); border-radius: 10px; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: .9rem 1rem; }
  .hero { min-height: auto; padding-top: 45px; }
  .hero-visual { min-height: 430px; }
  .book-stage { width: min(60%, 285px); }
  .orb-large { width: 155px; height: 155px; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta div { padding-block: 1rem; border-bottom: 1px solid var(--line); }
  .two-column { margin-bottom: 85px; }
  .portrait-wrap { min-height: 420px; }
  .book-section, .journal { margin-bottom: 85px; }
  .feature-list { grid-template-columns: 1fr; }
  .expertise-grid, .journal-grid { grid-template-columns: 1fr; }
  .journal-card.featured { grid-column: auto; }
  .site-footer { grid-template-columns: 1fr; text-align: center; padding-block: 2.4rem; }
  .footer-brand { justify-self: center; }
  .footer-links { justify-self: center; }
}

@media (max-width: 480px) {
  .section-shell, .site-header { width: min(calc(100% - 24px), var(--max)); }
  .brand-copy { display: none; }
  h1 { font-size: 3rem; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-visual { min-height: 365px; }
  .book-stage { width: 68%; }
  .section-copy, .book-panel { padding: 1.5rem; }
}