/* ============================================================
   SolidState dark-aura theme layer — v2 (warm, no navy/orange)
   Loaded after tw.min.css on every page. Remove this file's
   <link> to revert to the light cream theme.
   Palette: ink #100D0B / panel #171310 / card #1B1613
            cream #F2E8DC / coral #FF5A48 only
   ============================================================ */

/* ---- base: warm ink body with the logo-style aura glow ---- */
html { background: #0D0A09; }
body {
  background:
    radial-gradient(1200px 900px at 82% -4%, rgba(255,90,72,.5) 0%, rgba(255,90,72,.16) 45%, transparent 72%),
    radial-gradient(950px 800px at 100% 38%, rgba(255,142,60,.22) 0%, transparent 62%),
    radial-gradient(1000px 850px at 2% 100%, rgba(216,64,120,.30) 0%, rgba(216,64,120,.10) 45%, transparent 66%),
    radial-gradient(750px 700px at 30% 55%, rgba(150,50,140,.14) 0%, transparent 60%),
    linear-gradient(160deg, #1C1512 0%, #120E0C 55%, #0E0B09 100%) !important;
  /* explicit solid colour AFTER the shorthand — Safari 26 samples
     background-color (not gradients) when tinting the status bar */
  background-color: #100D0B !important;
  background-attachment: fixed !important;
  color: #F2E8DC;
}

/* opaque strip under the iOS status bar — Safari shows page content there otherwise */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #0D0A09; z-index: 100;
}

/* film grain, like the IG kit */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- navigation: dark in every state, on every page ----
   iOS 26 Liquid Glass rule: the FIXED element itself must be transparent
   with no backdrop-filter — Safari samples it to tint the status bar.
   The glass lives on an absolute child (.nav-glass) instead. */
#navbar, nav[id="navbar"], #navbar.scrolled {
  background: transparent !important;
  border-color: rgba(242,232,220,.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}
.nav-glass {
  /* bleeds 140px above the nav so the glass always covers the status-bar
     region, regardless of what Safari reports for safe-area insets */
  position: absolute !important; left: 0; right: 0; bottom: 0; top: -140px; z-index: 0;
  background: rgba(13,10,9,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* only the nav's content wrapper — NOT .nav-glass, NOT #mobileMenu */
#navbar > .max-w-7xl { position: relative; z-index: 1; }
#navbar #mobileMenu { z-index: 1; }
#navbar a { color: #F2E8DC; }
#navbar .nav-link.active, #navbar .nav-link:hover { color: #FF5A48; }

/* ---- surfaces ---- */
/* dark panels: warm charcoal (kills the navy) */
[class*="bg-[#12121A]"] { background-color: #171310 !important; }
[class*="bg-[#0A0A0F]"], [class*="bg-[#0D0D0D]"], [class*="bg-[#111111]"],
[class*="bg-[#1E1E1E]"], [class*="bg-[#222]"] { background-color: #100D0B !important; }
/* translucent ink tints */
[class*="bg-[#12121A]/1"], [class*="bg-[#12121A]/3"] { background-color: rgba(242,232,220,.07) !important; }
[class*="bg-[#12121A]/5"] { background-color: rgba(242,232,220,.10) !important; }

/* cream surfaces: transparent by default (sections, wrappers, panels)… */
[class*="bg-[#F2E8DC]"] { background-color: transparent !important; }
/* …but rounded cream CARDS/TILES become warm ink cards */
[class*="bg-[#F2E8DC]"][class*="rounded"] {
  background-color: #1B1613 !important;
  border: 1px solid rgba(242,232,220,.10);
}
/* translucent cream chips */
[class*="bg-[#F2E8DC]/9"] { background-color: rgba(242,232,220,.07) !important; }

/* white cards → warm ink cards */
.bg-white { background-color: #1B1613 !important; border: 1px solid rgba(242,232,220,.10); }
[class*="bg-white/60"] { background-color: rgba(242,232,220,.08) !important; }

/* inline light backgrounds: sections dark, cream CTA buttons stay cream */
[style*="background:#F2E8DC"]:not([style*="color:#0A0A0F"]):not([style*="color: #0A0A0F"]) {
  background-color: #1B1613 !important;
}

/* ---- ink text becomes cream ---- */
[class*="text-[#12121A]"] { color: #F2E8DC !important; }
[class*="text-[#12121A]/8"], [class*="text-[#12121A]/7"] { color: rgba(242,232,220,.8) !important; }
[class*="text-[#12121A]/6"], [class*="text-[#12121A]/5"] { color: rgba(242,232,220,.62) !important; }
[class*="text-[#12121A]/4"], [class*="text-[#12121A]/3"] { color: rgba(242,232,220,.45) !important; }
.text-black { color: #F2E8DC !important; }
[style*="color:#12121A"], [style*="color: #12121A"],
[style*="color:#0A0A0F"], [style*="color: #0A0A0F"] { color: #F2E8DC !important; }
/* …except inside cream buttons/tabs, where dark text must stay dark */
[style*="background:#F2E8DC"][style*="color:#0A0A0F"] { color: #0A0A0F !important; }

/* ink borders become cream hairlines */
[class*="border-[#12121A]"] { border-color: rgba(242,232,220,.14) !important; }
[style*="border-color:#12121A"] { border-color: rgba(242,232,220,.14) !important; }
[style*="color:rgba(18,18,26"] { color: rgba(242,232,220,.65) !important; }
[style*="color:rgba(74,74,74"] { color: rgba(242,232,220,.6) !important; }

/* dark pill buttons on former light bg flip to cream
   (:not guard — don't catch elements that only have hover:bg-[#12121A]) */
a[class*="bg-[#12121A]"]:not([class*="hover:bg-[#12121A]"]):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="blog-card"]),
button[class*="bg-[#12121A]"]:not([class*="hover:bg-[#12121A]"]):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]) {
  background-color: #F2E8DC !important; color: #0D0A09 !important;
}
/* card-style links stay dark cards */
a.blog-card, a[class*="bg-[#12121A]"][class*="rounded-2xl"] {
  background-color: #171310 !important; border: 1px solid rgba(242,232,220,.08);
}
/* hover state for converted white cards keeps its lift */
.bg-white[class*="hover:"]:hover { background-color: #2A211B !important; }
.bg-white[class*="hover:"]:hover [class*="text-[#12121A]"] { color: #F2E8DC !important; }

/* CTA cards lose the box — text floats on the aura */
[class*="bg-[#12121A]"][class*="rounded-3xl"][class*="text-center"],
[class*="rounded-3xl"][class*="text-center"][class*="p-12"] {
  background-color: transparent !important;
  border: none !important;
}

/* ---- aurora: same motion, coral/ember dominant with a rose edge ---- */
.aurora-bg::before {
  background: linear-gradient(135deg,
    rgba(255,90,72,.55) 0%,
    rgba(255,142,60,.30) 35%,
    rgba(255,110,80,.14) 60%,
    rgba(216,64,120,.16) 85%,
    rgba(255,90,72,.34) 100%) !important;
}
/* sections that dampened the aurora inline get a visible floor */
.aurora-bg[style*="opacity:0.1"], .aurora-bg[style*="opacity:0.12"],
.aurora-bg[style*="opacity:0.35"], .aurora-bg[style*="opacity:0.45"],
.aurora-bg[style*="opacity: 0.1"], .aurora-bg[style*="opacity: 0.35"] {
  opacity: .6 !important;
}

/* ---- spotlight tabs: invert-on-select ---- */
.tab-btn {
  background: rgba(242,232,220,.05) !important;
  border-color: rgba(242,232,220,.14) !important;
  color: #F2E8DC !important;
}
.tab-btn:hover { background: rgba(242,232,220,.12) !important; }
.tab-btn[aria-selected="true"] { background: #F2E8DC !important; }
.tab-btn[aria-selected="true"] * { color: #0D0A09 !important; }
.tab-btn[aria-selected="true"] [class*="text-["] { color: rgba(13,10,9,.65) !important; }
.tab-btn[aria-selected="true"] .dot { background: #FF5A48 !important; }

/* process step deliverable chips: visible outline + text */
.step-card [class*="border-white/15"] {
  border-color: rgba(242,232,220,.38) !important;
  color: rgba(242,232,220,.85) !important;
}

/* ---- accents that were re-pointed at coral ---- */
.seo-bar > span { background: linear-gradient(90deg, #FF5A48, #F2E8DC) !important; }
.gauge { background: conic-gradient(#FF5A48 0% 78%, rgba(242,232,220,.08) 78% 100%) !important; }

/* ---- typography: Inter body, Unbounded headings, mono labels ---- */
body, p, li, a, button, input, textarea, select, td, th {
  font-family: 'Inter', sans-serif;
}
h1,h2,h3,h4,h5,h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  font-family: 'Unbounded', sans-serif !important;
}
[class*="tracking-widest"], [class*="tracking-wider"], code, pre {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ---- mobile rhythm: tighten section gaps (desktop untouched) ---- */
@media (max-width: 768px) {
  section:not(:first-of-type) { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section:first-of-type { padding-bottom: 2.5rem !important; }
}

/* ---- small phones: heading floor + horizontal lock (Unbounded is wide) ---- */
html, body { overflow-x: hidden; }
@media (max-width: 480px) {
  /* sized so the longest single word (ACCOUNTANT / RESTAURANT) fits a
     390px viewport in Unbounded Black — 11.5vw clipped on industry pages */
  h1 { font-size: clamp(2rem, 9.5vw, 2.9rem) !important; }
  h2 { font-size: clamp(1.6rem, 7.5vw, 2.3rem) !important; }
  h1, h2 { overflow-wrap: break-word; }
}

/* ---- coverage for ink colours the mappings above missed ----
   (blog article styles + portfolio pages use #0D0D0D/#111111/#5A5A5A) */
[style*="color:#0D0D0D"], [style*="color: #0D0D0D"],
[style*="color:#111111"], [style*="color: #111111"] { color: #F2E8DC !important; }
/* …but dark text sitting ON a coral surface must stay dark */
[style*="background:#FF5A48"] [style*="color:#0D0D0D"],
[style*="background:#FF5A48"] [style*="color:#111111"],
[style*="background:#FF5A48"][style*="color:#0A0A0F"],
[style*="background: #FF5A48"][style*="color:#0A0A0F"] { color: #0D0A09 !important; }
/* mid-grey body copy (rumble/coastall/northcoast briefs) → readable cream */
[style*="color:#5A5A5A"], [style*="color: #5A5A5A"],
[style*="color:#4A4A4A"], [style*="color: #4A4A4A"],
[style*="color:#2C2C2C"], [style*="color: #2C2C2C"] { color: rgba(242,232,220,.68) !important; }
/* client-brand navy headings (coastall #1A1A2E / northcoast #0D1B3E) → cream */
[style*="color:#1A1A2E"], [style*="color: #1A1A2E"],
[style*="color:#0D1B3E"], [style*="color: #0D1B3E"] { color: #F2E8DC !important; }
/* client-brand navy/black panels → warm ink (palette kills navy) */
[style*="background:#1A1A2E"], [style*="background: #1A1A2E"],
[style*="background:#0D1B3E"], [style*="background: #0D1B3E"],
[style*="background:#0D0D0D"], [style*="background: #0D0D0D"] { background-color: #171310 !important; }

/* ---- blog article body: page-level <style> rules set ink text ---- */
.article-body p, .article-body li { color: rgba(242,232,220,.72) !important; }
.article-body h2, .article-body h3, .article-body strong { color: #F2E8DC !important; }
.article-body a { color: inherit; }
.pull-quote { background: rgba(242,232,220,.07) !important; color: #F2E8DC !important; }
.stat-box { background: #1B1613 !important; border-color: rgba(242,232,220,.14) !important; }

/* ---- portfolio back-link ----
   Bug: the hero content wrapper (also z-10, later in the DOM) paints over
   the back-link wrapper, so taps hit its transparent padding, not the link.
   Lift the link above it, and offset for the iOS safe-area-grown navbar. */
.absolute.top-28 {
  top: calc(7rem + env(safe-area-inset-top, 0px)) !important;
  z-index: 30 !important;
}

/* ---- forms on dark ---- */
.form-label { color: rgba(242,232,220,.72) !important; }
/* service-interest chips */
.service-chip label {
  background: rgba(242,232,220,.05) !important;
  border-color: rgba(242,232,220,.3) !important;
  color: #F2E8DC !important;
}
.service-chip input[type="checkbox"]:checked + label {
  background: #FF5A48 !important;
  border-color: #FF5A48 !important;
  color: #0D0A09 !important;
}
input, textarea, select {
  background-color: rgba(242,232,220,.06) !important;
  border-color: rgba(242,232,220,.16) !important;
  color: #F2E8DC !important;
}
input::placeholder, textarea::placeholder { color: rgba(242,232,220,.4); }