/* Slim navigation sizing */

/* Correct */
body {
  cursor: default;
}

a,
button,
input[type="submit"],
input[type="button"],
.logo-ticker img {
  cursor: pointer;
}

.site-header {
  height: 64px;
}
.logo-image {
  width: 150px;
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 99, 122, 0.16),
    transparent 70%
  );
  filter: blur(6px);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.cursor-glow.is-active {
  opacity: 1;
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 24, 31, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.welcome-overlay.is-visible { opacity: 1; }
.welcome-card {
  position: relative;
  width: min(440px, 100%);
  padding: 42px 38px 38px;
  overflow: hidden;
  text-align: center;
  color: var(--ink);
  background: #fff9f8;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(20, 16, 25, .24);
  transform: translateY(22px) scale(.94);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.welcome-overlay.is-visible .welcome-card { transform: translateY(0) scale(1); }
.welcome-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  color: #fff;
  background: var(--coral);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 0 0 10px rgba(232, 99, 122, .12), 0 12px 24px rgba(232, 99, 122, .25);
}
.welcome-kicker {
  margin-bottom: 10px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.welcome-card h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 6vw, 3.2rem);
}
.welcome-card > p:last-child { font-size: 15px; opacity: .72; }
.welcome-spark {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 164, 183, .6), transparent 68%);
  filter: blur(4px);
  animation: welcomeSparkFloat 4s ease-in-out infinite alternate;
}
.welcome-spark-one { top: 13%; left: 11%; }
.welcome-spark-two { right: 9%; bottom: 12%; animation-delay: -1.4s; }
@keyframes welcomeSparkFloat { from { transform: scale(.85) translate(0, 0); } to { transform: scale(1.15) translate(12px, -16px); } }
.marketing-welcome .welcome-card { background: linear-gradient(145deg, #fff8f8, #ffe3ea); }
.marketing-welcome .welcome-mark { background: #d94c68; }
.satyam-welcome .welcome-card { background: linear-gradient(145deg, #fff, #f1e9df); }
.satyam-welcome .welcome-mark { background: #333; }
.shivum-welcome .welcome-card { color: #173c42; background: linear-gradient(145deg, #f5ffff, #d8f3ee); }
.shivum-welcome .welcome-mark { color: #e8ffff; background: #168c8c; box-shadow: 0 0 0 10px rgba(22, 140, 140, .12), 0 12px 24px rgba(22, 140, 140, .25); }
.shivum-welcome .welcome-kicker { color: #168c8c; }
.shivum-welcome .welcome-spark { background: radial-gradient(circle, rgba(79, 203, 188, .52), transparent 68%); }

/* Newsletter signup popup */
.newsletter-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 24, 31, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.newsletter-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.newsletter-card {
  position: relative;
  width: min(420px, 100%);
  padding: 40px 34px 34px;
  text-align: center;
  color: var(--ink);
  background: #fff9f8;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(20, 16, 25, .24);
  transform: translateY(22px) scale(.94);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.newsletter-overlay.is-visible .newsletter-card {
  transform: translateY(0) scale(1);
}
.newsletter-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(51, 51, 51, .06);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.newsletter-close:hover {
  background: rgba(51, 51, 51, .12);
}
.newsletter-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: #fff;
  background: var(--coral);
  border-radius: 50%;
  font-size: 22px;
  box-shadow: 0 0 0 10px rgba(232, 99, 122, .12), 0 12px 24px rgba(232, 99, 122, .25);
}
.newsletter-card h2 {
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 4vw, 2rem);
}
.newsletter-card > p {
  font-size: 14px;
  opacity: .72;
  margin-bottom: 22px;
}
.newsletter-form {
  display: flex;
  gap: 8px;
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(51, 51, 51, .16);
  font: inherit;
  font-size: 14px;
}
.newsletter-form button {
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.newsletter-form button:hover {
  background: var(--coral-dark);
}
.newsletter-form button:disabled {
  opacity: .6;
  cursor: default;
}
.newsletter-status {
  min-height: 18px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}
.newsletter-status.is-error { color: #c0392b; }
.newsletter-status.is-success { color: #2f9e5c; }
.newsletter-note {
  margin-top: 10px;
  font-size: 11px;
  opacity: .55;
}
@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
  }
}

/* Keep the opening scene compact */
.hero {
  min-height: 0;
  height: clamp(540px, 72vh, 680px);
  max-height: none;
}
:root {
  --ink: #333333;
  --paper: #f5f5f5;
  --coral: #e8637a;
  --coral-dark: #e8637a;
  --sun: #fadadd;
  --lavender: #fadadd;
  --line: rgba(51, 51, 51, 0.16);
  --display: "Montserrat", sans-serif;
  --body: "Open Sans", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  min-height: 100%;
  background: var(--ink);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
body.inner-page {
  position: relative;
}
main {
  flex: 1 0 auto;
  background: var(--paper);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2 {
  font-family: var(--display);
  letter-spacing: -0.045em;
  line-height: 0.96;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
}
h2 {
  font-size: clamp(3rem, 6vw, 6.5rem);
}
em {
  color: var(--coral);
  font-style: normal;
}
.site-header {
  height: 82px;
  padding: 0 4.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: white;
  background: rgba(20, 20, 26, 0.28);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.logo-image {
  display: block;
  width: 178px;
  height: auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  line-height: 0.8;
}
.logo small {
  display: block;
  font-family: var(--body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.17em;
  margin-top: 7px;
}
.logo-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 22px;
}
.main-nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  margin-right: 20px;
}
.main-nav a {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
  transition:
    opacity 0.2s,
    color 0.2s;
}
.main-nav a:hover,
.main-nav a.active {
  opacity: 1;
  color: var(--sun);
}
.main-nav a[href="gifts.html"] {
  color: #c9a227;
  opacity: 1;
  font-weight: 800;
}
.main-nav a[href="gifts.html"]:hover,
.main-nav a[href="gifts.html"].active {
  color: #c9a227;
}
/* "Plazas" nav dropdown: hover (desktop) or tap (anywhere, via
   initNavDropdown() in script.js, which also handles outside-click/Escape
   and gives touch devices a working tap target) reveals the per-plaza
   links. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s, color 0.2s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active,
.nav-dropdown.is-open .nav-dropdown-trigger {
  opacity: 1;
  color: var(--sun);
}
.nav-dropdown-arrow {
  font-size: 9px;
  transition: transform 0.2s ease;
}
.nav-dropdown.is-open .nav-dropdown-arrow,
.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  margin-top: 14px;
  min-width: 180px;
  padding: 8px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  opacity: 1;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: rgba(232, 99, 122, 0.1);
  color: var(--coral);
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-social-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
}
.header-social-link:hover,
.header-social-link.active {
  opacity: 1;
}
.nav-cta,
.text-link span,
.button span,
.email-link span {
  margin-left: 10px;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
}

.hero {
  min-height: 550px;
  height: 70vh;
  max-height: 750px;
  position: relative;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  padding: 110px 8vw 80px;
}
@media (min-width: 901px) {
  .hero {
    min-height: 650px;
    height: 85vh;
    max-height: 950px;
  }
  .hero-content {
    max-width: 920px;
  }
  .hero-content h1 {
    font-size: clamp(3.5rem, 7.5vw, 7rem);
  }
  .hero-copy {
    max-width: 440px;
    font-size: 20px;
  }
  .hero-actions .button {
    min-height: 60px;
    padding: 0 30px;
    font-size: 15px;
  }
  .hero-actions .text-link {
    font-size: 15px;
  }
}
.hero-image,
.hero-video,
.hero-shade {
  position: absolute;
  inset: 0;
}
.hero-image {
  background-image: url("assets/hero.jpg");
  background-position: center;
  background-size: cover;
  animation: heroZoom 22s ease-in-out infinite alternate;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(30, 25, 38, 0.8), rgba(30, 25, 38, 0.08) 72%),
    linear-gradient(0deg, rgba(30, 25, 38, 0.45), transparent 45%);
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.5;
  mix-blend-mode: screen;
  z-index: 0;
}
.hero-orb-1 {
  width: 360px;
  height: 360px;
  top: -100px;
  right: 12%;
  background: radial-gradient(circle, var(--coral), transparent 70%);
  animation: orbDrift1 13s ease-in-out infinite;
}
.hero-orb-2 {
  width: 260px;
  height: 260px;
  bottom: -70px;
  left: 20%;
  background: radial-gradient(circle, var(--sun), transparent 70%);
  animation: orbDrift2 17s ease-in-out infinite;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 790px;
}
.hero-content.reveal h1,
.hero-content.reveal .hero-copy,
.hero-content.reveal .hero-actions {
  opacity: 0;
  animation: heroRise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.hero-content.reveal h1 {
  animation-delay: 0.3s;
}
/* Phones: the h1's clamp()/vw sizing is based on the fixed 900px layout
   viewport this site renders at, so it shrinks along with everything
   else once the browser zooms the whole page down to fit a real phone
   screen — a fixed physical size (calc(Npx * var(--k, 3))) keeps the
   hero heading genuinely big instead. */
html.is-mobile .hero-content h1 {
  font-size: calc(48px * var(--k, 3));
  line-height: 1.04;
}
html.is-mobile .hero-copy {
  font-size: calc(15px * var(--k, 3));
  white-space: nowrap;
}
/* Same shrink-with-the-page problem as the hero, just never fixed for
   the rest of the homepage sections — every one of these h2s uses the
   same clamp()/vw sizing, so they were all rendering small on phones,
   not just the hero. */
html.is-mobile .locations-map-intro h2,
html.is-mobile .promise-copy h2,
html.is-mobile .testimonial-header h2,
html.is-mobile .whatsapp-copy h2,
html.is-mobile .contact-copy h2 {
  font-size: calc(50px * var(--k, 3));
  line-height: 1.05;
}
html.is-mobile .promise-copy p,
html.is-mobile .whatsapp-copy p,
html.is-mobile .contact-intro {
  font-size: calc(17px * var(--k, 3));
}
/* Phones: drop the QR code — nobody scans a code on the phone they're
   already holding — so the WhatsApp copy/button get the full row. */
html.is-mobile .whatsapp-qr {
  display: none;
}
html.is-mobile .whatsapp-channel {
  justify-content: flex-start;
}
html.is-mobile .whatsapp-copy {
  max-width: 100%;
}
.hero-content.reveal .hero-copy {
  animation-delay: 0.5s;
}
.hero-content.reveal .hero-actions {
  animation-delay: 0.7s;
}

/* =========================
   LOGO TICKER SECTION
========================= */
.logo-ticker {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 28px 0; /* Thicker section height */
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Side gradient masks for smooth edge fading */
.logo-ticker::before,
.logo-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.logo-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #ffffff, transparent);
}

.logo-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #ffffff, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 50px;
  width: max-content;
  animation: logoSlide 25s linear infinite;
}

/* Pause sliding on hover */
.logo-ticker:hover .logo-track {
  animation-play-state: paused;
}

.logo-track img {
  height: 54px; /* Larger logo size */
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: none; /* Keep full original color */
  opacity: 0.9;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.logo-track img:hover {
  opacity: 1;
  transform: scale(1.08); /* Subtle zoom effect on hover */
}

@keyframes logoSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.eyebrow,
.section-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.eyebrow span {
  width: 25px;
  height: 1px;
  background: var(--sun);
}
.hero h1 {
  margin-bottom: 28px;
}
.hero-copy {
  max-width: 375px;
  font-size: 17px;
  line-height: 1.55;
  opacity: 0.9;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
.button:hover {
  transform: translateY(-3px);
}
.button-coral {
  background: var(--coral);
  color: white;
}
.button-coral:hover {
  background: var(--coral-dark);
  box-shadow: 0 12px 28px rgba(232, 99, 122, 0.45);
}
.button-dark {
  background: var(--coral);
  color: white;
}
.button-dark:hover {
  background: var(--coral-dark);
}
.button-outline {
  border: 1px solid var(--ink);
}
.button-outline:hover {
  background: var(--ink);
  color: white;
}
.text-link {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 5px;
}
.light-text {
  border-color: rgba(255, 255, 255, 0.7);
}
.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 8vw;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 1;
  animation: heroScrollIn 0.9s ease forwards;
  animation-delay: 1.1s;
}
.hero-scroll span {
  display: inline-block;
  font-size: 20px;
  margin-left: 12px;
  animation: scrollBounce 1.8s ease-in-out infinite;
  animation-delay: 2s;
}
.section-pad {
  padding: 125px 8vw;
}
.intro {
  background: var(--paper);
}
/* =========================
   ABOUT SECTION
========================= */

.about-section {
  position: relative;
  background: #ffffff;
  color: var(--ink);
  padding: 90px 8vw 100px;
}

.about-section-panel {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

@keyframes aboutHeroZoom {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.about-section .section-label {
  margin-bottom: 55px;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 32%) minmax(0, 68%);
  column-gap: clamp(45px, 6vw, 90px);
  row-gap: 18px;
  align-items: start;
}

/* Founder image */

.about-image-frame {
  position: relative;
}

.about-image-frame::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--coral);
  border-radius: 18px;
  z-index: 0;
}

.about-image-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 55px rgba(17, 22, 33, 0.13);
  position: relative;
  z-index: 1;
}

.about-image {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-image-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(17, 17, 20, 0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #ffffff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
}

.about-image-caption small {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Story */

.about-copy {
  width: 100%;
  max-width: none;
  columns: 1;
  padding-top: 0;
}

.about-kicker {
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.about-copy h2 {
  font-family: var(--display);
  font-size: clamp(3.2rem, 5vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin-bottom: 42px;
  font-weight: 700;
}

.about-copy h2 em {
  color: var(--coral);
  font-style: normal;
}

.about-copy p {
  width: 100%;
  max-width: 900px;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 25px;
  opacity: 0.85;
}

.about-story-breakout {
  grid-column: 1 / -1;
  margin: 0;
}

.about-copy-continued {
  grid-column: 1 / -1;
}
.about-copy-continued p {
  width: 100%;
  max-width: none;
}

.about-video-wrap {
  margin: 40px 0 0;
}
.about-video {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(17, 22, 33, 0.1);
  background: #000;
}
.about-video-cta {
  display: none;
  margin: 40px auto 0;
  width: fit-content;
}
.about-directors-btn {
  margin: 20px 0 0;
  width: fit-content;
}

/* Directors popup */
.directors-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 16, 25, 0.35);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.directors-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.directors-card {
  position: relative;
  width: min(760px, 100%);
  text-align: center;
  color: #ffffff;
  background: none;
  transform: translateY(22px) scale(0.94);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.directors-overlay.is-visible .directors-card {
  /* "none" (not translate(0)) so the card is not a containing block for the fixed close button */
  transform: none;
}
.directors-close {
  position: fixed;
  top: 22px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.directors-close:hover {
  background: rgba(255, 255, 255, 0.32);
}
.directors-card h2 {
  margin-bottom: 6px;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.directors-hint {
  margin-bottom: 14px;
  font-size: 13px;
  color: #ffffff;
  opacity: 0.75;
}
.directors-photo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.directors-photo-wrap img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 210px);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}
.director-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.333%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  cursor: pointer;
  outline: none;
}
.director-zone-left {
  left: 0;
}
.director-zone-center {
  left: 33.333%;
}
.director-zone-right {
  left: 66.666%;
}
.director-label {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.director-zone:hover .director-label,
.director-zone:focus-visible .director-label {
  opacity: 1;
  transform: translateY(0);
}

.about-highlight {
  max-width: 900px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 700;
  opacity: 1;
  border-left: 3px solid var(--coral);
  padding: 2px 0 2px 22px;
  margin: 0;
}

.audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  vertical-align: middle;
  border: none;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.audio-btn svg {
  width: 14px;
  height: 14px;
}
.audio-btn:hover {
  background: var(--coral-dark);
  transform: scale(1.08);
}
.about-copy h2 .audio-btn {
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.22em;
  vertical-align: middle;
}
.about-copy h2 .audio-btn svg {
  width: 55%;
  height: 55%;
}
.audio-btn.is-playing {
  animation: audioPulse 1.2s ease-in-out infinite;
}
@keyframes audioPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 99, 122, 0.5);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(232, 99, 122, 0);
  }
}

.about-copy .text-link {
  margin-top: 12px;
  display: inline-flex;
}

/* Stats */

.stats-row {
  border-top: 1px solid var(--line);
  margin-top: 100px;
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

.stats-row div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.25s ease;
}

.stats-row div:hover {
  transform: translateY(-4px);
}

.stats-row div:not(:first-child) {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}

.stats-row strong {
  font-family: var(--display);
  font-size: clamp(2.3rem, 3vw, 3.6rem);
  color: var(--coral);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.stats-row span {
  font-size: 10px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
  padding-top: 3px;
}

/* =========================
   ABOUT MOBILE
========================= */

@media (max-width: 750px) {
  .about-section .section-label {
    margin-bottom: 35px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .about-image-wrap {
    border-radius: 16px;
  }

  .about-copy {
    width: 100%;
    max-width: none;
    padding-top: 0;
    columns: 1;
  }

  .about-copy-continued {
    grid-column: 1;
  }

  .about-story-breakout {
    margin: 0 0 20px;
  }

  .about-kicker {
    margin-bottom: 18px;
  }

  .about-copy h2 {
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 0.92;
    margin-bottom: 30px;
  }

  .about-copy p {
    width: 100%;
    max-width: none;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 22px;
  }

  .about-video-wrap {
    display: none;
  }

  .about-video-cta {
    display: inline-flex;
  }

  .about-copy .text-link {
    margin-top: 10px;
  }

  .stats-row {
    margin-top: 65px;
    padding-top: 25px;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .stats-row div {
    display: block;
  }

  .stats-row strong {
    display: block;
    font-size: 30px;
    margin-bottom: 8px;
  }

  .stats-row span {
    font-size: 8px;
    line-height: 1.4;
  }
}
.gallery {
  background: #ece8df;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 54px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
}
.gallery-card {
  min-width: 0;
}
.card-art {
  height: 330px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 25px;
  transition: transform 0.5s;
}
.gallery-card:hover .card-art {
  transform: scale(0.98);
}
.card-tall .card-art {
  height: 460px;
}
.art-market {
  background: linear-gradient(145deg, #b7d0d4, #668c94 48%, #d17b5e);
}
.art-home {
  background: linear-gradient(145deg, #e7b87e, #df775f 56%, #9c4d59);
}
.art-style {
  background: linear-gradient(145deg, #cad6bc, #87a29d 56%, #40566b);
}
.card-art:after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 20%;
  right: 15%;
  box-shadow:
    0 0 0 25px rgba(255, 255, 255, 0.1),
    0 0 0 50px rgba(255, 255, 255, 0.08);
}
.art-stamp {
  position: absolute;
  top: 22px;
  right: 25px;
  font-size: 11px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.art-word {
  font-family: var(--display);
  font-size: clamp(2.7rem, 4vw, 4.5rem);
  line-height: 0.82;
  color: white;
  position: relative;
  z-index: 1;
}
.art-word i {
  color: var(--sun);
  font-style: normal;
}
.card-caption {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  font-size: 13px;
}
.card-caption span {
  font-size: 11px;
  opacity: 0.6;
}

/* LOCATIONS MAP */
.locations-map-section {
  background: #ffffff;
  padding-top: 70px;
  padding-bottom: 70px;
}

.locations-map-intro {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}

.locations-map-intro h2 {
  margin-bottom: 0;
}

.map-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  margin-left: 0;
  background: transparent;
}
.locations-map {
  width: 100%;
  height: min(52vw, 680px);
  min-height: 500px;
  border: 0;
  z-index: 0;
}
.locations-map .leaflet-control-container {
  position: relative;
  z-index: 600;
}
.pink-map-marker {
  background: transparent;
  border: 0;
}
.pink-map-pin {
  position: absolute;
  left: 2px;
  top: 1px;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  background: var(--coral);
  box-shadow: 0 3px 8px rgba(51, 51, 51, 0.3);
  transform: rotate(-45deg);
}
.pink-map-pin::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}
.location-details {
  align-self: center;
  padding: 28px;
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(51, 51, 51, 0.1);
  color: var(--ink);
}
.location-media {
  position: relative;
  width: calc(100% + 56px);
  height: clamp(300px, 27vw, 460px);
  margin: -28px -28px 22px;
  background: #ffffff;
  overflow: hidden;
}
.location-media img,
.location-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.5s ease;
}
.location-media video {
  background: #000000;
  opacity: 0;
}
.location-media video.is-playing {
  opacity: 1;
}
.location-media img.is-hidden {
  opacity: 0;
}
.location-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.location-details-label {
  margin: 0;
  margin-bottom: 4px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.location-details h3 {
  margin: 0 0 5px;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.1;
}
.location-details-hours {
  margin: 0 0 8px;
  font-size: 14px;
  white-space: pre-line;
}
.location-details-address,
.location-details-phone {
  margin: 0 0 6px;
  color: rgba(51, 51, 51, 0.72);
  font-size: 13px;
  line-height: 1.35;
}
.location-details a {
  color: var(--coral);
  font-size: 14px;
  font-weight: 700;
}

.pink-map-marker.is-selected .pink-map-pin {
  animation: mapPinPulse 1.4s ease-out infinite;
}

@keyframes mapPinPulse {
  0%,
  100% {
    transform: rotate(-45deg) scale(1);
  }
  50% {
    transform: rotate(-45deg) scale(1.18);
  }
}

@media (max-width: 750px) {
  .locations-map-intro {
    margin-bottom: 28px;
    align-items: flex-start;
    gap: 28px;
  }
  .map-layout {
    display: block;
    width: 100%;
  }
  .locations-map {
    height: 500px;
    min-height: 0;
  }
  .location-details {
    margin-top: 24px;
  }
}

.promise {
  background: #2e2d30;
  color: white;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}
.promise::before,
.promise::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.promise::before {
  width: 380px;
  height: 380px;
  top: -140px;
  left: -80px;
  background: radial-gradient(circle, var(--coral), transparent 70%);
  animation: orbDrift1 15s ease-in-out infinite;
}
.promise::after {
  width: 300px;
  height: 300px;
  bottom: -120px;
  right: 8%;
  background: radial-gradient(circle, var(--sun), transparent 70%);
  animation: orbDrift2 19s ease-in-out infinite;
}
.promise-copy {
  position: relative;
  z-index: 1;
}
.promise-copy h2 {
  margin-bottom: 16px;
  color: white;
}
.promise-copy h2 em {
  color: #e8637a;
}
.promise-copy p {
  max-width: 560px;
  font-size: 17px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
}
.promise-copy > .button-dark {
  position: relative;
  overflow: hidden;
}
.promise-copy > .button-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.promise-copy > .button-dark:hover::before {
  left: 130%;
}
.promise-copy h2,
.promise-copy > p,
.promise-copy > .button-dark {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.promise.in-view .promise-copy h2 {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}
.promise.in-view .promise-copy > p {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.promise.in-view .promise-copy > .button-dark {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}
.promise-simple {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding-top: 90px;
  padding-bottom: 90px;
}
.promise-simple .promise-copy p {
  max-width: 620px;
  margin: 0 auto 28px;
}
.testimonials {
  background: linear-gradient(180deg, #f8f7f7 0%, #f1efef 100%);
  border-top: 1px solid rgba(51, 51, 51, 0.08);
  padding-top: 70px;
  padding-bottom: 74px;
}

.testimonial-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 26px;
}

.testimonial-header h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.96;
  color: var(--ink);
}

.testimonial-header h2 em {
  color: var(--coral);
}


.testimonial-marquee {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.testimonial-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: testimonialScroll 30s linear infinite;
}

.testimonial-card {
  flex: 0 0 420px;
  min-height: 220px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(51, 51, 51, 0.08);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.testimonial-author {
  margin: 18px 0 0;
  color: var(--coral);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

@keyframes testimonialScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.section-label {
  margin-bottom: 10px;
  color: var(--coral);
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes promiseRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes badgePulse {
  0%,
  100% {
    box-shadow: 0 10px 24px rgba(232, 99, 122, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 10px 30px rgba(232, 99, 122, 0.75);
    transform: scale(1.08);
  }
}
.home-stats {
  background: #f4f4f4;
  border-top: 1px solid rgba(51, 51, 51, 0.12);
  border-bottom: 1px solid rgba(51, 51, 51, 0.12);
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.home-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
.home-stats-row div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.home-stats-row strong {
  font-family: var(--display);
  font-size: clamp(1.9rem, 2.7vw, 3rem);
  color: var(--coral);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.home-stats-row span {
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  padding-top: 3px;
}
.home-story-btn {
  flex-shrink: 0;
  min-width: 132px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 12px;
}
.whatsapp-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: #2e2d30;
  color: white;
  padding-top: 42px;
  padding-bottom: 42px;
}
.whatsapp-copy {
  max-width: 720px;
}
.whatsapp-copy h2 {
  margin: 0;
  color: white;
  font-size: clamp(2.1rem, 3.5vw, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.whatsapp-copy h2 em {
  color: var(--coral);
}
.whatsapp-copy p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.whatsapp-btn {
  margin-top: 18px;
  display: inline-flex;
  width: fit-content;
}
.whatsapp-qr {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(22vw, 170px);
  aspect-ratio: 1;
  background: white;
  padding: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
.whatsapp-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.whatsapp-qr-badge {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  z-index: 1;
  overflow: hidden;
}
.whatsapp-qr-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--coral);
  color: white;
  padding-top: 28px;
  padding-bottom: 20px;
}
.contact .section-label {
  color: var(--sun);
}
.contact h2 {
  margin: 0;
  color: white;
  font-size: clamp(2.3rem, 3.5vw, 3.8rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 100%;
}
.contact h2 em {
  color: var(--sun);
}
.contact-copy {
  width: 100%;
  max-width: 100%;
  padding-top: 6px;
}
.contact-copy p {
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.45;
  max-width: 900px;
}
.contact-intro strong {
  font-size: 15px;
  font-weight: 800;
}
.email-link {
  display: inline-block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  padding-bottom: 6px;
  font-weight: 700;
}
.contact-emails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 1000px);
  margin-top: 24px;
}
/* Default (desktop/tablet): the row wrapper is invisible to layout, so its
   cards act as direct children of the .contact-emails grid above, unchanged. */
.contact-emails-row {
  display: contents;
}
.contact-email-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: white;
  text-decoration: none;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.contact-email-card:hover,
.contact-email-card:focus-visible {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.18);
}
.contact-email-icon {
  font-size: 26px;
  line-height: 1;
}
.contact-email-card strong {
  font-size: 14px;
  font-weight: 800;
}
.contact-email-card span:last-child {
  font-size: 11px;
  opacity: 0.8;
  word-break: break-all;
}
@media (max-width: 900px) {
  .contact-emails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .contact-emails {
    grid-template-columns: 1fr;
  }
}
.field-message {
  margin-top: 2px;
}
.button-light {
  margin-top: 4px;
  border: 0;
  background: white;
  color: var(--ink);
  width: fit-content;
  min-width: 180px;
}
.button-light:hover {
  background: #f7f7f7;
}
footer {
  padding: 0 8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  line-height: 1;
  background: var(--ink);
  color: white;
  min-height: 46px;
  height: 46px;
}
footer .logo {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
}
footer .logo-image {
  width: 112px;
  height: auto;
  display: block;
}
footer > span {
  opacity: 0.6;
  line-height: 1;
}
.authentic-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.authentic-badge:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}
.authentic-badge svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--coral);
}
.authentic-badge span {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.authentic-badge span small {
  font-size: 8.5px;
  font-weight: 600;
  opacity: 0.7;
}
.social-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.social-links a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
}
.social-links img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: none;
}
.faq-widget {
  position: fixed;
  right: 25px;
  bottom: 23px;
  z-index: 20;
}
.faq-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: white;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  padding: 14px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.faq-trigger strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: white;
  background: var(--coral);
  border-radius: 50%;
  font-size: 14px;
}
.faq-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54ae76;
  box-shadow: 0 0 0 5px rgba(84, 174, 118, 0.15);
}
/* Little emojis that drift up from the chat bubble corner every so often
   to draw the eye back to it, whichever chat widget (Convai or the
   fallback pill) happens to be showing there. */
.chat-emoji-float {
  position: fixed;
  right: 25px;
  bottom: 23px;
  width: 0;
  height: 0;
  z-index: 10003;
  pointer-events: none;
}
.chat-emoji-float span {
  position: absolute;
  bottom: 0;
  right: 14px;
  font-size: 15px;
  opacity: 0;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
  animation: chatEmojiRise 3s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes chatEmojiRise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  10% {
    opacity: 1;
    transform: translate(var(--dx-start, 0px), -10px) scale(1.35);
  }
  22% {
    transform: translate(var(--dx-start, 0px), -30px) scale(1.05);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx-end, 14px), -170px) scale(0.9);
  }
}
html.is-mobile .chat-emoji-float {
  right: 12px;
  bottom: 12px;
}
html.is-mobile .chat-emoji-float span {
  font-size: calc(13px * var(--k, 3));
  right: calc(14px * var(--k, 3));
}
@media (prefers-reduced-motion: reduce) {
  .chat-emoji-float {
    display: none;
  }
}
.faq-panel {
  display: none;
  flex-direction: column;
  width: 320px;
  max-height: min(70vh, 560px);
  background: white;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  padding: 18px 18px 16px;
  margin-bottom: 12px;
}
.faq-panel.open {
  display: flex;
  animation: panelIn 0.25s ease-out;
}
.faq-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-agent {
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px;
}
.faq-agent-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.faq-agent-info strong {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
}
.faq-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.55;
}
.faq-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #54ae76;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(84, 174, 118, 0.15);
}
.faq-close {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.faq-close:hover {
  opacity: 1;
}
.faq-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 16px 2px;
  margin: 6px 0;
  flex: 1;
  min-height: 120px;
  max-height: 280px;
}
.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: msgIn 0.3s ease-out both;
}
.msg-user {
  flex-direction: row-reverse;
}
.msg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--line);
}
.msg-bubble {
  max-width: 210px;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: 15px;
}
.msg-agent .msg-bubble {
  background: #fff0ed;
  border-bottom-left-radius: 4px;
}
.msg-user .msg-bubble {
  background: var(--ink);
  color: white;
  border-bottom-right-radius: 4px;
}
.msg-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
}
.msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0.5;
  animation: typingBounce 1s infinite ease-in-out;
}
.msg-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.msg-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
.faq-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.faq-input-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 11px 13px;
  font-size: 12.5px;
  font-family: var(--body);
  color: var(--ink);
}
.faq-input-row input:focus {
  outline: 0;
  border-color: var(--coral);
}
.faq-input-row input:disabled {
  opacity: 0.5;
}
.faq-input-row button {
  flex-shrink: 0;
  width: 40px;
  border: 0;
  background: var(--coral);
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.faq-input-row button:hover {
  background: var(--coral-dark);
}
.faq-input-row button:disabled {
  opacity: 0.5;
  cursor: default;
}
.auth-slot {
  display: flex;
  align-items: center;
}
.google-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: inherit;
  padding: 8px 12px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.google-btn img {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}
.google-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: inherit;
  padding: 5px 14px 5px 5px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.scroll-top {
  position: fixed;
  right: 25px;
  bottom: 96px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 25;
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.inner-page .google-btn,
.inner-page .user-chip {
  border-color: var(--line);
}
.inner-page .google-btn:hover {
  background: rgba(51, 51, 51, 0.06);
}
.inner-page {
  background: var(--paper);
}
.inner-page .site-header {
  position: relative;
  color: var(--ink);
  background: #ffffff;
  border-bottom: 1px solid rgba(51, 51, 51, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.inner-page .nav-cta {
  border-color: var(--ink);
}
.inner-hero {
  padding: 130px 8vw 95px;
  background: var(--lavender);
}
.inner-hero h1 {
  max-width: 800px;
  margin-bottom: 30px;
}
.inner-hero p {
  max-width: 415px;
  font-size: 18px;
}
.locations-list {
  padding-top: 80px;
}
.location-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--line);
  padding: 38px 0;
}
.location-card h2 {
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  margin: 15px 0 22px;
}
.location-card p {
  font-size: 15px;
}
.location-meta {
  display: flex;
  align-items: center;
  gap: 35px;
  font-size: 12px;
}
.location-tag {
  color: var(--coral-dark);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.pharmacy-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--ink);
  padding: 100px 8vw 80px;
  text-align: center;
  perspective: 1200px;
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.8), transparent 28%), linear-gradient(135deg, #d9f1fb 0%, #eaf8f6 48%, #dff5ee 100%);
}
.pharmacy-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.pharmacy-hero-capsule {
  position: absolute;
  display: block;
  filter: drop-shadow(0 20px 30px rgba(17, 22, 33, 0.22));
  animation: promoIconFloat 7s ease-in-out infinite;
}
.capsule-1 {
  left: 4%;
  top: 20%;
  width: min(150px, 18vw);
  animation-delay: 0s;
}
.capsule-2 {
  right: 5%;
  top: 14%;
  width: min(170px, 20vw);
  animation-delay: 1.8s;
}
.capsule-3 {
  right: 9%;
  bottom: 12%;
  width: min(130px, 16vw);
  animation-delay: 3.6s;
}
.pharmacy-hero-content {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  text-align: center;
}
.pharmacy-hero-content.reveal h1,
.pharmacy-hero-content.reveal p,
.pharmacy-hero-content.reveal .pharmacy-badges {
  opacity: 0;
  animation: heroRise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.pharmacy-hero-content.reveal h1 {
  animation-delay: 0.2s;
}
.pharmacy-hero-content.reveal .pharmacy-hero-copy {
  animation-delay: 0.35s;
}
.pharmacy-hero-content.reveal .pharmacy-subline {
  animation-delay: 0.5s;
}
.pharmacy-hero-content.reveal .pharmacy-badges {
  animation-delay: 0.65s;
}
.pharmacy-hero-content h1 {
  margin: 0 0 22px;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 1.05;
  color: var(--ink);
}
.pharmacy-hero-content h1 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(120deg, #1479b8 0%, #14b8c4 50%, #3ccfa5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pharmacy-hero-copy {
  max-width: 460px;
  margin: 0 auto 18px;
  font-size: 20px;
  color: var(--ink);
}
.pharmacy-subline {
  margin: 0 auto;
  max-width: 620px;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.85;
}
.pharmacy-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.pharmacy-badges span {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(20, 121, 184, 0.28);
  color: #1479b8;
  box-shadow: 0 8px 20px rgba(17, 22, 33, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.services {
  background: linear-gradient(180deg, #f8f3f0 0%, #f5f5f5 100%);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.flip-card {
  perspective: 1600px;
  cursor: pointer;
}
.flip-card-inner {
  position: relative;
  min-height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-visible .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px rgba(17, 22, 33, 0.18);
  overflow: hidden;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #0e1524 0%, #131a2e 55%, #0a0f1c 100%);
  color: white;
}
.flip-card-front::before,
.flip-card-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(79, 195, 247, 0.5),
    rgba(120, 220, 255, 0.35) 30%,
    rgba(180, 240, 255, 0.4) 55%,
    rgba(79, 195, 247, 0.5) 100%
  );
  background-size: 260% 260%;
  mix-blend-mode: screen;
  animation: holoShift 9s ease-in-out infinite;
  opacity: 0.75;
  pointer-events: none;
}
.flip-card-back::before {
  animation-delay: -4.5s;
}
.flip-card-front > *,
.flip-card-back > * {
  position: relative;
  z-index: 1;
}
.flip-card-back {
  transform: rotateY(180deg);
  justify-content: center;
}
.flip-card-front h2,
.flip-card-back h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  margin: 0 0 14px;
  line-height: 1;
  color: white;
}
.flip-card-back p {
  color: white;
  max-width: 260px;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
}
.flip-hint {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}
.pharmacy-callout {
  padding: 100px 8vw;
  background: var(--ink);
  color: white;
}
.pharmacy-callout .section-label {
  background: linear-gradient(120deg, #4fc3f7, #eaf8ff, #7fd8ff, #4fc3f7);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holoShift 8s ease-in-out infinite;
}
.pharmacy-callout h2,
.pharmacy-callout h2 em,
.accept-section .section-heading h2 em,
.accept-section-alt .section-heading h2 em {
  background: linear-gradient(120deg, #4fc3f7, #eaf8ff, #7fd8ff, #4fc3f7);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holoShift 8s ease-in-out infinite;
}
.pharmacy-callout h2 {
  margin-bottom: 30px;
  filter: drop-shadow(0 2px 20px rgba(150, 120, 255, 0.32));
}
.pharmacy-callout h2 em {
  font-style: normal;
}
.pharmacy-callout p {
  max-width: 380px;
  margin-bottom: 25px;
}
.pharmacy-callout .text-link {
  border-color: white;
}
@keyframes heroZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes orbDrift1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-34px, 26px) scale(1.15);
  }
}
@keyframes orbDrift2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(28px, -22px) scale(1.12);
  }
}
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroNoteIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 0.85;
    transform: translateX(0);
  }
}
@keyframes heroScrollIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes typingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.profile-shell {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 30px;
  padding-top: 32px;
  padding-bottom: 64px;
  background: #f4f1f0;
}
.profile-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(30, 33, 41, 0.08);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(17, 22, 33, 0.08);
  padding: 24px;
}
.profile-card-main {
  align-self: start;
  position: sticky;
  top: 24px;
}
.profile-avatar-wrap {
  display: grid;
  place-items: center;
  gap: 14px;
}
.profile-avatar-wrap img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(232, 99, 122, 0.18);
  background: #f3f3f3;
}
.upload-avatar,
.upload-gallery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(17, 22, 33, 0.1);
  background: rgba(232, 99, 122, 0.06);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}
