/* Riccolo Sweden: considered orange accents, generous spacing, legible images. */
body {
  font-family: "Helvetica Neue", "Avenir Next", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(#101010eb, #101010eb), url(marble-black-gold.webp) center / cover fixed;
}
h1 { font-weight: 400; line-height: 1.08; overflow-wrap: break-word; text-wrap: balance; }
h2 { text-wrap: balance; }
header { border-radius: 18px; background: #0a0a0af2; box-shadow: 0 10px 40px #0002; }
nav.desktop { white-space: nowrap; }
nav.desktop a[aria-current="page"] { color: var(--accent); }
.language-switch { right: max(36px, calc((100vw - 1400px) / 2 + 4px)); }
.language-switch span { color: #aaa; }
.button { justify-content: center; }
.button:disabled { opacity: .6; cursor: progress; }
.compact { white-space: nowrap; }
.menu-toggle { width: 44px; height: 44px; flex-shrink: 0; }
.menu-toggle span { transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
#menu { padding: 18px; width: 340px; min-width: 0; max-width: calc(100vw - 24px); max-height: min(75vh, 680px); overscroll-behavior: contain; }
#menu a { padding: 10px 12px; border-radius: 8px; font-size: .93rem; }
#menu a:hover { background: #ffffff08; }
.menu-group { border-bottom: 1px solid #ffffff12; }
.menu-group summary { list-style: none; padding: 11px 12px; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group summary::after { content: '+'; color: var(--accent); font-size: 1.1rem; }
.menu-group[open] summary::after { content: '−'; }
.menu-group[open] summary { color: var(--accent); }
.menu-group > div { padding: 0 0 12px 10px; }
.menu-group > div a { font-size: .85rem; color: #d1d1d1; }
summary { touch-action: manipulation; }
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero { background: #151515; }
.hero::after { background: linear-gradient(90deg, #000c 0%, #0008 43%, #0001 100%), linear-gradient(0deg, #101010 0%, transparent 32%); }
.hero-image { object-position: var(--image-focus, center); }
.hero--right::after { background: linear-gradient(270deg, #000e, #0008 45%, #0000 80%), linear-gradient(0deg, #101010, transparent 32%); }
.hero--right .hero-content > * { max-width: 540px; margin-left: auto; }
.hero--right .hero-content .button { display: flex; width: fit-content; margin-left: calc(100% - 540px); }
/* Preserve the complete official equipment photograph rather than cutting off keypads. */
.hero--equipment::after { background: linear-gradient(90deg, #151515 0%, #151515 35%, #15151580 57%, transparent 75%); }
.hero--equipment .hero-image { width: 58%; left: auto; right: 0; object-fit: contain; padding: 150px 32px 65px; }
.hero--equipment .hero-content h1 { max-width: 540px; font-size: clamp(2.5rem, 4.3vw, 4.4rem); }
.hero--equipment .hero-content > p { max-width: 42%; }
.card { min-width: 0; transition: transform .25s, border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-5px); border-color: #ff790080; box-shadow: 0 15px 45px #0003; }
.card > div { min-height: 82px; }
.editorial { align-items: start; }
.scene { border: 1px solid var(--line); }
.scene > img { transition: opacity .22s; }
.scene > img.is-changing { opacity: .25; }
.scene::after { background: linear-gradient(0deg, #000e, #0005 35%, transparent 85%); }
.scene-overlay h2 { margin-bottom: 22px; }
.scene-buttons button { min-height: 44px; background: #111d; }
.scene-buttons button[aria-pressed="true"] { background: var(--scene-accent, var(--accent)); border-color: var(--scene-accent, var(--accent)); color: #101010; }
.scene-hint { margin-top: 13px; margin-bottom: 0; font-size: .75rem; color: #e0e0e0; }
.scene-message { color: #eee; max-width: 500px; margin-bottom: 20px; font-size: .9rem; }
.video-placeholder { background: radial-gradient(ellipse at center, #3a291f, #191919 72%); }
.brand-logo img { max-width: min(200px, 100%); }
.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
footer { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 50px; }
footer small { color: #b0b0b0; }
.contact-person { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 25px; }
.contact-person h3 { margin-bottom: 8px; }
.contact-person p { margin-bottom: 8px; }
.panel a { overflow-wrap: anywhere; }

@media (max-width: 1150px) {
  .hero--equipment .hero-content h1 { max-width: 46%; }
  footer { gap: 32px; }
}
@media (max-width: 850px) {
  .hero--right .hero-content > * { max-width: 52%; }
  .hero--right .hero-content .button { margin-left: 48%; }
  footer { grid-template-columns: 2fr 1fr 1fr; }
  footer > .footer-brands { grid-column: 2 / 4; }
}
@media (max-width: 650px) {
  .language-switch { right: 14px; }
  header { border-radius: 16px; }
  .logo { width: 155px; }
  .nav-actions { gap: 12px; }
  .hero, .hero.home { height: auto; min-height: 620px; max-height: none; }
  .hero-content { padding-top: 175px; padding-bottom: 85px; }
  .hero-content h1 { font-size: clamp(1.9rem, 7.6vw, 2.35rem); max-width: 380px; margin-bottom: 22px; line-height: 1.12; }
  .hero-content > p:not(.eyebrow) { max-width: 320px; }
  .hero::after { background: linear-gradient(90deg, #000c, #0006), linear-gradient(0deg, #101010, transparent 45%); }
  .hero-image { object-position: var(--mobile-focus, 60% center); }
  .hero--right { align-items: flex-end; min-height: 710px; }
  .hero--right::after { background: linear-gradient(0deg, #101010 2%, #000c 36%, #0000 72%); }
  .hero--right .hero-content { padding-bottom: 60px; }
  .hero--right .hero-content > * { max-width: 100%; margin-left: 0; }
  .hero--right .hero-content .button { margin-left: 0; }
  .hero--equipment { min-height: 750px; align-items: flex-end; }
  .hero--equipment::after { background: linear-gradient(0deg, #151515 0%, #151515 34%, #15151500 52%); }
  .hero--equipment .hero-image { width: 100%; height: 390px; top: 145px; padding: 12px 18px 40px; }
  .hero--equipment .hero-content { padding-top: 480px; padding-bottom: 60px; }
  .hero--equipment .hero-content h1 { max-width: 100%; font-size: clamp(1.9rem, 7.6vw, 2.35rem); }
  .hero--equipment .hero-content > p { max-width: 100%; }
  .card > img { height: 180px; }
  .card > div { min-height: 80px; }
  .card .icon { display: block; width: 18px; height: 18px; }
  .home-cards { margin-top: -30px; }
  .editorial { gap: 20px; }
  .scene { height: 490px; }
  .scene h2 { font-size: 1.45rem; }
  .scene-buttons { gap: 8px; }
  .scene-buttons button { padding: 9px 12px; }
  footer { grid-template-columns: 1fr 1fr; gap: 30px; }
  footer > .footer-brands { grid-column: 1 / -1; }
  .tiers { grid-template-columns: 1fr; }
  .page-top h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  #menu { min-width: 0; }
}
@media (max-width: 360px) {
  .card .icon { display: none; }
  .card > div { padding-inline: 10px; }
  .card > img { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}