/* ==========================================================================
   Branding N Beyond - site styles (loaded AFTER tailwind.css)
   ========================================================================== */

/* ---------- Base ---------- */
[hidden]{display:none!important}   /* the HTML `hidden` attribute must always win over display utilities */
html { scroll-padding-top: 6rem; }
body { color-scheme: dark; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }

:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

body.modal-open { overflow: hidden; }
body.drawer-open .wa-float { display: none; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: .5rem;
  background: #D4AF37;
  color: #070709;
  font-weight: 700;
  font-size: .8rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Custom gold scrollbar ---------- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #070709; }
::-webkit-scrollbar-thumb {
  background: #2b261b;
  border-radius: 4px;
  border: 1px solid #aa771c44;
}
::-webkit-scrollbar-thumb:hover { background: #d4af37; }

/* ---------- Gold gradients ---------- */
.gold-gradient-text {
  color: #D4AF37; /* fallback */
  background: linear-gradient(135deg, #FFF6D6 0%, #F5E4B2 25%, #D4AF37 55%, #AA771C 85%, #E8CE79 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-gradient-text { -webkit-text-fill-color: currentColor; background: none; }
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #AA771C 0%, #D4AF37 45%, #F5E4B2 75%, #D4AF37 100%);
  color: #070709;
  cursor: pointer;
}
.gold-gradient-bg:hover {
  background: linear-gradient(135deg, #c79532 0%, #e5c35c 45%, #fff2c4 75%, #c79532 100%);
}

/* ---------- Cards ---------- */
.glass-gold-card {
  background: rgba(18, 19, 25, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.22);
  transition: border-color .35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1),
              transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-gold-card:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 16px 36px -12px rgba(212, 175, 55, 0.22);
  transform: translateY(-3px);
}
/* Big containers that hold forms / media should not jump while you type */
.glass-gold-card:has(form):hover,
.glass-gold-card:has(video[controls]):hover {
  transform: none;
}
@media (hover: none) {
  .glass-gold-card:hover { transform: none; }
}

/* Dropdown + modal surfaces (solid, no lift) */
.dropdown-card {
  background: rgba(11, 12, 16, 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.modal-panel {
  background: rgba(9, 10, 14, 0.98);
}

/* ---------- Form controls ---------- */
.glass-gold-input {
  font-size: 1rem;              /* 16px everywhere (also stops iOS zoom-on-focus) */
  line-height: 1.4;
  background: rgba(11, 12, 16, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #f8fafc;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.glass-gold-input::placeholder { color: #78716c; }
.glass-gold-input:focus {
  border-color: #D4AF37;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
  outline: none;
}
select.glass-gold-input { appearance: auto; }
select.glass-gold-input option { background: #0b0c10; color: #f8fafc; }


/* ---------- Ambient glow (decorative, fixed so it never adds scroll width) ---------- */
.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gold-glow-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.9) 0%, rgba(170, 119, 28, 0.25) 45%, transparent 70%);
  opacity: 0.14;
}
.gold-glow-orb.orb-1 { width: min(34rem, 90vw);  height: min(34rem, 90vw);  top: -8rem;  left: -6rem; }
.gold-glow-orb.orb-2 { width: min(44rem, 110vw); height: min(44rem, 110vw); top: 30%;    right: -14rem; opacity: .10; }
.gold-glow-orb.orb-3 { width: min(30rem, 90vw);  height: min(30rem, 90vw);  bottom: -8rem; left: 25%; opacity: .12; }

/* ---------- Video container (16:9) ---------- */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #000;
}
.video-container iframe,
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Logo marquee ---------- */
.marquee-track { will-change: transform; }
.marquee-track:hover { animation-play-state: paused; }

/* ---------- Contact map ---------- */
/* NOTE: never put `filter`, `backdrop-filter` or `transform` on the map box or
   the <iframe> - Chrome/Safari paint the iframe solid black. */
.map-card {
  background: #121319;
  isolation: isolate;
}
.map-card::before {
  content: "Loading map\2026";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #78716c;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: -1;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #11131a 0%, #0a0b10 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  color: #d6d3d1;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .animate-marquee-left,
  .animate-ping,
  .animate-pulse { animation: none !important; }
  .glass-gold-card, .glass-gold-card:hover { transition: none; transform: none; }
}


/* ==========================================================================
   TYPOGRAPHY SYSTEM  -  one scale, four text colours, used on every page
   --------------------------------------------------------------------------
   Sizes : hero / h1 / h2 / h3 / h4 (all Cinzel) / lead 19 / body 16 (every paragraph) / link 15 / caption+labels+buttons+nav 13
   Colours: white (headings) · #d6d3d1 (body) · #a8a29e (muted) · gold (accent)
   Default colours use :where() so utilities still win; .t-white/.t-gold are explicit and beat `a{color:inherit}`.
   ========================================================================== */
:root {
  --c-head:   #ffffff;
  --c-body:   #d6d3d1;
  --c-muted:  #a8a29e;
  --c-accent: #D4AF37;
  --f-display: "Cinzel", Georgia, serif;
  --f-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html { font-size: 16px; }
body {
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-body);
  -webkit-text-size-adjust: 100%;
}

/* Headings */
.t-hero, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.t-hero { font-size: clamp(2.125rem, 1.25rem + 3.6vw, 3.75rem); line-height: 1.12; font-weight: 800; }
.t-h1   { font-size: clamp(2rem, 1.25rem + 3vw, 3.25rem);     line-height: 1.15; font-weight: 800; }
.t-h2   { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem);    line-height: 1.2; }
.t-h3   { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); line-height: 1.25; }
.t-h4   { font-size: 1.125rem; line-height: 1.3; font-weight: 700; letter-spacing: .005em; }
:where(.t-hero, .t-h1, .t-h2, .t-h3, .t-h4) { color: var(--c-head); }

/* Paragraph text */
.t-lead  { font-size: clamp(1rem, .94rem + .35vw, 1.1875rem); line-height: 1.75; }
.t-body  { font-size: 1rem;     line-height: 1.75; }
.t-small { font-size: .9375rem; line-height: 1.7; }
.t-link  { font-size: .9375rem; line-height: 1.6; }
:where(.t-lead, .t-body, .t-small) { color: var(--c-body); }

/* Captions, eyebrows, labels, buttons, nav */
.t-cap {
  font-size: .8125rem; line-height: 1.5; font-weight: 500; letter-spacing: .03em;
}
.t-cap.uppercase { letter-spacing: .1em; font-weight: 600; }
:where(.t-cap) { color: var(--c-muted); }

.t-eyebrow {
  font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
:where(.t-eyebrow) { color: var(--c-accent); }

.t-label {
  display: block;
  font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
:where(.t-label) { color: var(--c-body); }

.t-btn {
  font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.t-nav {
  font-size: .8125rem; line-height: 1.4; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.t-menu { font-size: 1rem; line-height: 1.5; font-weight: 500; }

.t-stat {
  font-family: var(--f-display); font-weight: 700; line-height: 1.2;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
}
:where(.t-stat) { color: var(--c-accent); }

/* Colour helpers (low specificity on purpose) */
.t-white { color: var(--c-head); }     /* normal specificity: must beat Tailwind's  a { color: inherit } */
.t-gold  { color: var(--c-accent); }
.t-cap.t-gold, .t-small.t-gold { font-weight: 600; }

/* ---------- Logo ---------- */
.brand-logo { display: block; }

/* ---------- Hero video (full width, nothing written on top of it) ---------- */
.hero-video-section {
  position: relative;
  width: 100%;
  height: clamp(320px, 56.25vw, calc(100svh - 7.5rem));
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid rgba(212, 175, 55, .2);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.hero-video-fade {           /* soft blend into the page, no text */
  position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: linear-gradient(to top, #070709, transparent);
  pointer-events: none;
}
.hero-ctl {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #D4AF37; font-size: .75rem;
  background: rgba(0, 0, 0, .65);
  border: 1px solid rgba(212, 175, 55, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s ease, color .2s ease;
}
.hero-ctl:hover { background: #D4AF37; color: #070709; }
.hero-ctl-toggle { position: absolute; left: 1rem; bottom: 1rem; z-index: 5; }   /* left: the floating WhatsApp button lives bottom-right */

/* ---------- Client logo placeholders ---------- */
.client-logo {
  flex: none;
  width: 9.5rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .75rem;
  transition: transform .3s ease, filter .3s ease;
}
@media (min-width: 640px) { .client-logo { width: 11rem; height: 4.5rem; } }
.client-logo img { width: 100%; height: 100%; object-fit: contain; }
.client-logo:hover { transform: translateY(-2px); }

/* ---------- Media tiles (service galleries) ---------- */
.media-tile {
  position: relative; overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(212, 175, 55, .28);
  background: #0b0c10;
  margin: 0;
}
.media-tile > img, .media-tile > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media-cap {
  position: absolute; left: .75rem; bottom: .75rem; right: .75rem;
  padding: .35rem .7rem; width: fit-content; max-width: calc(100% - 1.5rem);
  font-weight: 600; line-height: 1.4;
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: .5rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- Team ---------- */
.team-photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0b0c10;
}
.team-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 19, 25, .95) 100%);
  pointer-events: none;
}

/* ---------- Broken-image fallback (set by main.js) ---------- */
img.img-fallback {
  background:
    radial-gradient(circle at 50% 35%, rgba(212,175,55,.25), transparent 60%),
    linear-gradient(135deg, #15161d, #0b0c10);
  object-fit: contain !important;
}


/* ---------- Instagram live feed ---------- */
.ig-status {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .5rem;
  font-size: .8125rem; line-height: 1.4; font-weight: 600; letter-spacing: .03em;
  color: var(--c-muted);
}
.ig-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: #78716c; flex: none; }
.ig-status[data-state="live"] { color: #d6d3d1; }
.ig-status[data-state="live"] .ig-dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: igPulse 2s infinite; }
.ig-status[data-state="loading"] .ig-dot { background: #D4AF37; animation: igPulse 1.2s infinite; }
.ig-status[data-state="featured"] .ig-dot { background: #D4AF37; }
@keyframes igPulse { 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

.ig-skeleton {
  height: 22rem; border-radius: .75rem;
  border: 1px solid rgba(212, 175, 55, .15);
  background: linear-gradient(100deg, #121319 30%, #1a1c24 50%, #121319 70%);
  background-size: 200% 100%;
  animation: igShimmer 1.4s linear infinite;
}
@keyframes igShimmer { to { background-position: -200% 0; } }
@media (max-width: 639px) {
  #instagramFeedGrid > :nth-child(n+5) { display: none; }   /* phones: latest 4 only */
}
@media (prefers-reduced-motion: reduce) {
  .ig-dot, .ig-skeleton { animation: none !important; }
}