/* ════════════════════════════════════════════════════
   CYRON TUPANG DESIGN SYSTEM  ·  cyron-design.css
   Typography: Futura (Nunito Sans web substitute) +
               Syne (display) + IBM Plex Mono (utility)
   Maintained: 2025
════════════════════════════════════════════════════ */

/* ── IMPORTS ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── TOKENS ── */
:root {
  /* Color palette */
  --bg:           #0a0a09;   /* page background (admin: Site Settings -> Appearance) */
  --bg-2:         #0E0E10;
  --bg-3:         #16161A;
  --ink:          #EDEAE3;
  --ink-soft:     #9B9790;
  /* Was #5e5c57 — 2.75:1 on the page background, failing WCAG AA (4.5:1)
     everywhere it was used: section eyebrows, form notes, the name gate.
     #8a8880 measures 5.58:1 and keeps the same quiet, desaturated read. */
  --muted:        #8a8880;
  --line:         #242430;
  --line-soft:    #18181f;

  /* Accent — electric violet */
  --accent:       #1B4DFF;
  --accent-2:     #7FB0FF;
  /* Fill for anything carrying white text. --accent itself is 4.29:1 with
     white and --accent-2 is 2.6:1, so a gradient between them left the right
     half of every primary button below AA. This ramp stays 5.06:1 or better
     across its whole length. */
  --accent-fill:  #1A3FCC;
  --accent-fill-2:#1B4DFF;
  --accent-soft:  rgba(27, 77, 255, .14);
  --accent-soft-2:rgba(27, 77, 255, .28);

  /* Typography — Futura system */
  --futura:       'Nunito Sans', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --display:      'Syne', 'Nunito Sans', system-ui, sans-serif;
  --body:         'Nunito Sans', system-ui, sans-serif;
  --mono:         'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing & layout */
  --maxw:  1180px;
  --pad:   clamp(24px, 5vw, 56px);
  --sec:   clamp(60px, 8vw, 110px);
  /* Small-control radius. Was 5px, which sat off the 4/10/16 rung system
     everything else now uses — a 1px difference nobody sees individually but
     which is exactly the kind of drift that makes a system feel unbuilt. */
  --r:     4px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { background: var(--bg); }
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size:16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Smoke canvas sits at z-index:-1 (behind content, above the html backdrop).
   Header and main are lifted above it so the page stays interactive. */
#fluid{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}
header.nav{position:sticky;z-index:60}
main{position:relative;z-index:1}
#prog{z-index:100}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* Buttons do not inherit typography from their parent by default, so any
   button that never sets a family falls back to the UA font — which is why
   the Samyaza close (✕) and back-to-top (↑) glyphs were rendering in Arial
   on a page that otherwise has none. Inheriting fixes it at the reset
   rather than patching each button. */
button { cursor: pointer; font-family: inherit; font-size: inherit; }
::selection { background: var(--accent); color: #fff; }

/* ── LAYOUT ── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ── TYPOGRAPHY CLASSES ── */
.mono  { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.disp  { font-family: var(--display); }
.futura{ font-family: var(--futura); }

/* Type scale */
.t-hero  { font-family: var(--futura); font-weight: 800; font-size: clamp(44px, 7vw, 90px); line-height: .94; letter-spacing: -.02em; }
.t-h1    { font-family: var(--futura); font-weight: 700; font-size: clamp(34px, 4.8vw, 58px); line-height: .98; letter-spacing: -.015em; }
.t-h2    { font-family: var(--futura); font-weight: 700; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.02; letter-spacing: -.01em; }
.t-h3    { font-family: var(--futura); font-weight: 600; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.1; }
.t-body  { font-family: var(--body);   font-size: clamp(15px, 1.4vw, 17px); line-height: 1.68; }
.t-small { font-family: var(--body);   font-size: clamp(13px, 1.2vw, 14.5px); color: var(--ink-soft); }
.t-label { font-family: var(--mono);   font-size:12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.t-acc   { font-family: var(--mono);   font-size:12px; letter-spacing: .06em; color: var(--accent-2); }

/* ── BUTTONS ── */
.btn-primary {
  font-family: var(--futura);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--r);
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .7ch;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s;
  box-shadow: 0 12px 32px -12px var(--accent);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px var(--accent); }

.btn-ghost {
  font-family: var(--futura);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 23px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  transition: border-color .22s, color .22s, transform .22s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-3px); }

/* ── CARDS ── */
.card-base {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius:16px;
  transition: border-color .28s, transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
}
.card-base:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 28px 60px -28px rgba(27, 77, 255, .28);
}

/* ── FORM CONTROLS ── */
.input-base {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  font-family: var(--body);
  font-size: 14.5px;
  background: var(--bg-3);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.input-base:focus { border-color: var(--accent); }
.input-base::placeholder { color: var(--muted); }

.select-base {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 14px;
  font-family: var(--futura);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--ink);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.select-base:focus { border-color: var(--accent); }

.label-base {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.textarea-base {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  font-family: var(--body);
  font-size:14px;
  background: var(--bg-3);
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color .2s;
}
.textarea-base:focus { border-color: var(--accent); }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius:999px;
  font-weight: 500;
}
.badge-accent { background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(27,77,255,.28); }
.badge-success{ background: rgba(55,211,153,.12); color: #37d399; border: 1px solid rgba(55,211,153,.24); }
.badge-warn   { background: rgba(251,191,36,.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,.24); }
.badge-muted  { background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }

/* ── DIVIDERS ── */
.rule { border: none; border-top: 1px solid var(--line-soft); margin: 0; }
.rule-strong { border-top-color: var(--line); }

/* ── SKILL LEVEL BAR ── */
.skill-bar-wrap { margin-top: 8px; }
.skill-bar-track { height: 3px; background: var(--line); border-radius:4px; overflow: hidden; }
.skill-bar-fill  { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:4px; transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s; }

/* ── FOCUS RING ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius:4px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── UTILITIES ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gap-grid-sm { gap: clamp(10px, 1.4vw, 16px); }
.gap-grid-md { gap: clamp(14px, 1.8vw, 22px); }
.gap-grid-lg { gap: clamp(22px, 3vw, 38px); }

/* ── RESPONSIVE HELPERS ── */
@media (max-width: 900px) { .hide-mobile { display: none !important; } }
@media (min-width: 901px) { .show-mobile { display: none !important; } }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════
   ADMIN DATABASE SPECIFIC STYLES  (used in DB file)
══════════════════════════════════════════════════ */

/* DB Layout */
.db-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.db-sidebar { background: var(--bg-2); border-right: 1px solid var(--line); padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.db-main   { padding: clamp(24px, 3vw, 40px); overflow-x: hidden; }

/* DB Sidebar */
.db-logo { padding: 22px 20px 18px; border-bottom: 1px solid var(--line-soft); }
.db-logo .name { font-family: var(--futura); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; }
.db-logo .tag  { font-family: var(--mono); font-size:10px; color: var(--muted); letter-spacing: .1em; margin-top: 2px; }
.db-nav { padding: 12px 10px; flex: 1; }
.db-section-head { font-family: var(--mono); font-size:10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.db-link { display: flex; align-items: center; gap:8px; width: 100%; text-align: left; background: none; border: 0; font-family: var(--futura); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); padding: 9px 10px; border-radius:10px; cursor: pointer; transition: background .16s, color .16s; }
.db-link:hover, .db-link.active { background: var(--bg-3); color: var(--ink); }
.db-link.active { color: var(--accent-2); }
.db-link .ico { width: 18px; text-align: center; font-size:14px; flex-shrink: 0; }
.db-link .cnt { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }
.db-footer { padding: 16px 20px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* DB Header */
.db-page-head { display: flex; align-items: center; justify-content: space-between; gap:16px; margin-bottom: 28px; flex-wrap: wrap; }
.db-page-title { font-family: var(--futura); font-weight: 800; font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -.01em; margin: 0; }
.db-page-sub   { font-family: var(--mono); font-size:12px; color: var(--muted); letter-spacing: .06em; margin-top: 4px; }

/* DB Search + Filter bar */
.db-bar { display: flex; gap:8px; margin-bottom: 22px; flex-wrap: wrap; }
.db-search { flex: 1; min-width: 200px; position: relative; }
.db-search input { padding-left: 38px; }
.db-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size:14px; pointer-events: none; }
.db-filter-row { display: flex; gap:8px; flex-wrap: wrap; }
.db-filter-btn { font-family: var(--futura); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); border-radius:999px; padding: 8px 14px; background: var(--bg-3); color: var(--ink-soft); cursor: pointer; transition: .18s; }
.db-filter-btn:hover, .db-filter-btn.on { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }

/* DB Table */
.db-table-wrap { background: var(--bg-2); border: 1px solid var(--line); border-radius:16px; overflow: hidden; overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.db-table th { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); background: var(--bg-3); font-weight: 500; white-space: nowrap; }
.db-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size:14px; line-height: 1.5; }
.db-table tr:last-child td { border-bottom: 0; }
.db-table tr:hover td { background: rgba(27,77,255,.04); }
.db-table td.q  { max-width: 280px; color: var(--ink); font-weight: 500; }
.db-table td.a  { max-width: 340px; color: var(--ink-soft); font-size: 13.5px; }
.db-table td.sm { white-space: nowrap; }

/* DB Panels */
.db-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius:16px; padding: clamp(20px, 2.5vw, 28px); margin-bottom: 22px; }
.db-panel-head { display: flex; align-items: center; justify-content: space-between; gap:12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.db-panel-title { font-family: var(--futura); font-weight: 700; font-size:16px; letter-spacing: .02em; margin: 0; }

/* DB Stats row */
.db-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin-bottom: 28px; }
.db-stat-card { background: var(--bg-2); border: 1px solid var(--line); border-radius:10px; padding: 18px 20px; transition: border-color .2s; }
.db-stat-card:hover { border-color: var(--accent); }
.db-stat-card .num { font-family: var(--futura); font-weight: 800; font-size:30px; line-height: 1; letter-spacing: -.02em; background: linear-gradient(120deg, var(--accent-2), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.db-stat-card .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* DB Image Gallery */
.db-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.db-img-card { background: var(--bg-3); border: 1px solid var(--line); border-radius:10px; overflow: hidden; transition: border-color .22s, transform .22s; cursor: pointer; }
.db-img-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.db-img-thumb { aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.db-img-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size:10px; letter-spacing: .18em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.db-img-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.db-img-meta { padding: 10px 12px; }
.db-img-meta .name { font-family: var(--futura); font-size:12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-img-meta .dest { font-family: var(--mono); font-size:10px; color: var(--muted); letter-spacing: .06em; margin-top: 3px; }

/* DB Upload area */
.db-upload-zone { border: 2px dashed var(--line); border-radius:10px; padding: 40px; text-align: center; cursor: pointer; transition: border-color .22s, background .22s; }
.db-upload-zone:hover, .db-upload-zone.drag { border-color: var(--accent); background: var(--accent-soft); }
.db-upload-zone .ico { font-size:30px; margin-bottom: 12px; }
.db-upload-zone .title { font-family: var(--futura); font-weight: 700; font-size:16px; margin-bottom: 6px; }
.db-upload-zone .sub  { font-family: var(--mono); font-size:12px; color: var(--muted); letter-spacing: .06em; }

/* DB Q&A record rows */
.qa-row { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.qa-row:last-child { border-bottom: 0; }
.qa-row .qtext { font-family: var(--futura); font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.qa-row .atext { font-size:14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }
.qa-row .qa-meta { display: flex; gap:8px; flex-wrap: wrap; align-items: center; }
.qa-row .var-list { display: flex; flex-direction: column; gap:4px; margin-bottom: 8px; }
.qa-row .var-list .v { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-left: 14px; position: relative; }
.qa-row .var-list .v::before { content: "↳"; position: absolute; left: 0; color: var(--accent); }

/* DB Responsive */
@media (max-width: 800px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 100; transition: left .28s; width: 240px; height: 100vh; }
  .db-sidebar.open { left: 0; box-shadow: 4px 0 40px -8px #000; }
  .db-main { padding: 16px; }
}

/* ── SKILL TOOL SECTION ── */
.tool-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.tool-skill-card { background: var(--bg-2); border: 1px solid var(--line); border-radius:10px; padding: 18px 20px; transition: border-color .22s; }
.tool-skill-card:hover { border-color: var(--accent); }
.tool-skill-card .t-name { font-family: var(--futura); font-weight: 700; font-size:14px; letter-spacing: .02em; margin-bottom: 6px; }
.tool-skill-card .t-desc { font-size:12px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 12px; }
.tool-skill-card .t-level { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tool-skill-card .t-level .label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tool-skill-card .t-level .val   { font-family: var(--futura); font-weight: 800; font-size:16px; color: var(--accent-2); }

/* Company card */
.company-card { background: var(--bg-2); border: 1px solid var(--line); border-radius:16px; padding: 22px 24px; transition: border-color .22s, transform .22s; }
.company-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.company-card .c-name { font-family: var(--futura); font-weight: 800; font-size:19px; letter-spacing: .01em; margin-bottom: 4px; }
.company-card .c-role { font-family: var(--mono); font-size:12px; color: var(--accent-2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.company-card .c-year { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.company-card .c-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 10px; }
.company-logo-area { aspect-ratio: 3/1; border-radius:10px; background: var(--bg-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.company-logo-area:hover { border-color: var(--accent); }
.company-logo-area img { max-width: 80%; max-height: 80%; object-fit: contain; }
.company-logo-area .ph-label { font-family: var(--mono); font-size:10px; letter-spacing: .18em; color: rgba(255,255,255,.35); text-transform: uppercase; }


/* ── PHASE 4 FRONT-END POLISH: fluid cursor, refined placeholders, no duplicate Q input ── */
#syz-question-search,.syz-question-search{display:none!important}.syz-picker{gap:8px}.syz-picker select{margin-top:0}.syz-input input::placeholder{color:rgba(237,234,227,.36)}
.lb-img span{font-family:var(--mono);font-size:clamp(10px,1.2vw,13px)!important;letter-spacing:.08em!important;text-transform:uppercase;color:rgba(255,255,255,.48)!important;max-width:240px;text-align:center;line-height:1.5}.lb-card{max-width:min(92vw,1100px)}.lb-img{min-height:min(70vh,680px)}
/* The WebGL build draws its own mix-blend-mode "negative" dot (#cursor-neg) as the
   pointer — the dark dot seen in the reference — so hide the native OS cursor. */
.has-fluid-cursor,.has-fluid-cursor *{cursor:none!important}
@media (pointer:coarse),(max-width:900px){.has-fluid-cursor,.has-fluid-cursor *{cursor:auto!important}.has-fluid-cursor a,.has-fluid-cursor button{cursor:pointer!important}}
.tile,.wcard,.hcard,.tcard,.hero-img,.logoBox{position:relative;overflow:hidden}.tile::after,.wcard::after,.hcard::after,.tcard::after,.hero-img::after,.logoBox::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(127,176,255,.22),rgba(31,182,201,.10) 34%,transparent 68%);opacity:0;transition:opacity .22s ease;mix-blend-mode:screen;z-index:4}.tile:hover::after,.wcard:hover::after,.hcard:hover::after,.tcard:hover::after,.hero-img:hover::after,.logoBox:hover::after{opacity:1}
@media (pointer:coarse),(max-width:900px){.fluid-cursor,.fluid-trail{display:none!important}.has-fluid-cursor body,.has-fluid-cursor a,.has-fluid-cursor button{cursor:auto!important}}

/* ════════════════════════════════════════════════════════════
   PHASE 5 — Canvas fluid cursor, clean dropdown, back button,
   parallax section, contact form
════════════════════════════════════════════════════════════ */

/* ── Cursor: glowing fluid orb (soft luminous blob that trails) ── */
.cur-glow{position:fixed;left:0;top:0;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,rgba(127,176,255,.55) 0%,rgba(27,77,255,.35) 35%,rgba(31,182,201,.18) 60%,rgba(27,77,255,0) 78%);
  filter:blur(8px);mix-blend-mode:screen;pointer-events:none;z-index:99991;opacity:0;
  transition:opacity .3s ease,width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1);
  will-change:transform}
.cur-glow.on{opacity:1}
.cur-core{position:fixed;left:0;top:0;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#cabfff 45%,rgba(127,176,255,0) 75%);
  box-shadow:0 0 10px rgba(127,176,255,.95),0 0 22px rgba(27,77,255,.6);
  mix-blend-mode:screen;pointer-events:none;z-index:99992;opacity:0;
  transition:opacity .3s ease,width .25s ease,height .25s ease;
  will-change:transform}
.cur-core.on{opacity:1}
/* hover: the glow swells gently, core brightens */
.cur-glow.is-hover{width:78px;height:78px}
.cur-core.is-hover{width:12px;height:12px}
/* click: glow flares brighter/bigger for a moment */
.cur-glow.click{width:96px;height:96px;filter:blur(10px)}
/* hide the system cursor everywhere so only the glow shows */
.has-fluid-cursor,.has-fluid-cursor *{cursor:none!important}
/* hide any older cursor systems */
.cursor-ring,.cursor-dot,.fluid-trail,.fluid-cursor,.fluid-cursor-canvas,.fluid-core,.cur-ring,.cur-dot{display:none!important}
@media (pointer:coarse),(max-width:900px){
  .cur-glow,.cur-core{display:none!important}
  .has-fluid-cursor,.has-fluid-cursor *{cursor:auto!important}
  .has-fluid-cursor a,.has-fluid-cursor button,.has-fluid-cursor select,.has-fluid-cursor [role="button"]{cursor:pointer!important}
  .has-fluid-cursor input,.has-fluid-cursor textarea{cursor:text!important}
}

/* ── Clean Samyaza question dropdown (native select restyle) ── */
.syz-picker select option{background:#171722;color:var(--ink);padding:8px}
/* hide the count entirely for a clean look */
#syz-qa-count{display:none!important}
.syz-picker-top{justify-content:flex-start}
.syz-picker-top span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ── Back button: remove awkward chip bg, glow on hover ── */
.backlink{background:none!important;border:0!important;padding:0!important;border-radius:0!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);
  cursor:pointer;display:inline-flex;gap:.55ch;align-items:center;margin-bottom:8px;
  transition:color .2s ease,text-shadow .2s ease,transform .2s ease}
.backlink:hover{color:var(--accent-2);text-shadow:0 0 14px rgba(127,176,255,.65);transform:translateX(-2px)}
.backlink:hover .bk-arrow{transform:translateX(-3px)}
.bk-arrow{display:inline-block;transition:transform .2s ease}

/* ── PARALLAX creative section (between tools & about) ── */
.parallax-band{position:relative;min-height:clamp(360px,46vw,560px);display:grid;place-items:center;
  overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);isolation:isolate}
/* ── Horizon + earth ──
   Replaces the old photographic background. A circle far wider than the
   viewport sits with its TOP EDGE inside the band, so only its upper curve
   shows — that curve is the planet's edge.

   Sized and placed in viewport units on purpose. An earlier version offset
   the circle by a percentage of its own width, which meant the geometry
   changed with screen size: correct at ~1800px, and on a 3440px ultrawide
   the curve computed ABOVE the band and vanished. Using `top` (a % of the
   band) plus a vw width keeps the arc identical at every resolution.

   --horizon-top   how far down the band the edge sits
   --earth-width   bigger = flatter arc
   --horizon-opacity  overall strength of the planet + glow */
.parallax-band{
  --horizon-top:42%;
  --earth-width:300vw;
  /* Strength of the lit horizon arc and its halo — NOT the planet mass.
     The mass has to stay fully opaque: the starfield sits directly behind
     it, so any translucency there puts stars back inside the curve. */
  --horizon-opacity:1;
  /* Brightness of the lit edge. This is the knob to turn for "brighter" or
     "dimmer" horizon — it multiplies the arc's alphas, so it can go above 1
     where --horizon-opacity cannot. 1 = the original glow. */
  --horizon-glow:1.85;
  /* Sky lifted out of near-black so the band reads as deep space rather than
     a black rectangle. The planet interior stays pure black regardless — the
     sky is only ever visible ABOVE the horizon line. */
  --sky-top:#060c22;--sky-bottom:#0d1740}

.parallax-band .px-earth{position:absolute;left:50%;top:var(--horizon-top);
  width:var(--earth-width);aspect-ratio:1;transform:translateX(-50%);
  /* -1, above the starfield at -2 — the planet is opaque and must occlude it.
     .px-veil / .px-grain share -1 but come later in the DOM, so they still
     paint over the planet as before. */
  z-index:-1;border-radius:50%;pointer-events:none;
  /* Deliberately NOT opacity:var(--horizon-opacity) — see the token comment.
     The mass reads as a silhouette, resolving to pure black well before the
     bottom of the circle; only the top few percent near the lit edge carries
     any colour at all. */
  background:radial-gradient(circle at 50% 8%,#0a1a33 0%,#04101f 26%,#000 52%,#000 100%);
  box-shadow:0 0 170px 14px rgba(56,132,255,calc(.16 * var(--horizon-glow) * var(--horizon-opacity)))}
/* The lit atmospheric edge. This is what actually reads as "the horizon",
   so it is what --horizon-opacity dims. Fading this layer is safe: it sits
   inside the planet and has nothing behind it but black. */
.parallax-band .px-earth .px-horizon-glow{position:absolute;inset:0;border-radius:50%;
  opacity:var(--horizon-opacity);
  /* Four layers, brightest first: a tight near-white rim that gives the edge
     its hard line, the blue atmosphere just under it, a deep falloff into the
     mass, and an outward bloom above the line. All scaled by --horizon-glow. */
  box-shadow:inset 0 5px 12px -2px  rgba(214,236,255,calc(.42 * var(--horizon-glow))),
             inset 0 12px 26px -6px rgba(122,190,255,calc(.88 * var(--horizon-glow))),
             /* Tight falloff on purpose. Scaling this one with the rest pushed
                blue ~110px down into the mass and the interior stopped being
                black. Bright edge, black inside — both, not one or the other. */
             inset 0 22px 52px -20px rgba(48,120,255,calc(.34 * var(--horizon-glow))),
             0 -3px 26px 2px       rgba(160,205,255,calc(.32 * var(--horizon-glow)))}
/* deep-space sky behind the planet */
.parallax-band .px-sky{position:absolute;inset:0;z-index:-3;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}

/* Ultrawide (34" and similar): a wider circle keeps the arc shallow instead
   of bowing into a dome across all that width. */
@media(min-width:2200px){ .parallax-band{--earth-width:460vw;--horizon-top:46%} }
@media(min-width:3000px){ .parallax-band{--earth-width:560vw;--horizon-top:48%} }
/* Phones: band is proportionally taller, so drop the edge lower. */
@media(max-width:700px){ .parallax-band{--horizon-top:52%;--earth-width:260vw} }
.parallax-band .px-veil{position:absolute;inset:0;z-index:-1;
  /* lighter than before — the old values were set to tame a photo and would
     flatten the horizon glow */
  background:linear-gradient(180deg,rgba(2,5,12,.20),rgba(2,5,12,0) 46%,rgba(0,0,0,.62))}
.parallax-band .px-grain{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px}
.parallax-inner{position:relative;z-index:2;text-align:center;max-width:760px;padding:clamp(48px,8vw,90px) var(--pad)}
.parallax-inner .px-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-2);display:inline-flex;gap:.7em;align-items:center;justify-content:center;margin-bottom:18px}
.parallax-inner .px-eyebrow::before,.parallax-inner .px-eyebrow::after{content:"";width:24px;height:1px;background:var(--accent)}
.parallax-inner h2{font-family:var(--futura);font-weight:800;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(28px,4.6vw,52px);margin:0}
.parallax-inner h2 em{font-style:normal;color:#fff}
.parallax-inner p{color:var(--ink-soft);font-size:clamp(15px,1.5vw,18.5px);line-height:1.65;margin:20px auto 0;max-width:56ch;
  /* This line lands on the brightest part of the arc and is the smallest
     type in the band, so it needs more backing than the headline, not less. */
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.9),0 4px 26px rgba(0,0,0,.7);
  /* "a sale." was landing alone on the last line; pretty pulls words down
     to keep the closing line from reading as an afterthought. */
  text-wrap:pretty}
.parallax-inner .px-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);justify-content:center;margin-top:34px}
.parallax-inner .px-stat .n{font-family:var(--futura);font-weight:800;font-size:clamp(26px,3.6vw,40px);
  color:#fff}
.parallax-inner .px-stat .l{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}

/* ── Contact form ── */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:8px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.cform{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px);box-shadow:0 30px 70px -50px #000}
.cform .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.cform .cf-row{grid-template-columns:1fr}}
.cform .cf-field{margin-bottom:14px}
.cform label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.cform input,.cform textarea,.cform select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  background:var(--bg-3);color:var(--ink);font-family:var(--futura);font-size:14px;outline:none;transition:border-color .2s,background .2s}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--accent);background:#171722}
.cform textarea{min-height:120px;resize:vertical;line-height:1.6}
.cform .cf-submit{width:100%;justify-content:center;margin-top:4px;border:0;cursor:pointer}
.cform .cf-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:12px;text-align:center;letter-spacing:.03em}
.cform-status{font-family:var(--mono);font-size:12px;padding:10px 14px;border-radius:10px;margin-top:12px;display:none}
.cform-status.show{display:block}
.cform-status.ok{background:rgba(55,211,153,.12);border:1px solid rgba(55,211,153,.3);color:#37d399}
.cform-status.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#f87171}
.contact-side .cs-block{margin-bottom:26px}
.contact-side .cs-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-side .cs-mail{font-family:var(--futura);font-weight:800;font-size:clamp(18px,2.4vw,24px);color:var(--ink);word-break:break-all;transition:.25s;display:inline-block}
.contact-side .cs-mail:hover{color:var(--accent-2)}
.contact-side .cs-links{display:flex;flex-wrap:wrap;gap:8px}

/* FINAL WORK PAGE NAVIGATION FIXES */
.work-backbar{padding-top:clamp(42px,6vw,76px);margin-bottom:18px;display:flex;align-items:center;justify-content:flex-start}
.work-backbar + .page-head{padding-top:0}
.page-head .eyebrow{display:inline-flex;margin-top:0}
.backlink{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
.backlink:hover{color:var(--accent-2)!important;text-shadow:0 0 14px rgba(127,176,255,.72),0 0 30px rgba(27,77,255,.25);transform:translateX(-2px)}
.category-scroll{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;margin-top:10px;max-width:min(100%,920px)}
.category-scroll .catindex{margin-top:0;padding:16px 0 8px;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.cat-scroll-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:rgba(20,20,28,.62);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font-family:var(--mono);font-size:16px;line-height:1;transition:border-color .2s,color .2s,background .2s,box-shadow .2s,transform .2s}
.cat-scroll-btn:hover{border-color:var(--accent);color:var(--accent-2);background:rgba(27,77,255,.12);box-shadow:0 0 20px rgba(27,77,255,.22);transform:translateY(-1px)}
.cat-scroll-btn:active{transform:translateY(0) scale(.96)}
@media(max-width:760px){.work-backbar{padding-top:34px}.category-scroll{grid-template-columns:30px minmax(0,1fr) 30px;gap:4px}.cat-scroll-btn{width:30px;height:30px}.category-scroll .catindex{padding-top:12px}}

/* Last fix: MP4 front-end gallery support */
.tile video,.hero-img video,.portrait-img video{width:100%;height:100%;object-fit:cover;display:block;background:#050508}
.tile.is-video .ph:after{content:'▶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;color:#fff;z-index:3;pointer-events:none}
.video-badge{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 7px;text-transform:uppercase;z-index:4}
.lb-img video{max-width:96vw;max-height:92vh;object-fit:contain;background:#000}

/* ══════════════════════════════════════════════════════════════
   Chrome spacing — the navbar and footer sat flush against the
   adjacent sections with no breathing room on any page.
   ══════════════════════════════════════════════════════════════ */

/* navbar: real vertical padding, and horizontal gutters that hold up on
   narrow screens instead of a fixed 56px */
header.nav .nav-in{padding-top:14px;padding-bottom:14px;
  padding-left:clamp(18px,4vw,56px);padding-right:clamp(18px,4vw,56px)}

/* clear the sticky navbar before a sub-page starts. The home hero is
   deliberately left flush — it is a full-bleed section. */
main > .page.fadepage{padding-top:clamp(28px,4vw,56px)}

/* last section must not butt into the footer */
main > .page{padding-bottom:clamp(40px,5vw,72px)}
footer.mv-foot{margin-top:clamp(32px,5vw,72px);
  border-top:1px solid var(--line-soft,rgba(255,255,255,.08));
  padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(32px,4vw,48px)}
footer.mv-foot .wrap{padding-left:clamp(18px,4vw,56px);padding-right:clamp(18px,4vw,56px)}

/* ══════════════════════════════════════════════════════════
   Visitor name gate — asked once, feeds Samyaza the name.
   ══════════════════════════════════════════════════════════ */
.cyv-gate{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--bg,#1E1E1E) 82%,transparent);backdrop-filter:blur(16px);
  opacity:0;transition:opacity .24s ease}
.cyv-gate.on{opacity:1}
.cyv-card{width:min(430px,100%);padding:clamp(24px,3vw,34px);border-radius:16px;
  background:var(--card,#141418);border:1px solid var(--line,rgba(255,255,255,.1));
  box-shadow:0 30px 80px rgba(0,0,0,.55);transform:translateY(14px);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.cyv-gate.on .cyv-card{transform:none}
.cyv-kicker{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted,#8a8a95)}
.cyv-card h2{font-family:var(--display,sans-serif);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(21px,2.4vw,27px);margin:10px 0 8px;color:var(--ink,#EDEAE3)}
.cyv-card p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--ink-soft,#b9b9c2)}
.cyv-card input{width:100%;padding:13px 15px;border-radius:10px;font-size:14px;
  background:var(--bg-3,#1b1b20);color:var(--ink,#EDEAE3);
  border:1px solid var(--line,rgba(255,255,255,.1));transition:border-color .2s}
.cyv-card input:focus{outline:none;border-color:var(--accent,#1B4DFF)}
.cyv-act{display:flex;gap:8px;margin-top:16px}
.cyv-btn{flex:1;padding:12px 16px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--accent,#1B4DFF);background:var(--accent,#1B4DFF);color:#fff;transition:.2s}
.cyv-btn:hover{filter:brightness(1.1)}
.cyv-btn.ghost{background:transparent;color:var(--ink-soft,#b9b9c2);border-color:var(--line,rgba(255,255,255,.14))}
.cyv-btn.ghost:hover{color:var(--ink,#fff);border-color:var(--accent,#1B4DFF);filter:none}
.cyv-skip{display:block;width:100%;margin-top:14px;padding:6px;border:0;background:none;cursor:pointer;
  font-family:var(--mono,monospace);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#8a8a95);transition:color .2s}
.cyv-skip:hover{color:var(--ink-soft,#b9b9c2)}
@media(max-width:520px){.cyv-act{flex-direction:column}}

/* ══════════════════════════════════════════════════════════════════
   PARALLAX BAND — starfield + typography
   Ported from the React/Tailwind cosmic component. Two ideas were worth
   keeping: the box-shadow starfield (one element per layer instead of
   hundreds of nodes) and the staggered text reveal. The horizon and earth
   are deliberately left out — that full space scene read as too much here.
   Scoped to the band only, never site-wide.
   ══════════════════════════════════════════════════════════════════ */
:root{ --star-opacity:.5; --star-speed:150s; }

.parallax-band .px-stars{position:absolute;inset:0;z-index:-2;overflow:hidden;opacity:.85;
  pointer-events:none;opacity:var(--star-opacity);
  /* fade at both edges so stars never end on a hard line */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.parallax-band .px-stars span{position:absolute;top:0;left:0;border-radius:50%;background:transparent;
  animation:pxStarDrift var(--dur) linear infinite;will-change:transform}
/* after the shadow list scrolls past, a copy sits one screen below so the
   loop is seamless rather than snapping back */
.parallax-band .px-stars span::after{content:"";position:absolute;top:2000px;left:0;
  width:inherit;height:inherit;border-radius:50%;box-shadow:inherit}

.parallax-band .px-stars-1{width:1px;height:1px;--dur:var(--star-speed)}
.parallax-band .px-stars-2{width:2px;height:2px;--dur:calc(var(--star-speed) * .67)}
.parallax-band .px-stars-3{width:3px;height:3px;--dur:calc(var(--star-speed) * .43)}

@keyframes pxStarDrift{from{transform:translateY(0)}to{transform:translateY(-2000px)}}

/* ── Typography ──
   The snippet staggered each word in on its own delay. Same idea, applied
   to the band's real content: eyebrow, headline, body, then the stats. */
.parallax-band .px-eyebrow,
.parallax-band .parallax-inner h2,
.parallax-band .parallax-inner p,
.parallax-band .px-stat{opacity:0;transform:translateY(14px);
  animation:pxRise .9s cubic-bezier(.22,1,.36,1) forwards}
.parallax-band .px-eyebrow        {animation-delay:.05s}
.parallax-band .parallax-inner h2 {animation-delay:.18s}
.parallax-band .parallax-inner p  {animation-delay:.34s}
.parallax-band .px-stat:nth-child(1){animation-delay:.46s}
.parallax-band .px-stat:nth-child(2){animation-delay:.54s}
.parallax-band .px-stat:nth-child(3){animation-delay:.62s}
.parallax-band .px-stat:nth-child(4){animation-delay:.70s}

@keyframes pxRise{to{opacity:1;transform:none}}

/* Headline: wider tracking on the emphasis, and a soft glow so it lifts off
   the starfield instead of sitting flat on it. */
.parallax-band .parallax-inner h2{
  color:#fff;
  /* The headline sits directly over the lit horizon arc, which is the one
     bright band in the whole section — a soft glow alone was not enough
     separation. Layered: a tight dark contact shadow for edge definition,
     a mid drop for body, and a wide black halo that darkens the arc behind
     the letterforms. The blue glow stays on top as the accent. */
  text-shadow:
    0 1px 2px  rgba(0,0,0,.92),
    0 2px 10px rgba(0,0,0,.85),
    0 6px 30px rgba(0,0,0,.75),
    0 0 60px   rgba(0,0,0,.55),
    0 0 48px   rgba(56,132,255,.22)}
.parallax-band .parallax-inner h2 em{font-style:normal;color:#fff;
  letter-spacing:.004em;
  /* Both lines are white now, so the <em> is doing weight-and-position work
     rather than colour. It is still the lower of the two and lands squarely
     on the brightest part of the arc, so it keeps the dark backing — and the
     blue halo is dropped, which only read as a tint on coloured text. */
  text-shadow:
    0 1px 2px  rgba(0,0,0,.92),
    0 2px 10px rgba(0,0,0,.85),
    0 6px 30px rgba(0,0,0,.75),
    0 0 60px   rgba(0,0,0,.55),
    0 0 48px   rgba(56,132,255,.22)}

/* Each clause on its own line from 761px up.

   The headline breaks out of the 760px measure column that the paragraph
   uses — a two-line display line needs the room, and the body copy should
   not get wider just to accommodate it.

   The size is driven off the available width rather than a plain vw clamp:
   the longer line runs about 21.9x its own font-size, so dividing the usable
   width by 22 is the largest size that is guaranteed to fit on one line at
   any viewport. 52px stays the ceiling. */
@media(min-width:761px){
  .parallax-band .parallax-inner h2{
    width:100vw;margin-left:calc(50% - 50vw);
    padding-inline:var(--pad);
    /* The longer of the two lines measures ~17.9x its own font-size, so
       dividing usable width by 18 is the largest size that keeps it on one
       row. 52px stays the ceiling. */
    font-size:min(52px, calc((100vw - 2 * var(--pad)) / 18))}
  /* display:block gives the two rows. Deliberately NOT white-space:nowrap:
     this copy is admin-editable (Site Settings -> Creative Band), and nowrap
     would push longer text off the side of the viewport. Without it, longer
     copy simply wraps to a third row instead of breaking the page. */
  .parallax-band .parallax-inner h2 .px-line{display:block}
}

/* The supporting line on one row, same technique as the headline: it runs
   about 63.6x its own font-size, so dividing usable width by 64 is the
   largest size guaranteed to fit unbroken. 18.5px stays the ceiling.

   1060px is the floor for this, not 761px: below it the divisor would push
   the type under ~15px, and a one-line paragraph is not worth reading at
   11px. Under 1060 it goes back to the 56ch measure and wraps normally. */
@media(min-width:1060px){
  .parallax-band .parallax-inner p{
    max-width:none;
    width:100vw;margin-left:calc(50% - 50vw);
    padding-inline:var(--pad);
    font-size:min(18.5px, calc((100vw - 2 * var(--pad)) / 64))}
}
/* Small screens: back to normal flow — forcing two lines here would either
   overflow or shrink the type past the point of impact. */
@media(max-width:760px){
  .parallax-band .parallax-inner h2{text-wrap:balance}
  .parallax-band .parallax-inner h2 .px-line{display:inline;white-space:normal}
}
.parallax-band .px-eyebrow{letter-spacing:.34em}
.parallax-band .px-stat .n{letter-spacing:-.02em;
  text-shadow:0 0 34px rgba(122,190,255,.24)}

/* Motion off → show everything immediately, no drift. */
@media(prefers-reduced-motion:reduce){
  .parallax-band .px-stars span{animation:none}
  .parallax-band .px-eyebrow,
  .parallax-band .parallax-inner h2,
  .parallax-band .parallax-inner p,
  .parallax-band .px-stat{animation:none;opacity:1;transform:none}
}
@media(max-width:700px){ :root{ --star-opacity:.34 } }

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   A QA pass found 60 of 60 interactive elements with no visible focus
   indicator — keyboard users had no way to tell where they were. These
   rules are deliberately global so nothing added later slips through.
   ══════════════════════════════════════════════════════════════════ */

/* Skip link — first thing in the tab order, hidden until focused. */
.skip-link{position:fixed;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:10000;background:var(--accent-fill);color:#fff;
  padding:12px 22px;border-radius:0 0 10px 10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .18s cubic-bezier(.22,1,.36,1)}


/* Focus ring. A plain `:focus-visible{outline:...}` already existed, but at
   one class of specificity it lost its halo to any element carrying its own
   box-shadow (the Samyaza bubble, work cards), leaving a thin ring that
   disappears over artwork. The doubled pseudo-class raises specificity to
   0,2,0 so the ring wins wherever it lands, and the dark inner halo keeps it
   readable on light imagery. :focus-visible only — pointer users never see it. */
a:focus-visible:focus-visible,
button:focus-visible:focus-visible,
input:focus-visible:focus-visible,
select:focus-visible:focus-visible,
textarea:focus-visible:focus-visible,
summary:focus-visible:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(10,10,9,.9),0 0 0 7px rgba(127,176,255,.45)}
/* Gallery cards hide the native cursor; make their ring unmistakable. */
.cy-gallery .card:focus-visible{outline:3px solid var(--accent-2);outline-offset:4px}

/* Minimum hit area. WCAG 2.5.8 asks for 24px; 44px is the comfortable
   touch target. Applied via min-height so text layout is unaffected. */
@media(pointer:coarse){
  a,button,[role="button"],input[type="submit"],.nlink,.sub,.mv-btn{
    min-height:44px}
  .nav-in .sub,.mhead,.arr{min-height:44px;display:inline-flex;align-items:center}
}

/* Small type floor. 11px mono eyebrows read fine on a 27" display and
   become unreadable on a phone; 12.5px is the floor on small screens. */
@media(max-width:700px){
  .mv-ey,.px-eyebrow,.hero-eyebrow,.t-label,.mono,
  .mv-toolwrap-head,.gl,.cf-note,.cyv-kicker,
  /* measured on a 375px viewport: every leaf node still under 12px */
  .cta-label,.cyro-loader-label,.loader-copy,.mhead,.mv-btn,.mv-foot-head,
  .px-stat .l,.syz-foot,.tc-role,.totop,.wgo-a,.wgo-t,.wyr,
  .label-base,label{font-size:12.5px!important;letter-spacing:.14em}
  /* Tracking that reads as deliberate at 10px looks broken at 12.5px on
     multi-word labels, so ease it off where the text is a sentence. */
  .loader-copy,.cf-note,.syz-foot,.wgo-t{letter-spacing:.02em}
}

/* Placed after the global ring so white wins on the accent-filled pill. */
.skip-link:focus-visible:focus-visible{transform:translate(-50%,0);
  outline:2px solid #fff;outline-offset:-4px;box-shadow:0 6px 24px rgba(0,0,0,.5)}

@media(prefers-reduced-motion:reduce){ .skip-link{transition:none} }

/* ══════════════════════════════════════════════════════════════════
   SECTION RHYTHM

   Measured before this block: seven of nine sections sat on an identical
   115px of vertical padding, which tells the eye everything on the page
   is equally important. Worse, it was inverted — Work, the section the
   whole portfolio exists to show, had 65px while Testimonials and Beyond
   had 115px.

   Spacing is hierarchy. Three tiers now: the work gets air, the supporting
   sections get the default, and the short utility strips get compressed
   so they read as punctuation rather than chapters.
   ══════════════════════════════════════════════════════════════════ */

/* The tiers themselves live in cyron-premium.css, which owns section
   padding with !important — setting them here would never win. */
.parallax-band{padding-block:0}

/* ══════════════════════════════════════════════════════════════════
   SECOND MOVEMENT

   A block that used to be its own <section> and is now a second beat
   inside one. It needs to read as subordinate to the section head above
   it but still be a clear break — so: a rule, generous space, and a
   heading one rung down from .mv-sec-title (40px vs 75px) rather than
   the same size, which would make the section look like it has two
   competing titles.
   ══════════════════════════════════════════════════════════════════ */
.mv-movement{
  margin-top:clamp(72px,9vw,132px);
  padding-top:clamp(48px,6vw,80px);
  border-top:1px solid var(--line-soft)}

.mv-movement .mv-sub-title{
  font-family:var(--futura);font-weight:800;
  font-size:clamp(24px,3vw,40px);
  line-height:1.02;letter-spacing:-.015em;
  margin:0;text-wrap:balance}

/* The section head inside a movement sits tighter than a top-level one. */
.mv-movement .mv-sec-head{margin-bottom:clamp(24px,3vw,40px)}

@media(max-width:700px){
  .mv-movement{margin-top:56px;padding-top:40px}
}

/* ══════════════════════════════════════════════════════════════════
   COLLABORATIONS — footer of the Work section

   Was its own <section id="client-logos">. It is evidence for the grid
   above it rather than a chapter in its own right, so it now closes Work
   instead of interrupting the page. Sized and spaced as a footer: a rule
   to separate it, less air than a section break, heading one rung down.
   ══════════════════════════════════════════════════════════════════ */
.work-collabs{
  margin-top:clamp(56px,7vw,96px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-soft)}

.work-collabs .pf-head{padding-left:0;padding-right:0;margin-bottom:clamp(20px,2.5vw,32px)}

.work-collabs .sec-title{
  font-family:var(--futura);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.05;letter-spacing:-.012em;margin:0}

/* The marquee ran full-bleed as a section; inside Work it keeps that,
   but the head above it stays on the section's measure. */
.work-collabs .image-marquee{margin-top:0}

@media(max-width:700px){
  .work-collabs{margin-top:48px;padding-top:32px}
}

/* A full-bleed hero has to meet the nav with no seam. The page shell
   carries 56px of top padding for ordinary pages that open with a title
   block; when the first thing in the page IS the hero, that padding reads
   as a gap between the header and the picture. Scoped with :has() so only
   hero-led pages lose it and every other page keeps its spacing. */
.page:has(> .co-hero:first-child){padding-top:0}

/* ══════════════════════════════════════════════════════════════════
   COMPANY PROFILE HERO  ·  title card for each work gallery

   Full-bleed media with the type laid over it: brand rail top-left, an
   oversized wordmark on the lower third, the period anchored bottom-left
   and the wordmark repeated bottom-right. The scrim is a two-axis
   gradient rather than a flat tint so the picture stays visible on the
   right while the left column keeps enough contrast to read.
   ══════════════════════════════════════════════════════════════════ */
.co-hero{
  position:relative;isolation:isolate;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(420px,58vw,720px);
  display:flex;align-items:stretch;
  background:#05070d}

.co-hero .cph-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}

/* No banner uploaded yet: a field rather than an empty box, so the
   layout still reads as designed. */
.co-hero.no-media{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(27,77,255,.30), transparent 60%),
    radial-gradient(80% 70% at 12% 90%, rgba(127,176,255,.14), transparent 62%),
    linear-gradient(160deg,#070b18,#04060c)}

.co-hero .cph-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,5,10,.94) 0%, rgba(3,5,10,.78) 34%, rgba(3,5,10,.18) 68%, rgba(3,5,10,.42) 100%),
    linear-gradient(180deg, rgba(3,5,10,.72) 0%, transparent 30%, transparent 62%, rgba(3,5,10,.88) 100%)}

.co-hero .cph-grid{
  position:relative;z-index:1;width:100%;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(28px,4vw,56px) var(--pad);
  display:grid;grid-template-rows:auto 1fr auto;
  gap:clamp(20px,3vw,40px)}

/* ── brand rail, top left ── */
.co-hero .cph-rail{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.co-hero .cph-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.co-hero .cph-rule{flex:1;min-width:40px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.42),transparent)}

.co-hero .cph-corner{
  position:absolute;top:clamp(28px,4vw,56px);right:var(--pad);
  font-family:var(--mono);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ── the wordmark block ── */
.co-hero .cph-main{align-self:end;max-width:min(760px,62%)}
/* The company mark, sized to lead the block. */
.co-hero .cph-logo{margin:0 0 clamp(14px,1.8vw,24px)}
.co-hero .cph-logo img{
  height:clamp(48px,6vw,88px);width:auto;max-width:min(320px,60vw);
  object-fit:contain;display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}

/* Name and role share one size. The logo is the identity now, so the
   wordmark stops competing with it. */
.co-hero .cph-name,
.co-hero .cph-role{
  font-family:var(--futura);font-weight:700;color:#fff;
  font-size:clamp(15px,1.7vw,20px);line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.75);margin:0}
.co-hero .cph-role{font-weight:500;color:rgba(255,255,255,.82);margin-top:4px}
.co-hero .cph-tag{
  margin:clamp(10px,1.2vw,16px) 0 0;max-width:52ch;
  color:rgba(255,255,255,.80);font-size:clamp(14px,1.4vw,16.5px);line-height:1.65;
  text-shadow:0 1px 6px rgba(0,0,0,.8);text-wrap:pretty}

/* The footer strip (dot markers, big year, repeated period) and the
   bottom-right signature were removed from the markup — the company name
   was appearing four times in one banner. Their rules go with them. */

/* ── prose beneath the card ── */
.co-note{
  display:grid;gap:clamp(18px,2.6vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:clamp(28px,3.4vw,48px) 0 clamp(32px,4vw,56px)}
.co-note h3{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 10px}
.co-note p{
  margin:0;color:var(--ink-soft);line-height:1.72;max-width:62ch;
  font-size:clamp(14px,1.4vw,16px);text-wrap:pretty}

@media(max-width:820px){
  .co-hero{min-height:clamp(380px,86vw,560px)}
  .co-hero .cph-main{max-width:100%}
  .co-hero .cph-corner{display:none}   /* corner label crowds a phone */
  .co-hero .cph-scrim{background:
    linear-gradient(180deg, rgba(3,5,10,.72) 0%, rgba(3,5,10,.35) 40%, rgba(3,5,10,.92) 100%)}
  .co-note{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .co-hero .cph-media{animation:none}
}

/* Years in the Work dropdown, so the nav reads as a timeline. */
#workdrop .drop button .yr{margin-left:auto;padding-left:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);white-space:nowrap}
#workdrop .drop button{display:flex;align-items:baseline;gap:8px;width:100%}
#workdrop .drop button:hover .yr{color:var(--accent-2)}

/* <picture> wraps the media, so the wrapper needs the same box or the
   image loses its absolute positioning inside the hero. */
.co-hero picture{position:absolute;inset:0;display:block}
.co-hero picture .cph-media{position:absolute;inset:0}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT 1 — BRAND BOOK

   Landing page for a Selected Work card set to Layout 1. Reproduces the
   reference: a centred logo lockup, then numbered sections of images with
   captions, a typography specimen and a colour palette.

   The reference is a light document; this renders on the site's dark
   shell, so the sheet is an explicit light surface rather than inheriting
   the page — a brand book is a document and reads as one.
   ══════════════════════════════════════════════════════════════════ */
/* A contained sheet, not a full-bleed section. The reference is a printed
   board — it has edges, and the page shows around it. Spanning the whole
   viewport made it read as part of the site rather than as a document. */
.brandbook{
  --bb-ink:#14141a; --bb-soft:#6b6b73; --bb-line:#e2e0dc; --bb-paper:#f7f7f5;
  --bb-sheet:1120px;
  --bb-pad:clamp(18px,2.4vw,34px);
  background:var(--bb-paper);color:var(--bb-ink);
  width:min(var(--bb-sheet),calc(100vw - clamp(24px,6vw,96px)));
  margin:clamp(20px,3vw,48px) auto clamp(40px,6vw,90px);
  padding:0;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.7);
  overflow:hidden;
  /* A board, not a stack. The reference is a mosaic — Logo Variations sits
     beside the 3D render, Colour Palette beside Brand Icons — so blocks
     flow into columns. Ten columns rather than two, so a row can split
     60/40 as well as down the middle: the reference sets Logo Variations
     against the 3D render at roughly six to four, not half and half.
     Items stretch, so two paired blocks end level — start-aligned they
     leave a white sliver under the shorter of the two. */
  display:grid;gap:0;grid-template-columns:repeat(10,minmax(0,1fr));
  align-items:stretch;
  /* The reference prints its section label a constant 21px from the left
     of a 736px board, whatever the width of the block it sits on — so the
     inset belongs to the sheet, not to the block. Container units measure
     against the sheet and hold that ratio at any size: 21/736 = 2.86cqw. */
  container-type:inline-size}

.brandbook .bb-hero{grid-column:span 10}
.brandbook .bb-sec.is-full{grid-column:span 10}
.brandbook .bb-sec.is-half{grid-column:span 5}
.brandbook .bb-sec.is-wide{grid-column:span 6}
.brandbook .bb-sec.is-narrow{grid-column:span 4}

/* Every block is artwork edge to edge — no gutters, no rules, no caption
   bars. The seams come from the pictures meeting each other. */
.brandbook .bb-sec{position:relative;min-width:0;display:flex;flex-direction:column}
.brandbook .bb-sec .bb-media,
.brandbook .bb-sec .bb-grid{flex:1}
.brandbook .bb-grid{
  display:grid;gap:0;
  grid-template-columns:repeat(var(--bb-cols,4),minmax(0,1fr))}

.brandbook .bb-media{
  /* a <figure>, so the browser's own 1em/40px margin has to go — that
     margin is exactly what would open paper between neighbouring pictures */
  margin:0;
  background:#fff;overflow:hidden;
  /* each picture is its own stacking context, so its caption, veil and
     click target anchor to it rather than to the section around it —
     which is what lets every tile in a strip carry its own */
  position:relative;
  display:flex;align-items:center;justify-content:center}
/* cover, so every block is filled corner to corner and neighbours meet with
   no seam. Supply artwork already cropped to the block ratio — the admin
   prints the exact size for the chosen width. */
.brandbook .bb-media img,
.brandbook .bb-media video{width:100%;height:100%;object-fit:cover;display:block}

/* A block is as tall as its own artwork. The ratio is measured off the
   image once it loads and set as --bb-ar, so a wide construction band stays
   a band and a squat palette strip stays squat, instead of every section
   being forced into one house proportion. Paired blocks then stretch to
   whichever of the two is taller, and the shorter one crops to fill. */
.brandbook .bb-media{aspect-ratio:var(--bb-ar,4/3)}

/* The number and title are printed ON the artwork, top-left, at the same
   inset the reference uses. */
.brandbook .bb-head{
  position:absolute;z-index:3;
  top:1.90cqw;left:2.86cqw;right:2.86cqw;
  display:flex;align-items:baseline;gap:.7em;margin:0;color:#fff;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(9px,1.07cqw,13px);letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  pointer-events:none}
.brandbook .bb-num{opacity:.75}
.brandbook .bb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a stamp on a pale picture needs the opposite ink */
.brandbook .bb-head.is-dark-label{color:var(--bb-ink);text-shadow:0 1px 8px rgba(255,255,255,.6)}

/* Tiles in a strip share one proportion — the strip's, measured off its
   first picture — so the row is a single unbroken band. Letting each tile
   keep its own ratio leaves paper showing between them.
   The heading rides on the artwork like every other stamp; it is anchored
   to the section rather than to the first tile so a long one can run past
   that tile instead of being clipped inside it. No band, no padding. */
.brandbook .bb-sec.is-strip .bb-media{width:100%}
.brandbook .bb-sec.is-strip > .bb-head{z-index:4}

/* A veil under the stamp for legibility, and a second, stronger state on
   hover that lifts the caption clear of a busy photograph. */
.brandbook .bb-veil{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,0) 34%);
  opacity:0;transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.brandbook .bb-media:has(> .bb-head) .bb-veil{opacity:1}
.brandbook .bb-media:has(> .bb-head.is-dark-label) .bb-veil{
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0) 34%)}

/* ── hover ──
   The picture eases in behind its own frame and the veil deepens, so the
   card reads as pressable without moving the layout a pixel. */
.brandbook .bb-media.is-live{cursor:zoom-in}
.brandbook .bb-media img,
.brandbook .bb-media video{
  transition:transform .6s cubic-bezier(.16,1,.3,1),filter .45s cubic-bezier(.16,1,.3,1)}
.brandbook .bb-media.is-live:hover img,
.brandbook .bb-media.is-live:focus-visible img,
.brandbook .bb-media.is-live:hover video{transform:scale(1.045)}
.brandbook .bb-media.is-live:hover .bb-veil,
.brandbook .bb-media.is-live:focus-visible .bb-veil{opacity:1;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.12) 46%,rgba(0,0,0,.28))}
.brandbook .bb-media.is-live:has(> .bb-head.is-dark-label):hover .bb-veil{
  background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.16) 46%,rgba(255,255,255,.3))}
.brandbook .bb-media.is-live:focus-visible{
  outline:2px solid var(--accent-2);outline-offset:-4px}

.brandbook .bb-empty{display:block;width:100%;height:100%;background:
  repeating-linear-gradient(45deg,#efeeea,#efeeea 8px,#e7e6e1 8px,#e7e6e1 16px)}

.brandbook .bb-loading,
.brandbook .bb-blank{
  grid-column:1 / -1;
  padding:clamp(60px,10vw,140px) var(--bb-pad);text-align:center;color:var(--bb-soft)}

@media(max-width:820px){
  .brandbook .bb-sec.is-half,
  .brandbook .bb-sec.is-wide,
  .brandbook .bb-sec.is-narrow{grid-column:span 10}
  .brandbook .bb-grid{grid-template-columns:repeat(min(var(--bb-cols,4),3),minmax(0,1fr))}
}
@media(max-width:520px){
  .brandbook .bb-grid{grid-template-columns:repeat(min(var(--bb-cols,4),2),minmax(0,1fr))}
}

/* ── full-size viewer ──
   Its own, rather than the gallery lightbox: that one is built around
   gallery records (comments, moodboards, tool chips) which a brand-book
   plate has none of. */
.bb-view{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,64px);
  background:rgba(6,6,8,.94);backdrop-filter:blur(6px);
  animation:bbViewIn .28s cubic-bezier(.16,1,.3,1)}
.bb-view[hidden]{display:none}
@keyframes bbViewIn{from{opacity:0}to{opacity:1}}

.bb-view-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%}
.bb-view-fig img{
  max-width:100%;max-height:calc(100vh - clamp(90px,14vw,190px));
  width:auto;height:auto;object-fit:contain;display:block;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9)}
.bb-view-fig figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-align:center}
.bb-view-fig figcaption[hidden]{display:none}

.bb-view-x,.bb-view-nav{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:24px;line-height:1;
  transition:background .25s ease,border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.bb-view-x:hover,.bb-view-nav:hover{background:rgba(27,77,255,.32);border-color:rgba(127,176,255,.8)}
.bb-view-x:focus-visible,.bb-view-nav:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(127,176,255,.9)}
.bb-view-x{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);font-size:20px}
.bb-view-nav{top:50%;transform:translateY(-50%)}
.bb-view-prev{left:clamp(10px,2.4vw,34px)}
.bb-view-next{right:clamp(10px,2.4vw,34px)}
.bb-view-prev:hover{transform:translateY(-50%) translateX(-3px)}
.bb-view-next:hover{transform:translateY(-50%) translateX(3px)}
.bb-view-nav[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .bb-view{animation:none}
  .brandbook .bb-media img,
  .brandbook .bb-media video,
  .bb-view-x,.bb-view-nav{transition:none}
  .brandbook .bb-media.is-live:hover img,
  .brandbook .bb-media.is-live:focus-visible img,
  .brandbook .bb-media.is-live:hover video{transform:none}
  .bb-view-prev:hover,.bb-view-next:hover{transform:translateY(-50%)}
}

.brandbook.is-dark{
  --bb-ink:#f2f2f0; --bb-soft:#9a9aa2; --bb-line:#2a2a31; --bb-paper:#0d0d11}
.brandbook.is-dark .bb-media{background:#15151b}
.brandbook.is-dark .bb-empty{background:
  repeating-linear-gradient(45deg,#17171d,#17171d 8px,#1d1d24 8px,#1d1d24 16px)}

/* An empty company gallery keeps its hero and details and simply says so.
   It used to fall back to a retired page design instead. */
.gal-empty{
  padding:clamp(48px,7vw,96px) 0;text-align:center;color:var(--muted);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ── UNDER CONSTRUCTION NOTICE ──
   Sits above the lightbox (1200) so it is never buried. Styled from the same
   tokens as the rest of the site rather than as a generic alert box. */
.wip{
  position:fixed;inset:0;z-index:1400;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,5vw,48px);
  background:rgba(6,6,8,.82);backdrop-filter:blur(8px);
  animation:wipIn .3s cubic-bezier(.16,1,.3,1)}
.wip[hidden]{display:none}
@keyframes wipIn{from{opacity:0}to{opacity:1}}

.wip-card{
  width:min(520px,100%);
  background:linear-gradient(180deg,#14141a,#0d0d11);
  border:1px solid rgba(127,176,255,.22);border-radius:var(--r,4px);
  padding:clamp(26px,4vw,40px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  animation:wipCard .45s cubic-bezier(.16,1,.3,1)}
@keyframes wipCard{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.wip-ey{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-2,#7FB0FF);margin-bottom:14px}
.wip-title{
  margin:0 0 14px;color:#f2f2f0;font-size:clamp(20px,2.6vw,26px);
  line-height:1.25;text-wrap:balance}
.wip-body{
  margin:0;color:var(--muted,#8a8880);font-size:14.5px;line-height:1.65;
  max-width:60ch;text-wrap:pretty}
.wip-actions{margin-top:clamp(22px,3vw,30px)}
.wip-ok{
  width:100%;padding:13px 20px;cursor:pointer;
  background:var(--accent,#1B4DFF);border:1px solid var(--accent,#1B4DFF);
  border-radius:var(--r,4px);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s ease,border-color .25s ease}
.wip-ok:hover{background:#1A3FCC;border-color:#7FB0FF}
.wip-ok:focus-visible{outline:2px solid var(--accent-2,#7FB0FF);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .wip,.wip-card{animation:none}
  .wip-ok{transition:none}
}