@font-face { font-family: "Heebo"; src: url("../fonts/heebo/heebo-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo/heebo-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo/heebo-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo/heebo-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo/heebo-800.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo/heebo-900.ttf") format("truetype"); font-style: normal; font-weight: 900; font-display: swap; }

[hidden] { display: none !important; }

.hero-banner { background: #f3ebe5 !important; }
.hero-visual img { filter: none !important; box-shadow: none !important; }
.fa-solid, .fa-regular, .fa-brands { flex: 0 0 auto; width: 1em; line-height: 1; text-align: center; }
.hero-trust-items .fa-solid, .trust-strip .fa-solid { color: var(--yellow); }
.header-contact-link.whatsapp .fa-brands { color: #168b45; }
.secondary-service-icon .fa-solid, .store-detail > .fa-solid { color: inherit; }

.mobile-menu-button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.hero-actions a, .key-service-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.native-search-empty { margin: 28px 0 0; padding: 18px; border: 1px solid rgba(25,29,34,.14); border-radius: 10px; background: #fff; color: #475467; text-align: center; font-weight: 700; }
.department-card { text-align: inherit; }
.favorite.is-active { color: #d92d20; }
.favorite.is-active svg { fill: currentColor; }
.add-cart.is-added { background: #168b45; color: #fff; }
.primary-nav.is-open { display: block; }

@media (max-width: 760px) {
  .primary-nav.is-open .primary-nav-inner { display: grid; padding: 8px 18px 14px; }
  .primary-nav.is-open .primary-nav-inner a { justify-content: flex-start; }
}

/* Header + hero reconstruction */
:root {
  --blue-900: #191D22;
  --blue-950: #191D22;
  --yellow: #D5222A;
  --yellow-strong: #D5222A;
  --page: #F7F1E8;
  --ink: #191D22;
  --muted: #72757B;
  --line: rgba(25, 29, 34, .1);
}

html, body { overflow-x: hidden; overflow-x: clip; }
body { background: var(--page); font-family: "Heebo", Arial, sans-serif; }
.site-container { width: min(calc(100% - 64px), 1440px); margin-inline: auto; }
.blue-panel, .top-frame { overflow: visible; background: var(--page); }

.site-header {
  position: sticky;
  top: 8px;
  z-index: 1000;
  width: min(calc(100% - 24px), 1504px);
  margin: 8px auto 0;
  overflow: visible;
  border: 1px solid rgba(25, 29, 34, .08);
  border-radius: 26px;
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(25, 29, 34, .06);
  animation: header-enter 450ms cubic-bezier(.22, 1, .36, 1) both;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.site-header.is-scrolled {
  top: 6px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 32px rgba(25, 29, 34, .11);
  backdrop-filter: blur(14px);
}

@keyframes header-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-header .site-container { width: 100%; max-width: none; padding-inline: 32px; }
.main-header {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 620px) minmax(160px, 1fr);
  grid-template-areas: "actions search brand";
  align-items: center;
  gap: 34px;
  min-height: 92px;
  direction: ltr;
  transition: min-height 220ms ease;
}

.site-header.is-scrolled .main-header { min-height: 78px; }
.brand-mark { grid-area: brand; justify-self: end; width: 126px; height: 80px; transition: width 220ms ease, height 220ms ease; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: none; transform: scale(1.42); }
.site-header.is-scrolled .brand-mark { width: 116px; height: 68px; }

.search-trigger {
  grid-area: search;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid rgba(25, 29, 34, .12);
  border-radius: 999px;
  background: #fff;
  color: #7a8292;
  box-shadow: 0 8px 24px rgba(25, 29, 34, .05);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  text-align: right;
  direction: rtl;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.search-trigger .fa-magnifying-glass { color: var(--blue-900); }
.search-trigger:hover, .search-trigger:focus-visible {
  border-color: rgba(25, 29, 34, .34);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(25, 29, 34, .07), 0 8px 24px rgba(25, 29, 34, .05);
  outline: 0;
}

.header-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
  direction: rtl;
}

.header-contact-link, .header-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  color: var(--blue-950);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.header-contact-link:hover, .header-icon-link:hover { color: var(--blue-900); }
.header-contact-link.whatsapp { color: #168b45; }
.header-phone { color: var(--blue-950); font-size: 16px; direction: ltr; }
.header-icon-link { position: relative; justify-content: center; min-width: 36px; }
.header-icon-link.cart-link { color: var(--blue-950); }
.cart-badge { position: absolute; top: 0; right: -7px; display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--blue-950); font-size: 12px; font-weight: 900; }
.cart-badge.is-bumping { animation: cart-bump 420ms cubic-bezier(.22, 1, .36, 1); }
@keyframes cart-bump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.mobile-menu-button { display: none; grid-area: menu; }

.primary-nav {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 26px 26px;
  background: #fff;
}

.primary-nav-inner { display: flex; align-items: stretch; justify-content: center; gap: 28px; min-height: 66px; direction: rtl; }
.primary-nav-inner a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 66px;
  padding: 0 17px;
  border: 0;
  background: transparent;
  color: var(--blue-950);
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  animation: nav-enter 420ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.primary-nav-inner a:nth-child(1) { animation-delay: 100ms; }
.primary-nav-inner a:nth-child(2) { animation-delay: 130ms; }
.primary-nav-inner a:nth-child(3) { animation-delay: 160ms; }
.primary-nav-inner a:nth-child(4) { animation-delay: 190ms; }
.primary-nav-inner a:nth-child(5) { animation-delay: 220ms; }
.primary-nav-inner a:nth-child(6) { animation-delay: 250ms; }
@keyframes nav-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.primary-nav-inner a:hover { background: transparent; color: var(--blue-900); }
.primary-nav-inner a:not(.is-current)::after { position: absolute; right: 13px; bottom: 0; left: 13px; height: 2px; border-radius: 999px; background: var(--yellow); content: ""; transform: scaleX(0); transform-origin: right center; transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.primary-nav-inner a:not(.is-current):hover::after { transform: scaleX(1); }
.primary-nav-inner .is-current { border: 0; background: transparent; color: var(--blue-900); font-weight: 900; }
.primary-nav-inner .is-current::before { display: none; }
.primary-nav-inner .is-current::after { position: absolute; right: 13px; bottom: 0; left: 13px; height: 3px; border-radius: 999px 999px 0 0; background: var(--yellow); content: ""; }
.active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.mobile-search-chips { display: none; }

.search-overlay {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 30;
  padding: 28px 0 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 40px rgba(25, 29, 34, .12);
}
.search-overlay-inner { max-width: 1180px !important; }
.search-overlay-form { border-radius: 999px; }
.search-overlay-form button { border-radius: 999px; }

.hero-banner {
  position: relative;
  min-height: 760px;
  margin-top: 10px;
  overflow: hidden;
  background: #F7F1E8 !important;
  color: var(--ink);
}

.hero-grid {
    position: relative !important;
    z-index: 2;
    width: min(calc(100% - 96px), 1440px) !important;
    height: 100% !important;
    min-height: 0 !important;
}

.hero-content {
  grid-area: copy;
  align-self: center;
  width: auto;
  max-width: 610px;
  margin: 0;
  padding: 66px 0 92px;
  direction: rtl;
  text-align: right;
  min-width: 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 23px;
  padding: 9px 16px;
  border: 1px solid rgba(25, 29, 34, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #364152;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 7px 20px rgba(25, 29, 34, .035);
}
.hero-eyebrow .fa-location-dot { color: var(--blue-900); }

.hero-content h1 { margin: 0; font-size: 104px; font-weight: 900; line-height: .88; letter-spacing: 0; }
.hero-title-line { display: block !important; overflow: hidden; color: var(--blue-900) !important; }
.hero-title-line > span { display: block; color: inherit !important; transform: translateY(110%); animation: title-line-in 850ms cubic-bezier(.22, 1, .36, 1) forwards; }
.hero-title-line:nth-child(1) > span { animation-delay: 0ms; }
.hero-title-line:nth-child(2) > span { animation-delay: 90ms; }
.hero-title-line:nth-child(3) > span { animation-delay: 180ms; }
.hero-title-line.accent { color: var(--yellow) !important; }
@keyframes title-line-in { to { transform: translateY(0); } }

.hero-content p { max-width: 590px; margin: 27px 0 0; color: #364152; font-size: 21px; font-weight: 500; line-height: 1.5; opacity: 0; animation: support-copy-in 650ms cubic-bezier(.22, 1, .36, 1) 610ms forwards; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 31px; opacity: 0; animation: hero-actions-in 700ms cubic-bezier(.22, 1, .36, 1) 720ms forwards; }
@keyframes support-copy-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-actions-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-cta, .hero-ghost-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 220px;
  min-height: 62px;
  padding: 0 31px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}
.hero-cta { border: 1px solid var(--blue-900); background: var(--blue-900); color: #fff; }
.hero-cta .fa-key { color: var(--yellow); }
.hero-ghost-cta { border: 1px solid rgba(25, 29, 34, .2); background: #fff; color: var(--blue-900); }
.hero-cta:hover { transform: translateY(-2px); background: var(--blue-950); box-shadow: 0 10px 24px rgba(25, 29, 34, .16); }
.hero-ghost-cta:hover { transform: translateY(-2px); border-color: rgba(25, 29, 34, .35); background: #f1f5fb; }
.hero-cta:hover .fa, .hero-ghost-cta:hover .fa { transform: translateX(-4px); }
.hero-cta:active, .hero-ghost-cta:active { transform: translateY(0) scale(.985); }
.hero-cta .fa, .hero-ghost-cta .fa { transition: transform 220ms ease; }

.hero-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 19px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .56);
  color: var(--blue-950);
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  animation: whatsapp-in 560ms cubic-bezier(.22, 1, .36, 1) 840ms forwards;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}
.hero-whatsapp-link:hover { color: var(--blue-900); background: #fff; transform: translateX(-2px); }
.hero-whatsapp-link .fa-whatsapp { color: #159447; }
@keyframes whatsapp-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

.hero-visual {
  --hero-mouse-x: 0px;
  --hero-mouse-y: 0px;
  --hero-scroll-y: 0px;
  grid-area: visual;
  position: relative;
  align-self: stretch;
  width: 116%;
  min-height: 610px;
  margin-left: -14%;
  padding: 0;
  overflow: visible;
  transform: translate3d(var(--hero-mouse-x), calc(var(--hero-mouse-y) + var(--hero-scroll-y)), 0);
  transition: transform 180ms ease-out;
  will-change: transform;
}
.hero-visual img {
  position: absolute;
  top: 49%;
  left: 50%;
  width: 112%;
  max-width: 860px;
  height: auto;
  object-fit: contain;
  transform: translate(-53%, -50%);
  filter: none !important;
  box-shadow: none !important;
  animation: hero-visual-in 980ms cubic-bezier(.22, 1, .36, 1) 120ms both;
}
@keyframes hero-visual-in { from { opacity: 0; transform: translate(-55%, -46%) scale(.97); } to { opacity: 1; transform: translate(-53%, -50%) scale(1); } }

.hero-visual-master { animation: hero-image-reveal 1000ms cubic-bezier(.22, 1, .36, 1) 80ms both !important; }
@keyframes hero-image-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-53%, -50%) scale(.985); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-53%, -50%) scale(1); }
}

.hero-depth-layer {
  --layer-x: 0px;
  --layer-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--layer-x), var(--layer-y), 0);
  transition: transform 180ms ease-out;
  will-change: transform;
}
.hero-depth-layer img { animation: none !important; }
.hero-depth-layer--brush { z-index: 1; clip-path: polygon(0 4%, 100% 0, 100% 58%, 82% 58%, 75% 45%, 57% 45%, 48% 36%, 26% 39%, 18% 60%, 0 66%); opacity: 0; animation: brush-layer-in 1000ms cubic-bezier(.22, 1, .36, 1) 40ms forwards; }
.hero-depth-layer--toolbox { clip-path: polygon(5% 29%, 69% 28%, 69% 80%, 4% 82%); opacity: 0; animation: toolbox-layer-in 950ms cubic-bezier(.22, 1, .36, 1) 120ms forwards; }
.hero-depth-layer--drill { clip-path: polygon(27% 0, 73% 0, 74% 46%, 27% 46%); opacity: 0; animation: drill-layer-in 1000ms cubic-bezier(.22, 1, .36, 1) 190ms forwards; }
.hero-depth-layer--bucket { clip-path: polygon(52% 35%, 91% 35%, 91% 86%, 51% 86%); opacity: 0; animation: bucket-layer-in 950ms cubic-bezier(.22, 1, .36, 1) 250ms forwards; }
.hero-depth-layer--roller { clip-path: polygon(27% 57%, 79% 56%, 79% 100%, 26% 100%); opacity: 0; animation: roller-layer-in 900ms cubic-bezier(.22, 1, .36, 1) 310ms forwards; }
.hero-depth-layer--tape { clip-path: polygon(76% 58%, 100% 59%, 100% 100%, 75% 100%); opacity: 0; animation: tape-layer-in 880ms cubic-bezier(.22, 1, .36, 1) 365ms forwards; }
.hero-depth-layer--keys { clip-path: polygon(0 66%, 52% 66%, 52% 100%, 0 100%); opacity: 0; animation: keys-layer-in 800ms cubic-bezier(.22, 1, .36, 1) 420ms forwards; }
@keyframes brush-layer-in { from { opacity: 0; clip-path: inset(0 100% 35% 0); } to { opacity: .18; clip-path: polygon(0 4%, 100% 0, 100% 58%, 82% 58%, 75% 45%, 57% 45%, 48% 36%, 26% 39%, 18% 60%, 0 66%); } }
@keyframes toolbox-layer-in { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drill-layer-in { from { opacity: 0; transform: translateY(-18px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes bucket-layer-in { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes roller-layer-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tape-layer-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes keys-layer-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.hero-visual.is-motion-ready .hero-depth-layer { animation: none; opacity: 1; transform: translate3d(var(--layer-x), var(--layer-y), 0); }
.hero-visual.is-motion-ready .hero-depth-layer--brush { opacity: .18; }

.hero-trust-bar {
  position: absolute;
  right: 50%;
  bottom: 22px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(calc(100% - 64px), 1296px);
  min-height: 112px;
  padding: 19px 28px;
  border: 1px solid rgba(25, 29, 34, .06);
  border-radius: 26px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 40px rgba(25, 29, 34, .07);
  transform: translateX(50%);
  opacity: 0;
  animation: trust-bar-in 700ms cubic-bezier(.22, 1, .36, 1) 980ms forwards;
}
.hero-trust-item { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 25px; border-inline-start: 1px solid rgba(25, 29, 34, .1); border-radius: 14px; color: var(--blue-900); opacity: 0; animation: trust-item-in 520ms cubic-bezier(.22, 1, .36, 1) forwards; transition: background 220ms ease, transform 220ms ease; }
.hero-trust-item:nth-child(1) { animation-delay: 1080ms; }
.hero-trust-item:nth-child(2) { animation-delay: 1140ms; }
.hero-trust-item:nth-child(3) { animation-delay: 1200ms; }
.hero-trust-item:nth-child(4) { animation-delay: 1260ms; }
.hero-trust-item:hover { background: rgba(25, 29, 34, .035); transform: translateY(-2px); }
.hero-trust-item:hover > .fa { opacity: 1; }
.hero-trust-item > .fa { opacity: .86; transition: opacity 220ms ease; }
@keyframes trust-bar-in { from { opacity: 0; transform: translateX(50%) translateY(24px); } to { opacity: 1; transform: translateX(50%) translateY(0); } }
@keyframes trust-item-in { from { opacity: 0; } to { opacity: 1; } }
.hero-trust-item:first-child { border-inline-start: 0; }
.hero-trust-item:nth-child(even) > .fa { color: var(--yellow); }
.hero-trust-item span { display: grid; gap: 2px; }
.hero-trust-item strong { color: var(--blue-950); font-size: 17px; font-weight: 900; }
.hero-trust-item small { color: var(--muted); font-size: 14px; font-weight: 500; }
.top-frame + .trust-strip { display: none; }
.sticky-contact-bar { transition: transform 220ms ease, box-shadow 220ms ease; }
.sticky-contact-bar:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(3, 29, 71, .2); }

@media (max-width: 1500px) {
  .hero-content h1 { font-size: 92px; }
  .hero-visual { width: 112%; margin-left: -11%; }
  .primary-nav-inner { gap: 18px; }
}

@media (max-width: 1180px) {
  .main-header { grid-template-columns: minmax(250px, 1fr) minmax(330px, 510px) 140px; gap: 22px; }
  .header-actions { gap: 12px; }
  .header-contact-link.whatsapp span { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); }
  .hero-content h1 { font-size: 82px; }
  .hero-cta, .hero-ghost-cta { min-width: 190px; }
  .hero-trust-item { padding-inline: 15px; }
}

@media (max-width: 920px) {
  .main-header { grid-template-columns: 1fr minmax(300px, 430px) 130px; }
  .header-contact-link { display: none; }
  .primary-nav-inner { gap: 5px; }
  .primary-nav-inner a { padding-inline: 11px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(370px, .9fr); }
  .hero-content h1 { font-size: 72px; }
  .hero-content p { font-size: 18px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-trust-bar { padding-inline: 14px; }
  .hero-trust-item { gap: 10px; padding-inline: 10px; }
  .hero-trust-item strong { font-size: 15px; }
  .hero-trust-item small { font-size: 12px; }
}

@media (max-width: 760px) {
  .site-container { width: min(calc(100% - 36px), 1440px); }
  .site-header { top: 0; width: 100%; margin: 0; border-width: 0 0 1px; border-radius: 0; }
  .site-header.is-scrolled { top: 0; }
  .site-header .site-container { padding-inline: 18px; }
  .main-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas: "menu brand actions" "search search search";
    gap: 7px 12px;
    min-height: 126px;
    padding-block: 5px 11px;
  }
  .site-header.is-scrolled .main-header { min-height: 116px; }
  .mobile-menu-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--blue-950); }
  .brand-mark, .site-header.is-scrolled .brand-mark { justify-self: center; width: 112px; height: 62px; }
  .header-actions {
    display: grid !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    justify-self: end;
    overflow: visible;
  }
  .header-actions .header-contact-link, .header-actions .header-icon-link:not(.cart-link) { display: none; }
  .header-actions .cart-link {
    position: relative;
    z-index: 2;
    display: grid !important;
    width: 42px;
    min-width: 42px;
    height: 42px;
    place-items: center;
    margin: 0;
    color: var(--blue-950);
    opacity: 1 !important;
    visibility: visible !important;
  }
  .search-trigger { grid-column: auto; grid-row: auto; min-width: 0; min-height: 50px; overflow: hidden; padding-inline: 18px; font-size: 14px; }
  .search-trigger span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .primary-nav { display: none; border-radius: 0; }
  .primary-nav.is-open { display: block; }
  .primary-nav-inner { display: grid; gap: 0; padding: 7px 18px 12px; }
  .primary-nav-inner a { justify-content: flex-start; min-height: 47px; padding: 0 8px; opacity: 1; animation: none; }
  .primary-nav-inner .is-current::after { right: 8px; left: auto; width: 120px; }
  .search-overlay { position: fixed; top: 0; bottom: 0; border-radius: 0; }

  .hero-banner { min-height: 0; margin-top: 0; padding: 0 0 24px; }
  .hero-grid { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  .hero-content { order: 1; align-self: stretch; width: 100%; max-width: 100%; min-width: 0; padding: 54px 0 14px; text-align: center; }
  .hero-eyebrow { margin-bottom: 19px; }
  .hero-content h1 { font-size: 60px; line-height: .9; }
  .hero-content p { width: 100%; max-width: 355px; margin: 22px auto 0; padding-inline: 4px; font-size: 17px; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; width: 100%; max-width: 355px; margin: 25px auto 0; }
  .hero-actions .hero-cta, .hero-actions .hero-ghost-cta { width: 100%; min-width: 0 !important; max-width: 100%; min-height: 56px; padding: 0 18px; font-size: 14px; }
  .hero-whatsapp-link { margin-top: 14px; font-size: 13px; }
  .hero-visual { order: 2; width: 118%; min-height: 360px; margin: -12px -9% -10px; }
  .hero-visual img { top: 50%; width: 116%; transform: translate(-50%, -50%); }
  .hero-visual-master { animation: hero-image-reveal-mobile 900ms cubic-bezier(.22, 1, .36, 1) 80ms both !important; }
  @keyframes hero-image-reveal-mobile { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-50%, -46%) scale(.985); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-50%, -50%) scale(1); } }
  .hero-depth-layer { display: none; }
  @keyframes hero-visual-in { from { opacity: 0; transform: translate(-50%, -44%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
  .hero-trust-bar { position: relative; right: auto; bottom: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 36px); min-height: 0; margin: 0 auto; padding: 10px; border-radius: 20px; transform: none; animation-name: trust-bar-mobile-in; }
  @keyframes trust-bar-mobile-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .hero-trust-item { justify-content: flex-start; min-height: 82px; padding: 12px; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .hero-trust-item:nth-child(odd) { border-inline-start: 1px solid var(--line); }
  .hero-trust-item:nth-last-child(-n+2) { border-bottom: 0; }
  .hero-trust-item strong { font-size: 14px; }
  .hero-trust-item small { font-size: 12px; }
}

@media (max-width: 420px) {
  .hero-content h1 { font-size: 52px; }
  .hero-cta, .hero-ghost-cta { font-size: 13px; }
  .hero-visual { min-height: 330px; }
  .hero-trust-item { gap: 8px; padding-inline: 8px; }
  .hero-trust-item > .fa { font-size: 23px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .primary-nav-inner a, .hero-title-line > span, .hero-visual img, .hero-content p, .hero-actions, .hero-whatsapp-link, .hero-trust-bar, .hero-trust-item, .hero-depth-layer { animation: none !important; opacity: 1; }
  .hero-title-line > span { transform: none; }
  .hero-depth-layer { display: none; }
}

/* Deep workshop hero and the primary key-duplication service. */
.hero-banner {
  isolation: isolate;
  min-height: 610px;
  margin-top: 10px;
  overflow: hidden;
  background: #062e72 !important;
  color: #fff;
}

.hero-banner::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(2, 29, 72, .76) 0 24%, rgba(2, 29, 72, .22) 48%, transparent 72%);
  content: "";
  pointer-events: none;
}

.hero-workshop-pattern {
  --layer-x: 0px;
  --layer-y: 0px;
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: translate3d(var(--layer-x), var(--layer-y), 0);
  transition: transform 180ms ease-out;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(520px, 44fr);
  grid-template-areas: "visual copy";
  align-items: stretch;
  min-height: 610px;
  padding-bottom: 0;
  direction: ltr;
}

.hero-content {
  grid-area: copy;
  align-self: center;
  /* Pin the copy block to the container edge: past ~1455px the cell grows
     wider than max-width and the text would drift off the shared axis. */
  justify-self: end;
  z-index: 3;
  width: 100%;
  max-width: 620px;
  padding: 60px 0 68px;
  direction: rtl;
  text-align: right;
}

.hero-eyebrow {
  margin-bottom: 20px;
  border-color: rgba(255, 255, 255, .17);
  background: rgba(1, 24, 62, .38);
  color: rgba(255, 255, 255, .9);
  box-shadow: none;
}

.hero-eyebrow .fa-location-dot { color: var(--yellow); }
.hero-content h1 { font-size: clamp(58px, 4.5vw, 76px); line-height: .95; }
.hero-title-line { color: #fff !important; }
.hero-title-line > span { color: inherit !important; }
.hero-title-line.accent { margin-top: 7px; color: var(--yellow) !important; }
.hero-title-line:nth-child(2) > span { animation-delay: 100ms; }

.hero-content p {
  max-width: 560px;
  margin-top: 23px;
  color: rgba(255, 255, 255, .82);
  font-size: 20px;
  line-height: 1.55;
}

.hero-actions { gap: 12px; margin-top: 28px; }
.hero-cta,
.hero-ghost-cta {
  min-width: 0;
  min-height: 58px;
  padding-inline: 28px;
  border-radius: 999px;
  font-size: 16px;
}

.hero-cta {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #062e72;
}

.hero-cta:hover { background: #D5222A; box-shadow: 0 12px 28px rgba(213, 34, 42, .22); }
.hero-ghost-cta { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .04); color: #fff; }
.hero-ghost-cta:hover { border-color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .1); }
.hero-ghost-cta .fa-whatsapp { color: #54d477; }

.hero-trust-items {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 34px;
  opacity: 1;
}

.hero-trust-items span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-inline: 16px;
  border-inline-start: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  animation: trust-item-in 520ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.hero-trust-items span:first-child { padding-inline-start: 0; border-inline-start: 0; }
.hero-trust-items span:nth-child(1) { animation-delay: 890ms; }
.hero-trust-items span:nth-child(2) { animation-delay: 950ms; }
.hero-trust-items span:nth-child(3) { animation-delay: 1010ms; }
.hero-trust-items span:nth-child(4) { animation-delay: 1070ms; }
.hero-trust-items .fa-solid { color: var(--yellow); }

.hero-visual {
  --hero-scroll-y: 0px;
  grid-area: visual;
  position: relative;
  align-self: stretch;
  z-index: 1;
  width: calc(100% + 110px);
  min-height: 610px;
  margin: 0 0 0 -110px;
  overflow: visible;
  transform: translate3d(0, var(--hero-scroll-y), 0);
  transition: transform 180ms ease-out;
}

.hero-visual::after {
  position: absolute;
  inset: 0 -2px 0 auto;
  z-index: 2;
  width: 24%;
  background: linear-gradient(90deg, transparent, #062e72 86%);
  content: "";
  pointer-events: none;
}

.hero-visual img {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  max-width: none;
  height: 106%;
  object-fit: contain;
  transform: translateY(-50%);
  filter: none !important;
  box-shadow: none !important;
  animation: hero-workshop-in 900ms cubic-bezier(.22, 1, .36, 1) 120ms both !important;
}

@keyframes hero-workshop-in {
  from { opacity: 0; transform: translate(-30px, calc(-50% + 20px)) scale(.97); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

.hero-trust-bar { display: none; }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(460px, .88fr); }
  .hero-content h1 { font-size: 60px; }
  .hero-trust-items { display: grid; grid-template-columns: repeat(2, max-content); gap: 11px 0; }
  .hero-trust-items span:nth-child(3) { border-inline-start: 0; }
  .hero-visual { width: calc(100% + 70px); margin-left: -70px; }
}

@media (max-width: 900px) {
  .hero-banner { min-height: 0; margin-top: 0; }
  .hero-banner::before { background: rgba(2, 29, 72, .3); }
  .hero-grid { display: flex; flex-direction: column; min-height: 0; padding-bottom: 76px; }
  .hero-content { order: 1; max-width: none; padding: 46px 0 18px; text-align: center; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero-content h1 { font-size: clamp(48px, 9vw, 65px); }
  .hero-title-line > span { white-space: normal; }
  .hero-content p { max-width: 540px; margin-inline: auto; font-size: 18px; }
  .hero-actions { justify-content: center; }
  .hero-trust-items { justify-content: center; width: fit-content; margin-inline: auto; }
  .hero-visual { order: 2; width: calc(100% + 64px); min-height: 360px; margin: -6px -32px -32px; }
  .hero-visual img { top: 48%; left: -3%; width: 126%; height: auto; }
  .hero-visual::after { width: 16%; }
}

@media (max-width: 760px) {
  .hero-grid { width: min(calc(100% - 36px), 1440px); padding-bottom: 63px; }
  .hero-content { padding: 39px 0 13px; }
  .hero-eyebrow { padding: 8px 13px; font-size: 12px; }
  .hero-content h1 { font-size: 47px; line-height: .98; }
  .hero-title-line.accent { margin-top: 3px; }
  .hero-content p { max-width: 350px; margin-top: 17px; font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 350px); gap: 9px; margin: 22px auto 0; }
  .hero-actions .hero-cta, .hero-actions .hero-ghost-cta { min-height: 54px; font-size: 14px; }
  .hero-trust-items { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 360px; margin-top: 24px; }
  .hero-trust-items span { justify-content: flex-start; min-height: 30px; padding-inline: 10px; font-size: 12px; }
  .hero-trust-items span:nth-child(3) { border-inline-start: 0; }
  .hero-visual { width: calc(100% + 36px); min-height: 300px; margin: -2px -18px -25px; }
  .hero-visual img { top: 50%; left: -17%; width: 170%; height: auto; }
  .hero-visual::after { right: -1px; width: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-workshop-pattern,
  .hero-visual,
  .hero-visual img,
  .hero-trust-items span { animation: none !important; opacity: 1 !important; transform: none; transition: none !important; }
  .hero-visual img { transform: translateY(-50%); }
}

/* Floating contact bar — stays out of the hero, returns compact afterwards. */
.sticky-contact-bar {
  right: 20px;
  bottom: 18px;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(6, 46, 114, .08);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(3, 29, 71, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 220ms ease, visibility 0s linear 320ms;
}

.sticky-contact-bar.is-revealed {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 220ms ease, visibility 0s;
}

.sticky-contact-bar:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(3, 29, 71, .2); }
.sticky-contact-bar a { min-height: 40px; border-radius: 999px; font-size: 13px; }
.sticky-contact-bar a:not(.sticky-key) { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
.sticky-contact-bar a:not(.sticky-key) span { display: none; }
.sticky-contact-bar .sticky-key { padding: 0 15px; }

@media (max-width: 760px) {
  .sticky-contact-bar { right: auto; left: 50%; bottom: 14px; width: auto; transform: translate(-50%, 16px); }
  .sticky-contact-bar.is-revealed { transform: translate(-50%, 0); }
  .sticky-contact-bar:hover { transform: translate(-50%, -2px); }
  .sticky-contact-bar a { flex: 0 0 auto; }
}

/* ─────────────────────────────────────────────────────────────
   Shell integration — full-bleed header/hero, constrained content
   ───────────────────────────────────────────────────────────── */
.site-container { width: min(calc(100% - 48px), 1440px); margin-inline: auto; }

.site-shell { background: var(--page); }
.top-frame { width: 100%; overflow: visible; background: #fff; }
.blue-panel { width: 100%; overflow: visible; background: #fff; }

/* Header is a full-width band; only its inner row is constrained. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(25, 29, 34, .08);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  transition: background 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled {
  top: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 24px rgba(3, 29, 71, .07);
  backdrop-filter: blur(12px);
}

.site-header .site-container {
  width: min(calc(100% - 48px), 1440px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.primary-nav {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.search-overlay {
  top: 100%;
  border-width: 0 0 1px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 22px 40px rgba(25, 29, 34, .1);
}

/* Hero is a full-width band that starts right under the nav. */
.hero-banner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: #fff;
    height: 77vh;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-image: url("../videos/hero-home-poster.jpg") !important;
}

.hero-banner::before { display: none; }
.hero-grid { position: static; min-height: 100%; }
.hero-content { position: relative; z-index: 3; }

/* One coherent background: photo on the outer edge, melting into the blue. */
.hero-visual {
  --hero-scroll-y: 0px;
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 58%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: none;
  transition: none;
}

.hero-visual::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  background:
    linear-gradient(90deg,
      rgba(3, 27, 67, .14) 0%,
      rgba(3, 27, 67, .1) 26%,
      rgba(3, 27, 67, .3) 52%,
      rgba(5, 38, 96, .68) 72%,
      rgba(6, 46, 114, .93) 89%,
      #062e72 100%);
  content: "";
  pointer-events: none;
}

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 44% center;
  filter: none !important;
  box-shadow: none !important;
  transform: translate3d(0, var(--hero-scroll-y), 0) scale(1.05);
  transition: transform 180ms ease-out;
  animation: hero-media-in 950ms cubic-bezier(.22, 1, .36, 1) 60ms both !important;
}

@keyframes hero-media-in {
  from { opacity: 0; transform: translate3d(0, var(--hero-scroll-y), 0) scale(1.1); }
  to { opacity: 1; transform: translate3d(0, var(--hero-scroll-y), 0) scale(1.05); }
}

@media (max-width: 1180px) {
  .hero-visual { width: 56%; }
}

@media (max-width: 900px) {
  .hero-banner { min-height: 0; }
  .hero-grid { min-height: 0; }
  .hero-visual {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% + 48px);
    height: 330px;
    min-height: 0;
    margin: 6px -24px 0;
  }
  .hero-visual::after {
    background: linear-gradient(180deg, rgba(3, 27, 67, .18) 0%, rgba(3, 27, 67, .05) 42%, rgba(6, 46, 114, .55) 84%, #062e72 100%);
  }
  .hero-visual img { object-position: center; transform: none; animation-name: hero-media-in-mobile !important; }
  @keyframes hero-media-in-mobile {
    from { opacity: 0; transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
  }
}

@media (max-width: 760px) {
  .site-container { width: min(calc(100% - 36px), 1440px); }
  .site-header .site-container { width: min(calc(100% - 36px), 1440px); }
  .hero-grid { width: min(calc(100% - 36px), 1440px); }
  .hero-visual { width: calc(100% + 36px); height: 280px; margin-inline: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual img { animation: none !important; opacity: 1 !important; transform: none !important; }
}

.site-header { animation: header-fade-in 420ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes header-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ─────────────────────────────────────────────────────────────
   Mobile navigation drawer — same behaviour as the cart drawer
   ───────────────────────────────────────────────────────────── */
.nav-overlay { display: none; }
.nav-drawer-header,
.nav-drawer-footer { display: none; }

@media (max-width: 760px) {
  body.nav-open { overflow: hidden; padding-right: var(--nav-scrollbar-width, 0); }

  /* backdrop-filter on the header would make the fixed drawer resolve against it. */
  .site-header,
  .site-header.is-scrolled { backdrop-filter: none; }

  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1990;
    display: block;
    background: rgba(3, 24, 55, .42);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(2px);
    transition: opacity 180ms ease, visibility 0s linear 400ms;
  }

  body.nav-open .nav-overlay { opacity: 1; visibility: visible; transition: opacity 180ms ease, visibility 0s; }

  .site-header .primary-nav,
  .primary-nav,
  .primary-nav.is-open {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2000;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: clamp(300px, 86vw, 420px);
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    border: 0;
    border-radius: 28px 0 0 28px;
    background: #fff;
    color: var(--ink);
    direction: rtl;
    opacity: .98;
    visibility: hidden;
    transform: translateX(100%);
    box-shadow: -28px 0 60px rgba(25, 29, 34, .16);
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease, visibility 0s linear 380ms;
    will-change: transform;
  }

  body.nav-open .primary-nav {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease, visibility 0s;
  }

  /* Drawer header — mirrors the cart drawer header. */
  .nav-drawer-header {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--cart-line, #e7eaf0);
    background: #fff;
  }

  .nav-header-top { display: flex; align-items: center; justify-content: flex-end; direction: rtl; }

  .nav-heading-copy { min-width: 0; text-align: right; }
  .nav-title-clip { display: block; overflow: hidden; }
  .nav-title-inner { display: block; color: var(--blue-900); font-size: 27px; font-weight: 800; line-height: 1.1; }
  .nav-heading-copy p { margin: 7px 0 0; color: #8a94a6; font-size: 14px; line-height: 1.4; }

  .nav-close {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(25, 29, 34, .08);
    border-radius: 50%;
    background: #F7F1E8;
    color: var(--blue-900);
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
  }

  .nav-close:hover { background: #f2f5fa; transform: rotate(3deg); }
  .nav-close:focus-visible,
  .nav-drawer-call:focus-visible,
  .nav-drawer-whatsapp:focus-visible { outline: 3px solid rgba(25, 29, 34, .18); outline-offset: 2px; }

  /* Links */
  .site-header .site-container.primary-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-content: stretch;
    justify-items: stretch;
    gap: 2px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 4px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    direction: rtl;
  }

  .primary-nav-inner a {
    justify-content: flex-start;
    min-height: 56px;
    padding: 0 14px;
    border-radius: 14px;
    color: var(--blue-950);
    font-size: 17px;
    font-weight: 700;
    opacity: 1;
    animation: none;
    transition: background 180ms ease, color 180ms ease;
  }

  .primary-nav-inner a:hover,
  .primary-nav-inner a:active { background: rgba(25, 29, 34, .05); }
  .primary-nav-inner a:not(.is-current)::after { display: none; }
  .primary-nav-inner .is-current { background: rgba(213, 34, 42, .12); color: var(--blue-900); font-weight: 900; }
  .primary-nav-inner .is-current::after { position: static; width: auto; height: auto; border-radius: 0; background: transparent; }

  /* Footer */
  .nav-drawer-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cart-line, #e7eaf0);
    background: #fff;
    direction: rtl;
  }

  .nav-drawer-call,
  .nav-drawer-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
  }

  .nav-drawer-call { background: var(--blue-900); color: #fff; }
  .nav-drawer-call span { direction: ltr; }
  .nav-drawer-whatsapp { border: 1px solid rgba(25, 29, 34, .16); background: #fff; color: #168b45; }

  /* Opening choreography — same curve and cadence as the cart drawer. */
  .primary-nav.is-opening .nav-title-inner { animation: cart-title-in 550ms var(--cart-ease) 220ms both; }
  .primary-nav.is-opening .nav-heading-copy p { animation: cart-fade-in 420ms ease 320ms both; }
  .primary-nav.is-opening .nav-close { animation: cart-close-in 420ms var(--cart-ease) 220ms both; }
  .primary-nav.is-opening .primary-nav-inner a { animation: nav-drawer-item-in 320ms cubic-bezier(.22, 1, .36, 1) var(--nav-delay, 220ms) both; }
  .primary-nav.is-opening .nav-drawer-footer { animation: cart-summary-in 500ms var(--cart-ease) 500ms both; }
  @keyframes nav-drawer-item-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
  .primary-nav-inner a:nth-child(1) { --nav-delay: 220ms; }
  .primary-nav-inner a:nth-child(2) { --nav-delay: 265ms; }
  .primary-nav-inner a:nth-child(3) { --nav-delay: 310ms; }
  .primary-nav-inner a:nth-child(4) { --nav-delay: 355ms; }
  .primary-nav-inner a:nth-child(5) { --nav-delay: 400ms; }
  .primary-nav-inner a:nth-child(6) { --nav-delay: 445ms; }
}
@media (max-width: 760px) {

  .hero-banner {
      background-image: url("../videos/hero-home-poster.jpg") !important;
      height: 60vh;
  }
  .hero-trust-items{
    display: none;
  }

}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .primary-nav,
  .nav-title-inner,
  .nav-close,
  .nav-heading-copy p,
  .primary-nav-inner a,
  .nav-drawer-footer { animation: none !important; transition-duration: 80ms !important; transition-delay: 0ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   Temporarily hidden: cart entry points and language switcher
   Remove this block to bring them back.
   ───────────────────────────────────────────────────────────── */
.language-preview-toggle,
.header-actions .header-icon-link.cart-link,
.sticky-contact-bar a[data-cart-open] { display: none !important; }

@media (max-width: 760px) {
  /* Mobile header keeps only the menu button and the logo. */
  .header-actions { display: none !important; }
  .main-header { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}

/* ─────────────────────────────────────────────────────────────
   Mobile search — icon button in the header, full-screen panel
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .main-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas: "search brand menu";
    gap: 0 10px;
    min-height: 86px;
    padding-block: 8px;
  }

  .site-header.is-scrolled .main-header { min-height: 78px; }

  .main-header .search-trigger {
    grid-area: search;
    grid-column: search;
    grid-row: search;
    justify-self: end;
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--blue-950);
    box-shadow: none;
    overflow: visible;
  }

  .main-header .search-trigger > span { display: none; }
  .main-header .search-trigger .fa-magnifying-glass { color: var(--blue-950); font-size: 18px !important; }
  .main-header .search-trigger:hover, .main-header .search-trigger:focus-visible { border-color: rgba(25, 29, 34, .3); background: #f7f9fc; box-shadow: none; }

  /* The panel takes over the screen instead of dropping under the header. */
  .search-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2100;
    padding: 20px 0 28px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .search-overlay-inner { width: min(calc(100% - 36px), 1440px) !important; max-width: none !important; }
  .search-overlay-heading { margin-bottom: 16px; }

  .search-overlay-form {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 14px 16px;
    border-radius: 22px;
  }

  .search-overlay-form input { font-size: 18px; }
  .search-overlay-form button { grid-column: 1 / -1; width: 100%; min-height: 52px; padding: 0; border-radius: 999px; }

  .search-groups { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
  .search-groups div { gap: 4px; padding: 14px 0; border-inline-start: 0; border-bottom: 1px solid rgba(25, 29, 34, .1); }
  .search-groups div:last-child { border-bottom: 0; }
}


.key-duplication-section {
  --dup-blue: #191D22;
  --dup-yellow: #D5222A;
  --dup-ivory: #f9eee0;
  --dup-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  z-index: 2;
  width: 100%;
  /* The band is full-bleed: capping its width left the page background
     showing as white gutters on displays wider than the artwork. The
     content inside (.key-dup-layout) has its own 1440px cap, so widening
     the band does not stretch the layout. max-height keeps the band from
     growing absurdly tall on ultra-wide screens, where the aspect-ratio
     alone would otherwise drive the height past 1000px. */
  max-width: none;
  margin-inline: auto;
  /* Height follows the grid instead of a fixed ratio: the ratio is what forced
     the old absolute composition, and the absolute composition is what made
     the image impossible to reflow - hence the display:none hacks. */
  min-height: 818px;
  overflow: hidden;
  background-color: var(--dup-ivory);
  container-type: inline-size;
}

@media (min-width: 1025px) {
  .key-duplication-section {
    isolation: isolate;
    background:radial-gradient(circle at 20% 45%, rgba(213, 34, 42, .045), transparent 32%), linear-gradient(180deg, #f8f0e5 0%, #f9eee0 100%);
  }

  .key-duplication-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(
        rgba(25, 29, 34, .025) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(25, 29, 34, .025) 1px,
        transparent 1px
      );
    background-size: 54px 54px;
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 8%,
        #000 92%,
        transparent
      );
    content: "";
  }

  .key-duplication-section::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2%;
    z-index: 0;
    width: 33%;
    pointer-events: none;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .28;
    content: "";
  }
}


/* Same grid as the hero: the artwork stays full-bleed, the UI sits inside the
   site container so its right edge lands on the hero's vertical axis. */
.key-dup-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas: "visual content";
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 72px);
  width: min(calc(100% - 48px), 1440px);
  min-height: inherit;
  margin-inline: auto;
  padding-block: clamp(44px, 4vw, 64px);
}

@media (min-width: 1025px) {
  .key-dup-layout::before {
    position: absolute;
    left: -14%;
    bottom: -42%;
    z-index: 0;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(25, 29, 34, .045);
    border-radius: 50%;
    pointer-events: none;
    content: "";
  }

}

.key-dup-visual {
  grid-area: visual;
  position: relative;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(500px, 34vw, 620px);
  max-width: 100%;
  pointer-events: none;
  z-index: 1;
}

.key-dup-visual-image {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 900px);
  height: auto;
  max-height: 92%;
  object-fit: contain;
  transform: translate3d(-2%, 2%, 0);
  filter: drop-shadow(0 26px 38px rgba(25, 29, 34, .14));
  user-select: none;
}

.key-dup-visual-glow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle,
      rgba(213, 34, 42, .12) 0%,
      rgba(213, 34, 42, .055) 38%,
      rgba(213, 34, 42, 0) 72%
    );
  filter: blur(4px);
}

.key-dup-visual-mark {
  position: absolute;
  z-index: 1;
  color: rgba(213, 34, 42, .48);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.key-dup-visual-mark-a {
  top: 12%;
  left: 13%;
}

.key-dup-visual-mark-b {
  right: 10%;
  bottom: 14%;
}

.key-content {
  grid-area: content;
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
  z-index: 2;
}

/* Label */
.key-dup-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.363cqw;
  padding: 0.408cqw 0.68cqw;
  border-radius: 999px;
  background: #fff1c9;
  color: var(--dup-blue);
  font-size: 0.635cqw;
  font-weight: 700;
  white-space: nowrap;
}

.key-dup-pill .fa-key { color: #e09400; font-size: 0.68cqw !important; }

/* Title */
.key-content h2 {
  margin: 1.088cqw 0 0;
  color: var(--dup-blue);
  font-size: 4.338cqw;
  font-weight: 900;
  line-height: .90;
  letter-spacing: -.035em;
}

.key-dup-line { display: block; overflow: hidden; padding-bottom: .02em; }
.key-dup-line > span { display: block; }
.key-dup-line.accent { color: var(--dup-yellow); }

/* Supporting copy */
.key-dup-note {
  margin: 1.353cqw 0 0;
  color: #72757B;
  font-size: 0.907cqw;
  font-weight: 500;
  line-height: 1.45;
}

/* Three words */
.key-dup-words {
  margin: 1.625cqw 0 0;
  color: var(--dup-blue);
  font-size: 1.806cqw;
  font-weight: 800;
  line-height: 1.15;
}

.key-dup-words span { display: block; }
.key-dup-words i { font-style: normal; color: var(--dup-yellow); }

/* Steps */
.key-dup-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 2.343cqw 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
    background: #fcf5e8;
    padding: 15px;
    border-radius: 13px;
}

.key-dup-steps li {
  position: relative;
  padding-inline: 0.831cqw;
}

.key-dup-steps li + li::before {
  position: absolute;
  top: 0.378cqw;
  right: 0;
  width: 1px;
  height: 4.988cqw;
  background: rgba(25, 29, 34, .15);
  content: "";
}

.key-dup-steps li + li::after {
  position: absolute;
  top: 0.151cqw;
  right: -0.151cqw;
  width: 0.317cqw;
  height: 0.317cqw;
  border-radius: 50%;
  background: var(--dup-yellow);
  content: "";
}

.key-dup-steps b {
  display: block;
  color: var(--dup-yellow);
  font-size: 1.262cqw;
  font-weight: 900;
  line-height: 1;
  direction: ltr;
}

.key-dup-steps strong {
  display: block;
  margin-top: 0.642cqw;
  color: var(--dup-blue);
  /* font-size: 0.726cqw; */
  font-weight: 800;
  line-height: 1.25;
}

.key-dup-steps small {
  display: block;
  margin-top: 0.378cqw;
  color: #798395;
  font-size: 0.612cqw;
  font-weight: 500;
  line-height: 1.4;
}

/* CTA row — pinned to the bottom of the content column */
.key-dup-cta-row {
  display: flex;
  align-items: center;
  gap: 1.30cqw;
  margin-top: 2rem;
}

.key-dup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.58cqw;
    height: 4.1cqw;
    padding-inline: 2.78cqw;
    border-radius: 999px;
    background: var(--dup-yellow);
    color: var(--dup-blue);
    font-size: 1.5rem;
    font-weight: 800;
    white-space: nowrap;
    transition: transform 220ms var(--dup-ease), box-shadow 220ms ease, background 220ms ease;
}

.key-dup-cta .fa-key {
    font-size: 1.50cqw !important;
    transition: transform 220ms var(--dup-ease);
}
.key-dup-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(213, 34, 42, .22); }
.key-dup-cta:hover .fa-key { transform: translateX(-3px); }

.key-dup-sep { width: 1px; height: 1.70cqw; background: rgba(25, 29, 34, .18); }

.key-dup-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.53cqw;
  color: var(--dup-blue);
  font-size: 1.06cqw;
  font-weight: 800;
  white-space: nowrap;
}

.key-dup-phone span { direction: ltr; }
.key-dup-phone .fa-phone { font-size: 0.94cqw !important; }
.key-dup-phone:hover { text-decoration: underline; text-underline-offset: 3px; }

.key-dup-place {
  display: flex;
  align-items: center;
  gap: 0.317cqw;
  margin: 0.816cqw 0 0;
  color: #7a8495;
  font-size: 0.7cqw;
  font-weight: 600;
}

.key-dup-place .fa-location-dot { color: var(--dup-yellow); font-size: 0.635cqw !important; }

@media (min-width: 1025px) and (max-width: 1350px) {
  .key-dup-visual { width: clamp(460px, 32vw, 560px); }
}

/* Small desktop / tablet landscape: still two columns, image still there. */
@media (max-width: 1199px) {
  .key-dup-layout {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(24px, 2.8vw, 44px);
  }

  /* An auto track sizes to its item, so the item cannot be sized in % -
     that is circular and collapses the track. Absolute units only here. */
  .key-dup-visual { width: clamp(320px, 38vw, 500px); }
}

/* One single stack point. */
@media (max-width: 899px) {
  /* The desktop band height must not survive the stack. */
  .key-duplication-section { min-height: 0; }

  .key-dup-layout {
    grid-template-areas:
      "visual"
      "content";
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    /* The image is a grid cell now, so the page gutter has to live on the
       layout - otherwise the photo runs edge to edge on small phones. */
    padding: 40px 18px;
  }

  .key-dup-visual {
    justify-self: center;
    width: min(100%, 520px);
  }
}

@media (max-width: 390px) {
  .key-dup-layout { padding-inline: 16px; }
}

/* ── Mobile: image on top, content stacked underneath ──────── */
@media (max-width: 767px) {
  .key-duplication-section {
    aspect-ratio: auto;
    max-width: none;
    /* The desktop height cap only makes sense while aspect-ratio drives the
       height. Here the section stacks and is taller than 818px, so the cap
       would crop it against overflow:hidden. */
    max-height: none;
    background-image: none;
    container-type: normal;
  }


  .key-dup-layout {
    position: static;
    width: 100%;
    transform: none;
  }

  .key-content {
    position: static;
    width: 100%;
    padding: 26px 20px 40px;
  }

  .key-dup-pill { gap: 8px; padding: 9px 15px; font-size: 13px; }
  .key-dup-pill .fa-key { font-size: 14px !important; }
  .key-content h2 { margin-top: 18px; font-size: clamp(40px, 12vw, 60px); }
  .key-dup-note { margin-top: 18px; font-size: 17px; }
  .key-dup-words { margin-top: 20px; font-size: clamp(30px, 8.5vw, 38px); }
  .key-dup-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; text-align: right; }
  .key-dup-steps li { padding-inline: 0; }
  .key-dup-steps li + li::before { top: -11px; right: auto; left: 0; width: 100%; height: 1px; }
  .key-dup-steps li + li::after { top: -14px; right: 0; width: 7px; height: 7px; }
  .key-dup-steps b { font-size: 26px; }
  .key-dup-steps strong { margin-top: 6px; font-size: 17px; }
  .key-dup-steps small { margin-top: 4px; font-size: 14px; }
  .key-dup-cta-row { flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .key-dup-cta { flex: 1 1 100%; height: 58px; padding-inline: 26px; font-size: 16px; }
  .key-dup-cta .fa-key { font-size: 17px !important; }
  .key-dup-sep { display: none; }
  .key-dup-phone { gap: 8px; font-size: 17px; }
  .key-dup-phone .fa-phone { font-size: 16px !important; }
  .key-dup-place { gap: 6px; margin-top: 14px; font-size: 13px; }
  .key-dup-place .fa-location-dot { font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .key-dup-pill,
  .key-dup-line > span,
  .key-dup-note,
  .key-dup-words span,
  .key-dup-steps li,
  .key-dup-cta-row,
  .key-dup-place { opacity: 1 !important; transform: none !important; transition: none !important; }
}

:root { --m-ease: cubic-bezier(.22, 1, .36, 1); }


[data-motion-image] {
  --m-py: 0px;
  --m-ps: 1;
  --m-px: 0px;
  --m-pointer-y: 0px;
  transform: none;
}

[data-motion-image] > .m-frame {
  --m-over: 0px;
  position: absolute;
  top: calc(var(--m-over) * -1);
  right: calc(var(--m-over) * -1);
  bottom: calc(var(--m-over) * -1);
  left: calc(var(--m-over) * -1);
  display: block;
  width: calc(100% + var(--m-over) * 2);
  height: calc(100% + var(--m-over) * 2);
  transform: translate3d(var(--m-px), calc(var(--m-py) + var(--m-pointer-y)), 0) scale(var(--m-ps));
  transform-origin: center center;
  will-change: transform;
}

[data-motion-image] > .m-frame > :is(img, video),
[data-motion-image] > video.m-frame {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1500ms var(--m-ease), transform 1500ms var(--m-ease), clip-path 1000ms var(--m-ease);
  will-change: transform, opacity;
}

[data-motion-image].is-in > .m-frame > :is(img, video),
[data-motion-image].is-in > video.m-frame { opacity: 1; }

/* ── Text mask reveal ──────────────────────────────────────── */
.m-mask { display: block; overflow: hidden; }
.m-mask > span,
.m-mask > b {
  display: block;
  transform: translateY(110%);
  transition: transform 850ms var(--m-ease) var(--m-delay, 0ms);
  will-change: transform;
}
.is-in .m-mask > span,
.is-in .m-mask > b { transform: translateY(0); }

/* ── Generic reveal (fade + shift) ─────────────────────────── */
.m-rise,
.m-fade,
.m-slide-x {
  transition: opacity 600ms var(--m-ease) var(--m-delay, 0ms), transform 600ms var(--m-ease) var(--m-delay, 0ms);
  will-change: transform, opacity;
}
.m-rise { opacity: 0; transform: translateY(10px); }
.m-fade { opacity: 0; }
.m-slide-x { opacity: 0; transform: translateX(10px); }
.is-in .m-rise,
.is-in .m-fade,
.is-in .m-slide-x { opacity: 1; transform: none; }

/* ═══ HERO ════════════════════════════════════════════════════ */
.hero-banner { background-image: none !important; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-media > .m-frame { --m-over: 35px; --m-ps: 1.055; }
.hero-media > .m-frame > :is(img, video),
.hero-media > video.m-frame {
  object-fit: cover;
  object-position: left top;
  transform: translate3d(-15px, 8px, 0) scale(1.02);
}
.hero-media.is-in > .m-frame > :is(img, video),
.hero-media.is-in > video.m-frame { transform: translate3d(0, 0, 0) scale(1); }

.hero-workshop-pattern { transform: translate3d(var(--layer-x, 0px), calc(var(--layer-y, 0px) + var(--m-py, 0px)), 0); }

.hero-content { transform: translate3d(0, var(--m-uy, 0px), 0); }

/* Hero entrance timeline — 150 pill · 220/310 title · 520 copy · 620 CTA · 720 trust */
.hero-eyebrow { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--m-ease) 150ms, transform 600ms var(--m-ease) 150ms; }
.hero-banner.is-in .hero-eyebrow { opacity: 1; transform: none; }

.hero-title-line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title-line > span {
  display: block;
  opacity: 1 !important;
  transform: translateY(110%);
  animation: none !important;
  transition: transform 880ms var(--m-ease) var(--m-delay, 0ms);
}
.hero-title-line:nth-child(1) > span { --m-delay: 220ms; }
.hero-title-line:nth-child(2) > span { --m-delay: 310ms; }
.hero-banner.is-in .hero-title-line > span { transform: translateY(0); }

.hero-content > p { opacity: 0; transform: translateY(12px); animation: none !important; transition: opacity 700ms var(--m-ease) 520ms, transform 700ms var(--m-ease) 520ms; }
.hero-banner.is-in .hero-content > p { opacity: 1; transform: none; }

.hero-actions { opacity: 0; transform: translateY(12px); animation: none !important; transition: opacity 700ms var(--m-ease) 620ms, transform 700ms var(--m-ease) 620ms; }
.hero-banner.is-in .hero-actions { opacity: 1; transform: none; }

.hero-trust-items span { opacity: 0; transform: translateY(8px); animation: none !important; transition: opacity 560ms var(--m-ease) var(--m-delay, 720ms), transform 560ms var(--m-ease) var(--m-delay, 720ms); }
.hero-trust-items span:nth-child(1) { --m-delay: 720ms; }
.hero-trust-items span:nth-child(2) { --m-delay: 780ms; }
.hero-trust-items span:nth-child(3) { --m-delay: 840ms; }
.hero-trust-items span:nth-child(4) { --m-delay: 900ms; }
.hero-banner.is-in .hero-trust-items span { opacity: 1; transform: none; }

.hero-cta, .hero-ghost-cta { transition: background 220ms var(--m-ease), border-color 220ms var(--m-ease), box-shadow 220ms var(--m-ease), transform 220ms var(--m-ease); }
.hero-cta .fa-arrow-left { transition: transform 220ms var(--m-ease); }
.hero-cta:hover { transform: translateY(-2px); }
.hero-cta:hover .fa-arrow-left { transform: translateX(-4px); }
.hero-cta:active, .hero-ghost-cta:active { transform: scale(.985); }
.hero-ghost-cta:hover { transform: translateY(-2px); }

/* .key-duplication-section { background-image: none; } */




.key-content { transform: translate3d(0, var(--m-uy, 0px), 0); }

.key-dup-visual-image {
  opacity: 0;
  transform: translate3d(-28px, 14px, 0) scale(.96);
  transition:
    opacity 850ms cubic-bezier(.22, 1, .36, 1) 120ms,
    transform 850ms cubic-bezier(.22, 1, .36, 1) 120ms;
}

.key-duplication-section.is-in .key-dup-visual-image {
  opacity: 1;
  transform: translate3d(-2%, 2%, 0) scale(1);
}

/* Section 2 entrance timeline — 120 label · 200/290 title · 430 copy
   520/590/660 words · 720 lines · 800/920/1040 steps · 1150 CTA */
.key-dup-pill { opacity: 0; transform: translateY(8px); transition: opacity 450ms var(--m-ease) 120ms, transform 450ms var(--m-ease) 120ms; }
.key-duplication-section.is-in .key-dup-pill { opacity: 1; display: none; }

.key-dup-line { display: block; overflow: hidden; padding-bottom: .02em; }
.key-dup-line > span { display: block; transform: translateY(110%); transition: transform 800ms var(--m-ease) var(--m-delay, 0ms); }
.key-dup-line:nth-child(1) > span { --m-delay: 200ms; }
.key-dup-line:nth-child(2) > span { --m-delay: 290ms; }
.key-duplication-section.is-in .key-dup-line > span { transform: translateY(0); }

.key-dup-note { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--m-ease) 430ms, transform 500ms var(--m-ease) 430ms; }
.key-duplication-section.is-in .key-dup-note { opacity: 1; transform: none; }

.key-dup-words span { opacity: 0; transform: translateX(10px); transition: opacity 520ms var(--m-ease) var(--m-delay, 0ms), transform 520ms var(--m-ease) var(--m-delay, 0ms); }
.key-dup-words span:nth-child(1) { --m-delay: 520ms; }
.key-dup-words span:nth-child(2) { --m-delay: 590ms; }
.key-dup-words span:nth-child(3) { --m-delay: 660ms; }
.key-duplication-section.is-in .key-dup-words span { opacity: 1; transform: none; }

.key-dup-steps li + li::before { transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--m-ease) 720ms, background 200ms var(--m-ease); }
.key-duplication-section.is-in .key-dup-steps li + li::before { transform: scaleY(1); }
.key-dup-steps li + li::after { opacity: 0; transform: scale(.4); transition: opacity 320ms var(--m-ease) 780ms, transform 320ms var(--m-ease) 780ms; }
.key-duplication-section.is-in .key-dup-steps li + li::after { opacity: 1; transform: scale(1); }

/* Each step resolves in order: number, then title, then description. */
.key-dup-steps b { opacity: 0; transform: translateY(8px); transition: opacity 480ms var(--m-ease) var(--m-delay, 0ms), transform 480ms var(--m-ease) var(--m-delay, 0ms), color 200ms var(--m-ease); }
.key-dup-steps strong { opacity: 0; transform: translateY(6px); transition: opacity 460ms var(--m-ease) var(--m-delay-title, 0ms), transform 460ms var(--m-ease) var(--m-delay-title, 0ms); }
.key-dup-steps small { opacity: 0; transform: translateY(6px); transition: opacity 460ms var(--m-ease) var(--m-delay-desc, 0ms), transform 460ms var(--m-ease) var(--m-delay-desc, 0ms); }
.key-dup-steps li:nth-child(1) { --m-delay: 800ms; --m-delay-title: 860ms; --m-delay-desc: 910ms; }
.key-dup-steps li:nth-child(2) { --m-delay: 920ms; --m-delay-title: 980ms; --m-delay-desc: 1030ms; }
.key-dup-steps li:nth-child(3) { --m-delay: 1040ms; --m-delay-title: 1100ms; --m-delay-desc: 1150ms; }
.key-duplication-section.is-in .key-dup-steps b,
.key-duplication-section.is-in .key-dup-steps strong,
.key-duplication-section.is-in .key-dup-steps small { opacity: 1; transform: none; }

.key-dup-cta { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--m-ease) 1230ms, transform 220ms var(--m-ease), box-shadow 220ms var(--m-ease), background 220ms var(--m-ease); }
.key-duplication-section.is-in .key-dup-cta { opacity: 1; transform: none; transition: opacity 560ms var(--m-ease) 1230ms, transform 560ms var(--m-ease) 1230ms; }
.key-duplication-section.is-in .key-dup-cta:hover { transform: translateY(-2px); transition: transform 220ms var(--m-ease), box-shadow 220ms var(--m-ease), background 220ms var(--m-ease); }
.key-dup-cta:hover .fa-key { transform: translateX(-3px) rotate(-3deg); }

.key-dup-phone,
.key-dup-sep { opacity: 0; transform: translateX(8px); transition: opacity 560ms var(--m-ease) 1230ms, transform 560ms var(--m-ease) 1230ms; }
.key-duplication-section.is-in .key-dup-phone,
.key-duplication-section.is-in .key-dup-sep { opacity: 1; transform: none; }

.key-dup-place { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--m-ease) 1320ms, transform 520ms var(--m-ease) 1320ms; }
.key-duplication-section.is-in .key-dup-place { opacity: 1; transform: none; }

/* Timeline hover — desktop only, and only once the entrance has settled,
   so the reveal delays never leak into the hover response. */
@media (hover: hover) and (min-width: 768px) {
  .key-duplication-section.is-settled .key-dup-steps li b { transition: transform 200ms var(--m-ease), color 200ms var(--m-ease); }
  .key-duplication-section.is-settled .key-dup-steps li strong { transition: transform 200ms var(--m-ease); }
  .key-duplication-section.is-settled .key-dup-steps li:hover b { transform: translateY(-2px); color: #e09400; }
  .key-duplication-section.is-settled .key-dup-steps li:hover strong { transform: translateX(-3px); }
  .key-duplication-section.is-settled .key-dup-steps li:hover + li::before,
  .key-duplication-section.is-settled .key-dup-steps li:hover::before { background: rgba(25, 29, 34, .34); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .key-duplication-section.is-in .key-dup-visual-image {
    transition:
      opacity 850ms cubic-bezier(.22, 1, .36, 1) 120ms,
      transform 550ms cubic-bezier(.22, 1, .36, 1);
  }

  .key-duplication-section:hover .key-dup-visual-image {
    transform:
      translate3d(-2%, 0, 0)
      scale(1.015);
  }
}

/* Mobile — lighter camera work, same reveals */
@media (max-width: 767px) {
  .hero-media > .m-frame > :is(img, video),
  .hero-media > video.m-frame { transform: scale(1.02); }
  .hero-media.is-in > .m-frame > :is(img, video),
  .hero-media.is-in > video.m-frame { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-image],
  .hero-workshop-pattern,
  .hero-content,
  .key-content { transform: none !important; }
  [data-motion-image] > .m-frame { transform: none !important; }
  [data-motion-image] > .m-frame > :is(img, video),
  [data-motion-image] > video.m-frame { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: opacity 200ms linear !important; }
  .hero-eyebrow, .hero-content > p, .hero-actions, .hero-trust-items span,
  .key-dup-pill, .key-dup-note, .key-dup-words span, .key-dup-steps b,
  .key-dup-steps strong, .key-dup-steps small, .key-dup-cta, .key-dup-phone,
  .key-dup-sep, .key-dup-place, .key-dup-visual-image { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-title-line > span, .key-dup-line > span { transform: none !important; transition: none !important; }
  .key-dup-steps li + li::before { transform: scaleY(1) !important; transition: none !important; }
  .key-dup-steps li + li::after { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   PROBLEM NAVIGATOR — symptom-first entry point.
   Editorial list on the right, one product stage on the left.
   No cards, no shadows, no icon circles.
   ───────────────────────────────────────────────────────────── */
.problem-nav {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  /* Slightly wider than the artwork's own 1672/941 so `contain` leaves real
     breathing room between the objects and the reading column, instead of
     pushing them right up against it. Capped so very wide screens don't turn
     the section into a tall band. */
  aspect-ratio: 1880 / 941;
  min-height: 720px;
  max-height: 1000px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  /* Sampled from the artwork edges so image and section merge. */
  background: #f4e8d8;
}

.problem-nav-inner {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(420px, 44%);
  align-content: center;
  direction: ltr;
}

/* Column 1 is deliberately empty — the products live in the artwork.
   The copy is a compact editorial column, not half the page. */
.problem-nav-head {
  grid-column: 2;
  justify-self: end;
  width: min(100%, 560px);
  direction: rtl;
  text-align: right;
}

.problem-nav-head h2 {
  margin: 0;
  color: var(--blue-900);
  font-size: clamp(46px, 4.2vw, 68px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
}

.problem-nav-sub {
  margin: 18px 0 0;
  color: #6b7688;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
}

.problem-nav-grid { position: relative; grid-column: 2; justify-self: end; width: min(100%, 560px); margin-top: 40px; direction: rtl; }

/* ── Stage ─────────────────────────────────────────────────── */
/* The artwork is the section background: full-bleed, objects on the outer
   edge, and the copy lives in the negative space it was drawn around.
   Parallax sits on the frame so swapping scenes never resets the offset. */
.problem-stage {
  --stage-px: 0px;
  --stage-py: 0px;
  position: absolute;
  inset: 0;
  z-index: 1;
  grid-area: 1 / 1;
  transform: translate3d(var(--stage-px), var(--stage-py), 0) scale(.95);
  transform-origin: left bottom;
  pointer-events: none;
  will-change: transform;
}

.problem-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Pinned to the viewport, like the departments blueprint. */
  background-attachment: fixed;
  pointer-events: none;
  user-select: none;
}

/* Every scene is stacked and pre-decoded. The resting state doubles as the
   "about to enter" state, so a swap is one class change per layer and an
   interrupted transition simply retargets instead of queueing. */
.problem-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, never cover: the artwork was composed with its own negative
     space and must not be cropped or blown up. */
  object-fit: contain;
  object-position: left bottom;
  opacity: 0;
  transform: translate3d(calc(var(--scene-x, -8px) + 10px), calc(var(--scene-y, 8px) + 2px), 0) scale(calc(var(--scene-scale, .95) * .992));
  transition:
    opacity 480ms cubic-bezier(.22, 1, .36, 1),
    transform 480ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.problem-scene.is-active {
  opacity: 1;
  transform: translate3d(var(--scene-x, -8px), var(--scene-y, 8px), 0) scale(var(--scene-scale, .95));
}

.problem-scene.is-entering {
  opacity: 0;
}

.problem-scene.is-entering.is-active {
  opacity: 1;
}

/* The outgoing layer keeps moving a hair so the two genuinely cross. */
.problem-scene.is-leaving {
  opacity: 0;
  transform: translate3d(calc(var(--scene-x, -8px) - 5px), var(--scene-y, 8px), 0) scale(calc(var(--scene-scale, .95) * 1.005));
}

/* ── List ──────────────────────────────────────────────────── */
.problem-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  direction: rtl;
  border-top: 1px solid rgba(25, 29, 34, .12);
}

.problem-list li { border-bottom: 1px solid rgba(25, 29, 34, .12); }

.problem-list button {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 18px;
  min-height: 78px;
  padding: 14px 0;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
  color: var(--blue-950);
  cursor: pointer;
  transition: color 260ms var(--m-ease);
}

.problem-list b {
  align-self: center;
  color: var(--yellow);
  font-size: 15px;
  font-weight: 900;
  direction: ltr;
  transition: color 240ms var(--m-ease), transform 240ms var(--m-ease);
}

.problem-q {
  grid-column: 2;
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 800;
  line-height: 1.15;
  transition: transform 240ms var(--m-ease);
}

.problem-hint {
  grid-column: 2;
  margin-top: 4px;
  color: #8b93a3;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 300ms var(--m-ease), transform 300ms var(--m-ease);
}

.problem-arrow {
  grid-column: 3;
  grid-row: 1 / -1;
  color: var(--blue-900);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 240ms var(--m-ease), transform 240ms var(--m-ease);
}

@media (hover: hover) and (min-width: 900px) {
  .problem-list button:hover .problem-q,
  .problem-list button:focus-visible .problem-q { transform: translateX(-3px); }
  .problem-list button:hover .problem-hint,
  .problem-list button:focus-visible .problem-hint { opacity: 1; transform: none; }
  .problem-list button:hover .problem-arrow,
  .problem-list button:focus-visible .problem-arrow { opacity: 1; transform: none; }
  .problem-list button:hover b,
  .problem-list button:focus-visible b { color: #e09400; transform: translateY(-1px); }
}

/* Hover and active read as a whisper of navy, never a filled yellow bar.
   The active row is marked by a short yellow rule on the reading edge. */
.problem-list li { position: relative; }

.problem-list button {
  transition: color 260ms var(--m-ease), background 260ms var(--m-ease);
}

.problem-list button:hover,
.problem-list button:focus-visible {
  background: rgba(25, 29, 34, .018);
}

.problem-list li.is-current button {
  color: var(--blue-900);
  background: rgba(25, 29, 34, .03);
}

.problem-list li.is-current::after {
  display: none;
}

.problem-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: var(--indicator-height, 44px);
  border-radius: 999px;
  background: var(--yellow);
  pointer-events: none;
  transform: translateY(var(--indicator-y, 0px));
  transition: transform 330ms cubic-bezier(.22, 1, .36, 1), height 240ms ease;
}

.problem-list button:focus-visible {
  outline: 2px solid rgba(213, 34, 42, .7);
  outline-offset: -4px;
}

.problem-list li.is-current .problem-arrow { opacity: 1; transform: none; }
.problem-list li.is-current .problem-hint { opacity: 1; transform: none; }
.problem-list li.is-current b { color: #e09400; transform: translateY(-2px); }

/* ── Entrance — same primitives as the sections above ──────── */
.problem-nav-sub { opacity: 0; transform: translateY(8px); transition: opacity 560ms var(--m-ease) 220ms, transform 560ms var(--m-ease) 220ms; }
.problem-nav.is-in .problem-nav-sub { opacity: 1; transform: none; }

/* Entrance: only the active scene animates in, so the backdrop is never
   left invisible if the observer never fires. */
.problem-nav:not(.is-in) .problem-scene.is-active.is-intro { opacity: 0; transform: translate3d(-14px, var(--scene-y, 8px), 0) scale(calc(var(--scene-scale, .95) * .985)); }
.problem-nav.is-in .problem-scene.is-active.is-intro { transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1); }

.problem-list li { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--m-ease) var(--m-delay, 0ms), transform 520ms var(--m-ease) var(--m-delay, 0ms); }
.problem-list li:nth-of-type(1) { --m-delay: 380ms; }
.problem-list li:nth-of-type(2) { --m-delay: 450ms; }
.problem-list li:nth-of-type(3) { --m-delay: 520ms; }
.problem-list li:nth-of-type(4) { --m-delay: 590ms; }
.problem-list li:nth-of-type(5) { --m-delay: 660ms; }
.problem-list li:nth-of-type(6) { --m-delay: 730ms; }
.problem-list li:nth-of-type(7) { --m-delay: 800ms; }
.problem-nav.is-in .problem-list li { opacity: 1; transform: none; }

.sticky-contact-bar.is-problem-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1180px) {
  .problem-nav { aspect-ratio: 1780 / 941; }
  .problem-nav-grid { grid-template-columns: 52%; margin-top: 38px; }

  .problem-list button { min-height: 72px; }
}

@media (max-width: 900px) {
  /* Portrait screens can't hold a 16:9 backdrop behind the copy, so the
     artwork becomes a banner at the top and fades into the section cream. */
  .problem-nav {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    padding: 340px 0 84px;
  }

  .problem-stage {
    inset: 0 0 auto 0;
    height: 360px;
    transform: scale(.95);
    transform-origin: left bottom;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }

  .problem-scene {
    left: 42px;
    right: auto;
    width: 140%;
    max-width: none;
    object-position: left bottom;
    transition-duration: 420ms;
  }

  .problem-nav-inner { display: block; }
  .problem-nav-head { width: 100%; }
  .problem-nav-head h2 { font-size: clamp(38px, 9vw, 54px); }
  .problem-nav-sub { font-size: 17px; }
  .problem-nav-grid { margin-top: 26px; }
  .problem-list button { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 0 14px; min-height: 70px; }
  .problem-q { font-size: clamp(20px, 5.6vw, 26px); }
  .problem-hint { opacity: 1; transform: none; }
  .problem-arrow { opacity: .45; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-nav-sub,
  .problem-stage,
  .problem-list li,
  .problem-scene,
  .problem-q,
  .problem-hint,
  .problem-arrow { opacity: 1 !important; transform: none !important; transition: none !important; }
  .problem-scene:not(.is-active) { opacity: 0 !important; }
}

/* ── Problem navigator — centered answer-card reference ─────────────── */
.problem-nav {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  padding: 110px 0 120px;
  background: #f4e8d8;
}

.problem-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 1;
  filter: none;
  pointer-events: none;
}

.problem-nav-inner {
  position: relative;
  z-index: 2;
  display: block;
  width: min(calc(100% - 64px), 1440px);
  margin-inline: auto;
  direction: ltr;
}

.problem-nav-head {
  width: 100%;
  margin: 0 auto 64px;
  text-align: center;
  direction: rtl;
}

.problem-nav-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #191D22;
  background: rgba(213, 34, 42, .12);
}

.problem-nav-mark i {
  position: absolute;
  right: 5px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #191D22;
  background: #D5222A;
}

.problem-nav-head h2 {
  margin: 0;
  color: #191D22;
  font-size: clamp(58px, 5vw, 82px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  text-align: center;
}

.problem-nav-sub {
  max-width: 640px;
  margin: 22px auto 0;
  color: #72757B;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 1;
  transform: none;
}

.problem-nav-rule {
  display: block;
  width: 42px;
  height: 2px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: #D5222A;
}

.problem-nav-grid {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  gap: 80px;
  align-items: center;
  width: 100%;
  margin: 0;
  direction: ltr;
}

.problem-answer-card {
  position: sticky;
  top: 150px;
  width: min(100%, 480px);
  justify-self: start;
  overflow: visible;
  border: 1px solid rgba(25, 29, 34, .08);
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 55px rgba(24, 35, 60, .08);
  direction: rtl;
}

.problem-answer-badge {
  position: absolute;
  z-index: 3;
  top: -16px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: #191D22;
  box-shadow: 0 8px 18px rgba(25, 29, 34, .16);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.problem-answer-media {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  background: rgba(255, 255, 255, .28);
}

.problem-answer-scene {
  position: absolute;
  inset: 0;
  width: 190%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  opacity: 0;
  transform: translate3d(12px, 2px, 0) scale(.985);
  transition: opacity 460ms cubic-bezier(.22, 1, .36, 1), transform 460ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.problem-answer-scene.is-active,
.problem-answer-scene.is-entering.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.problem-answer-scene.is-entering { opacity: 0; }
.problem-answer-scene.is-leaving {
  opacity: 0;
  transform: translate3d(-8px, 0, 0) scale(1.01);
}

.problem-nav:not(.is-in) .problem-answer-scene.is-active.is-intro {
  opacity: 0;
  transform: translate3d(-25px, 0, 0) scale(.98);
}

.problem-nav.is-in .problem-answer-scene.is-active.is-intro {
  transition-duration: 750ms;
}

.problem-answer-copy {
  position: relative;
  min-height: 170px;
  padding: 30px 32px 28px;
  text-align: right;
}

.problem-answer-copy::before {
  position: absolute;
  top: 30px;
  right: 0;
  width: 3px;
  height: 72px;
  border-radius: 999px;
  background: #D5222A;
  content: "";
}

.problem-answer-copy h3 {
  margin: 0;
  color: #191D22;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}

.problem-answer-text {
  min-height: 52px;
}

.problem-answer-copy p {
  margin: 10px 0 24px;
  color: #344054;
  font-size: 16px;
  line-height: 1.55;
  opacity: 1;
  transition: opacity 230ms ease 40ms, transform 230ms ease 40ms;
}

.problem-answer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(25, 29, 34, .16);
  border-radius: 13px;
  color: #191D22;
  background: rgba(255, 255, 255, .65);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.problem-answer-cta:hover,
.problem-answer-cta:focus-visible {
  border-color: #D5222A;
  color: #191D22;
  background: #fff;
  transform: translateY(-2px);
}

.problem-questions {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  direction: rtl;
}

.problem-list {
  position: relative;
  display: grid;
  gap: 9px;
  border: 0;
}

.problem-list li {
  opacity: 1;
  transform: none;
  border: 0;
  transition: opacity 520ms var(--m-ease) var(--m-delay, 0ms), transform 520ms var(--m-ease) var(--m-delay, 0ms);
}

.problem-list button {
  display: grid;
  grid-template-columns: 40px 46px minmax(0, 1fr) 26px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  height: 78px;
  gap: 0 14px;
  padding: 0 18px;
  border: 1px solid rgba(25, 29, 34, .10);
  border-radius: 18px;
  color: #191D22;
  background: rgba(255, 255, 255, .62);
  direction: rtl;
  text-align: right;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.problem-list button:hover,
.problem-list button:focus-visible {
  border-color: rgba(25, 29, 34, .17);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 8px 22px rgba(24, 35, 60, .05);
}

.problem-list button b {
  color: #D5222A;
  font-size: 15px;
  font-weight: 800;
  transition: color 220ms ease;
}

.problem-question-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(25, 29, 34, .12);
  border-radius: 50%;
  color: #191D22;
  background: rgba(255, 255, 255, .4);
}

.problem-q {
  min-width: 0;
  color: #191D22;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 220ms ease;
}

.problem-arrow {
  color: #191D22;
  opacity: .72;
  transform: translateX(4px);
  transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.problem-list button:hover .problem-q,
.problem-list button:focus-visible .problem-q { transform: translateX(-3px); }
.problem-list button:hover .problem-arrow,
.problem-list button:focus-visible .problem-arrow { opacity: 1; transform: none; }

.problem-list li.is-current button {
  border-color: rgba(213, 34, 42, .42);
  background: linear-gradient(90deg, rgba(213, 34, 42, .08), rgba(255, 255, 255, .75));
}

.problem-list li.is-current .problem-arrow {
  color: #D5222A;
  opacity: 1;
  transform: none;
}

.problem-list li.is-current b { color: #e09400; }

.problem-indicator {
  position: absolute;
  top: 0;
  right: -12px;
  width: 3px;
  height: var(--indicator-height, 44px);
  border-radius: 999px;
  background: #D5222A;
  pointer-events: none;
  transform: translateY(var(--indicator-y, 0px));
  transition: transform 330ms cubic-bezier(.22, 1, .36, 1), height 240ms ease;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .problem-nav { padding: 86px 0 96px; }
  .problem-nav-grid { grid-template-columns: minmax(0, 44%) minmax(0, 56%); gap: 42px; }
  .problem-nav-head { margin-bottom: 50px; }
  .problem-nav-head h2 { font-size: clamp(54px, 6vw, 70px); }
  .problem-q { font-size: 20px; }
}

@media (max-width: 900px) {
  .problem-nav {
    padding: 70px 18px 80px;
  }

  .problem-nav-inner {
    width: 100%;
  }

  .problem-nav-head {
    margin-bottom: 28px;
  }

  .problem-nav-mark {
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
  }

  .problem-nav-head h2 {
    font-size: clamp(36px, 10vw, 48px);
    line-height: 1;
    letter-spacing: -.02em;
  }

  .problem-nav-sub {
    max-width: 330px;
    margin-top: 16px;
    font-size: 17px;
  }

  .problem-nav-rule {
    margin-top: 16px;
  }

  .problem-nav-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    direction: rtl;
  }

  .problem-answer-card {
    position: relative;
    top: auto;
    width: min(100%, 380px);
    margin-inline: auto;
  }

  .problem-answer-media {
    height: 190px;
  }

  .problem-answer-copy {
    min-height: 0;
    padding: 24px 22px 20px;
  }

  .problem-answer-copy::before {
    top: 24px;
    height: 62px;
  }

  .problem-answer-copy h3 { font-size: 22px; }
  .problem-answer-copy p {
    margin: 8px 0 18px;
    font-size: 15px;
  }

  .problem-answer-cta {
    min-height: 44px;
    font-size: 14px;
  }

  .problem-questions {
    width: min(100%, 380px);
    max-width: none;
    margin-inline: auto;
  }

  .problem-list { gap: 6px; }

  .problem-list button {
    grid-template-columns: 30px 34px minmax(0, 1fr) 20px;
    min-height: 58px;
    height: 58px;
    gap: 0 9px;
    padding: 0 10px;
    border-radius: 14px;
  }

  .problem-list button b { font-size: 12px; }
  .problem-question-icon { width: 34px; height: 34px; }
  .problem-q { font-size: 16px; }
  .problem-arrow { font-size: 16px !important; }
  .problem-indicator { right: -7px; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-answer-scene,
  .problem-answer-copy h3,
  .problem-answer-copy p,
  .problem-answer-cta,
  .problem-list li,
  .problem-list button,
  .problem-q,
  .problem-arrow,
  .problem-indicator { transition: none !important; }
}

/* Use one visual frame for every supplied 4:3 solution image, matching the
   approved card reference instead of leaving contain-mode side gutters. */
.problem-answer-media {
  height: 250px;
}

.problem-answer-image {
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 900px) {
  .problem-answer-media { height: 220px; }
}

/* The house and tool badge are separate layers so the accent circle never
   replaces the Font Awesome house glyph. */
.problem-nav-mark .problem-nav-house {
  position: static;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  color: #191D22;
  background: transparent;
}

.problem-nav-mark .problem-nav-house i {
  position: static;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  color: inherit;
  background: transparent;
}

.problem-nav-mark .problem-nav-tool {
  position: absolute;
  right: 4px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #191D22;
  background: #D5222A;
}

.problem-nav-mark .problem-nav-tool i {
  position: static;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  color: inherit;
  background: transparent;
}

/* Final alignment fixes: reset legacy grid assignments from the former
   symptom navigator and keep the first solution visible on first paint. */
.problem-nav {
  padding-top: 68px;
  padding-bottom: 82px;
}

.problem-nav-inner {
  width: min(calc(100% - 64px), 1280px);
}

.problem-nav-head {
  margin-bottom: 20px;
}

.problem-nav-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
}

.problem-nav-head h2 {
  font-size: clamp(52px, 4.5vw, 68px);
}

.problem-nav-sub {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.4;
}

.problem-nav-rule {
  margin-top: 16px;
}

.problem-nav-grid {
  grid-template-columns: minmax(390px, 430px) minmax(480px, 560px);
  justify-content: center;
  gap: 80px;
}

.problem-answer-card {
  width: min(100%, 420px);
  min-height: 0;
}

.problem-answer-media {
  height: 220px;
}

.problem-answer-scene {
  width: 200%;
  object-fit: cover;
  object-position: left bottom;
}

.problem-nav:not(.is-in) .problem-answer-scene.is-active.is-intro {
  opacity: 1;
  transform: none;
}

.problem-answer-copy {
  min-height: 0;
  padding: 18px 24px 22px;
}

.problem-answer-copy::before {
  top: 20px;
  height: 62px;
}

.problem-answer-copy h3 { font-size: 23px; }
.problem-answer-copy p {
  max-width: 330px;
  margin: 8px 0 16px;
  font-size: 15px;
  line-height: 1.5;
}

.problem-list {
  gap: 6px;
}

.problem-list button {
  min-height: 58px;
  height: 58px;
}

.problem-list button > b {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.problem-list button > .problem-question-icon {
  grid-column: 2;
  grid-row: 1;
}

.problem-list button > .problem-q {
  grid-column: 3;
  grid-row: 1;
  display: block;
  align-self: center;
}

.problem-list button > .problem-arrow {
  grid-column: 4;
  grid-row: 1;
  display: block;
  opacity: .72;
  transform: translateX(4px);
}

.problem-q {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .problem-nav { padding-top: 64px; padding-bottom: 76px; }
  .problem-nav-grid {
    grid-template-columns: minmax(360px, 410px) minmax(440px, 520px);
    gap: 42px;
  }
  .problem-list button { min-height: 58px; height: 58px; }
}

/* ── Problem motion and contained solution layers ───────────────────── */
/* No drift transform: a transform here would turn the pinned background
   back into a scrolling one by creating a containing block. */

.problem-answer-media {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.problem-answer-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate3d(10px, 3px, 0) scale(.985);
  transition: opacity 410ms cubic-bezier(.22, 1, .36, 1), transform 410ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.problem-answer-layer.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.problem-answer-layer.is-leaving {
  opacity: 0;
  transform: translate3d(-8px, 0, 0) scale(.99);
}

.problem-answer-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: translate3d(var(--answer-depth-x, 0px), var(--answer-depth-y, 0px), 0);
  transition: transform 240ms ease;
}

.problem-answer-copy h3,
.problem-answer-copy p,
.problem-answer-copy .problem-answer-cta {
  transition: opacity 220ms ease, transform 220ms ease, color 220ms ease, background 220ms ease;
}

.problem-answer-cta:hover,
.problem-answer-cta:focus-visible {
  color: #191D22;
  background: #D5222A;
}

.problem-answer-cta:hover i,
.problem-answer-cta:focus-visible i {
  transform: translateX(-4px);
}

.problem-answer-cta i { transition: transform 220ms ease; }

.problem-nav.is-in .problem-background {
  animation: problem-background-in 1000ms ease both;
}

.problem-nav.is-in .problem-nav-mark {
  animation: problem-icon-in 550ms cubic-bezier(.22, 1, .36, 1) both;
}

.problem-nav.is-in .problem-nav-head h2 {
  animation: problem-headline-in 700ms cubic-bezier(.22, 1, .36, 1) 60ms both;
}

.problem-nav.is-in .problem-nav-sub {
  animation: problem-subtitle-in 520ms cubic-bezier(.22, 1, .36, 1) 120ms both;
}

.problem-nav.is-in .problem-nav-rule {
  transform-origin: center;
  animation: problem-rule-in 450ms cubic-bezier(.22, 1, .36, 1) 220ms both;
}

.problem-nav.is-in .problem-answer-card {
  animation: problem-card-in 750ms cubic-bezier(.22, 1, .36, 1) 40ms both;
}

.problem-nav.is-in .problem-answer-layer.is-intro .problem-answer-image {
  animation: problem-answer-image-in 620ms cubic-bezier(.22, 1, .36, 1) 140ms both;
}

.problem-nav.is-in .problem-answer-badge {
  animation: problem-badge-in 500ms cubic-bezier(.22, 1, .36, 1) 250ms both;
}

.problem-questions::before {
  position: absolute;
  top: 29px;
  right: -14px;
  bottom: 29px;
  border-right: 1px dashed rgba(25, 29, 34, .28);
  content: "";
  transform-origin: top;
}

.problem-nav.is-in .problem-questions::before {
  animation: problem-connector-in 850ms cubic-bezier(.22, 1, .36, 1) 260ms both;
}

.problem-list li::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -17px;
  width: 5px;
  height: 5px;
  border: 1px solid #f4e8d8;
  border-radius: 50%;
  background: #D5222A;
  content: "";
  opacity: 1;
  transform: translateY(-50%);
}

.problem-nav.is-in .problem-list li::after {
  animation: problem-dot-in 260ms ease both;
}

.problem-list li:nth-child(1)::after { animation-delay: 410ms; }
.problem-list li:nth-child(2)::after { animation-delay: 465ms; }
.problem-list li:nth-child(3)::after { animation-delay: 520ms; }
.problem-list li:nth-child(4)::after { animation-delay: 575ms; }
.problem-list li:nth-child(5)::after { animation-delay: 630ms; }
.problem-list li:nth-child(6)::after { animation-delay: 685ms; }
.problem-list li:nth-child(7)::after { animation-delay: 740ms; }

.problem-list button {
  transform: translateX(0);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.problem-list button:hover,
.problem-list button:focus-visible {
  transform: translateX(-3px);
}

.problem-list button:hover .problem-question-icon,
.problem-list button:focus-visible .problem-question-icon {
  transform: scale(1.045);
}

.problem-question-icon { transition: transform 220ms ease; }

.problem-list li.is-current button {
  background: rgba(213, 34, 42, .065);
  border-color: rgba(213, 34, 42, .38);
  box-shadow: 0 8px 24px rgba(213, 34, 42, .05);
}

.problem-indicator {
  top: 0;
  right: -19px;
  width: 10px;
  height: 10px;
  border: 1px solid #f4e8d8;
  border-radius: 50%;
  background: #D5222A;
  transform: translate3d(0, var(--indicator-y, 0px), 0);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes problem-background-in {
  from { opacity: .35; }
  to { opacity: 1; }
}

@keyframes problem-icon-in {
  from { opacity: 0; transform: scale(.82) rotate(-5deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes problem-headline-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes problem-subtitle-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes problem-rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes problem-card-in {
  from { opacity: 0; transform: translate3d(-32px, 18px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes problem-answer-image-in {
  from { opacity: .15; transform: translate3d(10px, 3px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(var(--answer-depth-x, 0px), var(--answer-depth-y, 0px), 0) scale(1); }
}

@keyframes problem-badge-in {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes problem-connector-in {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes problem-dot-in {
  from { opacity: 0; transform: translateY(-50%) scale(.5); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (max-width: 900px) {
  .problem-answer-media { height: 190px; }
  .problem-questions::before { right: -9px; }
  .problem-list li::after { right: -12px; width: 4px; height: 4px; }
  .problem-indicator { right: -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-background,
  .problem-nav.is-in .problem-nav-mark,
  .problem-nav.is-in .problem-nav-head h2,
  .problem-nav.is-in .problem-nav-sub,
  .problem-nav.is-in .problem-nav-rule,
  .problem-nav.is-in .problem-answer-card,
  .problem-nav.is-in .problem-answer-layer.is-intro .problem-answer-image,
  .problem-nav.is-in .problem-answer-badge,
  .problem-nav.is-in .problem-questions::before,
  .problem-nav.is-in .problem-list li::after { animation: none !important; }

  .problem-answer-layer,
  .problem-answer-image,
  .problem-answer-copy h3,
  .problem-answer-copy p,
  .problem-answer-copy .problem-answer-cta,
  .problem-list button,
  .problem-question-icon,
  .problem-indicator { transition: none !important; }
}

@media (max-width: 900px) {
  .problem-nav {
    padding-top: 15px  !important;
    padding-bottom: 15px  !important;
  }

  .problem-nav-inner { width: 100%; }
  .problem-nav-head { margin-bottom: 28px; }
  .problem-nav-grid { gap: 18px; }
  .problem-answer-media { height: 190px; }
  .problem-list button { min-height: 58px; height: 58px; }
}

/* ── Approved motion timeline: entrance and guided response only ─────── */
.problem-nav.is-in .problem-background {
  animation: problem-background-in 1000ms ease 0ms both;
}

.problem-nav.is-in .problem-nav-mark {
  animation: problem-icon-in 550ms cubic-bezier(.22, 1, .36, 1) 100ms both;
}

.problem-nav.is-in .problem-nav-head h2 {
  animation: problem-headline-in 700ms cubic-bezier(.22, 1, .36, 1) 220ms both;
}

.problem-nav.is-in .problem-nav-sub {
  animation: problem-subtitle-in 520ms cubic-bezier(.22, 1, .36, 1) 380ms both;
}

.problem-nav.is-in .problem-nav-rule {
  animation: problem-rule-in 450ms cubic-bezier(.22, 1, .36, 1) 520ms both;
}

.problem-nav.is-in .problem-answer-card {
  animation: problem-card-in 700ms cubic-bezier(.22, 1, .36, 1) 650ms both;
}

.problem-nav.is-in .problem-answer-layer.is-intro .problem-answer-image {
  animation: problem-answer-image-entry 550ms cubic-bezier(.22, 1, .36, 1) 760ms both;
}

.problem-nav.is-in .problem-answer-badge {
  animation: problem-badge-in 400ms cubic-bezier(.22, 1, .36, 1) 250ms both;
}

.problem-nav.is-in .problem-list li {
  animation: problem-row-in 460ms cubic-bezier(.22, 1, .36, 1) var(--problem-row-delay, 850ms) both;
}

.problem-list li:nth-child(1) { --problem-row-delay: 850ms; }
.problem-list li:nth-child(2) { --problem-row-delay: 910ms; }
.problem-list li:nth-child(3) { --problem-row-delay: 970ms; }
.problem-list li:nth-child(4) { --problem-row-delay: 1030ms; }
.problem-list li:nth-child(5) { --problem-row-delay: 1090ms; }
.problem-list li:nth-child(6) { --problem-row-delay: 1150ms; }
.problem-list li:nth-child(7) { --problem-row-delay: 1210ms; }

.problem-nav.is-in .problem-questions::before {
  animation: problem-connector-in 900ms cubic-bezier(.22, 1, .36, 1) 700ms both;
}

.problem-nav.is-in .problem-list li::after {
  animation: problem-dot-in 220ms ease var(--problem-dot-delay, 1610ms) both;
}

.problem-list li:nth-child(1)::after { --problem-dot-delay: 1610ms; }
.problem-list li:nth-child(2)::after { --problem-dot-delay: 1660ms; }
.problem-list li:nth-child(3)::after { --problem-dot-delay: 1710ms; }
.problem-list li:nth-child(4)::after { --problem-dot-delay: 1760ms; }
.problem-list li:nth-child(5)::after { --problem-dot-delay: 1810ms; }
.problem-list li:nth-child(6)::after { --problem-dot-delay: 1860ms; }
.problem-list li:nth-child(7)::after { --problem-dot-delay: 1910ms; }

.problem-answer-layer {
  transition-duration: 390ms;
}

.problem-list button {
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.problem-list li.is-current button {
  transform: translateX(-4px) scale(1.008);
}

.problem-list button > b {
  opacity: .65;
  transform: translateY(2px);
  transition: opacity 180ms ease, color 180ms ease, transform 180ms ease;
}

.problem-list li.is-current button > b {
  opacity: 1;
  color: #D5222A;
  transform: translateY(0);
}

.problem-list button > .problem-arrow {
  opacity: .55;
  transform: translateX(5px);
  transition: opacity 220ms ease, color 220ms ease, transform 220ms ease;
}

.problem-list li.is-current button > .problem-arrow {
  opacity: 1;
  color: #D5222A;
  transform: translateX(0);
}

.problem-list li.is-current .problem-question-icon {
  animation: problem-question-icon-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}

.problem-list li.is-current button[data-visual="electric"] .problem-question-icon i {
  animation: problem-electric-icon-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}

.problem-indicator {
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.problem-answer-copy h3 {
  transition: opacity 150ms ease, transform 150ms ease;
}

.problem-answer-copy p {
  transition: opacity 130ms ease 20ms, transform 130ms ease 20ms;
}

.problem-answer-copy .problem-answer-cta {
  transition: opacity 130ms ease, transform 130ms ease, color 220ms ease, background 220ms ease, border-color 220ms ease;
}

/* The copy never starts from zero: it stays readable through the swap. A
   micro fade from .82 is enough to register the change. */
.problem-answer-copy.is-answer-entering h3,
.problem-answer-copy.is-answer-entering p,
.problem-answer-copy.is-answer-entering .problem-answer-cta {
  opacity: .82;
  transform: translateY(4px);
  transition:
    opacity 260ms cubic-bezier(.22, 1, .36, 1),
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    color 220ms ease, background 220ms ease, border-color 220ms ease;
}

.problem-answer-copy.is-changing::before {
  opacity: .8;
  transform: scaleY(.6);
  transform-origin: center;
}

.problem-answer-copy.is-answer-entering::before {
  animation: problem-answer-accent-in 300ms ease 100ms both;
  transform-origin: center;
}

@keyframes problem-answer-image-entry {
  from { opacity: 0; transform: translate3d(-12px, 10px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(var(--answer-depth-x, 0px), var(--answer-depth-y, 0px), 0) scale(1); }
}

@keyframes problem-row-in {
  from { opacity: 0; transform: translate3d(20px, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes problem-question-icon-in {
  0% { opacity: .78; transform: scale(1); }
  55% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1.04); }
}

@keyframes problem-electric-icon-in {
  0% { transform: rotate(-4deg); }
  55% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

@keyframes problem-answer-accent-in {
  from { opacity: .3; transform: scaleY(.2); }
  to { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 900px) {
  .problem-answer-layer { transition-duration: 340ms; }
  .problem-nav.is-in .problem-list li { animation-duration: 420ms; }
  .problem-list li:nth-child(1) { --problem-row-delay: 850ms; }
  .problem-list li:nth-child(2) { --problem-row-delay: 892ms; }
  .problem-list li:nth-child(3) { --problem-row-delay: 934ms; }
  .problem-list li:nth-child(4) { --problem-row-delay: 976ms; }
  .problem-list li:nth-child(5) { --problem-row-delay: 1018ms; }
  .problem-list li:nth-child(6) { --problem-row-delay: 1060ms; }
  .problem-list li:nth-child(7) { --problem-row-delay: 1102ms; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-nav.is-in .problem-background,
  .problem-nav.is-in .problem-nav-mark,
  .problem-nav.is-in .problem-nav-head h2,
  .problem-nav.is-in .problem-nav-sub,
  .problem-nav.is-in .problem-nav-rule,
  .problem-nav.is-in .problem-answer-card,
  .problem-nav.is-in .problem-answer-layer.is-intro .problem-answer-image,
  .problem-nav.is-in .problem-answer-badge,
  .problem-nav.is-in .problem-list li,
  .problem-nav.is-in .problem-questions::before,
  .problem-nav.is-in .problem-list li::after,
  .problem-list li.is-current .problem-question-icon,
  .problem-list li.is-current button[data-visual="electric"] .problem-question-icon i,
  .problem-answer-copy.is-answer-entering::before { animation: none !important; }

  .problem-nav.is-in .problem-background { opacity: 1; }
  .problem-nav.is-in .problem-list li,
  .problem-nav.is-in .problem-list li::after { opacity: 1; transform: none; }
  .problem-answer-layer,
  .problem-answer-image,
  .problem-answer-copy h3,
  .problem-answer-copy p,
  .problem-answer-copy .problem-answer-cta,
  .problem-answer-copy::before,
  .problem-list button,
  .problem-list button > b,
  .problem-list button > .problem-arrow,
  .problem-indicator { transition-duration: 150ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   LEADING DEPARTMENTS — navy chapter break after the cream
   problem navigator. Six real links, no cart, call-first CTA.
   ───────────────────────────────────────────────────────────── */
.departments-showcase {
  --dept-navy: #191D22;
  position: relative;
  padding: 110px 0 100px;
  overflow: hidden;
  /* Fallback navy sampled from the blueprint artwork, so the section never
     flashes a different blue while the image loads. */
  background: radial-gradient(circle at 50% 35%, #04408f 0%, #013884 52%, #012a63 100%);
  color: #fff;
}

/* The artwork is pinned to the viewport: the section scrolls, the blueprint
   holds still and the content travels across it. */
.departments-blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0;
  transition: opacity 1200ms var(--m-ease);
  pointer-events: none;
}

/* The artwork carries the navy itself, so it comes in at full strength. */
.departments-showcase.is-in .departments-blueprint { opacity: 1; }

.departments-inner { position: relative; z-index: 1; direction: rtl; }

/* ── Header ────────────────────────────────────────────────── */
.departments-head { display: flex; align-items: flex-start; gap: 22px; }

.departments-rule {
  flex: 0 0 auto;
  width: 5px;
  height: 84px;
  border-radius: 999px;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 600ms var(--m-ease);
}

.departments-showcase.is-in .departments-rule { transform: scaleY(1); }

.departments-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 4vw, 72px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
}

.departments-head h2 .m-mask > span { transition: transform 620ms var(--m-ease) 80ms; }

.departments-head p {
  max-width: 780px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--m-ease) 620ms, transform 600ms var(--m-ease) 620ms;
}

.departments-showcase.is-in .departments-head p { opacity: 1; transform: none; }

/* ── Cards ─────────────────────────────────────────────────── */
.departments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.department-tile {
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  gap: 10px;
  min-height: 230px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  /* Sampled from the artwork's own backdrop, so the image rectangle dissolves
     into the card instead of showing as a lighter box. */
  background: #FDF4E9;
  color: var(--dept-navy);
  box-shadow: 0 16px 35px rgba(0, 15, 50, .13);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    opacity 480ms var(--m-ease) var(--m-delay, 0ms),
    transform 480ms var(--m-ease) var(--m-delay, 0ms),
    box-shadow 300ms var(--m-ease),
    border-color 300ms var(--m-ease);
}

.departments-grid a:nth-child(1) { --m-delay: 280ms; }
.departments-grid a:nth-child(2) { --m-delay: 340ms; }
.departments-grid a:nth-child(3) { --m-delay: 400ms; }
.departments-grid a:nth-child(4) { --m-delay: 460ms; }
.departments-grid a:nth-child(5) { --m-delay: 520ms; }
.departments-grid a:nth-child(6) { --m-delay: 580ms; }
.departments-grid a:nth-child(7) { --m-delay: 640ms; }
.departments-grid a:nth-child(8) { --m-delay: 700ms; }

.departments-showcase.is-in .department-tile { opacity: 1; transform: none; }

.department-tile-copy { display: grid; align-content: start; gap: 9px; }

/* Replaces the 01–06 numbering: a small label carries the hierarchy without
   the rigid, templated feel a running count gives six identical cards. */
.department-tile-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  height: 26px;
  padding-inline: 10px;
  border: 1px solid rgba(213, 34, 42, .25);
  border-radius: 999px;
  background: rgba(213, 34, 42, .1);
  color: #D99400;
  font-size: 11px;
  font-weight: 800;
  transition: background 220ms var(--m-ease), border-color 220ms var(--m-ease);
}

.department-tile h3 {
  margin: 0;
  color: var(--dept-navy);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.department-tile p {
  margin: 0;
  color: rgba(25, 29, 34, .65);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}

.department-tile small {
  color: rgba(25, 29, 34, .78);
  font-size: 12px;
  font-weight: 850;
}

.department-tile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: start;
  height: 40px;
  margin-top: 6px;
  padding-inline: 16px;
  border: 1px solid rgba(25, 29, 34, .18);
  border-radius: 11px;
  background: rgba(255, 255, 255, .65);
  color: var(--dept-navy);
  font-size: 14px;
  font-weight: 800;
  transition: background 220ms var(--m-ease), color 220ms var(--m-ease);
}

.department-tile-cta .fa-arrow-left { transition: transform 220ms var(--m-ease); }

.department-tile-media { display: grid; place-items: center; align-self: stretch; }

.department-tile-media img {
  width: 100%;
  height: 100%;
  max-height: 180px;
  /* The yellow halo is baked into the artwork, so it must never be cropped —
     and no CSS circle is added behind, or there would be two. */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition:
    opacity 600ms var(--m-ease) calc(var(--m-delay, 0ms) + 80ms),
    transform 600ms var(--m-ease) calc(var(--m-delay, 0ms) + 80ms);
}

.departments-showcase.is-in .department-tile-media img { opacity: 1; transform: none; }

@media (hover: hover) and (min-width: 900px) {
  .department-tile:hover {
    transform: translateY(-5px);
    border-color: rgba(213, 34, 42, .3);
    box-shadow: 0 22px 48px rgba(0, 15, 50, .18);
  }
  /* The halo travels with the products because it is part of the image. */
  .department-tile:hover .department-tile-media img { transform: translateY(-5px) scale(1.025); transition-delay: 0ms; transition-duration: 350ms; }
  .department-tile:hover .department-tile-label { background: rgba(213, 34, 42, .17); border-color: rgba(213, 34, 42, .42); }
  .department-tile:hover .department-tile-cta { background: #fff; }
  .department-tile:hover .department-tile-cta .fa-arrow-left { transform: translateX(-4px); }
}

/* ── Contact bar — call first, WhatsApp second ─────────────── */
.departments-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 30px;
  max-width: 1100px;
  margin: 52px auto 0;
  padding: 25px 30px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 22px;
  background: rgba(4, 43, 100, .35);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--m-ease) 1220ms, transform 600ms var(--m-ease) 1220ms;
}

.departments-showcase.is-in .departments-contact { opacity: 1; transform: none; }

.departments-contact-copy { display: flex; align-items: center; gap: 16px; }

.departments-contact-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: #f6efe4;
  color: var(--dept-navy);
}

.departments-contact-copy strong { display: block; color: #fff; font-size: 22px; font-weight: 900; }
.departments-contact-copy em { color: var(--yellow); font-style: normal; }
.departments-contact-copy > div > span { display: block; margin-top: 3px; color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 500; }

.departments-contact-actions { display: flex; align-items: center; gap: 12px; }

.departments-call,
.departments-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  padding-inline: 26px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms var(--m-ease) var(--m-delay, 0ms),
    transform 260ms var(--m-ease),
    background 220ms var(--m-ease),
    box-shadow 220ms var(--m-ease);
}

.departments-call { --m-delay: 1280ms; background: var(--yellow); color: var(--dept-navy); }
.departments-whatsapp { --m-delay: 1340ms; background: #fff; color: var(--dept-navy); }
.departments-whatsapp .fa-whatsapp { color: #168b45; }

.departments-showcase.is-in .departments-call,
.departments-showcase.is-in .departments-whatsapp { opacity: 1; transform: none; }

.departments-showcase.is-in .departments-call:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 26px rgba(213, 34, 42, .28); }
.departments-showcase.is-in .departments-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(3, 29, 71, .22); }

/* A single quiet nudge, not a permanent pulse. */
.departments-call.is-nudging .fa-phone { animation: dept-call-nudge 350ms var(--m-ease); }
@keyframes dept-call-nudge {
  0% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

@media (max-width: 1180px) {
  .departments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .department-tile { min-height: 240px; }
}

@media (max-width: 760px) {
  .departments-showcase { padding: 74px 0 78px; }
  .departments-head { gap: 16px; }
  .departments-rule { height: 64px; }
  .departments-head h2 { font-size: clamp(38px, 10vw, 52px); }
  .departments-head p { font-size: 17px; }
  .departments-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 32px; }
  .department-tile {
    grid-template-columns: 63% 37%;
    min-height: 166px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    transform: translateY(18px) scale(.99);
  }
  .departments-grid a:nth-child(1) { --m-delay: 240ms; }
  .departments-grid a:nth-child(2) { --m-delay: 290ms; }
  .departments-grid a:nth-child(3) { --m-delay: 340ms; }
  .departments-grid a:nth-child(4) { --m-delay: 390ms; }
  .departments-grid a:nth-child(5) { --m-delay: 440ms; }
  .departments-grid a:nth-child(6) { --m-delay: 490ms; }
  .departments-grid a:nth-child(7) { --m-delay: 540ms; }
  .departments-grid a:nth-child(8) { --m-delay: 590ms; }
  .department-tile h3 { font-size: 19px; }
  .department-tile p { font-size: 13.5px; }
  /* Still a link, just lighter, so the narrow card keeps room for the text. */
  .department-tile-label { height: 24px; padding-inline: 8px; font-size: 10px; }
  .department-tile-cta { height: 36px; padding-inline: 12px; font-size: 12.5px; }
  .department-tile-media img { max-height: 126px; }
  .department-tile:active { transform: scale(.985); transition-duration: 100ms; }
  .departments-contact { flex-direction: column; align-items: stretch; margin-top: 34px; padding: 20px; }
  .departments-contact-actions { flex-direction: column; align-items: stretch; }
  .departments-call, .departments-whatsapp { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .departments-blueprint,
  .departments-rule,
  .departments-head p,
  .department-tile,
  .department-tile-media img,
  .departments-contact,
  .departments-call,
  .departments-whatsapp { opacity: 1 !important; transform: none !important; transition: opacity 150ms linear !important; }
  .departments-blueprint { opacity: 1 !important; }
  .departments-rule { transform: scaleY(1) !important; }
  .departments-call .fa-phone { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   CREAM CHAPTER — one sheet of drafting paper under both
   מוצרים שכדאי להכיר and the handyman block. The blueprint is
   pinned to the viewport, so the grid holds still and only the
   content travels over it.
   ───────────────────────────────────────────────────────────── */

.cream-chapter {
  position: relative;
  isolation: isolate;
  background: #f7f3ea;
}

.cream-chapter::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(25, 29, 34, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 29, 34, .05) 1px, transparent 1px),
    linear-gradient(rgba(25, 29, 34, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 29, 34, .085) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  /* The grid is anchored to the viewport, not to the page. */
  background-attachment: fixed;
  content: "";
  pointer-events: none;
  /* Softened at both ends so the chapter fades into its neighbours
     instead of stopping on a hard line. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 110px), transparent 100%);
}

/* Both children sit above the paper. */
.cream-chapter > * { position: relative; z-index: 1; }

/* iOS Safari ignores background-attachment: fixed and repaints it on every
   scroll frame elsewhere on touch — let the grid ride along there. */
@media (max-width: 900px), (hover: none) {
  .cream-chapter::before,
  .departments-blueprint,
  .problem-background { background-attachment: scroll; }
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT SHELF — navy chapter, horizontal carousel of cream
   cards. No cart, no favourites, no filter: details page or a
   phone call to check availability.
   ───────────────────────────────────────────────────────────── */
.product-shelf {
  --shelf-navy: #191D22;
  position: relative;
  padding: 96px 0 100px;
  overflow: hidden;
  /* Paper and blueprint now come from .cream-chapter. */
  background: transparent;
  color: var(--shelf-navy);
}

.shelf-inner { position: relative; z-index: 1; direction: rtl; }

/* ── Head ──────────────────────────────────────────────────── */
.shelf-head { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }

.shelf-head h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  color: var(--shelf-navy);
  font-size: clamp(38px, 3.6vw, 58px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}

.shelf-head h2 em { font-style: normal; color: var(--yellow); }

.shelf-plus {
  position: absolute;
  top: -4px;
  color: var(--yellow);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: opacity 520ms var(--m-ease) 420ms;
}

.shelf-plus-start { inset-inline-start: 6%; }
.shelf-plus-end { inset-inline-end: 6%; top: 26px; font-size: 20px; }
.product-shelf.is-in .shelf-plus { opacity: 1; }

.shelf-head p {
  margin: 16px auto 0;
  color: #5d6879;
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 560ms var(--m-ease) 420ms, transform 560ms var(--m-ease) 420ms;
}

.product-shelf.is-in .shelf-head p { opacity: 1; transform: none; }

/* Handwritten-style aside pointing at the first card. */
.shelf-note {
  position: absolute;
  top: 118px;
  inset-inline-start: 2%;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #8b93a3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 620ms var(--m-ease) 620ms, transform 620ms var(--m-ease) 620ms;
  pointer-events: none;
}

.product-shelf.is-in .shelf-note { opacity: 1; transform: none; }
.shelf-note-text { font-size: 15px; font-weight: 600; line-height: 1.45; transform: rotate(-4deg); }
.shelf-note-arrow { width: 92px; height: 46px; margin-top: 16px; color: rgba(25, 29, 34, .35); transform: scaleX(-1); }

/* ── Carousel ──────────────────────────────────────────────── */
.shelf-viewport { position: relative; margin-top: 46px; }

.shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px;
  padding: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.shelf-track::-webkit-scrollbar { display: none; }

.shelf-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--shelf-navy);
  box-shadow: 0 6px 18px rgba(3, 29, 71, .14);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 220ms var(--m-ease), background 220ms var(--m-ease), transform 220ms var(--m-ease);
}

.shelf-nav-prev { inset-inline-end: -23px; }
.shelf-nav-next { inset-inline-start: -23px; }
.shelf-nav-next .fa-arrow-left { transform: scaleX(-1); }
.shelf-nav:hover { background: var(--yellow); }
.shelf-nav[disabled] { opacity: .3; cursor: default; }

/* ── Cards ─────────────────────────────────────────────────── */
.shelf-item {
  display: flex;
  flex-direction: column;
  padding: 14px 13px 13px;
  border: 1px solid rgba(25, 29, 34, .07);
  border-radius: 18px;
  background: #fff;
  scroll-snap-align: start;
  opacity: 0;
  /* Light on purpose: the shelf is not the page's loudest moment. */
  transform: translateY(16px);
  transition:
    opacity 460ms var(--m-ease) var(--m-delay, 0ms),
    transform 460ms var(--m-ease) var(--m-delay, 0ms),
    box-shadow 300ms var(--m-ease),
    border-color 300ms var(--m-ease);
}

/* First child sits on the right in RTL, so the run reads right to left. */
.shelf-track > :nth-child(1) { --m-delay: 260ms; }
.shelf-track > :nth-child(2) { --m-delay: 315ms; }
.shelf-track > :nth-child(3) { --m-delay: 370ms; }
.shelf-track > :nth-child(4) { --m-delay: 425ms; }
.shelf-track > :nth-child(5) { --m-delay: 480ms; }
.shelf-track > :nth-child(6) { --m-delay: 535ms; }
.shelf-track > :nth-child(7) { --m-delay: 590ms; }
.shelf-track > :nth-child(8) { --m-delay: 645ms; }

.product-shelf.is-in .shelf-item { opacity: 1; transform: none; }

.shelf-item-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-align: center; }

.shelf-item-media {
  display: grid;
  height: 200px;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 12px;
  background: #faf7f1;
  transition: background 300ms var(--m-ease);
}

.shelf-item-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 400ms var(--m-ease);
}

.shelf-item-category { color: #97a1b1; font-size: 12.5px; font-weight: 600; }

.shelf-item h3 {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--shelf-navy);
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shelf-item-price {
  margin-top: auto;
  padding-top: 10px;
  color: var(--shelf-navy);
  font-size: 21px;
  font-weight: 900;
}

.shelf-item-price i { font-style: normal; font-size: .72em; font-weight: 800; }

.shelf-item-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
}

.shelf-item-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding-inline: 13px;
  border-radius: 9px;
  background: var(--shelf-navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 220ms var(--m-ease), transform 220ms var(--m-ease);
}

.shelf-item-details {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6b7688;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 220ms var(--m-ease), transform 220ms var(--m-ease);
}

.shelf-item-details span { font-size: 15px; line-height: 1; }

.shelf-item-call .fa-phone { color: var(--yellow); }

@media (hover: hover) and (min-width: 900px) {
  .product-shelf.is-in .shelf-item:hover { border-color: rgba(213, 34, 42, .38); box-shadow: 0 18px 38px rgba(3, 29, 71, .1); transform: translateY(-4px); }
  .product-shelf.is-in .shelf-item:hover .shelf-item-media { background: #f6f1e7; }
  .product-shelf.is-in .shelf-item:hover .shelf-item-media img { transform: translateY(-6px) scale(1.03); }
  .product-shelf.is-in .shelf-item:hover h3 { color: #05306f; }
  .shelf-item-details:hover { color: var(--shelf-navy); transform: translateX(-3px); }
  .shelf-item-call:hover { background: #021d48; transform: translateY(-2px); }
  .shelf-item h3 { transition: color 240ms var(--m-ease); }
}

.shelf-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  /* No auto margins: inside the centred flex row they would eat the free
     space and shove the stock badge out to the edge. */
  margin: 0;
  padding-inline: 34px;
  /* Same yellow CTA treatment as the key-duplication button, so the two
     primary actions on the page read as one family. */
  border: 1px solid var(--yellow);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--shelf-navy);
  font-size: 17px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 520ms var(--m-ease) 1120ms, background 220ms var(--m-ease), transform 220ms var(--m-ease);
}

.shelf-inner > .shelf-all { display: flex; width: fit-content; }
.product-shelf.is-in .shelf-all { opacity: 1; }
.shelf-all .fa-arrow-left { transition: transform 220ms var(--m-ease); }
.product-shelf.is-in .shelf-all:hover { background: #D5222A; border-color: #D5222A; color: var(--shelf-navy); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(213, 34, 42, .28); }
.product-shelf.is-in .shelf-all:hover .fa-arrow-left { transform: translateX(-4px); }

@media (max-width: 1280px) {
  .shelf-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .shelf-note { display: none; }
}

@media (max-width: 1040px) {
  .shelf-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}

@media (max-width: 900px) {
  .product-shelf { padding: 30px 0 0px; }
  .shelf-head h2 { font-size: clamp(28px, 8vw, 40px); }
  .shelf-viewport { margin-top: 30px; }
  .shelf-track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
  .shelf-nav { display: none; }
  .shelf-item { padding: 14px 12px 12px; border-radius: 15px; }
  .shelf-item-media { height: 200px; margin-bottom: 12px; }
  .shelf-item h3 { font-size: 14px; }
  .shelf-item-price { font-size: 20px; }
  .shelf-inner > .shelf-all { width: 100%; }
}

@media (max-width: 560px) {
  /* Breaks the rail out of .site-container so it runs edge-to-edge —
     the classic centered-container escape: the parent is centered, so
     this cancels its inset exactly regardless of viewport width. */
  .shelf-viewport {
    width: 100vw;
    margin-inline: calc(50% - 50vw);  /* both sides — direction-agnostic even if an
       ancestor or this element itself overrides `direction` */
  }

  .shelf-track {
    grid-auto-columns: 78%;
    /* The scroll area itself is edge-to-edge (see .shelf-viewport above),
       but the resting card still lines up with the heading above it —
       zero padding here left it flush with the true screen edge while
       the heading and dots stayed on the page's normal 18px margin, so
       the whole section read as misaligned. Scrolling still reaches the
       true edge; only the snapped, at-rest position is inset. */
    padding-inline: 18px;
    scroll-padding-inline: 18px;
  }

  .shelf-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-plus, .shelf-head p, .shelf-note,
  .shelf-item, .shelf-all { opacity: 1 !important; transform: none !important; transition: none !important; }
  .shelf-head h2::before { transform: scaleY(1) !important; }
  .shelf-track { scroll-behavior: auto; }
}

/* ── Shelf: pagination dots, footer row and benefits strip ──── */
.shelf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  opacity: 0;
  transition: opacity 520ms var(--m-ease) 1000ms;
}

.product-shelf.is-in .shelf-dots { opacity: 1; }

.shelf-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 29, 34, .18);
  cursor: pointer;
  transition: background 240ms var(--m-ease), width 240ms var(--m-ease);
}

.shelf-dots button[aria-selected="true"] { width: 24px; border-radius: 999px; background: var(--shelf-navy); }

.shelf-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 32px;
}

.shelf-stock {
  display: flex;
  align-items: center;
  gap: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms var(--m-ease) 1120ms, transform 520ms var(--m-ease) 1120ms;
}

.product-shelf.is-in .shelf-stock { opacity: 1; transform: none; }

.shelf-stock-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--shelf-navy);
  color: var(--yellow);
}

.shelf-stock strong { display: block; color: var(--shelf-navy); font-size: 15px; font-weight: 900; }
.shelf-stock small { display: block; margin-top: 2px; color: #6b7688; font-size: 13.5px; font-weight: 500; }

@media (max-width: 900px) {
  .shelf-dots { margin-top: 20px; }
  .shelf-footer { flex-direction: column; gap: 18px; margin-top: 24px; }
  /* Stacked items don't get a vertical rule between them. */
}

@media (max-width: 480px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* ─────────────────────────────────────────────────────────────
   HANDYMAN — editorial split screen, deliberately not a grid.
   Everything before it on the page is cards; this one is a photo,
   a headline and a phone number. No service icons, no delivery.
   ───────────────────────────────────────────────────────────── */

.hm {
  --hm-navy: #191D22;
  --hm-yellow: #D5222A;
  --hm-ink: #596579;
  position: relative;
  isolation: isolate;
  padding: 110px 0;
  /* Paper and blueprint now come from .cream-chapter. */
  background: transparent;
  overflow: hidden;
}

.hm-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 64px), 1380px);
  margin-inline: auto;
  /* LTR on the grid so "media" is physically left whatever the page dir;
     the children switch back to RTL for their own text. */
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(420px, 48%);
  grid-template-areas:
    'media intro'
    'media detail';
  align-items: center;
  column-gap: 80px;
  row-gap: 34px;
}

.hm-intro  { grid-area: intro;  direction: rtl; align-self: end; }
.hm-detail { grid-area: detail; direction: rtl; align-self: start; }

/* ── Photo ───────────────────────────────────────────────────── */

.hm-media {
  grid-area: media;
  position: relative;
  margin: 0;
  direction: rtl;
}

.hm-media-frame {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  border: 1px solid rgba(25, 29, 34, .08);
  overflow: hidden;
  background: #efe7dc;
  /* Cinema wipe: the frame opens, the photo settles out of a slow zoom. */
  clip-path: inset(0 0 0 0);
}

.hm-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

@media (hover: hover) {
  .hm-media-frame:hover img { transform: scale(1.015); }
}

/* ── Copy ────────────────────────────────────────────────────── */

.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hm-navy);
}
.hm-eyebrow i {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--hm-yellow);
}

.hm-intro h2 {
  margin: 16px 0 0;
  font-size: clamp(52px, 4.2vw, 74px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--hm-navy);
}
.hm-intro h2 .m-mask { display: block; }
.hm-accent { color: var(--hm-yellow); }

.hm-intro > p {
  max-width: 540px;
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--hm-ink);
}

/* ── Three proofs: rules, not cards ──────────────────────────── */

.hm-proofs {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 540px;
}

.hm-proofs li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  transition: none;
}

/* The separator is a pseudo-element so it can be drawn on entrance. */
.hm-proofs li::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: rgba(25, 29, 34, .10);
  transform: scaleX(1);
  transform-origin: right;
  transition: background-color 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

/* No numbering and no icon: a short yellow rule marks each line, the same
   mark as the eyebrow so the section reads as one voice. */
.hm-proofs i {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--hm-yellow);
  transition: width 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm-proofs span {
  font-size: 17px;
  font-weight: 700;
  color: var(--hm-navy);
  transition: transform 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

@media (hover: hover) {
  .hm-proofs li:hover i    { width: 32px; }
  .hm-proofs li:hover span { transform: translateX(-2px); }
  .hm-proofs li:hover::after { background: rgba(25, 29, 34, .2); }
}

/* ── Phone ───────────────────────────────────────────────────── */

.hm-phone { margin-top: 34px; }
.hm-phone > span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-ink);
}
.hm-phone > a {
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(34px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--hm-navy);
  text-decoration: none;
  transition: color 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm-phone > a:hover { color: #0a4ba8; }

/* ── Actions ─────────────────────────────────────────────────── */

.hm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hm-call,
.hm-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
    box-shadow 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
    background-color 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
    border-color 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

.hm-call {
  background: var(--hm-yellow);
  color: var(--hm-navy);
  border: 0;
}
.hm-call .fa-solid { transition: transform 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)); }
.hm-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(213, 34, 42, .18);
}
.hm-call:hover .fa-solid { transform: translateX(-3px); }

.hm-whatsapp {
  background: transparent;
  border: 1px solid rgba(25, 29, 34, .20);
  color: var(--hm-navy);
}
.hm-whatsapp:hover {
  transform: translateY(-2px);
  border-color: rgba(25, 29, 34, .38);
  background: rgba(25, 29, 34, .04);
}

.hm-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 800;
  color: var(--hm-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(25, 29, 34, .22);
  padding-bottom: 3px;
  transition: border-color 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm-more .fa-solid { transition: transform 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)); }
.hm-more:hover { border-color: var(--hm-yellow); }
.hm-more:hover .fa-solid { transform: translateX(-3px); }

/* ── Entrance ────────────────────────────────────────────────
   Sequence: photo → eyebrow → headline → paragraph → 01/02/03
   → phone → CTAs. Editorial cascade, no card stagger.
   ──────────────────────────────────────────────────────────── */

.hm[data-motion-section]:not(.is-in) .hm-media-frame {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.hm[data-motion-section]:not(.is-in) .hm-media-frame img { transform: scale(1.04); }
.hm[data-motion-section]:not(.is-in) .hm-eyebrow,
.hm[data-motion-section]:not(.is-in) .hm-intro > p,
.hm[data-motion-section]:not(.is-in) .hm-phone,
.hm[data-motion-section]:not(.is-in) .hm-call,
.hm[data-motion-section]:not(.is-in) .hm-whatsapp,
.hm[data-motion-section]:not(.is-in) .hm-more {
  opacity: 0;
  transform: translateY(9px);
}
.hm[data-motion-section]:not(.is-in) .hm-proofs li {
  opacity: 0;
  transform: translateX(18px);
}
.hm[data-motion-section]:not(.is-in) .hm-proofs li::after { transform: scaleX(0); }

/* Photo, eyebrow and first headline line land inside 100ms of each other, so
   the section reads as one piece arriving rather than a slideshow. */
.hm.is-in .hm-media-frame {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 60ms,
    clip-path 700ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 60ms;
}
.hm.is-in .hm-media-frame img {
  transform: scale(1);
  transition: transform 900ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 60ms;
}
.hm.is-in .hm-eyebrow,
.hm.is-in .hm-intro > p,
.hm.is-in .hm-phone,
.hm.is-in .hm-call,
.hm.is-in .hm-whatsapp,
.hm.is-in .hm-more {
  opacity: 1;
  transform: none;
}

.hm.is-in .hm-eyebrow {
  transition: opacity 360ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 0ms, transform 360ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 0ms;
}
.hm.is-in .hm-intro > p {
  transition: opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 260ms, transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 260ms;
}

/* Headline: one mask reveal per line, 70ms apart. */
.hm .m-mask > span { transition-duration: 620ms; }
.hm.is-in .hm-intro h2 .m-mask:nth-child(1) > span { transition-delay: 100ms; }
.hm.is-in .hm-intro h2 .m-mask:nth-child(2) > span { transition-delay: 170ms; }

.hm.is-in .hm-proofs li {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
              transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm.is-in .hm-proofs li::after {
  transform: scaleX(1);
  transition: transform 450ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
              background-color 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm.is-in .hm-proofs li:nth-child(1)         { transition-delay: 340ms; }
.hm.is-in .hm-proofs li:nth-child(1)::after  { transition-delay: 370ms; }
.hm.is-in .hm-proofs li:nth-child(2)         { transition-delay: 400ms; }
.hm.is-in .hm-proofs li:nth-child(2)::after  { transition-delay: 430ms; }
.hm.is-in .hm-proofs li:nth-child(3)         { transition-delay: 460ms; }
.hm.is-in .hm-proofs li:nth-child(3)::after  { transition-delay: 490ms; }

.hm.is-in .hm-phone {
  transition: opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 560ms,
              transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 560ms;
}
.hm.is-in .hm-call {
  transition: opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 620ms,
              transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 620ms,
              box-shadow 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm.is-in .hm-whatsapp {
  transition: opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 660ms,
              transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 660ms,
              border-color 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
              background-color 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.hm.is-in .hm-more {
  transition: opacity 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 700ms,
              transform 400ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)) 700ms,
              border-color 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1160px) {
  .hm { padding: 90px 0; }
  .hm-inner { column-gap: 52px; grid-template-columns: minmax(0, 50%) minmax(380px, 50%); }
}

/* One column: the message lands before the photo does. */
@media (max-width: 900px) {
  .hm { padding: 72px 0; }
  .hm-inner {
    width: calc(100% - 40px);
    direction: rtl;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'intro' 'media' 'detail';
    row-gap: 0;
  }
  .hm-intro, .hm-detail { align-self: auto; }
  .hm-intro h2 { font-size: clamp(38px, 10vw, 44px); line-height: .98; }
  .hm-intro > p { font-size: 16.5px; margin-top: 18px; }

  .hm-media { margin-top: 28px; }
  .hm-media-frame { border-radius: 20px; }
  .hm-media-frame::after { width: 130px; inset-block-start: 24px; inset-inline-end: -44px; }

  .hm-detail { margin-top: 30px; }
  .hm-proofs li { padding: 13px 0; gap: 13px; }
  .hm-proofs span { font-size: 15.5px; }
  .hm-proofs i { width: 18px; }

  .hm-phone { margin-top: 28px; }
  .hm-phone > a { font-size: 34px; }

  /* Stacked, full width, call on top. */
  .hm-actions { flex-direction: column; gap: 10px; margin-top: 22px; }
  .hm-call, .hm-whatsapp { width: 100%; padding: 0 20px; }
  .hm-call { height: 52px; }
  .hm-whatsapp { height: 50px; }
  .hm-more { margin-top: 18px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm .hm-media-frame,
  .hm .hm-media-frame img,
  .hm .hm-eyebrow,
  .hm .hm-intro > p,
  .hm .hm-proofs li,
  .hm .hm-proofs li::after,
  .hm .hm-phone,
  .hm .hm-call,
  .hm .hm-whatsapp,
  .hm .hm-more {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   LOCAL CONTACT — the closing block. A real map, the NAP, and
   two ways to act. Calm on purpose: no cards, no icon strip, no
   product imagery. Primary conversion is navigation, then the
   call. The shop does not deliver, so nothing here says it does.
   ───────────────────────────────────────────────────────────── */

.local-contact {
  --lc-navy: #191D22;
  --lc-yellow: #D5222A;
  --lc-muted: #72757B;
  position: relative;
  padding: 110px 0 120px;
  background: #F7EFE5;
}

.local-inner {
  width: min(calc(100% - 64px), 1380px);
  margin-inline: auto;
  direction: rtl;
}

/* ── Head ────────────────────────────────────────────────────
   Editorial: label, title, rule. No pictogram — the house icon
   already carries מה ×ž×ª×§× ×™× היום?.
   ──────────────────────────────────────────────────────────── */

.local-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--lc-navy);
}
.local-eyebrow i {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--lc-yellow);
}

.local-head h2 {
  margin: 16px 0 0;
  font-size: clamp(54px, 4.5vw, 76px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--lc-navy);
}
.local-head h2 .m-mask { display: block; }
.local-head h2 em { font-style: normal; color: var(--lc-yellow); }

.local-head > p {
  max-width: 650px;
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--lc-muted);
}

/* ── Layout ──────────────────────────────────────────────── */

.local-grid {
  display: grid;
  grid-template-columns: minmax(0, 62%) minmax(360px, 38%);
  align-items: stretch;
  gap: 28px;
  margin-top: 52px;
}

/* ── Map ─────────────────────────────────────────────────────
   The map stays a live embed: no parallax, no pointer tracking,
   nothing that would fight its own gestures.
   ──────────────────────────────────────────────────────────── */

.local-map {
  position: relative;
  /* Width must win: stretched to the row height, aspect-ratio would otherwise
     derive the width from it and overflow the grid column. */
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 500px;
  border: 1px solid rgba(25, 29, 34, .09);
  border-radius: 28px;
  overflow: hidden;
  background: #EEE9E0;
  box-shadow: 0 10px 30px rgba(10, 30, 65, .05);
  transition: box-shadow 300ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

.local-map:hover { box-shadow: 0 18px 44px rgba(10, 30, 65, .1); }

.local-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sits over the map but never intercepts a drag or a zoom. */
.local-map-tag {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 18px;
  display: block;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(10, 30, 65, .08);
  pointer-events: none;
}
.local-map-tag strong { display: block; color: var(--lc-navy); font-size: 15px; font-weight: 900; }
.local-map-tag small { display: block; margin-top: 2px; color: var(--lc-muted); font-size: 12.5px; font-weight: 600; }

/* ── Panel ───────────────────────────────────────────────── */

.local-panel {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid rgba(25, 29, 34, .08);
  border-radius: 26px;
  background:white;
}

.local-store strong { display: block; color: var(--lc-navy); font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.local-store span { display: block; margin-top: 7px; color: var(--lc-muted); font-size: 14.5px; font-weight: 500; line-height: 1.5; }

.local-row {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(25, 29, 34, .1);
}

.local-label {
  display: block;
  margin-bottom: 8px;
  color: var(--lc-muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.local-row address {
  font-style: normal;
  color: var(--lc-navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.local-pickup { color: var(--lc-muted); font-size: 14.5px; font-weight: 600; }

.local-hours { margin: 0; }
.local-hours > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}
.local-hours dt { color: var(--lc-navy); font-size: 15.5px; font-weight: 800; }
.local-hours dd { margin: 0; color: var(--lc-navy); font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.local-phone {
  display: inline-block;
  color: var(--lc-navy);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: opacity 200ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}
.local-phone:hover { opacity: .82; }

.local-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  color: var(--lc-navy);
  font-size: 16px;
  font-weight: 700;
}
.local-line i {
  flex: 0 0 auto;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--lc-yellow);
}

/* ── Actions ─────────────────────────────────────────────── */

.local-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Pushed to the bottom so the panel's base lines up with the map's. */
  margin-top: auto;
  padding-top: 28px;
}

.local-nav,
.local-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
    box-shadow 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)),
    background-color 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1));
}

.local-nav {
  height: 54px;
  background: var(--lc-yellow);
  color: var(--lc-navy);
}
.local-nav .fa-solid { transition: transform 220ms var(--m-ease, cubic-bezier(.22, 1, .36, 1)); }
.local-nav:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(213, 34, 42, .2); }
.local-nav:hover .fa-solid { transform: translateX(-4px); }

.local-call {
  height: 52px;
  background: var(--lc-navy);
  color: #fff;
}
.local-call:hover { transform: translateY(-2px); background: #05306f; }

/* Tertiary on purpose: a link, not a third button. */
.local-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  color: #128C4A;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.local-whatsapp:hover { text-decoration: underline; }

.local-contact a:focus-visible {
  outline: 3px solid rgba(213, 34, 42, .55);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ── Entrance ────────────────────────────────────────────────
   head → map → tag → panel → its rows → CTAs.
   ──────────────────────────────────────────────────────────── */

.local-contact[data-motion-section]:not(.is-in) .local-eyebrow,
.local-contact[data-motion-section]:not(.is-in) .local-head > p {
  opacity: 0;
  transform: translateY(8px);
}
.local-contact[data-motion-section]:not(.is-in) .local-map {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
.local-contact[data-motion-section]:not(.is-in) .local-map-tag {
  opacity: 0;
  transform: translateY(12px) scale(.96);
}
.local-contact[data-motion-section]:not(.is-in) .local-panel {
  opacity: 0;
  transform: translateX(22px);
}
.local-contact[data-motion-section]:not(.is-in) .local-store,
.local-contact[data-motion-section]:not(.is-in) .local-row,
.local-contact[data-motion-section]:not(.is-in) .local-line,
.local-contact[data-motion-section]:not(.is-in) .local-nav,
.local-contact[data-motion-section]:not(.is-in) .local-call,
.local-contact[data-motion-section]:not(.is-in) .local-whatsapp {
  opacity: 0;
  transform: translateY(6px);
}

.local-contact.is-in .local-eyebrow,
.local-contact.is-in .local-head > p,
.local-contact.is-in .local-map-tag,
.local-contact.is-in .local-panel,
.local-contact.is-in .local-store,
.local-contact.is-in .local-row,
.local-contact.is-in .local-line,
.local-contact.is-in .local-nav,
.local-contact.is-in .local-call,
.local-contact.is-in .local-whatsapp {
  opacity: 1;
  transform: none;
}

.local-contact.is-in .local-eyebrow {
  transition: opacity 360ms var(--m-ease) 0ms, transform 360ms var(--m-ease) 0ms;
}
.local-contact .local-head h2 .m-mask > span { transition-duration: 620ms; }
.local-contact.is-in .local-head h2 .m-mask > span { transition-delay: 80ms; }
.local-contact.is-in .local-head > p {
  transition: opacity 400ms var(--m-ease) 180ms, transform 400ms var(--m-ease) 180ms;
}

/* The container is revealed, never the map inside it. */
.local-contact.is-in .local-map {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: opacity 420ms var(--m-ease) 260ms,
              clip-path 700ms var(--m-ease) 260ms,
              box-shadow 300ms var(--m-ease);
}
.local-contact.is-in .local-map-tag {
  transition: opacity 380ms var(--m-ease) 620ms, transform 380ms var(--m-ease) 620ms;
}
.local-contact.is-in .local-panel {
  transition: opacity 520ms var(--m-ease) 330ms, transform 520ms var(--m-ease) 330ms;
}

.local-contact.is-in .local-store        { transition: opacity 320ms var(--m-ease) 400ms, transform 320ms var(--m-ease) 400ms; }
.local-contact.is-in .local-row:nth-of-type(2) { transition: opacity 320ms var(--m-ease) 460ms, transform 320ms var(--m-ease) 460ms; }
.local-contact.is-in .local-row:nth-of-type(3) { transition: opacity 320ms var(--m-ease) 520ms, transform 320ms var(--m-ease) 520ms; }
.local-contact.is-in .local-row:nth-of-type(4) { transition: opacity 320ms var(--m-ease) 580ms, transform 320ms var(--m-ease) 580ms; }
.local-contact.is-in .local-line          { transition: opacity 320ms var(--m-ease) 620ms, transform 320ms var(--m-ease) 620ms; }
.local-contact.is-in .local-nav           { transition: opacity 380ms var(--m-ease) 650ms, transform 380ms var(--m-ease) 650ms, box-shadow 220ms var(--m-ease); }
.local-contact.is-in .local-call          { transition: opacity 380ms var(--m-ease) 710ms, transform 380ms var(--m-ease) 710ms, background-color 220ms var(--m-ease); }
.local-contact.is-in .local-whatsapp      { transition: opacity 380ms var(--m-ease) 760ms, transform 380ms var(--m-ease) 760ms; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .local-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .local-map { min-height: 380px; aspect-ratio: 16 / 9; }
  .local-panel { margin-top: 0; }
  /* Stacked, the panel no longer has a map height to match. */
  .local-actions { margin-top: 28px; }
}

@media (max-width: 900px) {
  .local-contact { padding: 50px 0 0px; }
  .local-inner { width: calc(100% - 40px); }
  .local-head h2 { font-size: clamp(38px, 10vw, 46px); }
  .local-head > p { font-size: 16.5px; margin-top: 16px; }
  .local-grid { margin-top: 34px; }

  .local-map { min-height: 330px; max-height: 380px; border-radius: 20px; }
  .local-map-tag { inset-block-start: 12px; inset-inline-start: 12px; padding: 10px 13px; }

  .local-panel { margin-top: 14px; padding: 24px 20px; border-radius: 20px; }
  .local-store strong { font-size: 22px; }
  .local-phone { font-size: 26px; }
  .local-row { margin-top: 20px; padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .local-contact .local-eyebrow,
  .local-contact .local-head > p,
  .local-contact .local-map,
  .local-contact .local-map-tag,
  .local-contact .local-panel,
  .local-contact .local-store,
  .local-contact .local-row,
  .local-contact .local-line,
  .local-contact .local-nav,
  .local-contact .local-call,
  .local-contact .local-whatsapp {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: opacity 150ms linear !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   ENTRANCE SENTINEL — one invisible marker per section, sitting
   a quarter of the way down. Its crossing of the activation line
   is what starts a section's entrance, so nothing plays while
   only the section's top edge has appeared.
   ───────────────────────────────────────────────────────────── */

.section-enter {
  position: absolute;
  top: 60px;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}

/* On phones the marker sits at the very top of the section: combined with the
   positive rootMargin, the entrance is already running before the section
   reaches the fold. */
@media (max-width: 767px) {
  .section-enter { top: 0; }
}

/* A section reached on reload, or via an anchor, is already past its trigger.
   It is shown at once instead of replaying an entrance nobody would see. */
.is-preset {
  transition: none !important;
  animation: none !important;
}

/* ── Debug overlay, opt-in via ?motiondebug=1 ────────────────── */

.motion-debug-line {
  position: fixed;
  inset-inline: 0;
  top: var(--motion-debug-line, 75vh);
  z-index: 9999;
  height: 0;
  border-top: 2px dashed rgba(220, 20, 60, .85);
  pointer-events: none;
}
.motion-debug-line::after {
  position: absolute;
  inset-inline-end: 8px;
  top: 4px;
  color: crimson;
  font: 700 11px/1 system-ui, sans-serif;
  content: "activation line";
}

.motion-debug .section-enter {
  width: 100%;
  height: 3px;
  opacity: 1;
  background: rgba(220, 20, 60, .6);
}
.motion-debug .section-enter::after {
  position: absolute;
  inset-inline-start: 8px;
  top: 5px;
  padding: 3px 7px;
  border-radius: 4px;
  background: crimson;
  color: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  white-space: nowrap;
  content: attr(data-label);
}

/* ─────────────────────────────────────────────────────────────
   CLOSING ZONE — contact and footer on one navy ground. The
   wrapper owns the colour and the decorative linework so the two
   read as a single ending, with no seam where the footer starts.
   ───────────────────────────────────────────────────────────── */

.site-closing-zone {
  position: relative;
  isolation: isolate;
  /* Barely there: the brand navy stays unmistakably the colour. */
  background: linear-gradient(180deg, #191D22 0%, #191D22 62%, #191D22 100%);
  overflow: hidden;
}

/* One thin technical line where the light page hands over to the navy. */
.site-closing-zone::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, rgba(213, 34, 42, .55) 18%, rgba(213, 34, 42, .55) 82%, transparent 100%);
  content: "";
  pointer-events: none;
}

/* Street-map geometry drawn in CSS, pushed to the outer edges: a coarse block
   grid, two long routes and a scatter of survey marks. The centre stays clean
   for the map and the contact panel. Replaceable by a single artwork later. */
.site-closing-zone::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    /* one warm route running across the lower edge */
    linear-gradient(76deg, transparent calc(50% - 1px), rgba(213, 34, 42, .16) 50%, transparent calc(50% + 1px)),
    /* two navy-light routes */
    linear-gradient(104deg, transparent calc(50% - 1px), rgba(154, 190, 245, .16) 50%, transparent calc(50% + 1px)),
    /* city block grid */
    linear-gradient(rgba(154, 190, 245, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 190, 245, .1) 1px, transparent 1px),
    linear-gradient(rgba(154, 190, 245, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 190, 245, .16) 1px, transparent 1px);
  background-size: 620px 100%, 900px 100%, 42px 42px, 42px 42px, 210px 210px, 210px 210px;
  background-position: 12% 0, 88% 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  content: "";
  pointer-events: none;
  /* Hollow centre: the linework only ever reads at the edges. */
  -webkit-mask-image: radial-gradient(105% 62% at 50% 46%, transparent 34%, #000 88%);
  mask-image: radial-gradient(105% 62% at 50% 46%, transparent 34%, #000 88%);
}

.site-closing-zone > * { position: relative; z-index: 1; }

/* ── Contact on navy ─────────────────────────────────────────
   Same approved layout; only the colours move.
   ──────────────────────────────────────────────────────────── */

.local-contact {
  background: transparent;
  --lc-muted: rgba(255, 255, 255, .74);
}

.local-eyebrow { color: #fff; }
.local-head h2 { color: #fff; }
.local-head h2 em { color: var(--lc-yellow); }
.local-head > p { color: rgba(255, 255, 255, .74); }

/* The two light blocks now carry all the information, and pop off the navy. */
.local-map {
  border-color: rgba(255, 255, 255, .14);
  background: #F7EFE5;
  box-shadow: 0 22px 60px rgba(2, 16, 44, .3);
}
.local-map:hover { box-shadow: 0 30px 74px rgba(2, 16, 44, .38); }

.local-map-tag { background: rgba(255, 255, 255, .94); }
.local-map-tag strong { color: var(--lc-navy); }
.local-map-tag small { color: #72757B; }

.local-panel {
  border-color: rgba(255, 255, 255, .1);
  background: #fff;
  box-shadow: 0 22px 60px rgba(2, 16, 44, .3);
}

/* Inside the cream panel everything goes back to navy on warm white. */
.local-panel .local-store span,
.local-panel .local-label,
.local-panel .local-pickup { color: #72757B; }
.local-panel .local-store strong,
.local-panel address,
.local-panel .local-hours dt,
.local-panel .local-hours dd,
.local-panel .local-phone,
.local-panel .local-line { color: var(--lc-navy); }
.local-panel .local-row { border-top-color: rgba(25, 29, 34, .1); }

.local-contact a:focus-visible { outline-color: rgba(213, 34, 42, .8); }

/* ── Footer on the same ground ───────────────────────────── */

.site-closing-zone .site-footer {
  position: relative;
  background: transparent;
  /* The footer was reading as a thin strip: 20px of air above the columns and
     20px below left the navy band barely taller than its own text. */
  padding-top: 80px;
  padding-bottom: 96px;
}

/* No second full-width panel: one hairline separates the two, nothing more. */
.site-closing-zone .site-footer::before {
  display: block;
  width: min(calc(100% - 64px), 1380px);
  height: 1px;
  margin: 0 auto 72px;
  background: rgba(255, 255, 255, .13);
  content: "";
}

/* ── Footer entrance — quiet on purpose ──────────────────── */

.site-footer .footer-grid > * {
  opacity: 0;
  transform: translateY(8px);
}
.site-footer.is-in .footer-grid > * {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--m-ease) var(--m-delay, 0ms), transform 300ms var(--m-ease) var(--m-delay, 0ms);
}
.site-footer .footer-grid > :nth-child(1) { --m-delay: 0ms; }
.site-footer .footer-grid > :nth-child(2) { --m-delay: 40ms; }
.site-footer .footer-grid > :nth-child(3) { --m-delay: 80ms; }
.site-footer .footer-grid > :nth-child(4) { --m-delay: 120ms; }

.site-footer .footer-bottom { opacity: 0; transform: translateY(8px); }
.site-footer.is-in .footer-bottom {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--m-ease) 160ms, transform 300ms var(--m-ease) 160ms;
}

@media (max-width: 900px) {
  .site-closing-zone .site-footer::before { width: calc(100% - 40px); margin-bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-grid > *,
  .site-footer .footer-bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 150ms linear !important;
  }
}

/* =========================================================
   V10 — ONE GLOBAL SEARCH SYSTEM / HOME + INTERNAL PAGES
   ========================================================= */
body.catalog-search-open { overflow: hidden; }

/* Category cards — full-bleed image, rounded frame on every edge. */

/* Product results — compact rows inspired by the reference, but branded. */

/* Skeleton uses the exact destination structure to prevent layout jumps. */

@media (max-width: 1050px) {
}

@media (max-width: 760px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* ═════════════════════════════════════════════════════════════
   GLOBAL SEARCH — rendered by the shared header, so it lives in
   the shared stylesheet and is the only definition of itself.
   No !important anywhere: nothing competes with it any more.
   ═════════════════════════════════════════════════════════════ */

.catalog-search-modal {
  --s-navy: #191D22;
  --s-yellow: #D5222A;
  --s-muted: #7c8698;
  --s-ink: #4a5566;
  --s-line: rgba(25, 29, 34, .1);
  --s-cream: #f7f4ee;
  --s-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(14px, 4vh, 44px) clamp(12px, 3vw, 28px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.catalog-search-modal[hidden] { display: none; }
.catalog-search-modal.is-open { visibility: visible; opacity: 1; }

body.catalog-search-open { overflow: hidden; }

.catalog-search-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(4, 20, 49, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: default;
}

/* One sheet. Its height follows its content — no reserved band. */
.catalog-search-surface {
  position: relative;
  z-index: 1;
  width: min(100%, 1060px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(3, 29, 71, .04), 0 34px 80px rgba(3, 29, 71, .22);
  transform: translateY(-10px) scale(.988);
  transition: transform 280ms var(--s-ease);
}

.catalog-search-modal.is-open .catalog-search-surface { transform: none; }

.catalog-search-shell { display: block; }

/* ── Search bar ───────────────────────────────────────────── */

.catalog-global-form {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--s-line);
  border-radius: 28px 28px 0 0;
  background: #fff;
}

.catalog-global-field {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 20px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: #fbfaf7;
  /* Right in RTL: the icon anchors the field, the shortcut closes it. */
  flex-direction: row;
  transition: border-color 200ms var(--s-ease), background 200ms var(--s-ease), box-shadow 200ms var(--s-ease);
}

.catalog-global-field:focus-within {
  border-color: rgba(213, 34, 42, .55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(213, 34, 42, .13);
}

.catalog-global-field .fa-solid { flex: 0 0 auto; color: var(--s-muted); }

/* dir="auto" on the element decides per keystroke: Hebrew reads right to
   left, "Bosch" / "WD40" / "18V" read left to right. Nothing here forces it. */
.catalog-global-field input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--s-navy);
  font-size: 16.5px;
  font-weight: 600;
  outline: 0;
}
.catalog-global-field input::placeholder { color: #a4adbb; font-weight: 500; }
.catalog-global-field input::-webkit-search-cancel-button { display: none; }

.catalog-search-shortcut {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--s-line);
  border-radius: 8px;
  background: #fff;
  color: var(--s-muted);
  font-size: 11px;
  font-weight: 800;
}

.catalog-search-close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid var(--s-line);
  border-radius: 50%;
  background: #fff;
  color: var(--s-navy);
  cursor: pointer;
  transition: background 180ms var(--s-ease), transform 220ms var(--s-ease);
}
.catalog-search-close:hover { background: #f4f6fa; transform: rotate(90deg); }

/* ── Body ─────────────────────────────────────────────────────
   28px under the bar, nothing more. The panel grows with what it
   holds; only the overflow is capped so the sheet cannot run off
   the screen.
   ───────────────────────────────────────────────────────────── */

.catalog-search-body {
  max-height: min(66vh, 640px);
  padding: 28px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Grid gap rather than an adjacent-sibling margin: a hidden section is
   display:none, so it creates no track and no phantom 26px under the bar. */
.search-suggestions,
.search-results,
.search-loading {
  display: grid;
  align-content: start;
  gap: 26px;
}

/* ── Section headings ─────────────────────────────────────── */

.search-section-title,
.search-results-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.search-section-title h2,
.search-results-title h2 {
  margin: 3px 0 0;
  color: var(--s-navy);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.search-mini-kicker {
  color: var(--s-yellow);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .04em;
}
.search-section-title > a,
.search-results-title > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  color: var(--s-navy);
  font-size: 13px;
  font-weight: 800;
  transition: background 180ms var(--s-ease), border-color 180ms var(--s-ease);
}
.search-section-title > a:hover,
.search-results-title > a:hover { border-color: rgba(213, 34, 42, .5); background: rgba(213, 34, 42, .1); }

/* ── Category cards ───────────────────────────────────────────
   Every card the same height, the same image ratio, the same
   radius. The count sits clear of the title.
   ───────────────────────────────────────────────────────────── */

.search-category-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 12px;
}

.search-category-showcase > a,
.search-category-result {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--s-line);
  border-radius: 20px;
  background: #fff;
  transition: transform 220ms var(--s-ease), border-color 220ms var(--s-ease), box-shadow 220ms var(--s-ease);
}
.search-category-showcase > a:hover,
.search-category-result:hover {
  transform: translateY(-2px);
  border-color: rgba(213, 34, 42, .55);
  box-shadow: 0 14px 30px rgba(3, 29, 71, .1);
}

.search-category-thumb,
.search-category-result-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--s-cream);
}
.search-category-thumb img,
.search-category-result-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--s-ease);
}
.search-category-showcase > a:hover .search-category-thumb img,
.search-category-result:hover .search-category-result-thumb img { transform: scale(1.045); }

.search-category-card-copy,
.search-category-result-copy {
  display: grid;
  align-content: start;
  gap: 5px;
  /* 15px below the image for the title, and room at the end of the last line
     so the count clears the badge. */
  padding: 15px 8px 8px;
  padding-inline-end: 48px;
}
.search-category-card-copy strong,
.search-category-result-copy strong {
  color: var(--s-navy);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}
.search-category-card-copy small,
.search-category-result-copy small { color: var(--s-muted); font-size: 12.5px; font-weight: 600; }

/* Opposite side to the copy: in RTL the text runs from the right, so the
   badge sits bottom-left and never lands under the product count. */
.search-category-card-arrow {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(213, 34, 42, .16);
  color: var(--s-navy);
  font-size: 12px;
  transition: background 200ms var(--s-ease), transform 200ms var(--s-ease);
}
.search-category-showcase > a:hover .search-category-card-arrow,
.search-category-result:hover .search-category-card-arrow { background: var(--s-yellow); transform: translateX(-3px); }

/* ── Product results ──────────────────────────────────────────
   Two columns, never three: a third column would strand the last
   card in a narrow lane. Each row is horizontal — image, then
   copy, then price and cue — and every card is the same height.
   ───────────────────────────────────────────────────────────── */

.search-product-list,
.search-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}

.search-product-card {
  min-width: 0;
  border: 1px solid var(--s-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 200ms var(--s-ease), border-color 200ms var(--s-ease), box-shadow 200ms var(--s-ease);
}
.search-product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(213, 34, 42, .55);
  box-shadow: 0 14px 30px rgba(3, 29, 71, .11);
}

.search-product-link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 12px;
  color: inherit;
}

.search-product-media {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  padding: 8px;
  border-radius: 14px;
  background: var(--s-cream);
}
.search-product-media img {
  max-width: 100%;
  max-height: 100%;
  /* Packshots keep their proportions; nothing is stretched. */
  object-fit: contain;
  mix-blend-mode: multiply;
}

.search-product-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.search-product-category {
  width: fit-content;
  max-width: 100%;
  padding: 3px 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(213, 34, 42, .13);
  color: #8a6a1c;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-product-title,
.search-product-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--s-navy);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-product-meta {
  overflow: hidden;
  color: var(--s-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.search-product-price { color: var(--s-navy); font-size: 15px; font-weight: 950; }

.search-product-action {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(213, 34, 42, .16);
  color: var(--s-navy);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 200ms var(--s-ease), transform 200ms var(--s-ease);
}
/* Only the small cue turns yellow — the card itself stays white. */
.search-product-card:hover .search-product-action { background: var(--s-yellow); transform: translateX(-2px); }

/* ── Services ─────────────────────────────────────────────── */

.search-service-row { display: flex; flex-wrap: wrap; gap: 9px; }
.search-service-result {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: #fff;
  color: var(--s-navy);
  font-weight: 800;
  transition: border-color 180ms var(--s-ease), background 180ms var(--s-ease);
}
.search-service-result:hover { border-color: rgba(213, 34, 42, .55); background: rgba(213, 34, 42, .09); }
.search-service-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-yellow); }

/* ── Empty ────────────────────────────────────────────────── */

.search-empty { padding: 40px 20px; border-radius: 22px; background: #fbfaf7; text-align: center; }
.search-empty h2 { margin: 8px 0; color: var(--s-navy); font-size: 20px; font-weight: 950; }
.search-empty p { margin: 0; color: var(--s-ink); font-size: 14.5px; }
.search-empty-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--s-muted);
  box-shadow: 0 8px 20px rgba(3, 29, 71, .06);
}
.search-empty-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.search-empty-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 800;
}
.search-empty-actions .search-empty-call { background: var(--s-navy); color: #fff; }
.search-empty-actions a:not(.search-empty-call) { border: 1px solid var(--s-line); color: #128c4a; }

/* ── Skeletons mirror the real shapes, so nothing shifts ──── */

.search-loading-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 12px;
}
.search-loading-category-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 8px;
  border: 1px solid var(--s-line);
  border-radius: 20px;
}
.search-skeleton-media { aspect-ratio: 16 / 10; border-radius: 14px; }
.search-loading-category-copy { display: grid; gap: 8px; padding: 15px 8px 8px; }
.search-loading-product-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.search-loading-product-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--s-line);
  border-radius: 18px;
}
.search-skeleton-product-media { width: 76px; height: 76px; border-radius: 14px; }
.search-loading-product-copy { display: grid; gap: 6px; min-width: 0; }
.search-loading-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  .search-product-list,
  .search-product-grid,
  .search-loading-product-list { grid-template-columns: minmax(0, 1fr); }
}

/* Full screen on phones: the sheet becomes the whole viewport, so a search
   is a place you go rather than a card floating over the page. The surface is
   a column — the field is pinned at the top and only the results scroll. */
@media (max-width: 760px) {
  .catalog-search-modal {
    padding: 0;
    /* Only the body scrolls; the modal itself never does. */
    overflow: hidden;
  }

  .catalog-search-surface {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .catalog-search-shell {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .catalog-global-form {
    gap: 8px;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    border-radius: 0;
  }
  .catalog-global-field { height: 50px; padding: 0 15px; }
  /* 16px keeps iOS from zooming the viewport on focus. */
  .catalog-global-field input { font-size: 16px; }
  .catalog-search-shortcut { display: none; }
  .catalog-search-close { width: 44px; height: 44px; flex-basis: 44px; }

  .catalog-search-body {
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    padding: 22px 12px calc(20px + env(safe-area-inset-bottom));
  }
  .catalog-search-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }

  .search-section-title h2, .search-results-title h2 { font-size: 18px; }
  .search-category-showcase,
  .search-loading-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-search-modal,
  .catalog-search-surface,
  .search-category-showcase > a,
  .search-category-result,
  .search-product-card,
  .search-product-action { transition: none; transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   MOBILE PASS — header, drawer detail and footer. Shared by the
   homepage and every internal page, so it lives here.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .key-duplication-section {
}

  /* ── Header: 40 / 1fr / 40, so the logo is centred on the
        viewport and not pushed by the buttons. ─────────────── */
  .main-header {
    /* 44px tracks: the buttons must meet the touch-target minimum, and a
       40px track would clamp them however large the button asks to be. */
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 100px;
    padding: 0;
    padding-inline: 14px;
  }

  .main-header .mobile-menu-button,
  .main-header .search-trigger {
    width: 44px;
    height: 44px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(25, 29, 34, .12);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center ;
    justify-content: center !important;
  }Â 
  .main-header .search-trigger span { display: none; }

  /* ── Drawer links ─────────────────────────────────────── */
  .primary-nav-inner a {
    position: relative;
    min-height: 46px;
    border-radius: 12px;
    transition: background 180ms cubic-bezier(.22, 1, .36, 1), color 180ms ease;
  }
  .primary-nav-inner a .fa-solid,
  .primary-nav-inner a .fa-brands { transition: transform 180ms ease; }
  .primary-nav-inner a:active { background: rgba(213, 34, 42, .18); }
  .primary-nav-inner a:active .fa-solid { transform: translateX(-2px); }

  /* Current section: tinted, with a short yellow marker. */
  .primary-nav-inner .is-current {
    background: rgba(213, 34, 42, .1);
    color: var(--blue-900);
  }
  .primary-nav-inner .is-current::after {
    position: absolute;
    inset-block: 12px;
    inset-inline-start: 0;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: var(--yellow);
    content: "";
  }

  /* ── Footer: logo, description, two columns, contact, legal ── */
  /* The removed bottom bar used to supply the closing space on mobile, so the
     footer itself now carries it. */
  .site-closing-zone .site-footer { padding: 0 0 52px; }
  .site-closing-zone .site-footer::before { margin-bottom: 44px; }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 48px 20px 0;
  }

  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-brand img {
    width: 100px;
    height: auto;
    margin-inline: auto;
    margin-bottom: 6px;
  }
  .footer-brand p { max-width: 300px; margin-inline: auto; }

  .footer-grid h3 { font-size: 15px; }
  .footer-grid a,
  .footer-grid span { font-size: 13.5px; }

  /* The contact column spans the full width and leads with the number. */
  .footer-grid > div:last-of-type {
    grid-column: 1 / -1;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .footer-grid > div:last-of-type a:first-of-type {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.01em;
  }
  .footer-grid > div:last-of-type a:first-of-type .fa-solid { font-size: 15px; }

  .footer-bottom {
    margin-top: 28px;
    padding: 16px 20px 28px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .primary-nav { transition: opacity 120ms linear !important; }
  .primary-nav.is-opening .primary-nav-inner a,
  .primary-nav.is-opening .nav-title-inner,
  .primary-nav.is-opening .nav-close,
  .primary-nav.is-opening .nav-heading-copy p,
  .primary-nav.is-opening .nav-drawer-footer { animation: none !important; }
}

@media (max-width: 767px) {
  .mobile-menu-button,
  .search-trigger,
  .nav-close,
  .catalog-search-close,
  .shelf-nav,
  .pdp-carousel-nav {
    min-width: 44px;
    min-height: 44px;
  }
  .problem-list button,
  .catalog-mobile-pills a,
  .primary-nav-inner a {
    min-height: 44px;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .shelf-track,
  .pdp-carousel-track { scroll-behavior: auto; }
}

/* ═════════════════════════════════════════════════════════════
   KEY DUPLICATION — MOBILE
   A composition of its own, not the desktop layout stacked. No
   large numerals, no timeline rules: small icon rows that read as
   one process, with the machine back as the visual anchor.
   Desktop is untouched.
   ═════════════════════════════════════════════════════════════ */

/* The step icon only exists for phones. */
.key-dup-steps li > i { display: none; }

@media (max-width: 767px) {
  .key-duplication-section { padding: 40px 0 44px; }
  .key-content { padding-inline: 18px; }

  /* ── Eyebrow ────────────────────────────────────────────── */
  .key-dup-pill {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 12.5px;
  }

  /* ── Title: two lines, never three ──────────────────────── */
  .key-duplication-section h2 { margin-top: 14px; }
  .key-dup-line > span {
    font-size: clamp(38px, 11vw, 54px);
    line-height: .95;
    white-space: nowrap;
  }

  .key-dup-note {
    margin-top: 14px;
    color: #6f7787;
    font-size: 19px;
    line-height: 1.4;
  }
  /* One compact block rather than two stacked lines. */
  .key-dup-note br { display: none; }

  /* ── Benefits become pills ──────────────────────────────── */
  .key-dup-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }
  .key-dup-words span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding-inline: 12px;
    border: 1px solid rgba(25, 29, 34, .08);
    border-radius: 999px;
    background: #fff;
    color: var(--dup-blue);
    font-size: 13.5px;
    font-weight: 800;
  }
  /* The trailing full stop becomes the little yellow dot. */
  .key-dup-words span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dup-yellow);
    font-size: 0;
    text-indent: -9999px;
  }

  /* ── The machine, back as the anchor ────────────────────── */

  /* The portrait artwork is a blueprint texture, not a product shot — it
     belongs behind the section, at low contrast. */
  /* No glow behind it: the photograph is lit already. */

  /* ── Three compact rows, one process ────────────────────── */
  .key-dup-steps {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
  }
  .key-dup-steps li {
    display: grid;
    /* Explicit placement: auto-placement pushed the description into the
       44px icon column, where it wrapped to five lines. */
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 2px;
    min-height: 86px;
    padding: 14px 15px;
    border: 1px solid rgba(25, 29, 34, .07);
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
  }
  /* No numerals, and no rules between the steps. */
  .key-dup-steps li b { display: none; }
  .key-dup-steps li::before,
  .key-dup-steps li::after { display: none; }

  .key-dup-steps li > i {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(213, 34, 42, .22);
    border-radius: 50%;
    background: rgba(213, 34, 42, .12);
    color: var(--dup-blue);
  }
  .key-dup-steps li strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    color: var(--dup-blue);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
  }
  .key-dup-steps li small {
    grid-column: 2;
    grid-row: 2;
    display: block;
    color: #6f7787;
    font-size: 13.5px;
    line-height: 1.45;
  }

  /* ── CTA, right after the steps ─────────────────────────── */
  .key-dup-cta-row {
    display: grid;
    gap: 12px;
    margin-top: 18px;
  }
  .key-dup-cta {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    font-size: 17.5px;
    font-weight: 900;
    transition: transform 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms cubic-bezier(.22, 1, .36, 1);
  }
  .key-dup-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(213, 34, 42, .2); }
  .key-dup-cta:active { transform: scale(.98); }
  .key-dup-sep { display: none; }

  /* ── Phone and place on one compact row ─────────────────── */
  .key-dup-phone {
    justify-content: center;
    min-height: 44px;
    font-size: 16px;
    font-weight: 800;
  }
  .key-dup-place {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 800;
  }

  /* ── Motion: one short group, transform only ────────────── */
  .key-duplication-section.is-in .key-dup-words span,
  .key-duplication-section.is-in .key-dup-steps li {
    transition-duration: 280ms;
  }
  .key-duplication-section.is-in .key-dup-steps li:nth-child(1) { transition-delay: 120ms; }
  .key-duplication-section.is-in .key-dup-steps li:nth-child(2) { transition-delay: 148ms; }
  .key-duplication-section.is-in .key-dup-steps li:nth-child(3) { transition-delay: 176ms; }
  .key-duplication-section.is-in .key-dup-cta-row,
  .key-duplication-section.is-in .key-dup-place { transition-duration: 280ms; transition-delay: 210ms; }
}

/* The media element exists only for phones. An earlier rule turns it back on,
   leaving an invisible 668x613 absolute box over the desktop section that
   could swallow clicks — so desktop switches it off explicitly. */
@media (min-width: 768px) {
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .key-duplication-section * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .key-dup-cta:hover, .key-dup-cta:active { transform: none; }
}

/* Mobile baseline: desktop entrance states are always visible on phones.
   Low-specificity resets allow mobile-motion.css to own registered elements.
   Interactive answer layers and carousel state keep their own transitions. */
@media (max-width: 767px) {
  :where(
    .hero-eyebrow,
    .hero-title-line > span,
    .hero-content > p,
    .hero-actions,
    .hero-trust-items,
    .hero-trust-items span,
    .hero-media,
    .hero-media > .m-frame > :is(img, video),
    .hero-media > video.m-frame,
    .key-dup-pill,
    .key-dup-line > span,
    .key-dup-note,
    .key-dup-words,
    .key-dup-words span,
    .key-dup-steps > li,
    .key-dup-steps b,
    .key-dup-steps strong,
    .key-dup-steps small,
    .key-dup-cta-row,
    .key-dup-cta,
    .key-dup-phone,
    .key-dup-place,
    .problem-nav-head,
    .problem-nav-mark,
    .problem-nav-head h2,
    .problem-nav-head .m-mask > span,
    .problem-nav-sub,
    .problem-nav-rule,
    .problem-answer-card,
    .problem-answer-badge,
    .problem-nav.is-in .problem-answer-layer.is-intro .problem-answer-image,
    .problem-questions,
    .departments-head,
    .departments-head .m-mask > span,
    .departments-head p,
    .department-tile,
    .department-card,
    .departments-contact,
    .shelf-head,
    .shelf-head .m-mask > span,
    .shelf-track,
    .shelf-item,
    .shelf-footer,
    .shelf-stock,
    .hm-intro,
    .hm-eyebrow,
    .hm-intro h2 .m-mask > span,
    .hm-intro > p,
    .hm-media-frame,
    .hm-media-frame img,
    .hm-proofs,
    .hm-proofs li,
    .hm-phone,
    .hm-actions,
    .hm-more,
    .local-head,
    .local-eyebrow,
    .local-head h2 .m-mask > span,
    .local-head > p,
    .local-map,
    .local-map-tag,
    .local-panel,
    .local-store,
    .local-row,
    .local-line,
    .local-actions,
    .local-nav,
    .local-call,
    .local-whatsapp,
    .site-footer .footer-grid,
    .site-footer .footer-grid > *,
    .site-footer .footer-bottom
  ) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hero-media,
  .hero-media > .m-frame,
  .hero-media > .m-frame > :is(img, video),
  .hero-media > video.m-frame,
  .hero-workshop-pattern {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Touch feedback is interaction, not entrance choreography. */
  .hero-cta:active,
  .hero-ghost-cta:active,
  .key-dup-cta:active,
  .department-tile:active,
  .department-card:active,
  .problem-list button:active,
  .shelf-item-call:active,
  .shelf-item-details:active,
  .hm-actions a:active,
  .local-actions a:active {
    transform: scale(.985) !important;
    transition: transform 110ms ease !important;
  }
}

/* Hero video: final override for the media swap. The old hero used an image
   stage with offsets; the video must cover the whole hero band edge-to-edge.

   The height is a floor, not a fixed value. A fixed viewport height failed at
   both ends: on a short laptop the copy was taller than the band and the two
   buttons were cut off by the section's own overflow, and on a tall screen the
   band grew to over a thousand pixels with a quarter of it empty. Now the
   section is as tall as the screen up to a ceiling, and taller than that only
   if the copy itself needs the room - so nothing is ever cut and nothing is
   ever padded out to fill a display. */
.hero-banner {
  min-height: 0 !important;
  height: auto !important;
  background: #062e72 !important;
}

/* The floor lives on the grid, not on the section. Putting it on the section
   left the grid at its own intrinsic height inside a taller box, so the copy
   sat against the top with all the leftover space below it. The grid owns the
   height, the section wraps it, and the video behind is absolute either way.
   The padding is the breathing room that used to come from the leftover space
   of a fixed height, and the centring is now stated rather than inherited. */
.hero-grid {
  min-height: min(calc(100svh - 160px), 780px) !important;
  padding-block: clamp(40px, 5vh, 76px) !important;
  box-sizing: border-box !important;
  align-content: center !important;
}

.hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.hero-media > video.hero-video.m-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.hero-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .48) 100%),
    linear-gradient(90deg, rgba(3, 27, 67, .02) 0%, rgba(3, 27, 67, .2) 44%, rgba(3, 27, 67, .78) 100%);
  content: "";
  pointer-events: none;
}

.hero-workshop-pattern { display: none !important; }

/* .hero-grid {
  position: relative !important;
  z-index: 2;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  width: min(calc(100% - 96px), 1440px) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 0 clamp(42px, 7vh, 82px) !important;
  direction: rtl !important;
} */

.hero-content {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  justify-self: auto !important;
  overflow: visible !important;
}

.hero-rating {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(22px, 3vh, 34px);
  color: #fff;
  width: 100%;
  min-width: 0;
  text-align: right;
}

.hero-rating-stars {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  direction: ltr;
  color: var(--yellow);
  font-size: clamp(31px, 3vw, 46px);
  line-height: 1;
  text-shadow: 0 6px 18px rgba(0, 0, 0, .24);
}

.hero-rating p {
  margin: 0 !important;
  max-width: none !important;
  color: #fff !important;
  font-size: clamp(18px, 1.6vw, 28px) !important;
  font-weight: 800;
  line-height: 1.15 !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-rating strong { font-size: 1.16em; font-weight: 950; }

.hero-rating small {
  color: rgba(255, 255, 255, .74);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 700;
}

.hero-content h1 {
  max-width: 760px;
  font-size: clamp(60px, 5.0vw, 116px) !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
}

.hero-title-line {
  display: block !important;
  color: #fff !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
}

.hero-title-line > span {
  max-width: 100% !important;
  white-space: normal !important;
}

.hero-title-line.accent {
  margin-top: 8px !important;
  color: var(--yellow) !important;
}

.hero-content > p {
  max-width: 620px !important;
  margin-top: clamp(20px, 3vh, 30px) !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: clamp(18px, 1.5vw, 26px) !important;
  font-weight: 700;
  line-height: 1.55 !important;
}

.hero-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: min(100%, 560px) !important;
  margin-top: clamp(28px, 4vh, 42px) !important;
}

.hero-actions .hero-cta,
.hero-actions .hero-ghost-cta {
  width: 100% !important;
  min-height: clamp(62px, 6.5vh, 78px) !important;
  border-radius: 999px !important;
  font-size: clamp(16px, 1.2vw, 22px) !important;
  font-weight: 950 !important;
}

.hero-actions .hero-cta {
  color: #191D22 !important;
  border: 0 !important;
  background: var(--yellow) !important;
}

.hero-actions .hero-ghost-cta {
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .58) !important;
  background: rgba(0, 0, 0, .12) !important;
}

.hero-trust-items { display: none !important; }

@media (max-width: 760px) {
  .hero-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    min-height: 0 !important;
    height: calc(100svh - 64px) !important;
    overflow: hidden !important;
  }
  .hero-media > video.hero-video.m-frame { object-position: center center !important; }
  .hero-grid {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 22px 30px !important;
    box-sizing: border-box !important;
  }
  .hero-content {
    position: absolute !important;
    right: auto !important;
    bottom: 30px !important;
    left: 22px !important;
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    margin: 0 !important;
    transform: none !important;
  }
  .hero-rating { margin-bottom: 18px; }
  .hero-rating-stars { font-size: 28px; gap: 5px; }
  .hero-rating p { font-size: 18px !important; line-height: 1.2 !important; }
  .hero-rating small { font-size: 14px !important; }
  .hero-content h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(36px, 10.6vw, 50px) !important;
    line-height: .92 !important;
  }
  .hero-title-line.accent { margin-top: 4px !important; }
  .hero-content > p { font-size: 17px !important; line-height: 1.5 !important; }
  .hero-actions { width: 100% !important; gap: 12px !important; margin-top: 24px !important; margin-right: 0 !important;}
  .hero-actions .hero-cta,
  .hero-actions .hero-ghost-cta { min-height: 58px !important; font-size: 15px !important; }

  .hero-content p{
    margin-right: 0;
  }

}


/* =============================================================
   CUSTOMER REVIEWS — DARK BLUE SOCIAL PROOF
   ============================================================= */

.reviews-section {
  --review-active-scale: 1.08;
  --review-side-scale: .93;
  --review-near-scale: .98;
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 7vw, 120px) 0 clamp(90px, 7.4vw, 130px);
  background:
    radial-gradient(circle at 12% 16%, rgba(213, 34, 42, .12), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(255, 255, 255, .05), transparent 28%),
    linear-gradient(135deg, #191D22 0%, #191D22 45%, #191D22 100%);
  color: #fff;
}

.reviews-section::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  content: "";
}

.reviews-section::after {
  position: absolute;
  top: 42px;
  left: 42px;
  width: 150px;
  height: 96px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(213, 34, 42, .48) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: .36;
  content: "";
}

.reviews-inner {
  position: relative;
  z-index: 1;
}

.reviews-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: clamp(34px, 4vw, 72px);
  align-items: end;
}

.reviews-head {
  max-width: 880px;
}

.reviews-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.reviews-eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D5222A;
  box-shadow: 0 0 0 5px rgba(213, 34, 42, .14);
}

.reviews-head h2 {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(48px, 5.4vw, 84px);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.04em;
}

.reviews-head h2 em {
  color: #D5222A;
  font-style: normal;
}

.reviews-head > p {
  max-width: 720px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 500;
  line-height: 1.7;
}

.reviews-summary {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px 16px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 60px rgba(0, 18, 51, .24);
}

.reviews-google-mark {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #191D22;
  font-family: Arial, sans-serif;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(25, 29, 34, .08);
}

.reviews-google-mark {
  width: 56px;
  height: 56px;
  font-size: 25px;
}

.reviews-summary-copy {
  display: grid;
  gap: 3px;
}

.reviews-summary-copy strong {
  color: #191D22;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.reviews-summary-copy > span {
  color: #173860;
  font-size: 15px;
  font-weight: 850;
}

.reviews-summary-copy small {
  color: #7d8798;
  font-size: 12px;
  font-weight: 700;
}

.reviews-summary-link {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 15px;
  background: #D5222A;
  color: #191D22;
  font-size: 14px;
  font-weight: 900;
  transition:
    transform 220ms cubic-bezier(.22,1,.36,1),
    box-shadow 220ms ease,
    background 220ms ease;
  box-shadow: 0 12px 26px rgba(213, 34, 42, .24);
}

.reviews-summary-link:hover {
  background: #D5222A;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(213, 34, 42, .28);
}

