/* ============================================================
   BEELUX — POLISH LAYER (v=polish2)
   Added on top of beelux.css. Do NOT modify beelux.css directly.
   Remove this file to revert all changes.

   Scope:
   - Spacing/typography polish (余白・記号の整理)
   - Mobile breakpoint refinements
   - Scroll/animation enhancements
   - Accessibility (focus, reduced motion)
   - Performance helpers
   - v=polish2: image overrides + mobile bulletproof
   ============================================================ */

/* ----------------------------------------------------------
   00 · Image overrides — use replaced images
   Put at the top so they override base CSS
   NOTE: This CSS is in /assets/, so image URLs are relative
   to that folder (just the filename, no `assets/` prefix)
   ---------------------------------------------------------- */
.motion-healthcare {
  background-image: url('healthcare-eyecare-new.jpg') !important;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.motion-leisure {
  background-image: url('leisure-pond.jpg') !important;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* Pet card on home.html — use the pet-top image (yellow lab) for the
   home page card. The PET DETAIL page (pet.html) keeps using its own
   per-block images via inline styles. */
.motion-pet {
  background-image: url('pet-top.jpg') !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
}

/* Group card — use the ACT SUNRISE logo. Since it's a logo (not a photo),
   use `contain` + centered, and soften the gradient overlay so the logo
   stays legible. Also give the card a clean white backdrop. */
.biz-card.group-card { background: #fff !important; }
.biz-card.group-card .bg.motion-group {
  background-image: url('group-act-sunrise.jpg') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
  opacity: 0.92;
}
/* Lighten the gradient overlay on the group card so the logo remains visible */
.biz-card.group-card .bg.motion-group::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.45) 100%) !important;
}
/* On desktop, the group card is a narrow 88px strip → show the logo on
   the LEFT side only so the text can breathe on the right. */
@media (min-width: 1025px) {
  .biz-card.group-card .bg.motion-group {
    background-position: 32px center !important;
    background-size: auto 56px !important;
  }
  /* Shift the card content slightly right to make room for the logo */
  .biz-card.group-card .inner {
    padding-left: 220px !important;
  }
}
/* On tablet/mobile, logo sits in the UPPER HALF, text stays at the bottom */
@media (max-width: 1024px) {
  .biz-card.group-card {
    min-height: 200px !important;
    grid-auto-rows: unset !important;
  }
  .biz-card.group-card .bg.motion-group {
    background-size: auto 60% !important;
    background-position: center 24px !important;
  }
  .biz-card.group-card .inner {
    justify-content: flex-end !important;
  }
  .biz-card.group-card .num {
    position: absolute; top: 20px; left: 24px;
    font-size: 14px !important;
    color: var(--text-3) !important;
    opacity: 0.6;
  }
}

/* Fix: .svc-visual inline backgrounds should COVER the box,
   not tile. Several pages set only `background-image:url(...)`
   on this element, which defaults to `repeat` + `auto` size.
   Default to cover, but allow override with `data-fit="contain"`
   for logos and similar. */
.svc-visual {
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.svc-visual:not([data-fit="contain"]) {
  background-size: cover !important;
}
.svc-visual[data-fit="contain"] {
  background-size: contain !important;
  background-color: #fff !important;
}

/* ----------------------------------------------------------
   01 · Design tokens — spacing scale & refined rhythm
   ---------------------------------------------------------- */
:root {
  /* Spacing scale (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Timing */
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 440ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Hairlines */
  --hair: rgba(18, 21, 28, 0.08);
  --hair-strong: rgba(18, 21, 28, 0.14);

  /* Safe-area aware horizontal padding for mobile */
  --gutter-mobile: max(20px, env(safe-area-inset-left, 20px));
}

/* ----------------------------------------------------------
   02 · Typography marks — 記号の整理
   Consistent dividers, middots, arrows across the site.
   ---------------------------------------------------------- */

/* Breadcrumbs: tighter letter spacing, refined separators */
.breadcrumbs { column-gap: 12px; }
.breadcrumbs .sep {
  color: var(--hair-strong);
  font-weight: 300;
  transform: translateY(-1px);
}

/* Monospaced kicker labels — slightly tighter rhythm */
.section-kicker,
.news-date,
.news-tag,
.breadcrumbs {
  font-variant-numeric: tabular-nums;
}

/* Inline external arrow ↗ — visually aligned */
a[href^="http"]:not([href*="beelux"]) .link-inline::after,
.link-inline[href^="http"]:not([href*="beelux"])::after {
  content: "";
}

/* Smarter dot spacing in hero-eyebrow */
.hero-eyebrow .mono {
  letter-spacing: 0.22em;
}

/* Footer bottom marks — use middots instead of plain spaces */
.foot-bottom .set {
  gap: 0;
  column-gap: 0;
}
.foot-bottom .set span {
  position: relative;
  padding: 0 14px;
}
.foot-bottom .set span + span::before {
  content: "·";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hair-strong);
  pointer-events: none;
}
.foot-bottom .set span:first-child { padding-left: 0; }

