/* ==========================================================================
   LLumar Bahrain - Ebrahim K. Kanoo
   Design system  ·  2026 refresh
   Brand: LLumar Red / Charcoal / White  ·  Type: Inter
   ========================================================================== */

:root {
  /* Brand */
  --ll-red:        #dc2233;
  --ll-red-600:    #c31728;
  --ll-red-700:    #a8121f;
  --ll-maroon:     #540606;

  /* Neutrals */
  --ll-ink:        #121216;
  --ll-ink-2:      #1c1c22;
  --ll-charcoal:   #4d4d4f;
  --ll-gray:       #727272;
  --ll-gray-300:   #d8dade;
  --ll-mist:       #f4f5f7;
  --ll-white:      #ffffff;

  /* System */
  --radius:        18px;
  --radius-lg:     26px;
  --radius-pill:   100px;
  --shadow-sm:     0 2px 10px rgba(18,18,22,.06);
  --shadow:        0 14px 40px rgba(18,18,22,.09);
  --shadow-lg:     0 30px 70px rgba(18,18,22,.16);
  --ease:          cubic-bezier(.22,.61,.36,1);
  --nav-h:         78px;
  --container:     1200px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  /* 'clip' rather than 'hidden': hidden turns the element into a scroll
     container, which breaks the sticky navbar. This is only a backstop -
     the layout itself must not overflow. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ll-charcoal);
  background: var(--ll-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5 {
  font-weight: 800;
  color: var(--ll-ink);
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance; /* ignored by older browsers - purely a refinement */
}

a { color: var(--ll-red); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--ll-red-700); }
img { max-width: 100%; height: auto; }

/* Bootstrap's .container pads 12px a side (--bs-gutter-x: 1.5rem), but the
   hero, process and footer rows use .g-5, which sets a 3rem gutter and so
   gives those rows -24px side margins. The surplus 12px escapes the
   container, widening the document and making mobile browsers zoom out to
   fit. Matching the container gutter to the largest row gutter in use keeps
   every row inside the viewport and aligns all content to one 24px inset. */
.container { max-width: var(--container); --bs-gutter-x: 3rem; }

::selection { background: var(--ll-red); color: #fff; }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--ll-red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Section rhythm ---------- */
.section { padding: 96px 0; position: relative; }
.section--tight { padding: 72px 0; }
.section--mist { background: var(--ll-mist); }
.section--ink { background: var(--ll-ink); color: rgba(255,255,255,.72); }
.section--ink h2, .section--ink h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ll-red);
  background: rgba(220,34,51,.08);
  border: 1px solid rgba(220,34,51,.18);
  padding: .4rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
}
.section--ink .eyebrow,
.hero .eyebrow {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.eyebrow i { color: var(--ll-red); }
.hero .eyebrow i, .section--ink .eyebrow i { color: #ff6b78; }

.section-title { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: .5rem; }
.section-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ll-gray);
  max-width: 62ch;
  margin: 0 auto;
}
.text-start .section-lead { margin-left: 0; }

.rule {
  width: 62px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ll-red), var(--ll-maroon));
  margin: 1.1rem auto 1.9rem;
}
.rule--start { margin-left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: .9rem 1.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
  white-space: nowrap;
}
.btn i { transition: transform .28s var(--ease); }
.btn:hover i { transform: translateX(4px); }

.btn-primary,
.btn-primary:focus {
  background: var(--ll-red); border-color: var(--ll-red); color: #fff;
  box-shadow: 0 10px 26px rgba(220,34,51,.32);
}
.btn-primary:hover {
  background: var(--ll-red-700); border-color: var(--ll-red-700); color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(220,34,51,.42);
}

.btn-outline-light-ll {
  background: transparent; border-color: rgba(255,255,255,.45); color: #fff;
}
.btn-outline-light-ll:hover {
  background: #fff; border-color: #fff; color: var(--ll-ink); transform: translateY(-3px);
}

.btn-ghost {
  background: transparent; border-color: var(--ll-gray-300); color: var(--ll-ink);
}
.btn-ghost:hover { border-color: var(--ll-ink); color: var(--ll-ink); transform: translateY(-3px); }

.btn-sm { padding: .62rem 1.3rem; font-size: .875rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .92rem; color: var(--ll-red);
}
.link-arrow i { transition: transform .28s var(--ease); }
.link-arrow:hover i { transform: translateX(5px); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ll-ink);
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  padding: .5rem 0;
}
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: #fff; }
.topbar .sep { color: rgba(255,255,255,.2); margin: 0 .85rem; }
.topbar i { color: var(--ll-red); margin-right: .4rem; }
.topbar .social a { margin-left: .85rem; font-size: .95rem; }
.topbar .social a i { color: rgba(255,255,255,.82); margin: 0; transition: color .25s var(--ease); }
.topbar .social a:hover i { color: var(--ll-red); }

