/* ==========================================================================
   Kaama Legal — site styles
   Custom layer on top of Tailwind (config inline in layouts/site.blade.php).
   Holds what utilities can't express cleanly: the fluid root size, the reveal
   animations, nav underline and dropdowns, FAQ accordion, review carousel,
   forms, tabs and the disclaimer modal.
   ========================================================================== */

:root {
  --color-primary: #212121;
  --color-secondary: #640d0d;
  --color-tertiary: #dfd7c9;
  --color-bg-light: #f2efe9;
  --color-dark-gray: #262626;
  --color-line: #ceccc9;
  --color-muted: #504f4e;
}

/* The whole layout scales with the viewport by driving the root font size off
   vw. Every rem-based Tailwind utility inherits that. */
html {
  font-size: 0.833333vw;
  scroll-behavior: smooth;
}
@media (min-width: 1960px) {
  html { font-size: 16px; }
}
@media (max-width: 991px) {
  html { font-size: 3vw; }
}
@media (max-width: 640px) {
  html { font-size: 3.6vw; }
}

/* The off-canvas drawer is parked at translateX(100%), which would otherwise
   widen the scrollable area and let the whole page scroll sideways on phones. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  font-size: 1.125rem;
  line-height: 1.7em;
  -webkit-font-smoothing: antialiased;
}

/* --- Shared building blocks ---------------------------------------------- */

.container-site {
  max-width: 109.75rem;
  width: 96%;
  margin: 0 auto;
}
.container-large {
  max-width: 116.8125rem;
  width: 97.5%;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .container-large { width: 92%; }
}

/* Heading scale */
.title-xl {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-primary);
}
.title-lg {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-primary);
}
/* site.css loads after Tailwind, so the colors above would beat text-white on dark panels. */
.dark .title-xl,
.dark .title-lg,
.title-xl.text-white,
.title-lg.text-white {
  color: #fff;
}
.title-md {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.2em;
}
@media (min-width: 1024px) {
  .title-xl { font-size: 4.875rem; }
  .title-lg { font-size: 3rem; }
  .title-md { font-size: 1.875rem; }
}

/* Eyebrow label */
.eyebrow {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.375rem;
  line-height: 1.4em;
  margin-bottom: 1.25rem;
  font-weight: 400;
}

/* The wide tracking that makes these labels work on desktop overflows a phone,
   and the flanking rules leave the text no room to shrink into. */
@media (max-width: 767px) {
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.2rem; }
  .rule-label span { margin: 0 0.75rem; }
}

/* Pill label */
.pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-tertiary);
  color: #000;
  border-radius: 6.25rem;
  min-height: 2.0625rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4em;
}
.pill-dark {
  background-color: rgba(255, 255, 255, 0.08);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  color: var(--color-bg-light);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  color: #fff;
  font-size: 0.9375rem;
  padding: 1.0625rem 1.875rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid var(--color-secondary);
  letter-spacing: 0.25rem;
  line-height: 1.2em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.btn:hover,
.btn:focus-visible {
  background-color: transparent;
  color: var(--color-secondary);
}
.dark .btn:hover,
.dark .btn:focus-visible,
#header .btn:hover,
#header .btn:focus-visible,
#mobile-menu .btn:hover,
#mobile-menu .btn:focus-visible {
  color: #fff;
  border-color: #fff;
}

/* Outline on light backgrounds */
.btn-outline {
  background-color: transparent;
  color: var(--color-secondary);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-secondary);
  color: #fff;
}

/* Outline on the dark header */
.btn-ghost {
  background-color: transparent;
  border-color: rgba(242, 239, 233, 0.6);
  color: var(--color-bg-light);
}
#header .btn-ghost:hover,
#header .btn-ghost:focus-visible,
#mobile-menu .btn-ghost:hover,
#mobile-menu .btn-ghost:focus-visible {
  background-color: var(--color-bg-light);
  border-color: var(--color-bg-light);
  color: var(--color-primary);
}

/* Cream button on maroon panels */
.btn-light {
  background-color: var(--color-bg-light);
  border-color: var(--color-bg-light);
  color: var(--color-secondary);
}
.dark .btn-light:hover,
.dark .btn-light:focus-visible {
  background-color: transparent;
  border-color: var(--color-bg-light);
  color: var(--color-bg-light);
}

