/* ═══════════════════════════════════════════════════════════════
   LightWatch — publieke website
   ───────────────────────────────────────────────────────────────
   Warm minimal: crème basis, bordeaux als enige actiekleur, oranje
   alleen in het logo. Zwevende pill-navigatie, haarlijnen in plaats
   van kaders, veel witruimte.

   Deze stylesheet vervangt css/style.css op de publieke pagina's
   (home, zakelijk, privacy, voorwaarden, login). Het beheerdersdeel
   (dashboard en verder) gebruikt style.css ongewijzigd, daarom staan
   de login- en MFA-onderdelen hieronder ook hier: mfa.js bouwt zijn
   overlay met dezelfde klassenamen.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --sand:     #F3EEE6;
  --sand-2:   #E9E2D6;
  --cream:    #FCF9F4;
  --ink:      #262019;
  --ink-2:    #6E6459;
  --ink-3:    #9A9087;
  --line:     rgba(38, 32, 25, 0.13);
  --brd:      #8E1E1E;
  --brd-dark: #731616;
  --orange:   #D9721A;
  --ok:       #2F7A52;
  --max-w:    1200px;
  --shadow:   0 10px 34px rgba(60, 44, 26, 0.10);
  --shadow-lg:0 24px 60px rgba(60, 44, 26, 0.18);
  --radius:   20px;
  --radius-sm:12px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Eén icoonfont voor de hele site. main.js en mfa.js schrijven
   ligatuurnamen in elementen met de klasse .material-icons-round;
   die namen bestaan ook in Material Symbols, dus beide klassen
   wijzen naar hetzelfde lettertype. */
.msym, .material-icons-round {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }

/* ── Typografie ──────────────────────────────────────────────── */
.label, .section-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-2);
}
.label--light { color: rgba(255,251,244,.72); }
.display, .section-title {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: .94; letter-spacing: -0.005em;
}
.section-title { font-size: clamp(28px, 3.6vw, 42px); margin-top: 18px; }
.sub, .section-sub { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.hair { width: 54px; height: 1px; background: var(--ink); opacity: .35; }

/* ── Knoppen ─────────────────────────────────────────────────── */
.pill, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: none; cursor: pointer; border-radius: 100px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; padding: 17px 30px; transition: .2s;
}
.pill--fill, .btn.primary { background: var(--brd); color: #FBF6EF; }
.pill--fill:hover, .btn.primary:hover { background: var(--brd-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(142,30,30,.22); }
.btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.pill--wire { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.pill--wire:hover { border-color: rgba(38,32,25,.35); background: rgba(38,32,25,.03); }
.pill .msym { font-size: 18px; }

/* ── Zwevende navigatie ──────────────────────────────────────── */
.nav-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 18px 24px; transition: padding .3s; }
.nav-shell.scrolled { padding: 10px 24px; }
.nav-bar {
  max-width: var(--max-w); margin: 0 auto; background: var(--cream); border-radius: 100px;
  padding: 13px 13px 13px 30px; display: flex; align-items: center; gap: 30px; box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; }
.brand .logo-img { height: 28px; width: auto; }
.nav-links {
  margin-left: auto; display: flex; align-items: center; gap: 28px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.nav-links a { transition: color .18s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-bar .pill { padding: 14px 26px; }
.hamburger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ink); }
.hamburger .material-icons-round { font-size: 26px; }
.mobile-nav { display: none; max-width: var(--max-w); margin: 10px auto 0; background: var(--cream); border-radius: 24px; padding: 10px 0; box-shadow: var(--shadow); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 30px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mobile-nav a + a { border-top: 1px solid var(--line); }

/* Pagina's zonder hero beginnen onder de zwevende balk. */
.page-top { padding-top: 132px; }
section[id], header[id] { scroll-margin-top: 112px; }

/* ── Melding vanaf app.lightwatch.eu ─────────────────────────── */
.desktop-notice {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: var(--sand-2); padding: 12px 24px; font-size: 14px; color: var(--ink-2);
  position: relative; z-index: 3;
}
.desktop-notice .material-icons-round { font-size: 19px; color: var(--orange); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 780px; display: flex; align-items: center; padding: 150px 0 190px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: url('../images/bg_site.jpg') center/cover; filter: brightness(1.22) saturate(.78) contrast(.94); }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(243,238,230,.97) 0%, rgba(243,238,230,.90) 30%, rgba(243,238,230,.52) 58%, rgba(243,238,230,.20) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 620px; }
.hero h1 { margin-top: 26px; font-size: clamp(46px, 7vw, 94px); }
.hero .sub { margin-top: 28px; max-width: 360px; font-size: 16.5px; color: var(--ink); }
.hero .pill { margin-top: 36px; }
.hero-scroll {
  position: absolute; right: 40px; bottom: 210px; z-index: 2; display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); writing-mode: vertical-rl;
}
.hero-scroll::after { content: ''; width: 1px; height: 54px; background: var(--ink); opacity: .3; }

/* ── Strip over de hero heen ─────────────────────────────────── */
.strip-wrap { position: relative; z-index: 3; margin-top: -120px; }
.strip { background: var(--cream); border-radius: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-cell { padding: 40px 34px 44px; text-align: center; }
.strip-cell + .strip-cell { border-left: 1px solid var(--line); }
.strip-cell .msym { font-size: 34px; color: var(--ink); opacity: .85; }
.strip-cell h3 { margin-top: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.strip-cell p { margin-top: 12px; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }

/* ── Over / device ───────────────────────────────────────────── */
.about { padding: 110px 0 104px; }
.about-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.device-stage { position: relative; background: var(--sand-2); border-radius: 26px; padding: 56px 0; display: grid; place-items: center; overflow: hidden; }
.device-stage::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,251,244,.6); filter: blur(10px); }
.device { position: relative; width: 254px; padding: 11px; background: #1A1714; border-radius: 42px; box-shadow: 0 34px 70px rgba(50,35,20,.28); }
/* De schermafbeelding komt rechtstreeks uit de simulator, inclusief
   statusbalk en dynamic island — vandaar geen eigen notch op het frame. */
.device img { width: 100%; height: auto; border-radius: 32px; }
.about-text h2 { margin-top: 24px; font-size: clamp(30px, 3.9vw, 46px); }
.about-text .hair { margin: 48px 0 32px; }
.about-text p { font-size: 16px; line-height: 1.78; color: var(--ink-2); max-width: 450px; }
.about-text .pill { margin-top: 34px; }

/* ── Stappen ─────────────────────────────────────────────────── */
.steps { background: var(--cream); padding: 104px 0 110px; }
.steps-head { text-align: center; max-width: 620px; margin: 0 auto 64px; }
.steps-head h2 { margin-top: 18px; font-size: clamp(28px, 3.6vw, 42px); }
.steps-head .hair { margin: 38px auto 0; }
.steps-head p { margin-top: 30px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.step { padding: 0 40px; text-align: center; }
.step + .step { border-left: 1px solid var(--line); }
.step .msym { font-size: 32px; color: var(--ink); opacity: .85; }
.step .n { margin-top: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--ink-3); }
.step h3 { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.step p { margin-top: 12px; font-size: 14px; line-height: 1.68; color: var(--ink-2); }

/* ── Citaat ──────────────────────────────────────────────────── */
.quote-band { padding: 104px 0; text-align: center; }
.quote-band blockquote { font-family: 'Josefin Sans', sans-serif; font-size: clamp(24px, 3.2vw, 38px); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; max-width: 760px; margin: 22px auto 0; }
.quote-band cite { display: block; margin-top: 28px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }

/* ── Download ────────────────────────────────────────────────── */
.download { position: relative; overflow: hidden; background: #2A211A; color: #FBF6EF; }
.download-bg { position: absolute; inset: 0; background: url('../images/bg_site.jpg') center 72%/cover; filter: saturate(.62) brightness(.46); }
.download-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42,33,26,.92) 0%, rgba(42,33,26,.74) 42%, rgba(42,33,26,.42) 100%); }
.download-inner { position: relative; z-index: 2; padding: 104px 0; max-width: 640px; }
.download h2 { margin-top: 20px; font-size: clamp(30px, 3.9vw, 46px); }
.download p { margin-top: 24px; font-size: 16px; line-height: 1.75; color: rgba(251,246,239,.70); max-width: 420px; }

/* ── Store-badges ────────────────────────────────────────────── */
.badges { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.badge { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(251,246,239,.28); border-radius: 100px; padding: 12px 24px 12px 20px; transition: .2s; }
.badge:hover { border-color: rgba(251,246,239,.6); transform: translateY(-2px); }
.badge svg { width: 20px; height: 20px; fill: #FBF6EF; }
.badge i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,246,239,.6); }
.badge b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
.badge--soon { opacity: .5; cursor: default; }
.badge--soon:hover { transform: none; border-color: rgba(251,246,239,.28); }

/* ── Formulieren ─────────────────────────────────────────────── */
.contact { padding: 104px 0 110px; }
.contact-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
.contact-intro h2 { margin-top: 18px; font-size: clamp(28px, 3.6vw, 42px); }
.contact-intro .hair { margin: 48px 0 32px; }
.contact-intro p { font-size: 15.5px; line-height: 1.78; color: var(--ink-2); }
.contact-intro .direct { margin-top: 32px; }
.contact-intro .direct a { display: block; margin-top: 10px; font-family: 'Josefin Sans', sans-serif; font-size: 20px; font-weight: 600; color: var(--brd); }

.contact-form { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form-group { padding-top: 20px; }
.form-group label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.form-group input, .form-group textarea {
  width: 100%; margin-top: 10px; background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: 8px 0 14px; font-size: 16px; font-weight: 600; outline: none; resize: vertical; transition: border-color .2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--ink-3); font-weight: 400; }
.form-group input:focus, .form-group textarea:focus { border-bottom-color: var(--brd); }

/* Honeypot: onzichtbaar voor bezoekers, maar niet display:none — veel bots
   slaan verborgen velden over en vullen juist deze wel in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error, .form-success { margin-top: 22px; font-size: 14px; font-weight: 600; align-items: center; gap: 10px; }
.form-error { color: var(--brd); }
.form-success { color: var(--ok); }
.form-success .material-icons-round { font-size: 20px; }
.contact-form .btn { margin-top: 34px; }
.form-foot { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-foot .btn { margin-top: 0; }
.form-foot small { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 280px; }

/* ── Zakelijk ────────────────────────────────────────────────── */
.biz-intro { position: relative; overflow: hidden; padding: 172px 0 96px; }
.biz-intro .biz-bg { position: absolute; inset: 0; background: url('../images/bg_site.jpg') center/cover; filter: brightness(1.22) saturate(.78) contrast(.94); }
.biz-intro .biz-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(243,238,230,.97) 0%, rgba(243,238,230,.90) 34%, rgba(243,238,230,.56) 62%, rgba(243,238,230,.26) 100%);
}
.biz-intro .container { position: relative; z-index: 2; }
.biz-intro .section-title { font-size: clamp(34px, 4.6vw, 58px); max-width: 15ch; }
.biz-intro .section-sub { margin-top: 28px; max-width: 520px; color: var(--ink); }

