/* Heritage Postal — rich green luxury + liquid glass */
:root {
  --color-bg: #0a1a12;
  --color-bg-deep: #061008;
  --color-bg-subtle: rgba(180, 220, 195, 0.05);
  --color-surface: rgba(220, 245, 230, 0.06);
  --color-text: #f5f8f4;
  --color-text-muted: rgba(220, 235, 225, 0.72);
  --color-accent: #3ecf8e;
  --color-accent-hover: #6ee8ad;
  --color-accent-deep: #0f5c3a;
  --color-accent-glow: rgba(62, 207, 142, 0.38);
  --color-accent-ring: rgba(62, 207, 142, 0.28);
  --color-gold: #d4bc7a;
  --color-gold-soft: rgba(212, 188, 122, 0.4);
  --scrapbook-paper-light: #f5f0e8;
  --scrapbook-paper-deep: #f0e9e0;
  --scrapbook-paper-texture: url("../images/scrapbook-paper-texture.png");
  --color-border: rgba(212, 188, 122, 0.14);
  --glass-bg: rgba(220, 245, 232, 0.06);
  --glass-bg-strong: rgba(220, 245, 232, 0.11);
  --glass-border: rgba(201, 169, 98, 0.2);
  --glass-highlight: rgba(255, 255, 255, 0.22);
  --glass-blur: 26px;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 980px;
  --radius-input: 14px;
  --radius-glass: 22px;
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --max-width: 980px;
  --header-clearance: 4.5rem;
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --scrollbar-size: 16px;
  --scrollbar-track: rgba(4, 12, 8, 0.82);
  --scrollbar-thumb: rgba(72, 200, 140, 0.55);
  --scrollbar-thumb-deep: rgba(15, 92, 58, 0.85);
  /* Hero h1 + "We stand for" (.section-title) */
  --section-heading-size: clamp(1.85rem, 3.5vw, 2.65rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(90, 210, 155, 0.75) var(--scrollbar-track);
}

/* Crystal glass scrollbar — Chrome, Edge, Safari */
html::-webkit-scrollbar {
  width: var(--scrollbar-size);
}

html::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, transparent 55%),
    url("../images/scrollbar-crystal.svg");
  background-repeat: repeat-y, repeat-y;
  background-size: 100% 100%, var(--scrollbar-size) auto;
  background-position: center, center;
  border-left: 1px solid rgba(212, 188, 122, 0.14);
  box-shadow: inset 3px 0 14px rgba(0, 0, 0, 0.4);
}

html::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background-color: rgba(62, 207, 142, 0.28);
  background-image:
    url("../images/scrollbar-crystal.svg"),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(110, 232, 173, 0.35) 18%,
      rgba(62, 207, 142, 0.4) 45%,
      rgba(15, 92, 58, 0.55) 78%,
      rgba(212, 188, 122, 0.22) 100%
    );
  background-repeat: repeat-y, no-repeat;
  background-size: var(--scrollbar-size) auto, 100% 100%;
  background-position: center, center;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.22),
    inset 2px 0 0 rgba(255, 255, 255, 0.12),
    0 0 18px rgba(62, 207, 142, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.28);
}

html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(62, 207, 142, 0.42);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(62, 207, 142, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.32);
}

html::-webkit-scrollbar-thumb:active {
  background-color: rgba(15, 92, 58, 0.65);
  border-color: rgba(212, 188, 122, 0.45);
}

html::-webkit-scrollbar-corner {
  background: var(--color-bg-deep);
  border-left: 1px solid rgba(212, 188, 122, 0.1);
}

@media (max-width: 720px) {
  html {
    scrollbar-color: rgba(90, 210, 155, 0.7) transparent;
  }

  html::-webkit-scrollbar {
    width: 6px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
    background-image: none;
    border-left: none;
    box-shadow: none;
    border-radius: 999px;
    margin: 4px 0;
  }

  html::-webkit-scrollbar-thumb {
    background: rgba(62, 207, 142, 0.6);
    background-image: none;
    border: none;
    border-radius: 999px;
    box-shadow: none;
  }

  html::-webkit-scrollbar-thumb:hover,
  html::-webkit-scrollbar-thumb:active {
    background: rgba(62, 207, 142, 0.8);
    border: none;
    box-shadow: none;
  }
}

.page-section {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

main > .page-section {
  position: relative;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}

/* Animated mesh + tropical foliage — emerald + forest glow */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(15, 92, 58, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% -20%, #0a1810 0%, var(--color-bg) 58%);
}

.ambient-bg__foliage {
  position: absolute;
  inset: -5%;
  z-index: 0;
  background-image: url("../images/foliage-bg.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: 0.44;
  filter: saturate(1.12) contrast(1.06) brightness(0.7);
  mix-blend-mode: soft-light;
  transform: scale(1.05);
  animation: foliage-breathe 34s ease-in-out infinite;
  will-change: transform;
}

.ambient-bg__foliage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(6, 20, 14, 0.5) 0%,
    rgba(8, 28, 20, 0.28) 42%,
    rgba(4, 14, 9, 0.58) 100%
  );
  mix-blend-mode: multiply;
}

.ambient-bg__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(10, 26, 18, 0.12) 0%, rgba(6, 16, 10, 0.68) 70%),
    linear-gradient(180deg, rgba(6, 16, 10, 0.3) 0%, rgba(6, 16, 10, 0.5) 50%, rgba(4, 12, 8, 0.78) 100%);
  pointer-events: none;
}

@keyframes foliage-breathe {
  0%,
  100% {
    transform: scale(1.05) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-0.6%, -0.35%);
  }
}

.ambient-bg__wrap {
  position: absolute;
  z-index: 2;
  will-change: transform;
}

.ambient-bg__wrap--1 {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  top: -12%;
  left: -8%;
}

.ambient-bg__wrap--2 {
  width: min(48vw, 440px);
  height: min(48vw, 440px);
  top: 35%;
  right: -12%;
}

.ambient-bg__wrap--3 {
  width: min(42vw, 380px);
  height: min(42vw, 380px);
  bottom: -8%;
  left: 28%;
}

.ambient-bg__orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.58;
}

.ambient-bg__orb--1 {
  background: radial-gradient(circle, #2db875 0%, transparent 68%);
  animation: orb-drift-1 22s ease-in-out infinite;
}

.ambient-bg__orb--2 {
  background: radial-gradient(circle, #0a3d28 0%, transparent 68%);
  animation: orb-drift-2 26s ease-in-out infinite;
}

.ambient-bg__orb--3 {
  background: radial-gradient(circle, #1fa868 0%, transparent 68%);
  animation: orb-drift-3 20s ease-in-out infinite;
  opacity: 0.48;
}

@keyframes orb-drift-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(8%, 12%) scale(1.08);
  }
}

@keyframes orb-drift-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-10%, 6%) scale(1.05);
  }
}

@keyframes orb-drift-3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(6%, -8%) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bg__foliage {
    animation: none;
    transform: scale(1.05);
  }

  .ambient-bg__orb {
    animation: none;
  }
}

