/* ===========================================================================
   RELENTIX - BRAND GUIDELINES v1.0 overlay
   Source: RELENTIX/BRAND GUIDELINES (BRAND GUIDELINES.md, brand-tokens.json)
   Applies: digital palette (bg #020617, brand blue #00A3FF, purple/pink
            atmosphere), font trinity (Saira Condensed / EB Garamond /
            JetBrains Mono), spacing, motion tokens, section-label spec.
   Radius and layout are intentionally unchanged (colors + type reskin only).
   =========================================================================== */
:root{
  /* type families, mapped to this site's existing --sans/--serif/--mono vars */
  --ff-display:'Saira Condensed',system-ui,sans-serif;   /* all H1–H6 */
  --ff-body:'EB Garamond',Georgia,serif;                  /* prose, captions */
  --ff-mono:'JetBrains Mono',monospace;                   /* labels, nav, UI */

  /* type scale */
  --fs-hero:clamp(64px,11vw,140px);
  --fs-h2:clamp(42px,6.5vw,96px);
  --fs-h3:clamp(28px,4vw,56px);
  --fs-h4:clamp(20px,2.5vw,32px);
  --fs-body:clamp(16px,1.1vw,18px);
  --fs-sm:clamp(12px,.9vw,14px);
  --fs-xs:clamp(10px,.7vw,12px);

  /* spacing scale */
  --sp-section:clamp(100px,12vw,160px);
  --sp-gap:clamp(24px,3vw,48px);
  --sp-container:min(92%,1400px);

  /* radius scale (available, not force-applied — see note above) */
  --r-none:0px; --r-sm:2px; --r-md:4px; --r-lg:6px;

  /* shadows, using this site's own brass accent rather than the guideline's blue */
  --shadow-glass:0 20px 60px rgba(0,0,0,.3);
  --shadow-glow-brand:0 0 36px rgba(0,163,255,.25);
  --c-brand:#00A3FF; --c-brand-pink:#FFABEE; --c-brand-purple:#AB00A2;
  --shadow-card-elevation:0 30px 60px -25px rgba(0,0,0,.65);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.25,1,.5,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.25s; --dur-med:.5s; --dur-slow:1s;

  /* breakpoints — documented reference only; most existing @media rules are
     tuned to specific component content rather than this abstract scale, so
     they are intentionally left as-is rather than mass-rewritten */
  --bp-mobile:480px; --bp-tablet:768px; --bp-desktop:1024px; --bp-wide:1400px;

  /* brass-adapted glassmorphism recipe (see .glass-brass below) */
  --glass-brass-base:rgba(0,163,255,.05);
  --glass-brass-border:rgba(0,163,255,.16);
  --glass-brass-border-hi:rgba(255,255,255,.14);
  --glass-brass-shine:rgba(255,255,255,.1);
}

/* ---------- typography roles ---------- */
/* prose gets the editorial serif; UI chrome (nav, buttons, forms, labels)
   stays on the site's existing sans/mono so controls don't turn into body text */
p,li,blockquote,.lead,.pd,.manifesto,.mut,
.phase-l p,.ph-chips+p,.svc-purpose,.info-row small,
.fa p,.fq-aside p,.work-lead,.brief-lead,.val p,.tm-bd p,
.pc .bd small,.voices q,.tcard q{
  font-family:var(--ff-body);
}
.nav,.nav *,.btn,.btn *,button,input,select,textarea,
.hero-jump a,.phase-nav a,.curtain nav a,.f-col a,.f-mail,.f-go{
  font-family:var(--sans);
}