/* ── Juridische pagina's ─────────────────────────────────────── */
.legal-section { padding: 132px 0 104px; }
.legal-card { max-width: 760px; margin: 0 auto; }
.legal-card .section-title { font-size: clamp(32px, 4.2vw, 50px); }
.legal-updated { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.legal-lead { margin-top: 28px; font-size: 17px; line-height: 1.8; color: var(--ink); }
.legal-h2 {
  margin: 56px 0 18px; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: 'Josefin Sans', sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em;
}
.legal-h3 { margin: 32px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.legal-card p { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); margin-top: 14px; }
.legal-card a { color: var(--brd); border-bottom: 1px solid rgba(142,30,30,.3); }
.legal-card a:hover { border-bottom-color: var(--brd); }
.legal-list { margin: 16px 0 0 20px; }
.legal-list li { font-size: 15.5px; line-height: 1.8; color: var(--ink-2); margin-top: 10px; }

/* ── Login ───────────────────────────────────────────────────── */
.login-section {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 100vh; padding: 150px 0 110px;
}
.login-bg { position: absolute; inset: 0; background: url('../images/bg_site.jpg') center 62%/cover; filter: saturate(.62) brightness(.46); }
.login-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,33,26,.74), rgba(42,33,26,.88)); }
.login-inner { position: relative; z-index: 2; display: flex; justify-content: center; }
.login-card { width: 100%; max-width: 440px; background: var(--cream); border-radius: var(--radius); padding: 44px 40px; box-shadow: var(--shadow-lg); }
.login-card .section-title { font-size: 34px; margin-top: 16px; }
.login-card .section-sub { margin-top: 16px; font-size: 15px; }
.login-card .form-group:first-of-type { padding-top: 32px; }
.login-card .btn { width: 100%; margin-top: 32px; }