@media (max-width: 720px) {
  .ambient-bg__foliage {
    background-position: 58% 38%;
    opacity: 0.36;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

/* Header — seamless with page (no bar / border) */
.site-header {
  --header-logo-height: 3.2rem;
  --header-logo-max-height: min(3.2rem, 11vh);
  --header-nav-font-size: 0.8125rem;
  --header-nav-pad-y: 0.55rem;
  --header-nav-pad-x: 1.15rem;
  --header-inner-pad-top: 0.9rem;
  --header-inner-pad-bottom: 0.6rem;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 0.42s var(--ease-out),
    backdrop-filter 0.42s var(--ease-out),
    -webkit-backdrop-filter 0.42s var(--ease-out);
}

.site-header.is-compact {
  --header-logo-height: 2.85rem;
  --header-logo-max-height: min(2.85rem, 10vh);
  --header-nav-font-size: 0.75rem;
  --header-nav-pad-y: 0.5rem;
  --header-nav-pad-x: 0.85rem;
  --header-inner-pad-top: 0.75rem;
  --header-inner-pad-bottom: 0.5rem;
}

body.mobile-nav-open .site-header {
  /* Lighter veil so page content stays faintly visible behind the menu. */
  background: rgba(6, 16, 10, 0.5);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.mobile-nav-float {
  display: none;
}

.mobile-nav-float[hidden] {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

.mobile-nav-float[hidden] .nav--mobile {
  display: none !important;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--header-inner-pad-top) 1.25rem var(--header-inner-pad-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  transition: padding 0.45s var(--ease-out);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

.logo:hover {
  text-decoration: none;
}

.logo__wordmark {
  min-width: 0;
}

.logo__mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
}

.logo__img {
  display: block;
  width: auto;
  height: var(--header-logo-height);
  max-height: var(--header-logo-max-height);
  margin: 0;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
  transition:
    height 0.45s var(--ease-out),
    max-height 0.45s var(--ease-out),
    filter 0.35s var(--ease-out),
    transform 0.35s var(--ease-spring);
}

.logo:hover .logo__img {
  filter: drop-shadow(0 4px 18px rgba(212, 188, 122, 0.25)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
  transform: translateY(-1px);
}

.logo__text {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.logo__tag {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.35rem;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.07s ease-out, opacity 0.07s ease-out;
}

.nav-toggle:hover {
  opacity: 0.85;
}

.nav-toggle:active,
.nav-toggle.is-deep-pressed {
  transform: scale(0.86);
  opacity: 0.75;
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

/* Animated menu icon — ported from 21st.dev MenuToggleIcon */
.nav-toggle__icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  fill: none;
  stroke: #f2ebe0;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 500ms ease-in-out;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  transform: rotate(-45deg);
}

.nav-toggle__icon-path--curve {
  transition:
    stroke-dasharray 500ms ease-in-out,
    stroke-dashoffset 500ms ease-in-out;
  stroke-dasharray: 12 63;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon-path--curve {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav a {
  padding: var(--header-nav-pad-y) var(--header-nav-pad-x);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--header-nav-font-size);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    font-size 0.45s var(--ease-out),
    padding 0.45s var(--ease-out),
    background 0.2s ease;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 500;
}

/* Mobile: logo + hotdog-bun menu, full menu when open */
.nav--split {
  display: none;
}

.nav--mobile {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

/* Mobile-only floating call button — original green circle + SVG phone. */
.call-fab {
  display: none;
  position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(2.65rem, calc(1.5rem + env(safe-area-inset-bottom, 0px)));
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  border: 1px solid rgba(212, 188, 122, 0.55);
  border-radius: 50%;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.28),
    0 4px 18px var(--color-accent-glow);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.25s var(--ease-spring),
    box-shadow 0.25s var(--ease-out),
    filter 0.25s var(--ease-out);
}

.call-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 244, 200, 0.55) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  animation: callFabShine 10s ease-in-out infinite;
}

.call-fab__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  pointer-events: none;
}

.call-fab:hover {
  text-decoration: none;
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.3),
    0 6px 22px var(--color-accent-glow);
}

.call-fab:active,
.call-fab.is-deep-pressed {
  transform: translateY(3px) scale(0.9);
  filter: brightness(0.92);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.28);
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

@keyframes callFabShine {
  0%,
  90% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .call-fab::after {
    animation: none;
  }
}

@media (max-width: 720px) {
  :root {
    --header-clearance: 4.85rem;
  }

  .site-header,
  .site-header__inner {
    overflow: visible;
  }

  .site-header__inner {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    min-height: calc(
      var(--header-logo-height) + var(--header-inner-pad-top) + var(--header-inner-pad-bottom)
    );
  }

  .logo {
    position: absolute;
    left: 50%;
    top: calc(var(--header-inner-pad-top) + (var(--header-logo-height) * 0.5));
    z-index: 1;
    transform: translate(-50%, -50%);
    transition:
      left 0.48s var(--ease-out),
      top 0.45s var(--ease-out),
      transform 0.48s var(--ease-out);
  }

  .site-header.is-compact .logo {
    left: 1.25rem;
    transform: translateY(-50%);
  }

  .nav-toggle-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.48s var(--ease-out),
      visibility 0.48s var(--ease-out);
  }

  .site-header.is-compact .nav-toggle-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .call-fab {
    display: inline-flex;
  }

  /* Floating menu — stacked pills under the header menu button (only when open). */
  .mobile-nav-float:not([hidden]) {
    display: block;
    visibility: visible;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 3;
    min-width: 9rem;
    pointer-events: auto;
  }

  .mobile-nav-float .nav--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    opacity: 1;
    transform: none;
    animation: mobileFloatMenuIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .mobile-nav-float .nav--mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 8.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.75rem;
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #f5f8f4;
    background: rgba(17, 17, 17, 0.59);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition:
      background 0.2s ease,
      transform 0.2s ease;
  }

  .mobile-nav-float .nav--mobile.is-open a {
    animation: mobileFloatLinkIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .mobile-nav-float .nav--mobile.is-open a:nth-child(1) {
    animation-delay: 0.12s;
  }

  .mobile-nav-float .nav--mobile.is-open a:nth-child(2) {
    animation-delay: 0.17s;
  }

  .mobile-nav-float .nav--mobile a:hover {
    background: rgba(17, 17, 17, 0.82);
    text-decoration: none;
  }

  .mobile-nav-float .nav--mobile a:active {
    transform: scale(0.98);
  }
}

@keyframes mobileFloatMenuIn {
  from {
    opacity: 0;
    transform: translate(8px, -8px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}

@keyframes mobileFloatLinkIn {
  from {
    opacity: 0;
    transform: translate(12px, -6px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mobile-nav-float .nav--mobile {
    animation: none;
  }

  .mobile-nav-float .nav--mobile a,
  .mobile-nav-float .nav--mobile.is-open a {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Desktop: centered logo, split nav tucked close to logo */
@media (min-width: 721px) {
  .site-header:not(.is-compact) {
    --header-logo-height: 4.85rem;
    --header-logo-max-height: min(4.85rem, 15vh);
    --header-nav-font-size: 0.8125rem;
    --header-nav-pad-x: 1.15rem;
  }

  .site-header.is-compact {
    --header-logo-height: 4.25rem;
    --header-logo-max-height: min(4.25rem, 14vh);
  }

  .site-header__inner {
    max-width: min(1140px, 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.85rem;
    padding: var(--header-inner-pad-top) 2rem var(--header-inner-pad-bottom);
  }

  .nav--split {
    display: flex;
    gap: 0.85rem;
  }

  .nav--left {
    justify-content: flex-end;
    margin-right: 0.15rem;
  }

  .logo {
    flex-shrink: 0;
    margin: 0 0.35rem;
  }

  .logo__img {
    object-position: center center;
    height: var(--header-logo-height) !important;
    max-height: var(--header-logo-max-height) !important;
  }

  .nav--right {
    justify-content: flex-start;
    margin-left: 0.15rem;
  }

  .nav-toggle-wrap,
  .nav-toggle,
  .call-fab,
  .mobile-nav-float,
  .nav--mobile {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .logo__img,
  .nav a,
  .nav-toggle__icon,
  .nav-toggle__icon-path--curve,
  .logo,
  .nav-toggle {
    transition: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    transform: rotate(-45deg);
  }
}

main {
  flex: 1;
  position: relative;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.hero {
  background: transparent;
  border-bottom: none;
  padding: calc(var(--header-clearance) + 2rem) 1.25rem 2.75rem;
  margin-bottom: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
}

/* Must come after .hero — earlier mobile block was overridden by padding shorthand above */
@media (max-width: 720px) {
  #home.hero,
  section.hero {
    padding-top: calc(var(--header-clearance) - 0.5rem);
    padding-right: 1.25rem;
    padding-bottom: 2.75rem;
    padding-left: 1.25rem;
  }

  .hero__brand {
    margin-top: -2.35rem;
  }
}

.hero__inner {
  width: 100%;
  max-width: min(58rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__brand {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 1.65rem;
}

.hero__brand-lockup {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  vertical-align: top;
}


.hero__brand-wordmark {
  display: block;
  width: min(100%, 440px);
  height: auto;
  max-height: clamp(4.25rem, 15vw, 6.75rem);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
}


.hero__brand-hours {
  position: absolute;
  left: 0.15rem;
  bottom: 0.1rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-0.15em);
}

.hero__brand-phone {
  position: absolute;
  top: 27.75%;
  left: 54.5%;
  transform: translate(-100%, -50%);
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-gold);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

@media (min-width: 721px) {
  .hero__brand-phone {
    transform: translate(-100%, calc(-50% - 0.15em));
  }
}

.hero__brand-loc {
  position: absolute;
  right: 0.15rem;
  bottom: 0.1rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  pointer-events: none;
  transform: translateX(0.4em);
}

@media (max-width: 720px) {
  .hero__brand-hours,
  .hero__brand-loc {
    font-size: 0.625rem;
  }

  .hero__brand-phone {
    font-size: 0.6875rem;
    transform: translate(calc(-100% + 0.15em), calc(-50% - 0.15em));
  }
}

.hero-location-map {
  --map-chrome-size: 1.75rem;
  --map-chrome-inset: 0.5rem;
  --map-chrome-bg: rgba(18, 18, 18, 0.82);
  --map-chrome-border: rgba(255, 255, 255, 0.12);
  --map-chrome-color: #e5e5e5;
  --map-chrome-hover-bg: rgba(62, 207, 142, 0.2);
  --map-chrome-hover-color: #fff;
  --map-chrome-font: 0.625rem;
  --map-navigate-height: 2rem;
  --map-navigate-pad-x: 0.9rem;

  position: relative;
  cursor: default;
  user-select: none;
  outline: none;
}

#hero-location-map.tracking-tablet-3d__slab {
  margin: 0;
  width: 100%;
  max-width: none;
  perspective: none;
}

.hero__actions .hero__map-pin.btn--ghost:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-accent-ring),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.hero-location-map__preview {
  position: relative;
  z-index: 2;
  min-height: 3.85rem;
}

.hero-location-map__card {
  position: relative;
  overflow: hidden;
  width: min(100%, 30rem);
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transform-style: preserve-3d;
  transition:
    width 0.45s var(--ease-spring),
    height 0.45s var(--ease-spring),
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
  box-shadow: var(--shadow-card);
}

.hero-location-map.is-expanded .hero-location-map__card {
  width: min(24rem, calc(100vw - 2.5rem));
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  cursor: default;
  border-radius: 1rem;
  background: #121212;
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}

.hero-location-map.is-expanded .hero-location-map__preview {
  display: none;
}

.hero-location-map__flight {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.hero-location-map.is-expanded .hero-location-map__flight {
  display: flex;
}

.hero-location-map__flight[hidden] {
  display: none !important;
}

.hero-location-map.is-expanded .hero-location-map__flight[hidden] {
  display: none !important;
}

.hero-location-map.is-expanded .hero-location-map__flight:not([hidden]) {
  display: flex;
}

.hero-location-map__media {
  position: relative;
  flex: 0 0 10rem;
  height: 10rem;
  overflow: hidden;
  background: #1a1a1a;
}

.hero-location-map.is-expanded .hero-location-map__media {
  flex: 0 0 11.15rem;
  height: 11.15rem;
}

.hero-location-map__media .hero-location-map__expanded {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.hero-location-map__media .hero-location-map__map-controls {
  top: var(--map-chrome-inset);
  left: var(--map-chrome-inset);
}

/* Same chrome as the × close button — zoom, Directions, Satellite */
.hero-location-map__media .hero-location-map__collapse,
.hero-location-map__media .hero-location-map__satellite-chrome,
.hero-location-map.is-expanded .hero-location-map__media .hero-location-map__ctrl:not(.hero-location-map__navigate-chrome),
.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-control-zoom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--map-chrome-size);
  min-width: var(--map-chrome-size);
  height: var(--map-chrome-size);
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--map-chrome-bg) !important;
  border: 1px solid var(--map-chrome-border) !important;
  color: var(--map-chrome-color) !important;
  box-shadow: none !important;
  background-image: none !important;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.hero-location-map__media .hero-location-map__collapse {
  position: absolute;
  top: var(--map-chrome-inset);
  right: var(--map-chrome-inset);
  z-index: 5;
  pointer-events: auto;
}

.hero-location-map__media .hero-location-map__satellite-chrome {
  position: absolute;
  top: var(--map-chrome-inset);
  left: var(--map-chrome-inset);
  z-index: 5;
  width: var(--map-chrome-size);
  min-width: var(--map-chrome-size);
  max-width: var(--map-chrome-size);
  height: var(--map-chrome-size);
  padding: 0;
  overflow: visible;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}

.hero-location-map.is-expanded .hero-location-map__satellite-chrome {
  opacity: 1;
}

.hero-location-map__satellite-chrome .hero-location-map__satellite-icon {
  display: block;
  flex-shrink: 0;
  width: calc(var(--map-chrome-size) - 0.85rem);
  height: calc(var(--map-chrome-size) - 0.85rem);
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.hero-location-map__satellite-chrome:hover .hero-location-map__satellite-icon,
.hero-location-map__satellite-chrome.is-proxy-hover .hero-location-map__satellite-icon,
.hero-location-map__satellite-chrome.is-active .hero-location-map__satellite-icon {
  opacity: 1;
}

.hero-location-map.is-expanded .hero-location-map__media .hero-location-map__ctrl:not(.hero-location-map__navigate-chrome) {
  width: auto;
  min-width: var(--map-chrome-size);
  max-width: none;
  padding: 0 0.55rem;
  font-family: var(--font-body);
  font-size: var(--map-chrome-font);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-location-map.is-expanded .hero-location-map__navigate-chrome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  top: auto;
  bottom: var(--map-chrome-inset);
  left: 50%;
  right: auto;
  z-index: 6;
  width: auto;
  min-width: 0;
  max-width: none;
  height: var(--map-navigate-height);
  margin: 0;
  padding: 0 var(--map-navigate-pad-x);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 58%, #073d26 100%) !important;
  background-image: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 58%, #073d26 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 10px rgba(0, 0, 0, 0.35),
    0 1px 5px rgba(62, 207, 142, 0.2) !important;
  cursor: pointer;
  transform: translateX(-50%);
  pointer-events: auto;
  opacity: 1;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transition:
    transform 0.28s var(--ease-spring),
    box-shadow 0.28s var(--ease-out),
    filter 0.2s ease;
}

.hero-location-map.is-expanded .hero-location-map__navigate-chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}

.hero-location-map__navigate-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  height: 100%;
  line-height: 0;
}

.hero-location-map__navigate-icon {
  display: block;
  flex: 0 0 auto;
  width: 0.8125rem;
  height: 0.8125rem;
  margin: 0;
  opacity: 0.95;
}

.hero-location-map__navigate-label {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0.05em;
}

.hero-location-map.is-expanded .hero-location-map__navigate-chrome:hover,
.hero-location-map.is-expanded .hero-location-map__navigate-chrome.is-proxy-hover {
  filter: brightness(1.04);
  transform: translateX(-50%) translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 3px 12px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(62, 207, 142, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent-deep) 55%, #073d26 100%) !important;
  color: #fff !important;
}

.hero-location-map.is-expanded .hero-location-map__navigate-chrome:hover::before,
.hero-location-map.is-expanded .hero-location-map__navigate-chrome.is-proxy-hover::before {
  transform: translateX(120%);
}

.hero-location-map.is-expanded .hero-location-map__navigate-chrome:active,
.hero-location-map.is-expanded .hero-location-map__navigate-chrome.is-proxy-active {
  transform: translateX(-50%) translateY(1px) scale(0.98);
  filter: brightness(0.95);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.28) !important;
  transition-duration: 0.07s;
}

.hero-location-map.is-expanded .hero-location-map__navigate-chrome:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-accent-ring),
    0 2px 8px rgba(0, 0, 0, 0.28),
    0 1px 6px rgba(62, 207, 142, 0.22) !important;
}

.hero-location-map__media .hero-location-map__collapse:hover,
.hero-location-map__media .hero-location-map__collapse.is-proxy-hover,
.hero-location-map__media .hero-location-map__satellite-chrome:hover,
.hero-location-map__media .hero-location-map__satellite-chrome.is-proxy-hover,
.hero-location-map.is-expanded .hero-location-map__media .hero-location-map__ctrl:hover,
.hero-location-map.is-expanded .hero-location-map__media .hero-location-map__ctrl.is-proxy-hover,
.hero-location-map.is-expanded .hero-location-map__media .hero-location-map__satellite-chrome.is-active,
.hero-location-map.is-expanded .hero-location-map__media .hero-location-map__ctrl.is-active,
.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-control-zoom a:hover,
.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-control-zoom a.is-proxy-hover {
  background: var(--map-chrome-hover-bg) !important;
  color: var(--map-chrome-hover-color) !important;
  border-color: var(--map-chrome-border) !important;
}

.hero-location-map__panel {
  --map-panel-pad-top: 0.55rem;
  --map-panel-pad-bottom: 0.8rem;
  --map-panel-muted: #6b7280;
  --map-panel-line: #2a2f36;
  flex: 0 0 auto;
  padding: var(--map-panel-pad-top) 1.2rem var(--map-panel-pad-bottom);
  background: #121212;
  color: #fff;
}

.hero-location-map__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.75rem, 7.5rem) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 0.45rem;
  row-gap: 0.22rem;
  align-items: center;
}

.hero-location-map__route-slot--r1 {
  grid-row: 1;
}

.hero-location-map__route-slot--r2 {
  grid-row: 2;
}

.hero-location-map__route-slot--r3 {
  grid-row: 3;
}

.hero-location-map__cell--left {
  grid-column: 1;
  justify-self: start;
  text-align: left;
  min-width: 0;
}

.hero-location-map__cell--right {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  min-width: 0;
}

.hero-location-map__bridge-stack {
  grid-column: 2;
  grid-row: 1 / -1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 100%;
  min-width: 0;
  align-self: center;
  transform: translateY(0.38rem);
}

.hero-location-map__bridge-meta {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--map-panel-muted);
  text-align: center;
}

#hero-location-map-distance {
  font-weight: 600;
}

.hero-location-map__meta,
.hero-location-map__time {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--map-panel-muted);
}

.hero-location-map__depart-meta,
.hero-location-map__arrival-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  min-height: 1.125rem;
  margin: 0;
}

.hero-location-map__depart-meta {
  justify-content: flex-start;
}

.hero-location-map__arrival-meta {
  justify-content: flex-end;
  width: 100%;
}