.reviews-carousel {
  margin-top: clamp(44px, 4vw, 64px);
  margin-bottom: 0;
}

.reviews-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.reviews-carousel-copy {
  display: grid;
  gap: 4px;
}

.reviews-carousel-copy strong {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.reviews-carousel-copy span {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 700;
}

.reviews-nav-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-nav {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(.22,1,.36,1),
    background 220ms ease,
    opacity 220ms ease;
  backdrop-filter: blur(6px);
}

.reviews-nav:hover {
  background: rgba(213, 34, 42, .18);
  transform: translateY(-2px);
}

.reviews-nav:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

.reviews-viewport {
  overflow-x: auto;
  overflow-y: visible;
  padding: 18px 2px 26px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  cursor: grab;
  /* The page is Hebrew: the first review belongs on the right and the
     carousel advances leftward. Forcing ltr here laid the cards out in the
     opposite order to the way the page is read, so every swipe and every
     arrow went the wrong way. The slider's own script was already written
     for rtl - it reads scrollLeft through Math.abs() throughout. */
  direction: rtl;
}

.reviews-viewport::-webkit-scrollbar {
  display: none;
}

.reviews-viewport.is-dragging {
  cursor: grabbing;
}

.reviews-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding-inline: 2px;
  direction: rtl;
}