.upload-avatar input,
.upload-gallery input {
  display: none;
}
.profile-details {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.profile-details label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.72);
}
.profile-details input,
.mini-form input {
  appearance: none;
  width: 100%;
  border: 1px solid rgba(51, 51, 51, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
}
.primary-button,
.mini-form button {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--coral), #d77b90);
  color: white;
  font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(232, 99, 122, 0.22);
}
.profile-content {
  display: grid;
  gap: 24px;
}
.panel-header {
  margin-bottom: 18px;
}
.panel-header h2 {
  font-size: clamp(1.9rem, 2.4vw, 2.7rem);
}
.mini-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 18px;
}
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245, 245, 245, 0.8);
  border: 1px solid rgba(17, 22, 33, 0.06);
  font-weight: 600;
}
.check-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(232, 99, 122, 0.12);
  color: var(--coral);
  font-size: 12px;
}
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.chip-wrap span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(112, 142, 205, 0.1);
  border: 1px solid rgba(112, 142, 205, 0.15);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (max-width: 980px) {
  .profile-shell {
    grid-template-columns: 1fr;
  }
  .profile-card-main {
    position: static;
  }
}
@media (max-width: 640px) {
  .pharmacy-hero {
    padding: 70px 6vw 40px;
  }
  .capsule-1 {
    width: min(70px, 18vw);
  }
  .capsule-2 {
    width: min(78px, 20vw);
  }
  .capsule-3 {
    width: min(60px, 16vw);
  }
  .pharmacy-hero-content h1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }
  .pharmacy-badges span {
    width: 100%;
    justify-content: center;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .profile-shell {
    padding-top: 18px;
  }
  .mini-form {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 750px) {
  .site-header {
    height: 70px;
    padding: 0 6vw;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--ink);
    padding: 24px 6vw;
    flex-direction: column;
    gap: 18px;
  }
  .main-nav.open {
    display: flex;
  }
  .nav-cta {
    display: none;
  }
  .auth-slot {
    margin-right: 10px;
  }
  .google-btn,
  .user-chip {
    padding: 7px 12px;
    font-size: 11px;
  }
  .user-chip {
    padding: 4px 10px 4px 4px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
  }
  .menu-toggle span {
    display: block;
    width: 25px;
    height: 1px;
    background: currentColor;
  }
  .hero {
    min-height: 670px;
    padding: 110px 6vw 70px;
  }
  .hero h1 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .hero-copy {
    font-size: 15px;
    max-width: 300px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .hero-scroll {
    left: 6vw;
  }
  .section-pad {
    padding: 80px 6vw;
  }
  .intro-grid,
  .contact,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .intro-detail,
  .about-copy {
    padding-top: 0;
  }
  .about-copy-continued {
    grid-column: 1;
  }
  .about-image {
    aspect-ratio: 4 / 5;
  }
  .stats-row {
    margin-top: 70px;
    gap: 30px;
    justify-content: space-between;
  }
  .stats-row div {
    display: block;
  }
  .stats-row strong {
    display: block;
    margin-bottom: 7px;
    font-size: 32px;
  }
  .stats-row span {
    font-size: 9px;
  }
  .stats-row div:not(:first-child) {
    padding-left: 14px;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .card-tall .card-art,
  .card-art {
    height: 330px;
  }
  .promise-orbit {
    width: 180px;
    height: 180px;
    right: -20px;
    top: 14%;
    font-size: 40px;
  }
  .promise-orbit:after {
    inset: 16px;
  }
  .promise p {
    max-width: 250px;
  }
  .contact-side {
    padding-top: 0;
  }
  .contact-line {
    gap: 15px;
    flex-direction: column;
  }
  .contact-line strong {
    font-size: 14px;
  }
  footer {
    padding: 28px 6vw;
    flex-wrap: wrap;
  }
  footer > span:last-child {
    width: 100%;
    order: 3;
  }
  .inner-hero {
    padding: 90px 6vw 75px;
  }
  .inner-hero h1 {
    font-size: clamp(3.8rem, 15vw, 6rem);
  }
  .about-section {
    padding: 100px 6vw 70px;
  }
  .about-section-panel {
    border-radius: 20px;
  }
  .location-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 35px;
  }
  .location-card h2 {
    font-size: 3.3rem;
  }
  .location-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .pharmacy-hero {
    padding: 60px 6vw 30px;
  }
  .pharmacy-hero-content h1 {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }
  .pharmacy-hero-content h1 .hero-line-1 {
    white-space: normal;
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .service-grid h2 {
    margin: 24px 0 10px;
  }
  .pharmacy-callout {
    padding: 80px 6vw;
  }
  .faq-widget {
    right: 15px;
    bottom: 15px;
  }
  .faq-panel {
    width: min(320px, calc(100vw - 30px));
    max-height: min(72vh, 520px);
  }
  .faq-chat {
    max-height: 220px;
  }
  .whatsapp-channel {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .whatsapp-copy {
    max-width: 100%;
  }
  .whatsapp-btn {
    width: 100%;
    justify-content: center;
  }
  .whatsapp-qr {
    width: min(48vw, 170px);
    align-self: center;
  }
  .whatsapp-qr-badge {
    width: 32px;
    height: 32px;
    right: -6px;
    bottom: -6px;
  }
}

/* ============================================================
   PAGE LOADER
   Full-screen splash shown until every asset on the page
   (images, fonts, stylesheets, scripts) has finished loading.
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
.page-loader-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
}
.page-loader-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: page-loader-pulse 1.4s ease-in-out infinite;
}
.page-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(232, 99, 122, 0.25);
  border-top-color: var(--coral);
  animation: page-loader-spin 0.9s linear infinite;
}

@keyframes page-loader-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.88);
    opacity: 0.75;
  }
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

body.is-loading {
  overflow: hidden;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Pennywise Gifts page */
.gifts-page main {
  background: #f6f1ed;
}
.gifts-page {
  overflow-x: hidden;
}
.gifts-hero {
  position: relative;
  min-height: 390px;
  padding: 92px 8vw 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 78% 50%, rgba(255,255,255,.72), transparent 30%), linear-gradient(120deg, #ead8d0 0%, #f7eee8 52%, #dfc5bd 100%);
}
.gifts-hero-copy .authentic-badge {
  margin-top: 14px;
  border-color: rgba(51, 51, 51, 0.16);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
}
.gifts-hero-copy .authentic-badge:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(51, 51, 51, 0.3);
}
.gifts-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 650px;
  text-align: center;
}
.section-label {
  margin-bottom: 16px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gifts-hero h1 {
  max-width: 620px;
  margin-bottom: 24px;
  font-size: clamp(3.4rem, 7vw, 7rem);
}
.gifts-hero-copy > p:not(.section-label) {
  max-width: 430px;
  margin: 0 auto 22px;
  font-size: 18px;
  opacity: .78;
}
.gifts-hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1000px;
}
.floating-perfume {
  position: absolute;
  width: clamp(125px, 16vw, 220px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(18px 24px 14px rgba(78, 42, 47, .2));
  transform-style: preserve-3d;
  animation: perfumeFloat 5s ease-in-out infinite;
}
.perfume-one { left: 8%; top: 8%; width: clamp(115px, 14vw, 195px); animation-delay: -.8s; transform: rotate(-12deg) translateZ(50px); }
.perfume-two { right: 8%; top: 3%; width: clamp(130px, 17vw, 235px); animation-delay: -2.4s; transform: rotate(12deg) translateZ(80px); }
.perfume-three { left: 2%; bottom: -5%; width: clamp(135px, 18vw, 250px); animation-delay: -4.5s; transform: rotate(8deg) translateZ(20px); }
.perfume-four { right: 1%; bottom: -5%; width: clamp(140px, 19vw, 260px); animation-delay: -1.7s; transform: rotate(-9deg) translateZ(30px); }
.perfume-one { left: -5%; top: 10%; }
.perfume-two { right: -5%; top: 7%; }
.perfume-three { left: 5%; bottom: -18%; }
.perfume-four { right: 5%; bottom: -18%; }
.perfume-five { left: auto; right: 19%; top: -12%; width: clamp(105px, 13vw, 175px); animation-delay: -3.2s; transform: rotate(4deg) translateZ(120px); }
@keyframes perfumeFloat {
  0%, 100% { translate: 0 0; }
  25% { translate: 14px -12px; }
  50% { translate: -8px -24px; }
  75% { translate: -16px -7px; }
}
.gifts-shop-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: 42px;
}
.gifts-shop-heading h2 {
  font-size: clamp(2.8rem, 5vw, 5.5rem);
}
.gifts-shop-note {
  max-width: 245px;
  font-size: 13px;
  opacity: .7;
}
.gifts-shop-note strong {
  color: var(--coral);
  font-size: 28px;
}
.gifts-coming-soon {
  max-width: 560px;
  margin: 40px auto;
  padding: 60px 20px;
  text-align: center;
}
.gifts-coming-soon h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 14px; }
.gifts-coming-soon > p:not(.section-label) { font-size: 15px; opacity: .7; }
.gifts-toolbar {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}
.gifts-search, .gifts-filter { display: grid; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gifts-search { flex: 1; }
.gifts-filter { width: 220px; }
.gifts-search input, .gifts-filter select { min-height: 48px; padding: 0 15px; color: var(--ink); background: white; border: 1px solid rgba(51,51,51,.14); border-radius: 0; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gifts-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 34px; align-items: start; }
.gift-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
.gift-pagination { grid-column: 1; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; margin-top: 8px; font-size: 13px; }
.gift-page-button { min-width: 88px; padding: 10px 14px; border: 1px solid rgba(51,51,51,.2); color: var(--ink); background: white; font-size: 12px; font-weight: 700; }
.gift-page-button:not(:disabled):hover { color: white; border-color: var(--coral); background: var(--coral); }
.gift-page-button:disabled { cursor: not-allowed; opacity: .35; }
.gift-product-card { min-width: 0; }
.gift-product-image-wrap { position: relative; aspect-ratio: 1 / 1.08; margin-bottom: 15px; overflow: hidden; background: #eee4de; }
.gift-product-image { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; }
.gift-product-card:hover .gift-product-image { transform: scale(1.05); }
.gift-add-button { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: var(--coral); font-size: 25px; line-height: 1; }
.gift-product-vendor {
  margin-bottom: 5px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gift-product-card h3 {
  min-height: 44px;
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.25;
}
.gift-product-price { font-size: 15px; }
.gift-cart {
  position: sticky;
  grid-column: 2;
  grid-row: 1 / span 2;
  top: 90px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(51, 42, 40, .08);
}
.gift-cart-head, .gift-cart-total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: baseline;
}
.gift-cart-head .section-label { margin-bottom: 0; }
.gift-cart-head span, .gift-cart-footnote { font-size: 12px; opacity: .6; }
.gift-cart-items { display: grid; gap: 14px; min-height: 90px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.gift-cart-empty, .gift-empty-state, .gift-loading { font-size: 14px; opacity: .65; }
.gift-cart-item { display: flex; justify-content: space-between; gap: 10px; }
.gift-cart-item div { display: grid; gap: 3px; }
.gift-cart-item strong { font-size: 13px; line-height: 1.25; }
.gift-cart-item span { font-size: 12px; opacity: .65; }
.gift-cart-item button { align-self: start; padding: 0; border: 0; background: none; font-size: 20px; opacity: .5; }
.gift-cart-total { padding: 18px 0; font-size: 14px; }
.gift-cart-total strong { font-family: var(--display); font-size: 18px; }
.gift-checkout { width: 100%; justify-content: center; border: 0; }
.gift-checkout:disabled { cursor: not-allowed; opacity: .45; }
.gift-checkout.is-signed-out { background: #333; }
.gift-cart-footnote { margin-top: 12px; line-height: 1.45; }

/* Gift shop: payment-method modal */
.gift-pay-card { width: min(480px, 100%); text-align: left; }
.gift-pay-card h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: 10px; }
.gift-pay-step p { font-size: 14px; opacity: .72; margin: 0 0 14px; }
.gift-pay-pickup { display: grid; gap: 6px; margin-bottom: 18px; font-size: 13px; font-weight: 600; }
.gift-pay-pickup select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
}
.gift-pay-methods { display: grid; gap: 10px; }
.gift-pay-method {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}
.gift-pay-method:hover:not(:disabled) { border-color: var(--coral); background: #fff6f4; }
.gift-pay-method:disabled { cursor: not-allowed; opacity: .5; }
.gift-pay-method strong { font-size: 14px; }
.gift-pay-method span { font-size: 12px; opacity: .65; }
.gift-pay-status { min-height: 18px; margin: 12px 0 0; font-size: 12.5px; color: var(--coral); opacity: 1; }
.gift-pay-spinner {
  width: 36px;
  height: 36px;
  margin: 10px auto 0;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--coral);
  animation: giftPaySpin 0.8s linear infinite;
}
@keyframes giftPaySpin {
  to { transform: rotate(360deg); }
}
.gift-pay-bank-details {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fff6f4;
  border-radius: 12px;
  font-size: 13.5px;
}
.gift-pay-bank-details p { margin: 0; opacity: 1; }
.gift-pay-done { width: 100%; justify-content: center; margin-top: 14px; border: 0; }
#giftPaypalButtons { min-height: 44px; margin-bottom: 10px; }
/* Mobile sizing comes from .tenant-overlay's zoom (below), same as the
   hours/newsletter/welcome popups — no separate calc(Npx * var(--k)) rules
   here, since stacking both approaches on the same element double-scales it. */

@media (max-width: 900px) {
  .gifts-hero { min-height: 440px; padding-top: 100px; }
  .gifts-layout { grid-template-columns: 1fr; }
  .gift-cart { position: static; grid-column: 1; grid-row: auto; }
  .gift-pagination { grid-column: 1; }
}
@media (max-width: 600px) {
  .gifts-hero { min-height: 500px; padding: 112px 6vw 35px; }
  .gifts-hero h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .gifts-hero-art { opacity: .82; }
  .floating-perfume { width: clamp(100px, 29vw, 150px); }
  .perfume-one { left: -18%; top: 16%; }
  .perfume-two { right: -18%; top: 11%; }
  .perfume-three { left: -18%; bottom: 2%; }
  .perfume-four { right: -18%; bottom: 2%; }
  .perfume-five { right: 8%; top: 3%; }
  .gifts-shop-heading, .gifts-toolbar { display: grid; }
  .gifts-shop-heading { gap: 18px; }
  .gifts-filter { width: 100%; }
  .gift-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .gift-product-card h3 { min-height: 58px; font-size: 14px; }
  .gift-add-button { right: 8px; bottom: 8px; }
}


/* Plazas page */
body.plazas-page .site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.plaza-swiper-section {
  position: relative;
  padding-top: 90px;
  padding-bottom: 110px;
  background: var(--paper);
}
.plazas-heading {
  position: relative;
  z-index: 1;
  margin: 0 0 -60px;
  text-align: center;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.plazas-heading em {
  color: var(--coral);
  font-style: normal;
}
.wave-letter {
  display: inline-block;
  animation: waveBob 2.2s ease-in-out infinite;
}
@keyframes waveBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
@media (max-width: 750px) {
  .plaza-swiper-section {
    padding-top: 70px;
  }
  .plazas-heading {
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    margin-bottom: -30px;
  }
  .wave-letter {
    animation-duration: 1.8s;
  }
}
.plaza-swiper {
  position: relative;
  z-index: 2;
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.plaza-nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(51, 51, 51, 0.14);
  background: #ffffff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.plaza-nav:hover {
  background: var(--coral);
  color: #ffffff;
  transform: translateY(-2px);
}
.plaza-viewport {
  flex: 1;
  overflow: hidden;
  transition: height 0.4s ease;
}
.plaza-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.plaza-slide {
  flex: 0 0 100%;
  max-width: 100%;
  color: var(--ink);
}
.plaza-slide-media {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plaza-slide-media img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 25px 30px rgba(17, 22, 33, 0.16));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.plaza-slide-body {
  padding: 22px 40px 44px;
  text-align: center;
}
.plaza-slide-body .plaza-badge {
  display: inline-block;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(232, 99, 122, 0.16);
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plaza-slide-body h2 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.02;
  color: var(--ink);
}
.plaza-slide-count {
  margin: 6px 0 26px;
  font-size: 14px;
  color: rgba(51, 51, 51, 0.6);
}
/* A dedicated single-plaza page (plazas-*.html) reuses the same slide
   markup as the all-plazas swiper, just without the swiper/track wrapper
   around it — so it needs its own width cap and centering. */
.plaza-slide-single {
  max-width: 900px;
  margin: 0 auto;
}
.plaza-back-link {
  text-align: center;
  margin: -10px 0 22px;
}
.plaza-back-link a {
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
}
.plaza-back-link a:hover {
  text-decoration: underline;
}
/* Plazas hub page (plazas.html): a card per plaza, linking out to its
   own dedicated page */
.plaza-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1220px;
  margin: 0 auto;
}
.plaza-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px 30px;
  background: #ffffff;
  border: 1px solid rgba(51, 51, 51, 0.08);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plaza-hub-card:hover,
.plaza-hub-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}
.plaza-hub-media {
  display: block;
  width: 100%;
  height: 160px;
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
}
.plaza-hub-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plaza-hub-card h2 {
  margin: 10px 0 6px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--ink);
}
.plaza-hub-card > p {
  margin: 0;
  font-size: 13px;
  opacity: 0.65;
}
.plaza-hub-cta {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
}
@media (max-width: 900px) {
  .plaza-hub-grid {
    grid-template-columns: 1fr;
  }
}
.store-logo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px 18px;
}
.store-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.store-logo-slot {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: 1.5px dashed rgba(51, 51, 51, 0.25);
  background: rgba(51, 51, 51, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--coral);
}
.store-logo-slot.has-logo {
  border-style: solid;
  border-color: rgba(51, 51, 51, 0.1);
  background: #ffffff;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(17, 22, 33, 0.08);
}
.store-logo-slot.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.store-logo-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.store-logo-desc {
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.4;
}
.store-kiosk-heading {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(51, 51, 51, 0.1);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  text-align: left;
}
.plaza-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.plaza-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(51, 51, 51, 0.18);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.plaza-dot.is-active {
  background: var(--coral);
  transform: scale(1.3);
}

/* Tenant "list your business" trigger + modal */
.tenant-trigger {
  position: fixed;
  left: 25px;
  bottom: 23px;
  z-index: 20;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  animation: tenantShake 4.5s ease-in-out infinite;
}
.tenant-trigger:hover {
  background: var(--coral-dark);
}
.tenant-trigger-icon {
  font-size: 22px;
  line-height: 1;
}
@keyframes tenantShake {
  0%,
  84%,
  100% {
    transform: rotate(0deg);
  }
  86% {
    transform: rotate(-12deg);
  }
  88% {
    transform: rotate(10deg);
  }
  90% {
    transform: rotate(-8deg);
  }
  92% {
    transform: rotate(6deg);
  }
  94% {
    transform: rotate(-4deg);
  }
  96% {
    transform: rotate(0deg);
  }
}
.tenant-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 10, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.tenant-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.tenant-card {
  position: relative;
  width: min(440px, 100%);
  padding: 40px 36px 34px;
  text-align: center;
  color: var(--ink);
  background: #fff9f8;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(20, 16, 25, 0.24);
  transform: translateY(22px) scale(0.94);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tenant-overlay.is-visible .tenant-card {
  transform: translateY(0) scale(1);
}
.tenant-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.06);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tenant-close:hover {
  background: rgba(51, 51, 51, 0.12);
}
.tenant-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  font-size: 22px;
  color: #ffffff;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(232, 99, 122, 0.12), 0 12px 24px rgba(232, 99, 122, 0.25);
}
.tenant-card h2 {
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 4vw, 2rem);
}
.tenant-card > p {
  font-size: 14px;
  opacity: 0.72;
  margin-bottom: 22px;
}
.authentic-mark svg {
  width: 26px;
  height: 26px;
}
.authentic-photo {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 14px;
}
.authentic-intro {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0 0 16px;
}
.authentic-points {
  text-align: left;
  margin: 0 0 22px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.9;
}
.authentic-points li {
  margin-bottom: 8px;
}
.tenant-form {
  display: grid;
  gap: 12px;
  text-align: left;
}
.tenant-form label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tenant-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(51, 51, 51, 0.16);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.tenant-form input::placeholder {
  color: rgba(51, 51, 51, 0.4);
}
.tenant-form button {
  margin-top: 4px;
}
.tenant-hidden-field {
  position: absolute;
  left: -9999px;
}
.tenant-status {
  min-height: 18px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
}
.tenant-status.is-error {
  color: #c0392b;
}
.tenant-status.is-success {
  color: #2f9e5c;
}
.tenant-note {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .tenant-trigger {
    animation: none;
  }
}

@media (max-width: 720px) {
  .plaza-swiper {
    gap: 10px;
  }
  .plaza-nav {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .plaza-slide-media {
    height: 200px;
  }
  .plaza-slide-body {
    padding: 24px 20px 30px;
  }
}

/* News & Media page */
.news-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/hero.jpg");
  background-position: center;
  background-size: cover;
  animation: aboutHeroZoom 22s ease-in-out infinite alternate;
}
.news-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}
.news-hero .section-heading,
.news-hero .news-grid {
  position: relative;
  z-index: 2;
}
.news-hero .section-heading {
  justify-content: center;
  text-align: center;
}
.news-hero .section-heading h2 {
  color: white;
}
.news-hero .section-heading h2 em {
  color: var(--sun);
}
.news-hero .section-heading p {
  max-width: 460px;
  margin: 10px auto 0;
  color: rgba(255, 255, 255, 0.75);
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}
.news-card {
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  padding: 35px;
  display: flex;
  flex-direction: column;
  color: white;
}
.news-card-feature {
  grid-column: 1 / -1;
  background: rgba(8, 8, 10, 0.42);
  align-items: center;
  text-align: center;
}
.news-tag {
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.news-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: 6px 0 18px;
}
.news-card h3 {
  font-size: 22px;
  margin: 0 0 14px;
  max-width: 520px;
  color: white;
}
.news-card p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
  margin: 0 0 18px;
}
.news-card-feature {
  padding: clamp(24px, 3vw, 44px) clamp(20px, 6vw, 110px) 28px;
}
.news-card-feature h3 {
  max-width: 1100px;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  text-wrap: balance;
}
.news-card-feature > p,
.news-more-inner > p {
  width: 100%;
  max-width: 1100px;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.7;
  text-wrap: balance;
}
.news-card-feature > .news-date {
  font-size: 12px;
}
.news-more {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.55s ease;
}
.news-more.is-open {
  grid-template-rows: 1fr;
}
.news-more-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.news-more.is-open .news-more-inner {
  opacity: 1;
}
.news-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 11px 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.news-more-btn:hover {
  background: white;
  color: var(--ink);
}
.news-more-arrow {
  transition: transform 0.3s ease;
}
.news-more-btn[aria-expanded="true"] .news-more-arrow {
  transform: rotate(180deg);
}
.news-quote {
  max-width: 1100px;
  margin: 8px auto 24px;
  padding: 14px 0 4px;
  border-top: 3px solid var(--coral);
  text-align: center;
}
.news-quote p {
  max-width: none;
  margin: 0 0 8px;
  font-style: italic;
  color: white;
  font-size: 18px;
  line-height: 1.7;
  text-wrap: balance;
}
.news-quote cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
}
.text-link-inline {
  color: var(--sun);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.news-card .text-link {
  margin-top: auto;
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}
.news-source {
  display: inline-block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.news-source:hover {
  color: var(--sun);
}
.news-source span {
  display: inline-block;
  margin-left: 3px;
}
.news-links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.news-links .text-link {
  margin-top: 0;
}
.news-card-image-wrap {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-card-image {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
}
.news-slideshow {
  position: relative;
  width: 100%;
  height: clamp(260px, 30vw, 440px);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
  background: rgba(255, 255, 255, 0.04);
}
.news-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.02);
  opacity: 0;
  animation: newsSlideshowFade 20s infinite;
}
.news-slideshow img:nth-child(1) {
  animation-delay: 0s;
}
.news-slideshow img:nth-child(2) {
  animation-delay: 4s;
}
.news-slideshow img:nth-child(3) {
  animation-delay: 8s;
}
.news-slideshow img:nth-child(4) {
  animation-delay: 12s;
}
.news-slideshow img:nth-child(5) {
  animation-delay: 16s;
}
@keyframes newsSlideshowFade {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 750px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
  .pharmacy-callout {
    padding: 70px 6vw;
  }
  .news-slideshow {
    height: 280px;
  }
}

/* ============================================================
   SOCIAL MEDIA PAGE
   ============================================================ */
body.social-page .site-header {
  position: relative;
  background: #000000;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.social-page .google-btn,
body.social-page .user-chip {
  border-color: rgba(255, 255, 255, 0.55);
}
body.social-page .google-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
body.social-page footer {
  background: #000000;
}

/* ============================================================
   PHARMACY PAGE
   ============================================================ */
body.pharmacy-page {
  /* Holographic blue-green pharmacy theme (replaces the old red accent) */
  --coral: #14a3b8;
  --coral-dark: #0b7a99;
  --holo-gradient: linear-gradient(120deg, #1479b8 0%, #14b8c4 45%, #4fd1b0 100%);
}
body.pharmacy-page .site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Pharmacy: prescription guide + store numbers */
.rx-guide {
  background: #ffffff;
  text-align: center;
}
.rx-guide .section-heading {
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
}
.rx-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.rx-steps li {
  padding: 28px 22px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid rgba(51, 51, 51, 0.08);
}
.rx-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--holo-gradient);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(20, 163, 184, 0.35);
}
.rx-steps h3 {
  margin: 0 0 8px;
  font-size: 19px;
}
.rx-steps p {
  margin: 0;
  font-size: 15px;
  opacity: 0.8;
}
.rx-note {
  max-width: 700px;
  margin: 26px auto 0;
  font-size: 14px;
  font-style: italic;
  opacity: 0.75;
}
.rx-numbers-title {
  margin: 56px 0 24px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.rx-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.rx-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #f0faff 100%);
  border: 1px solid rgba(20, 163, 184, 0.28);
  box-shadow: 0 10px 24px rgba(20, 121, 184, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rx-store:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(20, 163, 184, 0.22);
}
.rx-store strong {
  font-family: var(--display);
  font-size: 16px;
}
.rx-store > a:not(.rx-wa) {
  font-size: 20px;
  font-weight: 700;
  background: var(--holo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rx-wa {
  margin-top: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20, 163, 184, 0.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.rx-wa:hover {
  background: var(--holo-gradient);
  border-color: transparent;
  color: #fff;
}
.rx-steps li {
  background: linear-gradient(160deg, #f4fbff 0%, #ecf9f6 100%);
  border-color: rgba(20, 163, 184, 0.22);
}
.rx-guide .section-heading h2 em {
  background: var(--holo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 750px) {
  .rx-steps {
    grid-template-columns: 1fr;
  }
}

.accept-section {
  background: white;
}
.accept-section .section-heading {
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
}
.accept-section-alt {
  background: var(--paper);
}
.accept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.accept-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
.accept-card h3 {
  margin: 18px 0 0;
  font-size: 22px;
  text-align: center;
}
.accept-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1b26 0%, #0d2b38 55%, #08171f 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px rgba(24, 29, 39, 0.14);
}
.accept-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(79, 195, 247, 0.55),
    rgba(20, 184, 196, 0.5) 25%,
    rgba(94, 234, 212, 0.5) 50%,
    rgba(20, 121, 184, 0.55) 75%,
    rgba(120, 200, 255, 0.55) 100%
  );
  background-size: 260% 260%;
  mix-blend-mode: screen;
  animation: holoShift 9s ease-in-out infinite;
  opacity: 0.85;
}
.accept-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%),
    rgba(6, 20, 28, 0.28);
}
.accept-media-2::before {
  animation-delay: -3s;
}
.accept-media-3::before {
  animation-delay: -6s;
}
.accept-media-4::before {
  animation-delay: -1.5s;
}
.accept-media-5::before {
  animation-delay: -4.5s;
}
@keyframes holoShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.accept-frame {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 0 16px;
  z-index: 1;
}
.accept-eyebrow {
  font-style: italic;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-family: Georgia, "Times New Roman", serif;
}
.accept-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: 0.02em;
  color: white;
  text-transform: uppercase;
}
.accept-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}