.hero-location-map__code:empty,
.hero-location-map__meta:empty,
.hero-location-map__time:empty {
  min-height: 1.125rem;
}

#hero-location-map-origin-code {
  min-height: 1.75rem;
}

.hero-location-map.is-showing-route .hero-location-map__arrival-label {
  display: none;
}

.hero-location-map.is-showing-route .hero-location-map__arrival-meta {
  align-items: baseline;
  gap: 0.25rem;
}

.hero-location-map.is-showing-route .hero-location-map__arrival-time {
  display: inline;
}

.hero-location-map.is-showing-route .hero-location-map__navigate-chrome {
  display: none !important;
  pointer-events: none;
}

.hero-location-map.is-showing-route .hero-location-map__bridge-meta {
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hero-location-map__place {
  display: block;
  margin: 0;
  color: var(--map-panel-muted);
}

.hero-location-map__code {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 5.2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
}

.hero-location-map__cell--left .hero-location-map__code {
  padding-right: 0.15rem;
}

.hero-location-map__cell--right .hero-location-map__code {
  padding-left: 0.15rem;
}

.hero-location-map__bridge-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0.02rem 0;
}

.hero-location-map__bridge-rail {
  flex: 1 1 0;
  min-width: 0.75rem;
  height: 1px;
  margin-top: 0.02rem;
  background: var(--map-panel-line);
}

.hero-location-map__bridge-icon-slot {
  flex: 0 0 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
}

.hero-location-map__bridge-icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--map-panel-muted);
}

.hero-location-map.is-expanded {
  cursor: default;
}

.hero-location-map__expanded {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease 0.05s, visibility 0.35s ease 0.05s;
}

.hero-location-map.is-expanded .hero-location-map__expanded {
  opacity: 1;
  visibility: visible;
}

.hero-location-map__gmaps,
.hero-location-map__leaflet {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-location-map__gmaps {
  display: none;
  background: #1a1a1a;
}

.hero-location-map__leaflet {
  display: none;
}

.hero-location-map.is-expanded.is-google-maps .hero-location-map__gmaps {
  display: block;
}

.hero-location-map.is-expanded.is-google-maps .hero-location-map__leaflet {
  display: none;
}

.hero-location-map.is-expanded:not(.is-google-maps) .hero-location-map__leaflet {
  display: block;
}

.hero-location-map.is-expanded:not(.is-satellite-view):not(.is-google-maps)
  .hero-location-map__leaflet
  .leaflet-tile-pane {
  filter: brightness(1.1) contrast(0.9) saturate(0.72) hue-rotate(198deg) brightness(1.02);
}

.hero-location-map.is-expanded.is-satellite-view .hero-location-map__leaflet .leaflet-tile-pane {
  filter: none;
}

@media (min-width: 768px) {
  .hero-location-map.is-expanded .hero-location-map__expanded {
    overflow: hidden;
  }
}

.hero-location-map__leaflet.leaflet-container,
#hero-location-map-leaflet.leaflet-container {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  font-family: var(--font-body);
}

.hero-location-map__leaflet .leaflet-popup-content-wrapper {
  background: rgba(10, 26, 18, 0.94);
  color: var(--color-text);
  border: 1px solid var(--glass-border);
  border-radius: 0.65rem;
  box-shadow: var(--shadow-card);
}

.hero-location-map__leaflet .leaflet-popup-tip {
  background: rgba(10, 26, 18, 0.94);
}

.hero-location-map__leaflet .leaflet-popup-content {
  margin: 0.65rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.hero-location-map__leaflet .leaflet-popup-content h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gold);
}

.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-bottom.leaflet-right {
  right: var(--map-chrome-inset);
  bottom: var(--map-chrome-inset);
  margin: 0;
}

.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-control-zoom {
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-control-zoom a {
  max-width: var(--map-chrome-size);
  line-height: 1 !important;
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  text-indent: 0;
  text-decoration: none;
}

.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-touch .leaflet-control-zoom a {
  width: var(--map-chrome-size) !important;
  height: var(--map-chrome-size) !important;
  line-height: 1 !important;
}

.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-control-zoom-in {
  border-bottom: none !important;
}

.hero-location-map.is-expanded .hero-location-map__leaflet .leaflet-bar a.leaflet-disabled {
  opacity: 0.45;
  cursor: default;
}

.hero-location-map__map-controls {
  position: absolute;
  top: var(--map-chrome-inset);
  left: var(--map-chrome-inset);
  right: auto;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.45rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.hero-location-map.is-expanded .hero-location-map__map-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-location-map__map-controls.has-route-error {
  left: var(--map-chrome-inset);
  right: var(--map-chrome-inset);
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.hero-location-map__map-controls.has-route-error .hero-location-map__ctrl-group {
  align-self: flex-start;
}

.hero-location-map__ctrl-group {
  display: flex;
  gap: 0.2rem;
  pointer-events: auto;
}

.hero-location-map__route-info {
  display: none;
  margin: 0;
  padding: 0 0.65rem;
  min-height: var(--map-chrome-size);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--map-chrome-font);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--map-chrome-color);
  text-align: center;
  pointer-events: none;
}

.hero-location-map__route-info.is-route-error:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: var(--map-chrome-bg);
  border-color: var(--map-chrome-border);
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.hero-location-map__route-info.is-route-error:hover,
.hero-location-map__route-info.is-route-error:focus-visible {
  background: var(--map-chrome-hover-bg);
  color: var(--map-chrome-hover-color);
  border-color: var(--map-chrome-border);
  outline: none;
}

.hero-location-map__ctrl {
  cursor: pointer;
}

.hero-location-map__map-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(6, 16, 8, 0.55) 0%, transparent 28%),
    linear-gradient(to top, rgba(6, 16, 8, 0.92) 0%, rgba(6, 16, 8, 0.35) 42%, transparent 68%);
  pointer-events: none;
}

.hero-location-map.is-expanded .hero-location-map__map-scrim {
  display: none;
}

.hero-location-map__preview-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 120% at 18% 40%, rgba(62, 207, 142, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 42%),
    rgba(6, 14, 10, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

@media (max-width: 520px) {
  .hero-location-map__card {
    width: min(100%, 100%);
  }

  .hero-location-map__preview {
    min-height: 3.35rem;
  }
}

.hero-location-map__preview .hero-location-map__collapse {
  display: none;
}

.hero-location-map__collapse {
  display: none;
  margin-left: auto;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(212, 188, 122, 0.22);
  border-radius: 999px;
  background: rgba(6, 16, 8, 0.82);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s ease, color 0.2s ease;
}

.hero-location-map__collapse:hover,
.hero-location-map__collapse.is-proxy-hover {
  background: rgba(62, 207, 142, 0.15);
  color: var(--color-text);
}


@media (prefers-reduced-motion: reduce) {
  .hero-location-map__card,
  .hero__map-pin,
  .hero-location-map__map-controls {
    transition: none;
  }
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.85vw, 2.9rem);
  margin: 0 0 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: var(--color-text);
}

.hero__lead {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 34rem;
  margin: 0 auto 2rem;
  letter-spacing: 0.01em;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: 0.8rem 1.5rem;
  min-width: 7.25rem;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 55%, #073d26 100%);
  color: #fff !important;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 1px solid var(--color-gold-soft);
  cursor: pointer;
  line-height: 1.17647;
  font-family: inherit;
  letter-spacing: -0.022em;
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 8px 28px var(--color-accent-glow);
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease-out),
    background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(232, 213, 163, 0.45) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease-out);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 14px 40px var(--color-accent-glow);
  text-decoration: none;
}

.btn:hover::before {
  transform: translateX(120%);
}

.btn__label {
  position: relative;
  z-index: 1;
}

.btn__arrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: transform 0.35s var(--ease-spring);
  opacity: 0.9;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* Deep tactile click — sinks in on press (all .btn + pointer class from JS) */
.btn:active,
.btn.is-deep-pressed {
  transform: translateY(4px) scale(0.955);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.22);
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

.btn--ghost:active,
.btn--ghost.is-deep-pressed,
.btn--ghost.btn--fill-hover:active,
.btn--ghost.btn--fill-hover.is-deep-pressed {
  transform: translateY(3px) scale(0.97);
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn--fill-hover:active,
.btn--fill-hover.is-deep-pressed {
  background: linear-gradient(135deg, #2fb87a 0%, #0a4a30 55%, #052818 100%);
}

.btn--outline:active,
.btn--outline.is-deep-pressed {
  transform: translateY(3px) scale(0.97);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.35);
}

.btn--ghost,
.btn--ghost.btn--fill-hover {
  background: transparent;
  color: var(--color-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
}

.btn--ghost:not(.btn--fill-hover):hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
  transform: translateY(-2px);
  text-decoration: none;
}

.btn--ghost::before {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%
  );
}

/* Explore services: ghost by default, emerald fill on hover */
.btn--fill-hover:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 55%, #073d26 100%);
  border-color: var(--color-gold-soft);
  color: #fff !important;
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 14px 40px var(--color-accent-glow);
  transform: translateY(-2px) scale(1.02);
}

.btn--fill-hover:hover::before {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(232, 213, 163, 0.45) 50%,
    transparent 65%
  );
  transform: translateX(120%);
}

.btn--outline {
  background: transparent;
  color: var(--color-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
  transform: translateY(-2px);
}

.hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.hero__actions .btn {
  width: auto;
  flex: 1 1 auto;
  min-width: min(100%, 9.5rem);
  max-width: 16rem;
}

/* Match ghost CTA outer height (padding + line box + border), then square the map pin */
.hero__actions .hero__map-pin.btn--ghost {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  width: calc(0.85rem * 2 + 1.17647em + 2px);
  height: calc(0.85rem * 2 + 1.17647em + 2px);
  padding: 0;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
}

.hero__actions .hero__map-pin.btn--ghost svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.hero__map-pin-hint {
  margin: 0.45rem 0 0;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.hero__actions:has(.hero__map-pin:hover) + .hero__map-pin-hint,
.hero__actions:has(.hero__map-pin:focus-visible) + .hero__map-pin-hint {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .hero__actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
  }
}

.section-title {
  font-size: var(--section-heading-size);
  margin: 0 0 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: none;
  display: block;
  color: var(--color-text);
}

/* Variant where the heading is rendered as a textured wordmark image instead of
   live text. Sized so the image's visual height matches the live `.section-title`
   font-size clamp, preserving the original layout. */
.section-title--image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 0 0.5rem;
  line-height: 1;
}

.section-title__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 460px);
  max-height: clamp(2rem, 3.8vw, 2.9rem);
  object-fit: contain;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
}

@media (max-width: 720px) {
  .about-story__intro .section-title__img {
    max-height: clamp(1.35rem, 5.6vw, 1.85rem);
    max-width: min(74vw, 280px);
  }

  .section-title__img {
    max-height: clamp(1.65rem, 6.8vw, 2.25rem);
    max-width: min(74vw, 340px);
  }
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Services carousel — peek slides + infinite drag */
.services-carousel {
  /* Narrower slides so center + both peeks fit without clipping */
  --slide-width: min(280px, 54vw);
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

#services .container {
  overflow: visible;
}

#services {
  scroll-margin-top: 5.5rem;
  /* Pulls the "Our services" heading + description (and the carousel below)
     higher on the page than the default 3rem .page-section top padding. */
  padding-top: 1.25rem;
}

@media (max-width: 720px) {
  #about.page-section {
    padding-bottom: 0.65rem;
  }

  #services {
    /* The services section fills exactly one phone viewport (100dvh) so the
       same self-contained "card row" experience appears regardless of phone
       size — content is vertically centered, the previous section never
       leaks in from above, and the next section never leaks in from below.
       Internal gaps below switch to vh-based clamp() values so on bigger
       phones (Pro / Max / Ultra) the extra vertical space is distributed
       evenly around the existing content instead of opening up a single
       empty band. */
    margin-top: 0;
    padding-top: 0.85rem;
    /* Small bottom padding now that the stack is top-aligned (flex-start)
       below — any leftover space within the 100dvh section naturally falls
       at the bottom rather than the previous justify-content: center splitting
       it into wasted bands above the heading and below the dots. */
    padding-bottom: clamp(0.5rem, 1.5vh, 1.25rem);
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Top-align the content stack: the "Our services" heading rides right
       under the fixed header instead of floating in a band of dead space
       below it. The figure/hint/description gaps are managed explicitly
       below so the middle of the slide has visible breathing room. */
    justify-content: flex-start;
    /* Header clearance for in-page #services links without a tall dead band
       above the title when scrolling up from the about scrapbook. */
    scroll-margin-top: var(--header-clearance, 4.85rem);
  }

  #services > .container {
    width: 100%;
  }

  /* Heading → description gap scales with viewport height. */
  #services .section-title--image {
    margin-bottom: clamp(0.4rem, 1.4vh, 1.25rem);
  }

  /* Description → tablet heading gap scales with viewport height (and
     overrides the inline `margin: 0 auto 2rem` on the .prose element).
     The description text itself also drops a touch on mobile so it reads
     as supporting copy under the heading instead of competing with it.
     Bottom margin pulled tighter so the tablet caption sits closer to the
     description (was clamp(0.5rem, 1.8vh, 1.5rem)). */
  #services .section-title--image + .prose {
    margin-bottom: clamp(0.15rem, 0.8vh, 0.7rem) !important;
    font-size: clamp(0.78rem, 3.4vw, 0.92rem);
    line-height: 1.45;
    /* Slight horizontal inset so the description's left/right text walls
       pull in from the container edge — text reads as a comfortably
       inset paragraph instead of running right up to the side padding. */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.services-section__outro {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.services-carousel__hint {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.85;
}

.services-carousel__shell {
  position: relative;
  overflow: hidden;
  padding: 0 0.5rem;
}

.services-carousel__viewport {
  overflow: visible;
  padding: 1.25rem 0.35rem 2rem;
  outline: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.services-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.services-carousel__track {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  width: max-content;
  will-change: transform;
  padding-bottom: 0.35rem;
}

.services-carousel__track.is-animating {
  transition: transform 0.5s var(--ease-out);
}

.services-carousel__slide {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--slide-width);
  max-width: var(--slide-width);
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.5s var(--ease-out),
    filter 0.5s var(--ease-out);
  opacity: 0.3;
  transform: scale(0.78) translateY(16px);
  transform-origin: center bottom;
  filter: brightness(0.86);
  cursor: pointer;
  pointer-events: auto;
}

.services-carousel__slide.is-adjacent {
  z-index: 3;
  opacity: 0.62;
  transform: scale(0.86) translateY(8px);
  filter: brightness(0.93);
}

.services-carousel__slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(0.96) translateY(0);
  filter: brightness(1);
  cursor: default;
  pointer-events: none;
}

