/* Custom component styles — Kazi Technical Systems Sdn Bhd.
 *
 * Plain CSS (not processed by Tailwind). Uses the CSS custom properties
 * that Tailwind v4 emits for the @theme tokens (var(--color-brand-*)).
 */

/* ---------- Base ---------- */
/* NOTE: no global scroll-behavior:smooth — it makes the browser animate
   every scroll operation, which causes inconsistent/accelerating scroll
   speed while browsing. Native scrolling is smooth and consistent on all
   devices; anchor navigation stays instant. */

/* ---------- Site safe area (content container) ----------
 * Every section on every page shares the SAME safe area via Tailwind's
 * `max-w-7xl`. On mobile/tablet it fills the width (the px-6/lg:px-8
 * padding handles the edges). On desktop it becomes a centred column
 * with a small, consistent ~100px gutter on each side on EVERY device
 * (reduced from the original 1280px/1200px columns that left big empty
 * sides on large monitors). Single source of truth — tune the value
 * here to resize the safe area for the whole site at once. */
.max-w-7xl {
  max-width: 100%;
  width: 100%;
}
@media (min-width: 1024px) {
  .max-w-7xl {
    max-width: calc(100% - 12.5rem); /* 12.5rem = 200px => ~100px per side */
  }
}

/* ---------- Focus & skip link ---------- */
:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-brand-700);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--color-brand-600);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--color-brand-700);
  box-shadow: 0 8px 20px -8px var(--shadow-primary);
}

.btn-gold {
  background-color: var(--color-gold-400);
  color: var(--color-ink-900);
}
.btn-gold:hover {
  background-color: var(--color-gold-500);
  box-shadow: 0 8px 20px -8px var(--shadow-secondary);
}

.btn-outline {
  border: 2px solid var(--color-brand-600);
  color: var(--color-brand-700);
}
.btn-outline:hover {
  background-color: var(--color-brand-600);
  color: #fff;
}

.btn-white {
  background-color: #fff;
  color: var(--color-brand-700);
}
.btn-white:hover {
  background-color: var(--color-brand-50);
}

.btn-outline-white {
  border: 2px solid rgb(255 255 255 / 0.7);
  color: #fff;
}
.btn-outline-white:hover {
  background-color: rgb(255 255 255 / 0.15);
}

/* ---------- Section headings ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-700);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background-color: var(--color-gold-400);
}

/* ---------- Navbar ---------- */
/* Reserve the fixed navbar's space so it never reflows (and therefore never
   shifts the page) when it compresses on scroll. */
body.site-with-navbar {
  padding-top: 4rem; /* matches the navbar's full height (h-16 = 64px) */
}

.nav-link {
  position: relative;
  font-weight: 500;
  color: var(--color-ink-600);
  transition: color 0.15s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-brand-700);
}
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.375rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-gold-500);
}

.dropdown-link {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  color: var(--color-ink-700);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-link:hover {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}

.dropdown.open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Navbar — compress the header when the page is scrolled down */
#site-nav .nav-inner,
#site-nav .nav-logo,
#site-nav .nav-brand-name,
#site-nav .nav-brand-sub {
  transition: height 0.25s ease, font-size 0.25s ease;
}
#site-nav.scrolled .nav-inner {
  height: 3.25rem; /* 52px — down from h-16 (64px) */
}
#site-nav.scrolled .nav-logo {
  height: 2rem; /* 32px — down from h-11 (44px) */
}
#site-nav.scrolled .nav-brand-name {
  font-size: 1rem; /* 16px — down from text-xl (20px) */
}
#site-nav.scrolled .nav-brand-sub {
  font-size: 0.5rem; /* 8px — down from 10px */
}

@media (prefers-reduced-motion: reduce) {
  #site-nav .nav-inner,
  #site-nav .nav-logo,
  #site-nav .nav-brand-name,
  #site-nav .nav-brand-sub {
    transition: none;
  }
}

/* ---------- Admin panel (WordPress-style) ---------- */
.admin-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(209 213 219 / 0.9);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-nav:hover {
  background: rgb(255 255 255 / 0.06);
  color: #ffffff;
}
.admin-nav-active {
  background: var(--color-brand-600);
  color: #ffffff;
}
.admin-nav-active:hover {
  background: var(--color-brand-600);
  color: #ffffff;
}