.link-underline:hover,
.link-underline:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Check list (highlights, services) */
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.45em;
  width: 0.45rem;
  height: 0.8rem;
  border-right: 0.125rem solid var(--color-secondary);
  border-bottom: 0.125rem solid var(--color-secondary);
  transform: rotate(45deg);
}
.dark .check-list li::before { border-color: var(--color-tertiary); }
.check-list-lg li {
  padding: 1rem 0 1rem 2.5rem;
  margin: 0;
  border-bottom: 0.0625rem solid var(--color-line);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.375rem;
  line-height: 1.3em;
}
.check-list-lg li:last-child { border-bottom: 0; }
.check-list-lg li::before { top: 1.3rem; }

/* --- Header / navigation -------------------------------------------------- */

#header .bg-gradient-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  opacity: 0.72;
}

.main-menu > li > a {
  position: relative;
  display: block;
  padding: 5px 0;
  color: #f2efe9;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}
.main-menu > li > a::after {
  content: '';
  display: block;
  width: 100%;
  height: 0.125rem;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: 0% 100%;
  transition: transform 0.35s ease-in-out;
}
.main-menu > li > a:hover::after,
.main-menu > li > a:focus-visible::after,
.main-menu > li.current > a::after {
  transform: scaleX(1);
}

.main-menu li.has-children > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 20rem;
  max-height: 70vh;
  overflow-y: auto;
  background-color: var(--color-dark-gray);
  border-radius: 0.5rem;
  padding: 1rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: all 0.3s ease;
  z-index: 40;
}
/* Dropdowns in the right half open leftwards so they stay on screen. */
.main-menu-right li.has-children > ul {
  left: auto;
  right: 0;
}
.main-menu li.has-children:hover > ul,
.main-menu li.has-children:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-menu li.has-children > ul li a {
  display: block;
  padding: 0.5rem 1.5rem;
  color: #f2efe9;
  font-size: 1rem;
  text-decoration: none;
}
.main-menu li.has-children > ul li a:hover,
.main-menu li.has-children > ul li a:focus-visible {
  color: var(--color-tertiary);
}

.phone-btn svg {
  transform: rotate(0);
  transition: transform 0.5s ease;
}
.phone-btn:hover svg,
.phone-btn:focus-visible svg {
  transform: rotate(-90deg);
}

/* Mobile drawer */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s ease;
}
#mobile-menu.open {
  transform: translateX(0);
}

/* --- Section helpers ------------------------------------------------------ */

.rule-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rem;
}
.rule-label::before,
.rule-label::after {
  content: '';
  display: block;
  background-color: var(--color-line);
  height: 0.0625rem;
  width: 100%;
}
.rule-label span {
  display: block;
  flex: 1 0 auto;
  margin: 0 1.75rem;
}

/* --- Cards ---------------------------------------------------------------- */

.area-card img,
.area-card .initials {
  border-radius: 0.5rem;
  height: 28.4375rem;
  width: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.area-card .initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--color-dark-gray), var(--color-secondary));
  color: var(--color-tertiary);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 7rem;
  letter-spacing: 0.5rem;
}
.area-card a:hover img { opacity: 0.85; }
.area-card img { transition: opacity 0.4s ease; }
.area-card a:hover .i-arrow {
  background-color: var(--color-secondary);
  color: #fff;
}

/* Advocate cards (About → team): lift on hover; monogram tile when there is no photo */
.team-card {
  box-shadow: 0 1px 2px rgba(33, 33, 33, 0.04);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.team-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 2rem 3.5rem -2rem rgba(33, 33, 33, 0.35);
}
.team-monogram {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(223, 215, 201, 0.12), transparent 60%),
    linear-gradient(160deg, var(--color-dark-gray) 10%, var(--color-secondary));
}
/* Client logos: soft tiles, greyscale until hovered; endless marquee with faded edges */
.client-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13rem;
  height: 7rem;
  padding: 1.5rem 2rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.55);
  border: 0.0625rem solid rgba(33, 33, 33, 0.06);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.client-logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.client-logo img {
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.client-logo:hover {
  background: #fff;
  border-color: rgba(33, 33, 33, 0.1);
  box-shadow: 0 1.25rem 2.5rem -1.75rem rgba(33, 33, 33, 0.35);
}
.client-logo:hover img { filter: none; opacity: 1; }

.clients-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.clients-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: 0.75rem 0 2rem;
  animation: clients-scroll 40s linear infinite;
}
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track { animation-play-state: paused; }
/* the list is rendered twice, so sliding by half (plus half a gap) lands exactly on the copy */
@keyframes clients-scroll {
  to { transform: translateX(calc(-50% - 0.75rem)); }
}
@media (max-width: 640px) {
  .client-logo { width: 10rem; height: 5.5rem; padding: 1rem 1.5rem; }
  .client-logo img { max-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-marquee { -webkit-mask-image: none; mask-image: none; }
  .clients-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .clients-track [aria-hidden="true"] { display: none; }
}

/* Home CTA banner: slow drift on the photo, dark-to-maroon wash for legible text */
.banner-wash {
  background:
    linear-gradient(100deg, rgba(38, 38, 38, 0.96) 0%, rgba(38, 38, 38, 0.82) 45%, rgba(100, 13, 13, 0.62) 100%),
    radial-gradient(90% 120% at 100% 100%, rgba(100, 13, 13, 0.55), transparent 60%);
}
.banner-media {
  transform: scale(1.06);
  transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animate.active .banner-media { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .banner-media { transform: none; transition: none; }
}

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

/* --- Carousel (client reviews) -------------------------------------------- */

.carousel-track {
  display: flex;
  gap: 6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 1rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 0.125rem solid var(--color-secondary); outline-offset: 0.5rem; }

.carousel-item {
  flex: 0 0 calc((100% - 12rem) / 3);
  scroll-snap-align: start;
}
@media (max-width: 1099px) {
  .carousel-track { gap: 3rem; }
  .carousel-item { flex-basis: calc((100% - 3rem) / 2); }
}
@media (max-width: 767px) {
  .carousel-track { gap: 2rem; }
  .carousel-item { flex-basis: 100%; }
}

.carousel-arrow {
  width: 3.625rem;
  height: 3.625rem;
  flex: none;
  border-radius: 100%;
  background-color: #fff;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}
.carousel-arrow svg { width: 0.875rem; height: 0.875rem; }
.carousel-arrow:hover:not(:disabled),
.carousel-arrow:focus-visible:not(:disabled) { background-color: var(--color-secondary); color: #fff; }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 2.5rem;
}
.carousel-dots button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: #ceccc9;
  transition: background-color 0.3s ease;
}
.carousel-dots button[aria-current='true'] { background-color: var(--color-secondary); }
/* arrows + dots are hidden by main.js when every item already fits */
[data-carousel-controls][hidden] { display: none; }

/* --- Testimonials --------------------------------------------------------- */

/* Client reviews: editorial pull-quote, one review per slide, on a sand band with hairline rules */
.testimonial-section {
  background: linear-gradient(180deg, #ebe4d8, #e6dfd2);
  border-top: 0.0625rem solid rgba(33, 33, 33, 0.08);
  border-bottom: 0.0625rem solid rgba(33, 33, 33, 0.08);
}
.testimonial-section .carousel-track { gap: 2rem; padding: 0; }
.testimonial-section .carousel-item { flex-basis: 100%; }
.quote-ornament {
  display: block;
  height: 7rem;
  margin-bottom: -0.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13rem;
  line-height: 1;
  color: var(--color-secondary);
  user-select: none;
}
/* every quote box is exactly four lines tall; longer quotes are cut there with "Read more" */
.testimonial-item .desc {
  --quote-lh: 1.4em;
  line-height: var(--quote-lh);
  height: calc(var(--quote-lh) * 4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .testimonial-item .desc { --quote-lh: 1.35em; }
}
/* collapsed: paragraphs run on as one block so the four-line count is exact */
.testimonial-item:not(.more) .desc p { display: inline; margin: 0; }
.testimonial-item:not(.more) .desc p + p::before { content: ' '; }
.testimonial-item.more .desc {
  display: block;
  height: auto;
  -webkit-line-clamp: unset;
}
.testimonial-section .carousel-arrow {
  background: transparent;
  border: 0.09375rem solid var(--color-secondary);
  color: var(--color-secondary);
}
.testimonial-section .carousel-arrow svg { stroke-width: 2; }
.testimonial-section .carousel-arrow:disabled { opacity: 0.4; }
.review-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}
.review-arrow-prev { left: 0; }
.review-arrow-next { right: 0; }
@media (min-width: 1024px) {
  /* frame the quote (max 56rem wide) rather than the page edges */
  .review-arrow-prev { left: max(0rem, calc(50% - 34rem)); }
  .review-arrow-next { right: max(0rem, calc(50% - 34rem)); }
}
/* keep the quote clear of the side arrows */
.testimonial-section .carousel-item { padding-inline: 5rem; }
.testimonial-section .carousel-arrow:hover:not(:disabled),
.testimonial-section .carousel-arrow:focus-visible:not(:disabled) { background-color: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
@media (max-width: 767px) {
  /* phones: the arrows sit side by side, centred under the quote */
  .testimonial-section .carousel { padding-bottom: 5.5rem; }
  .review-arrow { top: auto; bottom: 0; transform: none; }
  .review-arrow-prev { left: calc(50% - 4.25rem); }
  .review-arrow-next { right: calc(50% - 4.25rem); }
  .testimonial-section .carousel-item { padding-inline: 0; }
  .quote-ornament { font-size: 9rem; height: 5rem; margin-bottom: -0.25rem; }
}
.review-toggle:hover { text-decoration: underline; text-underline-offset: 0.25rem; }

/* --- FAQs ----------------------------------------------------------------- */

.faq-grid {
  column-count: 2;
  column-gap: 1.5rem;
}
@media (max-width: 991px) {
  .faq-grid { column-count: 1; }
}
.faq-item {
  border: 0.0625rem solid rgba(206, 204, 201, 0.2);
  border-radius: 0.625rem;
  margin-bottom: 1.5rem;
  color: #b9b9b9;
  break-inside: avoid;
  page-break-inside: avoid;
}
.faq-header {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 1.625rem 4rem 1.625rem 2rem;
  cursor: pointer;
}
.faq-header::after {
  content: '';
  position: absolute;
  right: 2rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.5s ease;
}
.faq-header.active::after {
  transform: translateY(-50%) rotate(-135deg);
}
.faq-desc {
  line-height: 1.5em;
  padding: 0 2.5rem 0 2rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.faq-desc.open {
  max-height: 40rem;
  padding-bottom: 1.75rem;
}

/* --- Blog ----------------------------------------------------------------- */

.blogpost .featured-image {
  border-radius: 0.625rem;
  padding: 0.5rem;
  background-color: var(--color-tertiary);
  margin-bottom: 1.875rem;
}
.blogpost .featured-image img {
  height: 27.875rem;
  width: 100%;
  object-fit: cover;
  border-radius: 0.625rem;
  transition: opacity 0.4s ease;
}
.blogpost a:hover .featured-image img {
  opacity: 0.8;
}
.i-arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex: none;
  transition: all 0.5s ease;
}
.blogpost a:hover .i-arrow {
  background-color: var(--color-secondary);
  color: #fff;
}

/* Article body */
.article-content section + section { margin-top: 2.5rem; }
.article-content h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.875rem;
  line-height: 1.2em;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .article-content h2 { font-size: 2.25rem; }
}
.article-content p { margin-bottom: 1.25rem; }
.article-content .article-list {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  list-style: disc;
}
.article-content .article-list li { margin-bottom: 0.5rem; }
.article-content .article-list li::marker { color: var(--color-secondary); }

/* --- Tabs ----------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.tab {
  border: 0.0625rem solid var(--color-line);
  border-radius: 6.25rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  line-height: 1.2em;
  color: var(--color-primary);
  transition: all 0.4s ease;
}
.tab:hover,
.tab:focus-visible { border-color: var(--color-secondary); color: var(--color-secondary); }
.tab.active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* --- Forms ---------------------------------------------------------------- */

.field-label {
  display: grid;
  gap: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: var(--color-muted);
}
.dark .field-label { color: rgba(242, 239, 233, 0.7); }
.field {
  width: 100%;
  border: 0.0625rem solid var(--color-line);
  border-radius: 0.3125rem;
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4em;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.field:focus {
  outline: none;
  border-color: var(--color-secondary);
  background-color: #fff;
}
.field-dark {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(206, 204, 201, 0.25);
  color: var(--color-bg-light);
}
.field-dark:focus {
  border-color: var(--color-tertiary);
  background-color: rgba(255, 255, 255, 0.1);
}
.field-dark option { color: var(--color-primary); }
textarea.field { resize: vertical; min-height: 8rem; }

.form-status,
.form-errors {
  border-radius: 0.3125rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5em;
}
.form-status {
  background-color: #e8efe4;
  border: 0.0625rem solid #9fb893;
  color: #2d4a22;
}
.form-errors {
  background-color: #f6e6e6;
  border: 0.0625rem solid #d6a3a3;
  color: var(--color-secondary);
}

/* --- Disclaimer modal ----------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(20, 20, 20, 0.75);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.show { opacity: 1; }
.modal {
  width: 100%;
  max-width: 56rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0.625rem;
  background-color: var(--color-bg-light);
  padding: 3rem;
  font-size: 1rem;
  line-height: 1.6em;
}
@media (min-width: 1024px) {
  .modal { padding: 4rem 5rem; }
}
.modal:focus { outline: none; }
.modal-list {
  counter-reset: item;
}
.modal-list li {
  counter-increment: item;
  position: relative;
  padding: 0.75rem 0 0.75rem 3rem;
  border-top: 0.0625rem solid var(--color-line);
}
.modal-list li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  color: var(--color-secondary);
}

/* --- Footer --------------------------------------------------------------- */

.fstop {
  border-top: 0.0625rem solid var(--color-tertiary);
  border-bottom: 0.0625rem solid var(--color-tertiary);
  font-size: 7.625rem;
  line-height: 1em;
  color: var(--color-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6875rem;
  padding: 1.5rem 0 2rem;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 991px) {
  .fstop { font-size: 2.5rem; letter-spacing: 0.25rem; white-space: normal; }
}
.footer-section { margin-top: 5rem; }
.footer-nav li { position: relative; }
.footer-nav li::before {
  content: '';
  background-color: #86837d;
  height: 0.6875rem;
  width: 0.0625rem;
  display: inline-block;
  margin: 0 0.5rem;
}
.footer-nav li:first-child::before { display: none; }

/* --- Scroll reveal animations --------------------------------------------- */

@keyframes slideInUp {
  0%   { opacity: 0; transform: translateY(3rem); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-3rem); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  0%   { opacity: 0; transform: translateX(3rem); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.js .animate .slideInUp,
.js .animate .slideInLeft,
.js .animate .slideInRight,
.js .animate .fadeIn { opacity: 0; }

.animate.active .slideInUp    { animation: slideInUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.animate.active .slideInLeft  { animation: slideInLeft 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.animate.active .slideInRight { animation: slideInRight 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.animate.active .fadeIn       { animation: fadeIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }

@media print {
  .animate .slideInUp,
  .animate .slideInLeft,
  .animate .slideInRight,
  .animate .fadeIn { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate .slideInUp,
  .animate .slideInLeft,
  .animate .slideInRight,
  .animate .fadeIn { opacity: 1 !important; animation: none !important; }
  #hero-video { display: none; }
}

/* Footer "Reach Us" map: compact, softened until hovered */
.footer-map {
  width: 100%;
  height: 13rem;
}
.footer-map iframe {
  filter: grayscale(0.35) contrast(1.05);
  transition: filter 0.4s ease;
}
.footer-map:hover iframe { filter: none; }
@media (min-width: 1024px) {
  .footer-map { width: 22rem; height: 12rem; }
}

/* Gallery: three equal, fixed-height tiles (photo, YouTube thumbnail or Instagram / TikTok embed) */
.gallery-tile {
  position: relative;
  height: 34rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--color-tertiary);
  box-shadow: 0 1px 2px rgba(33, 33, 33, 0.05);
}
@media (max-width: 767px) {
  .gallery-tile { height: 30rem; }
}
.gallery-item { position: relative; display: block; height: 100%; outline-offset: 0.25rem; }
.gallery-embed { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.gallery-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20, 20, 20, 0.7));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gallery-zoom,
.gallery-play {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--color-secondary);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}
.gallery-zoom {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: scale(0.85);
}
.gallery-zoom svg { width: 1.1rem; height: 1.1rem; }
/* YouTube: a play button that is always visible */
.gallery-play {
  top: 50%;
  left: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.5);
}
.gallery-play svg { width: 1.75rem; height: 1.75rem; margin-left: 0.2rem; }
.gallery-item:hover .gallery-play { background: var(--color-secondary); color: #fff; transform: scale(1.06); }
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.gallery-item:hover .gallery-shade,
.gallery-item:focus-visible .gallery-shade,
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption,
.gallery-item:hover .gallery-zoom,
.gallery-item:focus-visible .gallery-zoom { opacity: 1; transform: none; }
/* touch screens have no hover: keep captions visible */
@media (hover: none) {
  .gallery-shade, .gallery-caption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item img, .gallery-caption, .gallery-zoom, .gallery-play { transition: none; }
  .gallery-item:hover img { transform: none; }
}
/* GLightbox's own stylesheet loads after this one, so these carry an extra class to win */
.glightbox-container.glightbox-clean .goverlay { background: rgba(24, 22, 20, 0.94); }
.glightbox-container.glightbox-clean .gslide-title { font-family: 'EB Garamond', Georgia, serif; font-size: 1.375rem; font-weight: 400; color: var(--color-primary); margin-bottom: 0.25rem; }
.glightbox-container.glightbox-clean .gslide-desc { font-family: 'Raleway', sans-serif; font-size: 0.875rem; color: var(--color-muted); }
.glightbox-container.glightbox-clean .gprev,
.glightbox-container.glightbox-clean .gnext,
.glightbox-container.glightbox-clean .gclose { background: rgba(255, 255, 255, 0.12); border-radius: 100%; width: 3.25rem; height: 3.25rem; }
.glightbox-container.glightbox-clean .gclose { width: 2.75rem; height: 2.75rem; }
.glightbox-container.glightbox-clean .gprev:hover,
.glightbox-container.glightbox-clean .gnext:hover,
.glightbox-container.glightbox-clean .gclose:hover { background: var(--color-secondary); opacity: 1; }

/* Floating contact buttons: WhatsApp bottom-left, call bottom-right. Round on phones;
   on desktop the label slides out on hover. */
.float-btn {
  position: fixed;
  z-index: 70;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 4.25rem;
  min-width: 4.25rem;
  padding: 0 1.25rem;
  border-radius: 100rem;
  color: #fff;
  box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(0, 0, 0, 0.35);
  transition: gap 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.float-btn svg { width: 1.75rem; height: 1.75rem; flex: none; }
.float-btn-left { left: max(1.5rem, env(safe-area-inset-left)); }
.float-btn-right { right: max(1.5rem, env(safe-area-inset-right)); }
.float-wa { background: #25d366; }
.float-call { background: var(--color-secondary); }
.float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02rem;
  transition: max-width 0.4s ease;
}
.float-btn:hover,
.float-btn:focus-visible { gap: 0.75rem; transform: translateY(-0.125rem); box-shadow: 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.4); }
.float-btn:hover .float-label,
.float-btn:focus-visible .float-label { max-width: 16rem; }
/* soft pulse on the call button to draw the eye, once the page has settled */
.float-call::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(100, 13, 13, 0.45);
  animation: float-pulse 2.6s ease-out 2s infinite;
  pointer-events: none;
}
@keyframes float-pulse {
  0% { box-shadow: 0 0 0 0 rgba(100, 13, 13, 0.45); }
  70%, 100% { box-shadow: 0 0 0 1rem rgba(100, 13, 13, 0); }
}
@media (max-width: 640px) {
  .float-btn { height: 3.5rem; min-width: 3.5rem; padding: 0 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
  .float-btn-left { left: 1rem; }
  .float-btn-right { right: 1rem; }
  .float-btn:hover .float-label { max-width: 0; }
  .float-btn:hover { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .float-btn, .float-label { transition: none; }
  .float-call::after { animation: none; }
}