:root {
  --ink: #0a0b0a;
  --paper: #f2efe7;
  --bone: #ded8cb;
  --acid: #d8ff35;
  --white: #fffef9;
  --line: rgba(255,255,255,.18);
  --serif: "Times New Roman", Times, serif;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input { font: inherit; }
.page { overflow: hidden; }
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.display { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.nav { position: fixed; z-index: 50; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 78px; padding: 0 3vw; color: white; border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); background: rgba(8,10,9,.32); }
.brand { font-size: 13px; font-weight: 700; letter-spacing: .18em; }
.nav-links { display: flex; gap: 28px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav-cta { padding: 12px 18px; border: 1px solid rgba(255,255,255,.55); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.menu-button { display: none; background: none; color: white; border: 0; font-size: 20px; }
.hero { min-height: 100svh; display: flex; align-items: end; position: relative; padding: 130px 3vw 54px; background-size: cover; background-position: center; }
.hero:after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,8,8,.78) 0%, rgba(5,8,8,.32) 47%, rgba(5,8,8,.08) 80%), linear-gradient(0deg, rgba(5,8,8,.58), transparent 48%); }
.hero-inner { position: relative; z-index: 1; max-width: 1000px; }
.hero-product { position:absolute; z-index:3; right:3vw; bottom:54px; width:min(25vw,340px); background:var(--paper); color:var(--ink); padding:10px; box-shadow:0 28px 70px rgba(0,0,0,.38); transform:rotate(1.5deg); }
.hero-product img { aspect-ratio:4/3; object-fit:cover; filter:saturate(.78) contrast(1.04); }
.hero-product figcaption { display:flex; justify-content:space-between; gap:12px; padding:12px 4px 4px; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.hero h1 { max-width: 900px; font-size: clamp(68px, 9.6vw, 154px); text-transform: uppercase; }
.hero-copy { display: flex; align-items: end; gap: 50px; margin-top: 34px; }
.hero-copy p { max-width: 420px; margin: 0; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.45; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; background: var(--acid); color: #0b0d0b; border: 0; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.button.dark { background: var(--ink); color: white; }
.ticker { border-block: 1px solid rgba(255,255,255,.16); overflow: hidden; background:#0d100e; }
.ticker-track { width: max-content; display:flex; gap:52px; padding:18px 0; animation: drift 30s linear infinite; font-family: var(--serif); font-size: 20px; font-style: italic; }
@keyframes drift { to { transform: translateX(-50%); } }
.section { padding: 120px 3vw; }
.section-paper { background: var(--paper); color: var(--ink); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom: 54px; }
.section-title { max-width: 1000px; font-size: clamp(54px, 7vw, 116px); }
.section-note { max-width: 320px; font-size: 14px; line-height: 1.55; }
.experiences { display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.experience-card { grid-column: span 4; min-height: 500px; position:relative; overflow:hidden; background:#181b19; }
.experience-card.wide { grid-column: span 8; }
.experience-card img { position:absolute; inset:0; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.experience-card:hover img { transform: scale(1.035); }
.experience-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,6,5,.78), transparent 60%); }
.card-copy { position:absolute; z-index:2; inset:auto 24px 24px; }
.card-index { font-size:10px; letter-spacing:.18em; opacity:.72; }
.card-title { margin:10px 0 0; font-family:var(--serif); font-size:clamp(32px,4vw,58px); font-weight:400; }
.editorial-grid { display:grid; grid-template-columns: 1.25fr .75fr; min-height: 760px; }
.editorial-image { min-height: 620px; background-size:cover; background-position:center; }
.editorial-image.product-photo { background-size:cover; background-color:#dedbd2; filter:saturate(.82); }
.editorial-copy { background:var(--acid); color:var(--ink); padding: 70px 4vw; display:flex; flex-direction:column; justify-content:space-between; }
.editorial-copy h2 { font-size:clamp(54px,7vw,104px); }
.editorial-copy p { max-width:430px; font-size:17px; line-height:1.55; }
.villa-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.villa-card { position:relative; min-height:700px; overflow:hidden; }
.villa-card img { height:100%; object-fit:cover; transition:transform .8s ease; }
.villa-card:hover img { transform:scale(1.025); }
.villa-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.82), transparent 60%); }
.villa-meta { position:absolute; z-index:2; left:28px; right:28px; bottom:28px; }
.villa-meta h3 { margin:8px 0 18px; font-family:var(--serif); font-weight:400; font-size:46px; }
.meta-row { display:flex; justify-content:space-between; gap:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.45); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.manifesto { display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding: 150px 3vw; }
.manifesto h2 { font-size:clamp(62px,8vw,130px); }
.manifesto-copy { align-self:end; }
.manifesto-copy p { max-width:530px; font-family:var(--serif); font-size:clamp(26px,3vw,44px); line-height:1.1; }
.link { display:inline-flex; margin-top:28px; padding-bottom:8px; border-bottom:1px solid; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.footer { padding:80px 3vw 28px; background:#111310; border-top:1px solid rgba(255,255,255,.12); }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:60px; }
.footer-title { font-family:var(--serif); font-size:clamp(44px,6vw,92px); line-height:.9; }
.footer a { display:block; margin:0 0 14px; font-size:12px; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:90px; padding-top:24px; border-top:1px solid rgba(255,255,255,.18); font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.65; }

/* Internal pages */
.internal-hero { min-height:86svh; align-items:end; }
.internal-hero h1 { max-width:1150px; }
.split-intro { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }
.split-intro h2 { font-size:clamp(58px,8vw,120px); }
.split-intro p { font-family:var(--serif); font-size:clamp(28px,3vw,44px); line-height:1.15; margin:0; }
.listing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.listing { background:#171917; }
.listing-image { height:420px; object-fit:cover; }
.listing-body { padding:24px; }
.listing h3 { font-family:var(--serif); font-size:31px; font-weight:400; margin:8px 0 24px; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:11px; line-height:1.5; opacity:.78; }
.price { display:flex; align-items:end; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18); }
.price strong { font-family:var(--serif); font-size:28px; font-weight:400; }
.villa-hero-title { font-size:clamp(60px,8vw,128px)!important; }
.score-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; align-items:center; }
.score-number { font-family:var(--serif); font-size:clamp(140px,22vw,320px); line-height:.75; letter-spacing:-.08em; }
.score-number small { font-family:var(--sans); font-size:18px; letter-spacing:.05em; }
.score-bars { display:grid; gap:24px; }
.bar-top { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.bar { height:3px; background:rgba(255,255,255,.2); margin-top:10px; }
.bar i { display:block; height:100%; background:var(--acid); }
.robot-layout { display:grid; grid-template-columns:1fr 1fr; min-height:760px; }
.robot-photo { background-size:cover; background-position:center; }
.photo-credit { font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
.robot-copy { padding:80px 6vw; background:var(--paper); color:var(--ink); }
.robot-copy h2 { font-size:clamp(58px,7vw,108px); }
.robot-list { list-style:none; padding:0; margin:50px 0 0; }
.robot-list li { padding:18px 0; border-top:1px solid rgba(0,0,0,.2); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.story { counter-reset:scene; }
.scene { min-height:82vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; border-top:1px solid rgba(255,255,255,.15); }
.scene:before { counter-increment:scene; content:"0" counter(scene); padding-left:3vw; font-size:11px; letter-spacing:.2em; color:var(--acid); }
.scene h3 { margin:0; padding:80px 5vw 80px 0; font-family:var(--serif); font-size:clamp(62px,9vw,145px); font-weight:400; line-height:.88; }
.bring-grid { display:grid; grid-template-columns:1fr 1fr; min-height:100svh; padding-top:78px; }
.bring-image { background:url('assets/robots/real/unitree-go2.webp') center/cover; filter:saturate(.78) contrast(1.05); }
.bring-copy { background:var(--paper); color:var(--ink); padding:7vw 5vw; display:flex; flex-direction:column; justify-content:center; }
.bring-copy h1 { font-size:clamp(60px,7vw,110px); }
.robot-id { margin:50px 0; padding:28px; border:1px solid rgba(0,0,0,.2); }
.robot-id strong { display:block; font-family:var(--serif); font-size:52px; font-weight:400; }
.id-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.waitlist { display:flex; margin-top:20px; }
.waitlist input { min-width:0; flex:1; border:1px solid rgba(0,0,0,.25); border-right:0; background:transparent; padding:0 18px; }
.form-status { min-height:22px; margin-top:12px; font-size:12px; }
.directory { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.16); }
.robot-gallery { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:12px; margin-bottom:72px; }
.robot-gallery figure { margin:0; background:#171917; }
.robot-gallery img { height:420px; object-fit:cover; filter:saturate(.8); }
.robot-gallery figcaption { display:flex; justify-content:space-between; padding:14px; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.robot-card { min-height:360px; padding:38px; border-right:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; justify-content:space-between; }
.robot-card h3 { font-family:var(--serif); font-size:clamp(48px,6vw,82px); font-weight:400; margin:0; }
.robot-card p { max-width:360px; color:#b7b9b4; line-height:1.6; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width:1200px) and (min-width:901px) {
  .hero-product { width:220px; }
  .hero h1 { max-width:720px; }
}

@media (max-width: 900px) {
  .nav { grid-template-columns:1fr auto; height:64px; padding:0 18px; }
  .nav-links, .nav-cta { display:none; }
  .menu-button { display:block; }
  .nav.open .nav-links { display:flex; position:absolute; top:64px; left:0; right:0; padding:32px 20px; flex-direction:column; background:rgba(10,11,10,.96); }
  .hero { padding:110px 20px 36px; }
  .hero { flex-direction:column; justify-content:flex-end; align-items:stretch; }
  .hero h1 { font-size:clamp(54px,16vw,92px); }
  .hero-product { position:relative; right:auto; bottom:auto; width:100%; margin:36px 0 0; transform:none; }
  .hero-copy { align-items:start; flex-direction:column; gap:24px; }
  .section { padding:84px 20px; }
  .section-head, .split-intro { display:block; }
  .section-note { margin-top:24px; }
  .experiences { display:block; }
  .experience-card { min-height:440px; margin-bottom:12px; }
  .editorial-grid, .robot-layout, .bring-grid { grid-template-columns:1fr; }
  .editorial-image, .robot-photo, .bring-image { min-height:65vh; }
  .villa-grid, .listing-grid, .directory { grid-template-columns:1fr; }
  .robot-gallery { grid-template-columns:1fr; }
  .villa-card { min-height:560px; }
  .manifesto { grid-template-columns:1fr; padding:90px 20px; }
  .footer-top { grid-template-columns:1fr; }
  .score-layout { grid-template-columns:1fr; }
  .score-number { font-size:46vw; }
  .scene { min-height:58vh; grid-template-columns:60px 1fr; }
  .scene h3 { font-size:17vw; padding-right:18px; }
  .bring-grid { padding-top:64px; }
  .bring-image { min-height:62vh; }
  .waitlist { display:grid; gap:10px; }
  .waitlist input { height:52px; border-right:1px solid rgba(0,0,0,.25); }
}