:root { --ink:#10100f; --paper:#f5f3ee; --sand:#e9e5dc; --line:#cfc9bf; --muted:#68665f; --orange:#e87a00; --white:#fffdf9; --display:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:min(1240px, calc(100% - 48px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(245,243,238,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.nav { height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:block; width:125px; height:50px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:28px; font-size:11px; letter-spacing:.13em; font-weight:bold; text-transform:uppercase; }
.nav-links a { border-bottom:1px solid transparent; padding:6px 0; }
.nav-links a:hover { border-color:var(--orange); }
.menu-toggle { display:none; border:0; background:none; font:inherit; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow { margin:0 0 16px; color:var(--orange); font-size:11px; font-weight:bold; letter-spacing:.17em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--display); font-weight:normal; letter-spacing:-.045em; line-height:.96; }
h1 { font-size:clamp(3.7rem,8vw,8rem); max-width:900px; }
h2 { font-size:clamp(2.5rem,5vw,5.6rem); }
h3 { font-size:1.1rem; letter-spacing:-.02em; }
.lead { color:#44423d; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; max-width:540px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; background:var(--ink); color:var(--white); font-size:11px; font-weight:bold; letter-spacing:.13em; text-transform:uppercase; transition:background .2s,transform .2s; }
.button:hover { background:var(--orange); transform:translateY(-2px); }
.button.secondary { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.button.secondary:hover { color:var(--white); border-color:var(--orange); }
.hero { min-height:calc(100vh - 78px); padding:clamp(70px,10vw,150px) 0 0; overflow:hidden; position:relative; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:end; }
.hero-copy { padding-bottom:clamp(50px,9vw,130px); position:relative; z-index:1; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.hero-note { margin-top:70px; display:flex; gap:18px; align-items:center; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.hero-note::before { content:''; width:44px; border-top:1px solid var(--orange); }
.hero-product { align-self:end; min-height:570px; display:flex; align-items:end; justify-content:center; background:linear-gradient(145deg,#e9e5dc,#d8d2c7); position:relative; }
.hero-product { overflow:hidden; }
.hero-product::before { content:''; position:absolute; inset:-32px; background:linear-gradient(rgba(233,229,220,.58),rgba(216,210,199,.72)),url('pexels-tima-miroshnichenko-7991158.jpg') center / cover fixed; filter:blur(7px); opacity:.62; }
.hero-product::after { content:'NR30'; position:absolute; right:-8px; top:28px; color:rgba(16,16,15,.08); font:clamp(4rem,12vw,11rem)/.8 var(--display); }
.hero-product img { width:min(100%,620px); max-height:600px; object-fit:contain; position:relative; z-index:1; }
.data-strip { background:var(--ink); color:var(--white); }
.data-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.metric { padding:35px 24px; border-left:1px solid #3c3c39; }
.metric:first-child { border-left:0; }
.metric strong { display:block; font:2.2rem/1 var(--display); letter-spacing:-.05em; }
.metric span { display:block; margin-top:8px; color:#bdbbb5; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.section { padding:clamp(80px,12vw,170px) 0; }
.section-head { display:flex; gap:30px; justify-content:space-between; align-items:end; margin-bottom:70px; }
.section-head .lead { margin:0; }
.statement { background:var(--ink); color:var(--white); }
.statement-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:10%; align-items:start; }
.statement .lead { color:#d0cec9; }
.number { color:var(--orange); font:12px var(--sans); letter-spacing:.14em; }
.products { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.product-card { min-height:570px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); transition:background .25s; display:flex; flex-direction:column; }
.product-card:hover { background:var(--white); }
.product-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-weight:bold; letter-spacing:.13em; text-transform:uppercase; }
.product-image { height:290px; margin:20px 0; display:flex; align-items:center; justify-content:center; background:#e9e5dc; overflow:hidden; }
.product-image img { height:100%; width:100%; object-fit:contain; transition:transform .35s; }
.product-card:hover .product-image img { transform:scale(1.04); }
.product-card h3 { font:2.4rem var(--display); margin:0 0 5px; }
.product-spec { color:var(--muted); font-size:14px; }
.product-card .product-spec::after { display:block; margin-top:12px; color:var(--orange); font-size:12px; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; }
.product-card:nth-child(1) .product-spec::after { content:'MSRP $6,950'; }
.product-card:nth-child(2) .product-spec::after { content:'MSRP $8,900'; }
.product-card:nth-child(3) .product-spec::after { content:'MSRP $11,500'; }
.arrow-link { margin-top:auto; padding-top:26px; color:var(--orange); font-size:11px; font-weight:bold; letter-spacing:.13em; text-transform:uppercase; }
.arrow-link::after { content:'  ↗'; font-size:16px; }
.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature { padding:30px; min-height:230px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature p { color:var(--muted); font-size:14px; }
.feature-index { color:var(--orange); font-size:11px; font-weight:bold; letter-spacing:.1em; }
.comparison { width:100%; border-collapse:collapse; font-size:14px; }
.comparison th,.comparison td { border-bottom:1px solid var(--line); padding:19px 12px; text-align:left; }
.comparison th { font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.comparison th:first-child,.comparison td:first-child { padding-left:0; color:var(--muted); }
.contact { background:var(--orange); }
.contact-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.contact .eyebrow { color:var(--ink); }
.contact h2 { max-width:650px; }
.contact p { max-width:490px; }
.footer { padding:38px 0; background:var(--ink); color:#d2d0c9; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.footer img { width:105px; height:42px; object-fit:contain; }
.product-hero { padding:80px 0 0; background:var(--sand); overflow:hidden; }
.breadcrumb { color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.product-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; min-height:610px; }
.product-hero h1 { margin:8px 0 24px; }
.product-hero .lead::after { display:block; margin-top:22px; color:var(--orange); font-size:13px; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; }
body:has(.product-hero-image img[src="NR10.png"]) .product-hero .lead::after { content:'MSRP $6,950'; }
body:has(.product-hero-image img[src="NR20.png"]) .product-hero .lead::after { content:'MSRP $8,900'; }
body:has(.product-hero-image img[src="NR30.png"]) .product-hero .lead::after { content:'MSRP $11,500'; }
.product-hero-image { height:100%; min-height:490px; display:flex; align-items:end; justify-content:center; position:relative; }
.product-hero-image img { max-height:540px; width:100%; object-fit:contain; }
.product-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:42px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.product-stats div { padding:17px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.product-stats strong { display:block; font:1.8rem var(--display); }
.product-stats span { color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.spec-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:10%; align-items:start; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table td { border-bottom:1px solid var(--line); padding:15px 0; font-size:14px; }
.spec-table td:first-child { width:46%; color:var(--muted); }
.spec-group td { padding-top:34px; color:var(--orange)!important; font-size:10px!important; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:760px) { .wrap { width:min(100% - 32px,1240px); } .nav { height:64px; } .logo { width:98px; } .menu-toggle { display:block; } .nav-links { display:none; position:absolute; top:64px; left:0; right:0; padding:18px 16px 24px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; } .nav-links.open { display:flex; } .hero { min-height:0; padding-top:64px; } .hero-grid,.statement-grid,.product-hero-grid,.spec-layout { grid-template-columns:1fr; } .hero-copy { padding-bottom:45px; } .hero-product { min-height:350px; } .hero-product img { max-height:370px; } .data-grid,.products,.feature-list { grid-template-columns:1fr 1fr; } .metric:nth-child(3) { border-left:0; } .section-head { display:block; margin-bottom:40px; } .section-head h2 { margin-bottom:22px; } .product-card { min-height:450px; padding:18px; } .product-image { height:190px; } .product-card h3 { font-size:2rem; } .feature { min-height:200px; padding:22px; } .contact-grid { grid-template-columns:1fr; } .footer-grid { display:grid; justify-content:start; } .product-hero { padding-top:45px; } .product-hero-grid { min-height:0; } .product-hero-image { min-height:330px; } .product-hero-image img { max-height:350px; } .spec-layout h2 { margin-bottom:35px; } }
@media (max-width:430px) { .data-grid,.products,.feature-list { grid-template-columns:1fr; } .metric { border-left:0; border-bottom:1px solid #3c3c39; } .metric:last-child { border-bottom:0; } .hero-actions .button { width:100%; } .comparison { font-size:12px; } .comparison th,.comparison td { padding:15px 7px; } }