/* ============================================================
   TIROCOMM — "SIGNAL" DESIGN SYSTEM
   A broadcast / control-room visual language for an AV, security
   and network integrator. Deliberately single-themed (dark-anchored
   with warm "spec sheet" paper bands as an intentional in-page
   contrast device, not an OS light/dark response) — every colour
   below is an explicit token, painted directly, on purpose.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* -- ink / dark band -- */
  --ink:        #0B0117;
  --navy:       #150330;
  --navy-2:     #21123f;
  --navy-3:     #2c1a52;

  /* -- paper / light band -- */
  --paper:      #F4EFE6;
  --paper-2:    #E9E1D2;
  --paper-3:    #DCD1BB;
  --ink-on-paper: #18101f;

  /* -- signal accents -- */
  --signal:      #FF7A3D;
  --signal-2:    #FFA467;
  --signal-deep: #C9501B;
  --wire:        #3FA9A0;
  --wire-2:      #7ED6CC;

  --white: #FFFFFF;

  /* -- lines / glass -- */
  --line:        rgba(255,255,255,0.14);
  --line-strong: rgba(255,255,255,0.28);
  --line-paper:  rgba(24,16,31,0.14);
  --line-paper-strong: rgba(24,16,31,0.30);

  /* -- type -- */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* -- scale -- */
  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.45rem + 0.75vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.8rem + 1.5vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2.2rem + 3vw, 4.8rem);
  --step-5:  clamp(3.6rem, 2.6rem + 5vw, 6.4rem);

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; }
p{ margin: 0; }

.container{ max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.section{ padding-block: clamp(64px, 10vw, 128px); position: relative; }
.band-dark{ background: var(--ink); color: var(--white); }
.band-navy{ background: var(--navy); color: var(--white); }
.band-paper{ background: var(--paper); color: var(--ink-on-paper); }

/* ---------- scanline texture (dark bands) ---------- */
.band-dark, .band-navy{
  background-image:
    radial-gradient(circle at 15% 0%, rgba(255,122,61,0.10), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(63,169,160,0.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--signal-2);
  margin-bottom: 18px;
}
.band-paper .eyebrow{ color: var(--signal-deep); }
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow .blip{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(255,122,61,0.25);
  animation: blip 1.8s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{ opacity:1; transform: scale(1);} 50%{ opacity:.4; transform: scale(.7);} }

/* ============ NAV ============ */
.site-nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 22px clamp(20px,5vw,56px);
  display: flex; align-items: center; justify-content: space-between;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled{
  padding-block: 14px;
  background: rgba(11,1,23,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand{
  display: flex; align-items: center;
  transition: opacity .3s, transform .3s;
}
.brand:hover{ opacity: .82; }
.brand img{
  height: 38px; width: auto; display: block;
}
.brand.brand-lg img{ height: 58px; }
.nav-links{ display: flex; align-items: center; gap: 6px; }
.nav-links a{
  position: relative; font-size: .92rem; padding: 8px 14px; border-radius: 999px;
  color: rgba(255,255,255,.72); transition: color .3s;
}
.nav-links a:hover{ color: var(--white); }
.nav-links a.is-active{ color: var(--white); }
.nav-links a.is-active::after{
  content:""; position:absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--signal);
}
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-status{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--wire-2);
  display: flex; align-items: center; gap: 6px;
}
.nav-status .dot{ width:6px; height:6px; border-radius:50%; background: var(--wire-2); box-shadow: 0 0 6px 1px var(--wire-2); animation: blip 2.4s infinite; }
.nav-burger{ display:none; width: 40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; position:relative; }
.nav-burger span{ position:absolute; left:11px; right:11px; height:1px; background:var(--white); transition:transform .3s var(--ease), opacity .3s; }
.nav-burger span:nth-child(1){ top:15px;} .nav-burger span:nth-child(2){ top:20px;} .nav-burger span:nth-child(3){ top:25px;}

/* ============ BUTTONS ============ */
.btn{
  --btn-fg: var(--ink);
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s;
  will-change: transform;
}
.btn-primary{ background: var(--signal); color: var(--ink); }
.btn-primary:hover{ box-shadow: 0 10px 30px -8px rgba(255,122,61,.55); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--signal); color: var(--signal-2); transform: translateY(-2px); }
.band-paper .btn-ghost{ color: var(--ink-on-paper); border-color: var(--line-paper-strong); }
.band-paper .btn-ghost:hover{ border-color: var(--signal-deep); color: var(--signal-deep); }
.btn-arrow{ transition: transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ============ HERO ============ */
.hero{
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; padding-top: 120px; padding-bottom: 80px;
  overflow: hidden;
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0; pointer-events:none;
}
.hero-video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
}
.hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,1,23,.55) 0%, rgba(11,1,23,.72) 55%, var(--ink) 100%),
    radial-gradient(ellipse 70% 60% at 18% 25%, rgba(11,1,23,.15), transparent 65%);
}
.hero-bg .ring{
  position:absolute; border-radius:50%; border:1px solid var(--line);
}
.hero-content{ position: relative; z-index: 2; }
.hero-media{ justify-content: flex-start; padding-top: 260px; padding-bottom: 120px; }
.hero-media .hero-meta{ margin-top: 50px; }
.hero-media .hero-content{ margin-left: 0; max-width: none; padding-left: clamp(20px, 5vw, 56px); }
.hero h1{
  font-size: var(--step-5);
  font-weight: 700;
  max-width: 16ch;
}
.hero .split-line{ overflow: hidden; }
.hero .split-line span{ display:inline-block; will-change: transform; }
.hero-sub{
  max-width: 46ch; font-size: var(--step-1); color: rgba(255,255,255,.72); margin-top: 26px; font-weight: 400;
}
.hero-actions{ display:flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.hero-meta{
  margin-top: 90px; display:flex; gap: clamp(24px,5vw,64px); flex-wrap:wrap;
  font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.55); letter-spacing:.04em;
}
.hero-meta b{ color: var(--white); display:block; font-family: var(--font-display); font-size: 1.4rem; font-weight:600; margin-bottom:4px;}
.scroll-cue{
  position:absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.15em; color: rgba(255,255,255,.5); z-index: 2;
}
.scroll-cue .wire-line{ width:1px; height: 34px; background: linear-gradient(var(--signal), transparent); animation: scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%{ transform: scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform: scaleY(0); transform-origin:bottom;} }

/* oscilloscope svg */
.osc{ position:absolute; left:0; right:0; bottom: 0; height: 140px; z-index:1; opacity:.55; }
.osc path{ fill:none; stroke: var(--wire); stroke-width: 1.4; }
.osc path.line2{ stroke: var(--signal); opacity: .6; }

/* ============ REVEALS ============ */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:none; }
.stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ============ SECTION HEADS ============ */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 40px; margin-bottom: 56px; flex-wrap:wrap; }
.section-head h2{ font-size: var(--step-3); max-width: 14ch; }
.section-head p{ max-width: 40ch; color: rgba(255,255,255,.62); }
.band-paper .section-head p{ color: rgba(24,16,31,.62); }

/* ============ RACK CARDS ============ */
.rack-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }
.rack-card{
  position: relative; border-radius: var(--radius-m); padding: 30px 26px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  transform-style: preserve-3d;
}
.rack-card:hover{ border-color: var(--line-strong); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.band-paper .rack-card{ background: linear-gradient(180deg,#fff, var(--paper-2)); border-color: var(--line-paper); }
.rack-card .corner{ position:absolute; width:10px; height:10px; border: 1px solid var(--signal); opacity:.7; }
.rack-card .corner.tl{ top:10px; left:10px; border-right:none; border-bottom:none; }
.rack-card .corner.br{ bottom:10px; right:10px; border-left:none; border-top:none; }
.rack-card .rack-id{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.12em; color: var(--signal-2); margin-bottom: 18px; display:block; }
.band-paper .rack-card .rack-id{ color: var(--signal-deep); }
.rack-card .rack-icon{ width: 46px; height: 46px; margin-bottom: 20px; color: var(--wire-2); }
.band-paper .rack-card .rack-icon{ color: var(--wire); }
.rack-card h3{ font-size: 1.3rem; margin-bottom: 12px; font-weight:600; }
.rack-card p{ color: rgba(255,255,255,.62); font-size: .96rem; }
.band-paper .rack-card p{ color: rgba(24,16,31,.66); }
.rack-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 18px; }
.rack-card .tags span{
  font-family: var(--font-mono); font-size:.68rem; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: rgba(255,255,255,.6);
}
.band-paper .rack-card .tags span{ border-color: var(--line-paper-strong); color: rgba(24,16,31,.6); }
.rack-card .rack-more{ margin-top:20px; font-family:var(--font-mono); font-size:.76rem; color: var(--signal-2); display:inline-flex; gap:8px; align-items:center; }
.band-paper .rack-card .rack-more{ color: var(--signal-deep); }

/* ============ STATS ============ */
.stat-strip{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 30px; }
.stat{ border-left: 1px solid var(--line); padding-left: 20px; }
.band-paper .stat{ border-color: var(--line-paper); }
.stat .num{ font-family: var(--font-display); font-size: var(--step-3); font-weight:700; color: var(--white); display:flex; align-items:baseline; gap:4px;}
.band-paper .stat .num{ color: var(--ink-on-paper); }
.stat .num .unit{ font-size: 1.4rem; color: var(--signal-2); }
.stat .label{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.06em; color: rgba(255,255,255,.55); margin-top:8px; }
.band-paper .stat .label{ color: rgba(24,16,31,.55); }

/* ============ MARQUEE ============ */
.marquee{ overflow: hidden; position:relative; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width: max-content; gap: 64px; animation: marquee 26s linear infinite; align-items:center; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.marquee-item{ font-family: var(--font-mono); font-size: 1rem; letter-spacing:.08em; color: rgba(255,255,255,.4); white-space:nowrap; display:flex; align-items:center; gap:10px; transition: color .3s; }
.marquee-item::before{ content:"◆"; color: var(--brand, var(--signal)); font-size:.6rem; transition: color .3s, transform .3s; }
.marquee-item:hover{ color: rgba(255,255,255,.85); }
.marquee-item:hover::before{ transform: scale(1.35); }
.band-paper .marquee-item{ color: rgba(24,16,31,.45); }
.band-paper .marquee-item:hover{ color: rgba(24,16,31,.8); }
.marquee-item.has-logo{ font-weight:700; color: rgba(255,255,255,.62); }
.marquee-item.has-logo::before{ content:none; }
.band-paper .marquee-item.has-logo{ color: rgba(24,16,31,.6); }
.logo-badge{ width:25px; height:25px; border-radius:7px; background: var(--brand, var(--signal)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:0; flex:none; transition: transform .3s; }
.marquee-item.has-logo:hover .logo-badge{ transform: scale(1.12); }

/* ============ CLIENT GRID ============ */
.client-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.client-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px; padding:18px 20px 18px 24px; border-radius: var(--radius-m);
  border:1px solid var(--line); background: linear-gradient(180deg, var(--navy-2), var(--navy));
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.client-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--brand, var(--signal)); opacity:.9;
}
.client-card:hover{
  transform: translateY(-5px);
  border-color: var(--brand, var(--signal));
  box-shadow: 0 20px 42px -20px color-mix(in srgb, var(--brand, var(--signal)) 55%, transparent);
}
.band-paper .client-card{ background: linear-gradient(180deg,#fff, var(--paper-2)); border-color: var(--line-paper); }
.client-card .mono{
  width:44px; height:44px; border-radius:50%; flex:none;
  background: color-mix(in srgb, var(--brand, var(--signal)) 18%, transparent);
  border:1.5px solid var(--brand, var(--signal));
  display:grid; place-items:center; font-family: var(--font-display); font-weight:700; font-size:.82rem;
  color: var(--brand, var(--signal-2));
  transition: transform .4s var(--ease);
}
.client-card:hover .mono{ transform: scale(1.08); }
.band-paper .client-card .mono{ color: var(--brand, var(--signal-deep)); }
.client-card .name{ font-family: var(--font-display); font-size:.96rem; font-weight:600; line-height:1.25; }
.client-card .sector{ font-family: var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.45); margin-top:3px; }
.band-paper .client-card .sector{ color: rgba(24,16,31,.5); }

/* ============ TIMELINE (About) ============ */
.timeline{ position:relative; padding-left: 40px; }
.timeline::before{ content:""; position:absolute; left:6px; top:0; bottom:0; width:1px; background: var(--line); }
.timeline-fill{ position:absolute; left:6px; top:0; width:1px; background: var(--signal); height:0; transition: height .2s linear; }
.timeline-item{ position:relative; padding-bottom: 56px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-40px; top:4px; width:11px; height:11px; border-radius:50%; background: var(--ink); border: 1px solid var(--signal); }
.timeline-item .yr{ font-family: var(--font-mono); color: var(--signal-2); font-size:.85rem; letter-spacing:.08em; }
.timeline-item h3{ font-size:1.4rem; margin:8px 0 10px; }
.timeline-item p{ color: rgba(255,255,255,.62); max-width: 60ch; }

/* ============ TESTIMONIAL ============ */
.feed{ position:relative; border-radius: var(--radius-l); border:1px solid var(--line); background: linear-gradient(160deg, var(--navy-2), var(--ink)); padding: clamp(28px,5vw,64px); overflow:hidden; }
.feed-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 34px; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; color: rgba(255,255,255,.45); }
.feed-bar .rec{ display:flex; align-items:center; gap:8px; color: var(--signal-2); }
.feed-bar .rec .dot{ width:7px; height:7px; border-radius:50%; background: var(--signal); animation: blip 1.4s infinite; }
.feed-quote{ font-family: var(--font-display); font-size: clamp(1.3rem,3vw,2rem); font-weight:500; max-width: 26ch; line-height:1.3; }
.feed-author{ margin-top: 28px; display:flex; align-items:center; gap:14px; font-family: var(--font-mono); font-size:.8rem; color: rgba(255,255,255,.6); }
.feed-author .avatar{ width:38px; height:38px; border-radius:50%; background: var(--signal); color:var(--ink); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; }
.feed-dots{ display:flex; gap:8px; margin-top:36px; }
.feed-dots button{ width:26px; height:3px; background: var(--line-strong); border:none; cursor:pointer; padding:0; border-radius:2px; transition: background .3s, width .3s; }
.feed-dots button.is-active{ background: var(--signal); width: 42px; }

/* ============ GALLERY ============ */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 40px; }
.filter-row button{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em; padding: 10px 18px; border-radius:999px;
  border:1px solid var(--line-strong); background:transparent; color: rgba(255,255,255,.65); cursor:pointer; transition: all .3s var(--ease);
}
.band-paper .filter-row button{ border-color: var(--line-paper-strong); color: rgba(24,16,31,.65); }
.filter-row button.is-active{ background: var(--signal); color: var(--ink); border-color: var(--signal); }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-item{
  position:relative; border-radius: var(--radius-m); overflow:hidden; cursor: pointer;
  aspect-ratio: 4/3; transition: opacity .5s var(--ease), transform .5s var(--ease);
  border: 1px solid var(--line);
}
.gallery-item.wide{ grid-column: span 2; }
.gallery-item.hide{ display:none; }
.gallery-item .swatch{ position:absolute; inset:0; overflow:hidden; }
.gallery-item .swatch img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .info{
  position:absolute; inset:auto 0 0 0; padding: 18px; z-index:2;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  transform: translateY(60%); opacity:0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.gallery-item:hover .info{ transform: translateY(0); opacity:1; }
.gallery-item:hover .swatch img{ transform: scale(1.06); }
.gallery-item:hover .swatch.is-placeholder{ transform: scale(1.06); }
.gallery-item .swatch img{ transition: transform .6s var(--ease); }
.gallery-item .swatch.is-placeholder{ transition: transform .6s var(--ease); }
.gallery-item .cat{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; color: var(--signal-2); text-transform:uppercase; }
.gallery-item .ttl{ font-family: var(--font-display); font-size:1.05rem; margin-top:4px; }

/* video tiles — poster image + play badge; real video plays in the lightbox */
.gallery-item .swatch video{ display:none; }
.gallery-item.is-video .play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; z-index:2; pointer-events:none;
  background: rgba(11,1,23,.55); border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(3px); transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.gallery-item.is-video .play-badge svg{ width:20px; height:20px; margin-left:3px; color: var(--white); }
.gallery-item.is-video:hover .play-badge{ transform:translate(-50%,-50%) scale(1.12); background: var(--signal); border-color: var(--signal); }
.gallery-item.is-video:hover .play-badge svg{ color: var(--ink); }
.lightbox .swatch video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* placeholder tiles — categories awaiting real photography */
.swatch.is-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 26px);
}
.swatch.is-placeholder .ph-icon{ width:34px; height:34px; color: rgba(255,255,255,.28); }
.swatch.is-placeholder .ph-icon svg{ width:100%; height:100%; }
.swatch.is-placeholder .ph-label{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.32); }

.lightbox{ position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background: rgba(5,0,12,.9); backdrop-filter: blur(10px); padding: 30px; }
.lightbox.is-open{ display:flex; }
.lightbox-panel{ max-width: 760px; width:100%; background: var(--navy); border:1px solid var(--line-strong); border-radius: var(--radius-l); padding: clamp(24px,4vw,48px); position:relative; }
.lightbox-close{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--white); cursor:pointer; }
.lightbox .swatch{ aspect-ratio: 16/9; border-radius: var(--radius-m); margin-bottom: 24px; position:relative; overflow:hidden; }

/* category teaser row (home page) */
.category-teaser-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.category-teaser-grid .gallery-item{ aspect-ratio: 3/4; }

/* per-category showcase block (projects page) */
.category-block + .category-block{ border-top: 1px solid var(--line); }
.category-block .section-head{ margin-bottom: 40px; }
.category-block .cat-blurb{ max-width: 60ch; color: rgba(255,255,255,.62); margin-top:10px; }
.band-paper .category-block .cat-blurb{ color: rgba(24,16,31,.62); }
.category-block .cat-link{ margin-top: 28px; display:inline-flex; }

/* ============ FORM ============ */
.console{ border-radius: var(--radius-l); border:1px solid var(--line); background: linear-gradient(160deg, var(--navy-2), var(--ink)); padding: clamp(26px,4vw,50px); }
.field{ position:relative; margin-bottom: 26px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color: var(--white); font-family: var(--font-body); font-size:1rem; padding: 14px 2px 12px; outline:none;
  transition: border-color .3s;
}
.field textarea{ resize: vertical; min-height: 100px; }
.field label{
  position:absolute; left:2px; top:14px; color: rgba(255,255,255,.5); font-family: var(--font-mono); font-size:.85rem;
  pointer-events:none; transition: all .25s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--signal); }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top: -14px; font-size:.7rem; color: var(--signal-2); letter-spacing:.08em;
}
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-status{ font-family: var(--font-mono); font-size:.85rem; margin-top: 18px; min-height: 20px; color: var(--wire-2); }