/* ----------------------------------------------------------
   03 · Spacing rhythm — consistent section flow
   Only tightens vertical rhythm, doesn't change page flow.
   ---------------------------------------------------------- */

/* Section divider — hairline instead of heavy line */
.section-divider {
  background: linear-gradient(90deg, transparent, var(--hair-strong) 20%, var(--hair-strong) 80%, transparent);
  opacity: 0.9;
}

/* ----------------------------------------------------------
   04 · Focus & accessibility
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-item:focus-visible,
.biz-card:focus-visible {
  outline-offset: -2px;
}
button:focus-visible,
.btn:focus-visible,
.cta-btn:focus-visible {
  outline-offset: 4px;
}
/* Remove focus ring on mouse click, keep it for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* Skip to main content — only visible on keyboard focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--text-1);
  color: #fff;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
  z-index: 1000;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ----------------------------------------------------------
   05 · Scroll progress bar (subtle, top of viewport)
   ---------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-sub));
  z-index: 60;
  pointer-events: none;
  transition: width 80ms linear, opacity 200ms;
  opacity: 0;
}
.scroll-progress.visible { opacity: 1; }

/* ----------------------------------------------------------
   06 · Subtle parallax hooks (JS-powered)
   Element gets translated via --py custom property
   ---------------------------------------------------------- */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0), 0);
  transition: none;
}

/* Sub-hero big number — gentle parallax */
.sub-hero .big-num[data-parallax] {
  transition: opacity var(--t-base) var(--ease-out);
}

/* ----------------------------------------------------------
   07 · Reveal animation refinement
   Smoother curve, slightly longer for big elements
   ---------------------------------------------------------- */
.reveal {
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal-stagger > * {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

/* ----------------------------------------------------------
   08 · Biz cards — refined hover state
   ---------------------------------------------------------- */
.biz-card {
  transition: transform 380ms var(--ease-out), border-color var(--t-base);
}
.biz-card .arrow-circle {
  transition: transform var(--t-base) var(--ease-out), background var(--t-base), color var(--t-base);
}
.biz-card:hover .arrow-circle {
  transform: translateX(4px);
}

/* ----------------------------------------------------------
   09 · Links — underline offset & thickness consistency
   ---------------------------------------------------------- */
.link-inline {
  position: relative;
  transition: color var(--t-base);
}
.link-inline:hover { color: var(--orange); }

/* ----------------------------------------------------------
   10 · Form — better mobile tap targets
   ---------------------------------------------------------- */
.form input,
.form select,
.form textarea {
  font-size: 16px; /* prevents iOS zoom on focus */
  min-height: 48px;
}
.form textarea { min-height: 120px; }
.form .btn-submit {
  min-height: 52px;
  transition: all var(--t-base) var(--ease-out);
}

/* ----------------------------------------------------------
   11 · Mobile refinements  — 768px and 480px
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Consistent horizontal gutter */
  .hero,
  .section,
  .sub-hero,
  footer.foot {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }

  /* Nav toggle — larger tap area, safer position */
  .nav-toggle {
    top: max(14px, env(safe-area-inset-top, 14px));
    right: 14px;
    width: 48px;
    height: 48px;
  }

  /* Nav open state — ensure scrollable on small screens */
  .nav.open {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }

  /* Nav overlay when open */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(18, 21, 28, 0.28);
    z-index: 49;
    opacity: 1;
    transition: opacity var(--t-slow) var(--ease-out);
    pointer-events: auto;
  }

  /* Hero polish */
  .hero-inner { padding: 0; }
  .hero-eyebrow { gap: 10px; }
  .hero-lede { font-size: 16px; line-height: 1.7; }
  .hero-sub { font-size: 14px; line-height: 1.9; }

  /* CTA buttons full-width on small screens */
  .hero-ctas .btn {
    width: 100%;
    justify-content: space-between;
  }

  /* Sub-hero polish */
  .sub-hero .big-num {
    font-size: clamp(88px, 26vw, 140px);
    margin-top: 16px;
    opacity: 0.1;
  }
  .sub-hero h1 .en { font-size: 0.5em; margin-bottom: 10px; }
  .sub-hero .lede { font-size: 14px; line-height: 1.9; margin-top: 24px; }
  .breadcrumbs {
    margin-bottom: 24px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* Section title tighter rhythm */
  .section-title { line-height: 1.3; }
  .section-title .en { font-size: 0.5em; }

  /* Biz grid — single column, prevent any overlap
     FIX: Override the 1024px breakpoint's 2-column rule on small screens.
     Must target .biz-card.big and .biz-card.mid explicitly to beat
     `.biz-card.big { grid-row: span 2 }` from the base stylesheet. */
  .biz-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 260px !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
  }
  .biz-card,
  .biz-card.big,
  .biz-card.mid,
  .biz-card.group-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .biz-card.group-card { height: auto !important; }

  /* Card inner content — tighter on mobile */
  .biz-card .inner { padding: 24px !important; }
  .biz-card .num { font-size: 20px; }
  .biz-card .jp { font-size: 22px !important; }
  .biz-card .en { font-size: 12px !important; }
  .biz-card .desc {
    font-size: 12px !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Disable hover-translate on touch devices to prevent stuck hover states */
  .biz-card:hover {
    transform: none !important;
  }

  /* Service blocks on business detail pages */
  .svc-block { padding: 40px 0 !important; }
  .svc-visual { aspect-ratio: 4 / 3; }
  .svc-body h3 { font-size: 26px; }

  /* News list — more compact */
  .news-item { padding: 16px 0; }
  .news-date { font-size: 11px; }

  /* Footer — tighter, clearer */
  .foot-top { gap: 32px; }
  .foot-col { gap: 10px; }
  .foot-col h4 { margin-bottom: 8px; }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* CTA box stacks properly */
  .cta-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 40px 28px;
  }

  /* Contact page side panel */
  .contact-side { padding: 32px 24px; }
  .contact-side .row .k { font-size: 10px; }

  /* Creed grid stacks */
  .creed-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Principles stacked cleanly */
  .principle {
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--hair);
  }
  .principle:last-child { border-bottom: none; }

  /* Language toggle a bit larger */
  .lang button {
    padding: 6px 10px;
    min-width: 32px;
    min-height: 32px;
  }

  /* Info table — stacked pairs */
  .info-row dt {
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.18em;
    padding-bottom: 2px;
  }
  .info-row dd {
    font-size: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 16px;
  }
  .info-row:last-child dd {
    border-bottom: none;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  /* Extra-small refinements */
  .hero-title { font-size: clamp(32px, 9vw, 44px) !important; }
  .hero-lede { font-size: 15px; }
  .section-num { font-size: clamp(72px, 22vw, 120px) !important; }
  .section-title { font-size: clamp(22px, 6.5vw, 32px) !important; }
  .sub-hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .creed { font-size: clamp(20px, 5.5vw, 28px) !important; }

  /* Mall buttons stack on phone */
  .mall-row {
    flex-direction: column;
    align-items: stretch;
  }
  .mall-btn { justify-content: center; }

  /* Foot brand mega smaller */
  .foot-brand .mega { font-size: 28px; }
}

