@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(6,47,112,.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: #073b86;
  --blue-950: #03255a;
  --yellow: #ffb400;
  --yellow-strong: #ffc229;
  --page: #f8f7f3;
  --ink: #1b2433;
  --muted: #687386;
  --line: rgba(7, 59, 134, .1);
}

html, body { overflow-x: hidden; }
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(7, 59, 134, .08);
  border-radius: 26px;
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(3, 37, 90, .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(3, 37, 90, .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(7, 59, 134, .12);
  border-radius: 999px;
  background: #fff;
  color: #7a8292;
  box-shadow: 0 8px 24px rgba(3, 37, 90, .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(7, 59, 134, .34);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(7, 59, 134, .07), 0 8px 24px rgba(3, 37, 90, .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(3, 37, 90, .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: #f8f7f3 !important;
  color: var(--ink);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(470px, .92fr);
  grid-template-areas: "visual copy";
  align-items: center;
  min-height: 720px;
  padding-bottom: 128px;
  direction: ltr;
}

.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(7, 59, 134, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #364152;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 7px 20px rgba(3, 37, 90, .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(7, 59, 134, .2); background: #fff; color: var(--blue-900); }
.hero-cta:hover { transform: translateY(-2px); background: var(--blue-950); box-shadow: 0 10px 24px rgba(7, 59, 134, .16); }
.hero-ghost-cta:hover { transform: translateY(-2px); border-color: rgba(7, 59, 134, .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(7, 59, 134, .06);
  border-radius: 26px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 40px rgba(3, 37, 90, .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(7, 59, 134, .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(7, 59, 134, .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: #ffc229; box-shadow: 0 12px 28px rgba(255, 180, 0, .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(7, 59, 134, .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(3, 37, 90, .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("/shel-shia/assets/images/home/hero-workshop-v2.png") !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;
    left: 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: 0 28px 28px 0;
    background: #fff;
    color: var(--ink);
    direction: rtl;
    opacity: .98;
    visibility: hidden;
    transform: translateX(-100%);
    box-shadow: 28px 0 60px rgba(3, 37, 90, .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(7, 59, 134, .08);
    border-radius: 50%;
    background: #f8f9fc;
    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(7, 59, 134, .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(7, 59, 134, .05); }
  .primary-nav-inner a:not(.is-current)::after { display: none; }
  .primary-nav-inner .is-current { background: rgba(255, 180, 0, .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(7, 59, 134, .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("/shel-shia/assets/images/home/hero-workshop-mobile-v2.png") !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: "menu brand search";
    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(7, 59, 134, .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(6, 47, 112, .1); }
  .search-groups div:last-child { border-bottom: 0; }
}


.key-duplication-section {
  --dup-blue: #073b86;
  --dup-yellow: #ffb400;
  --dup-ivory: #f9eee0;
  --dup-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1923px;
  margin-inline: auto;
  aspect-ratio: 1923 / 818;
  overflow: hidden;
  background-color: var(--dup-ivory);
  background-image: url("../images/brand/key-duplication-scene.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  container-type: inline-size;
}

.key-dup-media { display: none; }

/* 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: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: min(calc(100% - 48px), 1440px);
  transform: translateX(-50%);
}

.key-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 48%;
  padding: 2.079cqw 0 2.305cqw 0;
  direction: rtl;
  text-align: right;
}

/* 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: #697386;
  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;
}

.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(7, 59, 134, .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.134cqw;
  margin-top: auto;
}

.key-dup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.453cqw;
  height: 2.804cqw;
  padding-inline: 1.353cqw;
  border-radius: 999px;
  background: var(--dup-yellow);
  color: var(--dup-blue);
  font-size: 0.771cqw;
  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: 0.771cqw !important; transition: transform 220ms var(--dup-ease); }
.key-dup-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 180, 0, .22); }
.key-dup-cta:hover .fa-key { transform: translateX(-3px); }

.key-dup-sep { width: 1px; height: 1.285cqw; background: rgba(7, 59, 134, .18); }

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

.key-dup-phone span { direction: ltr; }
.key-dup-phone .fa-phone { font-size: 0.726cqw !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.612cqw;
  font-weight: 600;
}

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

/* ── Mobile: image on top, content stacked underneath ──────── */
@media (max-width: 767px) {
  .key-duplication-section {
    aspect-ratio: auto;
    max-width: none;
    background-image: none;
    container-type: normal;
  }

  .key-dup-media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--dup-ivory);
    background-image: url("../images/brand/key-duplication-scene.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .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 > img {
  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 > img { 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 > img {
  object-fit: cover;
  object-position: left top;
  transform: translate3d(-15px, 8px, 0) scale(1.02);
}
.hero-media.is-in > .m-frame > img { 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-dup-media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.key-dup-media > .m-frame { --m-ps: 1.025; }
.key-dup-media > .m-frame > img {
  object-fit: cover;
  object-position: center center;
  clip-path: inset(0 4% 0 0);
  transform: scale(1.005) translate3d(-22px, 18px, 0);
  opacity: .2;
  transition: opacity 1100ms var(--m-ease), transform 1100ms var(--m-ease), clip-path 1000ms var(--m-ease);
}

.key-dup-media.is-in > .m-frame > img { opacity: 1; transform: scale(1) translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }

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

/* 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; transform: 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(7, 59, 134, .34); }
}

/* Mobile — lighter camera work, same reveals */
@media (max-width: 767px) {
  .key-dup-media { position: relative; inset: auto; }
  .key-dup-media > .m-frame > img { object-position: left center; clip-path: none; transform: scale(1.015); }
  .key-dup-media.is-in > .m-frame > img { transform: scale(1); }
  .hero-media > .m-frame > img { transform: scale(1.02); }
  .hero-media.is-in > .m-frame > img { 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 > img { 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 { 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(7, 59, 134, .12);
}

.problem-list li { border-bottom: 1px solid rgba(7, 59, 134, .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(7, 59, 134, .018);
}

.problem-list li.is-current button {
  color: var(--blue-900);
  background: rgba(7, 59, 134, .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(255, 180, 0, .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: #073b86;
  background: rgba(255, 180, 0, .12);
}

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

.problem-nav-head h2 {
  margin: 0;
  color: #073b86;
  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: #667085;
  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: #ffb400;
}

.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(7, 59, 134, .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: #073b86;
  box-shadow: 0 8px 18px rgba(7, 59, 134, .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: #ffb400;
  content: "";
}

.problem-answer-copy h3 {
  margin: 0;
  color: #073b86;
  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-copy.is-changing h3,
.problem-answer-copy.is-changing p,
.problem-answer-copy.is-changing .problem-answer-cta {
  opacity: 0;
  transform: translateY(7px);
}

.problem-answer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(7, 59, 134, .16);
  border-radius: 13px;
  color: #073b86;
  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: #ffb400;
  color: #073b86;
  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(7, 59, 134, .10);
  border-radius: 18px;
  color: #073b86;
  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(7, 59, 134, .17);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 8px 22px rgba(24, 35, 60, .05);
}

.problem-list button b {
  color: #ffb400;
  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(7, 59, 134, .12);
  border-radius: 50%;
  color: #073b86;
  background: rgba(255, 255, 255, .4);
}

.problem-q {
  min-width: 0;
  color: #073b86;
  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: #073b86;
  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(255, 180, 0, .42);
  background: linear-gradient(90deg, rgba(255, 180, 0, .08), rgba(255, 255, 255, .75));
}

.problem-list li.is-current .problem-arrow {
  color: #ffb400;
  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: #ffb400;
  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: #073b86;
  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: #073b86;
  background: #ffb400;
}

.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-copy.is-changing h3,
.problem-answer-copy.is-changing p,
.problem-answer-copy.is-changing .problem-answer-cta {
  opacity: 0;
  transform: translateY(-4px);
}

.problem-answer-cta:hover,
.problem-answer-cta:focus-visible {
  color: #073b86;
  background: #ffb400;
}

.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(7, 59, 134, .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: #ffb400;
  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(255, 180, 0, .065);
  border-color: rgba(255, 180, 0, .38);
  box-shadow: 0 8px 24px rgba(255, 180, 0, .05);
}

.problem-indicator {
  top: 0;
  right: -19px;
  width: 10px;
  height: 10px;
  border: 1px solid #f4e8d8;
  border-radius: 50%;
  background: #ffb400;
  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: 70px;
    padding-bottom: 80px;
  }

  .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: #ffb400;
  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: #ffb400;
  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;
}

.problem-answer-copy.is-changing h3 {
  opacity: 0;
  transform: translateY(-5px);
}

.problem-answer-copy.is-changing p {
  opacity: 0;
  transform: translateY(-3px);
}

.problem-answer-copy.is-changing .problem-answer-cta {
  opacity: 0;
  transform: translateY(-3px);
}

.problem-answer-copy.is-answer-entering h3 {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.problem-answer-copy.is-answer-entering p {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 300ms ease 55ms, transform 300ms ease 55ms;
}

.problem-answer-copy.is-answer-entering .problem-answer-cta {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease 105ms, transform 280ms ease 105ms, color 220ms ease, background 220ms ease, border-color 220ms ease;
}

.problem-answer-copy.is-changing::before {
  opacity: .3;
  transform: scaleY(.2);
  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: #073b86;
  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-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(255, 180, 0, .25);
  border-radius: 999px;
  background: rgba(255, 180, 0, .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(7, 59, 134, .65);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}

.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(7, 59, 134, .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(255, 180, 0, .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(255, 180, 0, .17); border-color: rgba(255, 180, 0, .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(255, 180, 0, .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; }
  .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(7, 59, 134, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .05) 1px, transparent 1px),
    linear-gradient(rgba(7, 59, 134, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .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: #073b86;
  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(7, 59, 134, .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(7, 59, 134, .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: 146px;
  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(255, 180, 0, .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: 8px;
  height: 50px;
  /* 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: 26px;
  border: 1px solid rgba(7, 59, 134, .2);
  border-radius: 999px;
  color: var(--shelf-navy);
  font-size: 15px;
  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: var(--shelf-navy); border-color: var(--shelf-navy); color: #fff; transform: translateY(-2px); }
.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: 122px; 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) {
  .shelf-track { grid-auto-columns: 78%; }
}

@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(7, 59, 134, .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: #073B86;
  --hm-yellow: #FFB400;
  --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(7, 59, 134, .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(7, 59, 134, .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(7, 59, 134, .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(255, 180, 0, .18);
}
.hm-call:hover .fa-solid { transform: translateX(-3px); }

.hm-whatsapp {
  background: transparent;
  border: 1px solid rgba(7, 59, 134, .20);
  color: var(--hm-navy);
}
.hm-whatsapp:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 59, 134, .38);
  background: rgba(7, 59, 134, .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(7, 59, 134, .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: #073B86;
  --lc-yellow: #FFB400;
  --lc-muted: #687386;
  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(7, 59, 134, .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(7, 59, 134, .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(7, 59, 134, .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(255, 180, 0, .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(255, 180, 0, .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,
.is-preset *,
.is-preset *::before,
.is-preset *::after {
  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, #073B86 0%, #073B86 62%, #062F6F 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(255, 180, 0, .55) 18%, rgba(255, 180, 0, .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(255, 180, 0, .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: #687386; }

.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: #687386; }
.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(7, 59, 134, .1); }

.local-contact a:focus-visible { outline-color: rgba(255, 180, 0, .8); }

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

.site-closing-zone .site-footer {
  position: relative;
  background: transparent;
  padding-top: 20px;
}

/* 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 46px;
  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: #073b86;
  --s-yellow: #ffb400;
  --s-muted: #7c8698;
  --s-ink: #4a5566;
  --s-line: rgba(7, 59, 134, .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(255, 180, 0, .55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 180, 0, .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(255, 180, 0, .5); background: rgba(255, 180, 0, .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(255, 180, 0, .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(255, 180, 0, .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(255, 180, 0, .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(255, 180, 0, .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(255, 180, 0, .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(255, 180, 0, .55); background: rgba(255, 180, 0, .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 {
  background-image: url("../images/brand/key-duplication-scene-mobile.png");
}

  /* ── 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(7, 59, 134, .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(255, 180, 0, .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(255, 180, 0, .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 ── */
  .site-closing-zone .site-footer { padding: 0; }
  .site-closing-zone .site-footer::before { margin-bottom: 34px; }

  .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; }
}

/* ═════════════════════════════════════════════════════════════
   MOBILE MOTION — its own strategy, not the desktop timeline
   scaled down. Short distances (6–12px), short durations, few
   stages. Nothing here changes a layout or a colour: only how
   long things take and how far they travel.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* One personality, one easing. */
  .hm, .local-contact, .product-shelf, .departments-showcase, .problem-nav,
  .key-duplication-section, .site-footer { --m-ease: cubic-bezier(.22, 1, .36, 1); }

  /* Desktop chains run past a second. Everything in these sections is flattened
     to a single short move first; the few real stages are re-declared below and
     win by source order. */
  .hm.is-in *, .hm.is-in *::before, .hm.is-in *::after,
  .local-contact.is-in *, .local-contact.is-in *::before, .local-contact.is-in *::after,
  .product-shelf.is-in *, .product-shelf.is-in *::before, .product-shelf.is-in *::after,
  .departments-showcase.is-in *, .departments-showcase.is-in *::before, .departments-showcase.is-in *::after,
  .key-duplication-section.is-in *, .key-duplication-section.is-in *::before, .key-duplication-section.is-in *::after,
  .problem-nav.is-in *, .problem-nav.is-in *::before, .problem-nav.is-in *::after {
    transition-duration: 300ms;
    transition-delay: 0ms;
    --m-delay: 0ms;
  }

  /* ── Key duplication: four short stages, under 400ms ───── */
  .key-duplication-section.is-in .key-dup-pill { transition-delay: 0ms; }
  .key-duplication-section .key-dup-line > span { transition-duration: 320ms; }
  .key-duplication-section.is-in .key-dup-line > span { transition-delay: 60ms; }
  .key-duplication-section.is-in .key-dup-note,
  .key-duplication-section.is-in .key-dup-words span { transition-delay: 140ms; transition-duration: 300ms; }
  .key-duplication-section.is-in .key-dup-cta,
  .key-duplication-section.is-in .key-dup-phone { transition-delay: 220ms; transition-duration: 300ms; }

  /* ── Handyman: eyebrow+headline, image, proofs, CTA ────── */
  .hm.is-in .hm-eyebrow { transition-duration: 260ms; transition-delay: 0ms; }
  .hm .m-mask > span { transition-duration: 340ms; }
  .hm.is-in .hm-intro h2 .m-mask:nth-child(1) > span,
  .hm.is-in .hm-intro h2 .m-mask:nth-child(2) > span { transition-delay: 40ms; }
  .hm.is-in .hm-media-frame { transition-duration: 320ms; transition-delay: 90ms; }
  .hm.is-in .hm-media-frame img { transition-duration: 400ms; transition-delay: 90ms; }
  .hm.is-in .hm-intro > p { transition-duration: 280ms; transition-delay: 150ms; }
  /* The three proofs arrive together rather than one by one. The desktop rules
     use :nth-child, so these must too or they lose on specificity. */
  .hm.is-in .hm-proofs li:nth-child(1),
  .hm.is-in .hm-proofs li:nth-child(2),
  .hm.is-in .hm-proofs li:nth-child(3),
  .hm.is-in .hm-proofs li:nth-child(1)::after,
  .hm.is-in .hm-proofs li:nth-child(2)::after,
  .hm.is-in .hm-proofs li:nth-child(3)::after { transition-duration: 300ms; transition-delay: 230ms; }
  .hm.is-in .hm-phone { transition-duration: 280ms; transition-delay: 310ms; }
  .hm.is-in .hm-call,
  .hm.is-in .hm-whatsapp,
  .hm.is-in .hm-more { transition-duration: 280ms; transition-delay: 370ms; }

  /* ── Contact: headline, map, information card ──────────── */
  .local-contact.is-in .local-eyebrow { transition-duration: 260ms; transition-delay: 0ms; }
  .local-contact .local-head h2 .m-mask > span { transition-duration: 340ms; }
  .local-contact.is-in .local-head h2 .m-mask > span { transition-delay: 40ms; }
  .local-contact.is-in .local-head > p { transition-duration: 260ms; transition-delay: 110ms; }
  .local-contact.is-in .local-map { transition-duration: 340ms; transition-delay: 170ms; }
  .local-contact.is-in .local-map-tag { transition-duration: 240ms; transition-delay: 300ms; }
  /* The panel arrives whole: no per-row stagger on a phone. */
  .local-contact.is-in .local-panel,
  .local-contact.is-in .local-store,
  .local-contact.is-in .local-row:nth-of-type(2),
  .local-contact.is-in .local-row:nth-of-type(3),
  .local-contact.is-in .local-row:nth-of-type(4),
  .local-contact.is-in .local-line,
  .local-contact.is-in .local-nav,
  .local-contact.is-in .local-call,
  .local-contact.is-in .local-whatsapp { transition-duration: 320ms; transition-delay: 260ms; }

  /* ── Departments: heading, then cards with a 30ms stagger ─ */
  .departments-showcase.is-in .department-card { transition-duration: 300ms; }
  .departments-showcase.is-in .department-card:nth-child(1) { transition-delay: 100ms; }
  .departments-showcase.is-in .department-card:nth-child(2) { transition-delay: 130ms; }
  .departments-showcase.is-in .department-card:nth-child(3) { transition-delay: 160ms; }
  .departments-showcase.is-in .department-card:nth-child(4) { transition-delay: 190ms; }
  .departments-showcase.is-in .department-card:nth-child(5) { transition-delay: 220ms; }
  .departments-showcase.is-in .department-card:nth-child(6) { transition-delay: 250ms; }

  /* ── Product shelf: 30ms stagger, shorter travel ───────── */
  .shelf-item { transform: translateY(8px); }
  .product-shelf.is-in .shelf-item { transition-duration: 300ms; }
  .shelf-track > :nth-child(1) { --m-delay: 120ms; }
  .shelf-track > :nth-child(2) { --m-delay: 150ms; }
  .shelf-track > :nth-child(3) { --m-delay: 180ms; }
  .shelf-track > :nth-child(4) { --m-delay: 210ms; }
  .shelf-track > :nth-child(5) { --m-delay: 240ms; }
  .shelf-track > :nth-child(n+6) { --m-delay: 270ms; }

  /* ── Footer: one move, once ────────────────────────────── */
  .site-footer .footer-grid > *,
  .site-footer .footer-bottom { transform: translateY(6px); }
  .site-footer.is-in .footer-grid > *,
  .site-footer.is-in .footer-bottom { transition-duration: 250ms; transition-delay: 0ms; }

  /* ── Tap targets: nothing interactive under 44px ───────── */
  .mobile-menu-button,
  .search-trigger,
  .nav-close,
  .catalog-search-close,
  .shelf-nav,
  .pdp-carousel-nav {
    min-width: 44px;
    min-height: 44px;
  }
  .problem-nav-list button,
  .catalog-mobile-pills a,
  .primary-nav-inner a {
    min-height: 44px;
  }
}

/* §50 — reduced motion: content is immediately final, carousels stay
   manually scrollable. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hm [class*="hm-"],
  .local-contact [class*="local-"],
  .product-shelf [class*="shelf-"],
  .departments-showcase [class*="department"],
  .key-duplication-section [class*="key-dup"],
  .site-footer .footer-grid > *,
  .site-footer .footer-bottom {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .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(7, 59, 134, .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 ────────────────────── */
.key-dup-media {
    display: block;
    position: relative;
    width: 100%;
    height: 190px;
    margin-top: 28px;
    margin-bottom: 5px;
    aspect-ratio: auto;
    background-color: transparent;
    overflow: hidden;
    border-radius: 18px;
    background-image: url("../images/brand/key-duplication-service.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

  /* The portrait artwork is a blueprint texture, not a product shot — it
     belongs behind the section, at low contrast. */
  .key-duplication-section {
    background-image: url("../images/brand/key-duplication-scene-mobile.png");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;
  }
  /* 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(7, 59, 134, .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(255, 180, 0, .22);
    border-radius: 50%;
    background: rgba(255, 180, 0, .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(255, 180, 0, .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-media { transition-duration: 300ms; transition-delay: 80ms; }
  .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) {
  .key-dup-media { display: none; }
}

@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; }
}