/* ============ FOOTER ============ */
.site-footer{ background: var(--ink); border-top: 1px solid var(--line); padding-block: 64px 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.footer-grid h4{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.1em; color: rgba(255,255,255,.45); text-transform:uppercase; margin-bottom:18px; }
.footer-grid a{ display:block; color: rgba(255,255,255,.7); padding: 6px 0; transition: color .3s, transform .3s; font-size:.94rem; }
.footer-grid a:hover{ color: var(--signal-2); transform: translateX(3px); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 26px; flex-wrap:wrap; gap:14px; font-family: var(--font-mono); font-size:.75rem; color: rgba(255,255,255,.4); }
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal a{ color: rgba(255,255,255,.4); transition: color .3s; }
.footer-legal a:hover{ color: var(--signal-2); }
.social-row{ display:flex; gap:14px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; transition: all .3s; }
.social-row a:hover{ border-color: var(--signal); color: var(--signal); transform: translateY(-3px); }

/* ============ LEGAL DOCUMENT ============ */
.legal-meta{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em; opacity:.6; margin-top:14px; }
.legal-toc{ display:flex; flex-wrap:wrap; gap:9px 20px; margin:30px 0 50px; padding:22px 24px; border:1px solid var(--line-paper-strong); border-radius:var(--radius-m); background: rgba(24,16,31,.03); }
.legal-toc a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; opacity:.7; color: inherit; }
.legal-toc a:hover{ opacity:1; color: var(--signal-deep); }
.legal-doc{ max-width: 72ch; }
.legal-doc h2{ font-size: var(--step-1); margin-top:52px; scroll-margin-top: 110px; }
.legal-doc > .legal-doc-body > h2:first-child{ margin-top:0; }
.legal-doc h3{ font-size: 1.05rem; margin-top:26px; }
.legal-doc p{ margin-top:14px; line-height:1.7; opacity:.82; }
.legal-doc ul{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.legal-doc li{ position:relative; padding-left:22px; line-height:1.65; opacity:.82; }
.legal-doc li::before{ content:"—"; position:absolute; left:0; color: var(--signal-deep); }
.legal-doc strong{ font-weight:700; }
.legal-note{ margin-top:34px; padding:18px 22px; border-left:3px solid var(--signal-deep); background: rgba(201,80,27,.06); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.legal-note p{ margin-top:0; opacity:.85; }
.legal-note p + p{ margin-top:10px; }

/* ============ MISC ============ */
.divider{ height:1px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); }
.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; padding:8px 14px; border-radius:999px; border:1px solid var(--line-strong); color: rgba(255,255,255,.65); }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,90px); align-items:center; }
.pill-list{ display:flex; flex-wrap:wrap; gap:12px; }
.pill-list li{ font-family:var(--font-mono); font-size:.78rem; padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; color: rgba(255,255,255,.7); }
.band-paper .pill-list li{ border-color: var(--line-paper-strong); color: rgba(24,16,31,.7); }