.review-card {
  position: relative;
  width: clamp(300px, 25vw, 360px);
  min-height: 280px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 20px 46px rgba(0, 18, 51, .18);
  transform: scale(var(--review-side-scale));
  transform-origin: center center;
  opacity: .62;
  filter: saturate(.82);
  transition:
    transform 420ms cubic-bezier(.22,1,.36,1),
    opacity 420ms ease,
    box-shadow 420ms ease,
    border-color 420ms ease,
    filter 420ms ease;
  scroll-snap-align: center;
  direction: rtl;
}

.review-card::before {
  position: absolute;
  inset: auto auto 0 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(213, 34, 42, .07);
  transform: translate(-35%, 35%);
  content: "";
}

.review-card::after {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(213, 34, 42,.18), rgba(255,255,255,0));
  opacity: .7;
  content: "";
}

.review-card.is-near {
  transform: scale(var(--review-near-scale));
  opacity: .82;
  filter: saturate(.94);
}

.review-card.is-active {
  transform: scale(var(--review-active-scale));
  opacity: 1;
  filter: saturate(1);
  border-color: rgba(213, 34, 42, .58);
  box-shadow: 0 34px 70px rgba(0, 18, 51, .34);
  z-index: 3;
}

.review-card:hover {
  border-color: rgba(213, 34, 42, .42);
}

