:root {
  --red: #ed1c24;
  --red-dark: #c90c15;
  --ink: #101010;
  --paper: #f8f7f4;
  --panel: #ffffff;
  --muted: #6d6a67;
  --line: rgba(16,16,16,.14);
  --shadow: 0 22px 70px rgba(18, 12, 12, .11);
  --display: "Space Grotesk", sans-serif;
  --body: "Manrope", sans-serif;
}

html[data-theme="night"] {
  --ink: #f5f3ef;
  --paper: #0b0b0c;
  --panel: #151516;
  --muted: #aaa6a2;
  --line: rgba(255,255,255,.14);
  --shadow: 0 22px 80px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.6; transition: background .35s ease, color .35s ease; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; top: -60px; left: 20px; z-index: 100; background: var(--red); color: white; padding: 10px 16px; border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; }
.nav-shell { width: min(1240px, calc(100% - 40px)); height: 112px; margin: auto; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--line); }
.brand img { width: 198px; height: 76px; object-fit: contain; }
.site-header .nav-shell { display:grid; grid-template-columns:1fr auto; }
.site-header .brand { justify-self:start; }
.download-group { grid-column:2; justify-self:end; display:flex; align-items:center; gap:14px; font-size:14px; font-weight:700; white-space:nowrap; }
.download-button { border:0; border-radius:999px; background:#090909; color:#fff; padding:12px 22px; font-weight:800; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.download-button:disabled { opacity:1; cursor:default; background:#090909; color:#fff; }
nav { display:flex; align-items:center; gap: 34px; font-size: 14px; font-weight: 700; }
nav a { position:relative; }
nav a:not(.nav-contact)::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--red); transition:.2s ease; }
nav a:hover::after { right:0; }
.nav-contact { background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:999px; }
.menu-button { display:none; border:0; background:transparent; padding:8px; color:var(--ink); }
.menu-button span:not(.sr-only) { display:block; width:25px; height:2px; margin:5px 0; background:currentColor; }