.cta-band{ text-align:center; padding-block: clamp(80px,12vw,150px); position:relative; }
.cta-band h2{ font-size: var(--step-4); max-width: 18ch; margin-inline:auto; }
.cta-band p{ max-width: 46ch; margin: 22px auto 40px; color: rgba(255,255,255,.65); }

/* cursor */
.cursor-dot{ position:fixed; width:8px; height:8px; border-radius:50%; background: var(--signal); pointer-events:none; z-index:999; transform: translate(-50%,-50%); transition: opacity .3s, transform .15s var(--ease-soft), width .3s, height .3s; opacity:0; mix-blend-mode: difference; }
.cursor-dot.is-active{ opacity:1; }
.cursor-dot.is-big{ width:44px; height:44px; background: rgba(255,122,61,.5); }
@media (hover:none){ .cursor-dot{ display:none; } }

/* boot overlay */
.boot{ position:fixed; inset:0; background: var(--ink); z-index: 1000; display:flex; align-items:center; justify-content:center; transition: opacity .6s var(--ease), visibility .6s; }
.boot.is-done{ opacity:0; visibility:hidden; }
.boot-mark{ font-family: var(--font-mono); color: var(--signal-2); font-size:.9rem; letter-spacing:.2em; display:flex; gap:14px; align-items:center; }
.boot-mark .dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); animation: blip 1s infinite; }