.review-card-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
}

.review-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #191D22;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.review-person {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.review-person strong {
  overflow: hidden;
  color: #191D22;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-person span {
  color: #8992a1;
  font-size: 11px;
  font-weight: 700;
}

/* The star row used to sit between the name and the quote and carried the
   space above it. It is gone - the cards no longer show a rating - so the
   quote takes over that spacing and the card keeps its rhythm. */
.review-card blockquote {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
  color: #273a56;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.68;
}

.review-verified {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: #7f8998;
  font-size: 11px;
  font-weight: 700;
}

.review-verified i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D5222A;
}

.reviews-progress {
  height: 6px;
  margin-top: 6px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  overflow: hidden;
}

.reviews-progress span {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #D5222A 0%, #D5222A 100%);
  transition: width 260ms ease;
}

@media (min-width: 768px) {

  .reviews-section .reviews-eyebrow,
  .reviews-section .reviews-head h2 .m-mask > span,
  .reviews-section .reviews-head > p,
  .reviews-section .reviews-summary,
  .reviews-section .reviews-carousel {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 620ms cubic-bezier(.22,1,.36,1),
      transform 620ms cubic-bezier(.22,1,.36,1);
  }

  .reviews-section.is-in .reviews-eyebrow,
  .reviews-section.is-in .reviews-head h2 .m-mask > span,
  .reviews-section.is-in .reviews-head > p,
  .reviews-section.is-in .reviews-summary,
  .reviews-section.is-in .reviews-carousel {
    opacity: 1;
    transform: none;
  }

  .reviews-section.is-in .reviews-head h2 .m-mask > span {
    transition-delay: 70ms;
  }

  .reviews-section.is-in .reviews-head > p {
    transition-delay: 120ms;
  }

  .reviews-section.is-in .reviews-summary {
    transition-delay: 150ms;
  }

  .reviews-section.is-in .reviews-carousel {
    transition-delay: 200ms;
  }
}