.hero { min-height: 820px; padding-top: 112px; overflow:hidden; position:relative; background:
  linear-gradient(90deg, transparent 49.9%, var(--line) 50%, transparent 50.1%);
}
.hero { min-height:800px; display:flex; flex-direction:column; justify-content:center; padding:135px 20px 0; background:radial-gradient(circle at center, rgba(237,28,36,.08), transparent 58%); }
.logo-hero { width:min(900px,88vw); margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.logo-hero img { width:100%; max-height:500px; object-fit:contain; filter:drop-shadow(0 25px 42px rgba(0,0,0,.12)); }
.hero-services-line { margin:24px 0 22px; color:var(--muted); font-size:16px; font-weight:700; text-align:center; }
.hero-call { margin-bottom:0; }
.hero-grid { width:min(1240px, calc(100% - 40px)); min-height: 630px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; }
.hero-copy { padding: 64px 40px 70px 0; position:relative; z-index:2; }
.eyebrow, .kicker { color:var(--red); text-transform:uppercase; letter-spacing:.17em; font-size:12px; font-weight:800; }
.eyebrow { display:flex; align-items:center; gap:11px; }
.eyebrow span { width:31px; height:3px; background:var(--red); }
h1, h2 { font-family:var(--display); margin:0; letter-spacing:-.055em; line-height:.9; }
h1 { font-size:clamp(70px, 9vw, 132px); font-weight:700; margin:30px 0 35px; }
h1 em, h2 span { font-style:normal; color:var(--red); }
.hero-lead { max-width:590px; color:var(--muted); font-size:19px; line-height:1.75; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:38px; }
.button { display:inline-flex; align-items:center; gap:18px; border-radius:999px; padding:15px 21px; font-size:14px; font-weight:800; }
.button-primary { background:var(--red); color:white; box-shadow:0 10px 24px rgba(237,28,36,.24); }
.button-primary:hover { background:var(--red-dark); transform:translateY(-2px); }
.button-secondary { border:1px solid var(--line); }
.theme-note { display:flex; align-items:center; gap:9px; margin:28px 0 0; color:var(--muted); font-size:12px; }
.theme-dot { width:8px; height:8px; background:var(--red); border-radius:50%; box-shadow:0 0 0 5px rgba(237,28,36,.1); }
.hero-mark { min-height:530px; position:relative; display:grid; place-items:center; isolation:isolate; }
.hero-mark::before { content:""; position:absolute; width:min(36vw,480px); aspect-ratio:1; border-radius:50%; background:var(--red); z-index:-2; box-shadow:0 45px 90px rgba(237,28,36,.28); }
.hero-mark::after { content:"S"; position:absolute; color:white; font:700 clamp(220px,28vw,420px)/1 var(--display); letter-spacing:-.14em; transform:translateX(-5%); }
.hero-mark p { position:absolute; z-index:2; right:1%; bottom:12%; color:white; font:700 14px/1.25 var(--display); letter-spacing:.18em; text-align:right; }
.hero-ring { position:absolute; border:1px solid rgba(255,255,255,.48); border-radius:50%; z-index:1; }
.ring-one { width:65%; aspect-ratio:1; }
.ring-two { width:82%; aspect-ratio:1; border-color:var(--line); }
.section { width:min(1240px, calc(100% - 40px)); margin:auto; padding:135px 0; }
.section-intro { display:grid; grid-template-columns:.7fr 1.15fr .9fr; gap:40px; align-items:end; }
.services-intro { display:block; width:50%; }
.services-intro h2 { color:var(--ink); }
.service-card-grid { margin-top:62px; display:grid; grid-template-columns:repeat(2, minmax(0, 330px)); gap:28px; align-items:start; }
.service-card { display:block; width:100%; aspect-ratio:1; border-radius:24px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.service-card img { width:100%; height:100%; object-fit:cover; }
.service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.service-card:focus-visible { outline:3px solid var(--red); outline-offset:5px; }
.service-more { margin:28px 0 0; }
.service-more a { display:inline-flex; align-items:center; gap:10px; color:var(--red); font-weight:800; }
h2 { font-size:clamp(54px, 7vw, 92px); }
.section-intro > p:last-child, .machines-heading > p { color:var(--muted); max-width:430px; margin:0 0 7px; }

.machines { border-top:1px solid var(--line); }
.machines-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:66px; }
.machine-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.machine-card { min-height:520px; border-radius:30px; overflow:hidden; padding:22px 22px 25px; display:flex; flex-direction:column; color:#151515; box-shadow:var(--shadow); }
.card-blush { background:#fae5e6; }
.card-sky { background:#e1f0fa; }
.card-mint { background:#e4f3e7; }
.card-lilac { background:#eee8f8; }
.card-peach { background:#f9eadc; }
.machine-image { min-height:380px; flex:1; display:grid; place-items:center; padding:15px; }
.machine-image img { width:100%; max-height:350px; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(25,22,20,.18)); transition:transform .35s ease; }
.machine-card:hover img { transform:scale(1.035) translateY(-4px); }
.machine-copy { display:grid; grid-template-columns:1fr auto; column-gap:20px; border-top:1px solid rgba(0,0,0,.14); padding:20px 5px 0; }
.machine-copy p { grid-column:1/-1; color:#b40d14; font-size:11px; text-transform:uppercase; letter-spacing:.18em; font-weight:800; margin:0 0 6px; }
.machine-copy h3 { margin:0; font:600 25px/1.2 var(--display); }
.machine-copy span { color:#6c6660; font-size:13px; align-self:end; }
.machine-wide { grid-column:1/-1; min-height:550px; }
.machine-wide .machine-image img { max-height:380px; }

.contact { padding:130px max(20px, calc((100% - 1240px)/2)); background:var(--red); color:white; }
.contact .kicker { color:white; opacity:.7; }
.contact h2 { font-size:clamp(70px, 10vw, 150px); margin:28px 0 70px; }
.contact h2 span { color:#101010; }
.contact-links { border-top:1px solid rgba(255,255,255,.35); }
.contact-links a { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:20px; padding:23px 3px; border-bottom:1px solid rgba(255,255,255,.35); font:600 clamp(18px,3vw,34px)/1.2 var(--display); }
.contact-links small { text-transform:uppercase; letter-spacing:.16em; font:700 10px/1 var(--body); opacity:.7; }
.contact-links a:hover { color:#151515; }

footer { min-height:190px; padding:35px max(20px, calc((100% - 1240px)/2)); display:grid; grid-template-columns:1fr auto auto; gap:45px; align-items:center; font-size:12px; color:var(--muted); }
.footer-brand img { width:175px; height:80px; object-fit:contain; }

@media (max-width: 900px) {
  .nav-shell { height:88px; }
  .brand img { width:155px; height:62px; }
  .site-header .nav-shell { grid-template-columns:1fr auto; }
  .download-group { font-size:12px; gap:10px; }
  .download-button { padding:10px 17px; }
  .menu-button { display:block; z-index:3; }
  nav { display:none; position:absolute; top:78px; left:20px; right:20px; padding:24px; border-radius:20px; background:var(--panel); box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:18px; }
  nav.open { display:flex; }
  .nav-contact { text-align:center; }
  .hero { padding-top:100px; background:radial-gradient(circle at center, rgba(237,28,36,.08), transparent 60%); }
  .hero-grid { grid-template-columns:1fr; padding:45px 0 80px; }
  .hero-copy { padding:25px 0; }
  .hero-mark { min-height:430px; }
  .hero-mark::before { width:min(80vw,430px); }
  .section-intro { grid-template-columns:1fr; }
  .services-intro { width:65%; }
  .section-intro > p:last-child { margin-top:8px; }
  .machines-heading { display:block; }
  .machines-heading > p { margin-top:30px; }
  .machine-card { min-height:450px; }
  .machine-image { min-height:310px; }
  footer { grid-template-columns:1fr; gap:10px; }
}

@media (max-width: 650px) {
  .nav-shell, .hero-grid, .section { width:min(100% - 28px, 1240px); }
  .site-header .nav-shell { width:calc(100% - 28px); height:94px; grid-template-columns:120px 1fr; gap:10px; }
  .site-header .brand img { width:118px; height:62px; }
  .download-group { grid-column:2; justify-self:end; gap:7px; font-size:10px; white-space:normal; text-align:right; line-height:1.25; }
  .download-group > span:first-child { max-width:92px; }
  .download-button { padding:9px 13px; font-size:11px; }
  .hero { min-height:auto; }
  .hero { min-height:560px; padding:115px 14px 50px; }
  .logo-hero { width:min(96vw,620px); }
  .hero-services-line { margin-top:18px; font-size:13px; }
  .hero-call { margin-bottom:0; }
  .services-intro { width:100%; }
  .service-card-grid { margin-top:42px; grid-template-columns:1fr; gap:20px; }
  .service-card { width:min(290px, 100%); }
  h1 { font-size:clamp(61px,22vw,92px); }
  .hero-mark { min-height:330px; }
  .hero-mark::after { font-size:250px; }
  .hero-mark p { right:7%; }
  .section { padding:90px 0; }
  h2 { font-size:clamp(50px,16vw,75px); }
  .machine-grid { grid-template-columns:1fr; }
  .machine-wide { grid-column:auto; }
  .machine-card { min-height:390px; border-radius:22px; padding:16px; }
  .machine-image { min-height:270px; }
  .machine-copy { grid-template-columns:1fr; }
  .machine-copy span { margin-top:7px; }
  .contact { padding-block:90px; }
  .contact-links a { grid-template-columns:1fr auto; }
  .contact-links small { grid-column:1/-1; }
  .contact-links a:nth-child(3) { font-size:16px; word-break:break-word; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}