h1,h2,h3,h4,.h2,
.hero h1,.page-hero h1,.work-h1,.brief-h1,
.phase-l h2,.cta-band h2,.svc-card h3,
.tm-bd h3,.info-row b,.val h3,.pc .bd b,
.fq button span{
  font-family:var(--ff-display);
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* body copy defaults to the editorial serif; UI chrome is set to mono below */
body{font-family:var(--ff-body)}

/* accent words inside headings: same display family (guidelines forbid serif
   headings), picked out in brand blue instead of switching typeface */
h1 em,h2 em,h3 em,h4 em,.h2 em,
h1 .serif,h2 .serif,h3 .serif,.h2 .serif,
.hero h1 em,.page-hero h1 em,.work-h1 em,
.phase-l h2 em,.cta-band h2 em,.brief-h1 em,
.lp-name em,.cta-h em,.svc-card h3 em,.rs-head h2 em{
  font-family:var(--ff-display)!important;
  font-style:normal!important;
  text-transform:uppercase;
  letter-spacing:inherit;
}

/* italic accents outside headings (quotes, marquee, tags) use EB Garamond italic */
em,.serif,.pkg .tag,.studio-band blockquote{
  font-family:var(--ff-body);
  font-style:italic;
  text-transform:none;
}

/* UI/body copy stays off the display font — only true headings go condensed+caps */
p,li,.lead,.pd,.mut,input,select,textarea,.btn span,.fq-aside p{
  text-transform:none;
}

/* section label spec — already matches this site's .eyebrow component */
.eyebrow{font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.3em}

/* ---------- spacing scale ---------- */
section{padding:var(--sp-section) 0}

/* ---------- glassmorphism recipe, applied to this site's existing glass surfaces ---------- */
.glow-card,.nav.over-dark,.phase-nav .bar,.work-form-card,.brief-sheet{
  box-shadow:var(--shadow-card-elevation);
}

/* brass-adapted version of the ZIP's glass-panel recipe — same blur/border/
   shine layering technique, re-parameterized for the brass/cream palette
   instead of the ZIP's white-on-navy values. Opt-in utility; not forced onto
   light-paper cards where translucency wouldn't read correctly. */
.glass-brass{
  background:var(--glass-brass-base);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-brass-border);
  border-top-color:var(--glass-brass-shine);
  border-left-color:rgba(255,255,255,.08);
  box-shadow:var(--shadow-glass);
}

/* ---------- reveal / stagger refinement — align to the ZIP's cadence ---------- */
.rv.d1{transition-delay:.12s}
.rv.d2{transition-delay:.24s}
.rv.d3{transition-delay:.36s}
.rv.d4{transition-delay:.48s}

/* ---------- spring hover on primary interactive controls ---------- */
.btn,.nb,.pkg-pill,.stop,.fq .pl,.tbtn{
  transition-timing-function:var(--ease-spring);
}

/* ---------- WhatsApp FAB — exact ZIP spec (56px, 32px offset, scale+lift hover) ---------- */
.fab{
  width:56px; height:56px;
  right:32px; bottom:32px;
  transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast);
}
.fab:hover{transform:scale(1.1) translateY(-4px)}

@media(max-width:700px){
  h1,h2,h3,h4,.h2{letter-spacing:.01em}
  .fab{right:20px;bottom:20px}
}

/* ---------- brand atmosphere: live-site background (relentix.co.in) ----------
   src/aether.js adds .global-bg (section-by-section background that GSAP
   tweens; scrolling up floods it with the magenta hero glow) and .aether-bg
   (three soft blobs drifting with the cursor). Both sit BEHIND the content,
   exactly as on the live site, so the page's own surfaces are made
   see-through here and the shared background carries every section. */
html{background:#020617}
body{background:transparent!important}
section,footer,.dark-sec{background-color:transparent!important}
.global-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 60% -10%,rgba(171,0,162,0.35),transparent),
    radial-gradient(circle at 85% 40%,rgba(0,163,255,0.2),transparent),
    radial-gradient(circle at 15% 60%,rgba(255,171,238,0.1),transparent),
    #020617}
