/* ============================================================
   EAGLES PHOTOGRAPHY — COMPONENTS CSS
   All reusable UI components: nav, footer, buttons,
   cursor, forms, cards, floating elements, etc.
   ============================================================ */

/* ============================================================
   CUSTOM CURSOR (desktop pointer devices only)
   ============================================================ */
.ep-cursor-dot,
.ep-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: var(--r-full);
  will-change: transform;
}

/* Small dot — follows mouse instantly (no lerp) */
.ep-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

/* Outline ring — follows with lerp 0.15 (set in JS RAF loop) */
.ep-cursor-ring {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-ink);
  background: transparent;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width      0.3s ease,
    height     0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

/* Hover over links / buttons — amber tint */
.ep-cursor-dot.is-hovered {
  opacity: 0;
}

.ep-cursor-ring.is-hovered {
  width: 50px;
  height: 50px;
  background: rgba(245, 165, 35, 0.15);
  border-color: var(--color-amber);
}

/* Hover over .ep-work-item — dark circle with "VIEW" */
.ep-cursor-ring.is-view {
  width: 70px;
  height: 70px;
  background: rgba(13, 13, 13, 0.9);
  border-color: transparent;
}

.ep-cursor-ring.is-view::after {
  content: 'VIEW';
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
}

/* Click feedback */
.ep-cursor-ring.is-clicked {
  width: 24px;
  height: 24px;
}

@media (hover: none), (pointer: coarse) {
  .ep-cursor-dot,
  .ep-cursor-ring { display: none; }
}

/* ============================================================
   TOP NAVBAR
   ============================================================ */
.ep-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--nav-right-w);
  height: var(--nav-top-h);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--content-pad);
  z-index: var(--z-nav);
  transition: box-shadow 0.3s ease;
  will-change: opacity, transform;
}

.ep-navbar.ep-scrolled {
  box-shadow: 0 2px 24px rgba(13, 13, 13, 0.07);
}

/* Logo group */
.ep-navbar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.ep-navbar__logo-img {
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: var(--r-full);
}

.ep-navbar__logo-name {
  font-family: var(--font-logo);
  font-size: 28px;
  line-height: 1;
  background: linear-gradient(135deg, #B8860B 0%, var(--color-amber) 50%, #DAA520 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Refer & Earn badge — desktop navbar (hidden on mobile, where it
   lives in the hamburger menu instead) */
.ep-navbar__refer {
  margin-left: auto;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  background: linear-gradient(100deg, rgba(245,165,35,0.16), rgba(251,198,94,0.16));
  border: 1.5px solid var(--color-amber);
  border-radius: var(--r-pill);
  transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-fast) ease;
}
.ep-navbar__refer:hover {
  background: var(--color-amber);
  color: var(--color-ink);
}
.ep-navbar__refer:active { transform: scale(0.97); }
.ep-navbar__refer-star { color: var(--color-amber); font-size: 12px; }
.ep-navbar__refer:hover .ep-navbar__refer-star { color: var(--color-ink); }

@media (max-width: 768px) {
  .ep-navbar__refer { display: none; }
}

/* Language toggle — EN | தமிழ் (top navbar, all pages) */
.ep-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-family: var(--font-body);
  font-size: 12px;
}
.ep-lang-toggle__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  font: inherit;
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ep-lang-toggle__btn:hover { color: var(--color-ink); }
.ep-lang-toggle__btn.is-active {
  color: var(--color-ink);
  font-weight: 700;
  border-bottom-color: var(--color-amber);
}
.ep-lang-toggle__sep { color: var(--color-border); user-select: none; }

/* Tamil mode typography — Tamil script needs taller lines and
   less tracking than the tight Anton/uppercase Latin styling */
html.lang-ta .t-display-xl,
html.lang-ta .t-display-l,
html.lang-ta .t-display-m,
html.lang-ta h1, html.lang-ta h2, html.lang-ta h3 {
  line-height: 1.3;
}
html.lang-ta .t-label { letter-spacing: 0.08em; }

/* Refer link inside the mobile menu — subtle gold emphasis */
.ep-mobile-menu__link--refer .ep-mobile-menu__link-dot {
  box-shadow: 0 0 0 4px rgba(245, 165, 35, 0.18);
}

/* Hamburger — mobile only */
.ep-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  z-index: calc(var(--z-modal) + 10);
  position: relative;
}

.ep-hamburger__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform var(--dur-base) var(--ease-expo-out),
    opacity var(--dur-base) ease;
}

.ep-hamburger.ep-open .ep-hamburger__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.ep-hamburger.ep-open .ep-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ep-hamburger.ep-open .ep-hamburger__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   MOBILE FULLSCREEN MENU
   ============================================================ */
.ep-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 80px var(--content-pad) 60px;

  /* Scrollable so every link (incl. Refer & Earn) + socials are
     reachable on short viewports without being clipped. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Hidden state — GSAP animates open */
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition:
    opacity 0.4s var(--ease-expo-out),
    transform 0.4s var(--ease-expo-out);
}

.ep-mobile-menu.ep-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

.ep-mobile-menu__nav {
  /* grow to centre links when there is room, but never shrink below
     content height — lets the container scroll when items overflow */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

/* Nav link — word clip reveal done by GSAP */
.ep-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 80px);
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  overflow: hidden;
  position: relative;
  /* Initial hidden state for GSAP */
  clip-path: inset(0 0 100% 0);
  transform: translateY(60px);
  opacity: 0;
}

.ep-mobile-menu.ep-open .ep-mobile-menu__link {
  /* GSAP reveals these on open — CSS fallback only */
}

.ep-mobile-menu__link-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* ── Per-item accent colours — mirror the desktop right-nav 5-colour
   scheme. Order matches the nav links (work · about · services ·
   insights · contact · refer). Driven via nth-child so no per-page
   markup change is needed. Accent tints the link text, its dot and a
   left border for a clear, readable colour code on the dark overlay. */
.ep-mobile-menu__nav .ep-mobile-menu__link {
  --mm-accent: #fff;
  color: var(--mm-accent);
  border-left: 4px solid var(--mm-accent);
  padding-left: 22px;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.ep-mobile-menu__nav .ep-mobile-menu__link:nth-child(1) { --mm-accent: var(--color-teal); }
.ep-mobile-menu__nav .ep-mobile-menu__link:nth-child(2) { --mm-accent: var(--color-pink); }
.ep-mobile-menu__nav .ep-mobile-menu__link:nth-child(3) { --mm-accent: var(--color-orange); }
.ep-mobile-menu__nav .ep-mobile-menu__link:nth-child(4) { --mm-accent: var(--color-plum); }
.ep-mobile-menu__nav .ep-mobile-menu__link:nth-child(5) { --mm-accent: var(--color-amber); }
.ep-mobile-menu__nav .ep-mobile-menu__link:nth-child(6) { --mm-accent: var(--color-gold-light); }
.ep-mobile-menu__nav .ep-mobile-menu__link .ep-mobile-menu__link-dot {
  background: var(--mm-accent) !important;
  width: 12px;
  height: 12px;
}

/* Social row at bottom of overlay */
.ep-mobile-menu__socials {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid rgba(245, 240, 232, 0.12);
  margin-top: 20px;
}

.ep-mobile-menu__socials a {
  display: flex;
  opacity: 0.6;
  transition: opacity var(--dur-base) ease;
}

.ep-mobile-menu__socials a:hover {
  opacity: 1;
}

.ep-mobile-menu__socials svg {
  width: 28px;
  height: 28px;
}

/* ============================================================
   RIGHT VERTICAL NAV
   ============================================================ */
.right-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 90px !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 0 !important;
  will-change: transform, opacity;
}

.right-nav-logo {
  flex: 0 0 auto !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-bg) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.logo-circle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--color-bg) !important;
  border: 1.5px solid var(--color-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  color: var(--color-ink) !important;
  letter-spacing: 0.05em !important;
  user-select: none !important;
  box-shadow: 0 2px 8px rgba(13, 13, 13, 0.08) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.right-nav-logo:hover .logo-circle {
  border-color: var(--color-amber) !important;
  box-shadow: 0 2px 12px rgba(13, 13, 13, 0.14) !important;
}

.right-nav-tabs {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  height: calc(100vh - 90px) !important;
  min-height: 0 !important;
}

.nav-tab {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin: 0 !important;
  padding-bottom: 28px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: opacity 0.2s ease !important;
}

.nav-tab:hover {
  opacity: 0.85 !important;
}

/* Active tab — set statically per page via hardcoded `is-active`
   class in that page's HTML (no scroll JS). The active tab juts
   ~10px into the content gutter and stays flush to the viewport
   edge, with a white inset accent + bolder label. */
.nav-tab.is-active {
  width: 100px !important;
  margin-left: -10px !important;
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.75) !important;
}

.nav-tab span {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: white !important;
  font-weight: 600 !important;
}

.nav-tab.is-active span {
  font-weight: 700 !important;
}

.nav-tab-work     { background: var(--color-teal)   !important; }
.nav-tab-about    { background: var(--color-pink)   !important; }
.nav-tab-services { background: var(--color-orange) !important; }
.nav-tab-insights { background: var(--color-plum)   !important; }
.nav-tab-contact  { background: var(--color-amber)  !important; }

/* Page content offset — keeps content from going under the nav */
.ep-page {
  margin-right: 90px !important;
}

/* Hide on mobile — hamburger takes over */
@media (max-width: 768px) {
  .right-nav    { display: none !important; }
  .ep-hamburger { display: flex; }
  .ep-navbar    { right: 0; }
  .ep-page      { margin-right: 0 !important; }
}

/* ============================================================
   LEFT SECTION INDICATOR
   ============================================================ */
.ep-section-ind {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  z-index: var(--z-sticky);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
  user-select: none;
}

