/* Feyizino Events — pink-led palette.

   The page itself is the brand colour: a saturated pink field that content
   sits on top of, with white cards as the reading surfaces and gold kept for
   trim only (logo ring, hairline rules, small dividers).

   On the pink, text is white. Inside a white card, text is ink. Those are the
   only two contexts, and the "Surfaces" block below is what switches between
   them — so any new component only has to pick a side.

   Why the base is #d81b60 rather than the brighter #ff3d8b: white body text on
   #ff3d8b lands at 3.3:1, under the 4.5:1 minimum. #d81b60 measures 4.95:1 and
   still reads as hot pink. The brighter tone survives as the accent, the button
   fill, and the blooms across the top of the page. */
:root {
  /* Pink field */
  --pink: #ff3d8b;
  --pink-bright: #ff6ba8;
  --pink-soft: #ffc2da;
  --pink-mid: #d81b60;
  --pink-deep: #ad1457;
  --pink-darkest: #7d0f3d;
  --pink-sheen: linear-gradient(135deg, #ff8fbc 0%, #ff3d8b 45%, #d81b60 100%);

  /* Type on the pink field */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.84);
  --faint: rgba(255, 255, 255, 0.66);

  /* Type inside a white card */
  --ink: #2b0a18;
  --ink-muted: #6f4a5b;
  --ink-faint: #96788a;

  /* Gold, used as trim only */
  --gold: #d4af37;
  --gold-light: #f7e7a6;
  --gold-deep: #a8821c;
  --gold-sheen: linear-gradient(135deg, #f9edb6 0%, #d4af37 38%, #8c6b1f 62%, #f2dd8f 100%);

  --surface: #ffffff;
  --surface-2: #fff5f9;
  --border: rgba(255, 255, 255, 0.28);
  --border-strong: rgba(255, 255, 255, 0.5);
  --border-ink: rgba(43, 10, 24, 0.1);
  --border-gold: rgba(212, 175, 55, 0.45);
  --shadow: 0 20px 44px rgba(80, 6, 38, 0.24);
  --shadow-lift: 0 28px 60px rgba(80, 6, 38, 0.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.7;
  /* Brighter pink blooms across the top, deepening toward the footer. The
     brightest areas sit behind the hero photograph, not behind body copy. */
  background:
    radial-gradient(1200px 680px at 12% -8%, rgba(255, 107, 168, 0.75), transparent 62%),
    radial-gradient(1000px 640px at 88% 0%, rgba(255, 61, 139, 0.6), transparent 58%),
    radial-gradient(1100px 720px at 50% 104%, rgba(125, 15, 61, 0.6), transparent 66%),
    linear-gradient(180deg, #d81b60 0%, #cc1a5c 40%, #ad1457 100%);
}
/* Nothing should ever push the page sideways on a phone. `clip` keeps the
   guard from creating a scroll container the way `hidden` would. */
html, body { overflow-x: clip; }
/* A fixed background stutters and mis-paints on mobile Safari, so the parallax
   is reserved for pointer-driven desktops. */
@media (hover: hover) and (pointer: fine) {
  body { background-attachment: fixed; }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* Long unbroken strings (URLs, emails) must not widen a narrow layout. */
h1, h2, h3, p, li, a { overflow-wrap: break-word; }

#root { min-height: 100vh; }
.page-shell { min-height: 100vh; }

/* ---------- Logo mark: the jpeg is cropped to its circle and clipped round ---------- */
.logo-mark {
  position: relative;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1.5px var(--gold), 0 10px 26px rgba(80, 6, 38, 0.4);
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.logo-mark-sm { width: 42px; height: 42px; }
.logo-mark-md { width: 72px; height: 72px; }

/* ---------- Nav ---------- */
/* A white pill on the pink field, so the bar reads as a surface like the cards
   rather than as another wash of colour. */
.topbar {
  position: relative;
  /* The drawer hangs out of the bar, so the bar has to sit above the hero. */
  z-index: 40;
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(80, 6, 38, 0.28);
}
.topbar-inline { max-width: 1180px; margin: 20px auto 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.brand-sub { font-size: 0.54rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pink-mid); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--pink-sheen);
  transition: right 0.3s ease;
}
.nav-links a:hover { color: var(--pink-mid); }
.nav-links a:hover::after { right: 0; }
.nav-links a.is-active { color: var(--pink-mid); }
.nav-links a.is-active::after { right: 0; }
/* Needs to outrank `.nav-links a`, which would otherwise flatten the padding. */
.nav-links a.nav-cta {
  padding: 9px 24px;
  border-radius: 999px;
  background: var(--pink-sheen);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 10px 24px rgba(216, 27, 96, 0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.nav-links a.nav-cta::after { display: none; }

/* ---------- Collapsed nav (phones and small tablets) ---------- */
/* The toggle and the drawer are always in the markup; the breakpoint below
   decides which of the two navs is on screen, so neither needs JS to know the
   viewport width. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 27, 96, 0.3);
  background: rgba(255, 61, 139, 0.12);
  color: var(--pink-mid);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.nav-toggle.is-open { background: var(--pink-mid); color: #fff; border-color: transparent; }
.nav-toggle:focus-visible { outline: 2px solid var(--pink-mid); outline-offset: 3px; }
.nav-icon { display: block; }
.nav-drawer {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  /* Near-opaque: the drawer opens over the banner, and a lighter fill lets
     bright footage read straight through the labels. */
  background: #fff;
  box-shadow: 0 26px 56px rgba(80, 6, 38, 0.4);
  animation: fadeUp 0.24s ease both;
}
.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 48px tall including padding, so every row is a comfortable thumb target. */
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-drawer-item .nav-icon { color: var(--pink); flex: none; }
.nav-drawer-item.is-active { background: rgba(255, 61, 139, 0.12); color: var(--pink-mid); }
.nav-drawer-item:last-child {
  margin-top: 4px;
  background: var(--pink-sheen);
  color: #fff;
  font-weight: 700;
}
.nav-drawer-item:last-child .nav-icon { color: #fff; }

/* ---------- Hero banner + slider ---------- */
/* Cinematic banner: copy sits along the bottom edge so the frame itself is
   what the visitor sees first. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 90vh;
  /* `svh` measures against the *small* viewport, so the banner does not grow
     taller than the screen while mobile browser chrome is still expanded. */
  min-height: 90svh;
  padding: 72px 24px 104px;
}
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img, .hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Light touch only - the slides need to stay legible as photography. */
  filter: saturate(0.95) contrast(1.02);
}
.hero-slide.is-active img { animation: kenburns 9s ease-out both; }
@keyframes kenburns {
  from { transform: scale(1.06); }
  to { transform: scale(1.14); }
}
/* A pink cast over the footage ties the banner to the page, with a deeper
   plum wash along the bottom edge so the copy stays legible on any frame. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 36%, rgba(90, 8, 44, 0.5) 62%, rgba(90, 8, 44, 0.88) 88%, rgba(90, 8, 44, 0.95) 100%),
    linear-gradient(90deg, rgba(90, 8, 44, 0.5) 0%, rgba(90, 8, 44, 0.14) 45%, transparent 72%),
    linear-gradient(200deg, rgba(255, 61, 139, 0.22) 0%, rgba(255, 61, 139, 0.3) 60%, rgba(216, 27, 96, 0.4) 100%);
}
/* Bottom-right, clear of the copy in the bottom-left. */
.hero-slider-controls {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1180px;
  padding: 0 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.slider-arrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(90, 8, 44, 0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.24s ease, transform 0.24s ease, color 0.24s ease;
}
.slider-dots { display: flex; align-items: center; gap: 10px; }
.slider-dot {
  position: relative;
  width: 34px; height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
/* The bar is only 3px tall, which no thumb can hit. This widens the touch
   target to ~39px without changing how the dot looks. */
.slider-dot::after { content: ''; position: absolute; inset: -18px -5px; }
.slider-dot:hover { background: rgba(255, 255, 255, 0.7); }
.slider-dot.is-active { width: 54px; background: #fff; }
.slider-arrow:focus-visible, .slider-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Copy occupies the left column only; the rest of the frame is left to the
   slide. */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-copy { max-width: 620px; }
.hero-copy .lead { font-size: 1rem; max-width: 540px; }
.hero-copy h1 { font-size: clamp(2.1rem, 3.9vw, 3.2rem); }
.hero-actions { margin-top: 24px; }
.hero h1 { text-shadow: 0 2px 30px rgba(60, 4, 28, 0.7); }
.hero .lead { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 16px rgba(60, 4, 28, 0.75); }
.hero .hero-details span { background: rgba(90, 8, 44, 0.5); backdrop-filter: blur(6px); }
.hero-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.eyebrow {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; margin-bottom: 12px; color: #fff; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.08; margin-bottom: 18px; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.2; }
h3 { font-size: 1.2rem; }
/* Kept for the hero headline accent; on the pink field a warm cream reads far
   better than the old metallic gradient did on black. */
.gold-text { color: var(--gold-light); }
.rose-text { color: var(--pink-soft); }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 620px; }
p { color: var(--muted); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.btn-sm { padding: 10px 20px; font-size: 0.82rem; }
.btn-block { width: 100%; margin-top: 18px; }
/* Gold on pink: the one place the trim colour carries a whole element, and the
   pairing the client's logo already sets up. */
.btn-primary { background: var(--gold-sheen); color: #2b1c05; box-shadow: 0 14px 32px rgba(90, 6, 40, 0.35); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
}
.btn-whatsapp { background: #25d366; color: #05310f; box-shadow: 0 14px 32px rgba(6, 70, 26, 0.3); }
.btn-whatsapp svg { flex: none; }
.btn-ghost { background: transparent; color: var(--pink-mid); border: 1.5px solid rgba(216, 27, 96, 0.35); }

/* ---------- Loader ---------- */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px;
  background:
    radial-gradient(700px 460px at 50% 42%, rgba(255, 107, 168, 0.7), transparent 65%),
    linear-gradient(180deg, #d81b60, #ad1457);
  color: #fff;
}
.loader-shell { display: flex; gap: 10px; }
.loader-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: bounce 0.8s ease-in-out infinite; }
.loader-dot:nth-child(2) { background: #fff; animation-delay: 0.12s; }
.loader-dot:nth-child(3) { background: var(--pink-soft); animation-delay: 0.24s; }
.page-loader p { margin: 0; font-size: 0.74rem; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.3em; text-transform: uppercase; }
.loader-logo { width: 118px; height: 118px; animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 30px rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 0 0 2px var(--gold-light), 0 0 70px rgba(255, 255, 255, 0.6); }
}

/* ---------- Surfaces ----------
   Everything below is a white island on the pink field. The colour switch is
   handled once, here, so a new card only has to carry one of these classes. */
.hero-card, .panel, .card, .price-card, .booking-form, .testimonial-card,
.product-demo-card, .partners-panel, .stat-card, .category-card, .cart-drawer {
  background: var(--surface);
  border: 1px solid var(--border-ink);
  border-radius: 22px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.hero-card h1, .hero-card h2, .hero-card h3,
.panel h1, .panel h2, .panel h3,
.card h1, .card h2, .card h3,
.booking-form h3, .testimonial-card h3,
.product-demo-card h3, .partners-panel h3,
.category-card h3, .cart-drawer h3 { color: var(--ink); }
.panel p, .card p, .booking-form p, .testimonial-card p,
.product-demo-card p, .partners-panel p, .category-card p, .cart-drawer p,
.panel li, .card li, .product-demo-card li { color: var(--ink-muted); }
/* The eyebrow is white by default because it normally sits on the pink; inside
   a card it has to come back to the brand pink to stay visible. */
.panel .eyebrow, .card .eyebrow, .product-demo-card .eyebrow { color: var(--pink-mid); }

/* Sits over photography, so it keeps a touch of translucency. */
.hero-card { padding: 28px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); }
.hero-card ul, .panel ul, .price-card ul { padding-left: 18px; color: var(--ink-muted); margin-bottom: 0; }
.hero-card li, .panel li { margin-bottom: 8px; }
.hero-card li::marker, .panel li::marker { color: var(--pink); }
.pill {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 18px;
  background: var(--pink-sheen);
  color: #fff;
  box-shadow: 0 10px 24px rgba(216, 27, 96, 0.32);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
}
/* Fluid gutters and rhythm, so the sections breathe on desktop and tighten on
   phones without needing a breakpoint for each step. */
.section { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 84px) clamp(18px, 4vw, 24px); }
.section-divider { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 24px); }
.section-divider span { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), var(--gold), rgba(255, 255, 255, 0.3), transparent); }
.intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: start; }
.intro-panels { display: grid; gap: 20px; }
.panel { padding: 28px; }
.section-heading { margin-bottom: 28px; max-width: 720px; }

/* Title left, "view more" right — the reference site's section header. */
.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.section-bar h2 { margin-bottom: 0; }
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: #fff;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
  transition: gap 0.22s ease, color 0.22s ease;
}
.section-link span { font-size: 1.15rem; line-height: 1; }

/* `min(...)` lets the track shrink below its ideal width on phones narrower
   than the minimum, instead of overflowing the screen. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.card { overflow: hidden; }
.card img { height: 230px; width: 100%; object-fit: cover; }
.card-body, .product-card { padding: 24px; }
.hero-details { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; font-size: 0.88rem; color: #fff; }
.hero-details span { border: 1px solid rgba(255, 255, 255, 0.4); padding: 9px 16px; border-radius: 999px; }
/* Product cards carry their own .card-body, so the outer shell stays flush. */
.products-grid .product-card { min-height: 220px; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.product-card > span, .card-body > span:first-child {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink-mid);
  font-weight: 700;
}
.product-meta { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-ink); color: var(--ink-muted); font-size: 0.92rem; }
.product-meta div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-meta strong { color: var(--ink); font-weight: 600; }
/* The stock photography is portrait, and the product sits in the middle band
   of the frame, so a taller crop than the default card image keeps it whole. */
.products-grid .product-card img { height: 320px; object-position: center; }

/* ---------- Colour swatches ---------- */
.swatch-block { margin-top: 16px; }
.swatch-label { margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-muted); }
.swatch-label strong { color: var(--ink); font-weight: 600; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  /* An inset hairline instead of a border, so pale chips still read as chips
     without the ring eating into the colour. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active {
  transform: scale(1.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px #fff, 0 0 0 4px var(--pink-mid);
}
.swatch:focus-visible { outline: 2px solid var(--pink-mid); outline-offset: 3px; }

/* ---------- Placeholder tile ---------- */
/* Stands in for a category we have not photographed. Deliberately branded
   rather than a stock photo, so an empty slot never implies we own the shot. */
.product-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 320px;
  background: linear-gradient(160deg, #fff2f7 0%, #ffe1ee 55%, #ffd0e4 100%);
}
.product-placeholder-mark {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #000 url('/logo-mark.jpg') center / cover no-repeat;
  box-shadow: 0 0 0 1.5px var(--gold), 0 10px 26px rgba(80, 6, 38, 0.28);
}
.product-placeholder-note {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pink-deep);
}
/* The carousel's media box is shorter than a catalog card's. */
.category-media .product-placeholder { height: 210px; gap: 10px; }
.category-media .product-placeholder-mark { width: 54px; height: 54px; }