.pharmacy-callout-wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: end;
}
.pharmacy-callout-copy {
  max-width: 520px;
}
.compact-contact-form {
  display: grid;
  gap: 10px;
  width: min(100%, 420px);
  justify-self: end;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.compact-contact-form label {
  display: grid;
  gap: 5px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.04em;
}
.compact-contact-form input,
.compact-contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
}
.compact-contact-form input::placeholder,
.compact-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.compact-contact-form .button-light {
  margin-top: 4px;
  width: fit-content;
  min-width: 142px;
  padding: 11px 18px;
  font-size: 13px;
}

@media (max-width: 750px) {
  .accept-grid,
  .accept-grid-2,
  .pharmacy-callout-wrap {
    grid-template-columns: 1fr;
  }
  .compact-contact-form {
    justify-self: stretch;
    width: 100%;
  }
}

/* Hero */
.social-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px 8vw 90px;
  background: #16161a;
}
.social-hero-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.social-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-tile:hover {
  transform: scale(1.08);
  z-index: 1;
  opacity: 1;
}
.social-tile-1 {
  background: #e8637a;
}
.social-tile-2 {
  background: #40566b;
}
.social-tile-3 {
  background: #cad6bc;
}
.social-tile-4 {
  background: #d17b5e;
}
.social-tile-5 {
  background: #668c94;
}
.social-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.55) 0%,
    rgba(8, 8, 10, 0.72) 55%,
    rgba(8, 8, 10, 0.55) 100%
  );
}
.social-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  color: white;
}
.social-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.social-hero-content h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.02;
  margin-bottom: 25px;
  color: white;
}
.social-hero-content h1 em {
  color: var(--sun);
  font-style: normal;
}
.social-hero-copy {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto;
}

/* Scroll reveal (shared .social-reveal) */
.social-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.social-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* TikTok phone grid */
.social-tiktok {
  background: var(--paper);
}
.phone-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.phone-row::-webkit-scrollbar {
  display: none;
}
.phone-card {
  position: relative;
  display: block;
  flex: 0 0 230px;
  border: none;
  scroll-snap-align: start;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.phone-card:hover,
.phone-card:focus-within {
  transform: translateY(-10px);
}
/* Inhouse phone mockup — drawn with CSS instead of a frame image, so
   there's no transparency to break. A dark chassis (padding = bezel
   thickness) with a notch, a home indicator, and side buttons, around
   a screen that clips the video. */
.phone-chassis {
  position: relative;
  padding: 9px;
  border-radius: 32px;
  background: linear-gradient(155deg, #3c3c42 0%, #1b1b1f 55%, #060607 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 3px rgba(255, 255, 255, 0.12),
    0 18px 36px rgba(17, 22, 33, 0.35);
}
.phone-screen {
  position: relative;
  display: block;
  border-radius: 23px;
  overflow: hidden;
  background: #000000;
  outline: none;
}
.phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 14px;
  background: #060607;
  border-radius: 9px;
  z-index: 6;
  pointer-events: none;
}
.phone-notch::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1c2a38;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1.5px rgba(80, 140, 200, 0.35);
}
.phone-home-indicator {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.4);
  z-index: 6;
  pointer-events: none;
}
.phone-side-btn {
  position: absolute;
  background: linear-gradient(90deg, #0b0b0d, #2c2c31);
  border-radius: 2px;
}
.phone-side-btn-power {
  right: -3px;
  top: 30%;
  width: 3px;
  height: 52px;
}
.phone-side-btn-vol-up {
  left: -3px;
  top: 22%;
  width: 3px;
  height: 30px;
}
.phone-side-btn-vol-down {
  left: -3px;
  top: 30%;
  width: 3px;
  height: 30px;
}
.phone-gif-link {
  display: block;
  outline: none;
}
.phone-gif {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #ffffff;
  border: none;
}
.phone-info {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 14px;
  margin: 9px;
  border-radius: 28px;
  text-align: center;
  color: white;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.phone-card:hover .phone-info,
.phone-card:focus-within .phone-info {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.phone-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
}
.phone-info strong {
  font-size: 14px;
}
.phone-location {
  font-size: 11px;
  opacity: 0.7;
}
.phone-whatsapp-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.phone-whatsapp-list a {
  font-size: 11px;
  font-weight: 700;
  color: var(--sun);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
}

/* Instagram / Facebook split */
.social-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 240px;
}
.split-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 6vw;
  color: white;
  text-align: center;
  transition: flex-grow 0.4s ease;
}
.split-instagram {
  background: linear-gradient(135deg, #e8637a 0%, #d17b5e 45%, #9c4d59 100%);
}
.split-facebook {
  background: linear-gradient(135deg, #40566b 0%, #668c94 55%, #333333 100%);
}
.split-linkedin {
  background: linear-gradient(135deg, #0a66c2 0%, #0b4f94 55%, #083a6e 100%);
}
.social-split-single {
  grid-template-columns: 1fr;
}
.split-icon-linkedin {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.split-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}
.split-icon img {
  width: 34px;
  height: 34px;
  filter: none;
}
.split-panel:hover .split-icon {
  transform: scale(1.15) rotate(-8deg);
}
.split-panel h2 {
  font-size: 30px;
  margin: 0;
}
.split-panel p {
  opacity: 0.85;
  margin: 0;
}
.split-cta {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.split-panel:hover .split-cta {
  opacity: 1;
  transform: translateY(0);
}
.split-cta span {
  margin-left: 4px;
}

/* Advertise with us */
.social-advertise {
  background: var(--ink);
  color: white;
  text-align: center;
  padding: 46px 8vw;
}
.advertise-panel {
  max-width: 560px;
  margin: 0 auto;
}
.social-advertise h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.2;
}
.social-advertise h2 em {
  color: var(--sun);
  font-style: normal;
  display: block;
  font-size: 0.92em;
  margin-top: 2px;
}
.advertise-copy {
  opacity: 0.8;
  margin-bottom: 16px;
}
.advertise-note {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.5;
}

@media (max-width: 1100px) {
  .site-header {
    padding: 0 3vw;
  }
  .main-nav {
    gap: 16px;
    margin-right: 12px;
  }
  .main-nav a {
    font-size: 12px;
  }
  .logo-image {
    width: 150px;
  }
}

@media (max-width: 900px) {
  .social-split {
    grid-template-columns: 1fr;
  }
  .site-header {
    padding: 0 4vw;
  }
  .main-nav {
    gap: 12px;
  }
}

@media (max-width: 750px) {
  .social-hero {
    padding: 120px 6vw 70px;
    min-height: 380px;
  }
  .social-hero-collage {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
  .phone-row {
    gap: 16px;
  }
  .phone-card {
    flex-basis: 190px;
  }
  .split-panel {
    padding: 32px 6vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-icon,
  .page-loader-ring {
    animation: none;
  }
  .hero-image,
  .hero-orb,
  .hero-content.reveal h1,
  .hero-content.reveal .hero-copy,
  .hero-content.reveal .hero-actions,
  .hero-scroll,
  .hero-scroll span,
  .promise::before,
  .promise::after,
  .cursor-glow,
  .wave-letter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cursor-glow {
    display: none !important;
  }
  .news-slideshow img {
    animation: none !important;
    opacity: 0 !important;
  }
  .news-slideshow img:first-child {
    opacity: 1 !important;
  }
  .social-blob {
    animation: none !important;
  }
  .social-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .phone-card,
  .phone-info,
  .split-icon,
  .split-cta,
  .social-tile {
    transition: none !important;
  }
}
/* ============================================================
   PROMOTIONS PAGE
   ============================================================ */
body.promo-page .site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.promo-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 100px 8vw 80px;
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .8), transparent 28%), linear-gradient(135deg, #f7dfe3 0%, #f6f3ee 48%, #efe9dd 100%);
  perspective: 1200px;
}
.promo-hero-icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.promo-hero-icon {
  position: absolute;
  width: 84px;
  height: 84px;
  padding: 16px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(17, 22, 33, 0.16);
  object-fit: contain;
  animation: promoIconFloat 7s ease-in-out infinite;
}
.icon-instagram {
  left: 8%;
  top: 20%;
  animation-delay: 0s;
}
.icon-facebook {
  right: 10%;
  top: 16%;
  width: 72px;
  height: 72px;
  animation-delay: 1.4s;
}
.icon-tiktok {
  left: 14%;
  bottom: 14%;
  animation-delay: 2.6s;
}
.icon-whatsapp {
  right: 9%;
  bottom: 18%;
  width: 76px;
  height: 76px;
  animation-delay: 3.8s;
}
@keyframes promoIconFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 0deg);
  }
  25% {
    transform: translate3d(6px, -16px, 30px) rotate3d(1, 1, 0, 10deg);
  }
  50% {
    transform: translate3d(-4px, -6px, 10px) rotate3d(1, 1, 0, -8deg);
  }
  75% {
    transform: translate3d(-8px, -20px, 25px) rotate3d(1, 1, 0, 6deg);
  }
}
.promo-hero-textblock {
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: center;
}
.promo-hero-headline {
  margin: 0 0 22px;
  font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  line-height: 1;
}
.promo-hero-headline em {
  white-space: nowrap;
}
.promo-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}
.promo-hero-copy > p:not(.section-label) {
  max-width: 440px;
  margin: 0 auto 28px;
  font-size: 20px;
}
.promo-hero-stamp {
  position: absolute;
  right: 8vw;
  bottom: 50px;
  z-index: 1;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--coral-dark);
  border: 1px solid rgba(232, 99, 122, .65);
  border-radius: 50%;
  transform: rotate(12deg);
}
.promo-hero-stamp strong { font-family: var(--display); font-size: 28px; line-height: 1; }
.promo-hero-stamp span { margin-top: 6px; font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1.15; }

.promo-banner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: stretch;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}
.promo-banner-art {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  background: linear-gradient(150deg, #e8637a, #c94c62 55%, #333333);
}
.sleepy-video-wrap {
  min-height: 520px;
  padding: 0;
  overflow: hidden;
  background: #d9e9df;
}
.sleepy-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.sleepy-feature .promo-banner-copy {
  padding-top: 48px;
  padding-bottom: 48px;
}
.sleepy-feature .promo-banner-copy p:not(.promo-tag) {
  max-width: 560px;
}
.promo-banner-art::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  top: 12%;
  right: 10%;
  box-shadow:
    0 0 0 30px rgba(255, 255, 255, 0.08),
    0 0 0 60px rgba(255, 255, 255, 0.06);
}
.promo-banner-word {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  color: #ffffff;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 0.92;
}
.promo-banner-copy {
  padding: 40px 45px 40px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.promo-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral-dark);
}
.sleepy-category-icons,
.brand-category-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 6px;
}
.sleepy-category,
.brand-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  text-align: center;
}
.sleepy-category svg,
.brand-category svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(232, 99, 122, 0.1);
  color: var(--coral-dark);
  transition: background 0.25s ease, transform 0.25s ease;
}
.sleepy-category:hover svg,
.brand-category:hover svg {
  background: rgba(232, 99, 122, 0.18);
  transform: translateY(-2px);
}
.sleepy-category span,
.brand-category span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  opacity: 0.75;
}
.promo-banner-copy h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
}
/* ============================================================
   Promotions — "New in store" swipeable brand carousel (Sleepy plus
   guest brands). Native scroll-snap, same pattern as the pharmacy
   store carousel: free touch-swipe, prev/next buttons, and dots.
   ============================================================ */
.brand-carousel {
  position: relative;
}
.brand-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.brand-track::-webkit-scrollbar {
  display: none;
}
.brand-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.brand-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(232, 99, 122, 0.35);
  transform: translateY(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.brand-nav:hover:not(:disabled) {
  background: var(--coral-dark);
  transform: translateY(-50%) scale(1.08);
}
.brand-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.brand-prev {
  left: 14px;
}
.brand-next {
  right: 14px;
}
.brand-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.brand-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(51, 51, 51, 0.18);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.brand-dot.is-active {
  background: var(--coral);
  transform: scale(1.25);
}
.morfose-video-wrap {
  min-height: 520px;
  padding: 0;
  overflow: hidden;
  background: #efece6;
}
.morfose-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.doux-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #0d0d10;
}
.doux-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doux-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.doux-bubbles img {
  position: absolute;
  bottom: -18%;
  width: 90px;
  height: 90px;
  opacity: 0;
  animation-name: douxBubbleFloat;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes douxBubbleFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  10% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(var(--bx, 16px), -340%) scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .doux-bubbles {
    display: none;
  }
}
.gabri-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #0d0d10;
}
.gabri-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
}
.gabri-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.gabri-slideshow img.is-active {
  opacity: 1;
}
/* Generic promo-slide media (replaces the old per-brand sleepy/morfose/
   doux/gabri-specific classes now that slides are admin-managed — any
   slide can be a plain video, a single image, or an image slideshow). */
.promo-media {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #0d0d10;
}
.promo-video,
.promo-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.promo-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
}
.promo-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.promo-slideshow img.is-active {
  opacity: 1;
}
.paper-loading,
.promo-loading {
  padding: 60px 20px;
  text-align: center;
  opacity: 0.6;
  font-size: 14px;
}
.logo-track a {
  display: flex;
  align-items: center;
}
html.is-mobile .brand-nav {
  width: calc(40px * var(--k, 3));
  height: calc(40px * var(--k, 3));
  font-size: calc(20px * var(--k, 3));
}
html.is-mobile .brand-prev {
  left: calc(10px * var(--k, 3));
}
html.is-mobile .brand-next {
  right: calc(10px * var(--k, 3));
}
html.is-mobile .brand-dots {
  gap: calc(8px * var(--k, 3));
  margin-top: calc(16px * var(--k, 3));
}
html.is-mobile .brand-dot {
  width: calc(8px * var(--k, 3));
  height: calc(8px * var(--k, 3));
}
html.is-mobile .doux-bubbles img {
  width: calc(62px * var(--k, 3));
  height: calc(62px * var(--k, 3));
}
.promo-section-header {
  margin-bottom: 30px;
}
.instagram-promo {
  background: #f6f1ed;
}
.instagram-promo .promo-section-header > p:last-child {
  max-width: 520px;
  margin-top: 14px;
  opacity: .72;
}
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.instagram-grid .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: #fff;
  border: 0 !important;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}
.instagram-category {
  margin-bottom: 32px;
  padding: 24px 24px 28px;
  background: #ffffff;
  border: 1px solid rgba(51, 51, 51, 0.08);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}
.instagram-category:last-child {
  margin-bottom: 0;
}
.instagram-category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.instagram-category-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--coral);
}
.instagram-category h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 800;
  color: var(--ink);
}
.instagram-category-badge {
  margin-left: auto;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-new {
  background: rgba(60, 207, 165, 0.14);
  color: #1a8f6d;
}
.badge-deal {
  background: rgba(232, 99, 122, 0.14);
  color: var(--coral-dark);
}
.badge-live {
  background: rgba(250, 218, 221, 0.5);
  color: #b5536b;
}
.badge-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: badgeLivePulse 1.6s ease-in-out infinite;
}
@keyframes badgeLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.instagram-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A post left alone on the last row (e.g. 5 posts in a 4-column grid)
   centers itself instead of sitting stranded on the left. */
