/* ============================================================
   Steshkin - premium design system
   Tailwind utilities + a small layer of bespoke components.
   ============================================================ */

:root {
  /* Surface */
  --ink-950:  #0A0B14;
  --ink-900:  #0F1020;
  --ink-800:  #16172A;
  --ink-700:  #1E1F33;
  --ink-600:  #2A2B42;
  --ink-500:  #3E4060;
  --ink-400:  #6B6E8C;
  --ink-300:  #9B9DB8;
  --ink-200:  #CCCEDE;
  --ink-100:  #E7E8F0;
  --ink-50:   #F5F6FA;

  /* Brand */
  --brand-50:  #FFEEF1;
  --brand-300: #FF7A8B;
  --brand-500: #EF233C;
  --brand-600: #D81B30;
  --brand-700: #B5152A;
  --accent-500:#FF6B6B;
  --accent-300:#FFB37A;

  /* Effects */
  --grad-brand: linear-gradient(135deg, #EF233C 0%, #FF6B6B 100%);
  --grad-text:  linear-gradient(120deg, #ffffff 0%, #FF7A8B 55%, #EF233C 100%);
  --grad-mesh:
    radial-gradient(60% 60% at 20% 0%,  rgba(239,35,60,.32)  0%, transparent 60%),
    radial-gradient(50% 50% at 100% 30%, rgba(255,107,107,.25) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(120,80,255,.22)  0%, transparent 60%);
  --shadow-card:  0 1px 2px rgba(15,16,32,.06), 0 12px 32px -8px rgba(15,16,32,.10);
  --shadow-glow:  0 24px 60px -20px rgba(239,35,60,.45);
  --shadow-elev:  0 30px 80px -30px rgba(15,16,32,.40);
  --radius-lg: 1.25rem;
  --radius-md: .85rem;

  /* ── Logo sizing ─────────────────────────────────────────────────
     Override these two pairs to resize the logo independently in the
     header and footer.  Set width to a px value if you need a fixed
     width; leave it as "auto" and the SVG scales from height alone
     while preserving its aspect ratio.
     ──────────────────────────────────────────────────────────────── */
  --logo-header-h: 50px;
  --logo-header-w: auto;
  --logo-footer-h: 50px;
  --logo-footer-w: auto;
}

/* ── Mobile logo sizing (phones — screens ≤ 767 px) ──────────────
   Overrides the four logo variables above for small screens.
   The .header-logo and .footer-logo rules pick these up automatically
   — no extra CSS selectors or template changes needed.
   Tailwind's nav switches to the hamburger menu at lg (1024 px), so
   the header logo is visible on phones at all times; keep it compact.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --logo-header-h: 60px;
    --logo-header-w: auto;
    --logo-footer-h: 60px;
    --logo-footer-w: auto;
  }
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink-900); background: #fff; }
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }
::selection { background: var(--brand-500); color: #fff; }

/* ---------- Premium gradient text ---------- */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-brand {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Mesh / animated bg ---------- */
.bg-mesh    { background-image: var(--grad-mesh); }
.bg-grid    {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.orb { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; pointer-events: none; }
.orb--brand  { background: radial-gradient(circle, #EF233C 0%, transparent 70%); }
.orb--accent { background: radial-gradient(circle, #FF6B6B 0%, transparent 70%); }
.orb--violet { background: radial-gradient(circle, #7C3AED 0%, transparent 70%); }
@keyframes float-slow { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-20px,0); } }
.animate-float { animation: float-slow 9s ease-in-out infinite; }

/* ---------- Live status dot — subtle glow pulse ---------- */
@keyframes live-dot {
  0%   { opacity: 1;   box-shadow: 0 0 0 0   rgba(52,211,153,.40); }
  65%  { opacity: .75; box-shadow: 0 0 0 3px rgba(52,211,153,.00); }
  100% { opacity: 1;   box-shadow: 0 0 0 0   rgba(52,211,153,.40); }
}
.dot-live {
  animation: live-dot 2.4s ease-in-out infinite;
  will-change: opacity, box-shadow;
}

/* ---------- Lightning bolt — occasional electrical flicker ---------- */
/*
 * 14 s cycle breakdown (all times = % × 14 s):
 *  0 % →  74 % = 10.36 s  pure idle — bolt is fully stable
 * 74 % →  77 % =  0.42 s  gentle pre-dim (energy building)
 * 77 % → 77.4% =  0.056 s ⚡ FLASH — bolt nearly vanishes
 * 77.4% →  79 % =  0.22 s  bloom + energy burst
 * 79 % →  82 % =  0.42 s  afterflicker settles
 * 82 % → 100 % =  2.52 s  quiet again before next loop
 *
 * Result: ~0.7 s of visible motion per 14 s → the "did it just flicker?" feel.
 */
@keyframes bolt-flicker {
  /* ── Long calm idle ── */
  0%,   74%  { opacity: 1;   filter: drop-shadow(0 0 2px rgba(255,255,255,.65)); }
  /* gentle pre-dim — energy building */
  77%         { opacity: .80; filter: drop-shadow(0 0 3px rgba(255,255,255,.42)); }
  /* ⚡ flash — bolt drops to near-invisible (~56 ms) */
  77.4%       { opacity: .05; filter: drop-shadow(0 0 0   rgba(255,255,255, 0));  }
  /* bloom — bright energy burst on recovery */
  77.8%       { opacity: 1;   filter: drop-shadow(0 0 9px rgba(255,255,255, 1));  }
  /* afterflicker */
  79%         { opacity: .38; filter: drop-shadow(0 0 3px rgba(255,255,255,.48)); }
  /* settle — fully calm again */
  82%, 100%  { opacity: 1;   filter: drop-shadow(0 0 2px rgba(255,255,255,.65)); }
}
.bolt-live {
  animation: bolt-flicker 14s linear infinite;
  will-change: opacity, filter;
}

/* ---------- Glass surfaces ---------- */
.glass {
  background: rgba(255,255,255,.06);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.10);
}
.glass-light {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(15,16,32,.06);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border-radius: .75rem;
  font-weight: 600; font-size: .9rem; letter-spacing: -0.01em;
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(239,35,60,.55); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(239,35,60,.65); }
.btn-ghost   { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-light   { background: #fff; color: var(--ink-900); border: 1px solid var(--ink-100); }
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }

/* ---------- Sticky nav glass state ---------- */
.nav-shell { transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.nav-shell.is-stuck {
  background: rgba(10,11,20,.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ---------- Cards ---------- */
.feature-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); border-color: rgba(239,35,60,.35); }
.feature-card .icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: var(--grad-brand); box-shadow: 0 10px 24px -8px rgba(239,35,60,.55);
}

/* ---------- Reveal on scroll (used by JS IntersectionObserver) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .animate-float { animation: none; }
}

/* ---------- Form fields ---------- */
.field {
  width: 100%; padding: .8rem 1rem; border-radius: .75rem;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field::placeholder { color: rgba(255,255,255,.55); }
.field:focus { outline: none; border-color: var(--brand-300); box-shadow: 0 0 0 4px rgba(239,35,60,.18); background: rgba(255,255,255,.15); }

/* ---------- Nav logo wordmark ---------- */

/*
 * .nav-logo            — anchor wrapper; hover drives a unified glow
 * .nav-logo-mark       — SVG icon; subtle tilt on hover
 * .nav-logo-text-block — vertical stack: wordmark + subtitle
 * .nav-logo-wordmark   — "STESHKIN" — large, caps, gradient
 * .nav-logo-sub        — "Electrical Installation Contractor" — tiny label
 */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  text-decoration: none;
  transition: filter .28s ease;
}
.nav-logo:hover {
  filter: brightness(1.12) drop-shadow(0 0 20px rgba(239,35,60,.30));
}

.nav-logo-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.nav-logo:hover .nav-logo-mark {
  transform: scale(1.07) rotate(-2deg);
}

/* SVG logo image — shared base styles (no fixed dimensions here).
   Actual width/height come from the .header-logo and .footer-logo
   context classes below, driven by the CSS custom properties in :root.
   To resize the logo, update --logo-header-h/w or --logo-footer-h/w
   in :root — no template changes needed. */
.nav-logo-img {
  flex-shrink: 0;
  display: block;
  max-width: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* Header (nav) logo — controlled via --logo-header-h / --logo-header-w */
.header-logo .nav-logo-img {
  height: var(--logo-header-h);
  width: var(--logo-header-w);
}

/* Footer logo — pinned left; controlled via --logo-footer-h / --logo-footer-w */
.footer-logo {
  display: block;
}
.footer-logo .nav-logo-img {
  height: var(--logo-footer-h);
  width: var(--logo-footer-w);
}

.nav-logo:hover .nav-logo-img {
  transform: scale(1.04);
}

/* Vertical stack wrapper */
.nav-logo-text-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

/* Main wordmark — uppercase, large, gradient */
.nav-logo-wordmark {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.7rem;          /* 29.6 px — big and bold */
  font-weight: 800;
  letter-spacing: 0.06em;     /* all-caps benefits from slight open tracking */
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(
    135deg,
    #ffffff    0%,
    #ffd6dc   30%,
    #ff7a8a   65%,
    #ef233c  100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtitle line — much smaller, barely-there */
.nav-logo-sub {
  font-family: 'Inter', 'Space Grotesk', sans-serif;
  font-size: 0.52rem;          /* very small — purely supportive */
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-top: 0.2rem;
  white-space: nowrap;
}

/* Header logo: tighten gap so the badge sits close to the SVG edge */
.header-logo {
  gap: 0.3rem;
}

/* "London" badge — sits inline with the wordmark */
.nav-logo-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9999px;
  padding: 0.2rem 0.5rem;
  position: relative;
  top: -1px;
}

/* ---------- Misc ---------- */
.divider-soft { height: 1px; background: linear-gradient(90deg, transparent, rgba(15,16,32,.10), transparent); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.eyebrow-light { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.eyebrow-dark  { background: var(--ink-50); color: var(--ink-700); border: 1px solid var(--ink-100); }

/* ---------- Cookie consent banner ---------- */

/* =========================================================
   Cookie Consent Banner
   — NO transform for centering (fixes iOS Safari stacking
     context bug that blocks touch events on child buttons)
   — left/right margins auto-center on all screen sizes
   ========================================================= */
.cookie-banner {
  position: fixed;
  /* Centre without transform: left margin = max(edge gap, (viewport - maxW) / 2) */
  left: max(0.875rem, calc(50% - 430px));
  right: max(0.875rem, calc(50% - 430px));
  bottom: 1rem;
  z-index: 9999;
  background: rgba(14, 15, 26, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(239,35,60,.08);
  color: #fff;
  padding: 1rem 1.125rem;
  /* GPU layer — keeps animation smooth without blocking touch */
  will-change: opacity, transform;
}
@media (min-width: 640px) {
  .cookie-banner { bottom: 1.5rem; padding: 1.25rem 1.5rem; }
}

.cb-inner {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
@media (min-width: 768px) {
  .cb-inner { flex-direction: row; align-items: center; gap: 1.5rem; }
}

.cb-body { display: flex; align-items: flex-start; gap: .875rem; flex: 1; min-width: 0; }
.cb-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }
.cb-text { min-width: 0; }
.cb-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .95rem; margin: 0 0 .25rem; }
.cb-desc  { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.5; margin: 0; }
.cb-link  { color: #ff8fa3; text-decoration: underline; text-underline-offset: 2px; }
.cb-link:hover { color: #fff; }

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex-shrink: 0;
}
/* Mobile: "Manage preferences" spans full width so Reject + Accept
   sit together on one row beneath it */
@media (max-width: 639px) {
  .cb-actions .cb-btn--ghost { width: 100%; }
  .cb-actions .cb-btn--reject,
  .cb-actions .cb-btn--accept { flex: 1; }
}

/* ---------------------------------------------------------
   Buttons — mobile-safe touch targets
   touch-action:manipulation  → removes 300 ms tap delay
   min-height: 44px           → iOS HIG minimum touch target
   -webkit-tap-highlight-color → no grey flash on tap
   --------------------------------------------------------- */
.cb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border-radius: .5rem;
  font-size: .8rem; font-weight: 600;
  cursor: pointer; border: none; white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: filter .2s, background .2s, opacity .15s;
}
.cb-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.cb-btn--accept  { background: #ef233c; color: #fff; }
.cb-btn--accept:not(:disabled):hover { filter: brightness(1.12); }
.cb-btn--reject  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.12); }
.cb-btn--reject:not(:disabled):hover { background: rgba(255,255,255,.14); color: #fff; }
.cb-btn--ghost   { background: transparent; color: rgba(255,255,255,.55); }
.cb-btn--ghost:not(:disabled):hover { color: #fff; }

/* Entry / exit animations — plain translateY only.
   No translateX(-50%) here: banner is centred via left/right,
   so adding translateX would break the layout mid-animation. */
.cb-enter { transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.cb-enter-start { opacity: 0; transform: translateY(1.5rem); }
.cb-enter-end   { opacity: 1; transform: translateY(0); }
.cb-leave { transition: opacity .3s ease, transform .3s ease; }
.cb-leave-start { opacity: 1; transform: translateY(0); }
.cb-leave-end   { opacity: 0; transform: translateY(1.5rem); }

/* Modal overlay */
.cb-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  /* Ensure overlay captures all pointer events */
  touch-action: none;
}

.cb-modal {
  background: #13141f;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.25rem;
  width: 100%; max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,.8);
  color: #fff;
  /* Modal itself must accept touch events */
  touch-action: pan-y;
}

.cb-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
}
.cb-modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; margin: 0; }
.cb-modal-close {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; padding: .5rem; border-radius: .375rem;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.cb-modal-close:hover { color: #fff; }

.cb-modal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0; }

.cb-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cb-toggle-row:last-child { border-bottom: none; }
.cb-toggle-info { flex: 1; min-width: 0; }
.cb-toggle-label { font-size: .875rem; font-weight: 600; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.cb-toggle-desc  { font-size: .75rem; color: rgba(255,255,255,.45); margin: 0; line-height: 1.5; }
.cb-badge { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(52,211,153,.2); border-radius: 9999px; padding: .15rem .45rem; }

/* Toggle switch — enlarged touch target for mobile */
.cb-toggle {
  flex-shrink: 0;
  width: 2.75rem; height: 1.5rem;
  background: rgba(255,255,255,.12);
  border: none; border-radius: 9999px;
  cursor: pointer; position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s;
  padding: 0;
  /* Invisible extra tap area without changing layout */
  -webkit-appearance: none;
  appearance: none;
}
.cb-toggle--on { background: #ef233c; }
.cb-toggle--locked { cursor: not-allowed; background: rgba(52,211,153,.35); }
.cb-toggle-thumb {
  position: absolute; top: .2rem; left: .2rem;
  width: 1.1rem; height: 1.1rem;
  background: #fff; border-radius: 50%;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.cb-toggle--on .cb-toggle-thumb,
.cb-toggle--locked .cb-toggle-thumb { transform: translateX(1.25rem); }

.cb-modal-footer {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Prose styling for policy pages */
.prose-ink h2 { color: #0F1020; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: .75rem; }
.prose-ink h3 { color: #0F1020; font-weight: 700; font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.prose-ink p  { color: #3E4060; line-height: 1.75; margin-bottom: 1rem; }
.prose-ink ul { list-style: disc; padding-left: 1.5rem; color: #3E4060; margin-bottom: 1rem; }
.prose-ink ul li { margin-bottom: .4rem; line-height: 1.65; }
.prose-ink a  { color: #ef233c; text-decoration: underline; text-underline-offset: 3px; }
.prose-ink a:hover { color: #b5152a; }
.prose-ink table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 1.25rem 0; }
.prose-ink th { background: #F5F6FA; color: #0F1020; font-weight: 600; text-align: left; padding: .65rem .875rem; border: 1px solid #CCCEDE; }
.prose-ink td { color: #3E4060; padding: .6rem .875rem; border: 1px solid #E7E8F0; vertical-align: top; }
.prose-ink code { background: #F5F6FA; border: 1px solid #E7E8F0; border-radius: .25rem; padding: .1rem .35rem; font-size: .82rem; color: #B5152A; }