/* ----------------------------------------------------------
   11b · Mobile: detail-page svc-block, sub-hero, store-info
   These rules complement the base CSS so detail pages
   (pet/healthcare/leisure/office/support/others/group) all
   look consistently good on phones.
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* svc-block: stack visual on top of body, never alternate */
  .svc-block {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 56px 0 !important;
  }
  .svc-block.alt .svc-visual { order: 0 !important; }
  .svc-visual {
    aspect-ratio: 4 / 3 !important;
  }
  .svc-visual::after {
    font-size: 9px !important;
    padding: 5px 8px !important;
    left: 12px !important;
    bottom: 12px !important;
  }
  .svc-body h3 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.35 !important;
  }
  .svc-body p {
    font-size: 14px !important;
    line-height: 1.95 !important;
  }
  .svc-body .idx {
    font-size: 10px !important;
  }

  /* store-info table: stacked layout, no clipping */
  .store-info {
    margin-top: 20px !important;
  }
  .store-row {
    grid-template-columns: 100px 1fr !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }
  .store-row dt {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  .store-row dd {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  /* bullet-row: smaller chips on phone */
  .bullet-row {
    gap: 8px !important;
  }
  .bullet-row li {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* sub-hero: stacked, smaller big-num */
  .sub-hero {
    padding: 80px 20px 40px !important;
  }
  .sub-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sub-hero h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.3 !important;
  }
  .sub-hero h1 .en {
    font-size: 0.55em !important;
    margin-bottom: 8px !important;
  }
  .sub-hero .big-num {
    font-size: clamp(80px, 22vw, 120px) !important;
    margin-top: 16px !important;
    opacity: 0.10 !important;
  }
  .sub-hero .lede {
    font-size: 14px !important;
    line-height: 1.95 !important;
    margin-top: 20px !important;
  }
  .breadcrumbs {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap !important;
  }

  /* Info table on company.html: stacked dt/dd */
  .info-table { margin: 0 !important; }
  .info-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .info-row dt {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    color: var(--text-3) !important;
  }
  .info-row dd {
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }

  /* Section headers on detail pages */
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }
  .section-meta {
    margin-bottom: 0 !important;
  }
  .section-num {
    font-size: clamp(64px, 18vw, 100px) !important;
    line-height: 1 !important;
  }

  /* Section padding on phone */
  .section {
    padding: 60px 20px !important;
  }

  /* Timeline entries (company history) */
  .timeline-row {
    grid-template-columns: 80px 1fr !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  .timeline-row .t-year {
    font-size: 14px !important;
  }
  .timeline-row .t-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }
  .timeline-row .t-desc {
    font-size: 12px !important;
    line-height: 1.8 !important;
  }

  /* CTA box stacks on phone (already done above, but ensure final state) */
  .cta-box {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    padding: 36px 24px !important;
  }
  .cta-box h3 {
    font-size: clamp(20px, 5.6vw, 28px) !important;
    line-height: 1.4 !important;
  }
  .cta-btn {
    justify-content: center !important;
    width: 100% !important;
  }
  .en-over {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }

  /* DECODECO 2x2 grid stays as 2x2 on mobile, but tighter */
  /* (already 2x2 via inline style — leave it)  */

  /* PetFull icon stays visible on phone */
  .svc-visual img[src*="petfull-icon"] {
    width: 44px !important;
    height: 44px !important;
    top: 12px !important;
    left: 12px !important;
  }

  /* BBQ highlight grid: stack on mobile */
  .bbq-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bbq-grid > div:last-child {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ----------------------------------------------------------
   12 · Tablet refinement — 769-1024
   Force 2-column on phablets/small tablets to avoid overlap.
   ---------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .biz-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 260px !important;
    gap: 16px !important;
  }
  .biz-card,
  .biz-card.big,
  .biz-card.mid {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .biz-card.group-card {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
}

/* ----------------------------------------------------------
   12c · Desktop 3-column × 2-row biz grid (1025px+)
   Per request: top page should show 5 business cards + 1 group
   card in a uniform 3×2 layout. All cards equal size.
   This overrides the base .biz-card.big (span 3 / span 2) and
   .biz-card.mid (span 2) and the inline `style="grid-column:..."`.
   ---------------------------------------------------------- */
@media (min-width: 1025px) {
  .biz-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 280px !important;
    gap: 16px !important;
  }
  .biz-card,
  .biz-card.big,
  .biz-card.mid,
  .biz-card.group-card,
  .biz-card[style*="grid-column"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  /* Group card: match other cards' size and padding exactly.
     Override base `height:88px` and the small-strip styles. */
  .biz-card.group-card {
    height: auto !important;
    min-height: 280px !important;
  }
  .biz-card.group-card .inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 28px !important;
    height: 100% !important;
  }
  .biz-card.group-card .num {
    font-size: 56px !important;
    color: var(--orange) !important;
    font-weight: 900 !important;
    font-family: var(--f-jp) !important;
    letter-spacing: 0 !important;
  }
  .biz-card.group-card .jp {
    font-size: 22px !important;
    color: var(--text-1) !important;
    font-weight: 900 !important;
  }
  .biz-card.group-card .en {
    font-size: 13px !important;
    font-style: italic !important;
    color: var(--orange) !important;
    font-family: var(--f-serif) !important;
  }
  /* Logo positioning: centered upper area, leaving room for text below */
  .biz-card.group-card .bg.motion-group {
    background-position: center 32% !important;
    background-size: 65% auto !important;
  }
}

/* ----------------------------------------------------------
   13 · Prefers reduced motion — respect user preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-parallax] {
    transform: none !important;
  }
  .hero-canvas { display: none; }
  .scroll-progress { display: none; }
}

/* ----------------------------------------------------------
   14 · Print styles (nice to have, very small cost)
   ---------------------------------------------------------- */
@media print {
  .nav,
  .nav-toggle,
  .scroll-progress,
  .hero-canvas,
  .streaks,
  .scroll-hint { display: none !important; }
  main { margin-left: 0 !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section, .sub-hero { page-break-inside: avoid; padding: 24px 0 !important; }
}

/* ----------------------------------------------------------
   15 · Selection color
   ---------------------------------------------------------- */
::selection {
  background: rgba(232, 93, 16, 0.22);
  color: var(--text-1);
}

/* ----------------------------------------------------------
   16 · Image performance — lazy-loaded images fade in
   ---------------------------------------------------------- */
img[loading="lazy"] {
  transition: opacity 400ms var(--ease-out);
}
img[loading="lazy"]:not([src]) { opacity: 0; }

/* ----------------------------------------------------------
   17 · Smooth anchor scrolling
   ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------
   18 · Fix: hero CTA arrow alignment
   ---------------------------------------------------------- */
.hero-ctas .btn .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}
.hero-ctas .btn:hover .arrow {
  transform: translateX(4px);
}