.instagram-grid .instagram-media:nth-last-child(1):nth-child(4n + 1) {
  grid-column: 2 / span 2;
}
.promo-section-alt {
  background: #ffffff;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.promo-grid-five {
  grid-template-columns: repeat(5, 1fr);
}
.promo-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
}
.promo-section-alt .promo-card {
  background: var(--paper);
  box-shadow: none;
  border: 1px solid var(--line);
}
.promo-card-art {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.promo-card-compact .promo-card-art {
  height: 100px;
}
.promo-art-coral {
  background: linear-gradient(145deg, #e8637a, #c94c62);
}
.promo-art-dark {
  background: linear-gradient(145deg, #4a4a52, #232326);
}
.promo-art-lavender {
  background: linear-gradient(145deg, #fadadd, #f2b9c2);
}
.promo-art-sun {
  background: linear-gradient(145deg, #fadadd, #e8637a);
}
.promo-art-word {
  font-family: var(--display);
  font-weight: 800;
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;
}
.promo-art-lavender .promo-art-word,
.promo-art-sun .promo-art-word {
  color: #333333;
}
.promo-art-word-sm {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.promo-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promo-card-body h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.promo-card-body p {
  font-size: 13.5px;
  opacity: 0.85;
  line-height: 1.5;
}
.promo-card-compact .promo-card-body {
  padding: 18px 18px 22px;
}
.promo-card-compact .promo-card-body h3 {
  font-size: 15.5px;
}
.promo-card-compact .promo-card-body p {
  font-size: 12.5px;
}

@media (max-width: 980px) {
  .promo-hero {
    align-items: center;
    text-align: center;
    padding: 70px 6vw 40px;
    gap: 20px;
  }
  .promo-hero-icon {
    width: 56px;
    height: 56px;
    padding: 10px;
  }
  .icon-facebook,
  .icon-whatsapp {
    width: 48px;
    height: 48px;
  }
  .promo-hero-headline {
    text-align: center;
    font-size: clamp(2.6rem, 9vw, 4rem);
  }
  .promo-hero-copy {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
  }
  .promo-hero-copy > p:not(.section-label) {
    margin: 0 auto 28px;
  }
  .promo-banner {
    grid-template-columns: 1fr;
  }
  .promo-banner-copy {
    padding: 10px 30px 35px;
  }
  .sleepy-video-wrap,
  .sleepy-video,
  .morfose-video-wrap,
  .morfose-video,
  .gabri-slideshow,
  .promo-media,
  .promo-video,
  .promo-image,
  .promo-slideshow {
    min-height: 340px;
  }
  .promo-grid,
  .promo-grid-five {
    grid-template-columns: repeat(2, 1fr);
  }
  .instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .promo-hero { padding: 60px 6vw 30px; }
  .promo-hero-headline { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .promo-hero-copy > p:not(.section-label) { font-size: 15px; }
  .promo-grid,
  .promo-grid-five {
    grid-template-columns: 1fr;
  }
  .instagram-grid { grid-template-columns: 1fr; }
}
/* Pharmacy: single "We accept" section with a divider heading for the second group */
.accept-subheading {
  margin: 64px 0 30px;
  text-align: center;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}
.accept-subheading em {
  font-style: normal;
  background: linear-gradient(120deg, #1479b8 0%, #14b8c4 50%, #3ccfa5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 750px) {
  .pharmacy-hero-content h1 em {
    white-space: normal;
  }
}

/* Pharmacy store cards: render image on top (placeholder until each render is ready) */
.rx-store {
  padding-top: 0;
  overflow: hidden;
}
.rx-store-media {
  width: calc(100% + 28px);
  margin: 0 -14px 12px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, #d9f1fb 0%, #eaf8f6 55%, #dff5ee 100%);
}
.rx-store-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(17, 22, 33, 0.18));
}
.rx-store-media-empty {
  border-bottom: 1px dashed rgba(20, 163, 184, 0.4);
}
.rx-store-media-empty span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 122, 153, 0.6);
}
.accept-section .section-heading h2 em {
  background-image: linear-gradient(120deg, #1479b8 0%, #14b8c4 50%, #3ccfa5 100%);
  filter: none;
}

/* ============================================================
   MOBILE — the desktop layout, scaled to fit the phone.
   Phones load the page at a fixed 1200px width (see the viewport
   meta + inline script in each page's <head>), so every section
   looks exactly like desktop, just smaller. Only the pieces below
   differ on mobile. --k = 1200 / phone width, used to size the
   tap-friendly UI (header, menu, popups) so it stays readable.
   ============================================================ */
html.is-mobile,
html.is-mobile body {
  overflow-x: hidden;
}

/* Mobile header: same per-page colours as desktop (see the header colour
   rules above); only the sizing changes so it stays tappable. */
html.is-mobile body .site-header {
  height: calc(60px * var(--k, 3));
  padding: 0 calc(16px * var(--k, 3));
}
html.is-mobile .logo-image {
  width: calc(110px * var(--k, 3));
}
/* Sign-in is just the Google icon on phones */
html.is-mobile .auth-slot {
  zoom: var(--k, 3);
  margin-right: calc(4px * var(--k, 3));
}
html.is-mobile .google-btn,
html.is-mobile .user-chip {
  padding: 7px;
  gap: 0;
  border-radius: 50%;
}
html.is-mobile .google-btn span,
html.is-mobile .user-chip span {
  display: none;
}
html.is-mobile .google-btn img {
  width: 18px;
  height: 18px;
}
html.is-mobile .user-chip .user-avatar {
  width: 22px;
  height: 22px;
  margin: 0;
}
html.is-mobile .menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6px * var(--k, 3));
  padding: calc(8px * var(--k, 3));
  color: inherit;
  cursor: pointer;
}
html.is-mobile .menu-toggle span {
  display: block;
  width: calc(24px * var(--k, 3));
  height: calc(1.5px * var(--k, 3));
  background: currentColor;
}
/* Tapping the hamburger pops the nav up over the page (the hero/page
   content underneath doesn't shift — this just overlays it), anchored
   to the header so it opens at the top like a normal dropdown. No
   internal scroll box: it just grows to fit its content and, if that's
   taller than the screen, the page's own ordinary scroll reveals the
   rest — the fixed-position-with-its-own-scroll-area version of this
   kept leaving some real devices only able to reveal one item at a
   time, so this avoids that mechanism entirely. */
html.is-mobile .main-nav {
  display: none;
  position: absolute;
  top: calc(60px * var(--k, 3));
  left: 0;
  right: 0;
  margin: 0;
  z-index: 9000;
  flex-direction: column;
  gap: calc(14px * var(--k, 3));
  padding: calc(16px * var(--k, 3)) calc(20px * var(--k, 3)) calc(20px * var(--k, 3));
  background: rgba(20, 20, 26, 0.96);
  color: #ffffff;
}
html.is-mobile .main-nav.open {
  display: flex;
}
/* The chat bubble/widget sits at a much higher z-index than the nav
   (so it's reachable over normal page content), which meant it could
   visually cover the last items in a long open nav. Hide it while the
   mobile menu is open instead of fighting over stacking order. */
body.nav-open .faq-widget,
body.nav-open .convai-widget,
body.nav-open .chat-emoji-float {
  display: none !important;
}
html.is-mobile .main-nav a {
  font-size: calc(15px * var(--k, 3));
  color: inherit;
  opacity: 0.9;
}
html.is-mobile .main-nav a.active {
  color: var(--sun);
  opacity: 1;
}
/* Dropdown matches the bar: white on the white-header pages, black on social */
html.is-mobile body.inner-page:not(.social-page) .main-nav {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
}
html.is-mobile body.inner-page:not(.social-page) .main-nav a.active {
  color: var(--coral);
}
html.is-mobile body.social-page .main-nav {
  background: #000000;
  color: #ffffff;
}
html.is-mobile .main-nav a[href="gifts.html"],
html.is-mobile .main-nav a[href="gifts.html"].active {
  color: #c9a227;
  opacity: 1;
}
/* Mobile nav is a plain vertical list already, so the dropdown opens
   inline (indented) under its trigger instead of floating. */
html.is-mobile .nav-dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
html.is-mobile .nav-dropdown-trigger {
  font-size: calc(15px * var(--k, 3));
  opacity: 0.9;
}
html.is-mobile .nav-dropdown-arrow {
  font-size: calc(10px * var(--k, 3));
}
html.is-mobile .nav-dropdown-menu {
  position: static;
  display: none;
  transform: none;
  margin: calc(10px * var(--k, 3)) 0 0 calc(14px * var(--k, 3));
  padding: 0;
  width: auto;
  min-width: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}
html.is-mobile .nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--k, 3));
  transform: none;
}
html.is-mobile .nav-dropdown-menu a {
  padding: 0;
  background: none !important;
  font-size: calc(14px * var(--k, 3));
  color: inherit;
  opacity: 0.8;
}

/* Fixed scale on phones: no pinch or double-tap zoom */
html.is-mobile,
html.is-mobile body {
  touch-action: pan-x pan-y;
}

/* About page: no inline video on mobile, the "Learn about us" button instead */
html.is-mobile .about-video-wrap {
  display: none;
}
html.is-mobile .about-video-cta {
  display: inline-flex;
  zoom: calc(var(--k, 3) * 0.6);
}

/* Floating UI stays tappable and readable */
html.is-mobile .faq-widget,
html.is-mobile .scroll-top {
  zoom: calc(var(--k, 3) * 0.7);
}
html.is-mobile .newsletter-overlay,
html.is-mobile .tenant-overlay,
html.is-mobile .welcome-overlay {
  zoom: calc(var(--k, 3) * 0.75);
}

/* Directors popup on phones: sized in phone pixels (via --k), centred on screen */
html.is-mobile .directors-overlay {
  padding: calc(16px * var(--k, 3));
}
html.is-mobile .directors-card {
  width: calc(350px * var(--k, 3));
  max-width: 100%;
}
html.is-mobile .directors-card h2 {
  font-size: calc(22px * var(--k, 3));
  margin-bottom: calc(4px * var(--k, 3));
}
html.is-mobile .directors-hint {
  font-size: calc(12px * var(--k, 3));
  margin-bottom: calc(12px * var(--k, 3));
}
html.is-mobile .directors-photo-wrap img {
  width: 100%;
  max-height: none;
}
html.is-mobile .directors-close {
  top: calc(14px * var(--k, 3));
  right: calc(14px * var(--k, 3));
  width: calc(38px * var(--k, 3));
  height: calc(38px * var(--k, 3));
  font-size: calc(22px * var(--k, 3));
}
html.is-mobile .director-label {
  font-size: calc(11px * var(--k, 3));
  padding: calc(6px * var(--k, 3)) calc(12px * var(--k, 3));
}

/* ============================================================
   Shared page hero (About, News & Media) — same look as the
   promotions hero: soft gradient, centred headline, floating cards.
   ============================================================ */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 100px 8vw 80px;
  overflow: hidden;
  text-align: center;
  color: var(--ink);
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.8), transparent 28%), linear-gradient(135deg, #f7dfe3 0%, #f6f3ee 48%, #efe9dd 100%);
  perspective: 1200px;
}
.page-hero-floaters {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.page-hero-tile {
  position: absolute;
  width: min(210px, 16vw);
  aspect-ratio: 16 / 10;
  padding: 8px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(17, 22, 33, 0.16);
  object-fit: contain;
  animation: promoIconFloat 7s ease-in-out infinite;
}
.page-hero-tile.tile-1 { left: 6%; top: 16%; }
.page-hero-tile.tile-2 { right: 6%; top: 12%; animation-delay: 1.4s; }
.page-hero-tile.tile-3 { left: 10%; bottom: 12%; animation-delay: 2.6s; }
.page-hero-tile.tile-4 { right: 9%; bottom: 14%; animation-delay: 3.8s; }
.news-page .page-hero-tile {
  object-fit: cover;
}
.page-hero-text {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.page-hero-text h1 {
  margin: 0 0 22px;
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  line-height: 1;
}
.page-hero-text h1 em {
  white-space: nowrap;
}
.page-hero-text p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 20px;
}

/* Active nav link must stay readable on the white header pages */
.inner-page:not(.social-page) .main-nav a.active,
.inner-page:not(.social-page) .main-nav a:hover {
  color: var(--coral);
}
.inner-page:not(.social-page) .main-nav a[href="gifts.html"].active,
.inner-page:not(.social-page) .main-nav a[href="gifts.html"]:hover {
  color: #c9a227;
}

/* About hero: title on the left, story video (with sound toggle) on the right */
.about-hero-split {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: 80px 8vw;
}
.about-hero-split .page-hero-text {
  flex: 1 1 0;
  max-width: 560px;
}
.about-hero-video-wrap {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  max-width: 640px;
  line-height: 0;
}
.about-hero-video-wrap .about-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 55px rgba(17, 22, 33, 0.22);
}
.about-sound-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.about-sound-btn:hover {
  transform: scale(1.08);
}
.about-sound-btn svg {
  width: 22px;
  height: 22px;
}
.about-sound-btn .icon-sound {
  display: none;
}
.about-sound-btn.is-on {
  background: var(--coral);
  color: #ffffff;
}
.about-sound-btn.is-on .icon-sound {
  display: block;
}
.about-sound-btn.is-on .icon-muted {
  display: none;
}
@media (max-width: 750px) {
  .about-hero-video-wrap {
    display: none;
  }
}
html.is-mobile .about-hero-video-wrap {
  display: none;
}

/* Store cards: same image height whatever the render's proportions */
.rx-store-media {
  height: 160px;
  aspect-ratio: auto;
  overflow: hidden;
}
.rx-store-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.about-hero-split .page-hero-text h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.9rem);
}
.rx-store-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.rx-store {
  flex: 1 1 230px;
  max-width: calc((100% - 48px) / 4);
}

/* About hero: give the video more room without making the hero taller */
.about-hero-split {
  padding: 40px 6vw;
  gap: clamp(28px, 4vw, 64px);
}
.about-hero-split .page-hero-text {
  flex: 0.8 1 0;
  max-width: 520px;
}
.about-hero-split .page-hero-text h1 {
  font-size: clamp(2rem, 3.1vw, 3.6rem);
}
.about-hero-split .page-hero-text h1 em {
  white-space: normal;
}
.about-hero-video-wrap {
  flex: 1.2 1 0;
  max-width: 800px;
}

/* About story — clean two-column layout on white */
.about-grid {
  grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 0;
  align-items: start;
}
.about-image-frame {
  position: sticky;
  top: 40px;
}
.about-kicker {
  margin-bottom: 14px;
}
.about-copy h2 {
  font-size: clamp(2.6rem, 4vw, 4.4rem);
  line-height: 1;
  margin-bottom: 28px;
}
.about-copy p {
  width: 100%;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 22px;
  opacity: 0.85;
}
.about-copy p.about-highlight {
  max-width: 720px;
  margin: 34px 0;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  opacity: 1;
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 36px;
}
.about-actions .about-directors-btn,
.about-actions .text-link,
.about-actions .about-video-cta {
  margin: 0;
}
.about-section .stats-row {
  margin-top: 90px;
}
.about-actions .about-directors-btn {
  background: var(--ink);
  color: #ffffff;
  border: 0;
}
.about-actions .about-directors-btn:hover {
  background: var(--coral);
}

/* About photo: show the whole picture (no side crop) and give it more of the row */
.about-grid {
  grid-template-columns: minmax(300px, 44%) minmax(0, 1fr);
  column-gap: clamp(36px, 5vw, 72px);
}
.about-image {
  aspect-ratio: 315 / 295;
  object-fit: cover;
  object-position: center;
}
.about-side {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.about-side .about-image-frame {
  position: relative;
  top: auto;
}
.about-side .about-highlight {
  margin: 0;
}

/* ============================================================
   NEWS & MEDIA — newspaper with a page-turn between stories
   ============================================================ */
body.news-page {
  background: #eee9dd;
}
.paper-section {
  background: #eee9dd;
  padding: 56px 5vw 90px;
}
.paper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px clamp(22px, 4vw, 56px) 40px;
  color: #1c1a17;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  background-color: #fbf8f0;
  background-image: repeating-linear-gradient(0deg, rgba(60, 45, 20, 0.02) 0 2px, transparent 2px 5px);
  border: 1px solid #d8d0bd;
  box-shadow: 0 30px 70px rgba(60, 45, 20, 0.2), 0 1px 0 #ffffff inset;
}
.paper-masthead {
  margin-bottom: 30px;
  padding-bottom: 14px;
  text-align: center;
  border-bottom: 3px double #1c1a17;
}
.paper-topline {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font: 700 11px/1 "Open Sans", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid #1c1a17;
  border-bottom: 1px solid #1c1a17;
}
.paper-topline-bottom {
  border-bottom: 0;
  border-top: 1px solid #1c1a17;
}
.paper-title {
  margin: 16px 0 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1c1a17;
}
.paper-title em {
  color: var(--coral);
  font-style: normal;
}
.paper-book {
  perspective: 2600px;
}
.paper-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fbf8f0;
}
.paper-spread[hidden] {
  display: none;
}
.paper-page-photos {
  padding-right: clamp(20px, 3vw, 44px);
  border-right: 1px solid #1c1a17;
}
.paper-page-text {
  padding-left: clamp(20px, 3vw, 44px);
}
.paper .news-slideshow {
  height: clamp(320px, 34vw, 520px);
  margin-bottom: 12px;
  border: 1px solid #1c1a17;
  border-radius: 0;
  background: #ece6d8;
}
.paper-caption {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: #5d5748;
}
.paper-photo-placeholder {
  display: grid;
  place-items: center;
  height: clamp(320px, 34vw, 520px);
  border: 1px dashed #8a826c;
  background: #f1ecdf;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  color: #8a826c;
}

/* Article typography */
.paper .news-tag {
  display: block;
  font: 700 11px/1 "Open Sans", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}
.paper .news-date {
  margin: 6px 0 14px;
  font-size: 12px;
  color: #6b6558;
}
.paper-page-text h3 {
  max-width: none;
  margin: 0 0 18px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  text-align: left;
  color: #1c1a17;
}
.paper-page-text p,
.paper .news-more-inner > p {
  width: auto;
  max-width: none;
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: wrap;
  color: #2b2823;
}
.paper-page-text h3 + p::first-letter {
  float: left;
  padding: 6px 8px 0 0;
  font: 900 3.4em/0.82 "Playfair Display", Georgia, serif;
  color: #1c1a17;
}
.paper .news-more-inner {
  align-items: stretch;
}
.paper .news-quote {
  max-width: none;
  margin: 18px 0;
  padding: 16px 8px;
  border-top: 3px double #1c1a17;
  border-bottom: 3px double #1c1a17;
  text-align: center;
}
.paper .news-quote p {
  margin: 0 0 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-style: italic;
  text-align: center;
  hyphens: none;
  color: #1c1a17;
}
.paper .news-quote cite {
  font-size: 12px;
  color: #6b6558;
}
.paper .text-link-inline {
  color: var(--coral-dark);
  border-bottom: 1px solid currentColor;
}
.paper .news-more-btn {
  margin: 4px 0 8px;
  border-color: #1c1a17;
  background: transparent;
  color: #1c1a17;
}
.paper .news-more-btn:hover {
  background: #1c1a17;
  color: #fbf8f0;
}
.paper .news-source {
  display: block;
  padding-top: 10px;
  font-size: 12px;
  color: #6b6558;
}
.paper .news-source:hover {
  color: var(--coral);
}

/* Controls */
.paper-controls {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 3px double #1c1a17;
}
.paper-btn {
  padding: 12px 24px;
  border: 1.5px solid #1c1a17;
  background: transparent;
  color: #1c1a17;
  font: 700 12px/1 "Open Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.paper-btn:hover:not(:disabled) {
  background: #1c1a17;
  color: #fbf8f0;
}
.paper-next {
  background: #1c1a17;
  color: #fbf8f0;
}
.paper-next:hover:not(:disabled) {
  background: var(--coral);
  border-color: var(--coral);
}
.paper-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* The page turn: the right-hand page lifts off at the spine, curls over and
   lands on the left, revealing the next story underneath (and the reverse
   when going back). */
.paper-book {
  display: grid;
  position: relative;
}
.paper-spread {
  grid-area: 1 / 1;
}
.paper-leaf-wrap {
  position: absolute;
  z-index: 5;
  transform-style: preserve-3d;
  pointer-events: none;
  animation: leafLift var(--turn, 1.15s) ease-in-out forwards;
}
.paper-leaf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  animation: leafForward var(--turn, 1.15s) cubic-bezier(0.55, 0.06, 0.28, 0.98) forwards;
}
.paper-leaf-wrap.is-back .paper-leaf {
  transform-origin: right center;
  animation-name: leafBack;
}
.paper-leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: #fbf8f0;
  background-image: repeating-linear-gradient(0deg, rgba(60, 45, 20, 0.02) 0 2px, transparent 2px 5px);
}
.paper-leaf-face > .paper-page {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
.paper-leaf-back {
  transform: rotateY(180deg);
}
.paper-leaf-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(40, 28, 10, 0.34), rgba(40, 28, 10, 0) 70%);
}
.paper-leaf-wrap.is-back .paper-leaf-face::after {
  background: linear-gradient(270deg, rgba(40, 28, 10, 0.34), rgba(40, 28, 10, 0) 70%);
}
.paper-leaf-front::after {
  animation: leafShadeFront var(--turn, 1.15s) ease-in forwards;
}
.paper-leaf-back::after {
  animation: leafShadeBack var(--turn, 1.15s) ease-out forwards;
}
.paper-leaf-wrap .paper-leaf {
  box-shadow: 0 0 40px rgba(40, 28, 10, 0.25);
}
@keyframes leafForward {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-180deg); }
}
@keyframes leafBack {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}
@keyframes leafLift {
  0% { transform: translateZ(0) rotateX(0deg); }
  50% { transform: translateZ(40px) rotateX(1.4deg); }
  100% { transform: translateZ(0) rotateX(0deg); }
}
@keyframes leafShadeFront {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes leafShadeBack {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (max-width: 800px) {
  .paper-spread {
    grid-template-columns: 1fr;
  }
  .paper-page-photos {
    padding-right: 0;
    margin-bottom: 24px;
    border-right: 0;
  }
  .paper-page-text {
    padding-left: 0;
  }
}
.paper .news-slideshow,
.paper-photo-placeholder {
  height: clamp(380px, 42vw, 620px);
}
.paper .news-slideshow img {
  object-fit: cover;
  object-position: center 25%;
}
.paper .news-more-btn {
  border-radius: 0;
}
.paper .news-slideshow,
.paper-photo-placeholder {
  height: clamp(340px, 36vw, 540px);
}

/* Newspaper fills the whole section (edge to edge) */
.paper-section {
  padding: 0;
  background-color: #fbf8f0;
  background-image: repeating-linear-gradient(0deg, rgba(60, 45, 20, 0.02) 0 2px, transparent 2px 5px);
}
.paper {
  max-width: 1440px;
  padding: 48px 5vw 70px;
  background: none;
  border: 0;
  box-shadow: none;
}
.paper-title {
  font-size: clamp(3rem, 7.5vw, 6.6rem);
}
.paper .news-slideshow,
.paper-photo-placeholder {
  height: clamp(380px, 42vw, 680px);
}
.paper-page-text p,
.paper .news-more-inner > p {
  font-size: clamp(16px, 1.25vw, 18.5px);
}
.paper-page-text h3 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
}
body.news-page main {
  flex: 1;
  background: #fbf8f0;
}

/* 5K story slideshow: 11 photos, 4s each */
.news-slideshow.news-slideshow-5k img:nth-child(n) {
  animation: paperSlide5k 44s infinite;
  animation-delay: calc(var(--i) * 4s);
  object-position: center 30%;
}
@keyframes paperSlide5k {
  0% { opacity: 0; }
  1.2% { opacity: 1; }
  8% { opacity: 1; }
  9.3% { opacity: 0; }
  100% { opacity: 0; }
}
.paper-page-text .news-date + h3 {
  margin-top: 0;
}
.paper .news-slideshow.news-slideshow-5k img {
  object-fit: cover;
}

/* The 5K photo box grows to fill the left page beside the longer article */
.paper-spread .paper-page-photos {
  display: flex;
  flex-direction: column;
}
.paper .news-slideshow.news-slideshow-5k {
  flex: 1 1 auto;
  height: auto;
  min-height: clamp(380px, 42vw, 680px);
}

/* About hero: centred video with the title card sitting over its bottom edge
   and hanging down onto the story section below */
.about-hero-split {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 44px 6vw 0;
  overflow: visible;
  z-index: 3;
}
.about-hero-split .about-hero-video-wrap {
  order: 1;
  flex: none;
  width: min(860px, 72vw);
  max-width: none;
}
.about-hero-split .page-hero-text {
  order: 2;
  flex: none;
  width: min(680px, 92%);
  max-width: none;
  margin: -120px 0 -96px;
  padding: 26px 44px 30px;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 26px 60px rgba(17, 22, 33, 0.2);
  z-index: 4;
  animation: heroRise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.2s both;
}
.about-hero-split .page-hero-text h1 {
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  margin-bottom: 14px;
}
.about-hero-split .page-hero-text p {
  font-size: 18px;
}
body.about-page .about-section {
  padding-top: 200px;
}
@media (max-width: 750px) {
  .about-hero-split .page-hero-text {
    margin: 0 0 24px;
  }
  body.about-page .about-section {
    padding-top: 90px;
  }
}
html.is-mobile .about-hero-split .page-hero-text {
  margin: 0 0 24px;
}
html.is-mobile body.about-page .about-section {
  padding-top: 90px;
}
/* Title card is headline-only now, so tighten it and overlap a little less */
.about-hero-split .page-hero-text {
  padding: 24px 44px 26px;
  margin: -100px 0 -78px;
}
.about-hero-split .page-hero-text h1 {
  margin-bottom: 0;
}
body.about-page .about-section {
  padding-top: 170px;
}
@media (max-width: 750px) {
  body.about-page .about-section {
    padding-top: 90px;
  }
}
html.is-mobile body.about-page .about-section {
  padding-top: 90px;
}
html.is-mobile .about-hero-split .page-hero-text,
.about-hero-split .page-hero-text:only-child {
  margin: 0 0 24px;
}

/* ============================================================
   Mobile: Google icon sits beside the hamburger; footer is scaled up
   ============================================================ */
html.is-mobile .header-tools {
  margin-left: auto;
}
html.is-mobile footer {
  height: auto;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
  padding: 22px 6vw;
  text-align: center;
  zoom: calc(var(--k, 3) * 0.85);
}
html.is-mobile footer .social-links {
  margin: 0;
}
html.is-mobile footer > span {
  opacity: 0.7;
}
html.is-mobile .authentic-badge {
  padding: calc(3px * var(--k, 3)) calc(7px * var(--k, 3)) calc(3px * var(--k, 3)) calc(5px * var(--k, 3));
  gap: calc(4px * var(--k, 3));
}
html.is-mobile .authentic-badge svg {
  width: calc(11px * var(--k, 3));
  height: calc(11px * var(--k, 3));
}
html.is-mobile .authentic-badge span {
  font-size: calc(7.5px * var(--k, 3));
}
html.is-mobile .authentic-badge span small {
  font-size: calc(6.5px * var(--k, 3));
}
/* Drastically smaller on phones: a small square card, centered, with
   the intro paragraph and bullet list dropped entirely (the full case
   is one tap away via the "Read the full story" button) — just the
   title, the photo, and the button. */
html.is-mobile .authentic-mark,
html.is-mobile .authentic-intro,
html.is-mobile .authentic-points {
  display: none;
}
html.is-mobile .authentic-card {
  width: calc(165px * var(--k, 3));
  max-width: 52%;
  max-height: none;
  overflow: visible;
  padding: calc(16px * var(--k, 3)) calc(12px * var(--k, 3)) calc(12px * var(--k, 3));
  text-align: center;
  margin: 0 auto;
}
html.is-mobile .authentic-card .tenant-close {
  width: calc(18px * var(--k, 3));
  height: calc(18px * var(--k, 3));
  font-size: calc(10px * var(--k, 3));
  top: calc(7px * var(--k, 3));
  right: calc(7px * var(--k, 3));
}
html.is-mobile .authentic-card h2 {
  font-size: calc(12px * var(--k, 3));
  line-height: 1.15;
  margin-bottom: calc(8px * var(--k, 3));
}
html.is-mobile .authentic-photo {
  height: calc(70px * var(--k, 3));
  border-radius: calc(7px * var(--k, 3));
  margin-bottom: calc(10px * var(--k, 3));
}
html.is-mobile .authentic-card .button {
  display: flex;
  width: 100%;
  min-height: calc(26px * var(--k, 3));
  padding: 0 calc(10px * var(--k, 3));
  font-size: calc(9px * var(--k, 3));
}

/* ============================================================
   Pharmacy numbers: horizontal swipe carousel, the centred store zooms in
   ============================================================ */
.rx-carousel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.rx-carousel .rx-store-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 26px;
  max-width: none;
  margin: 0;
  padding: 46px calc(50% - 170px) 54px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rx-carousel .rx-store-grid::-webkit-scrollbar {
  display: none;
}
.rx-carousel .rx-store {
  flex: 0 0 340px;
  max-width: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform: scale(0.84);
  opacity: 0.55;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, box-shadow 0.4s ease;
}
.rx-carousel .rx-store.is-active {
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 26px 50px rgba(20, 163, 184, 0.28);
}
.rx-carousel .rx-store-media {
  height: 210px;
}
.rx-carousel .rx-store strong {
  font-size: 20px;
}
.rx-carousel .rx-store > a:not(.rx-wa) {
  font-size: 26px;
}
.rx-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--holo-gradient);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 121, 184, 0.35);
  transform: translateY(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rx-nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.1);
}
.rx-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.rx-prev {
  left: 2%;
}
.rx-next {
  right: 2%;
}

/* ============================================================
   Plazas: arrows are filled and pulse so it's clear they move to the next plaza
   ============================================================ */
.plaza-nav {
  width: 60px;
  height: 60px;
  border: 0;
  background: var(--coral);
  color: #ffffff;
  font-size: 30px;
  box-shadow: 0 10px 24px rgba(232, 99, 122, 0.4);
  animation: plazaNavPulse 1.8s ease-out infinite;
}
.plaza-nav-prev {
  --nudge: -5px;
}
.plaza-nav-next {
  --nudge: 5px;
}
.plaza-nav:hover {
  background: var(--coral-dark);
  animation-play-state: paused;
}
@keyframes plazaNavPulse {
  0% {
    box-shadow: 0 10px 24px rgba(232, 99, 122, 0.4), 0 0 0 0 rgba(232, 99, 122, 0.55);
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--nudge, 0));
  }
  70% {
    box-shadow: 0 10px 24px rgba(232, 99, 122, 0.4), 0 0 0 20px rgba(232, 99, 122, 0);
  }
  100% {
    box-shadow: 0 10px 24px rgba(232, 99, 122, 0.4), 0 0 0 0 rgba(232, 99, 122, 0);
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plaza-nav {
    animation: none;
  }
}

/* Plazas on phones: arrows float over the plaza photo (see the
   position:absolute rule further down) instead of sitting in the row
   beside it, so the tenant grid gets the FULL screen width instead of
   losing ~110px of it to two arrow buttons — that was the real cause
   of the tenant area feeling squeezed into a narrow column. With the
   full width back, 3 smaller columns spread the tenants across it
   instead of 2 big ones. */
html.is-mobile .plaza-nav {
  width: calc(42px * var(--k, 3));
  height: calc(42px * var(--k, 3));
  font-size: calc(22px * var(--k, 3));
}
html.is-mobile .store-logo-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(14px * var(--k, 3)) calc(8px * var(--k, 3));
}
html.is-mobile .store-logo-slot {
  width: calc(50px * var(--k, 3));
  height: calc(50px * var(--k, 3));
  border-radius: calc(13px * var(--k, 3));
  font-size: calc(11px * var(--k, 3));
}
html.is-mobile .store-logo-name {
  font-size: calc(11px * var(--k, 3));
}
html.is-mobile .store-logo-desc {
  font-size: calc(9px * var(--k, 3));
}
html.is-mobile .store-kiosk-heading {
  font-size: calc(10px * var(--k, 3));
}

/* Pharmacy carousel on phones: larger cards and arrows */
html.is-mobile .rx-carousel .rx-store-grid {
  padding-left: calc(50% - 300px);
  padding-right: calc(50% - 300px);
}
html.is-mobile .rx-carousel .rx-store {
  flex-basis: 600px;
}
html.is-mobile .rx-carousel .rx-store-media {
  height: 320px;
}
html.is-mobile .rx-carousel .rx-store strong {
  font-size: 34px;
}
html.is-mobile .rx-carousel .rx-store > a:not(.rx-wa) {
  font-size: 44px;
}
html.is-mobile .rx-carousel .rx-wa {
  font-size: 20px;
  padding: 10px 26px;
}
html.is-mobile .rx-nav {
  width: calc(44px * var(--k, 3));
  height: calc(44px * var(--k, 3));
  font-size: calc(24px * var(--k, 3));
}

/* "How to collect your prescription" steps: all 3 in one horizontal
   line. Each card is small and tight (not a tall stretched column) so
   3 of them fit side by side on a phone screen. */
html.is-mobile .rx-steps {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8px * var(--k, 3));
}
html.is-mobile .rx-steps li {
  padding: calc(12px * var(--k, 3)) calc(8px * var(--k, 3));
  border-radius: calc(12px * var(--k, 3));
}
html.is-mobile .rx-step-num {
  width: calc(26px * var(--k, 3));
  height: calc(26px * var(--k, 3));
  font-size: calc(12px * var(--k, 3));
  margin-bottom: calc(7px * var(--k, 3));
}
html.is-mobile .rx-steps h3 {
  font-size: calc(12px * var(--k, 3));
  line-height: 1.2;
}
html.is-mobile .rx-steps p {
  font-size: calc(9.5px * var(--k, 3));
  line-height: 1.3;
}
html.is-mobile .rx-note {
  font-size: calc(12px * var(--k, 3));
}
html.is-mobile .rx-numbers-title {
  font-size: calc(17px * var(--k, 3));
  margin: calc(40px * var(--k, 3)) 0 calc(18px * var(--k, 3));
}

/* "Your health, our priority": same never-firing-breakpoint problem —
   the copy+form grid was meant to stack below 750px and never does on
   phones, so the form sat squeezed beside the heading. Stack it, center
   it, and put the title on top. */
html.is-mobile .pharmacy-callout-wrap {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: calc(20px * var(--k, 3));
}
html.is-mobile .pharmacy-callout-copy {
  max-width: 100%;
}
html.is-mobile .pharmacy-callout h2 {
  font-size: calc(22px * var(--k, 3));
  white-space: normal;
}
html.is-mobile .pharmacy-callout p {
  font-size: calc(12px * var(--k, 3));
  max-width: 100%;
  margin: 0 auto calc(14px * var(--k, 3));
}
html.is-mobile .compact-contact-form {
  justify-self: center;
  width: 100%;
  max-width: calc(330px * var(--k, 3));
  padding: calc(14px * var(--k, 3)) calc(13px * var(--k, 3));
  gap: calc(8px * var(--k, 3));
}
html.is-mobile .compact-contact-form label {
  font-size: calc(10px * var(--k, 3));
}
html.is-mobile .compact-contact-form input,
html.is-mobile .compact-contact-form textarea {
  padding: calc(8px * var(--k, 3)) calc(10px * var(--k, 3));
  font-size: calc(12px * var(--k, 3));
}
html.is-mobile .compact-contact-form .button-light {
  font-size: calc(11px * var(--k, 3));
  padding: calc(9px * var(--k, 3)) calc(14px * var(--k, 3));
}
.rx-carousel {
  max-width: none;
  margin-left: -8vw;
  margin-right: -8vw;
}
/* Footer logo keeps its normal size on phones (the footer itself is zoomed) */
html.is-mobile footer .logo-image {
  width: 112px;
}

/* ============================================================
   About: video now lives in the hero, so phones show it too
   ============================================================ */
.about-hero-video-wrap,
html.is-mobile .about-hero-video-wrap {
  display: block;
}
html.is-mobile .about-video-cta {
  display: none;
}
html.is-mobile .about-hero-split .page-hero-text {
  margin: -100px 0 -78px;
}
html.is-mobile body.about-page .about-section {
  padding-top: 170px;
}
/* Phones: the "Learn about us" video CTA is hidden above, leaving just
   Directors and Get in touch — give those two room instead of the tiny
   fixed px sizes the base .button/.text-link rules use. */
html.is-mobile .about-actions {
  gap: calc(14px * var(--k, 3)) calc(18px * var(--k, 3));
  margin-top: calc(26px * var(--k, 3));
}
html.is-mobile .about-actions .button {
  min-height: calc(48px * var(--k, 3));
  padding: 0 calc(22px * var(--k, 3));
  font-size: calc(15px * var(--k, 3));
}
html.is-mobile .about-actions .text-link {
  font-size: calc(15px * var(--k, 3));
  padding-bottom: calc(5px * var(--k, 3));
}
/* Mr Lall Paladee's story: don't dump all 4 paragraphs on the screen
   at once — initMobileAboutFold() in script.js folds everything after
   the first 2 into the same animated "Read more" panel already used
   on News & Media, just restyled for this section's light background. */
html.is-mobile .about-copy h2 {
  font-size: calc(40px * var(--k, 3));
  line-height: 1.08;
}
html.is-mobile .about-copy p {
  font-size: calc(16px * var(--k, 3));
  line-height: 1.6;
  margin-bottom: calc(16px * var(--k, 3));
}
html.is-mobile .about-copy .news-more-inner > p {
  font-size: calc(16px * var(--k, 3));
}
.about-copy .news-more-btn {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}
.about-copy .news-more-btn:hover {
  background: var(--ink);
  color: #ffffff;
}
@media (max-width: 750px) {
  .about-hero-video-wrap {
    display: block;
  }
  .about-hero-split .page-hero-text {
    margin: -100px 0 -78px;
  }
  body.about-page .about-section {
    padding-top: 170px;
  }
}

/* About story: the photo floats left and the text wraps around it, then
   runs full width underneath once the photo ends */
.about-grid {
  display: block;
}
.about-grid::after {
  content: "";
  display: table;
  clear: both;
}
.about-side {
  position: static;
  float: left;
  width: min(44%, 520px);
  margin: 0 clamp(36px, 5vw, 72px) 28px 0;
}
.about-copy {
  display: block;
}
.about-copy p,
.about-copy p.about-highlight {
  max-width: none;
}

/* ============================================================
   Social page on phones
   ============================================================ */
.partner-trigger {
  display: none;
}
html.is-mobile .partner-trigger {
  display: flex;
  zoom: calc(var(--k, 3) * 0.7);
}
html.is-mobile .social-advertise {
  display: none;
}
.partner-card .button {
  margin-top: 6px;
}
.partner-card .partner-note {
  margin: 14px 0 0;
  font-size: 12px;
  opacity: 0.6;
}

/* Instagram + Facebook: side by side, as compact as possible */
html.is-mobile .social-split {
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
html.is-mobile .social-split-single {
  grid-template-columns: 1fr;
}
html.is-mobile .split-panel {
  flex-direction: column;
  gap: 8px;
  padding: 22px 3vw;
}
html.is-mobile .split-icon {
  width: 46px;
  height: 46px;
}
html.is-mobile .split-icon img {
  width: 26px;
  height: 26px;
}
html.is-mobile .split-panel h2 {
  font-size: 24px;
}
html.is-mobile .split-panel p {
  font-size: 13px;
}
html.is-mobile .split-cta {
  display: none;
}

/* "Get ready to look & feel your best" contact cards: 2 swipeable rows
   instead of one tall stack. Each row auto-nudges side to side (paused
   while the visitor is actually touching it) but can always be swiped
   manually — see initContactRowAutoScroll() in script.js. */
/* One continuous horizontal line of all 8 cards — .contact-emails-row
   becomes just as invisible-to-layout on mobile as it already is on
   desktop (display: contents), so every card is a direct flex child
   here instead of being split across two stacked rows. */
html.is-mobile .contact-emails {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  width: 100%;
}
html.is-mobile .contact-emails::-webkit-scrollbar {
  display: none;
}
html.is-mobile .contact-emails-row {
  display: contents;
}
html.is-mobile .contact-emails .contact-email-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.contact-swipe-hint {
  display: none;
}
html.is-mobile .contact-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
html.is-mobile .contact-swipe-hint span {
  display: inline-block;
  animation: contactSwipeNudge 1.4s ease-in-out infinite;
}
@keyframes contactSwipeNudge {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}

/* "Meet our TikTok fam": bigger so it reads on a phone */
html.is-mobile .social-tiktok .section-heading h2 {
  font-size: 5.4rem;
}
html.is-mobile .social-tiktok .section-heading p {
  font-size: 28px;
}
html.is-mobile .phone-row {
  gap: 40px;
}
html.is-mobile .phone-card {
  flex-basis: 440px;
}
html.is-mobile .phone-chassis {
  padding: 13px;
  border-radius: 42px;
}
html.is-mobile .phone-screen {
  border-radius: 31px;
}
html.is-mobile .phone-notch {
  top: 11px;
  height: 20px;
}
html.is-mobile .phone-side-btn-power {
  width: 4px;
  height: 72px;
}
html.is-mobile .phone-side-btn-vol-up,
html.is-mobile .phone-side-btn-vol-down {
  width: 4px;
  height: 42px;
}
html.is-mobile .phone-info {
  zoom: 1.8;
}
.about-grid .about-copy {
  columns: auto;
  width: auto;
}
/* Phones: the arrows float over the plaza photo instead of taking up
   their own column beside it, so .plaza-viewport (and the tenant grid
   inside it) gets the full screen width. */
html.is-mobile .plaza-swiper {
  display: block;
  position: relative;
}
html.is-mobile .plaza-viewport {
  width: 100%;
}
html.is-mobile .plaza-nav {
  position: absolute;
  top: calc(70px * var(--k, 3));
  z-index: 4;
  opacity: 0.88;
}
html.is-mobile .plaza-nav-prev {
  left: calc(10px * var(--k, 3));
}
html.is-mobile .plaza-nav-next {
  right: calc(10px * var(--k, 3));
}

/* ============================================================
   Profile page
   ============================================================ */
.profile-shell {
  padding-top: 56px;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.panel-actions {
  display: flex;
  gap: 10px;
}
.outline-button {
  padding: 9px 18px;
  border: 1.5px solid var(--coral);
  border-radius: 999px;
  background: transparent;
  color: var(--coral);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.outline-button:hover {
  background: var(--coral);
  color: #ffffff;
}
.field-hint {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}
.profile-details input[readonly] {
  background: rgba(51, 51, 51, 0.05);
  color: rgba(51, 51, 51, 0.75);
  cursor: default;
}
.check-list li {
  justify-content: space-between;
}
.check-list li::before {
  flex: 0 0 auto;
}
.check-list .check-text {
  flex: 1;
}
.check-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(51, 51, 51, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.check-remove:hover {
  background: rgba(232, 99, 122, 0.14);
  color: var(--coral);
}

/* Printable copy of the Pennywise list */
.print-sheet {
  display: none;
}
@media print {
  body > *:not(.print-sheet) {
    display: none !important;
  }
  .print-sheet {
    display: block;
    padding: 24px 32px;
    color: #333333;
    font-family: "Open Sans", Arial, sans-serif;
  }
  .print-sheet .print-logo {
    height: 54px;
    width: auto;
  }
  .print-sheet h1 {
    margin: 22px 0 4px;
    font-size: 32px;
  }
  .print-sheet .print-date {
    margin: 0 0 22px;
    color: #777777;
  }
  .print-sheet ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .print-sheet li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #dddddd;
    font-size: 18px;
    font-weight: 600;
  }
  .print-sheet .print-box {
    width: 20px;
    height: 20px;
    border: 2px solid #e8637a;
    border-radius: 4px;
  }
  .print-sheet .print-foot {
    margin-top: 28px;
    color: #e8637a;
    font-weight: 700;
    font-size: 13px;
  }
}

/* ============================================================
   Pharmacy page: bigger capsules, 2-line callout heading, load pop-ups
   ============================================================ */
.capsule-1 {
  width: min(215px, 24vw);
}
.capsule-2 {
  width: min(245px, 27vw);
}
.capsule-3 {
  width: min(185px, 21vw);
}
.pharmacy-callout h2 {
  white-space: nowrap;
}
.rx-popup-card {
  width: min(560px, 100%);
}
.rx-popup-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}
.rx-popup-card p {
  margin: 0 0 18px;
}
.rx-accept-card {
  width: min(900px, 100%);
}
.rx-accept-card h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #1479b8 0%, #14b8c4 50%, #3ccfa5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rx-accept-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 26px;
}
.rx-accept-grid .accept-media {
  flex: 0 0 calc((100% - 28px) / 3);
  aspect-ratio: 4 / 3;
}
.rx-accept-grid .accept-name {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
}
.rx-accept-grid .accept-sub {
  font-size: 10px;
}
.rx-wa-mark {
  background: #ffffff;
  border: 1px solid rgba(51, 51, 51, 0.1);
  box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.14), 0 12px 24px rgba(37, 211, 102, 0.28);
  padding: 10px;
}
.rx-wa-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rx-select-label {
  display: block;
  margin-bottom: 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.7);
}
.rx-select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid rgba(20, 163, 184, 0.5);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.rx-select:focus {
  outline: 2px solid rgba(20, 163, 184, 0.5);
  outline-offset: 2px;
}

/* "Your health, our priority." — the gradient text is only painted inside the
   heading's own box, so give it room; otherwise tall letters (the h in "health")
   get their tops clipped. */
.pharmacy-callout h2 {
  line-height: 1.08;
  padding: 0.16em 0.14em 0.2em;
  margin-left: -0.14em;
}

/* Callout heading: plain colours instead of the animated gradient-clipped text,
   which drops letters (the "h" in "health") in some browsers. */
.pharmacy-callout h2,
.pharmacy-callout h2 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  animation: none;
  filter: none;
}
.pharmacy-callout h2 {
  color: #eaf8ff;
  text-shadow: 0 2px 24px rgba(79, 195, 247, 0.35);
}
.pharmacy-callout h2 em {
  color: #4fc3f7;
}

/* ============================================================
   TikTok phones: who's behind the camera is a small circular photo
   inside .phone-info, which only shows on hover/focus (see .phone-card
   :hover .phone-info above) — not a big always-visible cutout.
   ============================================================ */
.phone-stage {
  position: relative;
  flex: 0 0 var(--w, 230px);
  width: var(--w, 230px);
  scroll-snap-align: start;
}
.phone-stage .phone-card {
  width: 100%;
  flex: none;
  scroll-snap-align: none;
}
.phone-row {
  padding-top: 40px;
  padding-bottom: 30px;
}
html.is-mobile .phone-stage {
  --w: 440px;
}
.phone-avatar-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-avatar-photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.phone-avatar-group .phone-avatar-photo + .phone-avatar-photo {
  margin-left: -14px;
}

/* ============================================================
   Pharmacy page: photo hero with text on the left, glass nav,
   medical brands strip
   ============================================================ */
body.pharmacy-page .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  background: rgba(20, 20, 26, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
body.pharmacy-page .google-btn,
body.pharmacy-page .user-chip {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
body.pharmacy-page .google-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
body.pharmacy-page .main-nav a.active,
body.pharmacy-page .main-nav a:hover {
  color: #8fe6ff;
}
body.pharmacy-page .main-nav a[href="gifts.html"],
body.pharmacy-page .main-nav a[href="gifts.html"].active,
body.pharmacy-page .main-nav a[href="gifts.html"]:hover {
  color: #e6c04a;
}
body.pharmacy-page .main-nav a[href="gifts.html"] {
  opacity: 1;
}
/* phone dropdown matches the glass bar */
html.is-mobile body.pharmacy-page .main-nav {
  background: rgba(20, 20, 26, 0.96);
  color: #ffffff;
  box-shadow: none;
}
html.is-mobile body.pharmacy-page .main-nav a.active {
  color: #8fe6ff;
}

.pharmacy-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(30.4vw + 96px);
  padding: 118px 8vw 56px;
  color: var(--ink);
  text-align: left;
  perspective: none;
  background: #dff3f4 url("assets/Phramacy-Hero-Image.webp") center / cover no-repeat;
}
.pharmacy-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.3), transparent);
}
.pharmacy-hero-content {
  width: min(560px, 46vw);
  text-align: left;
  z-index: 2;
}
.pharmacy-hero-content h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  line-height: 1.04;
}
.pharmacy-hero-content h1 em {
  white-space: normal;
}
.pharmacy-hero-copy {
  max-width: 400px;
  margin: 0 0 26px;
  font-size: clamp(15px, 1.3vw, 19px);
  color: #2d3a3f;
}
.pharmacy-hero-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(120deg, #1479b8 0%, #14b8c4 55%, #3ccfa5 100%);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 34px rgba(20, 121, 184, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pharmacy-hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(20, 121, 184, 0.45);
}
.pharmacy-ticker {
  border-top: 0;
}
html.is-mobile body.pharmacy-page .pharmacy-hero-content {
  width: min(560px, 46vw);
}
body.pharmacy-page.inner-page .main-nav a.active,
body.pharmacy-page.inner-page .main-nav a:hover {
  color: #8fe6ff;
}
body.pharmacy-page.inner-page .main-nav a[href="gifts.html"],
body.pharmacy-page.inner-page .main-nav a[href="gifts.html"].active,
body.pharmacy-page.inner-page .main-nav a[href="gifts.html"]:hover {
  color: #e6c04a;
}
.pharmacy-hero-content {
  width: min(500px, 40vw);
}
.pharmacy-hero-content h1 {
  font-size: clamp(1.9rem, 3vw, 3.4rem);
}
.pharmacy-hero-content h1 em {
  background: linear-gradient(120deg, #0d63a6 0%, #0f93ae 55%, #17ad8b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Phones: the taller glass header overlays the top of the hero, so make room for it */
html.is-mobile body.pharmacy-page .pharmacy-hero {
  padding-top: calc(60px * var(--k, 3) + 40px);
  min-height: calc(30.4vw + 60px * var(--k, 3) + 40px);
}
/* Medical brand logos vary a lot in shape, so give them a bit more room */
.pharmacy-ticker .logo-track {
  gap: 64px;
}
.pharmacy-ticker .logo-track img {
  height: 62px;
  max-width: 170px;
}
/* Jamieson and Nature's Truth are square files with a lot of empty margin, so scale them up to match the others */
.pharmacy-ticker .logo-track img[src*="jamieson"] {
  height: 130px;
  max-width: none;
  margin: -34px -22px;
}
.pharmacy-ticker .logo-track img[src*="natures-truth"] {
  height: 170px;
  max-width: none;
  margin: -54px -34px;
}

/* Pharmacy hero: bigger text, softer glass nav */
body.pharmacy-page .site-header {
  background: rgba(20, 20, 26, 0.55);
}
.pharmacy-hero-content {
  width: min(760px, 56vw);
}
.pharmacy-hero-content h1 {
  font-size: clamp(2.3rem, 4.3vw, 5rem);
  margin-bottom: 22px;
}
.pharmacy-hero-copy {
  max-width: none;
  font-size: clamp(16px, 1.65vw, 24px);
  line-height: 1.45;
  margin-bottom: 30px;
}
.pharmacy-hero-btn {
  font-size: clamp(14px, 1.15vw, 17px);
}
/* soft light wash on the left so bigger dark text stays readable over the photo */
.pharmacy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 58%);
}
html.is-mobile body.pharmacy-page .pharmacy-hero-content {
  width: min(760px, 56vw);
}
/* Same fix as the home hero: the heading's clamp()/vw sizing shrinks
   with the page on phones, so it never actually looked "big" there —
   a fixed physical size via --k brings it to the same scale as the
   home hero instead. */
html.is-mobile body.pharmacy-page .pharmacy-hero-content h1 {
  font-size: calc(28px * var(--k, 3));
  line-height: 1.1;
  margin-bottom: calc(10px * var(--k, 3));
}
html.is-mobile body.pharmacy-page .pharmacy-hero-copy {
  font-size: calc(13px * var(--k, 3));
  line-height: 1.4;
  margin-bottom: calc(14px * var(--k, 3));
}
html.is-mobile body.pharmacy-page .pharmacy-hero-btn {
  font-size: calc(11px * var(--k, 3));
  padding: calc(9px * var(--k, 3)) calc(18px * var(--k, 3));
  box-shadow: 0 calc(8px * var(--k, 3)) calc(18px * var(--k, 3)) rgba(20, 121, 184, 0.3);
}

/* ============================================================
   Pharmacy "we accept" pop-up: photo behind each card, softer card
   ============================================================ */
.rx-accept-card {
  background: rgba(255, 252, 250, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.6);
}
.rx-accept-grid .accept-media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rx-accept-grid .accept-media-1 { background-image: url("assets/accept/ttarp.webp"); }
.rx-accept-grid .accept-media-2 { background-image: url("assets/accept/sagicor.webp"); }
.rx-accept-grid .accept-media-3 { background-image: url("assets/accept/guardian.webp"); }
.rx-accept-grid .accept-media-4 { background-image: url("assets/accept/baby-grants.webp"); }
.rx-accept-grid .accept-media-5 { background-image: url("assets/accept/bonus-points.webp"); }
/* keep a light holographic shimmer, but let the photo show through */
.rx-accept-grid .accept-media::before {
  opacity: 0.32;
}
.rx-accept-grid .accept-media::after {
  background: linear-gradient(180deg, rgba(6, 22, 32, 0.22) 0%, rgba(6, 22, 32, 0.68) 100%);
}
.rx-accept-grid .accept-name,
.rx-accept-grid .accept-eyebrow,
.rx-accept-grid .accept-sub {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Phones: 5 tiles at 3-per-row were too small to hold the longer captions
   (e.g. "Trinidad & Tobago Association of Retired Persons") without clipping.
   Two per row gives each tile enough room; sizes use calc(Npx * var(--k, 3))
   so they're a consistent physical size on every phone. */
html.is-mobile #acceptOverlay {
  zoom: 1;
}
html.is-mobile .rx-accept-card {
  width: calc(380px * var(--k, 3));
  max-width: 86%;
  max-height: 80vh;
  overflow-y: auto;
  padding: calc(18px * var(--k, 3)) calc(14px * var(--k, 3)) calc(14px * var(--k, 3));
}
html.is-mobile .rx-accept-card h2 {
  font-size: calc(15px * var(--k, 3));
  line-height: 1.25;
  margin: 0 0 calc(10px * var(--k, 3));
  padding-right: calc(22px * var(--k, 3));
}
html.is-mobile .rx-accept-card .tenant-close {
  width: calc(22px * var(--k, 3));
  height: calc(22px * var(--k, 3));
  font-size: calc(12px * var(--k, 3));
  top: calc(8px * var(--k, 3));
  right: calc(8px * var(--k, 3));
}
/* Flexbox + justify-content:center, same as the desktop version just
   above — with 5 (odd) tiles this naturally centers the lone leftover
   tile on its own row, which a 2-column CSS grid doesn't do on its own. */
html.is-mobile .rx-accept-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(7px * var(--k, 3));
  margin: 0 0 calc(12px * var(--k, 3));
}
html.is-mobile .rx-accept-grid .accept-media {
  flex: 0 0 calc(50% - (7px * var(--k, 3)) / 2);
  aspect-ratio: auto;
  min-height: calc(62px * var(--k, 3));
}
html.is-mobile .accept-frame {
  inset: 6%;
  gap: calc(2px * var(--k, 3));
  padding: 0 calc(4px * var(--k, 3));
}
html.is-mobile .accept-eyebrow {
  font-size: calc(6.5px * var(--k, 3));
}
html.is-mobile .accept-name {
  font-size: calc(11px * var(--k, 3));
}
html.is-mobile .accept-sub {
  font-size: calc(6px * var(--k, 3));
  line-height: 1.25;
}
html.is-mobile .rx-accept-card .rx-popup-next {
  font-size: calc(11px * var(--k, 3));
  padding: calc(7px * var(--k, 3)) calc(12px * var(--k, 3));
}

/* ============================================================
   Pharmacy flip cards: photo behind each card (front and back)
   ============================================================ */
.service-grid .flip-card:nth-child(1) { --card-photo: url("assets/services/prescriptions.jpg"); }
.service-grid .flip-card:nth-child(2) { --card-photo: url("assets/services/wellness.jpg"); }
.service-grid .flip-card:nth-child(3) { --card-photo: url("assets/services/private-advice.webp"); }
.service-grid .flip-card-front,
.service-grid .flip-card-back {
  background-image: var(--card-photo);
  background-size: cover;
  background-position: center;
}
/* dark fade so the white card text stays readable; the blue shimmer stays on top, lightly */
.service-grid .flip-card-front::after,
.service-grid .flip-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 22, 32, 0.28) 0%, rgba(6, 22, 32, 0.62) 100%);
}
.service-grid .flip-card-back::after {
  background: rgba(6, 22, 32, 0.72);
}
.service-grid .flip-card-front::before,
.service-grid .flip-card-back::before {
  opacity: 0.3;
}
.service-grid .flip-card-front > *,
.service-grid .flip-card-back > * {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Pharmacy nav bar: a little more solid */
body.pharmacy-page .site-header {
  background: rgba(20, 20, 26, 0.74);
}

/* ============================================================
   Home: store contacts & hours pop-up + clock button
   ============================================================ */
.hours-trigger {
  bottom: 89px;
  animation: none;
}
.hours-trigger:hover {
  transform: scale(1.06);
}
.hours-card {
  width: min(1040px, 100%);
  max-height: 90vh;
  padding: 34px clamp(18px, 3vw, 36px) 26px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.hours-card h2 {
  margin: 0 0 6px;
  padding-right: 34px;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.hours-intro {
  margin: 0 0 16px;
  font-size: 14px;
  opacity: 0.7;
}
.hours-scroll {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(51, 51, 51, 0.1);
  background: #ffffff;
}
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.hours-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  background: var(--coral);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.hours-table thead th small {
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: none;
}
.hours-table tbody th,
.hours-table tbody td {
  padding: 11px 14px;
  vertical-align: top;
  text-align: left;
  border-top: 1px solid rgba(51, 51, 51, 0.08);
}
.hours-table tbody th {
  font-family: var(--display);
  font-weight: 800;
  white-space: nowrap;
}
.hours-table tbody tr:nth-child(even) {
  background: rgba(232, 99, 122, 0.05);
}
.hours-table td:last-child {
  white-space: nowrap;
}
.hours-table a {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.hours-table a:hover {
  color: var(--coral);
}
.hours-table .hours-wa {
  color: #14803c;
}
html.is-mobile .hours-trigger,
html.is-mobile .tenant-trigger {
  zoom: calc(var(--k, 3) * 0.7);
}

/* Phones: instead of a giant sideways-scrolling table, pick a store from
   a dropdown and see just that store's info — far smaller and faster to
   scan. Built by initMobileHoursDropdown() in script.js, which reads the
   real table (so there's one source of truth for the store data) and
   swaps it out for this. Sizes use calc(Npx * var(--k, 3)) so the
   physical on-screen size is the same N px on every phone. */
html.is-mobile .hours-card {
  zoom: 1;
  width: calc(440px * var(--k, 3));
  max-width: 90%;
  padding: calc(20px * var(--k, 3)) calc(16px * var(--k, 3)) calc(16px * var(--k, 3));
}
html.is-mobile .hours-card h2 {
  font-size: calc(20px * var(--k, 3));
  padding-right: calc(34px * var(--k, 3));
}
html.is-mobile .hours-intro {
  font-size: calc(12px * var(--k, 3));
  margin-bottom: calc(10px * var(--k, 3));
}
html.is-mobile .hours-scroll {
  display: none;
}
.hours-mobile {
  display: none;
}
html.is-mobile .hours-mobile {
  display: block;
}
html.is-mobile .hours-mobile-select {
  width: 100%;
  padding: calc(10px * var(--k, 3)) calc(12px * var(--k, 3));
  border-radius: calc(10px * var(--k, 3));
  border: 1px solid rgba(51, 51, 51, 0.18);
  background: #ffffff;
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(13px * var(--k, 3));
  color: var(--ink);
  margin-bottom: calc(12px * var(--k, 3));
}
html.is-mobile .hours-mobile-detail {
  display: grid;
  gap: calc(8px * var(--k, 3));
}
html.is-mobile .hours-mobile-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--k, 3));
  padding: calc(9px * var(--k, 3)) calc(11px * var(--k, 3));
  border-radius: calc(10px * var(--k, 3));
  background: rgba(232, 99, 122, 0.06);
  font-size: calc(12px * var(--k, 3));
  line-height: 1.4;
}
html.is-mobile .hours-mobile-label {
  font-weight: 800;
  opacity: 0.6;
  white-space: nowrap;
}
html.is-mobile .hours-mobile-value {
  text-align: right;
}
html.is-mobile .hours-mobile-value a {
  color: var(--ink);
  font-weight: 700;
}
html.is-mobile .hours-mobile-value .hours-wa {
  color: #14803c;
}
html.is-mobile .hours-card .tenant-close {
  width: calc(30px * var(--k, 3));
  height: calc(30px * var(--k, 3));
  font-size: calc(16px * var(--k, 3));
  top: calc(10px * var(--k, 3));
  right: calc(10px * var(--k, 3));
}
/* The overlay itself must not be zoomed (it would stop being centred on the screen); its card is sized directly */
html.is-mobile #hoursOverlay {
  zoom: 1;
}
/* Let the card shrink to the screen; the table scrolls inside it */
#hoursOverlay {
  grid-template-columns: minmax(0, 1fr);
}
.hours-card,
.hours-scroll {
  min-width: 0;
  max-width: 100%;
}

/* Penny (FAQ bot): store chips + WhatsApp button */
.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.faq-chip {
  padding: 6px 12px;
  border: 1px solid rgba(232, 99, 122, 0.55);
  border-radius: 999px;
  background: #ffffff;
  color: var(--coral-dark, #c94a63);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.faq-chip:hover:not(:disabled) {
  background: var(--coral);
  color: #ffffff;
}
.faq-chip:disabled {
  opacity: 0.45;
  cursor: default;
}
.faq-wa-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.3);
}
.faq-wa-btn:hover {
  filter: brightness(0.95);
}


/* Plazas: rental-enquiry button sits above the link button */
.rental-trigger {
  bottom: 89px;
  animation: none;
}
.rental-trigger:hover {
  transform: scale(1.06);
}
html.is-mobile .rental-trigger {
  zoom: calc(var(--k, 3) * 0.7);
}

/* Penny stickers */
.faq-sticker {
  display: block;
  width: 132px;
  height: 132px;
  margin-top: 10px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(17, 22, 33, 0.18);
  animation: stickerPop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes stickerPop {
  from { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ============================================================
   Convai chat (Penny): the old chat pill stays hidden unless Convai
   could not start, in which case it comes back as the fallback.
   ============================================================ */
.faq-widget {
  visibility: hidden;
}
html.convai-fallback .faq-widget {
  visibility: visible;
}
.convai-widget {
  z-index: 10001 !important;
}
/* phones render the desktop layout scaled down, so scale the widget back up */
html.is-mobile .convai-widget {
  zoom: calc(var(--k, 3) * 0.75);
  right: 12px !important;
  bottom: 12px !important;
}
html.is-mobile.convai-active .scroll-top {
  bottom: calc(96px * var(--k, 3) * 0.75);
}

/* Penny's stickers pop up beside the Convai chat window */
.penny-sticker {
  position: fixed;
  right: 438px;
  bottom: 40px;
  z-index: 10002;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 22px;
  border: 4px solid #ffffff;
  box-shadow: 0 16px 34px rgba(17, 22, 33, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4) rotate(-10deg);
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.penny-sticker.is-visible {
  opacity: 1;
  transform: scale(1) rotate(-4deg);
}
html.is-mobile .penny-sticker {
  zoom: calc(var(--k, 3) * 0.75);
  right: 426px;
  bottom: 24px;
}
@media (max-width: 620px) {
  .penny-sticker {
    right: 24px;
    bottom: 640px;
  }
}

/* ============================================================
   Profile: avatar creator + order history
   ============================================================ */
.avatar-create-btn {
  font: inherit;
  font-weight: 700;
  border: 1px solid rgba(17, 22, 33, 0.1);
}
.avatar-create-btn:hover {
  background: rgba(232, 99, 122, 0.16);
}
.profile-avatar-wrap img {
  background: #f3f3f3;
}
.avatar-card {
  width: min(900px, 100%);
  max-height: 92vh;
  overflow: auto;
  text-align: left;
}
.avatar-card h2 {
  margin: 0 0 4px;
  padding-right: 34px;
}
.avatar-hint {
  margin: 0 0 18px;
  font-size: 14px;
  opacity: 0.7;
}
.avatar-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.avatar-stage {
  display: grid;
  gap: 14px;
  justify-items: center;
  position: sticky;
  top: 0;
}
.avatar-preview {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(232, 99, 122, 0.25);
  box-shadow: 0 16px 34px rgba(17, 22, 33, 0.16);
}
.avatar-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}
.av-group {
  margin-bottom: 14px;
}
.av-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.65);
}
.av-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.av-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(17, 22, 33, 0.12);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.av-swatch:hover {
  transform: scale(1.12);
}
.av-swatch.is-selected {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(232, 99, 122, 0.3);
}
.av-pill {
  padding: 6px 13px;
  border: 1.5px solid rgba(17, 22, 33, 0.14);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.av-pill:hover {
  border-color: var(--coral);
}
.av-pill.is-selected {
  background: var(--coral);
  border-color: var(--coral);
  color: #ffffff;
}
.avatar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 22, 33, 0.08);
}
@media (max-width: 700px) {
  .avatar-layout {
    grid-template-columns: 1fr;
  }
  .avatar-stage {
    position: static;
  }
}