/* ---------- Navbar ---------- */
.navbar-ll {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(18,18,22,.07);
  min-height: var(--nav-h);
  padding: .5rem 0;
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.navbar-ll.is-stuck { box-shadow: 0 6px 26px rgba(18,18,22,.09); }
.navbar-ll .navbar-brand img { width: 172px; transition: transform .3s var(--ease); }
.navbar-ll .navbar-brand:hover img { transform: scale(1.04); }

.navbar-ll .nav-link {
  position: relative;
  color: var(--ll-ink) !important;
  font-weight: 600;
  font-size: .94rem;
  padding: .55rem .95rem !important;
  transition: color .25s var(--ease);
}
.navbar-ll .nav-link::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--ll-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.navbar-ll .nav-link:hover, .navbar-ll .nav-link.active { color: var(--ll-red) !important; }
.navbar-ll .nav-link:hover::after, .navbar-ll .nav-link.active::after { transform: scaleX(1); }

.navbar-ll .navbar-toggler {
  border: 1px solid var(--ll-gray-300); border-radius: 12px; padding: .45rem .6rem;
}
.navbar-ll .navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .navbar-ll .navbar-collapse {
    padding: 1rem .25rem 1.25rem;
    margin-top: .6rem;
    border-top: 1px solid rgba(18,18,22,.08);
  }
  .navbar-ll .nav-link::after { display: none; }
  .navbar-ll .btn { width: 100%; margin-top: .5rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ll-ink);
  color: rgba(255,255,255,.76);
  padding: 108px 0 96px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before,
.hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.hero::before {
  width: 720px; height: 720px; top: -280px; right: -200px;
  background: radial-gradient(circle, rgba(220,34,51,.38) 0%, rgba(220,34,51,.10) 45%, transparent 70%);
  animation: floatGlow 12s ease-in-out infinite;
}
.hero::after {
  width: 540px; height: 540px; bottom: -260px; left: -180px;
  background: radial-gradient(circle, rgba(84,6,6,.55) 0%, transparent 70%);
  animation: floatGlow 15s ease-in-out infinite reverse;
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}
@keyframes floatGlow {
  0%, 100% { transform: scale(1) translateY(0); opacity: .95; }
  50%      { transform: scale(1.14) translateY(22px); opacity: 1; }
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5.2vw, 4.15rem);
  letter-spacing: -.035em;
  margin-bottom: 1.1rem;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--ll-red) 0%, #ff7a86 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,.72);
  max-width: 54ch;
  margin-bottom: 2.1rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Hero visual */
.hero-visual { position: relative; }
.hero-visual .frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.12);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform .7s var(--ease);
}
.hero-visual:hover .frame { transform: perspective(1400px) rotateY(-3deg) rotateX(0deg); }
.hero-visual .frame img { display: block; width: 100%; aspect-ratio: 4/3.4; object-fit: cover; }
.hero-visual .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18,18,22,.5) 100%);
}

.badge-float {
  position: absolute;
  display: flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: .85rem 1.15rem;
  box-shadow: var(--shadow);
  animation: bob 5s ease-in-out infinite;
}
.badge-float i { font-size: 1.5rem; color: var(--ll-red); }
.badge-float .t { font-weight: 800; font-size: .96rem; color: var(--ll-ink); line-height: 1.2; }
.badge-float .s { font-size: .74rem; color: var(--ll-gray); line-height: 1.2; }
.badge-float--tl { top: 8%; left: -34px; }
.badge-float--br { bottom: 9%; right: -26px; animation-delay: 1.4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 991.98px) {
  .hero { padding: 72px 0 80px; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { margin-top: 3.2rem; }
  .hero-visual .frame { transform: none; }
  .hero-visual .frame img { aspect-ratio: 16/11; }
  .badge-float--tl { left: -10px; }
  .badge-float--br { right: -6px; }
}
@media (max-width: 575.98px) {
  .badge-float { padding: .6rem .8rem; }
  .badge-float i { font-size: 1.15rem; }
  .badge-float .t { font-size: .82rem; }
  .badge-float--tl { left: 6px; top: 5%; }
  .badge-float--br { right: 6px; bottom: 6%; }
}

/* ---------- Confirmation mark (thank-you page) ---------- */
.thanks-mark {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 1.8rem;
  font-size: 2.6rem; color: #fff;
  background: linear-gradient(135deg, var(--ll-red) 0%, var(--ll-maroon) 100%);
  box-shadow: 0 14px 34px rgba(220,34,51,.42);
  position: relative;
}
.thanks-mark::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(220,34,51,.45);
  animation: ripple 2.6s ease-out infinite;
}

