:root {
  --background: #050907;
  --foreground: #f6f6f2;
  --primary: #d4af37;
  --border: rgba(212, 175, 55, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body {
  margin: 0;
  background: radial-gradient(circle at 9% 7%, rgba(27,115,67,.24), transparent 28rem), radial-gradient(circle at 92% 24%, rgba(212,175,55,.1), transparent 30rem), var(--background);
  color: var(--foreground);
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: #d4af37; color: #07100b; }

.masthead { position: relative; z-index: 20; border-bottom: 1px solid rgba(212,175,55,.16); background: #020403; }
.masthead-logo { position: relative; display: block; width: 100%; aspect-ratio: 1672/383; overflow: hidden; background: #010302; }
.masthead-logo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,transparent 72%,rgba(2,4,3,.32)); }
.masthead-logo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:clamp(1rem,2.4vw,2.4rem); min-height:3.5rem; padding:.6rem 1.2rem; border-top:1px solid rgba(212,175,55,.12); background:linear-gradient(90deg,transparent,rgba(27,74,48,.12),transparent),#020403; color:#c9d1cc; font-size:.8rem; }
.site-nav a,.footer-bottom a { transition:color 180ms ease; }
.site-nav a:hover,.site-nav a:focus-visible,.footer-bottom a:hover,.footer-bottom a:focus-visible { color:#d4af37; }

.hero { --pointer-x:50%; --pointer-y:45%; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(250px,.8fr) minmax(380px,1.15fr) minmax(250px,.8fr); align-items:stretch; max-width:1500px; min-height:40rem; margin:0 auto; overflow:hidden; }
.hero::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:radial-gradient(circle 13rem at var(--pointer-x) var(--pointer-y),rgba(229,204,102,.075),transparent 72%); mix-blend-mode:screen; }
.hero::before { content:""; position:absolute; z-index:-1; width:32rem; height:32rem; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(212,175,55,.16); border-radius:50%; box-shadow:0 0 0 5rem rgba(46,139,87,.02),0 0 0 10rem rgba(212,175,55,.015); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; z-index:2; padding:5rem clamp(1.3rem,4vw,4rem); text-align:center; }
.eyebrow { margin:0; color:#d4af37; font-size:.72rem; font-weight:650; letter-spacing:.22em; line-height:1.5; text-transform:uppercase; }
.hero h1 { max-width:39rem; margin:1rem 0 1.4rem; font-size:clamp(2.6rem,5vw,5.2rem); font-weight:500; letter-spacing:-.06em; line-height:.98; }
.hero-lead { max-width:34rem; margin:0; color:#c7d2cb; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.75; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }
.button { min-height:3.2rem; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; padding:.8rem 1.2rem; border:1px solid rgba(212,175,55,.22); border-radius:999px; font-size:.82rem; font-weight:650; transition:transform 180ms ease,background 180ms ease; }
.button:hover,.button:focus-visible { transform:translateY(-2px); }
.button-primary { border-color:#d4af37; background:linear-gradient(110deg,#b99324,#edd66f); color:#08100b; box-shadow:0 12px 44px rgba(212,175,55,.14); }
.button-quiet { background:rgba(255,255,255,.035); color:#e2e9e5; }

.hero-character { position:relative; min-width:0; overflow:hidden; background:radial-gradient(circle at 50% 38%,rgba(55,132,88,.26),transparent 55%),#07150e; }
.hero-character::after { content:""; position:absolute; inset:0; pointer-events:none; }
.hero-character-left { border-radius:0 0 2rem 0; -webkit-mask-image:linear-gradient(to right,#000 68%,transparent 100%); mask-image:linear-gradient(to right,#000 68%,transparent 100%); }
.hero-character-right { border-radius:0 0 0 2rem; -webkit-mask-image:linear-gradient(to left,#000 68%,transparent 100%); mask-image:linear-gradient(to left,#000 68%,transparent 100%); }
.hero-character-left::after { background:linear-gradient(90deg,transparent 55%,rgba(5,9,7,.44)); }
.hero-character-right::after { background:linear-gradient(-90deg,transparent 55%,rgba(5,9,7,.44)); }
.hero-character img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 48%; filter:saturate(.94) contrast(1.03); transition:filter 500ms ease,transform 900ms cubic-bezier(.2,.7,.2,1); }
.hero-character:hover img { filter:saturate(1.04) contrast(1.035); transform:scale(1.015); }
.hero-character span { position:absolute; z-index:2; bottom:1.5rem; color:#fff; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.hero-character-left span { left:1.5rem; }
.hero-character-right span { right:1.5rem; }

.section { max-width:1360px; margin:0 auto; padding:clamp(5.5rem,10vw,10rem) clamp(1.3rem,5vw,5rem); }
.manifesto { display:grid; grid-template-columns:minmax(240px,.82fr) minmax(300px,1.18fr); gap:clamp(1.5rem,5vw,6rem); align-items:start; }
h2 { margin:.75rem 0 0; font-size:clamp(2.4rem,5.2vw,5.6rem); font-weight:500; letter-spacing:-.055em; line-height:.98; }
.manifesto-copy { padding-top:1.75rem; color:#bdc9c1; font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.85; }
.manifesto-copy p:first-child { margin-top:0; color:#eef2ef; }
.manifesto-line { display:flex; align-items:center; gap:.75rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(212,175,55,.18); color:#d4af37; font-size:.82rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.projects { border-top:1px solid rgba(212,175,55,.14); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:3rem; margin-bottom:3.5rem; }
.section-heading>p { max-width:31rem; margin:0; color:#aebbb3; line-height:1.7; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.project-card { min-height:34rem; display:flex; flex-direction:column; justify-content:space-between; gap:3rem; padding:clamp(1.4rem,2.4vw,2.3rem); overflow:hidden; border:1px solid rgba(212,175,55,.15); border-radius:1.6rem; background:radial-gradient(circle at 80% 5%,rgba(46,139,87,.22),transparent 12rem),#09110d; }
.project-main { background:linear-gradient(140deg,rgba(46,139,87,.5),rgba(5,12,8,.18) 45%),radial-gradient(circle at 80% 15%,rgba(212,175,55,.28),transparent 12rem),#0c1c13; }
.project-vera { background:linear-gradient(160deg,rgba(246,246,242,.09),transparent 46%),radial-gradient(circle at 80% 10%,rgba(212,175,55,.2),transparent 13rem),#12140f; }
.project-family { background:linear-gradient(140deg,rgba(20,114,75,.3),transparent 48%),radial-gradient(circle at 85% 10%,rgba(106,208,145,.2),transparent 13rem),#08140f; }
.project-topline { display:flex; justify-content:space-between; color:#d4af37; font-size:.72rem; letter-spacing:.14em; }
.project-type { margin:0 0 .7rem; color:#9fb0a6; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
.project-card h3 { margin:0; font-size:clamp(1.8rem,3vw,3rem); font-weight:550; letter-spacing:-.045em; }
.project-card p:not(.project-type) { margin:1.4rem 0 0; color:#c3cec7; line-height:1.75; }
.card-link,.card-note { min-height:2.4rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding-top:1rem; border-top:1px solid rgba(212,175,55,.18); color:#d4af37; font-size:.78rem; }
.card-note { color:#94a59b; }

.listen { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(320px,1.1fr); gap:clamp(3rem,8vw,8rem); align-items:center; }
.platforms { border-top:1px solid rgba(212,175,55,.18); }
.platform-link { min-height:5rem; display:grid; grid-template-columns:2rem 1fr 1.5rem; align-items:center; gap:1rem; border-bottom:1px solid rgba(212,175,55,.18); color:#dae2dd; transition:color 180ms ease,padding 180ms ease,background 180ms ease; }
.platform-link:hover,.platform-link:focus-visible { padding-inline:.75rem; background:rgba(46,139,87,.1); color:#d4af37; }
.platform-link span:last-child { justify-self:end; }

footer { padding:clamp(5rem,9vw,9rem) clamp(1.3rem,5vw,5rem) 2rem; border-top:1px solid rgba(212,175,55,.16); background:radial-gradient(circle at 0 100%,rgba(46,139,87,.24),transparent 30rem),#030604; }
.footer-heading,.social-grid,.footer-bottom { max-width:1260px; margin-inline:auto; }
.footer-heading h2 { max-width:820px; }
.social-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2rem; margin-top:4rem; border-top:1px solid rgba(212,175,55,.18); }
.social-link { min-height:6.5rem; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-content:center; gap:.25rem 1rem; border-bottom:1px solid rgba(212,175,55,.18); transition:color 180ms ease,padding 180ms ease; }
.social-link:hover,.social-link:focus-visible { padding-inline:.7rem; color:#d4af37; }
.social-link span { font-size:1.1rem; font-weight:600; }
.social-link small { color:#8fa096; font-size:.78rem; }
.social-link b { grid-row:1/span 2; grid-column:2; align-self:center; font-weight:400; }
.footer-bottom { display:flex; justify-content:space-between; gap:1.5rem; margin-top:5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.07); color:#76867c; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }

[data-reveal] { opacity:0; transform:translateY(1.8rem); transition:opacity 700ms ease,transform 850ms cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.project-card[data-reveal]:nth-child(2) { transition-delay:90ms; }
.project-card[data-reveal]:nth-child(3) { transition-delay:180ms; }
.back-to-top { position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:60; width:3rem; height:3rem; display:grid; place-items:center; border:1px solid rgba(212,175,55,.55); border-radius:50%; background:rgba(3,10,6,.84); color:#e6c754; box-shadow:0 10px 34px rgba(0,0,0,.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.back-to-top span { transform:translateY(-.05rem); font-size:.82rem; }
.back-to-top:hover,.back-to-top:focus-visible { transform:translateY(-3px); border-color:#d4af37; background:rgba(16,49,31,.94); }
:focus-visible { outline:2px solid #d4af37; outline-offset:4px; }

@media (max-width:980px) {
  .hero { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:auto; }
  .hero-copy { grid-column:1/-1; grid-row:1; min-height:29rem; padding:4.5rem 2rem 3.5rem; }
  .hero-character { min-height:35rem; grid-row:2; -webkit-mask-image:none; mask-image:none; }
  .hero-character-left { grid-column:1; border-radius:0 1.5rem 0 0; }
  .hero-character-right { grid-column:2; border-radius:1.5rem 0 0 0; }
  .hero-character-left::after,.hero-character-right::after { background:linear-gradient(0deg,rgba(5,9,7,.45),transparent 35%); }
  .manifesto { grid-template-columns:1fr 1fr; }
  .project-grid { grid-template-columns:1fr; }
  .project-card { min-height:27rem; }
}
@media (max-width:720px) {
  .masthead-logo { aspect-ratio:auto; height:10.5rem; }
  .site-nav { width:100%; justify-content:center; gap:clamp(.4rem,2vw,1rem); padding-inline:.4rem; overflow:visible; white-space:nowrap; font-size:.875rem; }
  .hero-copy { min-height:27rem; padding-inline:1.3rem; }
  .hero-character { min-height:29rem; }
  .section-heading,.listen { display:grid; grid-template-columns:1fr; }
  .social-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}
@media (max-width:520px) {
  .masthead-logo { height:8.5rem; }
  .hero h1 { font-size:clamp(2.35rem,12vw,3.6rem); }
  .hero-copy { min-height:26rem; padding-inline:1.1rem; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-character { min-height:23rem; }
  .hero-character span { bottom:1rem; font-size:.62rem; letter-spacing:.12em; }
  .hero-character-left span { left:.8rem; }
  .hero-character-right span { right:.8rem; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto-copy { grid-column:1; }
  .project-card { min-height:25rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; }
  [data-reveal] { opacity:1; transform:none; }
}