/* Phones: the avatar builder is just the desktop layout stacked into one
   column and resized in real (physical) pixels via --k, same recipe as
   every other popup on the site — not the page's automatic shrink, which
   would make the swatches and buttons too small to tap. */
html.is-mobile .avatar-overlay {
  zoom: 1;
}
html.is-mobile .avatar-card {
  width: calc(100% - 0px);
  padding: calc(20px * var(--k, 3)) calc(18px * var(--k, 3));
  max-height: 88vh;
}
html.is-mobile .avatar-card .tenant-close {
  width: calc(26px * var(--k, 3));
  height: calc(26px * var(--k, 3));
  font-size: calc(14px * var(--k, 3));
  top: calc(10px * var(--k, 3));
  right: calc(10px * var(--k, 3));
}
html.is-mobile .avatar-card h2 {
  font-size: calc(18px * var(--k, 3));
  padding-right: calc(26px * var(--k, 3));
}
html.is-mobile .avatar-hint {
  font-size: calc(12px * var(--k, 3));
  margin-bottom: calc(14px * var(--k, 3));
}
html.is-mobile .avatar-layout {
  grid-template-columns: 1fr;
  gap: calc(14px * var(--k, 3));
}
html.is-mobile .avatar-stage {
  position: static;
  gap: calc(10px * var(--k, 3));
}
html.is-mobile .avatar-preview {
  width: calc(130px * var(--k, 3));
  height: calc(130px * var(--k, 3));
  border-width: calc(3px * var(--k, 3));
}
html.is-mobile .avatar-random {
  font-size: calc(12px * var(--k, 3));
  min-height: calc(32px * var(--k, 3));
  padding: 0 calc(12px * var(--k, 3));
}
html.is-mobile .av-group {
  margin-bottom: calc(10px * var(--k, 3));
}
html.is-mobile .av-label {
  font-size: calc(10px * var(--k, 3));
  margin-bottom: calc(5px * var(--k, 3));
}
html.is-mobile .av-row {
  gap: calc(7px * var(--k, 3));
}
html.is-mobile .av-swatch {
  width: calc(32px * var(--k, 3));
  height: calc(32px * var(--k, 3));
  border-width: calc(2px * var(--k, 3));
}
html.is-mobile .av-pill {
  padding: calc(6px * var(--k, 3)) calc(12px * var(--k, 3));
  font-size: calc(12px * var(--k, 3));
}
html.is-mobile .avatar-actions {
  gap: calc(10px * var(--k, 3));
  margin-top: calc(14px * var(--k, 3));
  padding-top: calc(12px * var(--k, 3));
}
html.is-mobile .avatar-actions .outline-button,
html.is-mobile .avatar-actions .primary-button {
  font-size: calc(12px * var(--k, 3));
  min-height: calc(36px * var(--k, 3));
  padding: 0 calc(14px * var(--k, 3));
}

.order-history {
  display: grid;
  gap: 14px;
}
.order-empty {
  margin: 0;
  color: rgba(51, 51, 51, 0.7);
}
.order-empty a {
  color: var(--coral);
  font-weight: 700;
}
.order-card {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(17, 22, 33, 0.08);
  background: rgba(245, 245, 245, 0.7);
}
.order-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.order-card header small {
  display: block;
  font-size: 12px;
  color: rgba(51, 51, 51, 0.65);
}
.order-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(240, 180, 41, 0.22);
  color: #8a6408;
  white-space: nowrap;
}
.order-status-confirmed {
  background: rgba(20, 121, 184, 0.16);
  color: #0f5c8c;
}
.order-status-fulfilled {
  background: rgba(60, 207, 165, 0.22);
  color: #0d7a5c;
}
.order-status-cancelled {
  background: rgba(150, 150, 150, 0.22);
  color: #666666;
}
.order-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(17, 22, 33, 0.06);
  font-size: 14px;
}
.order-card li em {
  font-style: normal;
  opacity: 0.6;
}
.order-card footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid rgba(17, 22, 33, 0.1);
  font-weight: 700;
}
/* the site-wide footer style must not apply to the footer inside an order card */
.order-card footer {
  height: auto;
  min-height: 0;
  padding: 8px 0 0;
  background: none;
  color: inherit;
  font-size: 15px;
  line-height: 1.4;
}

/* Single-photo left page (stories with one picture instead of a slideshow) */
.paper-figure {
  margin: 0 0 12px;
  border: 1px solid #1c1a17;
  background: #ece6d8;
}
.paper-figure img {
  display: block;
  width: 100%;
  height: clamp(340px, 36vw, 540px);
  object-fit: cover;
  object-position: center;
}

/* "Hover a face to see who's who" — splits the photo into one zone per
   person (left to right); hovering (or focusing, for keyboard users)
   a zone fades in a name + title pill above that part of the photo. */
.news-team-photo {
  position: relative;
}
/* Each zone is positioned individually (inline left/width on the
   element, see news-media.html) over that person's actual spot in the
   photo, rather than splitting the photo into 5 equal-width slices —
   the group isn't evenly spaced, so equal slices drifted out of
   alignment by the time you reached the right side of the photo. */
.news-team-zones {
  position: absolute;
  inset: 0;
}
.news-team-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6%;
  cursor: pointer;
}
.news-team-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(20, 16, 20, 0.88);
  color: #ffffff;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.news-team-label small {
  font-family: var(--body);
  font-size: 8px;
  font-weight: 600;
  opacity: 0.82;
}
.news-team-zone:hover .news-team-label,
.news-team-zone:focus-visible .news-team-label {
  opacity: 1;
  transform: translateY(0);
}
/* Phones: hover doesn't exist, so all 5 name tags just stay visible
   instead of waiting for a touch that won't come. */
html.is-mobile .news-team-label {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MOBILE ROUND 2 — bigger running logos, tidier gift titles,
   and a simplified, centered News & Media layout (no page-flip).
   ============================================================ */

/* Running brand-logo strip (home + pharmacy): bring it up to full
   native size on real phones instead of riding the page-wide shrink. */
html.is-mobile .logo-track img {
  height: calc(var(--k, 3) * 54px);
  max-width: calc(var(--k, 3) * 150px);
}
html.is-mobile .pharmacy-ticker .logo-track {
  gap: calc(var(--k, 3) * 64px);
}
html.is-mobile .pharmacy-ticker .logo-track img {
  height: calc(var(--k, 3) * 62px);
  max-width: calc(var(--k, 3) * 170px);
}
html.is-mobile .pharmacy-ticker .logo-track img[src*="jamieson"] {
  height: calc(var(--k, 3) * 130px);
  max-width: none;
}
html.is-mobile .pharmacy-ticker .logo-track img[src*="natures-truth"] {
  height: calc(var(--k, 3) * 170px);
  max-width: none;
}

/* Pennywise Gifts: two wider cards per row instead of three cramped ones,
   and a smaller, tighter title so it stops wrapping messily. */
html.is-mobile .gifts-layout {
  grid-template-columns: 1fr;
}
html.is-mobile .gift-cart {
  position: static;
  grid-column: 1;
  grid-row: auto;
  margin-top: 24px;
}
html.is-mobile .gift-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
}
html.is-mobile .gift-product-card h3 {
  min-height: 0;
  font-size: 13px;
  line-height: 1.3;
}
html.is-mobile .gift-product-vendor {
  font-size: 9px;
}
html.is-mobile .gift-product-price {
  font-size: 13px;
}

/* News & Media: drop the page-turn newspaper effect on mobile. A row of
   tab buttons (built by initMobileNewsTabs() in script.js, one per
   story) replaces it — tapping a tab shows just that story instead of
   stacking every story on the page at once. */
html.is-mobile .paper-book {
  display: block;
}
.paper-tabs {
  display: none;
}
html.is-mobile .paper-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8px * var(--k, 3));
  margin: 0 0 calc(22px * var(--k, 3));
}
html.is-mobile .paper-tab {
  padding: calc(8px * var(--k, 3)) calc(15px * var(--k, 3));
  border: 1.5px solid #1c1a17;
  border-radius: 999px;
  background: transparent;
  color: #1c1a17;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(12px * var(--k, 3));
  cursor: pointer;
}
html.is-mobile .paper-tab.is-active {
  background: #1c1a17;
  color: #fbf8f0;
}
html.is-mobile .paper-spread {
  grid-area: auto;
  display: none;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
html.is-mobile .paper-spread.is-mobile-active {
  display: block;
}
html.is-mobile .paper-spread .paper-page-photos {
  display: block;
  padding-right: 0;
  border-right: 0;
  text-align: center;
}
html.is-mobile .paper-page-text {
  padding-left: 0;
  text-align: center;
}
html.is-mobile .paper-page-text h3,
html.is-mobile .paper-page-text p,
html.is-mobile .paper .news-more-inner > p,
html.is-mobile .paper-caption {
  text-align: center;
  hyphens: none;
}
html.is-mobile .paper-page-text h3 + p::first-letter {
  float: none;
  font: inherit;
  padding: 0;
}
html.is-mobile .news-quote {
  text-align: center;
}
html.is-mobile .news-more-btn {
  margin-left: auto;
  margin-right: auto;
}
html.is-mobile .paper-count,
html.is-mobile .paper-controls {
  display: none;
}

/* ============================================================
   IN-PAGE CONTENT EDITOR (admin only)
   ============================================================ */
#pwEditBar {
  position: fixed;
  top: 84px;
  right: 16px;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
#pwEditBar .pw-edit-toggle {
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(17, 22, 33, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}
#pwEditBar .pw-edit-toggle:hover {
  transform: translateY(-1px);
}
#pwEditBar .pw-edit-toggle.is-on {
  background: var(--coral, #e8637a);
}
#pwEditBar .pw-edit-analytics {
  pointer-events: auto;
  display: inline-block;
  border-radius: 999px;
  padding: 10px 18px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(17, 22, 33, 0.18);
  transition: transform 0.2s ease;
}
#pwEditBar .pw-edit-analytics:hover {
  transform: translateY(-1px);
}
#pwEditBar .pw-edit-hint {
  visibility: hidden;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(17, 22, 33, 0.92);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
}

/* Hover affordance for anything the editor WOULD make editable, shown
   only once edit mode is switched on. */
html.pw-edit-mode .pw-editable {
  cursor: text;
  outline: 1.5px dashed rgba(232, 99, 122, 0.55);
  outline-offset: 3px;
  border-radius: 3px;
  position: relative;
}
html.pw-edit-mode .pw-editable:hover,
html.pw-edit-mode .pw-editable:focus {
  outline-style: solid;
  outline-color: var(--coral, #e8637a);
  background: rgba(232, 99, 122, 0.08);
}
/* Single shared button, positioned in JS over whichever editable item is
   currently hovered/focused (see pwSetupContentEditor in script.js). */
.pw-revert-btn {
  all: unset;
  position: absolute;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
}
.pw-editable.pw-saved {
  animation: pwSavedFlash 0.9s ease;
}
.pw-editable.pw-save-error {
  animation: pwErrorFlash 1.6s ease;
}
@keyframes pwSavedFlash {
  0% {
    background: rgba(60, 207, 165, 0.35);
  }
  100% {
    background: transparent;
  }
}
@keyframes pwErrorFlash {
  0%,
  60% {
    background: rgba(220, 70, 70, 0.3);
  }
  100% {
    background: transparent;
  }
}
@media (max-width: 750px) {
  #pwEditBar {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    align-items: stretch;
  }
  #pwEditBar .pw-edit-toggle,
  #pwEditBar .pw-edit-analytics {
    width: 100%;
    text-align: center;
  }
  #pwEditBar .pw-edit-hint {
    max-width: none;
    text-align: center;
  }
}

/* ============================================================
   Admin analytics dashboard (admin-analytics.html)
   ============================================================ */
.admin-analytics-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 130px;
  min-height: 60vh;
}
.admin-gate {
  max-width: 440px;
  margin: 60px auto;
  text-align: center;
  color: var(--ink);
}
.admin-gate p {
  margin-bottom: 18px;
  opacity: 0.75;
}
.admin-analytics-head {
  margin-bottom: 28px;
}
.admin-analytics-head h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 6px;
}
.admin-analytics-head p {
  opacity: 0.6;
  margin: 0;
}
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.stat-tile {
  background: #ffffff;
  border: 1px solid rgba(17, 22, 33, 0.08);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-tile strong {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-tile span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.6);
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.admin-card {
  background: #ffffff;
  border: 1px solid rgba(17, 22, 33, 0.08);
  border-radius: 16px;
  padding: 22px 22px 18px;
}
.admin-card h2 {
  font-family: var(--display);
  font-size: 1rem;
  margin: 0 0 14px;
}
.admin-card-sub {
  margin: -8px 0 14px;
  font-size: 12px;
  opacity: 0.6;
}
.admin-empty {
  opacity: 0.5;
  font-size: 13px;
  margin: 0;
}
.bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bar-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 4px;
}
.bar-list-label {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-list-count {
  flex: none;
  color: rgba(51, 51, 51, 0.55);
  font-variant-numeric: tabular-nums;
}
.bar-list-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(51, 51, 51, 0.08);
  overflow: hidden;
}
.bar-list-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--coral, #e8637a);
}
@media (max-width: 760px) {
  .stat-tile-row,
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-analytics-shell {
    padding-top: 100px;
  }
}
html.is-mobile .admin-analytics-shell {
  padding-top: calc(80px * var(--k, 3));
  padding-left: calc(16px * var(--k, 3));
  padding-right: calc(16px * var(--k, 3));
}
html.is-mobile .stat-tile-row,
html.is-mobile .admin-grid {
  grid-template-columns: 1fr;
  gap: calc(12px * var(--k, 3));
}
html.is-mobile .stat-tile,
html.is-mobile .admin-card {
  padding: calc(16px * var(--k, 3));
  border-radius: calc(14px * var(--k, 3));
}
html.is-mobile .admin-analytics-head h1 {
  font-size: calc(26px * var(--k, 3));
}
html.is-mobile .bar-list-label,
html.is-mobile .bar-list-count,
html.is-mobile .admin-card-sub {
  font-size: calc(12px * var(--k, 3));
}

/* ============================================================
   Monthly report notice (appears for admins site-wide)
   ============================================================ */
.gift-added-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10060;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  background: #ffffff;
  color: var(--ink);
  border-radius: 18px;
  padding: 18px 26px;
  box-shadow: 0 20px 50px rgba(17, 22, 33, 0.28);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gift-added-toast svg {
  flex-shrink: 0;
  color: var(--coral);
}
.gift-added-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
html.is-mobile .gift-added-toast {
  gap: calc(10px * var(--k, 3));
  max-width: calc(300px * var(--k, 3));
  border-radius: calc(16px * var(--k, 3));
  padding: calc(16px * var(--k, 3)) calc(22px * var(--k, 3));
  font-size: calc(12.5px * var(--k, 3));
}
html.is-mobile .gift-added-toast svg {
  width: calc(24px * var(--k, 3));
  height: calc(24px * var(--k, 3));
}

.monthly-report-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10050;
  max-width: 300px;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 16px 40px rgba(17, 22, 33, 0.22);
  animation: monthlyReportIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes monthlyReportIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.monthly-report-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.06);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.monthly-report-dismiss:hover {
  background: rgba(51, 51, 51, 0.12);
}
.monthly-report-title {
  margin: 0 22px 12px 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.monthly-report-download {
  width: 100%;
  min-height: 38px;
  font-size: 12.5px;
  padding: 0 16px;
}
html.is-mobile .monthly-report-toast {
  left: calc(14px * var(--k, 3));
  bottom: calc(14px * var(--k, 3));
  max-width: calc(260px * var(--k, 3));
  padding: calc(16px * var(--k, 3)) calc(18px * var(--k, 3)) calc(14px * var(--k, 3));
  border-radius: calc(14px * var(--k, 3));
}
html.is-mobile .monthly-report-dismiss {
  width: calc(22px * var(--k, 3));
  height: calc(22px * var(--k, 3));
  font-size: calc(13px * var(--k, 3));
  top: calc(9px * var(--k, 3));
  right: calc(9px * var(--k, 3));
}
html.is-mobile .monthly-report-title {
  font-size: calc(12px * var(--k, 3));
  margin-bottom: calc(10px * var(--k, 3));
}
html.is-mobile .monthly-report-download {
  min-height: calc(34px * var(--k, 3));
  font-size: calc(11px * var(--k, 3));
}

/* ============================================================
   Admin content manager (admin-content.html)
   ============================================================ */
.admin-content-shell {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 130px;
  padding-bottom: 80px;
  min-height: 60vh;
}
.admin-content-head {
  margin-bottom: 24px;
}
.admin-content-head h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 6px;
}
.admin-content-head p {
  opacity: 0.6;
  margin: 0;
  max-width: 60ch;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(17, 22, 33, 0.1);
}
.admin-tab {
  border: 0;
  background: none;
  padding: 10px 18px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(51, 51, 51, 0.55);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.admin-tab:hover {
  color: var(--ink);
}
.admin-tab.is-active {
  color: var(--coral, #e8637a);
  border-bottom-color: var(--coral, #e8637a);
}
.admin-list-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.cms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cms-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(17, 22, 33, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
}
.cms-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(51, 51, 51, 0.06);
  flex: none;
}
.cms-list-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-list-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.cms-list-actions button {
  border: 1px solid rgba(17, 22, 33, 0.12);
  background: #ffffff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.2s ease;
}
.cms-list-actions button:hover:not(:disabled) {
  background: rgba(232, 99, 122, 0.1);
}
.cms-list-actions button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Form overlay */
.cms-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 10, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cms-form-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.cms-form-card {
  position: relative;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff9f8;
  border-radius: 20px;
  padding: 36px 32px 30px;
  box-shadow: 0 28px 90px rgba(20, 16, 25, 0.24);
}
.cms-form-card h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 1.4rem;
  padding-right: 30px;
}
.cms-form-card .tenant-close {
  position: absolute;
  top: 16px;
  right: 16px;
}
.cms-form-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cms-form-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(51, 51, 51, 0.7);
}
.cms-form-card label.cms-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.cms-form-card input[type="text"],
.cms-form-card input[type="url"],
.cms-form-card input[type="number"],
.cms-form-card input[type="file"],
.cms-form-card textarea,
.cms-form-card select {
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(17, 22, 33, 0.14);
  background: #ffffff;
  color: var(--ink);
}
.cms-form-card textarea {
  resize: vertical;
  font-family: var(--body);
}
.cms-field-label {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(51, 51, 51, 0.7);
  margin-top: 6px;
}
.cms-hint {
  margin: -8px 0 0;
  font-size: 11.5px;
  opacity: 0.55;
}
.cms-current-img {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 0;
}
.cms-current-img img,
p.cms-current-img img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}
.cms-repeat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cms-repeat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(17, 22, 33, 0.1);
  border-radius: 10px;
  background: #ffffff;
}
.cms-repeat-row input,
.cms-repeat-row select {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1.5px solid rgba(17, 22, 33, 0.14);
}
.cms-repeat-row img.cms-current-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}
.cms-repeat-remove {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(51, 51, 51, 0.08);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.cms-repeat-remove:hover {
  background: rgba(192, 57, 43, 0.15);
  color: #c0392b;
}
.cms-advanced {
  border: 1px solid rgba(17, 22, 33, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
}
.cms-advanced summary {
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.cms-advanced .cms-repeat-list {
  margin-top: 10px;
}
.cms-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 22, 33, 0.08);
}
.cms-form-status {
  margin: 0;
  font-size: 12.5px;
  min-height: 16px;
}
@media (max-width: 760px) {
  .admin-content-shell {
    padding-top: 100px;
  }
}
html.is-mobile .admin-content-shell {
  padding-top: calc(80px * var(--k, 3));
  padding-left: calc(16px * var(--k, 3));
  padding-right: calc(16px * var(--k, 3));
}
html.is-mobile .admin-tab {
  font-size: calc(12px * var(--k, 3));
  padding: calc(8px * var(--k, 3)) calc(12px * var(--k, 3));
}
html.is-mobile .cms-list-item {
  padding: calc(8px * var(--k, 3)) calc(10px * var(--k, 3));
  gap: calc(10px * var(--k, 3));
}
html.is-mobile .cms-thumb {
  width: calc(40px * var(--k, 3));
  height: calc(40px * var(--k, 3));
}
html.is-mobile .cms-list-label {
  font-size: calc(12px * var(--k, 3));
}
html.is-mobile .cms-list-actions button {
  font-size: calc(10px * var(--k, 3));
  padding: calc(5px * var(--k, 3)) calc(8px * var(--k, 3));
}
html.is-mobile .cms-form-card {
  padding: calc(24px * var(--k, 3)) calc(20px * var(--k, 3)) calc(20px * var(--k, 3));
  border-radius: calc(16px * var(--k, 3));
}