/* Make It Happen — Brand, motion, a11y */
:root {
  --rose-100: #fce8f0;
  --rose-200: #f9c4da;
  --rose-300: #f5a3c7;
  --rose-400: #e83e8c;
  --rose-500: #c9186a;
  --rose-600: #9b1252;
  --navy-800: #1a2332;
  --navy-900: #0f1520;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Scrolled island nav radius — buttons use the same on hover */
  --nav-island-radius: 1.35rem;
  --btn-radius-hover: var(--nav-island-radius);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-visible { opacity: 1 !important; transform: none !important; }
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--rose-400); color: #fff; padding: 0.75rem 1.25rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; text-decoration: none; border-radius: 2px;
  transition: top 0.25s var(--ease-soft);
}
.skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rose-400); outline-offset: 3px;
}
/* Reveal: visible by default if JS never runs; animate only while waiting for .reveal-visible */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal.js-reveal-ready:not(.reveal-visible) {
    opacity: 0;
    transform: translateY(28px);
  }
}
.reveal-visible { opacity: 1 !important; transform: none !important; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Use forwards only (not both) so text stays visible if animation never starts */
.hero-animate > * {
  animation: hero-rise 0.85s var(--ease-out-expo) forwards;
}
.hero-animate > *:nth-child(1) { animation-delay: 0.08s; }
.hero-animate > *:nth-child(2) { animation-delay: 0.18s; }
.hero-animate > *:nth-child(3) { animation-delay: 0.4s; }
.hero-animate > *:nth-child(4) { animation-delay: 0.55s; }
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: none; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0;
}
.nav-dropdown__trigger .chev {
  width: 12px; height: 12px; transition: transform 0.35s var(--ease-soft);
}
.nav-dropdown.is-open .nav-dropdown__trigger .chev,
.nav-dropdown:hover .nav-dropdown__trigger .chev,
.nav-dropdown:focus-within .nav-dropdown__trigger .chev { transform: rotate(180deg); }
/* ========== Site nav: docked → island (Dynamic Island–style morph) ========== */
:root {
  --nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --nav-duration: 0.62s;
}

/* Always fixed so we morph visuals only — no position jump */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  padding: 0;
  pointer-events: none;
  transition: padding var(--nav-duration) var(--nav-ease);
  will-change: padding;
}
.site-nav__inner {
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.9rem 1.5rem;
  border-radius: 0;
  background: #0f1520;
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  border: 1px solid transparent;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color: #fff;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center top;
  transition:
    max-width var(--nav-duration) var(--nav-ease),
    margin var(--nav-duration) var(--nav-ease),
    border-radius var(--nav-duration) var(--nav-ease),
    padding var(--nav-duration) var(--nav-ease),
    background 0.5s ease,
    box-shadow var(--nav-duration) var(--nav-ease),
    border-color 0.45s ease,
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease,
    transform var(--nav-duration) var(--nav-ease);
  will-change: max-width, border-radius, padding, transform, box-shadow;
}

/* Island: floating glass pill */
.site-nav.is-island {
  padding: 0.55rem 0.75rem 0;
  pointer-events: none;
}
.site-nav.is-island .site-nav__inner {
  pointer-events: auto;
  max-width: min(72rem, calc(100% - 0px));
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--nav-island-radius);
  padding: 0.65rem 1.15rem;
  background: rgba(15, 21, 32, 0.78);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Subtle expand-on-arrive feel when island engages */
.site-nav.is-island .site-nav__inner {
  animation: nav-island-settle var(--nav-duration) var(--nav-ease) both;
}
@keyframes nav-island-settle {
  0% {
    transform: translate3d(0, -6px, 0) scale(0.985, 0.94);
    border-radius: 0.35rem;
  }
  55% {
    transform: translate3d(0, 1px, 0) scale(1.008, 1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
    border-radius: var(--nav-island-radius);
  }
}

#nav-spacer {
  width: 100%;
  /* Fallback height before JS measures — avoids content under fixed nav / blank gap bugs */
  min-height: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  pointer-events: none;
  transition: none;
  /* Bridge any subpixel gap under docked nav (same navy as bar) */
  background: #0f1520;
  margin-bottom: -1px;
}
/* When island floats, spacer is just layout offset — no strip */
body:has(.site-nav.is-island) #nav-spacer {
  background: transparent;
  margin-bottom: 0;
}
/* Pull first hero flush under docked nav */
body:not(:has(.site-nav.is-island)) #nav-spacer + header,
body:not(:has(.site-nav.is-island)) #nav-spacer + .relative,
body:not(:has(.site-nav.is-island)) main > header:first-child {
  margin-top: -1px;
}
header.relative,
body > header {
  margin-top: 0;
}

.site-nav__links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .site-nav__links { display: flex; }
}
.site-nav__links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.25s ease;
}
.site-nav__links a:hover { color: var(--rose-400); }
.site-nav__cta {
  border: 1px solid var(--rose-400);
  color: var(--rose-400) !important;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease, border-radius 0.3s ease !important;
}
.site-nav__cta:hover {
  background: var(--rose-400);
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav__inner,
  .site-nav.is-island .site-nav__inner {
    transition: none !important;
    animation: none !important;
  }
}

.nav-dropdown__panel {
  position: absolute; top: calc(100% + 0.85rem); left: 50%;
  transform: translateX(-50%) translateY(8px); min-width: 268px; padding: 0.65rem 0;
  background: rgba(12, 16, 24, 0.97);
  isolation: isolate;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(232, 62, 140, 0.4);
  border-radius: 0.85rem;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0; visibility: hidden;
  pointer-events: none; z-index: 60;
  transition: opacity 0.3s var(--ease-soft), transform 0.35s var(--ease-out-expo), visibility 0.3s;
}
.nav-dropdown__panel::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown__panel a {
  display: block; padding: 0.7rem 1.25rem; color: rgba(255, 255, 255, 0.95);
  text-decoration: none; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}
.nav-dropdown__panel a:hover, .nav-dropdown__panel a:focus-visible {
  color: var(--rose-300); background: rgba(232, 62, 140, 0.08); padding-left: 1.45rem; outline: none;
}
.nav-dropdown__panel a.is-view-all {
  color: var(--rose-400); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem; font-weight: 600;
}
.nav-link-active { color: var(--rose-400) !important; }
.mobile-services details { width: 100%; max-width: 280px; text-align: center; }
.mobile-services summary {
  list-style: none; cursor: pointer; font-family: "Cormorant Garamond", serif;
  font-size: 2.25rem; color: #fff; margin-bottom: 0.5rem;
}
.mobile-services summary::-webkit-details-marker { display: none; }
.mobile-services summary:hover { color: var(--rose-400); }
.mobile-services .mobile-services__list {
  display: flex; flex-direction: column; gap: 0.65rem; padding: 0.75rem 0 1.25rem;
}
.mobile-services .mobile-services__list a {
  color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; transition: color 0.25s ease;
}
.mobile-services .mobile-services__list a:hover { color: var(--rose-400); }
.filter-btn {
  border: 1px solid rgba(15, 21, 32, 0.12); background: transparent; color: var(--navy-900);
  padding: 0.55rem 1.1rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; cursor: pointer; transition: all 0.3s var(--ease-soft);
}
.filter-btn:hover, .filter-btn.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.filter-btn.is-active { background: var(--rose-400); border-color: var(--rose-400); }
.portfolio-item.is-hidden { display: none; }
.quote-card { transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft); }
.quote-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(15, 21, 32, 0.08); }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.9s var(--ease-out-expo); }
.img-zoom:hover img { transform: scale(1.08); }




/* Portfolio video tiles */
.portfolio-video {
  background: #0f1520;
  border-radius: 2px;
}
.portfolio-video video {
  display: block;
  width: 100%;
  height: 100%;
}
.portfolio-video.portfolio-item.md\:col-span-2,
.portfolio-item.portfolio-video[style*="16/9"] {
  /* wide tile */
}
@media (min-width: 768px) {
  .portfolio-video[style*="16/9"] {
    grid-column: span 2;
  }
}





/* Text links (rose underline only) — never liquid CTAs */
a.text-rose-500.border-b,
a.text-rose-500[class*="border-b"],
a.link-text {
  border-radius: 0 !important;
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-color: #e83e8c !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  overflow: visible !important;
  position: relative;
  display: inline-block;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}
a.text-rose-500.border-b:hover,
a.text-rose-500[class*="border-b"]:hover,
a.link-text:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #0f1520 !important;
  border-color: #0f1520 !important;
  transform: none !important;
}
a.text-rose-500.border-b::after,
a.text-rose-500[class*="border-b"]::after,
a.link-text::after {
  display: none !important;
  content: none !important;
}

/* Proper solid CTAs (use class btn-cta) */
a.btn-cta,
button.btn-cta {
  display: inline-block;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 1rem 2.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition-property: border-radius, background, background-color, color, border-color, box-shadow, backdrop-filter, -webkit-backdrop-filter !important;
  transition-duration: 0.55s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  transform: none !important;
}
a.btn-cta--navy,
button.btn-cta--navy {
  background: #0f1520 !important;
  color: #fff !important;
  border-color: #0f1520 !important;
}
a.btn-cta--rose,
button.btn-cta--rose {
  background: #e83e8c !important;
  color: #fff !important;
  border-color: #e83e8c !important;
}
a.btn-cta--outline,
button.btn-cta--outline {
  background: transparent !important;
  color: #e83e8c !important;
  border-color: #e83e8c !important;
}
a.btn-cta--outline-white {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.85) !important;
}
a.btn-cta:hover,
button.btn-cta:hover {
  border-radius: var(--btn-radius-hover) !important;
  transform: none !important;
  backdrop-filter: blur(16px) saturate(1.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
}
a.btn-cta--navy:hover {
  background: rgba(15, 21, 32, 0.78) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow: 0 12px 36px rgba(232, 62, 140, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
a.btn-cta--rose:hover {
  background: rgba(232, 62, 140, 0.62) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
  box-shadow: 0 12px 36px rgba(232, 62, 140, 0.32), inset 0 1px 0 rgba(255,255,255,0.35);
}
a.btn-cta--outline:hover {
  background: rgba(232, 62, 140, 0.1) !important;
  color: #c9186a !important;
  box-shadow: 0 10px 28px rgba(232, 62, 140, 0.12), inset 0 1px 0 rgba(255,255,255,0.2);
}
a.btn-cta--outline-white:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* ========== Buttons: sharp → smooth rounded liquid glass on hover ========== */
:root {
  --btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --btn-duration: 0.55s;
  /* --btn-radius-hover inherits from :root above (= nav island radius) */
}

/*
  Tailwind "transition-colors" only animates color props — so radius snaps.
  We force full multi-property transitions so corner rounding eases smoothly.
  No scale/translate shrink (the "lule mos me prek" effect).
*/
a.inline-block.bg-navy-900,
a.inline-block.bg-rose-400,
a.inline-block.bg-white,
a.inline-flex.bg-rose-400,
a.inline-flex.items-center.justify-center.bg-rose-400,
a.inline-flex.items-center.justify-center.border,
button[type="submit"],
button.w-full.bg-navy-900,
button.bg-navy-900,
a.bg-navy-900.text-white,
a.bg-rose-400.text-white,
a.bg-white.text-navy-900,
.site-nav__cta,
a.border.border-white:not([class*="border-b"]),
a.border.border-white\/40:not([class*="border-b"]),
a.border.border-white\/30:not([class*="border-b"]),
a[class*="border-white/40"]:not([class*="border-b"]),
a[class*="border-white/30"]:not([class*="border-b"]),
a.border.border-rose-400:not([class*="border-b"]),
a.btn-cta,
a[class*="tracking-widest"][class*="px-8"]:not([class*="border-b"]),
a[class*="tracking-widest"][class*="px-10"]:not([class*="border-b"]),
a[class*="tracking-widest"][class*="px-6"]:not([class*="border-b"]) {
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  /* Reserve border so hover border doesn't shrink the box */
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  transform: none !important;
  transition-property: border-radius, background, background-color, color, border-color, box-shadow, backdrop-filter, -webkit-backdrop-filter !important;
  transition-duration: var(--btn-duration) !important;
  transition-timing-function: var(--btn-ease) !important;
}

/* Default solid fills keep their look; transparent border matches fill */
a.inline-block.bg-navy-900,
a.bg-navy-900.text-white,
button[type="submit"],
button.w-full.bg-navy-900,
button.bg-navy-900 {
  border-color: #0f1520;
}
a.inline-block.bg-rose-400,
a.inline-flex.bg-rose-400,
a.bg-rose-400.text-white {
  border-color: #e83e8c;
}
a.inline-block.bg-white,
a.bg-white.text-navy-900 {
  border-color: #ffffff;
}
.site-nav__cta {
  border-color: #e83e8c !important;
}
a.border.border-rose-400:not([class*="border-b"]),
a[class*="border-rose-400"]:not([class*="border-b"]):not([class*="border-b "]) {
  border-color: #e83e8c !important;
}
a.border.border-white,
a[class*="border-white"] {
  border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Shared hover morph — smooth radius, no size shrink */
a.inline-block.bg-navy-900:hover,
a.bg-navy-900.text-white:hover,
button[type="submit"]:hover,
button.w-full.bg-navy-900:hover,
button.bg-navy-900:hover {
  border-radius: var(--btn-radius-hover) !important;
  background: rgba(15, 21, 32, 0.78) !important;
  background-color: rgba(15, 21, 32, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(16px) saturate(1.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  box-shadow:
    0 12px 36px rgba(232, 62, 140, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: none !important;
}

a.inline-block.bg-rose-400:hover,
a.inline-flex.bg-rose-400:hover,
a.bg-rose-400.text-white:hover {
  border-radius: var(--btn-radius-hover) !important;
  background: rgba(232, 62, 140, 0.62) !important;
  background-color: rgba(232, 62, 140, 0.62) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    0 12px 36px rgba(232, 62, 140, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: none !important;
}

a.inline-block.bg-white:hover,
a.bg-white.text-navy-900:hover {
  border-radius: var(--btn-radius-hover) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: #0f1520 !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    0 12px 32px rgba(15, 21, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: none !important;
}

a.border.border-rose-400:not([class*="border-b"]):hover,
a.btn-cta--outline:hover,
.site-nav__cta:hover,
a.border.border-white:hover,
a.border.border-white\/40:hover,
a.border.border-white\/30:hover,
a[class*="border-white/40"]:hover,
a[class*="border-white/30"]:hover,
a[class*="border-white"]:hover {
  border-radius: var(--btn-radius-hover) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: none !important;
}

.site-nav__cta {
  border-radius: 0 !important;
  overflow: hidden;
}

/* Soft liquid shimmer — delayed so it doesn't fight the radius ease */
a.inline-block.bg-navy-900::after,
a.inline-block.bg-rose-400::after,
a.inline-flex.bg-rose-400::after,
a.bg-navy-900.text-white::after,
a.bg-rose-400.text-white::after,
button[type="submit"]::after,
.site-nav__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  opacity: 0;
  transition:
    transform 0.7s var(--btn-ease) 0.08s,
    opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
a.inline-block.bg-navy-900:hover::after,
a.inline-block.bg-rose-400:hover::after,
a.inline-flex.bg-rose-400:hover::after,
a.bg-navy-900.text-white:hover::after,
a.bg-rose-400.text-white:hover::after,
button[type="submit"]:hover::after,
.site-nav__cta:hover::after {
  transform: translateX(130%);
  opacity: 1;
}

a.inline-block.bg-navy-900 > *,
a.inline-block.bg-rose-400 > *,
button[type="submit"] > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  a.inline-block.bg-navy-900,
  a.inline-block.bg-rose-400,
  a.bg-navy-900.text-white,
  button[type="submit"],
  .site-nav__cta {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }
  a.inline-block.bg-navy-900::after,
  a.inline-block.bg-rose-400::after,
  .site-nav__cta::after {
    display: none;
  }
}

/* Animated section title as link */
a.section-title-link {
  color: #0f1520;
  text-decoration: none;
  transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
a.section-title-link:hover {
  color: #c9186a;
}
a.section-title-link .section-title-link__line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
a.section-title-link:hover .section-title-link__line,
a.section-title-link.group:hover .section-title-link__line {
  transform: scaleX(1);
}

/* Portfolio page gallery — match home density */
.portfolio-item {
  width: 100%;
  min-width: 0;
}
.portfolio-item img,
.portfolio-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-video {
  max-height: none;
}
@media (min-width: 768px) {
  .portfolio-video[style*="16/9"] {
    grid-column: span 1; /* keep single cell like photos */
  }
}

/* ========== Responsive: mobile-first polish ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Prevent fixed/absolute children from causing horizontal scroll */
.container,
.site-nav__inner,
main,
section {
  max-width: 100%;
}

/* Google Form: compact by default, expandable */
.google-form-embed {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 0 0 2px 2px;
}
.google-form-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 560px !important;
  min-height: 480px !important;
  max-height: none !important;
  border: 0;
  display: block;
  background: #fff;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 640px) {
  .google-form-embed iframe {
    height: 500px !important;
    min-height: 440px !important;
  }
}

/* Full-width CTAs on small screens */
@media (max-width: 640px) {
  a.btn-cta,
  button.btn-cta,
  a.inline-block.bg-navy-900,
  a.inline-block.bg-rose-400,
  a.inline-block.bg-white,
  a.bg-navy-900.text-white,
  a.bg-rose-400.text-white,
  a.bg-white.text-navy-900,
  a.border.border-white,
  button[type="submit"],
  button.w-full.bg-navy-900 {
    width: 100%;
    max-width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Hero button stacks already flex-col; ensure full width */
  .flex.flex-col a.bg-white,
  .flex.flex-col a.border {
    width: 100%;
  }

  .site-nav__inner {
    padding: 0.65rem 0.85rem;
    gap: 0.5rem;
  }

  .site-nav.is-island {
    padding: 0.4rem 0.5rem 0;
  }

  .site-nav.is-island .site-nav__inner {
    padding: 0.5rem 0.75rem;
    border-radius: var(--nav-island-radius);
  }
}

/* Match button hover radius to mobile island nav */
@media (max-width: 640px) {
  :root {
    --nav-island-radius: 1rem;
  }

  .site-nav__cta {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.65rem;
  }

  /* Mobile menu: scrollable, safe areas */
  #mobile-menu {
    padding-top: max(4rem, env(safe-area-inset-top));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-menu .font-serif.text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  .mobile-services summary {
    font-size: 1.75rem !important;
  }

  /* Typography: long headlines */
  .font-serif.text-5xl {
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
  }

  /* Hero sections */
  header.relative.h-\[55vh\],
  header.relative.h-\[50vh\],
  header[class*="h-[55vh]"],
  header[class*="h-[50vh]"],
  header[class*="h-[60vh]"] {
    min-height: 380px !important;
    height: auto !important;
    min-height: 55svh !important;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  /* Credential badge: keep on-screen */
  .inline-flex.items-stretch.drop-shadow-2xl {
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .inline-flex.items-stretch.drop-shadow-2xl img {
    height: 4.25rem !important;
    width: 4.25rem !important;
  }
  .inline-flex.items-stretch.drop-shadow-2xl > div {
    min-width: 0;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }
  .inline-flex.items-stretch.drop-shadow-2xl p.whitespace-nowrap {
    white-space: normal !important;
    font-size: 0.6rem !important;
  }

  /* Service alternating rows: images first, less gap */
  .flex.flex-col.lg\:flex-row,
  .flex.flex-col.lg\:flex-row-reverse {
    gap: 2rem !important;
  }

  /* Portfolio filters wrap tightly */
  #portfolio-filters {
    gap: 0.4rem !important;
    margin-bottom: 1.5rem !important;
  }
  #portfolio-filters .filter-btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.6rem;
  }

  /* Footer links wrap */
  footer .flex {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
  }

  /* Contact / section padding */
  section.py-24,
  section.py-20,
  section.py-16 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Testimonials / cards */
  .quote-card {
    padding: 1.25rem !important;
  }

  /* Absolute decorative borders don't overflow viewport */
  .absolute.-top-6,
  .absolute.-left-6,
  .absolute.-right-6 {
    max-width: 100%;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .site-nav img.h-12 {
    height: 2.25rem !important;
  }
  a.btn-cta {
    padding: 0.85rem 1.25rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
  }
}

/* Tablets: keep form compact (no forced tall min-height) */

/* Prefer modern viewport units for hero when supported */
@supports (height: 100svh) {
  @media (max-width: 768px) {
    header.relative.min-h-\[700px\],
    header[class*="min-h-[700"] {
      min-height: 100svh !important;
    }
  }
}

/* Touch: larger tap targets */
@media (hover: none) and (pointer: coarse) {
  .filter-btn,
  .site-nav__cta,
  a.btn-cta {
    min-height: 44px;
  }
  #portfolio-filters .filter-btn {
    min-height: 40px;
  }
}

/* ---------- Image protection: hover watermark + save deterrents (js/image-protect.js) ---------- */
img,
video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mih-wm-wrap {
  position: relative;
  display: block;
}

.mih-wm-mark {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(closest-side, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0));
}

.mih-wm-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.85;
  -webkit-mask: url("../images/makeithappenlogo.png") center / min(60%, 280px) no-repeat;
  mask: url("../images/makeithappenlogo.png") center / min(60%, 280px) no-repeat;
}

.mih-wm:hover > .mih-wm-mark {
  opacity: 1;
}

/* ---------- Mobile menu: hidden from first paint ----------
   The panel is injected by js/site-chrome.js and its Tailwind classes are
   generated later by the CDN, which left it covering the page on load.
   These rules hide it without waiting for Tailwind, and never show it on
   screens wide enough for the desktop nav (lg = 1024px). */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s;
}

#mobile-menu.translate-x-0 {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  #mobile-menu {
    display: none !important;
  }
}

/* ---------- Nav spacer: never taller than the docked nav ----------
   The navy #nav-spacer is sized from the nav's height. The logo's Tailwind
   size classes (h-10 sm:h-12 md:h-16) can arrive after that measurement,
   so size the logo here too and cap the spacer as a safety net. */
.site-nav__inner > a > img {
  height: 2.5rem;
  width: auto;
}
@media (min-width: 640px) {
  .site-nav__inner > a > img { height: 3rem; }
}
@media (min-width: 768px) {
  .site-nav__inner > a > img { height: 4rem; }
}
#nav-spacer {
  max-height: 8rem;
}