.services-carousel__slide.is-active .card,
.services-carousel__slide.is-active .service-slide-panel {
  pointer-events: auto;
}

.services-carousel__slide .card {
  height: 100%;
  min-height: 12.5rem;
}

.services-carousel__slide:not(.is-active) .card {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.services-carousel__slide.is-adjacent:hover {
  opacity: 0.68;
}

.services-carousel__slide:not(.is-active):not(.is-adjacent):hover {
  opacity: 0.45;
}

.services-carousel__slide:not(.is-active):hover .card,
.services-carousel__slide.is-adjacent:hover .card {
  border-color: rgba(62, 207, 142, 0.35);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 1px 0 var(--glass-highlight) inset;
}

.services-carousel__caption-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(3.5rem, 12vw, 5.5rem);
  margin: 0 0 1.25rem;
  padding: 0 0.75rem;
  overflow: visible;
}

.services-carousel__caption {
  margin: 0;
  text-align: center;
  width: 100%;
}

.services-carousel__caption-line {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.22em;
  max-width: min(40rem, 100%);
  min-height: 1.2em;
  overflow: visible;
  /* Match .section-title / .about-story__stand-for ("We stand for") */
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 5.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: rgba(232, 245, 236, 0.72);
}

.services-carousel__caption-line.is-changing {
  pointer-events: none;
}

.services-carousel__caption-word {
  display: inline-block;
  /* Animation switched to a pure fade — no slide-in/out — so the previous
     overflow: hidden clip box (and its padding/margin compensation) is no
     longer needed. Removing the clip eliminates the visible edge line that
     showed where the slide animation entered/exited. */
  line-height: 1.12;
  vertical-align: middle;
}

@media (min-width: 721px) {
  .services-carousel__caption-wrap {
    min-height: 4.5rem;
    /* Tighter gap below the tablet heading on PC so it reads as belonging
       to the tablet immediately under it (was 1.5rem). */
    margin-bottom: 0.6rem;
  }

  .services-carousel__caption-line {
    text-transform: capitalize;
    font-size: clamp(1.4rem, 2.4vw, 2.25rem);
    max-width: 44rem;
    /* Tablet heading reads as pure white on PC for stronger contrast. */
    color: #fff;
  }
}

.services-carousel__caption-word-inner {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  will-change: transform, opacity;
}

.services-carousel__caption-word-inner.is-in {
  animation: serviceCaptionIn 0.52s var(--ease-out) backwards;
  animation-delay: calc(var(--word-i, 0) * 0.075s);
}

.services-carousel__caption-word-inner.is-out {
  animation: serviceCaptionOut 0.3s ease-in forwards;
  animation-delay: calc(var(--word-i, 0) * 0.045s);
}

/* Pure-fade caption transitions — no translate, so there's no clipping
   boundary or visible "line" where text slides in or out. */
@keyframes serviceCaptionIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes serviceCaptionOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.services-carousel__slide .card--service {
  position: relative;
}

.services-carousel__slide .card--service .card__service-head {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  margin: 0;
  line-height: 0;
}

.services-carousel__slide .card--service p {
  padding-right: 2.35rem;
}

/* Pixel-art service slides — open layout (image + text, no glass card) */
.services-carousel__slide .service-slide-panel--stamps,
.services-carousel__slide .service-slide-panel--mailbox,
.services-carousel__slide .service-slide-panel--shipping,
.services-carousel__slide .service-slide-panel--passport,
.services-carousel__slide .service-slide-panel--supply,
.services-carousel__slide .service-slide-panel--notary,
.services-carousel__slide .service-slide-panel--drop,
.services-carousel__slide .service-slide-panel--gifts,
.services-carousel__slide .service-slide-panel--biz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 12.5rem;
  padding: 0.35rem 0.5rem 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
}

.services-carousel__slide .service-slide-panel--stamps .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--mailbox .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--shipping .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--passport .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--supply .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--notary .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--drop .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--gifts .service-slide-panel__figure,
.services-carousel__slide .service-slide-panel--biz .service-slide-panel__figure {
  margin: 0 0 1.35rem;
  width: min(11.75rem, 72%);
  max-width: 220px;
  aspect-ratio: 220 / 316;
  line-height: 0;
  flex: 0 0 auto;
}

.services-carousel__slide .service-slide-panel__figure img {
  display: block;
  /* Fill the figure so when the figure is enlarged (e.g. on PC) the tablet
     artwork scales up with it instead of staying locked at its original
     220px source width. */
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 220 / 316;
}

/* 8-bit block tablet — square extrusion + stepped depth (no rounded corners) */
.service-tablet-3d__stage {
  perspective: 880px;
  perspective-origin: 50% 44%;
}

.service-tablet-3d__slab {
  --pixel-step: 5px;
  --bezel-light: #3a5a4a;
  --bezel-mid: #22352c;
  /* Right border is now a lighter "edge highlight" strip that sits between the
     front face and the deep shadow behind, so the depth's outer edge reads
     clearly against the page background. */
  --bezel-dark: #2a4337;
  --bezel-shadow: #050a07;
  /* Single depth color — sits slightly above the page background (#0a1a12)
     so the outer right + outer bottom edges of the L stand out clearly
     against the page, while still reading darker than the front face. */
  --face-depth: #141f1a;

  position: relative;
  transform: rotateX(9deg) rotateY(-11deg);
  transform-style: preserve-3d;
  border-radius: 0;
  padding: var(--pixel-step);
  background: var(--bezel-mid);
  border: var(--pixel-step) solid var(--bezel-light);
  border-right-color: var(--bezel-dark);
  border-bottom-color: var(--bezel-shadow);
  box-shadow:
    var(--pixel-step) 0 0 0 var(--face-depth),
    0 var(--pixel-step) 0 0 var(--face-depth),
    var(--pixel-step) var(--pixel-step) 0 0 var(--face-depth),
    /* Subtle sage-green bloom just outside the right + bottom depth.
       Negative spread keeps it tight to the edge (no full halo), but the
       offset + alpha are tuned to actually lift the outer contour of the
       depth off the dark page background. */
    14px 0 22px -3px rgba(96, 156, 118, 0.42),
    0 14px 22px -3px rgba(96, 156, 118, 0.42),
    0 22px 38px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s var(--ease-out);
}

.services-carousel__slide.is-active .service-tablet-3d__slab {
  transform: rotateX(7deg) rotateY(-8deg) translateY(-2px);
}

/* Pseudo-element overlays disabled — they were sitting on top of the right
   and bottom borders but couldn't reach the top-right / bottom-left corner
   miters (because absolute positioning measures from the padding box, not
   the slab's outer edge), which created a visible step at the corners.
   The slab's box-shadow stops already paint the full external L-depth
   cleanly, so the overlays are redundant. */
.service-tablet-3d__slab::before,
.service-tablet-3d__slab::after {
  content: none;
}

.service-tablet-3d__slab img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Soft inner bevel only — no hard outline so nothing reads as a line. */
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.07),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25);
}

.service-tablet-3d__stage {
  position: relative;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .service-tablet-3d__slab {
    transform: none;
    transition: none;
  }

  .services-carousel__slide.is-active .service-tablet-3d__slab {
    transform: none;
  }
}