@media (max-width: 1180px) {
  .reviews-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {

  .reviews-section {
    --review-active-scale: 1;
    --review-side-scale: 1;
    --review-near-scale: 1;
    padding: 62px 0 68px;
  }

  .reviews-section::before {
    background-size: 38px 38px;
  }

  .reviews-section::after {
    top: 18px;
    left: -22px;
    width: 110px;
    height: 76px;
    background-size: 15px 15px;
    opacity: .28;
  }

  .reviews-head h2 {
    margin-top: 14px;
    font-size: clamp(40px, 11vw, 56px);
    line-height: .96;
  }

  .reviews-head > p {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.58;
  }

  .reviews-summary {
    grid-template-columns: 48px 1fr;
    padding: 18px;
    border-radius: 20px;
  }

  .reviews-google-mark {
    width: 48px;
    height: 48px;
    font-size: 21px;
  }

  .reviews-summary-copy strong {
    font-size: 30px;
  }

  .reviews-carousel {
    margin-top: 32px;
  }

  .reviews-carousel-head {
    margin-bottom: 14px;
  }

  .reviews-carousel-copy strong {
    font-size: 18px;
  }

  .reviews-carousel-copy span {
    font-size: 13px;
  }

  .reviews-nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }

  /* Breaks the rail out of .site-container so it runs edge-to-edge —
     the classic centered-container escape: the parent is centered, so
     this cancels its inset exactly regardless of viewport width. */
  .reviews-viewport {
    width: 100vw;
    margin-inline: calc(50% - 50vw);  /* both sides — direction-agnostic even if an
       ancestor or this element itself overrides `direction` */
    padding: 10px 0 18px;
    scroll-padding-inline: 18px;
  }

  .reviews-track {
    gap: 12px;
    /* The scroll area is edge-to-edge (see .reviews-viewport above), but
       the resting card still lines up with the heading above it — zero
       padding here left it flush with the screen edge while the heading
       stayed on the page's normal 18px margin, reading as misaligned. */
    padding-inline: 18px;
  }

  .review-card,
  .review-card.is-active,
  .review-card.is-near {
    width: min(86vw, 330px);
    min-height: 250px;
    padding: 20px;
    transform: none;
    opacity: 1;
    filter: none;
    scroll-snap-align: start;
  }

  .review-card blockquote {
    font-size: 15px;
    line-height: 1.58;
  }

  .reviews-summary-link:active {
    transform: scale(.985) !important;
    transition: transform 110ms ease !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .reviews-section *,
  .reviews-section *::before,
  .reviews-section *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .review-card,
  .review-card.is-active,
  .review-card.is-near {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .reviews-section .reviews-eyebrow,
  .reviews-section .reviews-head h2 .m-mask > span,
  .reviews-section .reviews-head > p,
  .reviews-section .reviews-summary,
  .reviews-section .reviews-carousel {
    opacity: 1 !important;
    transform: none !important;
  }
}

.local-contact-v2 {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 7vw, 118px) 0;
  background:
    linear-gradient(rgba(25, 29, 34, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 29, 34, .035) 1px, transparent 1px),
    #f8f2e8;
  background-size: 52px 52px;
}

.local-contact-v2::before {
  position: absolute;
  top: 28px;
  left: 32px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(213, 34, 42, .42) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: .42;
  content: "";
}

.local-v2-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: clamp(70px, 7vw, 120px);
  align-items: center;
}

.local-v2-visual {
  position: relative;
  min-width: 0;
}

.local-v2-photo {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 34px;
  background: #e7e0d7;
  box-shadow: 0 26px 70px rgba(25, 29, 34, .13);
}

.local-v2-photo::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(25, 29, 34, 0) 55%,
      rgba(25, 29, 34, .15) 100%
    );
  content: "";
}

.local-v2-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.local-v2-photo-badge {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  color: #191D22;
  box-shadow: 0 10px 26px rgba(25, 29, 34, .11);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 850;
}

.local-v2-photo-badge svg {
  color: #D5222A;
}

.local-v2-info {
  position: absolute;
  top: 50%;
  right: -28px;
  z-index: 4;

  display: grid;

  width: min(292px, 45%);
  padding: 10px 20px;

  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 255, 255, .34) 42%,
      rgba(245, 249, 255, .24) 100%
    );

  box-shadow:
    0 26px 60px rgba(25, 29, 34, .16),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(255, 255, 255, .16);

  backdrop-filter:
    blur(22px)
    saturate(1.28)
    brightness(1.06);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.28)
    brightness(1.06);

  transform: translateY(-50%);
  overflow: hidden;
}

.local-v2-info::before {
  position: absolute;
  top: 0;
  left: 8%;
  width: 72%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .92),
      transparent
    );

  opacity: .9;
  pointer-events: none;
  content: "";
}

.local-v2-info::after {
  position: absolute;
  top: -70px;
  right: -55px;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .28),
      rgba(255, 255, 255, 0) 70%
    );

  pointer-events: none;
  content: "";
}

.local-v2-info-row {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;

  align-items: center;

  min-height: 88px;
  padding: 13px 0;
}

.local-v2-info-row + .local-v2-info-row {
  border-top: 1px solid rgba(255, 255, 255, .42);
}

.local-v2-info-icon {
  display: grid;

  width: 40px;
  height: 40px;

  place-items: center;

  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .46),
      rgba(255, 255, 255, .22)
    );

  color: #191D22;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .70),
    0 5px 14px rgba(25, 29, 34, .07);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.local-v2-info-row div {
  display: grid;
  gap: 3px;
}

.local-v2-info-row small {
  color: rgba(62, 78, 103, .72);
  font-size: 11px;
  font-weight: 800;
}

.local-v2-info-row strong,
.local-v2-info-row a {
  color: #191D22;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.local-v2-info-row span:not(.local-v2-info-icon) {
  color: rgba(62, 76, 98, .78);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.local-v2-content {
  display: grid;
  justify-items: start;
  align-content: center;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.local-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: #191D22;
  font-size: 14px;
  font-weight: 850;
}

.local-v2-eyebrow svg {
  color: #191D22;
}

.local-v2-eyebrow::after {
  width: 28px;
  height: 3px;
  margin-inline-start: 8px;
  border-radius: 999px;
  background: #D5222A;
  content: "";
}

.local-v2-content h2 {
  max-width: 650px;
  margin: 22px 0 0;
  color: #191D22;
  font-size: clamp(46px, 4.6vw, 78px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.035em;
}

.local-v2-content h2 em {
  display: block;
  margin-top: 4px;
  color: #D5222A;
  font-style: normal;
}

.local-v2-lead {
  max-width: 600px;
  margin: 25px 0 0;
  color: #5e6879;
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 500;
  line-height: 1.65;
}

.local-v2-divider {
  display: grid;
  grid-template-columns: minmax(40px, 130px) 30px minmax(40px, 130px);
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin-top: 30px;
  color: #D5222A;
}

.local-v2-divider span {
  height: 1px;
  background: rgba(25, 29, 34, .13);
}

.local-v2-actions {
  display: grid;
  width: min(100%, 590px);
  gap: 11px;
  margin-top: 30px;
}

.local-v2-map,
.local-v2-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 900;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 220ms ease,
    background 220ms ease;
}

.local-v2-map {
  background: #D5222A;
  color: #191D22;
  box-shadow: 0 13px 30px rgba(213, 34, 42, .17);
}

.local-v2-map:hover {
  transform: translateY(-2px);
  background: #D5222A;
  box-shadow: 0 16px 34px rgba(213, 34, 42, .24);
}

.local-v2-call {
  background: #191D22;
  color: #fff;
  box-shadow: 0 12px 26px rgba(25, 29, 34, .13);
}

.local-v2-call:hover {
  transform: translateY(-2px);
  background: #032f72;
}

.local-v2-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: #168b45;
  font-size: 15px;
  font-weight: 850;
}

.local-v2-whatsapp:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.local-v2-bottom-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  gap: 13px;
  align-items: center;
  width: min(100%, 590px);
  min-height: 96px;
  margin-top: 32px;
  padding: 15px 18px;
  border: 1px solid rgba(25, 29, 34, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 12px 35px rgba(25, 29, 34, .055);
}

.local-v2-bottom-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #191D22;
  color: #fff;
}

.local-v2-bottom-card div {
  display: grid;
  gap: 3px;
}

.local-v2-bottom-card strong {
  color: #191D22;
  font-size: 16px;
  font-weight: 900;
}

.local-v2-bottom-card div span {
  color: #72757B;
  font-size: 13px;
  font-weight: 600;
}

.local-v2-parking {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid #191D22;
  border-radius: 50%;
  color: #191D22;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .local-v2-inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
    gap: 52px;
  }

}

@media (max-width: 900px) {
  .local-contact-v2 {
    padding: 64px 0;
  }

  .local-v2-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .local-v2-visual {
    display: grid;
    gap: 14px;
  }

  .local-v2-photo {
    width: 100%;
    aspect-ratio: 4 / 3.5;
    border-radius: 24px;
  }

  .local-v2-photo img {
    object-position: center 38%;
  }

  /* The info card pulls up over the photo's bottom 46px — exactly where
     this badge sits (bottom: 22px), so the two collided. The full address
     is already the first line of the card right below, so the badge is
     dropped here rather than fought with. */
  .local-v2-photo-badge {
    display: none;
  }

  .local-v2-info {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 26px);
    margin: -46px auto 0;
    padding: 8px 15px;
    border-radius: 21px;
    transform: none;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, .72),
        rgba(255, 255, 255, .48)
      );

    backdrop-filter:
      blur(20px)
      saturate(1.20);

    -webkit-backdrop-filter:
      blur(20px)
      saturate(1.20);
  }

  .local-v2-info-row {
    min-height: 76px;
  }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .local-v2-info {
    transition:
      transform 420ms cubic-bezier(.22, 1, .36, 1),
      box-shadow 420ms ease,
      border-color 420ms ease;
  }

  .local-v2-visual:hover .local-v2-info {
    transform: translateY(-50%) translateX(-4px);
    border-color: rgba(255, 255, 255, .62);

    box-shadow:
      0 30px 70px rgba(25, 29, 34, .20),
      inset 0 1px 0 rgba(255, 255, 255, .82);
  }
}