/* WordPress-style content panel (white card with a header bar) */
.admin-panel {
  border: 1px solid var(--color-ink-200);
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.admin-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-ink-100);
  background: #fafafa;
}
.admin-panel-header h2 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink-800);
}

/* ---------- Admin login page (split-screen brand panel) ---------- */
/* Soft translucent circles that sit behind the brand panel content. */
.login-blob {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  background: rgb(255 255 255 / 0.08);
}
.login-blob--top {
  top: -6rem;
  right: -6rem;
  width: 18rem;
  height: 18rem;
}
.login-blob--bottom {
  bottom: -9rem;
  left: -5rem;
  width: 22rem;
  height: 22rem;
}
/* Large, faint brand initial used as a watermark on the brand panel. */
.login-watermark {
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  z-index: 0;
  font-size: 18rem;
  font-weight: 800;
  line-height: 1;
  color: rgb(255 255 255 / 0.05);
  pointer-events: none;
  user-select: none;
}

/* ---------- Footer ---------- */
.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-400);
}

/* ---------- Project filter tabs ---------- */
.filter-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-200);
  background: #fff;
  color: var(--color-ink-600);
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-btn:hover {
  border-color: var(--color-brand-500);
  color: var(--color-brand-700);
}
.filter-btn.active {
  background-color: var(--color-brand-600);
  border-color: var(--color-brand-600);
  color: #fff;
}

/* ---------- Forms ---------- */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink-700);
  margin-bottom: 0.375rem;
}
.form-input {
  width: 100%;
  border: 1px solid var(--color-ink-200);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: #fff;
  color: var(--color-ink-800);
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px var(--ring-primary);
}
.form-input::placeholder {
  color: var(--color-ink-400);
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Hero — full-width designed background (home page)
   ============================================================ */
.hero-section {
  background: #ffffff; /* fallback while the image loads */
  /* Banner height with 5% cropped off the top and 10% off the bottom
     (640 → 544 = a 15% total reduction); the image is anchored so the
     crop is biased toward the bottom edge. */
  min-height: 544px;
}

/* Tablets/medium: taller banner height (same crop feel). */
@media (min-width: 768px) {
  .hero-section {
    min-height: 578px;
  }
}

/* Large screens: size to the artwork ratio (1.8 ≈ the 1691×930 source) so
   the background image always shows with the SAME ~5% top / ~10% bottom
   crop on every screen (14" laptop, 24" desktop, …). The old 731px cap
   kicked in above ~1600px viewport width, making the banner too short for
   its width — object-fit: cover then cropped ~20% off the bottom of the
   artwork on wide monitors ("missing bg img bottom"). A 1200px cap remains
   only as a safety net for extreme ultra-wide displays (> ~2600px). */
@media (min-width: 1280px) {
  .hero-section {
    height: min(calc((100vw / 1.8 - 30px) * 0.85), 1200px);
  }
}

/* Full-bleed city skyline background */
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor at 33% vertically so the crop splits as ~5% from the top and
     ~10% from the bottom of the artwork. */
  object-position: 50% 33.33%;
}

/* Dark theme-coloured gradient overlay for text readability — the stops are
   derived from the admin's primary colour and injected via theme_css. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--hero-overlay-1) 18%,
    var(--hero-overlay-2) 48%,
    var(--hero-overlay-3) 78%,
    var(--hero-overlay-4) 100%
  );
  pointer-events: none;
}

/* Full-height white fade across the left side of the hero so the copy
   stays readable over the artwork at every size. Sits above the image
   and dark overlay but below the copy (.hero-left, z-index 1). */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  pointer-events: none;
}

/* Mobile: the white fade covers the FULL hero so the whole banner sits
   under the white wash. Desktop keeps the left-side fade only. */
@media (max-width: 767px) {
  .hero-section::before {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.88) 60%,
      rgba(255, 255, 255, 0.82) 100%
    );
  }
}

/* The hero copy sits above the full-height .hero-section::before fade,
   which handles readability at every size (no per-block background). */
.hero-left {
  z-index: 1;
  max-width: 820px;
  padding: 1.5rem 1.5rem 1.5rem 0.75rem;
}

@media (min-width: 768px) {
  .hero-left {
    padding: 1.5rem 2.5rem 1.5rem 0.75rem;
  }
}

/* Small eyebrow tag */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-poppins);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--hero-green);
  margin-bottom: 14px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(255, 255, 255, 0.7);
}
.hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--hero-gold);
}

/* Main heading — compact and fluid */
.hero-heading {
  font-family: var(--font-poppins);
  font-weight: 800;
  font-size: clamp(22px, 6.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--hero-green);
  max-width: 720px;
  margin-bottom: 14px;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 30px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(255, 255, 255, 0.9);
}
.hero-heading-gold {
  color: var(--hero-gold);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 30px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(255, 255, 255, 0.9);
}

/* Description */
.hero-description {
  width: auto;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-700);
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(255, 255, 255, 0.7);
}

/* Keep the description's width in line with the heading text so it stays
   over the light area of the artwork at every size. */
@media (min-width: 768px) {
  .hero-description {
    max-width: 400px;
  }
}
@media (min-width: 900px) {
  .hero-description {
    max-width: 460px;
  }
}
@media (min-width: 1024px) {
  .hero-description {
    max-width: 490px;
  }
}
@media (min-width: 1280px) {
  .hero-description {
    max-width: 560px;
  }
}

/* Button row — compact, side by side */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 1.1rem;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.28s ease, border-color 0.28s ease,
              color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.hero-btn:hover {
  transform: translateY(-2px);
}

.hero-btn-primary {
  background: var(--hero-green);
  color: #ffffff;
}
.hero-btn-primary:hover {
  background: var(--hero-green-dark);
  box-shadow: 0 12px 24px -10px var(--shadow-primary);
}

.hero-btn-secondary {
  background: #ffffff;
  border: 1.5px solid #d7d7d7;
  color: #1f1f1f;
}
.hero-btn-secondary svg {
  color: var(--hero-gold);
}
.hero-btn-secondary:hover {
  border-color: var(--hero-green);
  color: var(--hero-green);
}

/* Compact trust badges */
.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-feature svg {
  width: 16px;
  height: 16px;
  color: var(--hero-green);
  stroke-width: 2;
}
.hero-feature span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink-800);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(255, 255, 255, 0.95), 0 2px 5px rgba(255, 255, 255, 0.75);
}

/* ============================================================
   Org chart — "Living Tree" (About page › Our Organisation)
   ============================================================
   FLAT per-level rows (see templates/partials/org_chart.html):
     - desktop: one centred row per level, a horizontal rail above it,
       vertical stems connecting parent cards → rail → child cards.
     - mobile:  an indented timeline — a left rail per level, horizontal
       ticks into each card, parent stems dropping to the next rail.
   Uses theme vars so it follows the admin's chosen colours.
   ------------------------------------------------------------ */
.org-chart {
  --org-stem: 2.5rem; /* vertical gap for connector stems */
  --org-rail: var(--color-brand-300);
}

/* ---------- Person card ---------- */
.org-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 13.5rem; /* 216px — uniform card size */
  height: 15.5rem; /* 248px — uniform card size */
  max-width: 100%;
  margin-inline: auto;
  background: #ffffff;
  border: 1px solid var(--color-ink-100);
  border-radius: 1rem;
  /* Clip the top accent bar (::before) to the card's rounded corners so it
     fills right up to the curve instead of leaving a notch at each corner. */
  overflow: hidden;
  padding: 1.5rem 1.25rem 1.375rem;
  text-align: center;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.org-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgb(17 24 39 / 0.18);
}
/* Gold + green accent rule across the top of the card */
.org-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(90deg, var(--color-gold-400), var(--color-brand-500));
}

/* Root (Managing Director) card — deep hero green, distinct anchor.
   Same size as every other card; the colour marks the hierarchy. */
.org-card--root {
  border-color: rgb(255 255 255 / 0.12);
  background: var(--hero-green, #0b4f2f);
  color: #ffffff;
  box-shadow: 0 18px 40px -16px rgb(11 79 47 / 0.5);
}
.org-card--root::before {
  background: linear-gradient(90deg, var(--color-gold-400), var(--color-gold-300));
}
.org-card--root .org-card__name {
  color: #ffffff;
}
.org-card--root .org-card__title {
  color: var(--color-gold-300);
}

/* Photo / initials avatar */
.org-avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 3px var(--color-brand-200);
}
.org-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  font-family: var(--font-poppins);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.org-card__name {
  margin-top: 0.875rem;
  font-family: var(--font-poppins);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-ink-900);
}
.org-card__name--pending {
  color: var(--color-ink-500);
  font-weight: 600;
  font-style: italic;
}
.org-card__title {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-700);
}

/* ---------- Levels & connectors (desktop) ---------- */
.org-level {
  position: relative;
}
.org-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.75rem;
  flex-wrap: nowrap;
}
.org-node {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

/* Rail above every non-first level; stems from each card up to it */
.org-level + .org-level {
  margin-top: var(--org-stem);
}
.org-level + .org-level::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--org-rail);
}
.org-level + .org-level .org-row {
  padding-top: var(--org-stem);
}
.org-level + .org-level .org-node::before {
  content: "";
  position: absolute;
  top: calc(var(--org-stem) * -1);
  left: 50%;
  width: 2px;
  height: var(--org-stem);
  transform: translateX(-50%);
  background: var(--org-rail);
}

/* Stem from a parent card down to the next level's rail.
   Drawn on the NODE (not the card) because the card uses overflow:hidden
   to clip its accent bar — a stem on the card would be clipped away. */
.org-node--parent::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: var(--org-stem);
  transform: translateX(-50%);
  background: var(--org-rail);
}

/* ---------- Below 1280px: indented timeline ----------
   The tree keeps every card at the same fixed size (216×248). On widths
   where 4 cards at full size no longer fit in one row (< ~1280px) we switch
   to the indented timeline so the cards never shrink / go out of proportion.
   ------------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .org-chart {
    --org-stem: 2rem;
  }
  .org-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .org-card,
  .org-card--root {
    width: 100%;
    max-width: 21rem;
    height: 15.5rem; /* keep every card the same height as the tree cards */
    margin-inline: 0;
  }
  /* Deeper levels step further right so the hierarchy reads */
  .org-level--2 {
    padding-left: 0;
  }
  .org-level--3,
  .org-level--4,
  .org-level--5 {
    padding-left: 1.5rem;
  }
  .org-level--3 .org-level--4 {
    padding-left: 1.5rem;
  }
  .org-level + .org-level {
    margin-top: 1.75rem;
  }
  /* Vertical left rail for each non-first level */
  .org-level + .org-level::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
  }
  .org-level + .org-level .org-row {
    padding: 0 0 0 1.5rem;
  }
  /* Horizontal tick from the rail into each card */
  .org-level + .org-level .org-node::before {
    top: 2.25rem;
    left: -1.5rem;
    width: 1.5rem;
    height: 2px;
    transform: none;
  }
  /* Parent stem drops from the card's left edge to the next rail */
  .org-node--parent::after {
    top: auto;
    bottom: -1.75rem;
    left: 0;
    width: 2px;
    height: 1.75rem;
    transform: none;
  }
}

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


/* ---------------- Hero responsive breakpoints ---------------- */
@media (min-width: 640px) {
  .hero-features {
    gap: 10px 28px;
  }
}

@media (min-width: 768px) {
  .hero-eyebrow {
    font-size: 13px;
    margin-bottom: 28px;
  }
  .hero-heading {
    font-size: clamp(36px, 4.8vw, 50px);
    line-height: 1.12;
    margin-bottom: 32px;
  }
  .hero-description {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 40px;
  }
  .hero-actions {
    gap: 14px;
    margin-bottom: 48px;
  }
  .hero-btn {
    height: 50px;
    padding: 0 1.75rem;
    font-size: 16px;
  }
  .hero-feature svg {
    width: 18px;
    height: 18px;
  }
  .hero-feature span {
    font-size: 13px;
  }
}

@media (min-width: 1024px) {
  .hero-heading {
    font-size: clamp(38px, 4.4vw, 52px);
  }
}


/* ============================================================
   Gallery � missing Tailwind utilities + lightbox
   (Tailwind CSS is precompiled; these classes aren't in the
   compiled file so they live here in plain CSS.)
   ============================================================ */
