/* =========================================================
   Sigma Marketing: hero, header, offcanvas for Helix Ultimate + SP Page Builder
   Paste ONLY into: Template Options > Custom Code > Custom CSS
   (NOT into custom.scss: that file goes through the SCSS compiler)
   ========================================================= */
:root {
  --sg-void: #080706;
  --sg-coal: #11100D;
  --sg-ivory: #F3EEE4;
  --sg-muted: #958D80;
  --sg-gold: #C98B2B;
  --sg-gold-hi: #EBC27A;
  --sg-gold-lo: #7E561A;
  --sg-line: rgba(201, 139, 43, .22);
  --sg-line-soft: rgba(243, 238, 228, .10);
  --sg-serif: "Noto Serif Display", Georgia, serif;
  --sg-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --sg-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sg-ease: cubic-bezier(.16, 1, .3, 1);
  /* short aliases, in case older addon CSS uses them */
  --gold: #C98B2B; --gold-hi: #EBC27A; --gold-lo: #7E561A; --ease: cubic-bezier(.16, 1, .3, 1);
}
body { background: var(--sg-void); color: var(--sg-ivory); font-family: var(--sg-sans); }

/* ---------- HERO SECTION (SP Page Builder section with CSS class "sigma-hero") ---------- */
.sigma-hero {
  position: relative !important; overflow: hidden; background: var(--sg-void);
  min-height: min(100svh, 980px); display: flex; align-items: flex-end;
}
.sigma-hero > .sppb-row-container,
.sigma-hero > .sppb-container-inner,
.sigma-hero > .sppb-row-overlay ~ * { position: relative; z-index: 2; width: 100%; }
.sigma-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }
.sigma-hero-glow {
  position: absolute; z-index: 0; width: 70vw; aspect-ratio: 1; right: -18vw; top: -10vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 139, 43, .16), transparent 70%);
}
/* film grain over the whole page (optional, delete if not wanted) */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9998; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: sg-grain 1.2s steps(6) infinite;
}
@keyframes sg-grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

/* Hero text (classes used in the Raw HTML addon, or set on SPPB addons via "CSS Class") */
.sigma-eyebrow { font-family: var(--sg-mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sg-gold); display: inline-flex; align-items: center; gap: 12px; }
.sigma-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--sg-gold); }
.sigma-title { font-family: var(--sg-serif); font-weight: 200; font-size: clamp(3.2rem, 9.4vw, 10.5rem); line-height: .9; letter-spacing: -.035em; color: var(--sg-ivory); margin: 28px 0 40px; max-width: 11ch; }
.sigma-title em, .sigma-gold {
  font-style: italic; font-weight: 300;
  background: linear-gradient(100deg, var(--sg-gold-lo) 0%, var(--sg-gold) 28%, var(--sg-gold-hi) 50%, var(--sg-gold) 72%, var(--sg-gold-lo) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sg-sheen 7s var(--sg-ease) infinite;
}
@keyframes sg-sheen { 0%,100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.sigma-hero-foot { display: grid; gap: 28px; padding: 28px 0 48px; border-top: 1px solid var(--sg-line-soft); }
@media (min-width: 900px) { .sigma-hero-foot { grid-template-columns: 1.2fr auto; align-items: end; gap: 56px; } }
.sigma-hero-foot p { color: var(--sg-muted); max-width: 44ch; font-size: 1.05rem; line-height: 1.65; margin: 0; }
.sigma-hero-foot p b { color: var(--sg-ivory); font-weight: 500; }
.sigma-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Gold buttons: use on SPPB Button addon via "CSS Class" = sigma-btn (or sigma-btn solid) */
.sigma-btn, .sigma-btn .sppb-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 26px; border: 1px solid var(--sg-gold); border-radius: 999px; background: transparent; color: var(--sg-ivory);
  font: 500 .8rem/1 var(--sg-sans); letter-spacing: .16em; text-transform: uppercase; isolation: isolate; text-decoration: none;
  transition: color .4s;
}
.sigma-btn::before, .sigma-btn .sppb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sg-gold); transform: translateY(101%); border-radius: inherit; transition: transform .5s var(--sg-ease); }
.sigma-btn:hover, .sigma-btn .sppb-btn:hover { color: var(--sg-void); }
.sigma-btn:hover::before, .sigma-btn .sppb-btn:hover::before { transform: none; }
.sigma-btn.solid, .sigma-btn.solid .sppb-btn { background: var(--sg-gold); color: var(--sg-void); }
.sigma-btn.solid::before, .sigma-btn.solid .sppb-btn::before { background: var(--sg-ivory); }

/* Entrance animation of the hero title (plays once on load) */
.sigma-title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.sigma-title .ln > span { display: inline-block; transform: translateY(105%); animation: sg-up 1.4s var(--sg-ease) .3s forwards; }
.sigma-title .ln:nth-child(2) > span { animation-delay: .42s; }
@keyframes sg-up { to { transform: none; } }

/* ---------- HEADER: transparent over the hero, dark glass when sticky ---------- */
#sp-header { background: transparent; box-shadow: none; border-bottom: 1px solid transparent; transition: background .5s, border-color .5s; }
.home-page #sp-header { position: absolute; top: 0; left: 0; right: 0; z-index: 99; }
#sp-header.header-sticky { position: fixed; background: rgba(8, 7, 6, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: var(--sg-line-soft); }
#sp-header .logo img { height: 42px; width: auto; }
@media (max-width: 560px) { #sp-header .logo img { height: 36px; } }

/* Offcanvas toggle (hamburger) */
#offcanvas-toggler, .offcanvas-toggler-right { color: var(--sg-ivory) !important; }
#offcanvas-toggler .burger-icon > span, .offcanvas-toggler-right .burger-icon > span { background-color: var(--sg-ivory) !important; height: 1px; }
#offcanvas-toggler:hover .burger-icon > span { background-color: var(--sg-gold-hi) !important; }