/* ---------- Rental category carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(300px, 82%), 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Room for the cards' shadow and hover lift, which a flush box would clip. */
  padding: 6px 4px 22px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
@media (min-width: 921px) {
  .carousel-track { grid-auto-columns: calc((100% - 44px) / 3); }
}
.category-card { scroll-snap-align: start; overflow: hidden; display: flex; flex-direction: column; }
.category-media { position: relative; }
.category-media img { width: 100%; height: 210px; object-fit: cover; }
.category-tag {
  position: absolute;
  left: 16px; bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pink-sheen);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.category-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.category-body h3 { margin-bottom: 8px; }
.category-body p { font-size: 0.94rem; flex: 1; }
.category-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--pink-mid);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
  transition: gap 0.22s ease;
}
.carousel-controls { display: flex; justify-content: flex-end; gap: 10px; }
.carousel-arrow {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease;
}
.carousel-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.gallery-tile {
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  /* The reference site's notched corners: top-left and bottom-right clipped. */
  clip-path: polygon(0 7%, 7% 0, 100% 0, 100% 93%, 93% 100%, 0 100%);
  box-shadow: var(--shadow);
}
.gallery-tile img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ---------- Walkthrough videos ---------- */
/* Wider minimum than the gallery: the clips are 9:16, so three across on a
   desktop already gives a tall card, and any narrower reads as a sliver. */