/* responsive */
@media (max-width: 980px){
  .two-col{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .category-teaser-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery-item.wide{ grid-column: span 2; }
}
@media (max-width: 720px){
  .nav-links, .nav-status{ display:none; }
  .nav-burger{ display:block; }
  .field-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .category-teaser-grid{ grid-template-columns: repeat(2,1fr); }
  .section-head{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-item.wide{ grid-column: span 1; }
  .category-teaser-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* mobile nav panel */
.mobile-nav{ position:fixed; inset:0; background: var(--ink); z-index:190; display:flex; flex-direction:column; padding: 100px 30px 40px; gap: 6px; transform: translateY(-100%); transition: transform .5s var(--ease); }
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--font-display); font-size: 2rem; padding: 14px 0; border-bottom: 1px solid var(--line); }

/* swatch gradients (stand-ins for photography) */
.sw-1{ background: linear-gradient(135deg,#1c2b4a,#0b0117 60%); }
.sw-2{ background: linear-gradient(135deg,#3a1f52,#0b0117 60%); }
.sw-3{ background: linear-gradient(135deg,#2a3d3a,#0b0117 60%); }
.sw-4{ background: linear-gradient(135deg,#4a2a1f,#0b0117 60%); }
.sw-5{ background: linear-gradient(135deg,#1f3a45,#0b0117 60%); }
.sw-6{ background: linear-gradient(135deg,#3a2a52,#0b0117 60%); }