:root { --ink:#1f1d18; --paper:#f5eddb; --orange:#e66426; --red:#b62920; --gold:#f4b93e; --muted:#6f685b; --line:rgba(31,29,24,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.topbar { position:relative; z-index:10; display:flex; width:min(1240px,calc(100% - 48px)); margin:0 auto; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; font:700 1.35rem Georgia,"Times New Roman",serif; text-decoration:none; }
.brand-mark { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-style:italic; }
.topbar nav { display:flex; align-items:center; gap:28px; }
.topbar nav a { font-size:.82rem; font-weight:750; text-decoration:none; }
.topbar nav a:hover { color:var(--red); }
.legacy-link { padding:10px 16px; border:1px solid var(--ink); border-radius:99px; }
.hero { display:grid; min-height:710px; grid-template-columns:1.04fr .96fr; width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.hero-copy { display:flex; align-items:flex-start; flex-direction:column; justify-content:center; padding:70px 7vw 70px 0; }
.kicker { margin:0 0 18px; color:var(--red); font-size:.76rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { text-wrap:pretty; }
h1 { max-width:700px; margin:0; font:500 clamp(4rem,7.4vw,7.3rem)/.87 Georgia,"Times New Roman",serif; letter-spacing:-.065em; }
.hero-lede { max-width:650px; margin:30px 0 0; color:var(--muted); font-size:1.14rem; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.button { font-size:.9rem; font-weight:800; text-decoration:none; }
.button-primary { padding:15px 22px; border-radius:99px; background:var(--ink); color:var(--paper); transition:transform .2s ease,background .2s ease; }
.button-primary:hover { background:var(--red); transform:translateY(-2px); }
.button-text { border-bottom:1px solid var(--ink); padding-bottom:4px; }
.hero-facts { display:grid; width:100%; grid-template-columns:repeat(3,1fr); gap:16px; margin:64px 0 0; padding:20px 0 0; border-top:1px solid var(--line); list-style:none; }
.hero-facts li { display:flex; flex-direction:column; gap:4px; }
.hero-facts b { font:700 1.1rem Georgia,serif; }
.hero-facts span { color:var(--muted); font-size:.72rem; text-transform:uppercase; }
.hero-visual { position:relative; display:grid; overflow:hidden; place-items:center; background:var(--gold); }
.hero-visual::before { position:absolute; width:115%; height:115%; border:1px solid rgba(31,29,24,.22); border-radius:50%; content:""; }
.sunburst { position:absolute; width:780px; height:780px; opacity:.17; background:repeating-conic-gradient(from 8deg,var(--ink) 0 3deg,transparent 3deg 12deg); border-radius:50%; }
.product-stage { position:relative; z-index:2; display:grid; width:min(78%,470px); aspect-ratio:1; place-items:center; border-radius:50%; background:rgba(255,243,214,.88); box-shadow:0 36px 60px rgba(80,43,6,.2); }
.product-stage img { width:74%; image-rendering:auto; mix-blend-mode:multiply; transform:rotate(-10deg) scale(1.18); }
.scribble { position:absolute; z-index:3; font:italic 1.2rem Georgia,serif; transform:rotate(-7deg); }
.scribble-one { top:13%; left:8%; }
.scribble-two { right:5%; bottom:15%; transform:rotate(7deg); }
.seal { position:absolute; z-index:4; right:8%; top:10%; display:grid; width:112px; height:112px; place-content:center; border-radius:50%; background:var(--red); color:#fff3d6; text-align:center; transform:rotate(8deg); }
.seal b { font:italic 1.05rem Georgia,serif; }
.seal span { font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.marquee { overflow:hidden; padding:16px 0; background:var(--ink); color:var(--paper); white-space:nowrap; }
.marquee div { width:max-content; min-width:100%; font-size:.78rem; font-weight:850; letter-spacing:.14em; text-align:center; }
.marquee span { margin:0 24px; color:var(--gold); }
.section { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.intro { display:grid; grid-template-columns:1.1fr .9fr; gap:10vw; padding:140px 0 80px; }
h2 { margin:0; font:500 clamp(2.8rem,5.6vw,5.6rem)/.95 Georgia,"Times New Roman",serif; letter-spacing:-.055em; }
.intro>p { align-self:end; margin:0; color:var(--muted); font-size:1.15rem; line-height:1.75; }
.benefits { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.benefits article { position:relative; min-height:350px; padding:38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.benefit-number { position:absolute; right:30px; top:30px; color:var(--muted); font:italic 1rem Georgia,serif; }
.benefit-icon { width:58px; height:58px; margin-bottom:56px; border:2px solid var(--orange); border-radius:50%; }
.benefits h3 { max-width:390px; margin:0 0 14px; font:500 2rem/1.05 Georgia,serif; }
.benefits p { max-width:460px; margin:0; color:var(--muted); line-height:1.65; }
.benefit-icon.screw { background:linear-gradient(45deg,transparent 44%,var(--orange) 45% 55%,transparent 56%); }
.benefit-icon.battery { border-radius:8px; box-shadow:inset 0 0 0 14px var(--paper),inset 0 0 0 17px var(--orange); }
.benefit-icon.drop { border-radius:50% 50% 50% 10%; transform:rotate(-45deg) scale(.72); background:var(--orange); }
.benefit-icon.slide { position:relative; border-width:0 0 2px; border-radius:0; }
.benefit-icon.slide::after { position:absolute; right:0; bottom:-7px; width:14px; height:14px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange); content:""; transform:rotate(-45deg); }
.story { display:grid; grid-template-columns:.85fr 1.15fr; gap:10vw; align-items:center; padding:150px 0; }
.story-portrait { position:relative; display:grid; min-height:520px; place-items:center; overflow:hidden; background:var(--orange); }
.story-portrait img { position:relative; z-index:2; width:74%; image-rendering:auto; transform:scale(1.9); transform-origin:center; }
.portrait-ring { position:absolute; width:390px; height:390px; border:2px solid rgba(255,243,214,.45); border-radius:50%; }
.story-portrait span { position:absolute; z-index:3; bottom:20px; left:24px; color:var(--paper); font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.story-copy>p:not(.kicker) { color:var(--muted); font-size:1.05rem; line-height:1.75; }
.story-copy blockquote { margin:30px 0; padding-left:24px; border-left:3px solid var(--orange); font:italic 1.55rem/1.35 Georgia,serif; }
.text-link { display:inline-block; margin-top:8px; font-weight:800; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.availability { display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding:90px; background:var(--ink); color:var(--paper); }
.availability .kicker { color:var(--gold); }
.availability p:not(.kicker) { margin-top:0; color:#c8bda9; font-size:1.05rem; line-height:1.75; }
.availability-note { padding-top:20px; border-top:1px solid rgba(255,255,255,.15); }
.contact { padding:150px 0 130px; text-align:center; }
.contact h2 { margin-bottom:32px; }
.email { display:inline-block; color:var(--red); font:500 clamp(1.6rem,4vw,3.7rem) Georgia,serif; text-decoration-thickness:2px; text-underline-offset:8px; }
.contact-links { display:flex; justify-content:center; gap:30px; margin-top:55px; }
.contact-links a { color:var(--muted); font-size:.85rem; font-weight:750; }
.footer { display:flex; width:min(1240px,calc(100% - 48px)); margin:0 auto; justify-content:space-between; padding:24px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:900px) {
  .topbar nav a:not(.legacy-link) { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:680px; padding-right:0; }
  .hero-visual { min-height:620px; }
  .intro,.story,.availability { grid-template-columns:1fr; }
  .intro { gap:35px; }
  .story { gap:60px; }
  .availability { padding:70px 50px; }
}
@media (max-width:620px) {
  .topbar,.hero,.section,.footer { width:min(100% - 28px,1240px); }
  .topbar { padding:14px 0; }
  .brand { font-size:1.1rem; }
  .legacy-link { padding:8px 12px; }
  .hero { min-height:auto; }
  .hero-copy { min-height:620px; padding:60px 0 50px; }
  h1 { font-size:clamp(3.6rem,17vw,5.4rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .hero-facts { gap:8px; }
  .hero-facts b { font-size:.9rem; }
  .hero-facts span { font-size:.58rem; }
  .hero-visual { min-height:500px; }
  .seal { width:92px; height:92px; }
  .marquee div { text-align:left; }
  .intro { padding-top:95px; }
  .benefits { grid-template-columns:1fr; }
  .benefits article { min-height:310px; padding:30px; }
  .story { padding:100px 0; }
  .story-portrait { min-height:420px; }
  .availability { width:100%; padding:65px 24px; }
  .contact { padding:105px 0; }
  .email { font-size:1.45rem; }
  .contact-links { align-items:center; flex-direction:column; gap:16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button-primary { transition:none; } }