/* ---------- Trust bar ----------
   An elevated panel that rides up over the bottom of the dark hero, so its
   top half sits on the dark ground and reads as a raised card. The 1px grid
   gap over a tinted background draws the dividers, which keeps them correct
   automatically however the columns reflow. */
/* The pull-up lives on the section, not the grid: a negative margin on the
   grid collapses out through .container and drags the section's background
   up with it, hiding the hero instead of overlapping it. The section is
   left transparent so the dark hero shows through behind the card. */
.trust { position: relative; z-index: 5; margin-top: -68px; }
.trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(18,18,22,.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.trust__item {
  background: var(--ll-white);
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; text-align: center;
  padding: 1.7rem .9rem;
  transition: background-color .3s var(--ease);
}
.trust__item:hover { background: var(--ll-mist); }
.trust__icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.3rem; color: var(--ll-red);
  background: rgba(220,34,51,.09);
  transition: transform .35s var(--ease), background-color .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease);
}
.trust__item:hover .trust__icon {
  background: var(--ll-red); color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(220,34,51,.32);
}
.trust__label {
  font-weight: 700; font-size: .85rem; line-height: 1.35;
  color: var(--ll-ink); letter-spacing: -.01em;
}

@media (max-width: 1199.98px) { .trust__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px)  { .trust { margin-top: -46px; } }
@media (max-width: 575.98px)  {
  .trust { margin-top: -34px; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item { padding: 1.3rem .7rem; gap: .6rem; }
  .trust__icon { width: 44px; height: 44px; font-size: 1.15rem; }
  .trust__label { font-size: .79rem; }
}

/* ---------- Product cards ---------- */
.p-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(18,18,22,.08);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.p-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: rgba(220,34,51,.28);
}
.p-card__media { position: relative; overflow: hidden; background: var(--ll-mist); }
.p-card__media img {
  display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
  transition: transform .7s var(--ease);
}
.p-card:hover .p-card__media img { transform: scale(1.07); }
.p-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,22,0) 40%, rgba(18,18,22,.45) 100%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.p-card:hover .p-card__media::after { opacity: 1; }

.p-card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.94);
  color: var(--ll-ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: var(--radius-pill);
}

.play-btn {
  position: absolute; z-index: 2; right: 16px; bottom: 16px;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ll-red); color: #fff; font-size: 1rem;
  box-shadow: 0 8px 22px rgba(220,34,51,.45);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.play-btn:hover { color: #fff; background: var(--ll-red-700); transform: scale(1.1); }
.play-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(220,34,51,.5);
  animation: ripple 2.2s ease-out infinite;
}
@keyframes ripple {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.p-card__body { padding: 1.6rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.p-card__title { font-size: 1.22rem; margin-bottom: .55rem; }
.p-card__text { font-size: .93rem; color: var(--ll-gray); margin-bottom: 1.2rem; flex: 1; }

/* Advisory card - no photo, fills the grid and carries the next action */
.p-card--cta {
  background:
    radial-gradient(circle at 100% 0%, rgba(220,34,51,.09) 0%, transparent 55%),
    var(--ll-mist);
  border-style: dashed;
  border-color: rgba(220,34,51,.3);
}
.p-card--cta .p-card__body {
  flex-direction: row; align-items: flex-start; gap: 1.6rem;
  justify-content: flex-start; padding: 2.4rem 2.2rem;
}
.p-card--cta .feature__icon { flex: 0 0 58px; margin-bottom: 0; }
.p-card--cta .p-card__text { flex: 0 1 auto; max-width: 60ch; }
@media (max-width: 575.98px) {
  .p-card--cta .p-card__body { flex-direction: column; gap: 1.2rem; padding: 2rem 1.6rem; }
}

/* ---------- Valor showcase ---------- */
.showcase {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.showcase img { display: block; width: 100%; }
.showcase__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: var(--ll-ink);
  padding: 1.5rem 2rem;
}
.showcase__bar p { margin: 0; color: rgba(255,255,255,.7); font-size: .95rem; max-width: 62ch; }
.showcase__bar strong { color: #fff; display: block; font-size: 1.1rem; margin-bottom: .2rem; letter-spacing: -.02em; }

/* ---------- Feature (why) ---------- */
.feature {
  height: 100%;
  background: #fff;
  border: 1px solid rgba(18,18,22,.08);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(220,34,51,.28); }
.feature__icon {
  width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--ll-red) 0%, var(--ll-maroon) 100%);
  box-shadow: 0 10px 24px rgba(220,34,51,.28);
  margin-bottom: 1.2rem;
}
.feature h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.feature p { font-size: .92rem; color: var(--ll-gray); margin: 0; }

/* ---------- Steps ---------- */
.step { position: relative; padding-left: 4.6rem; }
.step__n {
  position: absolute; left: 0; top: 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; color: #fff;
  background: var(--ll-red);
  box-shadow: 0 10px 24px rgba(220,34,51,.3);
}
.step h3 { font-size: 1.1rem; color: #fff; margin-bottom: .4rem; }
.step p { font-size: .93rem; color: rgba(255,255,255,.62); margin: 0; }
@media (max-width: 767.98px) { .step { padding-left: 4rem; } .step__n { width: 48px; height: 48px; font-size: 1rem; } }

/* ---------- Contact / form ---------- */
.form-card {
  background: #fff;
  border: 1px solid rgba(18,18,22,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-card__head {
  background: linear-gradient(120deg, var(--ll-maroon) 0%, var(--ll-red) 100%);
  color: #fff;
  padding: 1.6rem 2rem;
}
.form-card__head h3 { color: #fff; margin-bottom: .25rem; font-size: 1.35rem; }
.form-card__head p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.82); }
.form-card__body { padding: .5rem 1rem 1rem; }
.form-card iframe { display: block; width: 100%; border: 0; }

.contact-aside {
  background: var(--ll-ink);
  color: rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
  height: 100%;
}
.contact-aside h3 { color: #fff; font-size: 1.3rem; }
.contact-item { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-item:last-of-type { border-bottom: 0; }
.contact-item i {
  flex: 0 0 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(220,34,51,.16); color: var(--ll-red); font-size: 1.05rem;
}
.contact-item .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.45); }
.contact-item .v { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.45; }
.contact-item .v a { color: #fff; }
.contact-item .v a:hover { color: var(--ll-red); }

/* ---------- Map / location ---------- */
.map-shell {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(18,18,22,.08);
  min-height: 420px;
  background: var(--ll-mist);
}
#map_canvas { width: 100%; height: 100%; min-height: 420px; }

.location-card {
  background: #fff;
  border: 1px solid rgba(18,18,22,.08);
  border-left: 4px solid var(--ll-red);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.location-card h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.location-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.location-list li { display: flex; gap: .85rem; padding: .6rem 0; font-size: .93rem; }
.location-list li i { color: var(--ll-red); font-size: 1rem; margin-top: .18rem; }
.location-list span { display: block; font-weight: 700; color: var(--ll-ink); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .1rem; }

.info_content { font-family: "Inter", sans-serif; padding: 6px 4px; max-width: 260px; }
.info_content h3 { font-size: 1rem; color: var(--ll-maroon); margin-bottom: .5rem; }
.info_content p { font-size: .85rem; margin: .25rem 0; color: var(--ll-charcoal); }

/* ---------- Footer ---------- */
.footer {
  background: var(--ll-ink);
  color: rgba(255,255,255,.62);
  padding: 76px 0 0;
  position: relative;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ll-maroon), var(--ll-red), var(--ll-maroon));
}
/* The white logo is a JPEG with a baked-in black background (no alpha).
   'screen' blending drops that black against the dark footer while keeping
   the red LL mark intact. Browsers without blend support just show the
   original black plate, which still reads correctly on this background. */
.footer__logo {
  width: 178px;
  height: auto;
  margin-bottom: 1.4rem;
  mix-blend-mode: screen;
}
.footer h4 {
  color: #fff; font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1.35rem;
}
.footer p { font-size: .93rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .65rem; }
.footer-links a {
  color: rgba(255,255,255,.62); font-size: .93rem;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer-links a:hover { color: #fff; padding-left: 5px; }

.social-icons { display: flex; gap: .65rem; }
.social-icons a {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8); font-size: 1rem;
  transition: background-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.social-icons a:hover { background: var(--ll-red); color: #fff; transform: translateY(-3px); }

.footer-bottom {
  margin-top: 60px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.5rem 0;
  font-size: .86rem;
  color: rgba(255,255,255,.45);
}

/* ---------- Floating actions ---------- */
.fab-stack {
  position: fixed; right: 20px; bottom: 22px; z-index: 1030;
  display: flex; flex-direction: column; gap: .7rem;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.2rem; color: #fff; border: 0;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s var(--ease);
}
.fab:hover { transform: translateY(-4px); color: #fff; }
.fab--call { background: var(--ll-red); }
.fab--top { background: var(--ll-ink); opacity: 0; visibility: hidden; }
.fab--top.show { opacity: 1; visibility: visible; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero::before, .hero::after, .badge-float,
  .play-btn::before, .thanks-mark::before { animation: none; }
  html { scroll-behavior: auto; }
}