.services-carousel__slide .service-slide-panel--stamps .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--mailbox .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--shipping .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--passport .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--supply .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--notary .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--drop .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--gifts .service-slide-panel__text,
.services-carousel__slide .service-slide-panel--biz .service-slide-panel__text {
  margin: 0;
  padding: 0 0.35rem;
  /* PC default: larger text (1.15rem) and proportionally wider container
     (30em ≈ 26em × 1.15) so each tablet's description reads bigger without
     wrapping onto more lines. The em-based max-width tracks font-size, so
     the wrap points stay nearly identical to the prior 1rem / 26em sizing.
     Mobile overrides both values below. */
  max-width: 30em;
  min-height: 4.5em;
  color: var(--color-text-muted);
  font-size: 1.15rem;
  line-height: 1.5;
  text-align: center;
  flex: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.services-carousel__slide.is-active .service-slide-panel__text {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 6;
  transition: opacity 280ms ease 80ms, visibility 0s linear 0s;
}

.service-slide-panel__hint {
  display: none;
  margin: 0 0 0.35rem;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Base colour is the same warm gold the rest of the page uses; the shine
     below paints over it via background-clip: text so the highlight sweep
     stays confined to the glyphs themselves (no rectangular halo). The
     plain `color` declaration acts as a fallback for any browser without
     background-clip:text support, where the text just stays solid gold. */
  color: var(--color-gold);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.services-carousel__slide.is-active .service-slide-panel__hint {
  opacity: 0.9;
  visibility: visible;
  position: relative;
  z-index: 6;
  transition: opacity 280ms ease 80ms, visibility 0s linear 0s;
}

@media (max-width: 720px) {
  .service-slide-panel__hint {
    display: block;
  }
}

/* Gold shine sweep on the "tap to browse" hint. Gated on @supports so
   browsers that can't clip a background image to text fall back to the
   plain gold colour above instead of rendering invisible text. The
   gradient is 220% wide with the bright apex at 50% and both ends pinned
   to the base gold, so when the keyframe parks at either end the text
   reads as solid gold. The animation parks at the start position for the
   first 90% of its 10s duration, sweeps across in the final 10% (~1s),
   then the iteration restart between identical gold "edges" is invisible
   — so the user sees a single subtle pass of the highlight roughly every
   10 seconds. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .service-slide-panel__hint {
    background-image: linear-gradient(
      90deg,
      var(--color-gold) 0%,
      var(--color-gold) 38%,
      #fff4c8 50%,
      var(--color-gold) 62%,
      var(--color-gold) 100%
    );
    background-size: 220% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hintShine 10s ease-in-out infinite;
  }
}

@keyframes hintShine {
  0% {
    background-position: 100% 0;
  }
  90% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-slide-panel__hint {
    animation: none;
  }
}

.services-carousel__slide .service-slide-panel--stamps .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--mailbox .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--shipping .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--passport .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--supply .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--notary .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--drop .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--gifts .service-slide-panel__text strong,
.services-carousel__slide .service-slide-panel--biz .service-slide-panel__text strong {
  color: var(--color-text);
  font-weight: 600;
}

.services-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.services-carousel__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition:
    transform 0.25s var(--ease-spring),
    background 0.25s ease;
}

.services-carousel__dot.is-active {
  background: var(--color-accent);
  transform: scale(1.25);
}

.services-carousel__dot:hover {
  background: rgba(62, 207, 142, 0.65);
}

.services-carousel__dot:active,
.services-carousel__dot.is-deep-pressed {
  transform: scale(0.82);
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

.services-carousel__dot.is-active:active,
.services-carousel__dot.is-active.is-deep-pressed {
  transform: scale(1.05);
}

@media (max-width: 720px) {
  .services-carousel {
    --slide-width: min(250px, 64vw);
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    width: calc(100% + 2.5rem);
    max-width: calc(100% + 2.5rem);
  }

  .services-carousel__hint {
    display: none;
  }

  .services-carousel__caption-wrap {
    /* Textbox cropped tight to the visible glyphs — was
       min-height: clamp(1.8rem, 5vh, 3rem), which extended ~10–15px of
       invisible padding below the text. The tablet's upward-fading
       shadow was visually getting sliced where that invisible textbox
       ended; collapsing it to the line height eliminates that perceived
       cut line.

       Margin-bottom stays at the original tight value so the heading
       continues to hug the tablet right below it (no extra compensation
       — we WANT the carousel to ride up slightly with the dead band
       gone). */
    min-height: 1.2em;
    align-items: center;
    margin-bottom: clamp(0.35rem, 1vh, 0.85rem);
  }

  .services-carousel__caption-line {
    /* Even larger + pure white on mobile so the tablet heading reads as the
       primary label of the slide instead of receding into the background.
       Was clamp(1.3rem, 5.6vw, 1.9rem) → clamp(1.05rem, 4.4vw, 1.5rem).
       Top end stays under the caption-wrap min-height ceiling (3rem) and
       narrow enough that the longest caption ("Package drop/receive") still
       fits on a single line on a 390px-wide phone, so the tablet, dots, and
       description below do not get pushed down. */
    font-size: clamp(1.55rem, 6.8vw, 2.25rem);
    color: #fff;
    text-transform: capitalize;
  }

  .services-carousel__track {
    gap: 0;
  }

  .services-carousel__shell {
    /* The shell keeps `overflow: hidden` so neighbour slides don't leak
       past the carousel sides. To stop the active tablet's upward-
       fading shadow (the dark drop shadow's 38px blur exceeds its 22px
       offset, so it visually extends ~16px above the slab; perspective
       tilt adds a few more pixels) from being sliced off at the shell's
       top clip line, the shell is padded ~44px downward and pulled back
       up by an equal margin. That keeps the slab anchored to the
       caption above it visually but moves the clip boundary well clear
       of the shadow's upward fade. Bumped from 1.75rem (which still
       cut on some devices) to 2.75rem for a bigger safety margin. */
    padding: 2.75rem 0 0;
    margin-top: -2.75rem;
    /* And the top edge of the shell gets a small mask fade so anything
       that still happens to reach the clip line dissolves smoothly into
       transparency instead of terminating on a hard horizontal line —
       killing the "cut by the invisible textbox" perception entirely. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 1.6rem,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 1.6rem,
      #000 100%
    );
  }

  .services-carousel__viewport {
    /* Top padding shaved down so the tablet sits closer to the caption above
       it. Bottom padding zeroed so the dots ride directly against the
       description block — the user wants the description text reading right
       above the dots, no breathing room between. */
    padding: 0;
  }

  .service-slide-panel__hint {
    margin-bottom: 0;
  }

  .services-carousel__slide.is-active {
    z-index: 5;
    transform: scale(1) translateY(0);
  }

  .services-carousel__slide.is-adjacent {
    z-index: 1;
    opacity: 0.78;
    transform: scale(0.72) translateY(-18px);
  }

  .services-carousel__slide.is-adjacent-left {
    transform-origin: 100% bottom;
    transform: scale(0.72) translate(26%, -18px);
  }

  .services-carousel__slide.is-adjacent-right {
    transform-origin: 0% bottom;
    transform: scale(0.72) translate(-26%, -18px);
  }

  .services-carousel__slide .service-slide-panel--stamps .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--mailbox .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--shipping .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--passport .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--supply .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--notary .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--drop .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--gifts .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--biz .service-slide-panel__figure {
    width: 92%;
    /* Tablet artwork scales with viewport height on mobile so taller phones
       get a slightly larger tablet (and a proportionally larger figure → text
       → dots rhythm) without spilling off the sides. The vw cap stops the
       tablet from going past the slide width on very narrow phones. */
    max-width: clamp(180px, 28vh, 230px);
    /* Bigger gap between the tablet artwork and the "swipe to browse" hint
       below it — the figure no longer crowds the hint, and the hint reads as
       its own row instead of sticking to the bottom edge of the tablet.
       Was clamp(0.45rem, 1.2vh, 1rem). */
    margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
  }

  .services-carousel__slide .service-slide-panel__figure img {
    width: 100%;
    max-width: 100%;
  }

  /* Description text — matches the specificity of the global per-panel
     selector ( .services-carousel__slide .service-slide-panel--xxx
     .service-slide-panel__text { margin: 0 } ) so the bigger mobile
     margin-top actually wins the cascade. Without targeting every panel
     variant by name the global rule silently zeroed this out. */
  .services-carousel__slide .service-slide-panel--stamps .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--mailbox .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--shipping .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--passport .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--supply .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--notary .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--drop .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--gifts .service-slide-panel__text,
  .services-carousel__slide .service-slide-panel--biz .service-slide-panel__text {
    width: clamp(280px, 88vw, 400px);
    max-width: clamp(280px, 88vw, 400px);
    /* Smaller top margin pulls the description closer to the "swipe to
       browse" hint above it, so the hint reads as a label sitting just
       under the tablet's bottom edge and the description follows almost
       immediately. Was clamp(1.75rem, 4.5vh, 3rem). */
    margin: clamp(0.5rem, 1.4vh, 1.1rem) 0 0;
    padding: 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.45;
    min-height: 5.8em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .services-carousel__dots {
    /* Dots top margin trimmed so the dots ride closer to the description
       text above them — the gap from the dots down to the "Questions? Get
       in touch" button stays larger, but the visual link between the
       description and the dots tightens. Was clamp(0.6rem, 1.6vh, 1.25rem). */
    margin-top: clamp(0.15rem, 0.5vh, 0.5rem);
    /* Pull the dots row up off the bottom edge of the description block
       without disturbing layout. The description container has a fixed
       min-height (so the dots don't jump between slides whose copy is 3 vs
       4 lines), which leaves dead space below shorter descriptions; this
       translate hops the dots over that dead band so they sit visibly
       higher up the screen, closer to the actual text, while the
       "Questions? Get in touch" button below stays exactly where it was. */
    transform: translateY(clamp(-0.75rem, -1.4vh, -0.3rem));
  }

  .services-section__outro {
    margin-top: clamp(0.6rem, 1.6vh, 1.25rem);
  }
}

@media (min-width: 721px) {
  /* Equalize the vertical gaps around the services description on PC:
     heading → description and description → carousel caption both land at
     1.5rem, instead of the prior 0.5rem above / 2rem below. */
  #services .section-title--image {
    margin-bottom: 1.5rem;
  }

  #services .section-title--image + .prose {
    /* Slightly tighter gap from the description down to the tablet heading
       on PC (was 1.5rem). */
    margin-bottom: 0.75rem !important;
  }

  .services-carousel {
    /* Enlarged slot so each tablet renders bigger on PC, but sized so the
       whole services section still fits on screen when "Our services" is
       clicked. */
    --slide-width: min(320px, 35%);
    /* Break out of the 980px container so the active + 4 peeks fit. Hard cap
       at 1680px keeps the 5-tablet layout intact on 27"+ / 32" monitors
       (a 6th would need 6 × 320 = 1920px which exceeds the cap). */
    width: min(1680px, calc(100vw - 2rem));
    max-width: min(1680px, calc(100vw - 2rem));
    margin-left: calc(50% - min(840px, 50vw - 1rem));
    margin-right: calc(50% - min(840px, 50vw - 1rem));
  }

  .services-carousel__shell {
    padding: 0 1.5rem;
    /* Soft fade on the left + right edges so tablets entering or leaving
       the visible row dissolve through the edge instead of slamming into
       a hard clip line. The fade only covers the outermost ~3rem of each
       side, so the active card and the inner adjacent peeks stay fully
       opaque — only the very edge of the row gets the softening. */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 3rem,
      #000 calc(100% - 3rem),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 3rem,
      #000 calc(100% - 3rem),
      transparent 100%
    );
  }

  .services-carousel__viewport {
    /* Zero the top padding on PC so caption-wrap → tablet gap matches the
       description → caption-wrap gap (both land at ~1.5rem of slack plus
       half the caption-wrap min-height on either side of the heading text).
       Trim the bottom padding from the inherited 2rem → 0.9rem so the
       tablet description sits closer to the carousel dots. */
    padding-top: 0;
    padding-bottom: 0.9rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    cursor: default;
  }

  /* Larger tablet figure on PC — caps at 232px wide so the tablet renders
     about 232 × 333 px (vs the original 188 × 270). Mobile keeps its own
     smaller override. */
  .services-carousel__slide .service-slide-panel--stamps .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--mailbox .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--shipping .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--passport .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--supply .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--notary .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--drop .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--gifts .service-slide-panel__figure,
  .services-carousel__slide .service-slide-panel--biz .service-slide-panel__figure {
    width: min(14.5rem, 76%);
    max-width: 232px;
  }

  /* Shipping & postal has the longest copy of any tablet. The slide slot is
     ~320px wide, so an em-based max-width gets clamped by the parent; we
     need an explicit `width` larger than the slot to actually force the
     description wider. align-items: center on .service-slide-panel keeps it
     centered, and the shell (much wider than a single slide) doesn't clip
     the overflow. 24rem (~384px) is wide enough to drop the wrap from 5
     lines to 4. */
  .services-carousel__slide .service-slide-panel--shipping .service-slide-panel__text {
    width: 22rem;
    max-width: 22rem;
  }

  /* Slides outside the visible 5 (active + 2 adjacents + 2 far) stay invisible
     so a 6th tablet never leaks at the edges on wide monitors. The 0.5s opacity
     transition still animates new slides smoothly into the far slot. */
  .services-carousel__slide {
    opacity: 0;
  }

  /* Side peeks sit above the scaled center card so mouse clicks register on PC */
  .services-carousel__slide.is-adjacent {
    z-index: 5;
  }

  /* Outermost visible pair — smaller and dimmer so the row "edges off". */
  .services-carousel__slide.is-adjacent-far {
    z-index: 4;
    opacity: 0.22;
    transform: scale(0.6) translateY(22px);
    filter: brightness(0.72);
    pointer-events: none;
  }

  /* Faster track translate on PC — compresses the "tablet sliding in from
     behind the shell's clip edge" moment so the emergence is less
     noticeable. Mobile keeps the 0.5s feel. */
  .services-carousel__track.is-animating {
    transition: transform 0.34s var(--ease-out);
  }

  .services-carousel__slide.is-active {
    z-index: 1;
  }

  .services-carousel__slide.is-adjacent,
  .services-carousel__slide.is-adjacent .card {
    cursor: pointer;
  }
}

@media (min-width: 900px) {
  .services-carousel__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-carousel__track.is-animating {
    transition: none;
  }

  .services-carousel__slide {
    transition: none;
  }

  .services-carousel__caption-word-inner.is-in,
  .services-carousel__caption-word-inner.is-out {
    animation: none;
  }
}

.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 1.5rem;
  box-shadow:
    var(--shadow-card),
    0 1px 0 var(--glass-highlight) inset;
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.3s ease,
    box-shadow 0.4s var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 169, 98, 0.32);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 1px 0 var(--glass-highlight) inset;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }

  .btn:active,
  .btn.is-deep-pressed {
    transform: none;
    box-shadow:
      0 1px 0 var(--glass-highlight) inset,
      0 8px 28px var(--color-accent-glow);
  }

  .btn--ghost:active,
  .btn--ghost.is-deep-pressed {
    box-shadow: none;
    background: transparent;
  }

  .btn::before {
    display: none;
  }

  .btn:hover .btn__arrow {
    transform: none;
  }

  .call-fab:active,
  .call-fab.is-deep-pressed {
    transform: none;
  }

  .nav-toggle:active,
  .nav-toggle.is-deep-pressed {
    transform: none;
  }

  .services-carousel__dot:active,
  .services-carousel__dot.is-deep-pressed {
    transform: none;
  }
}

.card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.1875rem;
  font-weight: 600;
  position: relative;
  padding-right: 2rem;
  padding-top: 0;
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.card p strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Package tracking — custom mobile rug tablet + desktop heritage frame */

.tracking-tablet-3d,
.tracking-tablet-3d__stage,
.tracking-tablet-3d__motion,
.tracking-tablet-3d__slab,
.tracking-tablet-3d__frame,
.tracking-tablet-3d__screen,
.tracking-tablet-3d__border,
.tracking-tablet-3d__emblem {
  user-select: none;
  -webkit-user-select: none;
}

.tracking-tablet-3d__border,
.tracking-tablet-3d__emblem {
  -webkit-user-drag: none;
  user-drag: none;
}

.tracking-panel__form input {
  user-select: text;
  -webkit-user-select: text;
}

.tracking-panel {
  margin: 0;
  padding: 0;
}

.tracking-tablet-3d__stage {
  display: block;
  position: relative;
  perspective: 1000px;
  perspective-origin: center center;
}

.tracking-tablet-3d__motion {
  --tracking-scroll-rotate-x: 20deg;
  --tracking-scroll-scale: 1.05;
  --tracking-scroll-y: 4.5rem;
  transform-origin: center center;
  transform: translate3d(0, var(--tracking-scroll-y), 0)
    rotateX(var(--tracking-scroll-rotate-x))
    scale(var(--tracking-scroll-scale));
  transform-style: preserve-3d;
  will-change: transform;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .tracking-tablet-3d__motion {
    --tracking-scroll-rotate-x: 0deg;
    --tracking-scroll-scale: 1;
    --tracking-scroll-y: 0;
    transform: none;
    will-change: auto;
  }

}

