:root {
  /* Brand core – turned up to 11 */
  --color-accent: #ff7a00;
  --color-accent-alt: #ffb347;
  --color-accent-hot: #ff4d00;
  --color-accent-neon: #ff9400;
  --color-bg: #070707;
  --color-bg-gradient-top: #121212;
  --color-bg-gradient-bottom: #050505;
  --color-surface: #161616;
  --color-surface-alt: #1f1f1f;
  --color-border: #2a2a2a;
  --color-text: #f5f5f5;
  --color-text-invert: #0a0a0a;
  --color-muted: #9aa0a6;
  --color-focus: #ffd24d;
  --glow-strong: 0 0 0.5rem rgba(255,122,0,.6), 0 0 1.5rem rgba(255,122,0,.4);
  --glow-soft: 0 0 0.75rem rgba(255,151,51,.35);

  /* Typography scale */
  --font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: clamp(.75rem, .7rem + .2vw, .8rem);
  --font-size-s: clamp(.875rem, .82rem + .3vw, .95rem);
  --font-size-m: clamp(1rem, .95rem + .4vw, 1.125rem);
  --font-size-l: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
  --font-size-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-loose: 1.7;

  /* Spacing */
  --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem;

  /* Layout */
  --max-content-width: 68ch;
  --container-max: 72rem;

  /* Radius & shadows */
  --radius-s: .25rem; --radius-m: .5rem; --radius-l: .75rem;
  --shadow-s: 0 1px 2px rgba(0,0,0,.4);
  --shadow-m: 0 2px 6px rgba(0,0,0,.45);

  /* Motion */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms;
  --duration-page-transition: 200ms;

  /* Z layers */
  --z-overlay: 50;

  /* Logo sizing tokens (used for client logos / case cards) */
  --logo-min-width: 6rem;
  --logo-pref-width: 30vw; /* fluid portion of viewport */
  --logo-max-width: 12rem;
  --logo-min-height: 2rem;
  --logo-max-height: 3.25rem;
}

:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f5f5f7;
  --color-surface-alt: #ececec;
  --color-border: #d0d0d0;
  --color-text: #111111;
  --color-text-invert: #ffffff;
  --color-muted: #5a5f63;
  --color-focus: #8a4d00;
  /* Light mode specific gradient + glow adjustments */
  --color-bg-gradient-top: #ffffff;
  --color-bg-gradient-bottom: #f7f7f7;
  --glow-strong: 0 0 .6rem rgba(255,122,0,.45), 0 0 1.2rem rgba(255,122,0,.25);
  --glow-soft: 0 0 .55rem rgba(255,151,51,.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-m);
  line-height: var(--line-height-base);
  background: radial-gradient(circle at 15% 20%, var(--color-bg-gradient-top) 0%, var(--color-bg-gradient-bottom) 65%);
  color: var(--color-text);
  text-rendering: optimizeLegibility;
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}

img,svg { display:block; max-width:100%; height:auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--color-accent); text-decoration:none; position:relative; }
a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-alt)); transform:scaleX(0); transform-origin:left; transition:transform var(--duration-base) var(--ease-standard); }
a:hover::after,a:focus-visible::after { transform:scaleX(1); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

h1,h2,h3,h4 { line-height: var(--line-height-tight); font-weight:600; margin: var(--space-5) 0 var(--space-3); }
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-l); }

p { margin: 0 0 var(--space-3); }

.container { width:100%; max-width: var(--container-max); margin-inline:auto; padding-inline: var(--space-3); }
.measure { max-width: var(--max-content-width); }

.btn { display:inline-flex; align-items:center; gap:.5ch; font-weight:600; letter-spacing:.5px; border:1px solid var(--color-accent); padding:.75rem 1.15rem; border-radius: var(--radius-m); background: linear-gradient(135deg,var(--color-accent) 0%, var(--color-accent-hot) 60%); color: var(--color-text-invert); box-shadow: var(--glow-soft); position:relative; overflow:hidden; transition: all var(--duration-base) var(--ease-standard); }
.btn::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 70%); mix-blend-mode:overlay; opacity:.6; transition:opacity var(--duration-base) var(--ease-standard); }
.btn:hover,.btn:focus-visible { box-shadow: var(--glow-strong); transform: translateY(-2px); }
.btn:hover::before,.btn:focus-visible::before { opacity:.85; }
.btn-secondary { background: transparent; color: var(--color-accent); }
.btn-secondary { border-color: var(--color-accent); box-shadow:none; }
.btn-secondary:hover,.btn-secondary:focus-visible { background: var(--color-surface-alt); color: var(--color-accent-alt); }
.btn-ghost { background: transparent; border:1px solid var(--color-border); color: var(--color-text); padding:.5rem .85rem; border-radius: var(--radius-s); }
.btn-ghost:hover,.btn-ghost:focus-visible { background: var(--color-surface-alt); box-shadow: var(--shadow-s); }

.flair-logo { font-weight:700; font-size:1.1rem; letter-spacing:.08em; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-neon)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.flair-logo::after { content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:linear-gradient(90deg,var(--color-accent-hot),transparent); box-shadow:0 0 .75rem rgba(255,122,0,.6); }

.pulse-accent { animation:pulseAccent 3.2s ease-in-out infinite; }
@keyframes pulseAccent { 0%,100% { filter:drop-shadow(0 0 0 rgba(255,122,0,.0)); } 50% { filter:drop-shadow(0 0 .9rem rgba(255,122,0,.55)); } }

.field { margin-bottom: var(--space-3); display:flex; flex-direction:column; gap:.4rem; }
input,textarea { background: var(--color-surface); color: var(--color-text); border:1px solid var(--color-border); border-radius: var(--radius-s); padding:.6rem .75rem; }
input:focus-visible,textarea:focus-visible { border-color: var(--color-accent); }

.form-status { margin-top: var(--space-3); font-size: var(--font-size-s); }

/* Utilities subset here; broader set in utilities.css */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }