/* ==========================================================================
   globals.css — Design System v4 · Cristofolini Portfolio
   ========================================================================== */

/* @property declarations — must precede :root */
@property --btn-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Global keyframes */
@keyframes btn-spin   { to { --btn-angle: 360deg; } }
@keyframes mq-scroll  { to { transform: translateX(calc(-1 * var(--mq-distance, 50%))); } }
@keyframes ds-pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

/* --------------------------------------------------------------------------
   1. CSS Custom Properties — DS v4 Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --bg:  #0a0908;
  --bg1: #0f0d0a;
  --bg2: #181612;
  --bg3: #221f18;

  /* Text */
  --t1: #f0ebe0;
  --t2: #8a8678;
  --t3: #474440;

  /* Accent / Amber */
  --y:             #f3b02e;
  --y-dk:          #d9941a;
  --accent-dim:    rgba(243,176,47,0.12);
  --accent-border: rgba(243,176,47,0.32);

  /* Borders */
  --b0: rgba(255,255,255,0.07);
  --b1: rgba(255,255,255,0.12);
  --b2: rgba(255,255,255,0.20);

  /* Fonts */
  --display: 'Bebas Neue', sans-serif;
  --sans:    'Syne', system-ui, sans-serif;
  --mono:    'DM Mono', 'Courier New', monospace;

  /* Layout */
  --section-y: 120px;
  --gap:       80px;
  --max-w:     1440px;

  /* Z-index */
  --z-stars:   0;
  --z-content: 1;
  --z-nav:     100;
  --z-cursor:  9999;

  /* ── Backward-compat aliases (used by case-study.css and page inline styles) ── */
  --accent:        var(--y);
  --accent-text:   #0c0c0c;
  --text-primary:  var(--t1);
  --text-secondary:var(--t2);
  --text-muted:    var(--t3);
  --text-faint:    rgba(240,237,232,0.22);
  --bg-elevated:   var(--bg1);
  --bg-card:       var(--bg2);
  --border:        var(--b0);
  --border-mid:    var(--b1);
  --border-strong: var(--b2);
  --font-display:  var(--display);
  --font-body:     var(--sans);
  --font-mono:     var(--mono);
  --surface:       var(--bg1);
  --surface-2:     var(--bg2);

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.333rem;
  --text-2xl:  1.777rem;
  --text-3xl:  2.369rem;
  --text-4xl:  3.157rem;
  --text-5xl:  4.209rem;
  --text-6xl:  5.610rem;
  --text-7xl:  clamp(4rem, 9vw, 8rem);

  /* Border radius — square language */
  --r0:    0px;
  --r2:    2px;
  --r4:    4px;
  --rpill: 9999px;

  /* Compat radius aliases (case-study.css) */
  --radius-sm:   var(--r4);
  --radius-md:   var(--r4);
  --radius-lg:   var(--r4);
  --radius-xl:   var(--r4);
  --radius-full: var(--rpill);

  /* Easing */
  --ease-out:    cubic-bezier(0.22,1,0.36,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  /* Durations */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;
}

/* --------------------------------------------------------------------------
   2. CSS Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a          { color: inherit; text-decoration: none; }
ul, ol     { list-style: none; }
button     { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
p          { margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; }

/* Content stacking — everything in flow sits above the fixed star canvas */
main, footer { position: relative; z-index: var(--z-content); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-nav) + 10);
  padding: 10px 14px;
  border: 1px solid var(--y);
  background: rgba(10, 9, 8, 0.95);
  color: var(--t1);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. Containers
   -------------------------------------------------------------------------- */
.in {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gap);
}

@media (max-width: 1100px) { .in, .container { padding-inline: 32px; } }
@media (max-width: 640px)  { .in, .container { padding-inline: 20px; } }

/* --------------------------------------------------------------------------
   5. Section Base
   -------------------------------------------------------------------------- */
.sec {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--section-y);
  border-top: 1px solid var(--b0);
}