.walkthrough-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.walkthrough {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
}
.walkthrough-media {
  width: 100%;
  /* Phone footage, so the frame is portrait. Holding the ratio stops the
     card from jumping height when the poster loads. */
  aspect-ratio: 9 / 16;
  max-height: 620px;
  object-fit: cover;
  background: #1a0511;
  display: block;
}
/* The caption sits on white inside a section whose text is white, so it has
   to set its own colour rather than inherit the page's. */
.walkthrough figcaption { padding: 18px 20px 22px; background: #fff; color: var(--ink); }
.walkthrough figcaption h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--ink); }
.walkthrough figcaption p { margin: 0; color: var(--ink-muted); font-size: 0.94rem; }

/* ---------- Floating action buttons ---------- */
.fab-stack {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  position: relative;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(60, 4, 28, 0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fab-whatsapp { background: #25d366; color: #05310f; }
.fab-cart { background: #fff; color: var(--pink-mid); }
.fab-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--pink-mid);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px #fff;
}

/* ---------- Rental request basket ---------- */
.cart-layer { position: fixed; inset: 0; z-index: 100; }
.cart-backdrop { position: absolute; inset: 0; background: rgba(60, 4, 28, 0.5); backdrop-filter: blur(3px); animation: fadeIn 0.2s ease both; }
.cart-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  border-radius: 22px 0 0 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  animation: slideIn 0.28s ease both;
}
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-head h3 { margin-bottom: 0; }
.cart-close {
  width: 40px; height: 40px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.cart-empty { display: grid; gap: 16px; justify-items: start; padding: 24px 0; }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-ink);
  border-radius: 16px;
  background: var(--surface-2);
}
.cart-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-item-copy strong { color: var(--ink); font-size: 0.95rem; }
.cart-item-copy span { color: var(--ink-faint); font-size: 0.82rem; }
.cart-qty { display: flex; align-items: center; gap: 4px; flex: none; }
.cart-qty button {
  width: 32px; height: 32px;
  border: 1px solid var(--border-ink);
  border-radius: 50%;
  background: #fff;
  color: var(--pink-mid);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.cart-qty span { min-width: 22px; text-align: center; font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.cart-remove {
  flex: none;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.cart-remove:hover { color: var(--pink-mid); background: rgba(255, 61, 139, 0.1); }
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-ink);
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.cart-total strong { color: var(--ink); font-size: 1.1rem; }
.cart-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.cart-confirm { padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid rgba(216, 27, 96, 0.2); }
.cart-confirm p { margin-bottom: 12px; color: var(--ink); font-weight: 600; }
.cart-confirm-actions { display: flex; gap: 10px; }
.cart-note { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 0; }

/* ---------- Testimonials & partners ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; margin-top: 20px; }
.testimonial-card { padding: 32px; position: relative; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 6px; right: 26px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 61, 139, 0.28);
}
.testimonial-quote { font-size: 1rem; color: var(--ink-muted); line-height: 1.85; margin-bottom: 24px; }
.testimonial-author { display: flex; flex-direction: column; gap: 3px; }
.testimonial-author strong { font-size: 1rem; color: var(--ink); font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0.02em; }
.testimonial-author span { color: var(--ink-faint); font-size: 0.86rem; }
.partners-panel { margin-top: 30px; padding: 28px; }
.partner-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.partner-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

/* ---------- About us ---------- */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.about-story .panel p:last-child { margin-bottom: 0; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
  margin-top: 26px;
}
.stat-card { padding: 22px; border-radius: 18px; text-align: center; }
.stat-card strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  color: var(--pink-mid);
}
.stat-card span { display: block; margin-top: 6px; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--ink-muted); }