/* Mobile / narrow: flat glass panel */
.tracking-tablet-3d__slab {
  border-radius: var(--radius-glass);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.tracking-tablet-3d__border {
  display: none;
}

.tracking-tablet-3d__border--mobile {
  display: none;
}

.tracking-tablet-3d__screen {
  /* Mobile: custom CSS rug interior; desktop: invisible overlay on the frame image */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 1.75rem 1.5rem;
}

.tracking-panel__art--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.tracking-panel__img {
  display: block;
  width: auto;
  max-width: min(220px, 45vw);
  max-height: 100px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.tracking-panel__content {
  min-width: 0;
}

.tracking-panel__title {
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  margin: 0 0 0.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.tracking-panel__text {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: min(100%, 52ch);
}

.tracking-panel__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}

/* Input field — sage mini-tablet slab (matches Track key) */
.tracking-input-tablet {
  flex: 1 1 160px;
  min-width: 0;
  align-self: stretch;
  display: flex;
}

.tracking-input-tablet__slab {
  --input-bezel: 2px;
  --input-bezel-light: #d8ead8;
  --input-bezel-dark: #9eb09e;
  --input-bezel-shadow: #6a826a;
  --input-face-depth: #a8baa8;
  --input-face: #c8dcc8;

  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 0;
  background: var(--input-face);
  border: var(--input-bezel) solid var(--input-bezel-light);
  border-right-color: var(--input-bezel-dark);
  border-bottom-color: var(--input-bezel-shadow);
  box-shadow:
    var(--input-bezel) 0 0 0 var(--input-face-depth),
    0 var(--input-bezel) 0 0 var(--input-face-depth),
    var(--input-bezel) var(--input-bezel) 0 0 var(--input-face-depth);
  overflow: hidden;
  transition:
    transform 0.07s ease-out,
    box-shadow 0.07s ease-out,
    border-color 0.07s ease-out,
    background 0.12s ease-out;
}

.tracking-input-tablet__slab:has(input:focus:not(:active)) {
  background: #d4e8d4;
}

.tracking-input-tablet__slab:has(input:active),
.tracking-input-tablet__slab:has(input:focus-visible:active),
.tracking-input-tablet__slab.is-deep-pressed {
  transform: translate(var(--input-bezel), var(--input-bezel));
  background: #a8bca8;
  box-shadow: none;
  border-top-color: var(--input-bezel-shadow);
  border-left-color: var(--input-bezel-shadow);
  border-right-color: var(--input-bezel-light);
  border-bottom-color: var(--input-bezel-light);
}

.tracking-input-tablet__slab:has(input:focus-visible) {
  outline: 1px solid rgba(122, 158, 132, 0.55);
  outline-offset: 1px;
}

.tracking-input-tablet__slab input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
  background: transparent;
  color: #1a2e24;
  box-shadow: none;
  transition: color 0.12s ease-out;
}

.tracking-input-tablet__slab input::placeholder {
  color: #6b7a72;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tracking-input-tablet__slab input:focus {
  outline: none;
  box-shadow: none;
}

/* Track key — hairline bezel, same plane as the tracking field; whole slab presses in */
.tracking-track-tablet {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
}

.tracking-track-tablet__slab {
  --track-bezel: 2px;
  --bezel-light: #3a5a4a;
  --bezel-dark: #2a4337;
  --bezel-shadow: #050a07;
  --face-depth: #141f1a;
  --track-face: #243d31;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 0;
  background: var(--track-face);
  border: var(--track-bezel) solid var(--bezel-light);
  border-right-color: var(--bezel-dark);
  border-bottom-color: var(--bezel-shadow);
  box-shadow:
    var(--track-bezel) 0 0 0 var(--face-depth),
    0 var(--track-bezel) 0 0 var(--face-depth),
    var(--track-bezel) var(--track-bezel) 0 0 var(--face-depth);
  overflow: hidden;
  transition:
    transform 0.07s ease-out,
    box-shadow 0.07s ease-out,
    border-color 0.07s ease-out,
    background 0.12s ease-out;
}

.tracking-track-tablet__slab:has(.tracking-track-btn:hover) {
  background: #2a4a3a;
}

.tracking-track-btn {
  flex: 0 0 auto;
  font-size: 1rem;
}

.tracking-track-tablet__slab .tracking-track-btn.btn {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 5rem;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #f5f8f4 !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: none;
}

.tracking-track-tablet__slab .tracking-track-btn.btn:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
}

.tracking-track-tablet__slab .tracking-track-btn.btn::before {
  display: none;
}

.tracking-track-tablet__slab:has(.tracking-track-btn:active),
.tracking-track-tablet__slab:has(.tracking-track-btn:focus-visible:active),
.tracking-track-tablet__slab.is-deep-pressed {
  transform: translate(var(--track-bezel), var(--track-bezel));
  background: #142820;
  box-shadow: none;
  border-top-color: var(--bezel-shadow);
  border-left-color: var(--bezel-shadow);
  border-right-color: var(--bezel-light);
  border-bottom-color: var(--bezel-light);
}