/* --------------------------------------------------------------------------
   6. Typography
   -------------------------------------------------------------------------- */

/* DS v4 type classes */
.tDXL { font-family:var(--display); font-size:clamp(40px,6vw,80px);  line-height:.9;  color:var(--t1); text-transform:uppercase; }
.tDLG { font-family:var(--display); font-size:clamp(32px,5vw,60px);  line-height:.9;  color:var(--t1); text-transform:uppercase; }
.tYLW { font-family:var(--display); font-size:clamp(28px,4vw,52px);  line-height:.9;  color:var(--y);  text-transform:uppercase; }
.tBD  { font-size:15px; color:var(--t2); line-height:1.75; }
.tSM  { font-size:13px; color:var(--t2); line-height:1.72; }
.tLB  { font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--t3); }

/* Backward-compat type classes */
.display   { font-family:var(--display); font-size:var(--text-7xl); line-height:.93; letter-spacing:.01em; text-transform:uppercase; }
.heading-xl{ font-family:var(--display); font-size:clamp(52px,7vw,108px);  line-height:.93; text-transform:uppercase; }
.heading-lg{ font-family:var(--display); font-size:clamp(40px,5vw,72px);   line-height:.97; text-transform:uppercase; }
.heading-md{ font-family:var(--display); font-size:clamp(28px,3vw,48px);   line-height:1;   text-transform:uppercase; }
.heading-sm{ font-family:var(--sans);    font-size:22px; font-weight:700;   line-height:1.2; }
.body-lg   { font-family:var(--sans);    font-size:clamp(15px,1.4vw,18px); line-height:1.68; color:var(--t2); }
.body      { font-family:var(--sans);    font-size:15px; line-height:1.65; }
.caption   { font-family:var(--sans);    font-size:13px; line-height:1.72; }
.label     { font-family:var(--mono);    font-size:9px;  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--y); }
.label-sm  { font-family:var(--mono);    font-size:9px;  letter-spacing:.12em; text-transform:uppercase; color:var(--t3); }

/* --------------------------------------------------------------------------
   7. Scroll Reveal
   -------------------------------------------------------------------------- */
.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.sr.d1 { transition-delay: .05s; }
.sr.d2 { transition-delay: .10s; }
.sr.d3 { transition-delay: .15s; }
.sr.d4 { transition-delay: .20s; }
.sr.on { opacity: 1; transform: translateY(0); }

/* Backward-compat reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   8. Navigation — Floating Bar (DS v4)
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px var(--gap);
  background: rgba(10,9,8,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--b0);
}


.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .8;
  transition: opacity .2s;
}
.nav-logo:hover { opacity: 1; }
.nav-logo img { height: 26px; width: auto; display: block; }

.nav-divider {
  width: 1px; height: 16px;
  background: var(--b0);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.nav-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t2);
  transition: color .2s;
  min-height: auto;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--y); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y);
  background: transparent;
  border: 1px solid var(--accent-border);
  padding: 7px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(243,176,47,.06), inset 0 0 10px rgba(243,176,47,.03);
  transition: border-color .25s, color .25s, box-shadow .25s, background .25s;
}
.nav-cta:hover {
  border-color: var(--y);
  background: var(--accent-dim);
  box-shadow: 0 0 24px rgba(243,176,47,.18), inset 0 0 16px rgba(243,176,47,.06);
}

.nav-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y);
  padding: 5px 10px;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .nav { gap: 16px; padding: 14px 32px; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; padding: 12px 20px; }
  .nav-links { gap: 14px; }
  .nav-divider { display: none; }
  .nav-cta { padding: 6px 10px; }
}
@media (max-width: 380px) {
  .nav { gap: 8px; }
  .nav-logo img { height: 20px; }
  .nav-links { gap: 10px; }
  .nav-cta { padding: 5px 7px; letter-spacing: .06em; }
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

/* Primary: spinning conic border */
.btn-shiny {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border: none;
  border-radius: 0;
  padding: 2px;
  background: transparent;
  text-decoration: none;
  flex-shrink: 0;
  transition: box-shadow .3s;
}
.btn-shiny::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: conic-gradient(from var(--btn-angle), #F3B02F 0%, #F3B02F 30%, #fff8e0 44%, #F3B02F 58%, #F3B02F 100%);
  animation: btn-spin 2.4s linear infinite;
}
.btn-shiny::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--y);
  z-index: 1;
}
.btn-shiny:hover { box-shadow: 0 4px 28px rgba(243,176,47,.45), 0 0 60px rgba(243,176,47,.15); }
.btn-shiny:hover::after { background: var(--y-dk); }

.btn-shiny-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0c0c0c;
  white-space: nowrap;
}
.btn-shiny-label svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s;
}
.btn-shiny:hover .btn-shiny-label svg { transform: translateX(4px); }

/* Ghost glow */
.btn-ghost-glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 17px 30px;
  background: transparent;
  border: 1px solid rgba(243,176,47,.22);
  border-radius: 0;
  color: var(--t1);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(243,176,47,.06), inset 0 0 10px rgba(243,176,47,.03);
  transition: border-color .3s, color .3s, box-shadow .3s;
}
.btn-ghost-glow:hover {
  border-color: var(--y);
  color: var(--y);
  box-shadow: 0 0 28px rgba(243,176,47,.2), 0 0 60px rgba(243,176,47,.06), inset 0 0 18px rgba(243,176,47,.06);
}
.btn-ghost-glow svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s;
}
.btn-ghost-glow:hover svg { transform: translateX(3px); }

/* Solid yellow */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 17px 30px;
  background: var(--y);
  border: none;
  border-radius: 0;
  color: #0c0c0c;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .25s;
}
.btn-solid::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .5s;
}
.btn-solid:hover { background: var(--y-dk); }
.btn-solid:hover::after { left: 160%; }
.btn-solid svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* Ghost utility */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--b0);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { color: var(--t1); border-color: var(--b1); }
.btn-ghost svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round; }

/* Icon */
.btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--b0);
  border-radius: 0;
  color: var(--t2);
  transition: border-color .2s, color .2s;
}
.btn-ico:hover { color: var(--y); border-color: var(--accent-border); }
.btn-ico svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round; }

/* Link */
.btn-lk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--y);
  transition: gap .2s;
}
.btn-lk:hover { gap: 10px; }
.btn-lk svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round; }

/* Backward-compat .btn system */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all .3s var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }

.btn.btn-primary {
  background: var(--y);
  color: #0c0c0c;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .5s;
}
.btn.btn-primary:hover { background: var(--y-dk); }
.btn.btn-primary:hover::after { left: 160%; }

.btn.btn-secondary {
  background: transparent;
  color: var(--t1);
  border: 1px solid rgba(243,176,47,.22);
  box-shadow: 0 0 14px rgba(243,176,47,.06);
  transition: border-color .3s, box-shadow .3s, color .3s;
}
.btn.btn-secondary:hover { border-color: var(--y); color: var(--y); box-shadow: 0 0 28px rgba(243,176,47,.2); }

/* --------------------------------------------------------------------------
   10. Tags
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  color: var(--y);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
}
.tag.ts { color: #4ade80;  border: 1px solid rgba(74,222,128,.25);  background: rgba(74,222,128,.06); }
.tag.tn { color: var(--t3); border: 1px solid var(--b0); background: rgba(255,255,255,.02); }
.tdot   { width: 5px; height: 5px; border-radius: 50%; background: var(--y); box-shadow: 0 0 6px var(--y); }

/* --------------------------------------------------------------------------
   11. Section eyebrow system (DS v4)
   -------------------------------------------------------------------------- */
.ew   { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.ew-n { font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--y);  text-transform:uppercase; }
.ew-l { font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--t3); text-transform:uppercase; }