/* ---------- CEO ---------- */
/* Portrait column is fixed so the copy keeps a comfortable measure; both
   collapse to one column on tablets and down. */
.ceo-layout { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: start; }
.ceo-portrait {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}
.ceo-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ceo-portrait-fallback {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(255, 255, 255, 0.1);
}
.ceo-portrait-fallback span {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ceo-name { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 4px; }
.ceo-role {
  margin-bottom: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.ceo-quote {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.6;
  color: #fff;
}
.ceo-focus h4 {
  margin: 0 0 10px;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
}
.ceo-focus ul { margin: 0; padding-left: 18px; color: var(--muted); }
.ceo-focus li { margin-bottom: 6px; }
.ceo-focus li::marker { color: #fff; }
.ceo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Product demo ---------- */
.product-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; margin-top: 24px; }
.product-demo-card { padding: 28px; }
.demo-list { display: grid; gap: 12px; margin-top: 18px; }
.demo-item { padding: 16px 18px; border: 1px solid var(--border-ink); border-radius: 14px; background: var(--surface-2); transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; }
.demo-item strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.demo-item span { color: var(--ink-muted); font-size: 0.93rem; }

/* ---------- Booking / contact ---------- */
.booking-section { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 32px; align-items: start; }
.booking-form { padding: 28px; display: grid; gap: 14px; }
.contact-info { display: flex; flex-direction: column; gap: 10px; color: var(--muted); margin-top: 24px; }
/* The address runs to two lines on most widths, so the dot aligns to the first
   line rather than floating in the middle of the block. */
.contact-info span { display: flex; align-items: flex-start; gap: 10px; }
.contact-info span::before { content: ''; width: 5px; height: 5px; margin-top: 0.62em; border-radius: 50%; background: var(--gold); flex: none; }
.contact-info a { transition: color 0.2s ease; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.contact-info a:hover { color: var(--gold-light); }
.success { color: var(--pink-mid); font-weight: 600; }
input, textarea {
  width: 100%;
  border: 1px solid var(--border-ink);
  border-radius: 14px;
  padding: 13px 16px;
  font: inherit;
  background: var(--surface-2);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, 0.22); }
.field-label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
/* The input must not inherit the label's small uppercase treatment. */
.field-label input { font-size: 0.95rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); }
/* iOS Safari zooms the page whenever a focused field is under 16px, which
   leaves the visitor scrolled sideways mid-form. 1rem is exactly 16px. */
@media (max-width: 820px) {
  input, textarea, .field-label input { font-size: 1rem; }
}

/* ---------- Footer ---------- */
/* The deepest pink on the page, so the field resolves rather than stopping. */
.footer { margin-top: 40px; background: linear-gradient(180deg, rgba(125, 15, 61, 0.65), var(--pink-darkest)); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* The wordmark can carry the gold here: on the deep plum it reads clearly, and
   it matches the logo disc sitting beside it. */
.footer .brand-name {
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer .brand-sub { color: rgba(255, 255, 255, 0.6); }
.footer h4 { margin: 0 0 14px; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; }
.footer-links { display: flex; flex-direction: column; gap: 9px; color: var(--muted); font-size: 0.93rem; }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: 1180px; margin: 0 auto;
  padding: 18px 24px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.6); font-size: 0.83rem;
}

/* ---------- Motion ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.topbar, .hero, .hero-card, .panel, .card, .product-demo-card, .booking-form, .demo-item, .partners-panel { animation: fadeUp 0.7s ease both; }
.topbar { animation-delay: 0.08s; }
.hero { animation-delay: 0.12s; }
.hero-card, .panel, .card, .product-demo-card, .booking-form { animation-delay: 0.18s; }
.demo-item { animation-delay: 0.22s; }

.card, .hero-card, .panel, .product-demo-card, .booking-form, .partners-panel, .category-card {
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}
/* Touch devices latch :hover after a tap and leave a card stuck in its lifted
   state, so the lift is limited to real pointers. */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .hero-card:hover, .panel:hover, .product-demo-card:hover, .partners-panel:hover, .category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
  .demo-item:hover { transform: translateY(-3px); border-color: rgba(216, 27, 96, 0.3); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(90, 6, 40, 0.45); }
  .btn-secondary:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.28); }
  .btn-whatsapp:hover { transform: translateY(-2px); background: #1fbe5b; }
  .btn-ghost:hover { background: rgba(255, 61, 139, 0.1); }
  .slider-arrow:hover { background: rgba(90, 8, 44, 0.7); transform: translateY(-2px); }
  .carousel-arrow:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
  .nav-links a.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(216, 27, 96, 0.5); color: #fff; }
  .section-link:hover { gap: 12px; color: var(--gold-light); }
  .category-link:hover { gap: 11px; }
  .gallery-tile:hover img { transform: scale(1.06); }
  .fab:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(60, 4, 28, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Tablet: the nav still fits on one line, but the gutters need to come in. */
@media (max-width: 1080px) {
  .topbar { margin-left: 18px; margin-right: 18px; }
  .topbar-inline { margin-left: 18px; margin-right: 18px; }
  .nav-links { gap: 18px; }
}

/* Below this the six inline links no longer fit beside the brand lockup, so
   the nav collapses to a single icon button and opens as a drawer. */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer.is-open { display: grid; }
}

@media (max-width: 920px) {
  .hero-content, .intro, .booking-section, .product-demo { grid-template-columns: 1fr; }
  .hero { min-height: 78vh; min-height: 78svh; padding: 56px 20px 104px; }
  .hero-scrim {
    background:
      linear-gradient(180deg, transparent 0%, transparent 28%, rgba(90, 8, 44, 0.6) 56%, rgba(90, 8, 44, 0.92) 86%, rgba(90, 8, 44, 0.96) 100%),
      linear-gradient(200deg, rgba(255, 61, 139, 0.24) 40%, rgba(216, 27, 96, 0.4) 100%);
  }
  .hero-slider-controls { justify-content: center; padding: 0 20px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .testimonial-card { padding: 26px; min-height: 0; }
  .panel, .hero-card, .product-demo-card, .booking-form, .partners-panel { padding: 24px; }
  .about-story { grid-template-columns: 1fr; }
  /* The portrait leads on a narrow screen, capped so it does not fill the
     whole first scroll of the section. */
  .ceo-layout { grid-template-columns: 1fr; gap: 26px; }
  .ceo-portrait { max-width: 300px; }
}

@media (max-width: 680px) {
  .hero { padding: 40px 16px 88px; }
  /* Kept at 44px: below that the arrows are hard to hit with a thumb. */
  .slider-arrow { width: 44px; height: 44px; font-size: 1.25rem; }
  .slider-dot { width: 24px; }
  .slider-dot.is-active { width: 40px; }
  .hero-slider-controls { bottom: 26px; padding: 0 16px; gap: 12px; }
  .topbar { border-radius: 26px; padding: 10px 10px 10px 14px; gap: 12px; }
  .brand { flex: none; }
  .hero-copy h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .card img { height: 200px; }
  .gallery-tile img { height: 220px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 18px 14px; }
  /* A full-width 4:5 portrait would push the bio most of a screen down, so it
     is centred and capped instead. */
  .ceo-portrait { max-width: 250px; margin-left: auto; margin-right: auto; }
  .ceo-quote { margin: 18px 0; padding-left: 16px; }
  .ceo-actions .btn { flex: 1 1 auto; text-align: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  /* Full-height sheet rather than a floating panel, so the basket does not
     leave an unusable sliver of page beside it. */
  .cart-drawer { width: 100%; border-radius: 0; }
  .section-bar { align-items: flex-start; }
  /* The floating buttons live in the bottom-right corner, which is exactly
     where the right-aligned arrows land once this section scrolls into view.
     Moving them to the left keeps both tappable. */
  .carousel-controls { justify-content: flex-start; }
}

/* Phones: the brand lockup is the first thing to give up space, since every
   pixel the wordmark returns is a pixel of nav the visitor can see. */
@media (max-width: 480px) {
  .logo-mark-sm { width: 36px; height: 36px; }
  .brand-name { font-size: 0.84rem; letter-spacing: 0.08em; }
  .brand { gap: 8px; }
  .hero-details { gap: 8px; font-size: 0.82rem; }
  .hero-details span { padding: 7px 13px; }
  .hero-actions { gap: 10px; }
  .btn { padding: 13px 22px; }
  /* The WhatsApp label is the longest button on the page; let it take the row
     rather than wrapping mid-phrase beside the catalog button. */
  .hero-actions .btn { flex: 1 1 100%; }
  .testimonial-card, .panel, .hero-card, .product-demo-card, .booking-form { padding: 20px; }
  .card-body, .product-card { padding: 20px; }
  .fab { width: 52px; height: 52px; }
}

/* The tagline is the last thing worth dropping, and only once it would crowd
   the wordmark off its line. */
@media (max-width: 400px) {
  .brand-sub { display: none; }
}

/* Phones held sideways have almost no height; let the banner size to its copy
   instead of reserving most of the screen for the slide. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 44px 20px 76px; }
  .hero-slider-controls { bottom: 18px; }
}