.input-password-wrap { position: relative; display: flex; align-items: center; }
.input-password-wrap input { width: 100%; padding-right: 40px; }
.input-password-toggle {
  position: absolute; right: 0; bottom: 12px; background: none; border: none; cursor: pointer;
  color: var(--ink-3); padding: 0; display: flex; align-items: center; transition: color .18s;
}
.input-password-toggle:hover { color: var(--ink); }
.input-password-toggle .material-icons-round { font-size: 20px; }

/* ── [MFA] Overlay — markup komt uit js/mfa.js ───────────────── */
.mfa-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(26,20,14,.62); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mfa-overlay-card { width: 100%; max-width: 440px; background: var(--cream); border-radius: var(--radius); padding: 40px 36px; box-shadow: var(--shadow-lg); }
.mfa-overlay-card .section-title { margin-top: 0; }
.otp-digits { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.otp-digit {
  flex: 1; min-width: 0; height: 56px; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-size: 22px; font-weight: 700; color: var(--ink);
  text-align: center; outline: none; transition: border-color .15s, box-shadow .15s; caret-color: transparent;
}
.otp-digit:focus { border-color: var(--brd); box-shadow: 0 0 0 3px rgba(142,30,30,.10); }
.otp-digits.shake { animation: otp-shake .4s ease; }
@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.mfa-cancel-btn {
  border: none; border-radius: 100px; background: transparent; color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 14px 20px; cursor: pointer; width: 100%;
}
.mfa-cancel-btn:hover { color: var(--ink); }
.mfa-qr { display: block; width: 180px; height: 180px; margin: 0 auto 16px; border-radius: var(--radius-sm); background: #fff; padding: 8px; border: 1px solid var(--line); }
.mfa-secret-label { font-size: 13px; color: var(--ink-2); text-align: center; margin: 0 0 6px; }
.mfa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .5px; color: var(--ink);
  background: var(--sand); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; word-break: break-all; margin: 0 0 20px;
}
/* ── [/MFA] ──────────────────────────────────────────────────── */

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--cream); border-top: 1px solid var(--line); }
.footer-inner { padding: 72px 0 44px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 46px; }
.footer-brand .logo-img { height: 32px; }
.footer-brand p { margin-top: 22px; font-family: 'Josefin Sans', sans-serif; font-size: 20px; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-2); max-width: 230px; }
.footer-col h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.footer-col nav { margin-top: 20px; display: flex; flex-direction: column; gap: 13px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.footer-col nav a:hover { color: var(--ink); }
.footer-bar { border-top: 1px solid var(--line); padding: 24px 0 36px; display: flex; align-items: center; gap: 22px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.footer-bar .right { margin-left: auto; display: flex; gap: 24px; }

/* ── Responsief ──────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .container { padding: 0 26px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip-cell:nth-child(3), .strip-cell:nth-child(4) { border-top: 1px solid var(--line); }
  .strip-cell:nth-child(3) { border-left: 0; }
  .step { padding: 0 26px; }
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .container { padding: 0 20px; }
  .nav-shell { padding: 12px 14px; }
  .nav-bar { padding: 11px 11px 11px 20px; gap: 14px; }
  .nav-links, .nav-bar .pill { display: none; }
  .hamburger { display: block; }
  .hero { min-height: 640px; padding: 128px 0 170px; }
  .hero-bg::after { background: linear-gradient(170deg, rgba(243,238,230,.94) 0%, rgba(243,238,230,.80) 45%, rgba(243,238,230,.58) 100%); }
  .hero-scroll { display: none; }
  .strip { grid-template-columns: 1fr; }
  .strip-cell + .strip-cell { border-left: 0; border-top: 1px solid var(--line); }
  .steps-row { grid-template-columns: 1fr; gap: 42px 0; }
  .step { border-left: 0 !important; padding: 0; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bar .right { margin-left: 0; }
  .about, .steps, .quote-band, .contact { padding: 64px 0 68px; }
  .download-inner { padding: 64px 0; }
  .biz-intro { padding: 120px 0 64px; }
  .legal-section { padding: 110px 0 72px; }
  .login-section { padding: 120px 0 72px; }
  .login-card { padding: 34px 24px; }
  .page-top { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }