/* ============================================================
   tw-patch.css — Tailwind utilities used by the demo pages but
   missing from the compiled build (index-BEo4h1Yo.css).
   Load AFTER index-BEo4h1Yo.css. Values match Tailwind v3 output
   and the site's HSL theme variables.
   ============================================================ */

/* Position / display */
.bottom-4 { bottom: 1rem }
.left-3 { left: .75rem }
.left-4 { left: 1rem }
.inline-block { display: inline-block }

/* Sizing */
.h-16 { height: 4rem }
.max-w-xs { max-width: 20rem }
.w-1\/2 { width: 50% }
.w-1\/3 { width: 33.333333% }
.w-2\/3 { width: 66.666667% }

/* Grid / gap / spacing between children */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.gap-x-8 { -moz-column-gap: 2rem; column-gap: 2rem }
.gap-y-3 { row-gap: .75rem }
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
}

/* Padding (order matters: p < py < pb/pt, like Tailwind) */
.p-5 { padding: 1.25rem }
.p-20 { padding: 5rem }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
.py-20 { padding-top: 5rem; padding-bottom: 5rem }
.pb-0\.5 { padding-bottom: .125rem }
.pb-16 { padding-bottom: 4rem }
.pt-6 { padding-top: 1.5rem }
.pt-32 { padding-top: 8rem }

/* Margin */
.mb-1\.5 { margin-bottom: .375rem }
.mb-6 { margin-bottom: 1.5rem }

/* Typography */
.italic { font-style: italic }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Border radius */
.rounded-none { border-radius: 0 }

/* Colors with opacity modifiers */
.border-primary-foreground\/20 { border-color: hsl(var(--primary-foreground) / .2) }
.bg-primary\/10 { background-color: hsl(var(--primary) / .1) }
.bg-primary\/70 { background-color: hsl(var(--primary) / .7) }
.bg-primary\/98 { background-color: hsl(var(--primary) / .98) }
.text-muted-foreground\/30 { color: hsl(var(--muted-foreground) / .3) }
.text-muted-foreground\/40 { color: hsl(var(--muted-foreground) / .4) }
.text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / .5) }
.text-primary-foreground\/60 { color: hsl(var(--primary-foreground) / .6) }
.group:hover .group-hover\:bg-primary\/5 { background-color: hsl(var(--primary) / .05) }

/* Effects */
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Responsive: sm (640px) */
@media (min-width: 640px) {
  .sm\:flex-none { flex: none }
  .sm\:items-center { align-items: center }
  .sm\:min-w-\[140px\] { min-width: 140px }
  .sm\:min-w-\[160px\] { min-width: 160px }
}

/* Responsive: md (768px) */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .md\:flex-row { flex-direction: row }
  .md\:items-start { align-items: flex-start }
  .md\:items-end { align-items: flex-end }
  .md\:justify-between { justify-content: space-between }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1 }
}

/* Responsive: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

/* ============================================================
   Hero overlay fix (backported from the WordPress theme).
   The compiled build defines .bg-gradient-hero-overlay with
   invalid color syntax — hsla(var(--navy),.7) mixes space-
   separated channels with a comma alpha — so browsers dropped
   the declaration and the scrim NEVER rendered. Rebuilt with
   valid syntax, layered for arbitrary photos: diagonal navy
   scrim over the left text column + vertical bands for the
   fixed nav (top) and slide indicators (bottom).
   ============================================================ */
.bg-gradient-hero-overlay {
  background:
    linear-gradient(100deg,
      hsl(var(--navy) / 0.78) 0%,
      hsl(var(--navy) / 0.48) 38%,
      hsl(var(--navy) / 0.12) 68%,
      hsl(var(--navy) / 0.05) 100%),
    linear-gradient(to bottom,
      hsl(var(--navy) / 0.55) 0%,
      hsl(var(--navy) / 0.15) 30%,
      hsl(var(--navy) / 0.15) 65%,
      hsl(var(--navy) / 0.60) 100%);
}

/* Soft navy text shadow on hero copy (second line of defense) */
#hero-slider h1,
#hero-slider p {
  text-shadow: 0 2px 24px hsl(var(--navy) / 0.55), 0 1px 3px hsl(var(--navy) / 0.45);
}

/* ============================================================
   Utilities used by the demo markup but missing from the
   compiled build (found by the WP-theme coverage audit).
   mt-1: card/detail heading spacing · top-3: similar-card
   badge position · sm:min-w-[200px]: sort dropdown width.
   ============================================================ */
.mt-1 { margin-top: .25rem }
.top-3 { top: .75rem }
@media (min-width: 640px) {
  .sm\:min-w-\[200px\] { min-width: 200px }
}

/* Alternating two-column layouts (services page) */
@media (min-width: 1024px) {
  .lg\:order-1 { order: 1 }
  .lg\:order-2 { order: 2 }
}

/* Utilities used by the inner pages (about/services/why-panama/contact/
   privacy) that are missing from the compiled build */
.border-gold { border-color: hsl(var(--gold)) }
.border-gold-dark { border-color: hsl(var(--gold-dark)) }
.mt-8 { margin-top: 2rem }
.mt-20 { margin-top: 5rem }
.rounded { border-radius: .25rem }
.text-muted-foreground\/60 { color: hsl(var(--muted-foreground) / .6) }

/* Home-section "learn more" links */
.mt-5 { margin-top: 1.25rem }
.hover\:text-gold-dark:hover { color: hsl(var(--gold-dark)) }

/* Found missing by a full Tailwind-coverage audit across all 3
   proposals (2026-07-30) — Proposal 2 "Heritage Editorial" reskin
   introduced markup (single-column footer, numbered feature lists,
   Leadership avatars) using utilities the frozen build never compiled. */
.w-20 { width: 5rem }
.h-20 { height: 5rem }
.gap-10 { gap: 2.5rem }
.gap-x-6 { column-gap: 1.5rem }
.gap-x-10 { column-gap: 2.5rem }
.gap-y-2 { row-gap: .5rem }
.gap-y-6 { row-gap: 1.5rem }
.max-w-xl { max-width: 36rem }
.tracking-\[0\.15em\] { letter-spacing: 0.15em }
.tracking-\[0\.1em\] { letter-spacing: 0.1em }
.h-44 { height: 11rem }
.ml-3 { margin-left: .75rem }
.pt-5 { padding-top: 1.25rem }
.-mt-3 { margin-top: -.75rem }
.text-6xl { font-size: 3.75rem; line-height: 1 }
.text-gold\/25 { color: hsl(var(--gold) / .25) }
@media (min-width: 768px) {
  .md\:grid-cols-\[220px_1fr\] { grid-template-columns: 220px 1fr }
  .md\:grid-cols-\[240px_1fr\] { grid-template-columns: 240px 1fr }
  .md\:h-full { height: 100% }
  .md\:h-96 { height: 24rem }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .md\:left-12 { left: 3rem }
}
.justify-end { justify-content: flex-end }
.pb-10 { padding-bottom: 2.5rem }
.from-primary\/70 {
  --tw-gradient-from: hsl(var(--primary) / .7) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.pb-24 { padding-bottom: 6rem }
.mt-16 { margin-top: 4rem }
.px-12 { padding-left: 3rem; padding-right: 3rem }
.space-y-8>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)) }
@media (min-width: 640px) {
  .sm\:block { display: block }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
.leading-snug { line-height: 1.375 }
.pt-10 { padding-top: 2.5rem }
.py-12 { padding-top: 3rem; padding-bottom: 3rem }
.max-w-4xl { max-width: 56rem }
.gap-y-10 { row-gap: 2.5rem }
.via-primary\/10 {
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / .1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}