.stitle    { font-family:var(--display); font-size:clamp(48px,6vw,80px); line-height:.95; text-transform:uppercase; color:var(--t1); margin-bottom:20px; }
.stitle em { font-style:normal; color:var(--y); }
.ssub      { font-size:15px; color:var(--t2); line-height:1.75; max-width:620px; margin-bottom:56px; }

/* --------------------------------------------------------------------------
   12. Marquee (.mq — DS v4)
   -------------------------------------------------------------------------- */
.mq {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--b0);
  border-bottom: 1px solid var(--b0);
  position: relative;
  z-index: var(--z-content);
}
.mq-fl     { position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.mq-fl.l   { left:0;  background:linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.mq-fl.r   { right:0; background:linear-gradient(to left,  var(--bg) 0%, transparent 100%); }
.mq-tr     { display:flex; width:max-content; will-change:transform; transform:translate3d(0,0,0); opacity:0; }
.mq.is-ready .mq-tr { opacity:1; transition:opacity .18s var(--ease-out); }
.mq-item   { display:flex; align-items:center; }
.mq-text   { font-family:var(--display); font-size:clamp(18px,2.5vw,28px); text-transform:uppercase; color:var(--t2); white-space:nowrap; padding:0 24px; }
.mq-sep    { width:5px; height:5px; background:var(--y); border-radius:50%; flex-shrink:0; }

/* --------------------------------------------------------------------------
   13. Work Card (.wcard — DS v4)
   -------------------------------------------------------------------------- */
.wcard {
  display: block;
  background: var(--bg1);
  border: 1px solid var(--b0);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .3s, transform .5s var(--ease-out);
}
.wcard:hover       { border-color: rgba(243,176,47,.2); transform: translateY(-4px); }
.wcard:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }

.wcard__img { aspect-ratio:16/9; background:var(--bg2); overflow:hidden; }
.wcard__img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease-out), filter .4s;
  filter:grayscale(20%);
}
.wcard:hover .wcard__img img { transform:scale(1.04); filter:grayscale(0%); }

.wcard__body  { padding:24px; display:flex; flex-direction:column; gap:10px; }
.wcard__tags  { display:flex; gap:6px; flex-wrap:wrap; }
.wcard__title { font-family:var(--sans); font-weight:700; font-size:18px; color:var(--t1); line-height:1.2; }
.wcard__desc  { font-size:13px; color:var(--t2); line-height:1.6; }
.wcard__cta   {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--y); margin-top:6px;
  transition:gap .2s;
}
.wcard:hover .wcard__cta { gap:10px; }

/* Backward-compat .work-card */
.work-card          { display:block; background:var(--bg1); border:1px solid var(--b0); border-radius:0; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .3s,transform .5s var(--ease-out); }
.work-card:hover    { border-color:rgba(243,176,47,.2); transform:translateY(-4px); }
.work-card:focus-visible { outline:2px solid var(--y); outline-offset:3px; }
.work-card__image   { aspect-ratio:16/9; background:var(--bg2); overflow:hidden; }
.work-card__image img { width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),filter .4s;filter:grayscale(20%); }
.work-card:hover .work-card__image img { transform:scale(1.04);filter:grayscale(0%); }
.work-card__body  { padding:24px;display:flex;flex-direction:column;gap:10px; }
.work-card__tags  { display:flex;gap:6px;flex-wrap:wrap; }
.work-card__title { font-family:var(--sans);font-weight:700;font-size:18px;color:var(--t1);line-height:1.2; }
.work-card__desc  { font-size:13px;color:var(--t2);line-height:1.6; }
.work-card__link  { display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--y);margin-top:6px;transition:gap .2s; }
.work-card:hover .work-card__link { gap:10px; }

/* --------------------------------------------------------------------------
   14. Form Fields (DS v4 — .fg/.fl/.fi/.ferr)
   -------------------------------------------------------------------------- */
.fg { display:flex; flex-direction:column; gap:8px; }
.fl { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--t2); }
.fi {
  padding:11px 14px;
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:0;
  color:var(--t1);
  font-family:var(--sans);
  font-size:13px;
  outline:none;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.fi:focus     { border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-dim); }
.fi::placeholder { color:var(--t3); }
.fi.fi-err   { border-color:rgba(248,113,113,.5) !important; }
.ferr        { display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:#f87171; }
.ferr svg    { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0; }

/* Backward-compat form classes */
.form-field { display:flex;flex-direction:column;gap:8px; }
.form-field.has-error .form-error    { display:block; }
.form-field.has-error .form-input,
.form-field.has-error .form-textarea { border-color:#F87171; }
.form-label  { font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2); }
.form-input, .form-textarea, .form-select {
  width:100%;background:var(--bg2);border:1px solid var(--b1);border-radius:0;
  padding:11px 14px;color:var(--t1);font-family:var(--sans);font-size:13px;
  transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none;outline:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-dim); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--t3); }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8678' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  cursor:pointer;
}
.form-select option { background:var(--bg2);color:var(--t1); }
.form-textarea { min-height:160px;resize:vertical; }
.form-error { font-family:var(--mono);font-size:9px;color:#F87171;letter-spacing:.04em;display:none; }

/* --------------------------------------------------------------------------
   15. CTA Section (backward-compat .cta-section — DS v4 style)
   -------------------------------------------------------------------------- */
.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-block: 120px;
  text-align: center;
  text-decoration: none;
  color: var(--t1);
  border-top: 1px solid var(--b0);
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  cursor: pointer;
  transition: color .6s;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: rgba(243,176,47,.08);
  z-index: -1;
  transition: width .8s cubic-bezier(.77,0,.175,1);
}
.cta-section:hover::before { width: 100%; }

.cta-section__eyebrow {
  font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--t3); transition:color .6s;
}
.cta-section:hover .cta-section__eyebrow { color:rgba(255,255,255,.9); }

.cta-section__headline {
  font-family:var(--display);
  font-size:clamp(48px,7vw,100px);
  line-height:.92; letter-spacing:.01em; text-transform:uppercase;
  color:var(--t1); transition:color .6s;
}
.cta-section__headline em { font-style:normal; color:var(--y); transition:color .6s; }
.cta-section:hover .cta-section__headline,
.cta-section:hover .cta-section__headline em { color:var(--y); }

.cta-section__arrow {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border:1px solid currentColor;
  font-size:20px;
  transition:transform .3s var(--ease-spring);
}
.cta-section:hover .cta-section__arrow { transform:translateX(8px); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--b0);
  padding-block: 64px;
  position: relative;
  z-index: var(--z-content);
}
.footer__inner { display:grid; gap:48px; }
@media (min-width: 768px) {
  .footer__inner { grid-template-columns:1fr 1fr; align-items:end; }
}
.footer__brand   { display:flex; flex-direction:column; gap:12px; }
.footer__logo    { font-family:var(--sans); font-weight:800; font-size:15px; color:var(--t2); }
.footer__copy    { font-family:var(--mono); font-size:9px; color:var(--t3); letter-spacing:.06em; }
.footer__nav     { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
@media (min-width: 768px) { .footer__nav { align-items:flex-end; } }
.footer__nav-link { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); transition:color .2s; }
.footer__nav-link:hover { color:var(--t2); }
.footer__nav-link:focus-visible { outline:2px solid var(--y); outline-offset:3px; }
.footer__socials { display:flex; gap:20px; margin-top:6px; }

/* --------------------------------------------------------------------------
   17. Interactive defaults
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

a, button, [role="button"] { min-height: 44px; touch-action: manipulation; }

/* --------------------------------------------------------------------------
   18. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .sr, .reveal { opacity: 1; transform: none; }
  #stars { display: none; }
}

/* --------------------------------------------------------------------------
   19. Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }

/* --------------------------------------------------------------------------
   20. Selection
   -------------------------------------------------------------------------- */
::selection { background: var(--y); color: #0c0c0c; }