@media (max-width: 768px) {
  .ep-section-ind { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary — amber pill (all main CTAs) */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition:
    background var(--dur-base) ease,
    color      var(--dur-base) ease,
    transform  var(--dur-fast) ease;
  white-space: nowrap;
}

.ep-btn:hover {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

.ep-btn:active {
  transform: scale(0.97);
}

/* Dark pill */
.ep-btn--dark {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

.ep-btn--dark:hover {
  background: var(--color-amber);
  color: var(--color-ink);
}

/* Outline on light bg */
.ep-btn--outline {
  background: transparent;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}

.ep-btn--outline:hover {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

/* Outline on dark bg */
.ep-btn--outline-cream {
  background: transparent;
  border: 1.5px solid var(--color-dark-text);
  color: var(--color-dark-text);
}

.ep-btn--outline-cream:hover {
  background: var(--color-dark-text);
  color: var(--color-ink);
}

/* Text CTA link — bottom-border style with sliding arrow */
.ep-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-ink);
  padding-bottom: 2px;
  transition:
    border-color var(--dur-base) ease,
    color        var(--dur-base) ease;
}

.ep-cta-link:hover {
  border-color: var(--color-amber);
  color: var(--color-amber);
}

.ep-cta-link .ep-arrow {
  display: inline-block;
  transition: transform var(--dur-base) ease;
}

.ep-cta-link:hover .ep-arrow {
  transform: translateX(6px);
}

/* Large CTA — used in dark footer-style sections */
.ep-cta-lg {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-dark-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 240, 232, 0.2);
  padding: 20px 0;
  transition:
    color        var(--dur-base) ease,
    border-color var(--dur-base) ease;
}

.ep-cta-lg:hover {
  color: var(--color-amber);
  border-bottom-color: var(--color-amber);
}

.ep-cta-lg:hover .ep-arrow {
  transform: translateX(8px);
}

/* ============================================================
   WORK GRID ITEMS (2-col on homepage, masonry on work.html)
   ============================================================ */
.ep-work-item {
  position: relative;
  overflow: hidden;
  cursor: none;
  /* NO border-radius — spec */
}

/* .ep-work-link wraps the image + overlay on homepage (no lightbox) */
.ep-work-link {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.ep-work-item img {
  width: 100%;
  display: block;
  /* Scale on hover handled in motion.css */
}

.ep-work-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  /* clip-path + transition in motion.css */
}

.ep-work-overlay-inner {
  text-align: center;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ep-work-overlay-inner .ep-oi-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.ep-work-overlay-inner .ep-oi-cat {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.ep-work-overlay-inner .ep-oi-view {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-top: 4px;
}

/* Below-image meta */
.ep-work-meta {
  padding: 12px 0 4px;
}

.ep-work-meta .ep-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 5px;
}

.ep-work-meta .ep-cat-label .ep-dot {
  width: 6px;
  height: 6px;
}

.ep-work-meta .ep-project-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 3px;
}

.ep-work-meta .ep-project-client {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-muted);
}

/* ============================================================
   SERVICE PILLS
   ============================================================ */
.ep-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition:
    background var(--dur-fast) ease,
    color      var(--dur-fast) ease;
}

.ep-pill:hover        { background: #fff; }
.ep-pill--teal:hover   { color: var(--color-teal); }
.ep-pill--pink:hover   { color: var(--color-pink); }
.ep-pill--orange:hover { color: var(--color-orange); }
.ep-pill--amber:hover  { color: var(--color-amber); }

/* ============================================================
   DARK MARQUEE STRIP
   ============================================================ */
.ep-marquee {
  background: var(--color-dark);
  height: 56px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ep-marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.ep-marquee__item {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-dark-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-right: 64px;
  flex-shrink: 0;
}

/* ============================================================
   STATS ROW
   ============================================================ */
.ep-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 40px var(--content-pad);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.ep-stat-item {
  text-align: center;
  flex: 1;
  position: relative;
}

.ep-stat-item + .ep-stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--color-border);
}

.ep-stat-num {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--color-amber);
  line-height: 1;
  display: block;
}

.ep-stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 8px;
  display: block;
}

/* ============================================================
   FIRST-STORY INVITATION
   Honest stand-in for testimonials while the studio is new
   ============================================================ */
.ep-first-story {
  display: flex;
  justify-content: center;
  padding: 0 var(--content-pad);
}

.ep-first-story__card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: 52px 48px 48px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.ep-first-story__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 90px;
  line-height: 0.5;
  height: 44px;
  color: var(--color-pink);
}

.ep-first-story__text {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 560px;
  margin: 0 auto 24px;
}

.ep-first-story__stars {
  color: var(--color-amber);
  font-size: 18px;
  letter-spacing: 4px;
  margin-bottom: 28px;
}

@media (max-width: 640px) {
  .ep-first-story__card { padding: 40px 24px 32px; }
  .ep-first-story__text { font-size: 17px; }
  .ep-first-story__mark { font-size: 72px; height: 36px; }
}

/* ============================================================
   PORTFOLIO EMPTY / COMING-SOON STATE
   Elegant skeleton grid shown while the gallery manifest is
   empty (no real photos yet). Portfolio.js hides it and reveals
   the real grid once images are added + the manifest regenerated.
   ============================================================ */
.ep-work-empty {
  padding: 8px var(--content-pad) 0;
  text-align: center;
}

.ep-skel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}

.ep-skel-card {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  background: linear-gradient(
    100deg,
    rgba(224, 216, 204, 0.30) 20%,
    rgba(224, 216, 204, 0.70) 42%,
    rgba(224, 216, 204, 0.30) 64%
  );
  background-size: 220% 100%;
  animation: ep-shimmer 1.7s ease-in-out infinite;
}
.ep-skel-card:nth-child(2) { animation-delay: 0.15s; }
.ep-skel-card:nth-child(3) { animation-delay: 0.30s; }
.ep-skel-card:nth-child(4) { animation-delay: 0.45s; }

@keyframes ep-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

.ep-work-empty__msg {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 480px;
  margin: 0 auto 28px;
}

@media (max-width: 900px) {
  .ep-skel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ep-skel-grid { gap: 12px; margin-bottom: 36px; }
  .ep-work-empty__msg { font-size: 16px; }
}

/* Reusable square shimmer tile — used by the manifest-driven
   About preview grid and Instagram strip until real photos exist.
   portfolio.js swaps these for real <img>s when the manifest has photos. */
.ep-skel-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(
    100deg,
    rgba(224, 216, 204, 0.30) 20%,
    rgba(224, 216, 204, 0.65) 42%,
    rgba(224, 216, 204, 0.30) 64%
  );
  background-size: 220% 100%;
  animation: ep-shimmer 1.9s ease-in-out infinite;
}
.ep-insta-grid__item .ep-skel-tile { aspect-ratio: 1 / 1; }

@media (prefers-reduced-motion: reduce) {
  .ep-skel-card,
  .ep-skel-tile { animation: none; }
}

/* ============================================================
   TESTIMONIAL CARD STACK
   ============================================================ */
.ep-testimonials {
  position: relative;
}

.ep-tstack {
  position: relative;
  height: 480px;
  margin-bottom: 48px;
}

.ep-tcard {
  position: absolute;
  top: 0;
  left: 50%;
  width: 80%;
  max-width: 900px;
  border-radius: var(--r-xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 40px;
  /* z-index + transform set by data-pos attribute + motion.css */
}

.ep-tcard[data-bg="teal"]   { background: var(--color-teal); }
.ep-tcard[data-bg="pink"]   { background: var(--color-pink); }
.ep-tcard[data-bg="orange"] { background: var(--color-orange); }

.ep-tcard__content {}

.ep-tcard__name {
  font-family: var(--font-display);
  font-size: 32px;
  color: #fff;
  margin-bottom: 12px;
}

.ep-tcard__stars {
  color: #fff;
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 24px;
}

.ep-tcard__quote {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  line-height: 1.6;
}

.ep-tcard__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}

.ep-tcard__photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Navigation buttons */
.ep-tnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ep-tnav__btn {
  width: 48px;
  height: 48px;
  background: var(--color-ink);
  color: var(--color-dark-text);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-base) ease,
    transform  var(--dur-fast) ease;
}

.ep-tnav__btn:hover {
  background: var(--color-amber);
  color: var(--color-ink);
}

.ep-tnav__btn:active {
  transform: scale(0.92);
}

/* ============================================================
   FAQ ACCORDION (feedagency 2-col style)
   ============================================================ */
.ep-faq {
  display: grid;
  grid-template-columns: 40% 60%;
  border-top: 1px solid var(--color-border);
}

.ep-faq__qlist {
  border-right: 1px solid var(--color-border);
}

.ep-faq__qitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  cursor: none;
  transition:
    background var(--dur-base) ease,
    color      var(--dur-base) ease;
}

.ep-faq__qitem:hover:not(.ep-active) {
  background: rgba(13, 13, 13, 0.04);
}

.ep-faq__qitem.ep-active {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

.ep-faq__qtext {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.ep-faq__qarrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  transition: transform var(--dur-base) ease;
}

.ep-faq__qitem.ep-active .ep-faq__qarrow {
  transform: rotate(90deg);
}

/* Answer panel */
.ep-faq__apanel {
  padding: 40px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-faq__atitle {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-ink);
  margin-bottom: 16px;
  opacity: 0;
  transition: opacity var(--dur-base) ease 0.1s;
}

.ep-faq__atext {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-ink-muted);
  line-height: 1.8;
  opacity: 0;
  transition: opacity var(--dur-base) ease 0.15s;
}

.ep-faq__acta {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-amber);
  border-bottom: 1.5px solid var(--color-amber);
  padding-bottom: 2px;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-base) ease 0.2s;
}

/* JS adds ep-active to answer panel when question selected */
.ep-faq__apanel.ep-active .ep-faq__atitle,
.ep-faq__apanel.ep-active .ep-faq__atext,
.ep-faq__apanel.ep-active .ep-faq__acta {
  opacity: 1;
}

/* ============================================================
   FORMS — underline style
   ============================================================ */
.ep-form {}

.ep-form-group {
  margin-bottom: 32px;
  position: relative;
}

.ep-field {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--color-border);
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
  display: block;
  transition: border-color var(--dur-base) ease;
}

.ep-field::placeholder {
  color: var(--color-ink-muted);
}

.ep-field:focus {
  border-bottom-color: var(--color-amber);
  outline: none;
}

/* Select — custom arrow */
select.ep-field {
  cursor: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B5F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 24px;
}

textarea.ep-field {
  resize: vertical;
  min-height: 96px;
  padding-top: 12px;
}

/* ── DPDP consent checkbox (contact + booking forms) ── */
.ep-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  cursor: none;
}

.ep-consent__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--color-ink-muted);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  cursor: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  display: grid;
  place-content: center;
}

.ep-consent__box::before {
  content: '';
  width: 11px;
  height: 11px;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-back-out);
  background: var(--color-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ep-consent__box:checked {
  background: var(--color-amber);
  border-color: var(--color-amber);
}

.ep-consent__box:checked::before { transform: scale(1); }

.ep-consent__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.ep-consent__text a {
  color: var(--color-amber);
  border-bottom: 1px solid var(--color-amber);
}

.ep-consent__text a:hover { opacity: 0.65; }

.ep-consent.is-invalid .ep-consent__box { border-color: var(--color-orange); }

.ep-consent__err {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-orange);
  margin-top: 10px;
}

/* Chatbot enquiry consent (compact) */
.ep-chat-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: none;
}

.ep-chat-consent input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid var(--color-ink-muted);
  border-radius: 3px;
  background: var(--color-surface);
  cursor: none;
  display: grid;
  place-content: center;
}

.ep-chat-consent input:checked {
  background: var(--color-amber);
  border-color: var(--color-amber);
}

.ep-chat-consent input:checked::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--color-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ep-chat-consent input.is-invalid { border-color: var(--color-orange); }

.ep-chat-consent span {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.ep-chat-consent a {
  color: var(--color-amber);
  border-bottom: 1px solid var(--color-amber);
}

/* Submit row */
.ep-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

/* Form + success wrapper */
.ep-form-wrap {
  position: relative;
}

/* Success card */
.ep-success-card {
  display: none;
  background: var(--color-bg);
  border: 1.5px solid var(--color-teal);
  border-radius: var(--r-lg);
  padding: 48px;
  text-align: center;
}

.ep-success-card.ep-visible {
  display: block;
}

.ep-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
}

.ep-success-icon svg {
  width: 100%;
  height: 100%;
}

.ep-success-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-teal);
  margin-bottom: 10px;
}

.ep-success-sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink-muted);
}

/* ============================================================
   BOOKING / ENQUIRY CARD FORM
   White card, labelled underline fields, package selector
   Used on contact.html + booking.html (data-booking-form)
   ============================================================ */
.ep-book-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: 48px;
  box-shadow: var(--shadow-md);
}

/* Paired 2-column rows */
.ep-book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 22px;
}

/* Full-width blocks (package, date, message) */
.ep-book-field--full { margin-bottom: 22px; }

.ep-book-field { display: flex; flex-direction: column; }

/* Field label */
.ep-book-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 4px;
}

/* Inputs inside the card keep the shared underline .ep-field style,
   but drop the big default form-group margin */
.ep-book-card .ep-field { padding: 12px 0; }
.ep-book-card textarea.ep-field { min-height: 92px; padding-top: 10px; }

/* ── Package selector (radio-behaviour cards) ── */
.ep-pkg-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 6px;
}

.ep-pkg-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  text-align: center;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  cursor: none;
  transition:
    border-color var(--dur-base) ease,
    background   var(--dur-base) ease,
    box-shadow   var(--dur-base) ease,
    transform    var(--dur-fast) ease;
}

@media (hover: none), (pointer: coarse) {
  .ep-pkg-opt { cursor: pointer; }
}

.ep-pkg-opt:hover {
  border-color: var(--color-amber);
  transform: translateY(-2px);
}

.ep-pkg-opt.is-selected {
  border-color: var(--color-amber);
  background: rgba(245, 165, 35, 0.08);
  box-shadow: 0 4px 16px rgba(245, 165, 35, 0.18);
}

.ep-pkg-opt__tier {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  transition: color var(--dur-base) ease;
}

.ep-pkg-opt.is-selected .ep-pkg-opt__tier { color: var(--color-amber); }

.ep-pkg-opt__price {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: 0.01em;
}

/* Helper text under the package cards */
.ep-pkg-help {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin-top: 12px;
}
.ep-pkg-help a {
  color: var(--color-amber);
  border-bottom: 1px solid var(--color-amber);
}
.ep-pkg-help a:hover { opacity: 0.7; }

/* ── Gradient submit button ── */
.ep-btn--gradient {
  background: linear-gradient(120deg, var(--color-amber), var(--color-gold-light));
  color: var(--color-ink);
  border: none;
}
.ep-btn--gradient:hover {
  background: linear-gradient(120deg, var(--color-gold-light), var(--color-amber));
  color: var(--color-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245, 165, 35, 0.35);
}

.ep-book-submit {
  width: 100%;
  margin-top: 10px;
  padding: 18px 32px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* Reassuring line under the submit button */
.ep-book-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-muted);
  margin-top: 16px;
}

/* Shared inline submit error (all forms) */
.ep-form-error {
  display: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-orange);
  text-align: center;
  margin-top: 14px;
}
.ep-form-error a {
  color: var(--color-orange);
  font-weight: 600;
  text-decoration: underline;
}

/* Success card sits inside the white card — drop its own frame */
.ep-book-card .ep-success-card {
  border: none;
  background: transparent;
  padding: 24px 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ep-book-card { padding: 30px 22px; }
  .ep-book-row {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 22px;
  }
  .ep-pkg-opt { padding: 14px 8px; }
  .ep-pkg-opt__price { font-size: 20px; }
}

@media (max-width: 380px) {
  .ep-pkg-opt__price { font-size: 17px; }
  .ep-pkg-opt { padding: 12px 6px; }
}

/* ============================================================
   FOOTER — feedagency "Hey" style
   ============================================================ */
.ep-footer {
  background: var(--color-bg);
  padding: 80px var(--content-pad) 0;
  position: relative;
}

/* "Hey  let's chat ↗" row */
.ep-footer__top {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* "Hey" text — multicolor layered shadow (see motion.css .ep-footer-hey) */
.ep-footer__hey {
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 140px);
  line-height: 0.9;
  color: var(--color-ink);
  /* Shadow animated in by motion.css + JS */
  text-shadow:
    1px 1px 0 var(--color-teal),
    3px 3px 0 var(--color-pink),
    5px 5px 0 var(--color-orange),
    7px 7px 0 var(--color-amber);
}

/* "let's chat ↗" link */
.ep-footer__chat-link {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
  padding-bottom: 6px;
  transition: color var(--dur-base) ease;
  white-space: nowrap;
}

.ep-footer__chat-link:hover {
  color: var(--color-amber);
}

/* Footer page navigation (sitemap row — links every page to every page) */
.ep-footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: -32px;
}

.ep-footer__nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-base) ease;
}

.ep-footer__nav a:hover,
.ep-footer__nav a[aria-current="page"] {
  color: var(--color-amber);
}

@media (max-width: 768px) {
  .ep-footer__nav { margin-top: 0; gap: 12px 20px; }
}

/* Social links row */
.ep-footer__socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 40px 0;
  flex-wrap: wrap;
}

.ep-footer__social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--dur-base) ease;
}

.ep-footer__social-link:hover {
  opacity: 0.55;
}

.ep-footer__social-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Divider */
.ep-footer__hr {
  height: 1px;
  background: var(--color-border);
  margin: 0 calc(-1 * var(--content-pad));
}

/* Bottom bar */
.ep-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  gap: 12px;
  flex-wrap: wrap;
}

.ep-footer__copy {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-muted);
}

.ep-footer__legal {
  display: flex;
  gap: 24px;
}

.ep-footer__legal a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-base) ease;
}

.ep-footer__legal a:hover {
  color: var(--color-ink);
}

/* ============================================================
   SOCIAL ICONS — colorful inline SVG definitions
   Applied via fill on the SVG elements directly in HTML
   These classes wrap the SVGs with proper sizing
   ============================================================ */
.ep-social-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.ep-social-icon--lg {
  width: 40px;
  height: 40px;
}

/* ============================================================
   FLOATING ELEMENTS
   ============================================================ */

/* WhatsApp bubble — bottom right */
.ep-wa-bubble {
  position: fixed;
  bottom: 32px;
  right: calc(var(--nav-right-w) + 20px);
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}

/* Pulse ring */
.ep-wa-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #25D366;
  border-radius: var(--r-full);
  z-index: -1;
  animation: ep-pulse 2.2s ease-out infinite;
}

.ep-wa-bubble svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.ep-wa-bubble__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-ink);
  color: var(--color-dark-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
}

.ep-wa-bubble__tip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--color-ink);
}

.ep-wa-bubble:hover .ep-wa-bubble__tip {
  opacity: 1;
}

/* Chatbot bubble — bottom left */
.ep-chat-bubble {
  position: fixed;
  bottom: 32px;
  left: 32px;
  width: 56px;
  height: 56px;
  background: var(--color-amber);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  cursor: none;
  box-shadow: 0 4px 16px rgba(245, 165, 35, 0.35);
}

.ep-chat-bubble svg {
  width: 26px;
  height: 26px;
  color: var(--color-ink);
}

/* ============================================================
   CHATBOT PANEL — "Eagles Assistant"
   Cream-themed conversational panel. Inner markup is built by
   initChatbot() in js/components.js; these styles dress it.
   ============================================================ */
.ep-chat-popup {
  position: fixed;
  bottom: 100px;
  left: 32px;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: min(560px, calc(100vh - 150px));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay);
  overflow: hidden;

  /* Hidden by default — GSAP drives open/close */
  opacity: 0;
  pointer-events: none;
}

.ep-chat-popup.ep-open {
  pointer-events: auto;
}

/* ── Header ── */
.ep-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.ep-chat__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-amber);
}

.ep-chat__id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.ep-chat__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);
  line-height: 1.1;
}

.ep-chat__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.ep-chat__pulse {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--color-amber);
  animation: ep-chat-pulse 1.6s ease-in-out infinite;
}

@keyframes ep-chat-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.35; transform: scale(0.6); }
}

.ep-chat__close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--color-ink-muted);
  border-radius: var(--r-full);
  flex-shrink: 0;
  cursor: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ep-chat__close:hover {
  background: var(--color-bg);
  color: var(--color-ink);
}

/* ── Message log (scrollable) ── */
.ep-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg);
}

.ep-chat-msg {
  max-width: 84%;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
}

.ep-chat-msg p { margin: 0; }

.ep-chat-msg--bot {
  align-self: flex-start;
  background: rgba(245, 165, 35, 0.12);
  color: var(--color-ink);
  border-radius: 4px 16px 16px 16px;
  padding: 11px 14px;
}

.ep-chat-msg--user {
  align-self: flex-end;
  background: var(--color-ink);
  color: var(--color-dark-text);
  border-radius: 16px 16px 4px 16px;
  padding: 11px 14px;
}

.ep-chat-msg--form {
  max-width: 100%;
  align-self: stretch;
}

/* Link button inside a bot bubble */
.ep-chat__linkbtn {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--color-amber);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: var(--r-pill);
  cursor: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ep-chat__linkbtn:hover {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

/* Typing indicator */
.ep-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ep-chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--color-ink-muted);
  animation: ep-chat-typing 1s infinite ease-in-out;
}

.ep-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.ep-chat__typing i:nth-child(3) { animation-delay: 0.30s; }

@keyframes ep-chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0);    }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ── Inline enquiry form ── */
.ep-chat-enquiry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.ep-chat-enquiry__field {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) ease;
}

.ep-chat-enquiry__field::placeholder { color: var(--color-ink-muted); }

.ep-chat-enquiry__field:focus {
  border-color: var(--color-amber);
  outline: none;
}

.ep-chat-enquiry__field.is-invalid { border-color: var(--color-orange); }

select.ep-chat-enquiry__field {
  cursor: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B5F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
}

.ep-chat-enquiry__send {
  align-self: flex-start;
  padding: 10px 26px;
  background: var(--color-amber);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--r-pill);
  cursor: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ep-chat-enquiry__send:hover {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

.ep-chat-enquiry__send:disabled { opacity: 0.6; }

.ep-chat-enquiry__err {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-orange);
  margin: 0;
}

/* ── Quick-reply pills ── */
.ep-chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.ep-chat__chip {
  padding: 7px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-ink);
  cursor: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ep-chat__chip:hover {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-ink);
}

/* ── Input bar ── */
.ep-chat__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.ep-chat__text {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) ease;
}

.ep-chat__text::placeholder { color: var(--color-ink-muted); }

.ep-chat__text:focus {
  border-color: var(--color-amber);
  outline: none;
}

.ep-chat__send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-amber);
  color: var(--color-ink);
  border-radius: var(--r-full);
  cursor: none;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.ep-chat__send:hover {
  background: var(--color-ink);
  color: var(--color-dark-text);
}

.ep-chat__send:active { transform: scale(0.92); }

/* Back to top — bottom right, above WhatsApp */
.ep-back-top {
  position: fixed;
  bottom: 100px;
  right: calc(var(--nav-right-w) + 20px);
  width: 40px;
  height: 40px;
  background: var(--color-ink);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  cursor: none;
  text-decoration: none;

  /* Hidden until scroll > 400px */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity    var(--dur-base) ease,
    transform  var(--dur-base) ease,
    background var(--dur-base) ease;
}

.ep-back-top.ep-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.ep-back-top:hover {
  background: var(--color-amber);
}

.ep-back-top svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* ============================================================
   COOKIE CONSENT — small card, bottom-right (above WhatsApp)
   Content + buttons are built by initCookieConsent() in main.js.
   ============================================================ */
.ep-cookie {
  position: fixed;
  bottom: 150px;                 /* clears the WhatsApp + back-to-top bubbles */
  right: calc(var(--nav-right-w) + 20px);
  left: auto;
  width: 340px;
  max-width: calc(100vw - 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  z-index: var(--z-modal);
  transition: transform var(--dur-slow) var(--ease-expo-out), opacity var(--dur-slow) ease;
}

.ep-cookie.ep-dismissed {
  transform: translateY(16px);
  opacity: 0;
}

.ep-cookie__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0 0 16px;
}

.ep-cookie__text a {
  color: var(--color-amber);
  border-bottom: 1px solid var(--color-amber);
  transition: opacity var(--dur-fast) ease;
}

.ep-cookie__text a:hover { opacity: 0.65; }

.ep-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ep-cookie__btn {
  background: var(--color-amber);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  cursor: none;
  white-space: nowrap;
  border: 1.5px solid var(--color-amber);
  transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.ep-cookie__btn:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-dark-text);
}

/* Outline "decline" variant */
.ep-cookie__btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}

.ep-cookie__btn--outline:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-dark-text);
}

/* Footer "Cookie Settings" re-open link (injected by JS) */
.ep-footer__cookie-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: none;
  transition: color var(--dur-base) ease;
}

.ep-footer__cookie-link:hover { color: var(--color-ink); }

@media (max-width: 768px) {
  /* Cookie card → bottom-center, clear of the floating bubbles */
  .ep-cookie {
    left: 16px;
    right: 16px;
    bottom: 88px;
    width: auto;
    max-width: none;
  }
}

/* ============================================================
   INSTAGRAM STRIP
   ============================================================ */
.ep-insta-strip {
  position: relative;
  padding: 80px var(--content-pad);
  overflow: hidden;
}

.ep-insta-watermark {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 100px);
  color: rgba(13, 13, 13, 0.055);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.ep-insta-grid {
  display: flex;
  position: relative;
  z-index: 1;
}

.ep-insta-grid__item {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.ep-insta-grid__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-expo-out);
}

.ep-insta-grid__item:hover img {
  transform: scale(1.05);
}

.ep-insta-grid__overlay {
  position: absolute;
  inset: 0;
  background: rgba(245, 165, 35, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}

.ep-insta-grid__item:hover .ep-insta-grid__overlay {
  opacity: 1;
}

.ep-insta-grid__overlay svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.ep-insta-follow {
  display: block;
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-amber);
  text-decoration: none;
  transition: opacity var(--dur-base) ease;
}

.ep-insta-follow:hover {
  opacity: 0.65;
}

/* ============================================================
   GLIGHTBOX OVERRIDES
   ============================================================ */
.glightbox-clean .gslide-image img {
  border-radius: 0 !important;
}

.glightbox-clean .gprev,
.glightbox-clean .gnext {
  background: var(--color-amber) !important;
  border-radius: var(--r-sm) !important;
}

.glightbox-clean .gclose {
  background: rgba(13, 13, 13, 0.8) !important;
  border-radius: var(--r-sm) !important;
}

.glightbox-clean .gdesc-title {
  font-family: var(--font-body) !important;
  color: #fff !important;
}

/* ============================================================
   RESPONSIVE — MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 1024px) {
  .ep-tcard {
    padding: 36px;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  /* Stats */
  .ep-stats {
    flex-wrap: wrap;
    gap: 32px;
    padding: 40px var(--content-pad);
  }

  .ep-stat-item {
    flex: 0 0 calc(50% - 16px);
  }

  .ep-stat-item + .ep-stat-item::before {
    display: none;
  }

  .ep-stat-num {
    font-size: 44px;
  }

  /* Testimonials */
  .ep-tstack {
    height: auto;
    padding-bottom: 32px;
  }

  .ep-tcard {
    position: relative;
    left: 0;
    width: 100%;
    transform: none !important;
    grid-template-columns: 1fr;
    padding: 32px 24px;
    display: none;
  }

  .ep-tcard[data-pos="1"] {
    display: grid;
  }

  .ep-tcard__photos {
    display: none;
  }

  /* FAQ */
  .ep-faq {
    grid-template-columns: 1fr;
  }

  .ep-faq__qlist {
    border-right: none;
  }

  .ep-faq__apanel {
    padding: 24px;
    min-height: unset;
  }

  /* Footer */
  .ep-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ep-footer__socials {
    gap: 16px;
  }

  .ep-footer__social-link span {
    display: none; /* Show icon only on mobile */
  }

  .ep-footer__bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* Instagram */
  .ep-insta-grid {
    flex-wrap: wrap;
  }

  .ep-insta-grid__item {
    flex: 0 0 33.33%;
  }

  /* Floating */
  .ep-wa-bubble {
    right: 20px;
    bottom: 20px;
  }

  .ep-back-top {
    right: 84px;
    bottom: 20px;
  }

  /* Chatbot → full-width bottom sheet */
  .ep-chat-popup {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 82vh;
    height: 82dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .ep-insta-grid__item {
    flex: 0 0 50%;
  }
}

/* ============================================================
   SEASONAL OFFER BANNER (global — injected by initOfferBanner)
   When active, <html> gets .ep-has-offer and --ep-offer-h is
   measured by JS so the fixed navbar / right-nav shift down.
   ============================================================ */
:root { --ep-offer-h: 0px; }

.ep-offer-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;               /* above --z-nav (1000) */
  background: var(--color-amber);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 54px 11px 20px;
  text-align: center;
}
.ep-offer-banner__text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.ep-offer-banner__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--color-ink);
  white-space: nowrap;
}
.ep-offer-banner__cta:hover { opacity: 0.7; }
.ep-offer-banner__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--color-ink);
  border-radius: var(--r-full);
  transition: background var(--dur-fast);
}
.ep-offer-banner__close:hover { background: rgba(13,13,13,0.12); }

/* Shift fixed chrome down by the measured banner height when active */
html.ep-has-offer .ep-navbar { top: var(--ep-offer-h); }
html.ep-has-offer .right-nav {
  top: var(--ep-offer-h);
  height: calc(100vh - var(--ep-offer-h));
}
html.ep-has-offer .ep-page { padding-top: calc(var(--nav-top-h) + var(--ep-offer-h)); }
/* Scroll progress bar sits just under the banner */
html.ep-has-offer .ep-progress { top: var(--ep-offer-h); }

@media (max-width: 600px) {
  .ep-offer-banner { padding: 9px 46px 9px 14px; gap: 10px; }
  .ep-offer-banner__text { font-size: 12.5px; }
  .ep-offer-banner__cta { font-size: 12px; }
}