.tracking-track-tablet__slab .tracking-track-btn.btn:active,
.tracking-track-tablet__slab .tracking-track-btn.btn.is-deep-pressed {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.tracking-track-tablet__slab .tracking-track-btn.btn:hover .btn__arrow {
  transform: none;
}

.tracking-track-tablet__slab .tracking-track-btn.btn:focus {
  outline: none;
}

.tracking-track-tablet__slab .tracking-track-btn.btn:focus-visible {
  outline: 1px solid rgba(122, 158, 132, 0.55);
  outline-offset: 1px;
}

/* Mobile: generated cross-stitch rug panel + pixel bezel (not the PC frame asset) */
@media (max-width: 720px) {
  .tracking-tablet-3d__stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    perspective: 1000px;
    perspective-origin: center center;
  }

  .tracking-tablet-3d__motion {
    transform-origin: center center;
    transform-style: preserve-3d;
  }

  .tracking-tablet-3d__slab {
    --pixel-step: 3px;
    --bezel-light: #34564a;
    --bezel-mid: #1a2e26;
    --bezel-dark: #243d34;
    --bezel-shadow: #040807;
    --face-depth: #101a16;

    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    border-radius: 0;
    padding: var(--pixel-step);
    background: var(--bezel-mid);
    border: var(--pixel-step) solid var(--bezel-light);
    border-right-color: var(--bezel-dark);
    border-bottom-color: var(--bezel-shadow);
    box-shadow:
      var(--pixel-step) 0 0 0 var(--face-depth),
      0 var(--pixel-step) 0 0 var(--face-depth),
      var(--pixel-step) var(--pixel-step) 0 0 var(--face-depth),
      0 10px 22px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(62, 207, 142, 0.12);
    transition:
      transform 0.07s ease-out,
      box-shadow 0.07s ease-out,
      border-color 0.07s ease-out,
      background 0.12s ease-out;
    pointer-events: auto;
  }

  .tracking-tablet-3d__slab.is-pressed {
    transform: translate(var(--pixel-step), var(--pixel-step));
    background: #1a2e24;
    box-shadow: none;
    border-top-color: var(--bezel-shadow);
    border-left-color: var(--bezel-shadow);
    border-right-color: var(--bezel-light);
    border-bottom-color: var(--bezel-light);
  }

  .tracking-tablet-3d__frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1024 / 552;
    line-height: 0;
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .tracking-tablet-3d__border:not(.tracking-tablet-3d__border--mobile) {
    display: none;
  }

  .tracking-tablet-3d__border--mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: fill;
    image-rendering: auto;
    pointer-events: none;
  }

  .tracking-tablet-3d__screen {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    display: block;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }

  .tracking-tablet-3d__view--track {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 2;
    display: block;
    width: min(68%, 16rem);
    pointer-events: auto;
  }

  .tracking-tablet-3d__emblem,
  .tracking-panel__art--mobile {
    display: none;
  }

  .tracking-panel__title,
  .tracking-panel__text {
    display: none;
  }

  .tracking-panel__content {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    pointer-events: auto;
  }

  .tracking-panel__form {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.28rem;
    width: 100%;
    margin: 0;
    padding: 0.08rem 0.1rem;
    background: transparent;
    box-sizing: border-box;
  }

  .tracking-input-tablet,
  .tracking-track-tablet {
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }

  .tracking-input-tablet__slab {
    --input-bezel: 2px;
    min-height: 0;
  }

  .tracking-input-tablet__slab input {
    min-height: 1.95rem;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.5rem;
  }

  .tracking-input-tablet__slab input::placeholder {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .tracking-track-tablet__slab {
    --track-bezel: 2px;
    min-height: 0;
  }

  .tracking-track-tablet__slab .tracking-track-btn.btn {
    min-width: 3.35rem;
    min-height: 1.95rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .home-tracking.is-map-mode .tracking-tablet-3d__stage,
  .hero-location-map.is-expanded .tracking-tablet-3d__stage {
    max-width: 100%;
  }

  .home-tracking.is-map-mode .tracking-tablet-3d__frame,
  .hero-location-map.is-expanded .tracking-tablet-3d__frame {
    aspect-ratio: 1024 / 640;
    min-height: 16rem;
  }
}

.tracking-tablet-3d__emblem {
  display: none;
}

/* PC: square 8-bit tablet slab + heritage frame (flat, no tilt) */
@media (min-width: 721px) {
  .home-tracking {
    min-height: clamp(28rem, 72vh, 40rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero .home-tracking {
    min-height: 0;
    display: block;
    margin-top: 0.5rem;
  }

  .home-tracking .container {
    padding-left: 0;
    padding-right: 0;
    max-width: min(960px, 100%);
  }

  .tracking-tablet-3d__stage {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    overflow: visible;
  }

  .tracking-tablet-3d__slab {
    /* Same pixel-step as the services tablets so the slab thickness matches */
    --pixel-step: 5px;
    --bezel-light: #3a5a4a;
    --bezel-mid: #22352c;
    --bezel-dark: #2a4337;
    --bezel-shadow: #050a07;
    --face-depth: #141f1a;

    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    border-radius: 0;
    padding: var(--pixel-step);
    background: var(--bezel-mid);
    border: var(--pixel-step) solid var(--bezel-light);
    border-right-color: var(--bezel-dark);
    border-bottom-color: var(--bezel-shadow);
    box-shadow:
      var(--pixel-step) 0 0 0 var(--face-depth),
      0 var(--pixel-step) 0 0 var(--face-depth),
      var(--pixel-step) var(--pixel-step) 0 0 var(--face-depth),
      14px 0 22px -3px rgba(96, 156, 118, 0.42),
      0 14px 22px -3px rgba(96, 156, 118, 0.42),
      0 22px 38px rgba(0, 0, 0, 0.5);
    transition:
      transform 0.07s ease-out,
      box-shadow 0.07s ease-out,
      border-color 0.07s ease-out,
      background 0.12s ease-out;
  }

  /* Whole-tablet press — rug/frame only (not input or Track key) */
  .tracking-tablet-3d__slab.is-pressed {
    transform: translate(var(--pixel-step), var(--pixel-step));
    background: #1a2e24;
    box-shadow: none;
    border-top-color: var(--bezel-shadow);
    border-left-color: var(--bezel-shadow);
    border-right-color: var(--bezel-light);
    border-bottom-color: var(--bezel-light);
  }

  .tracking-tablet-3d__frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    line-height: 0;
    border-radius: 0;
    overflow: visible;
  }

  .tracking-tablet-3d__border:not(.tracking-tablet-3d__border--mobile) {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    vertical-align: top;
    filter: saturate(1.12) hue-rotate(-4deg);
    pointer-events: none;
  }

  .tracking-tablet-3d__border.tracking-tablet-3d__border--mobile {
    display: none;
  }

  .tracking-tablet-3d__frame {
    pointer-events: none;
  }

  .tracking-tablet-3d__slab {
    pointer-events: auto;
  }

  .tracking-tablet-3d__screen {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
  }

  .tracking-tablet-3d__emblem {
    display: none;
  }

  .tracking-panel__art--mobile {
    display: none;
  }

  .tracking-panel__content {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate3d(-50%, -50%, 24px);
    transform-style: preserve-3d;
    z-index: 2;
    width: min(58%, 32rem);
    pointer-events: auto;
  }


  .tracking-panel__form,
  .tracking-panel__form input,
  .tracking-panel__form button {
    pointer-events: auto;
  }

  .tracking-input-tablet,
  .tracking-track-tablet {
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }

  .tracking-panel__title,
  .tracking-panel__text {
    display: none;
  }

  .tracking-panel__form {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    /* Cover slot tint; mid green to match rug field */
    background: #0c2218;
    padding: 0.2rem 0.25rem;
    box-sizing: border-box;
  }

  .tracking-input-tablet__slab {
    --input-bezel: 3px;
    min-height: 0;
  }

  .tracking-input-tablet__slab input {
    min-height: 2.15rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 0.4rem 0.75rem;
    color: #1a2e24;
  }

  .tracking-input-tablet__slab input::placeholder {
    color: #6b7a72;
    font-weight: 700;
  }

  .tracking-track-tablet__slab {
    --track-bezel: 3px;
    min-height: 0;
  }

  .tracking-track-tablet__slab .tracking-track-btn.btn {
    min-width: 4.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tracking-track-tablet__slab,
  .tracking-track-tablet__slab:has(.tracking-track-btn:active),
  .tracking-track-tablet__slab.is-deep-pressed,
  .tracking-input-tablet__slab,
  .tracking-input-tablet__slab:has(input:active),
  .tracking-input-tablet__slab.is-deep-pressed {
    transform: none;
    transition: none;
  }
}

@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .tracking-tablet-3d__slab,
  .tracking-tablet-3d__slab.is-pressed {
    transform: none;
    transition: none;
    box-shadow:
      var(--pixel-step) 0 0 0 var(--face-depth),
      0 var(--pixel-step) 0 0 var(--face-depth),
      var(--pixel-step) var(--pixel-step) 0 0 var(--face-depth);
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .tracking-tablet-3d__slab,
  .tracking-tablet-3d__slab.is-pressed {
    transform: none;
    transition: none;
    box-shadow:
      var(--pixel-step) 0 0 0 var(--face-depth),
      0 var(--pixel-step) 0 0 var(--face-depth),
      var(--pixel-step) var(--pixel-step) 0 0 var(--face-depth);
  }
}

.service-icon {
  width: 26px;
  height: 26px;
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  flex: 0 0 auto;
}

.service-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.two-col {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.hero .home-tracking {
  width: 100%;
  max-width: min(960px, 100%);
  margin-top: 0.35rem;
  padding: 0;
}

.hero .home-tracking .tracking-panel {
  margin: 0;
}

/* Map mode: swap tracking UI for map inside the same tablet frame */
.hero-location-map.is-expanded .tracking-tablet-3d__view--track,
.home-tracking.is-map-mode .tracking-tablet-3d__view--track {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero-location-map.is-expanded .tracking-panel__content,
.home-tracking.is-map-mode .tracking-panel__content {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.home-tracking.is-map-mode .tracking-tablet-3d__screen {
  padding: 0;
}

.home-tracking.is-map-mode .hero-location-map__flight.tracking-tablet-3d__view--map {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #121212;
  pointer-events: auto;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__expanded {
  pointer-events: none;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__gmaps,
.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__leaflet,
.home-tracking.is-map-mode .hero-location-map.is-expanded #hero-location-map-leaflet.leaflet-container {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto;
  touch-action: none;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded #hero-location-map-leaflet.leaflet-container .leaflet-control-container {
  pointer-events: auto;
  z-index: 1000;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded #hero-location-map-leaflet.leaflet-container .leaflet-control-zoom a {
  pointer-events: auto;
  cursor: pointer;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media .hero-location-map__satellite-chrome,
.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media .hero-location-map__collapse {
  z-index: 25;
  pointer-events: auto;
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media > .hero-location-map__navigate-chrome {
  position: absolute;
  bottom: var(--map-chrome-inset);
  left: 50%;
  z-index: 25;
  pointer-events: auto;
  transform: translateX(-50%);
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media > .hero-location-map__navigate-chrome:hover,
.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media > .hero-location-map__navigate-chrome.is-proxy-hover {
  transform: translateX(-50%) translateY(-1px);
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media > .hero-location-map__navigate-chrome:active,
.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media > .hero-location-map__navigate-chrome.is-proxy-active {
  transform: translateX(-50%) translateY(1px) scale(0.98);
}

@media (min-width: 721px) {
  .home-tracking.is-map-mode .tracking-tablet-3d__stage.is-map-proxy-pointer,
  .home-tracking.is-map-mode .tracking-tablet-3d__stage.is-map-proxy-pointer *,
  body.is-map-proxy-pointer {
    cursor: pointer !important;
  }

  .home-tracking.is-map-mode .tracking-tablet-3d__stage.is-map-proxy-grab,
  .home-tracking.is-map-mode .tracking-tablet-3d__stage.is-map-proxy-grab *,
  body.is-map-proxy-grab {
    cursor: grab !important;
  }

  .home-tracking.is-map-mode .tracking-tablet-3d__stage.is-map-proxy-grabbing,
  .home-tracking.is-map-mode .tracking-tablet-3d__stage.is-map-proxy-grabbing *,
  body.is-map-proxy-grabbing {
    cursor: grabbing !important;
  }
}

.home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__map-controls {
  z-index: 12;
  pointer-events: none;
}

.home-tracking.is-map-mode
  .hero-location-map.is-expanded
  .hero-location-map__map-controls
  .hero-location-map__route-info.is-route-error {
  pointer-events: auto;
}

.home-tracking.is-map-mode .hero-location-map__panel {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 720px) {
  .home-tracking.is-map-mode .tracking-tablet-3d__screen {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    pointer-events: auto;
  }

  .home-tracking.is-map-mode .hero-location-map__flight.tracking-tablet-3d__view--map {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: auto;
  }

  .home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    max-height: none;
  }

  .home-tracking.is-map-mode .hero-location-map__panel {
    flex: 0 0 auto;
    padding: 0.48rem 0.85rem 0.72rem;
  }

  .home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media > .hero-location-map__navigate-chrome,
  .home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media .hero-location-map__collapse,
  .home-tracking.is-map-mode .hero-location-map.is-expanded .hero-location-map__media .hero-location-map__satellite-chrome,
  .home-tracking.is-map-mode
    .hero-location-map.is-expanded
    #hero-location-map-leaflet.leaflet-container
    .leaflet-control-zoom
    a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

#home + #about {
  padding-top: 1.5rem;
}

/* About + values: centered headings, then story + cards below */
.about-story__intro {
  text-align: center;
  margin-bottom: 2rem;
}


.about-story__intro .section-title__img {
  /* Source art runs taller than "our services" — scale down to match visually */
  max-height: clamp(1.64rem, 3.1vw, 2.36rem);
  max-width: min(100%, 380px);
}

.about-story__intro .section-title--image {
  margin-bottom: 0.5rem;
}

.about-story__stand-for {
  margin: 0.75rem 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.about-values__line {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0;
}

@media (max-width: 720px) {
  .about-values__line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }

  .about-values__prefix {
    display: block;
  }

  .about-values__typewriter {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
  }
}

.about-values__typewriter {
  display: inline;
  letter-spacing: 0;
}

.about-values__typed {
  color: var(--color-gold);
  letter-spacing: 0;
}

.about-values__cursor {
  display: inline;
  margin: 0;
  padding: 0;
  color: var(--color-gold);
  font-weight: 400;
  letter-spacing: 0;
  animation: about-values-cursor-blink 0.8s steps(1) infinite;
}

@keyframes about-values-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-values__cursor {
    display: none;
    animation: none;
  }
}

.about-story {
  display: grid;
  gap: 2.5rem;
}

.about-story__main .prose {
  margin: 0;
}

/* About bento — inspired by 21st.dev / Aceternity bento grid, Heritage theme */
.about-bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.about-bento__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-glass);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow:
    var(--shadow-card),
    0 1px 0 var(--glass-highlight) inset;
  transition:
    transform 0.45s var(--ease-out),
    border-color 0.35s ease,
    box-shadow 0.45s var(--ease-out);
}

.about-bento__card--value {
  --bento-spot-x: 50%;
  --bento-spot-y: 50%;
}

.about-bento__card--value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    520px circle at var(--bento-spot-x) var(--bento-spot-y),
    rgba(62, 207, 142, 0.14),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.about-bento__card--value:hover::before {
  opacity: 1;
}

.about-bento__card--value:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 98, 0.34);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(62, 207, 142, 0.08),
    0 1px 0 var(--glass-highlight) inset;
}

.about-bento__pattern {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(62, 207, 142, 0.06), transparent 55%),
    url("../images/foliage-diagonal.svg") right -20% bottom -10% / 62% auto no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

.about-bento__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.35rem 1.4rem 1.5rem;
  min-height: 100%;
}

.about-bento__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  color: var(--color-accent);
  background: rgba(62, 207, 142, 0.1);
  border: 1px solid rgba(62, 207, 142, 0.22);
  box-shadow: 0 0 18px rgba(62, 207, 142, 0.12);
}

.about-bento__card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-gold);
}

.about-bento__card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.about-bento__card--story {
  padding: 1.35rem 1.4rem 1.5rem;
}

.about-bento__card--story .prose {
  margin: 0;
  max-width: none;
}

.about-bento__card--story .prose p:last-child {
  margin-bottom: 0;
}

@media (min-width: 721px) {
  .about-bento {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-bento__card--value:hover {
    transform: none;
  }

  .about-bento__card--value::before {
    display: none;
  }
}

/* Scrapbook bento — ported from 21st.dev scrapbook-bento-grid (vanilla) */
.about-scrapbook {
  --scrapbook-pad-x: 1.1rem;
  --scrapbook-pad-y: 0.85rem;
  --scrapbook-pad-bottom: 0.95rem;
  --scrapbook-title-size: 1.2rem;
  --scrapbook-title-gap: 0.38rem;
  --scrapbook-body-size: 0.9rem;
  --scrapbook-body-leading: 1.45;
  margin-top: 3rem;
  padding-top: 0.5rem;
}

.about-scrapbook--entrance {
  overflow: visible;
}

.about-scrapbook__title,
.scrapbook-scope .scrapbook-title {
  margin: 0 0 2rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.about-scrapbook__grid,
.scrapbook-scope .bento-grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr;
  max-width: 72rem;
  margin: 0 auto;
  overflow: visible;
}

.about-scrapbook--entrance .about-scrapbook__grid {
  overflow: visible;
}

.about-scrapbook__item,
.scrapbook-scope .bento-item {
  --rotation: 0deg;
  --scatter-x: 0;
  --scatter-y: 0;
  position: relative;
  transform: translate3d(var(--scatter-x), var(--scatter-y), 0) rotate(var(--rotation));
  transition: opacity 0.4s ease, z-index 0s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.about-scrapbook--entrance:not(.about-scrapbook--entered) .about-scrapbook__item {
  transition: none;
}

.about-scrapbook--entrance:not(.is-revealed) .about-scrapbook__item,
.about-scrapbook--entrance.is-revealed .about-scrapbook__item:not(.has-entered):not(.is-entering) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes scrapbook-enter-left {
  from {
    opacity: 1;
    transform: translate3d(calc(-100vw - 1.5rem), 0.2rem, 0) rotate(var(--rotation));
  }

  to {
    opacity: 1;
    transform: translate3d(var(--scatter-x), var(--scatter-y), 0) rotate(var(--rotation));
  }
}

@keyframes scrapbook-enter-right {
  from {
    opacity: 1;
    transform: translate3d(calc(100vw + 1.5rem), 0.2rem, 0) rotate(var(--rotation));
  }

  to {
    opacity: 1;
    transform: translate3d(var(--scatter-x), var(--scatter-y), 0) rotate(var(--rotation));
  }
}

.about-scrapbook--entrance .about-scrapbook__item.is-entering {
  visibility: visible;
  pointer-events: none;
  z-index: 5;
  animation-duration: 0.14s;
  animation-timing-function: cubic-bezier(0.22, 0.82, 0.32, 1);
  animation-fill-mode: forwards;
}

.about-scrapbook--entrance .about-scrapbook__item--from-left.is-entering {
  animation-name: scrapbook-enter-left;
}

.about-scrapbook--entrance .about-scrapbook__item--from-right.is-entering {
  animation-name: scrapbook-enter-right;
}

.about-scrapbook--entrance .about-scrapbook__item.has-entered {
  animation: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(var(--scatter-x), var(--scatter-y), 0) rotate(var(--rotation));
}

.about-scrapbook--entrance.about-scrapbook--entered .about-scrapbook__item {
  animation: none;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(var(--scatter-x), var(--scatter-y), 0) rotate(var(--rotation));
}

.about-scrapbook--entrance.about-scrapbook--entered .about-scrapbook__item,
.about-scrapbook--entrance .about-scrapbook__item.has-entered {
  transition: opacity 0.4s ease, z-index 0s;
}

.about-scrapbook__item:hover,
.scrapbook-scope .bento-item:hover {
  transform: translate3d(var(--scatter-x), calc(var(--scatter-y) - 4px), 0) rotate(0deg);
  z-index: 3;
  transition: transform 0.4s var(--ease-spring), z-index 0s;
}

.about-scrapbook__content,
.scrapbook-scope .content-wrapper {
  position: relative;
  isolation: isolate;
  overflow: visible;
  height: 100%;
  min-height: 7.5rem;
  padding: var(--scrapbook-pad-y) var(--scrapbook-pad-x) var(--scrapbook-pad-bottom);
  border-radius: 3px;
  color: #2f281c;
  background-color: var(--scrapbook-paper-deep);
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.08) 28%,
      transparent 52%
    ),
    radial-gradient(ellipse 120% 90% at 18% 8%, rgba(255, 255, 255, 0.2), transparent 58%),
    radial-gradient(ellipse 95% 75% at 88% 92%, rgba(72, 58, 42, 0.05), transparent 62%),
    var(--scrapbook-paper-texture);
  background-size:
    auto,
    auto,
    auto,
    420px 420px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-blend-mode: soft-light, normal, multiply, multiply;
  border: 1px solid rgba(198, 186, 168, 0.42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 10px 28px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.18);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.about-scrapbook__content::after,
.scrapbook-scope .content-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.about-scrapbook__content > *,
.scrapbook-scope .content-wrapper > * {
  position: relative;
  z-index: 1;
}

.about-scrapbook__item::before,
.scrapbook-scope .bento-item::before {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: 50%;
  z-index: 4;
  width: 3.25rem;
  height: 1.1rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(228, 218, 204, 0.82);
  border: 1px solid rgba(188, 176, 158, 0.48);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  opacity: 0.92;
}

.about-scrapbook__item--2::before {
  transform: translateX(-50%) rotate(2.5deg);
}

.about-scrapbook__item--3::before {
  transform: translateX(-50%) rotate(-3deg);
}

.about-scrapbook__item--5::before {
  transform: translateX(-50%) rotate(1.5deg);
}

.about-scrapbook__item--6::before {
  transform: translateX(-50%) rotate(-2.5deg);
}

.about-scrapbook__item--4::before {
  width: 3.5rem;
  transform: translateX(-50%) rotate(1deg);
}

.about-scrapbook__content h3 {
  margin: 0.08rem 0 var(--scrapbook-title-gap);
  font-family: var(--font-heading);
  font-size: var(--scrapbook-title-size);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.025em;
  color: #3a3224;
}

.about-scrapbook__content p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--scrapbook-body-size);
  line-height: var(--scrapbook-body-leading);
  color: #4a4032;
}

.about-scrapbook__content a.about-scrapbook__email {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}

.about-scrapbook__content a.about-scrapbook__email:hover,
.about-scrapbook__content a.about-scrapbook__email:focus-visible {
  color: #2a2418;
  text-decoration: none;
}

.about-scrapbook__email-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #6b5f4d;
}

.about-scrapbook__content a.about-scrapbook__email:hover .about-scrapbook__email-hint,
.about-scrapbook__content a.about-scrapbook__email:focus-visible .about-scrapbook__email-hint {
  color: #4a4032;
}

.about-scrapbook__content ul {
  margin: 0;
  padding-left: 1rem;
  font-family: var(--font-body);
  font-size: var(--scrapbook-body-size);
  line-height: var(--scrapbook-body-leading);
  color: #4a4032;
}

.about-scrapbook__content li + li {
  margin-top: 0.22rem;
}

.about-scrapbook__item--1 .about-scrapbook__content > p {
  margin: 0 0 0.5rem;
}

.about-scrapbook__item--1 .about-scrapbook__content > ul {
  margin: 0;
  padding-left: 1rem;
}

.about-scrapbook__item--4 .about-scrapbook__content {
  padding: 0.65rem 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
}

.about-scrapbook__photo {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 9rem;
  object-fit: cover;
  object-position: center center;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  filter: contrast(1.03);
}

.about-scrapbook__caption {
  margin: 0.55rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: italic;
  color: #5c5040;
}

.about-scrapbook__photo-lip {
  display: block;
  flex-shrink: 0;
  min-height: 1.35rem;
  margin-top: 0.55rem;
}

/* Mobile: pair Contact + Hours and Customer Service + Quality & Care side by side */
@media (max-width: 720px) {
  .about-story__intro {
    margin-bottom: 0.85rem;
  }

  .about-story__stand-for {
    margin-top: 0.5rem;
  }

  .about-scrapbook {
    margin-top: 1rem;
    padding-top: 0;
  }

  .about-scrapbook__grid,
  .scrapbook-scope .bento-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem 0.5rem;
    align-items: stretch;
  }

  .about-scrapbook__item--1,
  .about-scrapbook__item--4 {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: min(18rem, 92%);
    --scatter-x: 0;
    --scatter-y: 0;
    --rotation: 0deg !important;
  }

  .about-scrapbook__item--1 {
    --scrapbook-pad-x: 0.62rem;
    --scrapbook-pad-y: 0.75rem;
    --scrapbook-pad-bottom: 0.82rem;
    --scrapbook-title-size: 0.98rem;
    --scrapbook-title-gap: 0.32rem;
    --scrapbook-body-size: 0.78rem;
    --scrapbook-body-leading: 1.36;
  }

  .about-scrapbook__item--1 .about-scrapbook__content {
    min-height: 0;
  }

  .about-scrapbook__item--1 .about-scrapbook__content > p {
    margin-bottom: 0.35rem;
  }

  .about-scrapbook__item--1 .about-scrapbook__content li + li {
    margin-top: 0.15rem;
  }

  .about-scrapbook__item--4 .about-scrapbook__content {
    min-height: 0;
    padding: 0.5rem 0.5rem 0.62rem;
  }

  .about-scrapbook__item--4 .about-scrapbook__photo {
    min-height: 5.5rem;
  }

  .about-scrapbook__item--4 .about-scrapbook__photo-lip {
    min-height: 0.75rem;
    margin-top: 0.35rem;
  }

  .about-scrapbook__item--1::before,
  .about-scrapbook__item--4::before {
    width: 2.5rem;
    height: 0.9rem;
    top: -0.32rem;
  }

  .about-scrapbook__item--2,
  .about-scrapbook__item--5 {
    grid-column: 1;
  }

  .about-scrapbook__item--3,
  .about-scrapbook__item--6 {
    grid-column: 2;
  }

  .about-scrapbook__item--2,
  .about-scrapbook__item--3,
  .about-scrapbook__item--5,
  .about-scrapbook__item--6 {
    --scatter-x: 0;
    --scatter-y: 0;
    --rotation: 0deg !important;
    --scrapbook-pad-x: 0.58rem;
    --scrapbook-pad-y: 0.82rem;
    --scrapbook-pad-bottom: 0.9rem;
    --scrapbook-title-size: 0.98rem;
    --scrapbook-title-gap: 0.34rem;
    --scrapbook-body-size: 0.78rem;
    --scrapbook-body-leading: 1.36;
    display: flex;
  }

  .about-scrapbook__item--2 .about-scrapbook__content,
  .about-scrapbook__item--3 .about-scrapbook__content,
  .about-scrapbook__item--5 .about-scrapbook__content,
  .about-scrapbook__item--6 .about-scrapbook__content {
    flex: 1;
    width: 100%;
    min-height: 7.25rem;
    padding: var(--scrapbook-pad-y) var(--scrapbook-pad-x) var(--scrapbook-pad-bottom);
  }

  .about-scrapbook__item--2 .about-scrapbook__email {
    font-size: var(--scrapbook-body-size);
    line-height: var(--scrapbook-body-leading);
  }

  .about-scrapbook__item--2 .about-scrapbook__email-hint {
    font-size: var(--scrapbook-body-size);
    line-height: var(--scrapbook-body-leading);
    margin-top: 0.28rem;
  }

  .about-scrapbook__item--2::before,
  .about-scrapbook__item--3::before,
  .about-scrapbook__item--5::before,
  .about-scrapbook__item--6::before {
    width: 2.35rem;
    height: 0.85rem;
    top: -0.32rem;
  }
}

@media (min-width: 721px) {
  .about-scrapbook {
    --scrapbook-pad-x: 1.15rem;
    --scrapbook-pad-y: 0.9rem;
    --scrapbook-pad-bottom: 1rem;
    --scrapbook-title-size: 1.32rem;
    --scrapbook-title-gap: 0.42rem;
    --scrapbook-body-size: 0.875rem;
    --scrapbook-body-leading: 1.42;
  }

  .about-scrapbook__grid,
  .scrapbook-scope .bento-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(7.25rem, auto));
    gap: 1.65rem 1.5rem;
    padding: 0.25rem 1.25rem 0.5rem;
  }

  .about-scrapbook__item--1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    --scatter-x: -30px;
    --scatter-y: -18px;
  }

  .about-scrapbook__item--2 {
    grid-column: 3;
    grid-row: 1;
    --scatter-x: 6px;
    --scatter-y: -17px;
  }

  .about-scrapbook__item--3 {
    grid-column: 4;
    grid-row: 1;
    --scatter-x: 28px;
    --scatter-y: -15px;
  }

  .about-scrapbook__item--4 {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
    --scatter-x: 26px;
    --scatter-y: 14px;
  }

  .about-scrapbook__item--5 {
    grid-column: 1;
    grid-row: 3;
    --scatter-x: -27px;
    --scatter-y: 16px;
  }

  .about-scrapbook__item--6 {
    grid-column: 2;
    grid-row: 3;
    --scatter-x: 9px;
    --scatter-y: 18px;
  }

  .about-scrapbook__item--1 .about-scrapbook__content {
    min-height: 100%;
    padding: 1.05rem 1.25rem 1.1rem;
  }

  .about-scrapbook__item--4 .about-scrapbook__photo {
    min-height: 11.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-scrapbook--entrance:not(.is-revealed) .about-scrapbook__item,
  .about-scrapbook--entrance.is-revealed .about-scrapbook__item {
    opacity: 1;
    transform: translate3d(var(--scatter-x), var(--scatter-y), 0) rotate(var(--rotation));
    animation: none;
    pointer-events: auto;
  }

  .about-scrapbook__item:hover,
  .scrapbook-scope .bento-item:hover {
    transform: rotate(var(--rotation));
  }
}

@media (min-width: 721px) {
  #home + #about {
    padding-top: 2rem;
  }

  .about-story__intro {
    margin-bottom: 2.5rem;
  }
}

.prose {
  max-width: 42em;
}

.prose p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}

.contact-block {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 1.75rem;
  box-shadow:
    var(--shadow-card),
    0 1px 0 var(--glass-highlight) inset;
}

/* Phone & email tap boxes — mobile only */
.contact-block__tap-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.contact-block__tap-action {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text) !important;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.3s var(--ease-spring);
}

.contact-block__tap-action:hover {
  background: rgba(62, 207, 142, 0.12);
  border-color: rgba(62, 207, 142, 0.35);
  text-decoration: none;
  transform: translateY(-1px);
}

.contact-block__tap-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact-block__tap-value {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

.contact-block__desktop-only {
  display: none;
}

@media (max-width: 720px) {
  .contact-block__tap-action[href^="tel:"] {
    display: none;
  }
}

@media (min-width: 721px) {
  .contact-block__tap-actions {
    display: none;
  }

  .contact-block__desktop-only {
    display: block;
  }

  .contact-block__desktop-only + .contact-block__desktop-only:not(.contact-block__desktop-phone) {
    display: block;
  }

  .contact-block dd.contact-block__desktop-only:not(.contact-block__desktop-phone) a {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .contact-block dd.contact-block__desktop-only:not(.contact-block__desktop-phone) a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .contact-block dt.contact-block__desktop-phone,
  .contact-block dd.contact-block__desktop-phone {
    display: none !important;
  }

  .contact-block__desktop-phone + dd + dt {
    margin-top: 0;
  }

  .contact-block__mobile-only {
    display: none !important;
  }
}

.contact-block__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.contact-block dl {
  margin: 0;
}

.contact-block dt {
  font-weight: 600;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.contact-block dl dt:first-child {
  margin-top: 0;
}

.contact-block dd {
  margin: 0.35rem 0 0;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
}

.placeholder-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-style: normal;
  margin-top: 1rem;
}

.hours {
  margin-top: 0.25rem;
}

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
}

.hours__row span:first-child {
  color: var(--color-text-muted);
}

.hours__row span:last-child {
  color: var(--color-text);
}

.site-footer .hours__row span:first-child,
.site-footer .hours__row span:last-child {
  color: var(--color-text-muted);
}

form label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  color: var(--color-text);
}

form:not(#parcel-tracking-form) input,
form:not(#parcel-tracking-form) textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-input);
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-text);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form:not(#parcel-tracking-form) input:focus,
form:not(#parcel-tracking-form) textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 0 0 3px var(--color-accent-ring);
}

/* Tracking field uses white tablet slab — never site-wide gold form chrome */
#parcel-tracking-form .tracking-input-tablet__slab input {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#parcel-tracking-form .tracking-input-tablet__slab input:focus {
  border: none;
  box-shadow: none;
}

form textarea {
  min-height: 140px;
  resize: vertical;
}

form button[type="submit"] {
  margin-top: 0.25rem;
}

/* Footer */
.site-footer {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--color-text);
  margin-top: auto;
  padding: 2.5rem 1.25rem 1.5rem;
  border-top: none;
}

/* Blurred / tinted glass panel lives on a pseudo-element so we can mask its
   top edge — the bg + backdrop-filter fade in from fully transparent at the
   page boundary down to the solid footer tint ~110px in. No more visible
   "line" where the footer starts; it dissolves into the page background. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 14, 9, 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.35) 28px,
    rgba(0, 0, 0, 0.7) 72px,
    #000 120px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.35) 28px,
    rgba(0, 0, 0, 0.7) 72px,
    #000 120px
  );
  pointer-events: none;
}

.site-footer a {
  color: var(--color-accent);
}

.site-footer a:hover {
  color: var(--color-accent-hover);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }

  .site-footer__col--follow {
    display: flex;
    flex-direction: column;
  }
}

.site-footer__col--hours .hours {
  margin-top: 0;
}

.site-footer__col--hours .hours__row {
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-footer h2 {
  font-size: 0.8125rem;
  margin: 0 0 0.65rem;
  color: var(--color-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.site-footer p,
.site-footer .site-footer__address {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.site-footer__phone {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.social {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.3s var(--ease-spring), background 0.2s ease;
}

.social a:hover {
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
  text-decoration: none;
}

.social a:active,
.social a.is-deep-pressed {
  transform: translateY(2px) scale(0.9);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* "© All rights reserved" line. Lives inside the "Follow us" footer column
   now (instead of as a separate full-width strip beneath the columns), so on
   PC the third column matches the visual height of the first two columns and
   on mobile it reads as a quiet closing line under the social icons rather
   than a floating fragment way below the rest of the footer. */
.site-footer__bottom {
  margin: 1rem 0 0;
  padding: 0;
  border-top: none;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-align: left;
}

@media (min-width: 721px) {
  .site-footer__bottom {
    /* Align with email (col 1) and Sun row (col 2) on desktop */
    margin-top: auto;
    padding-top: 0.45rem;
    line-height: 1.6;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }
}