@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Oswald:wght@400;500;600&display=swap');

:root {
  --ink: #080808;
  --ink-2: #111111;
  --paper: #f2efe8;
  --muted: #a6a39c;
  --line: rgba(255,255,255,.13);
  --red: #ef1d2d;
  --red-dark: #af0c18;
  --max: 1380px;
  --pad: clamp(20px, 4vw, 72px);
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
body::before { content:""; position: fixed; inset: 0; pointer-events:none; z-index: 9998; opacity: .16; background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.08) 0 1px, transparent 1px 4px); background-size:7px 7px; mix-blend-mode:soft-light; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--red); color: white; }

.skip-link { position: fixed; z-index: 10001; left: 16px; top: -80px; padding: 12px 18px; background: white; color: #000; border-radius: 4px; transition: top .2s; }
.skip-link:focus { top: 16px; }
.scroll-progress { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.page-loader { position: fixed; inset: 0; z-index: 9999; background: #030303; display:grid; place-items:center; transition: opacity .5s, visibility .5s; }
.page-loader::before { content:"DP"; font: 600 clamp(64px,12vw,160px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--red); animation: loaderPulse 1.1s infinite alternate; }
.page-loader.done { opacity:0; visibility:hidden; }
@keyframes loaderPulse { to { color: var(--red); filter: drop-shadow(0 0 25px rgba(239,29,45,.5)); } }

[data-site-header] { position: relative; z-index: 800; }
.topline { height: 32px; display:flex; justify-content:space-between; align-items:center; padding: 0 var(--pad); color: #cbc7be; background:#030303; border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.13em; font-size:10px; }
.nav-shell { height: 88px; position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding: 0 var(--pad); border-bottom:1px solid var(--line); background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); transition: background .3s, height .3s; }
body.scrolled .nav-shell { position:fixed; top:0; height:72px; background:rgba(7,7,7,.9); backdrop-filter:blur(18px); }
.brand { width: clamp(138px, 13vw, 200px); height: 58px; display:flex; align-items:center; overflow:hidden; }
.brand img { width:100%; filter:contrast(1.08); }
.nav-links { display:flex; align-items:center; gap: clamp(15px,2vw,35px); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
.nav-links > a { position:relative; padding: 10px 0; }
.nav-links > a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:3px; height:2px; background:var(--red); transition:right .25s; }
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after { right:0; }
.nav-cta { padding:13px 17px !important; border:1px solid rgba(255,255,255,.28); transition:background .2s, border .2s; }
.nav-cta:hover { background:var(--red); border-color:var(--red); }
.nav-cta span { margin-left:8px; }
.menu-toggle { display:none; width:48px; height:44px; background:transparent; border:0; position:relative; }
.menu-toggle span { display:block; height:1px; width:28px; background:white; margin:6px auto; }
.menu-toggle b { position:absolute; font-size:0; }

.eyebrow { display:flex; align-items:center; gap:12px; color:var(--red); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }
.eyebrow::before { content:""; width:32px; height:2px; background:currentColor; }
.eyebrow.light { color:white; }
.display { margin:0; font: 500 clamp(56px, 8.6vw, 148px)/.88 var(--display); text-transform:uppercase; letter-spacing:-.035em; }
.display .outline, .outline { color:transparent; -webkit-text-stroke:1px currentColor; }
.section-title { margin:0; font:500 clamp(44px,6vw,96px)/.96 var(--display); text-transform:uppercase; letter-spacing:-.025em; }
.lead { max-width:760px; color:#c4c0b8; font-size:clamp(18px,2vw,26px); line-height:1.45; font-weight:300; }
.kicker { color:var(--muted); max-width:620px; }
.red { color:var(--red); }

.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:190px; gap:24px; padding:16px 19px; border:1px solid rgba(255,255,255,.3); background:transparent; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; transition:.25s; cursor:pointer; }
.button:hover { background:white; border-color:white; color:black; transform:translateY(-2px); }
.button.primary { background:var(--red); border-color:var(--red); color:white; }
.button.primary:hover { background:white; border-color:white; color:black; }
.button.dark { border-color:#222; color:#111; }
.button.dark:hover { background:#111; color:white; }
.button.small { min-width:0; padding:11px 13px; }
.button-icon { font-size:18px; line-height:1; }

.hero { min-height:100svh; padding: 175px var(--pad) 60px; position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); align-items:center; gap:3vw; overflow:hidden; }
#blueprint-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.75; }
.hero::after { content:""; position:absolute; width:50vw; height:50vw; right:-18vw; top:14%; border-radius:50%; background:radial-gradient(circle, rgba(239,29,45,.16), transparent 65%); filter:blur(10px); }
.hero-copy, .logo-stage { position:relative; z-index:2; }
.hero-copy .display { margin:24px 0 26px; }
.hero-copy .lead { max-width:690px; margin-bottom:32px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line); color:#aaa69e; font-size:11px; text-transform:uppercase; letter-spacing:.11em; }
.hero-meta strong { color:white; }
.logo-stage { perspective:1200px; height:min(55vw,620px); min-height:410px; display:grid; place-items:center; --rx:0deg; --ry:0deg; }
.logo-stack { position:relative; width:min(100%,640px); aspect-ratio: 2.14/1; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-2deg); transition:transform .12s ease-out; animation:logoFloat 5s ease-in-out infinite; }
.logo-stack img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px rgba(0,0,0,.65); }
.logo-stack img:nth-child(1){transform:translateZ(-32px);opacity:.1}.logo-stack img:nth-child(2){transform:translateZ(-25px);opacity:.14}.logo-stack img:nth-child(3){transform:translateZ(-18px);opacity:.18}.logo-stack img:nth-child(4){transform:translateZ(-11px);opacity:.28}.logo-stack img:nth-child(5){transform:translateZ(-4px)}
.logo-stack::before { content:""; position:absolute; inset:8%; background:var(--red); filter:blur(60px); opacity:.3; transform:translateZ(-70px); }
.logo-caption { position:absolute; right:2%; bottom:10%; padding:10px 14px; background:rgba(0,0,0,.82); border-left:3px solid var(--red); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
@keyframes logoFloat { 0%,100%{translate:0 0}50%{translate:0 -12px} }

.realtime-strip { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; padding:28px var(--pad); background:var(--red); color:white; }
.realtime-strip strong { font:500 clamp(26px,3vw,50px)/1 var(--display); text-transform:uppercase; }
.realtime-strip p { margin:5px 0 0; max-width:840px; font-size:13px; }
.tv-pill { padding:9px 12px; border:1px solid rgba(255,255,255,.5); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }

.section { padding: clamp(85px,11vw,170px) var(--pad); }
.section-inner { max-width:var(--max); margin:0 auto; }
.section-head { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr); align-items:end; gap:5vw; margin-bottom:clamp(40px,6vw,84px); }
.section-head .kicker { margin:0; }
.paper { background:var(--paper); color:#111; }
.paper .kicker { color:#5c5a55; }
.paper .eyebrow { color:var(--red); }
.grid-lines { background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; }

.services-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #c9c4ba; border-left:1px solid #c9c4ba; }
.service-card { min-height:340px; padding:28px; border-right:1px solid #c9c4ba; border-bottom:1px solid #c9c4ba; display:flex; flex-direction:column; transition:background .3s,color .3s, transform .2s; }
.service-card:hover { background:#111; color:white; }
.service-number { font:500 13px/1 var(--display); color:var(--red); }
.service-card h3 { margin:auto 0 15px; font:500 clamp(25px,2.2vw,38px)/1.04 var(--display); text-transform:uppercase; }
.service-card p { margin:0; font-size:13px; color:#716e67; transition:color .3s; }
.service-card:hover p { color:#bdb8ae; }
.service-arrow { align-self:flex-end; width:42px; height:42px; display:grid; place-items:center; border:1px solid #c9c4ba; border-radius:50%; margin-top:25px; font-size:20px; }

.stats-band { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat { padding:38px var(--pad); border-right:1px solid var(--line); }
.stat:last-child { border:0; }
.stat strong { display:block; font:500 clamp(50px,5.2vw,90px)/1 var(--display); color:white; }
.stat span { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }

.project-showcase { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; }
.project-tile { position:relative; overflow:hidden; min-height:660px; background:#181818; }
.project-tile.small { min-height:321px; }
.project-stack { display:grid; gap:18px; }
.project-tile img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.project-tile:hover img { transform:scale(1.05); filter:saturate(.8); }
.project-overlay { position:absolute; inset:auto 0 0; padding:80px 28px 25px; background:linear-gradient(transparent,rgba(0,0,0,.9)); display:flex; justify-content:space-between; align-items:end; }
.project-overlay h3 { margin:5px 0; font:500 clamp(28px,3vw,48px)/1 var(--display); text-transform:uppercase; }
.project-overlay p { margin:0; color:#bbb; font-size:12px; }
.tag { display:inline-flex; padding:7px 9px; border:1px solid rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.circle-link { flex:0 0 56px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); font-size:24px; transition:.2s; }
.circle-link:hover { background:var(--red); border-color:var(--red); transform:rotate(45deg); }

.compare { --split:52%; height:min(68vw,700px); max-height:700px; position:relative; overflow:hidden; background:#222; }
.compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .after { clip-path:polygon(0 0,var(--split) 0,var(--split) 100%,0 100%); filter:saturate(.9); }
.compare-line { position:absolute; top:0; bottom:0; left:var(--split); width:2px; background:white; transform:translateX(-1px); pointer-events:none; }
.compare-line::before { content:"↔"; position:absolute; top:50%; left:50%; translate:-50% -50%; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--red); font-size:20px; }
.compare input { position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0; cursor:ew-resize; }
.compare-label { position:absolute; z-index:1; top:20px; padding:8px 11px; background:rgba(0,0,0,.72); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.compare-label.before { right:20px; }.compare-label.after-label { left:20px; }

.quote-section { display:grid; grid-template-columns:.65fr 1.35fr; gap:6vw; align-items:start; }
.quote-mark { font:500 clamp(130px,20vw,330px)/.65 var(--display); color:var(--red); }
blockquote { margin:0; font:400 clamp(31px,4.5vw,72px)/1.05 var(--display); text-transform:uppercase; }
blockquote footer { margin-top:30px; font:500 11px/1.5 var(--body); color:var(--muted); letter-spacing:.13em; }

.cta-section { position:relative; overflow:hidden; min-height:620px; display:grid; align-items:center; background:var(--red); }
.cta-section::before { content:"DP"; position:absolute; right:-.04em; bottom:-.32em; font:600 min(60vw,820px)/1 var(--display); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.2); }
.cta-inner { position:relative; z-index:1; max-width:var(--max); width:100%; margin:auto; }
.cta-inner .section-title { max-width:980px; }
.cta-inner p { max-width:650px; margin:24px 0 34px; }

.page-hero { min-height:72svh; padding:190px var(--pad) 72px; position:relative; display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.22)), var(--hero-image, linear-gradient(135deg,#111,#222)); background-size:cover; background-position:center; }
.page-hero-content { position:relative; z-index:1; width:100%; max-width:var(--max); margin:0 auto; }
.page-hero .display { max-width:1150px; }
.page-hero .lead { margin:32px 0 0; }
.breadcrumb { margin-bottom:30px; color:#aaa; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.breadcrumb a:hover { color:white; }

.service-list { border-top:1px solid #c9c4ba; }
.service-row { display:grid; grid-template-columns:80px .85fr 1.15fr; gap:35px; padding:38px 0; border-bottom:1px solid #c9c4ba; align-items:start; }
.service-row .num { color:var(--red); font:500 13px/1 var(--display); }
.service-row h2 { margin:0; font:500 clamp(31px,4vw,61px)/1 var(--display); text-transform:uppercase; }
.service-row p { margin:0; color:#5f5c56; max-width:620px; }
.service-row ul { margin:16px 0 0; padding:0; list-style:none; columns:2; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.service-row li { margin-bottom:7px; }
.service-row li::before { content:"+"; color:var(--red); margin-right:8px; }

.process { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.process-step { background:var(--ink); padding:30px; min-height:300px; display:flex; flex-direction:column; }
.process-step strong { color:var(--red); font:500 13px var(--display); }
.process-step h3 { margin:auto 0 14px; font:500 32px/1 var(--display); text-transform:uppercase; }
.process-step p { margin:0; color:#aaa; font-size:13px; }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; }
.filter { border:1px solid #c7c2b8; background:transparent; color:#222; padding:11px 16px; cursor:pointer; text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:800; }
.filter.active, .filter:hover { background:#111; color:white; border-color:#111; }
.projects-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.project-card { grid-column:span 4; min-height:520px; position:relative; overflow:hidden; background:#111; }
.project-card.wide { grid-column:span 8; }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.project-card:hover img { transform:scale(1.04); }
.project-card[hidden] { display:none; }
.project-card .project-overlay { padding-top:120px; }
.concept-card { background:linear-gradient(145deg,#151515,#080808); color:#fff; display:flex; flex-direction:column; padding:28px; }
.concept-card::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(239,29,45,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(239,29,45,.12) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.iso-house { position:relative; margin:auto; width:220px; height:180px; transform-style:preserve-3d; transform:rotateX(60deg) rotateZ(-35deg); animation:spinHouse 12s linear infinite; }
.iso-house div { position:absolute; background:#e7e2d7; border:1px solid #777; box-shadow:inset 0 0 20px rgba(0,0,0,.1); }
.iso-house .base { width:220px; height:150px; transform:translateZ(35px); }
.iso-house .block1 { width:115px; height:100px; transform:rotateX(-90deg) translateZ(-50px) translateY(-50px); background:#f4f0e8; }
.iso-house .block2 { width:100px; height:85px; transform:rotateY(90deg) translateZ(170px) translateY(20px); background:#ccc5b8; }
.iso-house .roof { width:140px; height:110px; transform:translate(35px,15px) translateZ(105px); background:var(--red); }
@keyframes spinHouse { to { transform:rotateX(60deg) rotateZ(325deg); } }
.concept-content { position:relative; z-index:1; margin-top:auto; color:#fff; }
.concept-content h3 { color:#fff; }
.concept-content p { color:#bbb; }
.project-section-cta { margin-top:22px; }
.project-3d-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-width:220px; margin-top:20px; padding:14px 16px; background:var(--red); color:#fff; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:transform .2s,background .2s; }
.concept-card:hover .project-3d-cta { transform:translateY(-3px); background:#ff2638; }
.project-3d-cta b { font-size:18px; line-height:1; }
.project-3d-status { display:inline-flex; width:max-content; margin-top:20px; padding:11px 13px; border:1px solid rgba(255,255,255,.3); color:#aaa; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.gallery-note { padding:16px 20px; border-left:3px solid var(--red); background:#e4e0d7; color:#555; font-size:12px; margin-bottom:25px; }
.gallery-masonry { columns:3; column-gap:16px; }
.gallery-masonry figure { break-inside:avoid; margin:0 0 16px; position:relative; overflow:hidden; background:#ddd; }
.gallery-masonry img { width:100%; min-height:280px; object-fit:cover; transition:transform .5s; }
.gallery-masonry figure:hover img { transform:scale(1.03); }
.gallery-masonry figcaption { position:absolute; inset:auto 0 0; padding:55px 16px 14px; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:white; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

.viewer-shell { min-height:100svh; padding:145px var(--pad) 50px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; background:#080808; }
.viewer-wrap { position:relative; min-height:720px; border:1px solid var(--line); overflow:hidden; background:radial-gradient(circle at 50% 40%,#242424,#070707 70%); }
#house-viewer { position:absolute; inset:0; }
#house-viewer canvas { display:block; width:100%; height:100%; touch-action:none; }
.viewer-hud { position:absolute; left:20px; top:20px; right:20px; z-index:3; display:flex; justify-content:space-between; pointer-events:none; }
.viewer-badge { padding:9px 12px; background:rgba(0,0,0,.7); border:1px solid var(--line); backdrop-filter:blur(8px); font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.viewer-help { position:absolute; left:20px; bottom:20px; z-index:3; color:#aaa; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.viewer-panel { border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; background:#0d0d0d; }
.viewer-panel h1 { margin:18px 0; font:500 47px/1 var(--display); text-transform:uppercase; }
.viewer-panel p { color:#aaa; font-size:13px; }
.viewer-specs { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); margin:20px 0; }
.viewer-spec { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:15px; }
.viewer-spec strong { display:block; font:500 25px/1 var(--display); }
.viewer-spec span { color:#888; font-size:9px; text-transform:uppercase; letter-spacing:.11em; }
.viewer-controls { margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.viewer-control { padding:12px 9px; border:1px solid var(--line); background:#151515; color:white; cursor:pointer; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.viewer-control:hover, .viewer-control.active { background:var(--red); border-color:var(--red); }
.viewer-control.full { grid-column:1/-1; }
.loading-3d { position:absolute; inset:0; display:grid; place-items:center; z-index:4; background:#080808; transition:.4s; }
.loading-3d.done { opacity:0; visibility:hidden; }
.loading-3d span { color:var(--red); font:500 24px var(--display); text-transform:uppercase; letter-spacing:.1em; }
.loading-3d.error { padding:30px; text-align:center; }
.loading-3d.error div { max-width:420px; }
.loading-3d.error p { color:#aaa; font-size:13px; }
.loading-3d.error .viewer-control { margin-top:12px; }

.story-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:start; }
.story-media { position:sticky; top:100px; }
.story-media img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(.82); }
.story-media::after { content:""; position:absolute; inset:20px -20px -20px 20px; border:1px solid var(--red); z-index:-1; }
.story-copy h2 { font:500 clamp(40px,5vw,78px)/1 var(--display); text-transform:uppercase; margin:0 0 25px; }
.story-copy p { color:#4f4d48; font-size:17px; }
.story-pull { margin:42px 0; padding:30px 0; border-top:1px solid #c7c2b9; border-bottom:1px solid #c7c2b9; font:500 clamp(28px,3vw,44px)/1.08 var(--display); text-transform:uppercase; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value { padding:28px; border:1px solid var(--line); min-height:270px; display:flex; flex-direction:column; }
.value strong { color:var(--red); }
.value h3 { margin:auto 0 10px; font:500 31px/1 var(--display); text-transform:uppercase; }
.value p { margin:0; color:#999; font-size:12px; }

.tv-hero { background:#0a0a0a; }
.tv-lockup { margin:35px 0 20px; display:inline-flex; align-items:center; gap:18px; padding:16px 20px; border:1px solid rgba(255,255,255,.35); }
.tv-lockup b { font:600 clamp(30px,4vw,62px)/1 var(--display); text-transform:uppercase; }
.tv-lockup span { display:block; color:var(--red); font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.episode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.episode-card { min-height:360px; border:1px solid var(--line); padding:28px; display:flex; flex-direction:column; background:#0d0d0d; }
.episode-card .num { color:var(--red); font:500 13px var(--display); }
.episode-card h3 { margin:auto 0 14px; font:500 35px/1 var(--display); text-transform:uppercase; }
.episode-card p { margin:0; color:#999; font-size:13px; }
.source-box { margin-top:34px; padding:22px; border-left:3px solid var(--red); background:#161616; color:#aaa; font-size:13px; }

.contact-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:7vw; }
.contact-details h2 { font:500 clamp(43px,5vw,75px)/1 var(--display); text-transform:uppercase; margin:0 0 30px; }
.contact-item { padding:21px 0; border-top:1px solid #c8c3b9; }
.contact-item span { display:block; color:#777; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.contact-item a, .contact-item strong { font:500 clamp(20px,2.3vw,34px)/1.2 var(--display); }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:9px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
.field input, .field textarea, .field select { width:100%; border:0; border-bottom:1px solid #aaa59b; background:transparent; padding:13px 0; border-radius:0; outline:0; color:#111; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--red); }
.field textarea { min-height:120px; resize:vertical; }
.form-note { grid-column:1/-1; color:#777; font-size:10px; }
.form-status { display:none; grid-column:1/-1; padding:12px; background:#ddd; }
.map-section { display:grid; grid-template-columns:370px 1fr; min-height:650px; }
.map-info { padding:50px var(--pad); background:var(--red); color:white; display:flex; flex-direction:column; }
.map-info h2 { margin:0; font:500 58px/1 var(--display); text-transform:uppercase; }
.map-info p { margin:auto 0 25px; }
.map { min-height:500px; filter:grayscale(1) contrast(1.1); }
.map iframe { width:100%; height:100%; border:0; }

.legal { max-width:900px; margin:0 auto; }
.legal h1 { font:500 clamp(55px,7vw,100px)/1 var(--display); text-transform:uppercase; }
.legal h2 { margin-top:45px; font:500 31px/1 var(--display); text-transform:uppercase; }
.legal p, .legal li { color:#5a5751; }

[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .75s, transform .75s; }
[data-reveal].is-visible { opacity:1; transform:none; }
[data-reveal="left"] { transform:translateX(-35px); }
[data-reveal="left"].is-visible { transform:none; }

[data-site-footer] { background:#030303; padding:70px var(--pad) 22px; border-top:1px solid var(--line); }
.footer-grid { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1.5fr repeat(3,.6fr); gap:4vw; }
.footer-brand img { width:240px; margin-bottom:20px; }
.footer-brand p { color:#888; max-width:430px; font-size:13px; }
.footer-grid h3 { margin:0 0 17px; color:#666; font-size:9px; text-transform:uppercase; letter-spacing:.15em; }
.footer-grid > div:not(.footer-brand) a { display:block; margin:0 0 9px; font-size:12px; }
.footer-grid a:hover { color:var(--red); }
.footer-bottom { max-width:var(--max); margin:55px auto 0; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:#666; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.footer-bottom strong { color:#bdb8af; }

@media (max-width: 1050px) {
  .nav-links { gap:16px; }
  .hero { grid-template-columns:1fr; padding-top:165px; }
  .logo-stage { height:50vw; min-height:370px; }
  .hero-copy { max-width:850px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .project-showcase { grid-template-columns:1fr; }
  .project-tile { min-height:580px; }.project-stack { grid-template-columns:1fr 1fr; }.project-tile.small { min-height:340px; }
  .viewer-shell { grid-template-columns:1fr; }.viewer-wrap { min-height:72svh; }.viewer-panel { min-height:auto; }
  .contact-grid { grid-template-columns:1fr; }
}

@media (max-width: 820px) {
  .topline span:last-child { display:none; }
  .nav-shell { height:74px; }.brand { width:145px; }
  .menu-toggle { display:block; z-index:2; }
  .nav-links { position:fixed; inset:0; padding:110px 25px 40px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; background:#070707; transform:translateX(100%); transition:transform .45s cubic-bezier(.75,0,.25,1); }
  .menu-open .nav-links { transform:none; }
  .nav-links > a { width:100%; padding:10px 0; font:500 clamp(29px,9vw,58px)/1 var(--display); letter-spacing:0; }
  .nav-cta { margin-top:auto; font:700 11px var(--body) !important; padding:15px !important; }
  .menu-open { overflow:hidden; }.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-open .menu-toggle span:nth-child(2){opacity:0}.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero { min-height:auto; padding-top:145px; }
  .hero .display { font-size:clamp(59px,18vw,104px); }
  .logo-stage { min-height:310px; height:67vw; }
  .logo-caption { bottom:2%; }
  .realtime-strip { grid-template-columns:1fr; gap:15px; }
  .section-head { grid-template-columns:1fr; }
  .stats-band { grid-template-columns:1fr 1fr; }.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .service-row { grid-template-columns:42px 1fr; gap:18px; }.service-row > div:last-child { grid-column:2; }
  .process { grid-template-columns:1fr 1fr; }
  .project-card,.project-card.wide { grid-column:span 12; min-height:520px; }
  .gallery-masonry { columns:2; }
  .story-grid { grid-template-columns:1fr; }.story-media { position:relative; top:auto; max-width:600px; }
  .values,.episode-grid { grid-template-columns:1fr; }
  .map-section { grid-template-columns:1fr; }.map-info { min-height:360px; }.map { min-height:500px; }
  .footer-grid { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; }
}

@media (max-width: 560px) {
  .topline { justify-content:center; }
  .hero-actions .button { width:100%; }
  .hero-meta { display:grid; grid-template-columns:1fr 1fr; }
  .services-grid { grid-template-columns:1fr; }.service-card { min-height:290px; }
  .stats-band { grid-template-columns:1fr 1fr; }.stat { padding:25px 18px; }
  .project-stack { grid-template-columns:1fr; }.project-tile { min-height:470px; }.project-tile.small { min-height:330px; }
  .project-overlay { padding:65px 18px 18px; }.project-overlay .circle-link { display:none; }
  .quote-section { grid-template-columns:1fr; }.quote-mark { height:80px; font-size:130px; }
  .process { grid-template-columns:1fr; }
  .service-row ul { columns:1; }
  .gallery-masonry { columns:1; }
  .viewer-shell { padding:120px 14px 25px; }.viewer-wrap { min-height:62svh; }.viewer-help { max-width:220px; }.viewer-panel { padding:20px; }
  .contact-form { grid-template-columns:1fr; }.field.full,.form-note { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; }.footer-brand { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  [data-reveal] { opacity:1; transform:none; }
}