.aether-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aether-bg .blob{position:absolute;border-radius:50%;opacity:.12}
.aether-bg .blob-1{width:45vw;height:45vw;top:-15%;right:-10%;background:radial-gradient(circle,#00A3FF 0%,rgba(0,163,255,.5) 35%,transparent 70%)}
.aether-bg .blob-2{width:35vw;height:35vw;bottom:5%;left:-8%;background:radial-gradient(circle,#00A3FF 0%,rgba(0,163,255,.5) 35%,transparent 70%)}
.aether-bg .blob-3{width:28vw;height:28vw;top:35%;left:28%;background:radial-gradient(circle,#AB00A2 0%,rgba(171,0,162,.5) 35%,transparent 70%)}

/* ---------- footer typography: matches the live site's footer ---------- */
footer .logo span,footer .footer-wm{font-family:var(--ff-display);font-weight:700;font-size:22px;
  text-transform:uppercase;letter-spacing:.38em}
footer .f-tag,footer .f-statement{font-family:var(--ff-body);font-style:normal;font-weight:400;
  font-size:clamp(15px,1.25vw,17px);letter-spacing:0;line-height:1.6;color:#94A3B8}
footer .f-tag em,footer .f-statement em{font-family:var(--ff-body)!important;font-style:normal;
  background:none;-webkit-text-fill-color:currentColor;color:#F8FAFC}
footer .f-sub{font-family:var(--ff-body);font-size:14px;line-height:1.65;color:#94A3B8}
footer .f-col h5{font-family:var(--ff-mono);font-size:10px;font-weight:400;text-transform:uppercase;
  letter-spacing:.25em;color:rgba(196,160,85,.85)}
footer .f-nav a,footer .f-col>a,footer .f-col nav a{font-family:var(--ff-body);font-size:15px;
  letter-spacing:0;color:#94A3B8}
footer .f-nav a:hover,footer .f-col a:hover{color:#F8FAFC}
footer .f-nav a em,footer .f-col a em{font-family:var(--ff-mono);font-style:normal;font-size:10px}
footer .fb,footer .fb span,footer .f-legal a,footer .f-top-link,footer .footer-copy,footer .footer-link{
  font-family:var(--ff-mono);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.2em}
footer .fb,footer .f-legal a,footer .footer-copy,footer .footer-link{color:#7C8AA0}
footer .f-legal a:hover,footer .footer-link:hover{color:#F8FAFC}

/* ---------- footer wordmark ----------
   The treatment that used to live here clipped a moving gradient to the word
   RELENTIX, back when .brandmark WAS the text. It is now a container holding
   the animated lockup, and those rules were actively breaking it: an inherited
   `-webkit-text-fill-color:transparent` hollowed out the fallback wordmark so
   it hung behind the video as a ghost outline.

   The mark itself is styled in /footer.css. Only the beam rule survives, and
   it keeps its own keyframes. */
@keyframes fb-beam{0%{background-position:-30% 0,0 0}100%{background-position:130% 0,0 0}}

/* ---------- buttons: the live site's rectangle buttons (RELENTIX src/style.css .btn) ----------
   Sharp corners, JetBrains Mono caps at .25em tracking, 1px border, a soft
   shimmer sweep and a 2px lift on hover. The page-local pill variants are
   remapped onto the live ones: .btn-brass -> .btn-brand (solid blue),
   .btn-g -> .btn-outline, .btn-p -> .btn-primary (solid white). Doubled
   classes (.btn.btn-g) outrank the pages' own contextual rules such as
   .hero .btn-g or .cta-acts .btn-g:hover. */
.btn{height:auto;min-height:44px;padding:13px 34px;gap:12px;justify-content:center;
  border-radius:0;border:1px solid transparent;box-shadow:none;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;line-height:1.4;
  text-transform:uppercase;letter-spacing:.25em;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.btn *,.btn span{font-family:var(--ff-mono);text-transform:inherit;letter-spacing:inherit}
.btn::before,.btn.btn-p::before,.btn.nav-cta::before{content:'';position:absolute;inset:auto;top:0;left:-100%;
  width:100%;height:100%;z-index:0;transform:none;animation:none;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}
.btn:hover::before,.btn.btn-p:hover::before,.btn.nav-cta:hover::before{left:100%}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

/* arrow: plain glyph instead of the round chip */
.btn .arr,.btn.btn-p .arr,.btn.btn-brass .arr{width:auto;height:auto;border-radius:0;background:transparent;color:currentColor}
.btn .arr svg{width:14px;height:14px}

.btn.btn-brass{background:var(--c-brand);color:#000;border-color:var(--c-brand);box-shadow:none}
.btn.btn-brass:hover{background:transparent;color:var(--c-brand);box-shadow:0 4px 20px rgba(0,163,255,.2)}

.btn.btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.btn.btn-g:hover{background:rgba(255,255,255,.04);color:#fff;border-color:#fff;box-shadow:0 4px 20px rgba(255,255,255,.06)}

.btn.btn-p{background:#fff;color:#000;border-color:#fff}
.btn.btn-p:hover{background:transparent;color:#fff;box-shadow:0 4px 20px rgba(255,255,255,.12)}

/* size variants */
.btn.btn-sm{padding:11px 24px;font-size:10px}
.nav .btn.nav-cta{min-height:0;padding:10px 20px;font-size:10px;gap:10px}
.curtain-foot .btn{padding:18px 24px}

@media(prefers-reduced-motion:reduce){
  .btn,.btn::before{transition:none}
  .btn:hover,.btn:active{transform:none}
}

/* ---------- logo: the transparent R on its own, no badge/ring behind it ---------- */
.logo b,.nav.over-dark .logo b{background-color:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
.logo b::before,.logo b::after{display:none!important}
.wordmark::before{background-color:transparent!important;box-shadow:none!important;border-radius:0!important;background-size:contain!important}