@media (max-width: 900px) {
  .local-v2-content {
    width: 100%;
  }

  .local-v2-content h2 {
    max-width: 650px;
    font-size: clamp(42px, 10vw, 65px);
  }

  .local-v2-actions,
  .local-v2-bottom-card {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 600px) {
  .local-contact-v2 {
    padding: 46px 0 50px;
    background-size: 38px 38px;
  }

  .local-contact-v2 .site-container {
    width: calc(100% - 28px);
  }

  .local-v2-inner {
    gap: 30px;
  }

  .local-v2-photo {
    aspect-ratio: 4 / 4.15;
    border-radius: 20px;
  }

  .local-v2-photo-badge {
    right: 12px;
    bottom: 12px;
    min-height: 36px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .local-v2-eyebrow {
    font-size: 12px;
  }

  .local-v2-content h2 {
    margin-top: 14px;
    font-size: clamp(39px, 11.4vw, 52px);
  }

  .local-v2-lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.55;
  }

  .local-v2-divider {
    margin-top: 22px;
  }

  .local-v2-actions {
    gap: 8px;
    margin-top: 22px;
  }

  .local-v2-map,
  .local-v2-call {
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
  }

  .local-v2-bottom-card {
    min-height: 82px;
    margin-top: 22px;
    padding: 12px 14px;
  }
}

.local-contact-v2 {
  --contact-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.local-contact-v2 .local-v2-eyebrow,
.local-contact-v2 .local-v2-content h2,
.local-contact-v2 .local-v2-lead,
.local-contact-v2 .local-v2-divider,
.local-contact-v2 .local-v2-photo,
.local-contact-v2 .local-v2-info,
.local-contact-v2 .local-v2-info-row,
.local-contact-v2 .local-v2-map,
.local-contact-v2 .local-v2-call,
.local-contact-v2 .local-v2-whatsapp,
.local-contact-v2 .local-v2-bottom-card {
  will-change: transform, opacity;
}

@media (min-width: 901px) {

  .local-contact-v2.contact-motion-ready .local-v2-eyebrow {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-content h2 {
    opacity: 0;
    transform: translate3d(38px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-lead {
    opacity: 0;
    transform: translate3d(26px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-divider {
    opacity: 0;
    transform: scaleX(.72);
    transform-origin: right center;
  }

  .local-contact-v2.contact-motion-ready .local-v2-photo {
    opacity: .76;
    transform: translate3d(-24px, 10px, 0) scale(.985);
  }

  .local-contact-v2.contact-motion-ready .local-v2-info {
    opacity: 0;
    transform:
      translate3d(34px, -50%, 0)
      scale(.975);
  }

  .local-contact-v2.contact-motion-ready .local-v2-info-row {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-map,
  .local-contact-v2.contact-motion-ready .local-v2-call,
  .local-contact-v2.contact-motion-ready .local-v2-whatsapp {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-bottom-card {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
  }

}

@media (min-width: 901px) {

  .local-contact-v2.contact-motion-in .local-v2-eyebrow,
  .local-contact-v2.contact-motion-in .local-v2-content h2,
  .local-contact-v2.contact-motion-in .local-v2-lead,
  .local-contact-v2.contact-motion-in .local-v2-divider,
  .local-contact-v2.contact-motion-in .local-v2-photo,
  .local-contact-v2.contact-motion-in .local-v2-info,
  .local-contact-v2.contact-motion-in .local-v2-info-row,
  .local-contact-v2.contact-motion-in .local-v2-map,
  .local-contact-v2.contact-motion-in .local-v2-call,
  .local-contact-v2.contact-motion-in .local-v2-whatsapp,
  .local-contact-v2.contact-motion-in .local-v2-bottom-card {
    opacity: 1;
  }

  .local-contact-v2.contact-motion-in .local-v2-eyebrow {
    transform: none;
    transition:
      opacity 520ms var(--contact-motion-ease),
      transform 620ms var(--contact-motion-ease);
  }

  .local-contact-v2.contact-motion-in .local-v2-content h2 {
    transform: none;
    transition:
      opacity 620ms var(--contact-motion-ease) 60ms,
      transform 760ms var(--contact-motion-ease) 60ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-lead {
    transform: none;
    transition:
      opacity 560ms var(--contact-motion-ease) 130ms,
      transform 680ms var(--contact-motion-ease) 130ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-divider {
    transform: scaleX(1);
    transition:
      opacity 480ms ease 200ms,
      transform 760ms var(--contact-motion-ease) 200ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-photo {
    transform: none;
    transition:
      opacity 720ms ease 100ms,
      transform 920ms var(--contact-motion-ease) 100ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info {
    transform: translateY(-50%);
    transition:
      opacity 650ms ease 220ms,
      transform 820ms var(--contact-motion-ease) 220ms,
      box-shadow 420ms ease,
      border-color 420ms ease;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row {
    transform: none;
    transition:
      opacity 440ms ease,
      transform 560ms var(--contact-motion-ease);
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(1) {
    transition-delay: 330ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(2) {
    transition-delay: 390ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(3) {
    transition-delay: 450ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(4) {
    transition-delay: 510ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-map {
    transform: none;
    transition:
      opacity 480ms ease 300ms,
      transform 580ms var(--contact-motion-ease) 300ms,
      background 220ms ease,
      box-shadow 220ms ease;
  }

  .local-contact-v2.contact-motion-in .local-v2-call {
    transform: none;
    transition:
      opacity 480ms ease 360ms,
      transform 580ms var(--contact-motion-ease) 360ms,
      background 220ms ease;
  }

  .local-contact-v2.contact-motion-in .local-v2-whatsapp {
    transform: none;
    transition:
      opacity 460ms ease 420ms,
      transform 560ms var(--contact-motion-ease) 420ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-bottom-card {
    transform: none;
    transition:
      opacity 520ms ease 480ms,
      transform 680ms var(--contact-motion-ease) 480ms;
  }

}

@media (max-width: 900px) {

  .local-contact-v2.contact-motion-ready .local-v2-photo {
    opacity: .70;
    transform: translate3d(-26px, 10px, 0) scale(.975);
  }

  .local-contact-v2.contact-motion-ready .local-v2-info {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.975);
  }

  .local-contact-v2.contact-motion-ready .local-v2-info-row {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-eyebrow {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-content h2 {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-lead {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }

  .local-contact-v2.contact-motion-ready .local-v2-divider {
    opacity: 0;
    transform: scaleX(.72);
    transform-origin: right center;
  }

  .local-contact-v2.contact-motion-ready .local-v2-map,
  .local-contact-v2.contact-motion-ready .local-v2-call,
  .local-contact-v2.contact-motion-ready .local-v2-whatsapp,
  .local-contact-v2.contact-motion-ready .local-v2-bottom-card {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

}

@media (max-width: 900px) {

  .local-contact-v2.contact-motion-in .local-v2-photo {
    opacity: 1;
    transform: none;

    transition:
      opacity 600ms ease,
      transform 760ms var(--contact-motion-ease);
  }

  .local-contact-v2.contact-motion-in .local-v2-info {
    opacity: 1;
    transform: none;

    transition:
      opacity 520ms ease 100ms,
      transform 680ms var(--contact-motion-ease) 100ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row {
    opacity: 1;
    transform: none;

    transition:
      opacity 380ms ease,
      transform 480ms var(--contact-motion-ease);
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(1) {
    transition-delay: 180ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(2) {
    transition-delay: 220ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(3) {
    transition-delay: 260ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-info-row:nth-child(4) {
    transition-delay: 300ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-eyebrow {
    opacity: 1;
    transform: none;

    transition:
      opacity 420ms ease 170ms,
      transform 540ms var(--contact-motion-ease) 170ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-content h2 {
    opacity: 1;
    transform: none;

    transition:
      opacity 520ms ease 220ms,
      transform 650ms var(--contact-motion-ease) 220ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-lead {
    opacity: 1;
    transform: none;

    transition:
      opacity 480ms ease 280ms,
      transform 600ms var(--contact-motion-ease) 280ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-divider {
    opacity: 1;
    transform: scaleX(1);

    transition:
      opacity 420ms ease 320ms,
      transform 620ms var(--contact-motion-ease) 320ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-map {
    opacity: 1;
    transform: none;

    transition:
      opacity 420ms ease 350ms,
      transform 520ms var(--contact-motion-ease) 350ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-call {
    opacity: 1;
    transform: none;

    transition:
      opacity 420ms ease 400ms,
      transform 520ms var(--contact-motion-ease) 400ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-whatsapp {
    opacity: 1;
    transform: none;

    transition:
      opacity 400ms ease 450ms,
      transform 500ms var(--contact-motion-ease) 450ms;
  }

  .local-contact-v2.contact-motion-in .local-v2-bottom-card {
    opacity: 1;
    transform: none;

    transition:
      opacity 440ms ease 500ms,
      transform 580ms var(--contact-motion-ease) 500ms;
  }

}

.local-v2-map:active,
.local-v2-call:active {
  transform: scale(.98) !important;
}

.local-v2-whatsapp:active {
  transform: translateY(1px) scale(.985) !important;
}

@media (prefers-reduced-motion: reduce) {

  .local-contact-v2 *,
  .local-contact-v2 *::before,
  .local-contact-v2 *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .local-contact-v2 .local-v2-eyebrow,
  .local-contact-v2 .local-v2-content h2,
  .local-contact-v2 .local-v2-lead,
  .local-contact-v2 .local-v2-divider,
  .local-contact-v2 .local-v2-photo,
  .local-contact-v2 .local-v2-info,
  .local-contact-v2 .local-v2-info-row,
  .local-contact-v2 .local-v2-map,
  .local-contact-v2 .local-v2-call,
  .local-contact-v2 .local-v2-whatsapp,
  .local-contact-v2 .local-v2-bottom-card {
    opacity: 1 !important;
    transform: none !important;
  }

  @media (min-width: 901px) {
    .local-contact-v2 .local-v2-info {
      transform: translateY(-50%) !important;
    }
  }
}

.header-contact-link--icon {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(25, 29, 34, .12);
  border-radius: 999px;
  background: #fff;
}

.header-contact-link--icon .fa-brands,
.header-contact-link--icon svg {
  margin: 0;
}

.brand-mark {
  width: 136px;
  height: 74px;
  overflow: visible;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.site-header.is-scrolled .brand-mark {
  width: 124px;
  height: 66px;
}

.site-closing-zone .footer-brand img,
.site-footer .footer-brand img {
  filter: brightness(0) invert(1);
  opacity: .98;
}

@media (max-width: 1180px) {
  .header-contact-link--icon {
    display: inline-grid;
  }
}

@media (max-width: 760px) {
  .brand-mark,
  .site-header.is-scrolled .brand-mark {
    width: 112px;
    height: 60px;
  }
}

/* =========================================================================
   Key-duplication section: the visual is now a framed photograph of the
   lock wall instead of a cut-out render. A raw square photo would sit as a
   hard rectangle on the section's soft ivory gradient, so it is mounted:
   ivory mat, gold hairline, navy lift, and corner brackets echoing the
   section's own promise - מהיר / מדויק / במקום.
   The frame keeps the .key-dup-visual-image class, so the existing entrance
   and hover motion now moves the whole mounted card as one object.
   ========================================================================= */
.key-dup-visual-frame {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(213, 34, 42, .5);
  border-radius: 28px;
  background:
    linear-gradient(155deg, #fffaf1 0%, var(--dup-ivory, #f9eee0) 52%, #f2e3d1 100%);
  box-shadow:
    0 30px 54px rgba(25, 29, 34, .17),
    0 6px 14px rgba(25, 29, 34, .09),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  /* The cut-out render needed a drop-shadow; a mounted card carries its own. */
  filter: none;
  user-select: none;
}

.key-dup-visual-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 19px;
  object-fit: cover;
  object-position: center;
  box-shadow: inset 0 0 0 1px rgba(25, 29, 34, .09);
}

/* Corner brackets: two thin gold angles, opposite corners, sitting just
   outside the frame like a viewfinder. */
.key-dup-visual-frame::before,
.key-dup-visual-frame::after {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(213, 34, 42, .78);
  content: "";
  pointer-events: none;
}

.key-dup-visual-frame::before {
  top: -9px;
  right: -9px;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 16px 0 0;
}

.key-dup-visual-frame::after {
  bottom: -9px;
  left: -9px;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 16px;
}

@media (max-width: 1200px) {
  .key-dup-visual-frame { padding: 9px; border-radius: 24px; }
  .key-dup-visual-photo { border-radius: 16px; }
}

@media (max-width: 767px) {
  /* Mobile shows the same lock wall as desktop, mounted the same way so the
     section reads as one idea on both. Kept as a background image: this
     element has no <img> of its own. */
}
.department-tile-label {
    display: none !important;
}

/* =========================================================================
   LAPTOP / DESKTOP MOTION — hero entrance + key-duplication image.
   Scoped to >=768px. Mobile has its own owner in mobile-motion.js and is
   never reached from here.
   ========================================================================= */
@media (min-width: 768px) {

  /* ── Hero ────────────────────────────────────────────────────────────
     A large screen can carry longer travel and a wider sequence than a
     phone: the copy sits over a full-bleed video, so the entrance is built
     as one confident sweep rather than a series of small nudges. Distances
     are roughly doubled and the beats are spaced further apart, which reads
     as deliberate at this size instead of nervous. */
  .hero-rating {
    opacity: 0;
    transform: translate3d(18px, 10px, 0);
    transition:
      opacity 620ms var(--m-ease) 100ms,
      transform 620ms var(--m-ease) 100ms;
  }
  .hero-banner.is-in .hero-rating { opacity: 1; transform: none; }

  /* The masked lines keep their reveal, but slower and further apart so the
     three lines land as three distinct statements. */
  .hero-title-line > span {
    transition: transform 940ms cubic-bezier(.16, .84, .24, 1) var(--m-delay, 0ms);
  }
  .hero-title-line:nth-child(1) > span { --m-delay: 240ms; }
  .hero-title-line:nth-child(2) > span { --m-delay: 360ms; }
  .hero-title-line:nth-child(3) > span { --m-delay: 480ms; }

  .hero-content > p {
    transform: translate3d(22px, 0, 0);
    transition:
      opacity 700ms var(--m-ease) 660ms,
      transform 700ms var(--m-ease) 660ms;
  }

  /* Buttons arrive last, each on its own beat, with a touch of scale so they
     settle rather than simply appear. */
  .hero-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-actions > a {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.97);
    transition:
      opacity 640ms var(--m-ease) var(--m-delay, 0ms),
      transform 640ms var(--m-ease) var(--m-delay, 0ms);
  }
  .hero-actions > a:nth-child(1) { --m-delay: 800ms; }
  .hero-actions > a:nth-child(2) { --m-delay: 890ms; }
  .hero-banner.is-in .hero-actions > a { opacity: 1; transform: none; }

  /* Hover must not inherit the entrance delay. */
  .hero-banner.is-in .hero-actions > a:hover {
    transition: transform 220ms var(--m-ease), box-shadow 220ms var(--m-ease), background 220ms var(--m-ease);
  }

  /* The video itself stays a still frame - no camera, no parallax, no zoom. */
  .hero-media,
  .hero-media > .m-frame,
  .hero-media > video.m-frame {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }

  /* ── Key duplication: the photograph ─────────────────────────────────
     The responsive rebuild stripped every animation off this image, so it
     was the one element in the section that simply popped into place while
     the copy beside it resolved in sequence. It now opens with the section:
     a calm rise out of a slight scale, timed to lead the copy by a beat. */
  .key-dup-visual-frame {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.965);
    transition:
      opacity 860ms var(--m-ease) 120ms,
      transform 860ms cubic-bezier(.16, .84, .24, 1) 120ms;
  }

  .key-duplication-section.is-in .key-dup-visual-frame {
    opacity: 1;
    transform: none;
  }

  /* The yellow glow behind it follows, a little later and a little softer. */
  .key-dup-visual-glow {
    opacity: 0;
    transition: opacity 900ms var(--m-ease) 320ms;
  }
  .key-duplication-section.is-in .key-dup-visual-glow { opacity: 1; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .hero-rating,
  .hero-content > p,
  .hero-actions > a,
  .key-dup-visual-frame,
  .key-dup-visual-glow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Experience seal - contact section
   Stamped on the photograph of the shop, diagonally opposite the address
   badge. A seal rather than another line of text: the number is the message,
   and a circle reads as a mark of trade rather than as a caption. Navy and
   gold are the hero's own two colours, so it belongs to the page.
   ========================================================================= */
.local-v2-seal {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 3;
  display: grid;
  width: 122px;
  height: 122px;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 32% 26%, #0d55b4 0%, #062e72 58%, #041f52 100%);
  box-shadow:
    0 20px 44px rgba(25, 29, 34, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* The stitched gold ring. Dashed rather than solid so the seal reads as
   stamped onto the photograph instead of pasted over it. */
.local-v2-seal::before {
  position: absolute;
  inset: 8px;
  border: 1.5px dashed rgba(213, 34, 42, .58);
  border-radius: 50%;
  content: "";
}

.local-v2-seal b {
  color: var(--yellow, #D5222A);
  font-size: 36px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
}

.local-v2-seal b i {
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  vertical-align: super;
}

.local-v2-seal em {
  margin-top: 6px;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .03em;
}

@media (max-width: 900px) {
  /* The photo is shorter here and the info card pulls up over its bottom
     edge, so the seal moves in with it and loses a little weight. */
  .local-v2-seal {
    top: 16px;
    left: 16px;
    width: 98px;
    height: 98px;
  }

  .local-v2-seal b { font-size: 29px; }
  .local-v2-seal b i { font-size: 17px; }
  .local-v2-seal em { margin-top: 4px; font-size: 10.5px; }
}

/* =========================================================================
   Brand lockup - the tenure mark in the header
   The logo used to be the grid item for the "brand" area; that role moves to
   this wrapper so the credential can sit beside the mark without taking a
   column of its own. Every existing .brand-mark rule still applies: as a flex
   child its grid-area / justify-self are simply inert, its width and height
   (including the is-scrolled sizes) are not.
   ========================================================================= */
.brand-lockup {
  grid-area: brand;
  justify-self: end;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* store.css still carries order: -1 on .brand-mark from the old flex header.
   Inside this lockup the arrangement is stated explicitly rather than left to
   that leftover: credential first, mark last, so the gold rule falls between
   the two and the logo keeps the outer edge. */
.brand-lockup .brand-tenure { order: 0; }
.brand-lockup .brand-mark { order: 1; }

/* A gold hairline, then the years - read against the logo, not floating near
   it. Set in the page's own navy and gold, so it belongs to the mark. */
.brand-tenure {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin-right: 4px;
  padding-right: 13px;
  border-right: 2px solid var(--yellow, #D5222A);
  direction: rtl;
  text-align: right;
  line-height: 1;
  white-space: nowrap;
}

.brand-tenure b {
  color: #191D22;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.brand-tenure b i {
  color: var(--yellow, #D5222A);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  vertical-align: super;
}

.brand-tenure em {
  color: rgba(25, 29, 34, .72);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
}

/* The header compacts on scroll; the mark compacts with it rather than
   staying the only thing at full size. */
.site-header.is-scrolled .brand-tenure b { font-size: 23px; }
.site-header.is-scrolled .brand-tenure em { font-size: 10.5px; }

@media (max-width: 760px) {
  /* The column is narrow here and the logo is centred in it. Taking the
     credential out of the flow keeps the logo on the exact centre line it
     has always had - the mark floats into the empty space beside it rather
     than pushing it across. */
  .brand-lockup {
    position: relative;
    justify-self: center;
  }

  .brand-tenure {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 11px;
    padding-right: 9px;
    border-right-width: 1.5px;
  }

  .brand-tenure b,
  .site-header.is-scrolled .brand-tenure b { font-size: 19px; }

  .brand-tenure em,
  .site-header.is-scrolled .brand-tenure em { font-size: 8.5px; letter-spacing: 0; }
}

/* Tablet and small desktop. The brand column is a fixed 140/130px there -
   exactly the logo and nothing more - so the credential had nowhere to go and
   sat on top of the search field. The column takes back the width the mark
   needs and the search field's maximum gives it up: the field is a
   placeholder pill well above its minimum at these widths, the logo and the
   contact shortcuts are not. */
@media (min-width: 921px) and (max-width: 1180px) {
  .main-header { grid-template-columns: minmax(230px, 1fr) minmax(330px, 442px) 208px; }
}

@media (min-width: 761px) and (max-width: 920px) {
  .main-header { grid-template-columns: minmax(0, 1fr) minmax(272px, 360px) 208px; }
}

/* Narrow phones. The logo stays on its centre line, so the space left of it
   is what it is: the mark tightens to fit rather than pushing anything. */
@media (max-width: 380px) {
  .brand-tenure {
    margin-right: 8px;
    padding-right: 7px;
  }

  .brand-tenure b,
  .site-header.is-scrolled .brand-tenure b { font-size: 17px; }

  .brand-tenure b i { font-size: 11px; }

  .brand-tenure em,
  .site-header.is-scrolled .brand-tenure em { font-size: 7.5px; }
}

/* Below this the header is three tight columns and the logo needs the room
   more than the credential does; the nav drawer, the section copy and the
   seal on the shopfront carry it from here. */
@media (max-width: 335px) {
  .brand-tenure { display: none; }
}

/* =========================================================================
   Review sources
   The reviews now come from more than one platform, so each card says where
   it was written and the summary card lists the platforms rather than one.
   The chip carries the platform, the note under the quote repeats it in
   words, and the corner wash tints the card to match - three quiet signals
   instead of one grey letter.
   ========================================================================= */
/* The mark in the summary card. The reviews no longer name the platform they
   were written on, so the circle holds a star in the same gold as the stars
   on the cards rather than a platform initial. */
.reviews-summary-star {
  color: var(--yellow, #D5222A);
  font-size: 27px;
  line-height: 1;
}

.reviews-summary-note {
  grid-column: 1 / -1;
  color: #7d8798;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .reviews-summary-star { font-size: 23px; }
}

/* =========================================================================
   Legal pages and footer legal links
   The two documents reuse the long-form reading layout the accessibility
   statement already had; only what they add on top of it is defined here -
   the data tables that say, field by field, what the site stores.
   ========================================================================= */
.legal-table-wrap {
  margin: 14px 0 4px;
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(25, 29, 34, .12);
  -webkit-overflow-scrolling: touch;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  text-align: right;
}

.legal-table th,
.legal-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(25, 29, 34, .1);
  vertical-align: top;
  line-height: 1.55;
}

.legal-table thead th {
  background: rgba(25, 29, 34, .05);
  color: #191D22;
  font-weight: 900;
  white-space: nowrap;
}

.legal-table tbody td:first-child {
  color: #191D22;
  font-weight: 800;
}

.legal-table tbody td { color: #44506a; }
.legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-note {
  margin: 14px 0 0 !important;
  padding: 13px 15px;
  border-radius: 14px;
  border-inline-start: 3px solid var(--yellow, #D5222A);
  background: rgba(213, 34, 42, .1);
  color: #4a3a12 !important;
  font-size: 15px !important;
}

.legal-page .a11y-statement-block h2 em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--yellow, #D5222A);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* One quiet row of links inside the footer's own box. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 40px;
}

.footer-legal a {
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  font-weight: 700;
  transition: color 200ms ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--yellow, #D5222A); }

/* On a phone a four-column table has about 60px per column: one word per
   line, and the last column falls off the edge. Each row becomes its own
   block instead, every value labelled by the header it belonged to. Reading
   a policy should not require sideways scrolling. */
@media (max-width: 640px) {
  .legal-table-wrap { overflow-x: visible; }

  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table td {
    display: block;
    width: 100%;
  }

  .legal-table thead { display: none; }

  .legal-table tbody tr {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(25, 29, 34, .1);
  }

  .legal-table tbody tr:last-child { border-bottom: 0; }

  .legal-table tbody td {
    padding: 0 0 9px;
    border: 0;
    font-size: 14.5px;
  }

  .legal-table tbody tr td:last-child { padding-bottom: 0; }

  .legal-table tbody td::before {
    display: block;
    margin-bottom: 1px;
    color: #8a93a6;
    font-size: 11px;
    font-weight: 800;
    content: attr(data-label);
  }
}

@media (max-width: 760px) {
  .footer-legal { gap: 9px 20px; margin-top: 30px; }
  .footer-legal a { font-size: 13px; }
}

/* =========================================================================
   Legal documents — privacy, terms, accessibility
   No hero and no illustration: the page opens on its title. What a long
   document needs instead is orientation, so the space a hero would have
   taken is given to a reading progress bar, a sticky index that follows
   where you are, and sections that arrive as you reach them.
   ========================================================================= */
/* Above the header, not under it. The header is sticky at z-index 1000, so
   anything below that value is hidden behind it the moment the page scrolls -
   which is exactly when a progress bar has something to say. It rides the top
   3px of the viewport, the way a reading indicator is expected to. */
.legal-progress {
  position: sticky;
  top: 0;
  z-index: 1001;
  height: 3px;
  background: rgba(25, 29, 34, .08);
}

.legal-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--yellow, #D5222A), #D5222A);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.legal-masthead {
  position: relative;
  padding: clamp(30px, 4vw, 54px) 0 clamp(26px, 3vw, 40px);
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(25, 29, 34, .09);
}

/* The one piece of decoration: the same dotted grain the contact section
   uses, so the legal pages read as part of the site and not as a bare
   document dropped into it. */
.legal-masthead::before {
  position: absolute;
  inset-inline-start: -40px;
  top: -30px;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(circle, rgba(213, 34, 42, .5) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: .38;
  pointer-events: none;
  content: "";
}

.legal-masthead-inner { position: relative; z-index: 1; max-width: 1100px; }

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(25, 29, 34, .06);
  box-shadow: inset 0 0 0 1px rgba(25, 29, 34, .1);
  color: #191D22;
  font-size: 12.5px;
  font-weight: 900;
}

.legal-eyebrow i { color: var(--yellow, #D5222A); }

.legal-masthead h1 {
  margin: 0;
  color: #072a63;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: -.01em;
}

.legal-lead {
  max-width: 640px;
  margin: 14px 0 0;
  color: #55617a;
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.65;
}

/* The masthead settles once, on load: three short rises, no scroll timeline.
   Nothing here is hidden by the animation - it starts nearly opaque, so a
   stylesheet that never arrives still shows a complete heading. */
.legal-masthead .internal-breadcrumbs,
.legal-masthead .legal-eyebrow,
.legal-masthead h1,
.legal-lead {
  animation: legal-rise 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.legal-masthead .legal-eyebrow { animation-delay: 60ms; }
.legal-masthead h1 { animation-delay: 130ms; }
.legal-lead { animation-delay: 210ms; }

@keyframes legal-rise {
  from { opacity: .5; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.legal-doc {
  padding: clamp(30px, 3.5vw, 52px) 0 clamp(56px, 6vw, 96px);
  background: var(--aw-access-soft, #f8f6f1);
}

.legal-doc-inner {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  max-width: 1100px;
}

/* Index ------------------------------------------------------------------ */
.legal-index {
  position: sticky;
  top: 118px;
  padding: 20px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(25, 29, 34, .07), inset 0 0 0 1px rgba(25, 29, 34, .08);
}

.legal-index-title {
  margin: 0 0 12px;
  color: #8a93a6;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .04em;
}

.legal-index-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.legal-index-list a {
  position: relative;
  display: block;
  padding: 7px 14px 7px 8px;
  border-radius: 9px;
  color: #5b6780;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 200ms ease, background 200ms ease;
}

/* The gold marker slides up the list rather than blinking on and off. */
.legal-index-list a::before {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--yellow, #D5222A);
  transform: translateY(-50%);
  transition: height 260ms cubic-bezier(.22, 1, .36, 1);
  content: "";
}

.legal-index-list a:hover { color: #191D22; background: rgba(25, 29, 34, .04); }

.legal-index-list a.is-current {
  color: #191D22;
  background: rgba(213, 34, 42, .1);
}

.legal-index-list a.is-current::before { height: 62%; }

/* Body ------------------------------------------------------------------- */
.legal-body { display: grid; gap: 30px; max-width: 720px; }

.legal-block {
  padding: 24px 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(25, 29, 34, .05), inset 0 0 0 1px rgba(25, 29, 34, .07);
  scroll-margin-top: 130px;
  transition:
    opacity 620ms cubic-bezier(.22, 1, .36, 1) var(--legal-delay, 0ms),
    transform 620ms cubic-bezier(.22, 1, .36, 1) var(--legal-delay, 0ms),
    box-shadow 300ms ease;
}

/* Visible by default. The script only ever adds .is-in, so a document whose
   script never runs is a complete, readable document - and it never starts
   from nothing: .82 opacity, 16px of travel. */
.js .legal-block { opacity: .82; transform: translateY(16px); }
.js .legal-block.is-in { opacity: 1; transform: none; }

.legal-block h2 {
  margin: 0 0 12px;
  color: #072a63;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 900;
  line-height: 1.25;
}

.legal-block h2 em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--yellow, #D5222A);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.legal-block p {
  margin: 0 0 10px;
  color: #44506a;
  font-size: 16px;
  line-height: 1.72;
}

.legal-block p:last-child { margin-bottom: 0; }
.legal-block a { color: #0a4fae; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.legal-block a:hover { color: #191D22; }

.legal-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-list li {
  position: relative;
  padding-inline-start: 21px;
  color: #44506a;
  font-size: 15.5px;
  line-height: 1.65;
}

.legal-list li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow, #D5222A);
  content: "";
}

.legal-updated {
  margin: 4px 0 0;
  color: #8992a6;
  font-size: 13.5px;
}

.legal-block .internal-actions { margin-top: 14px; }

@media (max-width: 980px) {
  .legal-doc-inner { grid-template-columns: minmax(0, 1fr); }

  /* Above the text on a phone, and no longer sticky: a pinned index would
     eat a third of a small screen. It becomes a compact jump list. */
  .legal-index {
    position: static;
    padding: 16px 16px 14px;
    border-radius: 16px;
  }

  .legal-index-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .legal-index-list::-webkit-scrollbar { display: none; }

  .legal-index-list a {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(25, 29, 34, .05);
    font-size: 12.5px;
    white-space: nowrap;
  }

  .legal-index-list a::before { display: none; }
  .legal-index-list a.is-current { background: rgba(213, 34, 42, .22); }

  .legal-body { gap: 20px; max-width: none; }
  .legal-block { padding: 20px 18px; scroll-margin-top: 116px; }
  .legal-block p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-masthead .internal-breadcrumbs,
  .legal-masthead .legal-eyebrow,
  .legal-masthead h1,
  .legal-lead { animation: none; }

  .js .legal-block { opacity: 1; transform: none; transition: none; }
  .legal-progress span { transition: none; }
}

/* Address line under a page's intro copy. Used by the contact page. */
.internal-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(25, 29, 34, .05);
  box-shadow: inset 0 0 0 1px rgba(25, 29, 34, .09);
  color: #191D22;
  font-size: 14.5px;
  font-weight: 800;
}

.internal-address i { color: var(--yellow, #D5222A); }

@media (max-width: 640px) {
  .internal-address { font-size: 13.5px; padding: 8px 13px; }
}

/* The hero's second button jumps here, and the header is sticky over the top
   of the page, so the landing point is offset by its height. */
#contact { scroll-margin-top: 172px; }

@media (max-width: 760px) {
  #contact { scroll-margin-top: 108px; }
}