.h-64 {
  height: 16rem; /* 256px */
}
.aspect-3-2 {
  aspect-ratio: 3 / 2; /* 1.5:1 — matches the home "Why Choose Us" image */
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.cursor-zoom-out {
  cursor: zoom-out;
}
.translate-y-2 {
  --tw-translate-y: 0.5rem;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0 {
  --tw-translate-y: 0px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group:hover .group-hover\:translate-y-0,
.group:focus-within .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

/* Lightbox overlay */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 20, 12, 0.92);
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.gallery-lightbox.open {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
}
.gallery-lightbox .gallery-lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  max-width: min(720px, 90vw);
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.gallery-lightbox .gallery-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.gallery-lightbox .gallery-lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.gallery-lightbox .gallery-lightbox-prev,
.gallery-lightbox .gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.gallery-lightbox .gallery-lightbox-prev { left: 1.25rem; }
.gallery-lightbox .gallery-lightbox-next { right: 1.25rem; }
.gallery-lightbox .gallery-lightbox-prev:hover,
.gallery-lightbox .gallery-lightbox-next:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 640px) {
  .gallery-lightbox .gallery-lightbox-prev { left: 0.5rem; }
  .gallery-lightbox .gallery-lightbox-next { right: 0.5rem; }
}

/* ============================================================
   Admin — Theme colour picker (live preview)
   The JS sets --pv-* (primary preview) / --sv-* (secondary
   preview) custom properties on .theme-preview as the admin
   drags the colour pickers, so the preview updates instantly.
   ============================================================ */
.theme-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.theme-swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.theme-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgb(0 0 0 / 0.1);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.theme-swatch-label {
  font-size: 9px;
  line-height: 1;
  color: var(--color-ink-400);
}

/* Native colour picker styled to fit the admin form fields */
.theme-color-input {
  width: 100%;
  height: 2.5rem;
  padding: 3px;
  border: 1px solid var(--color-ink-200);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.theme-color-input:focus {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px var(--ring-primary);
}
.theme-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.theme-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 0.375rem;
}
.theme-color-input::-moz-color-swatch {
  border: none;
  border-radius: 0.375rem;
}

.theme-preview {
  border: 1px solid var(--color-ink-200);
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  /* fallback preview values (green/gold default) */
  --pv-50:  #f0fdf4;
  --pv-100: #dcfce7;
  --pv-500: #22c55e;
  --pv-600: #16a34a;
  --pv-700: #15803d;
  --pv-800: #166534;
  --pv-900: #14532d;
  --sv-300: #fde047;
  --sv-400: #facc15;
  --sv-500: #eab308;
  --sv-600: #ca8a04;
  --nv-100: #f3f4f6;
  --nv-200: #e5e7eb;
  --nv-500: #6b7280;
  --nv-600: #4b5563;
  --nv-700: #374151;
  --nv-800: #1f2937;
  --nv-900: #111827;
}
.theme-preview-hero {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: linear-gradient(120deg, var(--pv-900) 20%, var(--pv-800) 60%, var(--pv-700));
  color: #ffffff;
}
.theme-preview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-300);
}
.theme-preview-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--sv-400);
}
.theme-preview-title {
  margin-top: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}
.theme-preview-title em {
  font-style: normal;
  color: var(--sv-400);
}
.theme-preview-copy {
  margin-top: 6px;
  max-width: 30rem;
  font-size: 12px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.85);
}
.theme-preview-hero .theme-preview-btn-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}
.theme-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--pv-600);
}
.theme-preview-btn--accent {
  color: var(--nv-900);
  background: var(--sv-400);
}
.theme-preview-btn:hover {
  background: var(--pv-700);
}
.theme-preview-btn--accent:hover {
  background: var(--sv-500);
}
.theme-preview-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.theme-preview-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nv-800);
}
.theme-preview-heading::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--sv-400);
}
.theme-preview-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--nv-600);
}
.theme-preview-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.theme-preview-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--nv-700);
}
.theme-preview-list svg {
  flex-shrink: 0;
  color: var(--pv-600);
}
.theme-preview-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 0.625rem;
  background: linear-gradient(90deg, var(--pv-700), var(--pv-600));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.theme-preview-link {
  margin-top: 12px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pv-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}