/* blankfac3 — styles */

:root {
  --bg: #0B0B0E;
  --alt: #101015;
  --surface: #15151C;
  --border: #27272F;
  --text: #ECECEF;
  --muted: #9A9AA6;
  --muted-2: #84848F;
  --foot-ico: #2E2E37;
  --key: #C9C9D2;
  --fill: #80808C;
  --active-tint: rgba(255,255,255,.07);
  --open: #5BBF7B;
  --waitlist: #E0A33E;
  --closed: #D85B4E;
  --r: 14px;
  --rs: 10px;
  --maxw: 1180px;
}
[data-theme="light"] {
  --bg: #F5F5F2;
  --alt: #EAEAE5;
  --surface: #FFFFFF;
  --border: #D8D6CF;
  --text: #15151C;
  --muted: #5A5A63;
  --muted-2: #6E6E77;
  --foot-ico: #C9C7BF;
  --key: #2E2E36;
  --fill: #5A5A63;
  --active-tint: rgba(0,0,0,.05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: clamp(56px, 8vw, 100px) 0; }
hr.div { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-links a {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 11px;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface); }
.nav-tools { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  -webkit-appearance: none; appearance: none;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: border-color .15s, transform .12s;
}
.theme-toggle:hover { border-color: var(--key); }
.theme-toggle:active { transform: scale(.95); }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  background: var(--surface);
  position: relative;
}
.lang-switch button {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s;
  position: relative;
  z-index: 1;
}
.lang-switch button.active { color: var(--text); }
.lang-switch .lang-pill {
  position: absolute; top: 3px; bottom: 3px;
  background: var(--bg);
  border-radius: 999px;
  transition: left .25s, width .25s;
  z-index: 0;
}

/* type */
.label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.label.key { color: var(--key); }
.label.fill { color: var(--fill); }
h1, h2, h3 { font-family: "Bricolage Grotesque", sans-serif; margin: 0; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -.01em; margin: .5rem 0 .35rem; }
h3 { font-weight: 700; }
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 8px; }

/* hero */
.hero {
  background: var(--bg);
  padding: clamp(40px, 6vw, 70px) 0 clamp(60px, 8vw, 100px);
}
[data-theme="light"] .hero {
  background: var(--bg);
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: .98;
  max-width: 18ch;
  margin-top: 18px;
}
.hero .role {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--key);
  margin: 18px 0 14px;
}
.hero .sub { color: var(--muted); max-width: 60ch; font-size: 1.05rem; }
.hero .status-row { display: flex; align-items: center; gap: 14px; margin: 26px 0 6px; flex-wrap: wrap; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 22px;
  border-radius: var(--rs);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.btn.primary { background: var(--text); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.cool { background: transparent; color: var(--fill); border-color: var(--fill); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost:hover { border-color: var(--key); }
.btn.cool:hover { border-color: var(--key); background: var(--active-tint); }
.btn.sm { padding: 9px 15px; font-size: .82rem; }

/* status button */
.status-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: .82rem;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.status-btn:hover { border-color: var(--open); transform: translateY(-1px); }
.status-btn:active { transform: scale(.97); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--open); box-shadow: 0 0 10px var(--open); }
.status-check { color: var(--open); font-weight: 700; font-size: .85rem; }

/* dept cards */
.depts { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }
.dept {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .15s, transform .15s;
}
.dept:hover { border-color: var(--key); }
.dept.cool:hover { border-color: var(--fill); }
.dept .top {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(160deg, var(--surface), var(--alt));
}
.dept.cool .top {
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(160deg, var(--surface), var(--alt));
}
.dept .top .label { position: absolute; top: 16px; left: 16px; }
.dept .body { padding: 22px 22px 24px; }
.dept h3 { font-size: 1.5rem; font-weight: 800; }
.dept p { color: var(--muted); margin: 8px 0 16px; font-size: .95rem; }
.dept .go {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--key);
}
.dept.cool .go { color: var(--fill); }
.dept.tool:hover { border-color: var(--open); }
.dept.tool .top { background: radial-gradient(120% 120% at 50% 10%, rgba(91,191,123,.14), transparent 55%), linear-gradient(160deg, var(--surface), var(--alt)); }
.dept.tool .go { color: var(--open); }
.label.tool { color: var(--open); }

/* project grid */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .15s, transform .15s;
}
.card:hover { transform: translateY(-2px); border-color: var(--muted-2); }
.card .thumb { aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--surface), var(--alt)); }
.card .body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card h3 { font-size: 1.12rem; }
.card .tags { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--muted); }
.card .desc { color: var(--muted); font-size: .88rem; margin: 4px 0 12px; flex: 1; }

/* case */
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 32px; align-items: start; }
.case-hero { aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--surface), var(--alt)); border-radius: var(--r); border: 1px solid var(--border); }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.gal .thumb { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--surface), var(--alt)); border: 1px solid var(--border); border-radius: 10px; }
.breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.step { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface); }
.step .n { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--key); letter-spacing: .1em; }
.step .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .92rem; margin-top: 4px; }
.step .d { color: var(--muted); font-size: .78rem; margin-top: 3px; }

.tool-col {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  position: sticky; top: 20px;
}
.tool-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.tool-cell:last-child { border-bottom: 0; padding-bottom: 0; }
.tool-cell .label { font-size: .62rem; letter-spacing: .18em; color: var(--muted-2); text-align: center; }
.tool-cell img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--alt); }
.tool-cell .pair { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.case-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
}
.field input, .field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
  transition: border-color .15s;
}
.field textarea { min-height: 160px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--key); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  font-size: .84rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 13px;
  background: var(--surface);
  transition: border-color .15s, transform .12s;
}
.chip:hover { border-color: var(--key); transform: translateY(-1px); }
.tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
}

/* two col panels */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.panel h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; }
.clean { list-style: none; padding: 0; margin: 0; }
.clean li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.clean li span { color: var(--muted-2); font-family: "IBM Plex Mono", monospace; font-size: .8rem; }

/* faq */
.qa { padding: 16px 0; border-bottom: 1px solid var(--border); }
.qa .q { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1rem; }
.qa .a { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* tos */
.tos-blk { padding: 12px 0 16px; }
.tos-blk .h {
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--key);
  margin-bottom: 6px;
}
.tos-blk p { color: var(--muted); font-size: .92rem; margin: 0 0 8px; }
.tos-short {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 22px 24px;
  margin-top: 18px;
}
.tos-short .qa { padding: 10px 0; }
.tos-short .qa .q { font-size: .95rem; }

/* gate */
.gate { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 28px; max-width: 620px; }
.gate .x18 {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--closed);
  color: var(--closed);
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem; letter-spacing: .1em;
  padding: 6px 11px; border-radius: 8px; margin-bottom: 16px;
}
.gate .note { color: var(--muted-2); font-size: .82rem; margin-top: 14px; }

/* ABOUT ============================================ */
.about-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: 20px 0 30px;
  text-align: center;
}
.avatar {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--surface), var(--alt));
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.avatar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(0,0,0,.3);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: .01em;
}
.about-role { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }

/* social circles */
.bio-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 16px 0 0;
}
.bio-links .sc-item {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color .15s, transform .12s, background .15s;
}
.bio-links .sc-item:hover { border-color: var(--key); transform: translateY(-2px); }
.bio-links .sc-item:active { transform: scale(.95); }
.bio-links .sc-item img {
  position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; object-fit: contain;
}
.bio-links .sc-ph {
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem; font-weight: 600;
  color: var(--muted); text-align: center; letter-spacing: .02em;
}

/* facts */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 24px 0 8px;
}
.fact {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
}
.fact .k {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}
.fact .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 1rem; margin-top: 4px; }

/* CALCULATOR ======================================== */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  margin-top: 18px;
  align-items: start;
}
.calc-side {
  position: static;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 28px 26px;
}
.calc-side .total {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--key);
  margin: 0 0 6px;
  line-height: 1.05;
}
.calc-side .total .from {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.calc-side .breakdown-list {
  border-top: 1px solid var(--border);
  margin-top: 22px; padding-top: 18px;
  font-size: .82rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 2px;
}
.calc-side .breakdown-list .row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.calc-side .breakdown-list .row span:last-child { font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.calc-side .breakdown-list .row.mod span { color: var(--muted-2); }
.calc-side .warn {
  margin-top: 20px; padding: 12px 14px;
  border-radius: 8px; border: 1px solid var(--waitlist);
  color: var(--waitlist);
  font-size: .78rem; line-height: 1.4;
}
.calc-side .disclaimer {
  margin-top: 20px;
  color: var(--muted-2);
  font-size: .74rem; line-height: 1.5;
}
.calc-side .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.calc-block { margin-bottom: 26px; }
.calc-block .h {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.calc-block .helper {
  color: var(--muted); font-size: .82rem; margin: 4px 0 12px;
}

/* base packages grid */
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pkg {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
.pkg:hover { transform: translateY(-1px); border-color: var(--muted-2); }
.pkg:active { transform: scale(.98); }
.pkg.active { border-color: var(--key); background: var(--active-tint); }
.pkg.cool.active { border-color: var(--fill); background: var(--active-tint); }
.pkg .pname { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .92rem; }
.pkg .pprice { font-family: "IBM Plex Mono", monospace; font-size: .82rem; color: var(--text); }
.pkg.cool .pprice { color: var(--text); }

/* design level (radio pills) */
.lvl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lvl {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: .86rem;
  transition: border-color .15s, background .15s, transform .12s;
}
.lvl:hover { border-color: var(--muted-2); }
.lvl:active { transform: scale(.97); }
.lvl.active { border-color: var(--key); background: var(--active-tint); color: var(--text); }
.lvl .mult { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--text); margin-left: 6px; }
.lvl.active .mult { color: var(--key); }

/* addon chips */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.addon {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: .86rem;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  transition: border-color .15s, background .15s, transform .12s;
  text-align: left;
}
.addon:hover { border-color: var(--muted-2); }
.addon:active { transform: scale(.98); }
.addon.active { border-color: var(--key); background: var(--active-tint); }
.addon .price {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  color: var(--text);
  white-space: nowrap;
}

/* usage toggle */
.usage-row { display: flex; gap: 8px; }
.usage-row .lvl { flex: 1; text-align: center; }

/* CONTACT INFO BAR (about page) */
.contact-bar {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.contact-bar .item { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-bar .item .k {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}
.contact-bar .item .v {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600;
  font-size: 1rem; margin-top: 4px;
}
.contact-bar .item .v.email { color: var(--key); font-family: "IBM Plex Mono", monospace; font-size: .92rem; font-weight: 500; }
.about-sections { margin-top: 4px; }
.about-sec { margin-top: 26px; }
.about-sec-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.06rem; margin: 0 0 8px; }
.about-sec-b { font-size: .92rem; color: var(--muted-2); margin: 0; line-height: 1.6; }

/* footer */
footer {
  position: static;
  z-index: 5;
  margin-top: 64px;
  padding: 30px 0;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--bg);
}
/* monotone, pinned footer logo row */
.foot-logos {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  min-height: 26px;
}
.foot-logo { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.foot-ico {
  display: inline-block;
  width: 18px; height: 18px;
  background-color: var(--foot-ico);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* original-colour footer logos (shown as-is, not tinted) */
.foot-img { width: 26px; height: 26px; object-fit: contain; opacity: .9; }
@media (max-width: 600px) {
  footer { justify-content: center; text-align: center; }
  .foot-logos { order: 3; flex-basis: 100%; }
}

/* responsive */
@media (max-width: 1000px) {
  .calc { grid-template-columns: 1fr; }
  .calc-side { position: static; }
}
@media (max-width: 900px) {
  .grid3, .gal, .breakdown { grid-template-columns: repeat(2, 1fr); }
  .two, .form-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .tool-col { position: static; flex-direction: row; flex-wrap: wrap; }
  .tool-cell { flex: 1 1 80px; border-bottom: 0; border-right: 1px solid var(--border); padding-right: 12px; padding-bottom: 0; }
  .tool-cell:last-child { border-right: 0; }
  .pkg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .depts { grid-template-columns: 1fr; }
  .grid3, .gal, .breakdown { grid-template-columns: 1fr; }
  .nav { gap: 10px; }
  .nav-links a { padding: 6px 8px; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--key); outline-offset: 3px; border-radius: 4px; }

/* ===== ADDED: sticky header ===== */
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(8px)) {
  header { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(10px); }
}
.nav { padding: 15px 0; }
.calc-side { top: 90px; }
.tool-col { top: 90px; }

/* ===== ADDED: calculator base-package groups ===== */
.pkg-group-h {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: .82rem; color: var(--muted);
  margin: 16px 0 8px;
}
.pkg-group-h:first-of-type { margin-top: 4px; }
.calc-block .pkg-grid + .pkg-group-h { margin-top: 16px; }

/* ===== ADDED: commercial quota plaque + cta row ===== */
.quota {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--key);
  background: var(--active-tint);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-top: 34px;
}
.quota .quota-mark {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--key);
  border: 1px solid var(--key); border-radius: 8px;
  padding: 5px 10px; white-space: nowrap; margin-top: 2px;
}
.quota p { margin: 0; color: var(--text); font-size: .95rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ===== ADDED: about stack logos ===== */
.stack-logos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
  margin-top: 12px;
}
.focus-line {
  text-align: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600;
  font-size: 1.05rem; color: var(--text);
  margin: 26px auto 4px; max-width: 760px; line-height: 1.6;
}
.stack-strip { text-align: center; margin: 18px 0 4px; }
.stack-strip-label {
  font-family: "IBM Plex Mono", monospace; font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 12px;
}
.stack-logos .stk {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0;
}
.stack-logos .stk img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 7px 18px rgba(0,0,0,.42)); }

/* ===================== ADDED: DATA-DRIVEN COMPONENTS ===================== */
.back-link { display:inline-block; }

/* ---- Work grid (covers) ---- */
.work-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px;
}
.work-card {
  display:block; border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  background:var(--surface); text-decoration:none; color:inherit; transition:border-color .2s, transform .2s;
}
.work-card:hover { border-color:var(--key); }
.work-cover { aspect-ratio:4/5; background:var(--alt); overflow:hidden; }
.work-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.work-cover .cover-ph {
  width:100%; height:100%;
  background:repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, var(--alt) 12px, var(--alt) 24px);
}
.work-meta { display:flex; justify-content:space-between; align-items:baseline; padding:13px 15px; }
.work-meta h3 { font-family:"Bricolage Grotesque"; font-size:1rem; margin:0; }
.work-meta span { font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--muted-2); }
.grid-empty, .stage-empty {
  font-family:"IBM Plex Mono"; font-size:.8rem; color:var(--muted-2);
  border:1px dashed var(--border); border-radius:10px; padding:18px; text-align:center;
}
.stage-empty { padding:12px; margin-top:8px; }

/* ---- Case page layout ---- */
.case-work { display:grid; grid-template-columns:1fr 1.15fr; gap:30px; align-items:start; }
.case-work .case-hero { aspect-ratio:4/5; background:var(--alt); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.case-work .case-hero img { width:100%; height:100%; object-fit:cover; }
.case-work .case-hero:empty { display:none; }
.case-work .case-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.stage-col { position:sticky; top:90px; display:flex; flex-direction:column; gap:10px; }

/* ---- Stage plaques (expandable tree) ---- */
.stage { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.stage > .stage-head {
  width:100%; display:flex; align-items:center; gap:12px; padding:13px 15px;
  background:none; border:none; color:var(--text); cursor:pointer; text-align:left; font:inherit;
}
.stage.rig-stage > .stage-head { cursor:default; }
.stage-ic { width:24px; height:24px; object-fit:contain; }
.stage-name { font-family:"Bricolage Grotesque"; font-weight:700; font-size:.92rem; flex:1; }
.stage-caret {
  font-family:"IBM Plex Mono"; font-size:1.1rem; color:var(--muted-2); transition:transform .2s;
}
.stage.open .stage-caret { transform:rotate(45deg); color:var(--key); }
.stage.plaque { border-color:var(--fill); }
.stage.plaque .stage-caret, .stage.fill.open .stage-caret { color:var(--fill); }
.stage > .stage-body { display:none; padding:0 15px 15px; }
.stage.open > .stage-body, .stage.rig-stage > .stage-body { display:block; }
.stage.rig-stage > .stage-body { padding-top:6px; }

/* substages */
.substage { border-top:1px solid var(--border); }
.substage:first-child { border-top:none; }
.substage > .sub-head {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:none; border:none; color:var(--muted); cursor:pointer; text-align:left;
  font-family:"IBM Plex Mono"; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  padding:11px 2px;
}
.substage .sub-count { color:var(--muted-2); }
.substage > .sub-body { display:none; padding-bottom:10px; }
.substage.open > .sub-body { display:block; }
.rig-stage .substage > .sub-head { cursor:default; color:var(--fill); }

/* image grids inside stages */
.img-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:8px; }
.img-cell { margin:0; cursor:zoom-in; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--alt); }
.img-cell img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:opacity .2s; }
.img-cell:hover img { opacity:.82; }
.img-cell figcaption { font-family:"IBM Plex Mono"; font-size:.6rem; color:var(--muted-2); padding:5px 6px; }

/* ---- Lightbox ---- */
.lightbox {
  position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; gap:14px;
  background:rgba(4,4,7,.93); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:28px;
}
.lightbox.open { display:flex; }
.lightbox .lb-body { display:flex; align-items:center; justify-content:center; min-width:0; flex:0 1 auto; }
.lightbox .lb-img { max-width:min(86vw, 1500px); max-height:90vh; object-fit:contain; border-radius:6px; box-shadow:0 24px 80px rgba(0,0,0,.6); }
.lightbox .lb-close {
  position:absolute; top:20px; right:24px; background:none; border:none; color:#fff;
  font-size:1.8rem; cursor:pointer; line-height:1; z-index:3;
}
.lightbox .lb-nav {
  position:static; transform:none; flex:0 0 auto; z-index:2;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.28); color:#fff;
  width:46px; height:46px; border-radius:50%; font-size:1.7rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
}
.lightbox .lb-nav:hover { background:rgba(0,0,0,.7); border-color:var(--key); }
.lightbox .lb-prev { left:auto; }
.lightbox .lb-next { right:auto; }
@media (max-width:560px){ .lightbox{ gap:8px; padding:14px; } .lightbox .lb-nav{ width:38px; height:38px; font-size:1.4rem; } .lightbox .lb-img{ max-width:78vw; } }

/* ---- Explanations + packages ---- */
.explain-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-top:14px; }
.explain-card { border:1px solid var(--border); border-radius:var(--r); background:var(--surface); padding:20px; }
.explain-card h3 { font-family:"Bricolage Grotesque"; font-size:1.05rem; margin:0 0 14px; }
.explain-card .inc, .explain-card .exc { margin-bottom:12px; }
.explain-card ul { margin:8px 0 0; padding-left:18px; }
.explain-card li { font-size:.88rem; color:var(--muted); margin-bottom:4px; }
.tag { font-family:"IBM Plex Mono"; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.tag.ok { color:var(--open, #5BBF7B); border:1px solid var(--open, #5BBF7B); }
.tag.no { color:var(--closed, #D85B4E); border:1px solid var(--closed, #D85B4E); }
.pack-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-top:14px; }
.pack-card { border:1px solid var(--key); border-radius:var(--r); background:var(--active-tint); padding:22px; }
.pack-card.cool { border-color:var(--fill); background:var(--active-tint); }
.pack-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pack-top h3 { font-family:"Bricolage Grotesque"; font-size:1.1rem; margin:0; }
.pack-price { font-family:"IBM Plex Mono"; font-size:.78rem; color:var(--key); white-space:nowrap; }
.pack-card.cool .pack-price { color:var(--fill); }
.pack-card ul { margin:14px 0 18px; padding-left:18px; }
.pack-card li { font-size:.88rem; color:var(--muted); margin-bottom:5px; }

/* ---- Stack logos (about) extra safety ---- */
.stack-logos .stk img[src=""] { opacity:.12; }

@media (max-width:760px){
  .case-work { grid-template-columns:1fr; }
  .stage-col { position:static; }
}

/* ===================== ADDED: eyebrow unification + admin reorder ===================== */
/* Unify all eyebrow labels to the orange accent (single state) */
.label { color: var(--key); }
.label.key, .label.fill { color: var(--key); }
/* keep back-link reading as navigation, not an eyebrow */
.label.back-link { color: var(--muted); }

/* Admin: work card reorder controls */
.adm-card .mt { align-items:center; }
.adm-card .mt-l { display:flex; flex-direction:column; gap:2px; min-width:0; }
.adm-card .mt-l h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-move { display:flex; gap:4px; flex-shrink:0; }
.card-move .mvw {
  width:24px; height:24px; border-radius:6px; border:1px solid var(--border);
  background:var(--alt); color:var(--text); cursor:pointer; font-size:.9rem; line-height:1;
}
.card-move .mvw:hover:not(:disabled) { border-color:var(--key); color:var(--key); }
.card-move .mvw:disabled { opacity:.3; cursor:default; }

/* ===================== Work case: left gallery + right clickable section nav ===================== */
.case-work { grid-template-columns: minmax(0,1fr) 300px; }
.case-gallery { min-height: 220px; }
.gallery-empty {
  color: var(--muted-2); border: 1px dashed var(--border); border-radius: var(--r);
  padding: 56px 24px; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: .82rem;
}
.img-grid { display: grid; gap: 14px; }
.img-grid.g-1 { grid-template-columns: 1fr; }
.img-grid.g-2, .img-grid.g-3, .img-grid.g-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .img-grid.g-2, .img-grid.g-3, .img-grid.g-4 { grid-template-columns: 1fr; } }
.img-cell { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--alt); cursor: zoom-in; position: relative; }
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; transition: transform .35s ease; }
.img-grid.g-1 .img-cell img { aspect-ratio: 16/10; }

/* ===== ADDED: calculator quick bundles ===== */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 6px; }
.bundle { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; cursor: pointer; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--alt); color: var(--text); font: inherit; transition: border-color .15s, transform .15s; }
.bundle:hover { border-color: var(--key); transform: translateY(-2px); }
.bundle.active { border-color: var(--key); box-shadow: inset 0 0 0 1px var(--key); }
.bundle .bname { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .92rem; }
.bundle .bdesc { font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--text); line-height: 1.35; }

/* ===== ADDED: waitlist table (live Google Sheet) ===== */
.wl-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); margin-top: 22px; }
.wl-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wl-table th, .wl-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.wl-table th { font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); background: var(--surface); }
.wl-table tbody tr:last-child td { border-bottom: none; }
.wl-table tbody tr:hover { background: var(--alt); }
.wl-cta { margin-top: 30px; }
.wl-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.img-cell:hover img { transform: scale(1.03); }
.img-cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  font-size: .72rem; font-family: "IBM Plex Mono", monospace; color: #ECECEF;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
}

.stage-nav-title { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.stage-nav { display: flex; flex-direction: column; gap: 6px; }
.nav-stage { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.nav-stage.leaf-only { padding: 0; }
.nav-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.nav-head:hover { background: var(--alt); }
.nav-name { flex: 1; font-size: .9rem; }
.stage-ic { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.showcase-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--key); font-size: 14px; }
.nav-caret { color: var(--muted-2); transition: transform .2s ease; font-size: .8rem; }
.nav-stage.open > .nav-head .nav-caret { transform: rotate(180deg); }
.nav-count { color: var(--muted-2); font-family: "IBM Plex Mono", monospace; font-size: .72rem; }
.nav-subs { display: none; flex-direction: column; padding: 0 8px 8px; gap: 4px; }
.nav-stage.open > .nav-subs { display: flex; }
.nav-leaf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; font: inherit; text-align: left; }
.nav-subs .nav-leaf { padding-left: 16px; font-size: .85rem; }
.nav-leaf:hover { background: var(--alt); color: var(--text); }
.nav-leaf.active { background: var(--key); color: var(--bg); }
.nav-leaf.active .nav-count, .nav-leaf.active .nav-name { color: var(--bg); }
@media (max-width: 820px) { .case-work { grid-template-columns: 1fr; } .stage-col { position: static; } }

/* ===== Masonry work grid (varied, content-driven heights) ===== */
.work-grid.masonry {
  display:block;
  columns: 3 220px;
  column-gap:14px;
}
.work-grid.masonry .work-card {
  display:inline-block; width:100%; margin:0 0 14px; break-inside:avoid;
}
.work-grid.masonry .work-cover { aspect-ratio:4 / 5; }
@media (max-width:900px) { .work-grid.masonry { columns: 2 160px; } }
@media (max-width:520px) { .work-grid.masonry { columns: 1; } }

/* Work case-page title row: heading left, primary CTA right, same level */
.work-head { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.work-head h2 { margin:0; }
.work-head-cta { flex:none; }
@media (max-width:560px){ .work-head{ align-items:flex-start; flex-direction:column; gap:12px; } .work-head + .lede { margin-top: 12px; } }


/* ===== Commission service descriptions (accordions) ===== */
.svc-wrap { margin-top: 8px; }
.svc-intro-note {
  margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--border);
  border-left: 3px solid var(--key); border-radius: 10px; background: var(--surface);
  color: var(--muted); font-size: 14px;
}
.svc-group-h {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px;
  margin: 26px 0 4px; color: var(--text); letter-spacing: -0.01em;
}
.svc-group-intro { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.svc-list { display: flex; flex-direction: column; gap: 8px; }
.svc {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  overflow: hidden;
}
.svc + .svc { margin-top: 0; }
.svc summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-weight: 600; color: var(--text);
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary::after {
  content: "+"; font-family: 'IBM Plex Mono', monospace; font-size: 18px;
  color: var(--key); flex: none; transition: transform 0.18s ease;
}
.svc[open] summary::after { content: "\2212"; }
.svc[open] summary { border-bottom: 1px solid var(--border); }
.svc summary:hover { background: var(--alt); }
.svc-name { font-size: 15px; }
.svc-price {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--key);
  white-space: nowrap; margin-left: auto;
}
.svc-body { padding: 14px 18px 18px; }
.svc-what { margin: 0 0 12px; color: var(--text); font-size: 14px; line-height: 1.6; }
.svc-field { margin: 0 0 12px; }
.svc-field:last-child { margin-bottom: 0; }
.svc-flabel {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); margin-bottom: 4px;
}
.svc-field ul { margin: 0; padding-left: 18px; }
.svc-field li { color: var(--muted); font-size: 14px; line-height: 1.55; }
.svc-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; font-style: italic; }
.svc-steps { margin: 6px 0 0; padding-left: 20px; }
.svc-steps li { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ===== Contact page ===== */
.ct-email{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:.95rem;color:var(--key);text-decoration:none;border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin:6px 0 30px;}
.ct-email:hover{border-color:var(--key);}
.ct-group{margin:0 0 30px;}
.ct-cat{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.ct-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--text);transition:border-color .15s,background .15s;}
.ct-card:hover{border-color:var(--key);}
.ct-card img{width:38px;height:38px;object-fit:contain;}
.ct-card .ph{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--border);border-radius:8px;font-family:'IBM Plex Mono';font-weight:600;font-size:.8rem;text-transform:uppercase;color:var(--muted);}
.ct-name{font-size:.82rem;color:var(--muted);text-align:center;line-height:1.3;}
.ct-card:hover .ct-name{color:var(--text);}

/* ===== About → Contact link (replaces duplicated socials) ===== */
.about-contact-link{display:flex;width:fit-content;align-items:center;justify-content:center;gap:6px;font-family:'IBM Plex Mono';font-size:.85rem;color:var(--key);margin:18px auto 36px;transition:gap .15s ease,color .15s ease;}
.about-contact-link:hover{gap:11px;color:var(--text);}

/* ===== Smooth scroll-reveal entrance ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
  .reveal.in{opacity:1;transform:none;}
}

/* ===== Layout stability: reserve space for async-rendered content ===== */
/* Containers are filled by JS after load; reserving space stops the footer
   and following sections from jumping as content is injected. */
[data-grid], [data-waitlist] { min-height: 60vh; }
[data-work] { min-height: 70vh; }
[data-packages] { min-height: 160px; }
[data-contact] { min-height: 200px; }
[data-social] { min-height: 44px; }

/* ===== Font-load gate: prevent FOUT reflow + cross-page font inconsistency ===== */
/* (ff-loading hide removed — page reveals instantly via bf3In) */
body{opacity:1;transition:opacity .15s ease-out}

/* ===== Works showcase (featured + thumbnail strip) ===== */
.showcase{display:flex;flex-direction:column;gap:16px}
.sc-stage{position:relative;display:block;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);text-decoration:none;color:inherit}
.sc-media{aspect-ratio:16/10;background:var(--alt);overflow:hidden;transform-origin:center center;will-change:transform,opacity}
.sc-media>img,.sc-media>video{width:100%;height:100%;object-fit:cover;display:block}
.sc-media .cover-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--alt),var(--surface))}
.sc-media.swapping{opacity:0;transform:scale(.955)}
@media (prefers-reduced-motion: no-preference){
  .sc-media{transition:opacity .14s ease,transform .14s ease}
  .sc-media.in{animation:scIn .3s cubic-bezier(.22,.61,.36,1)}
}
@keyframes scIn{from{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
.sc-meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:20px 22px;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,0));pointer-events:none}
.sc-meta h3{margin:0;font-size:clamp(18px,2.4vw,28px);color:#fff}
.sc-meta span{color:rgba(255,255,255,.72);font-family:"IBM Plex Mono",monospace;font-size:14px}
.sc-open{position:absolute;top:14px;right:14px;font-size:12.5px;color:var(--text);background:rgba(0,0,0,.5);border:1px solid var(--border);padding:5px 11px;border-radius:999px;opacity:0;transition:opacity .2s}
.sc-stage:hover .sc-open,.sc-stage:focus-visible .sc-open{opacity:1}
.sc-strip-wrap{position:relative;display:flex;align-items:center;gap:8px}
.sc-strip{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px;flex:1 1 auto}
.sc-strip::-webkit-scrollbar{display:none}
.sc-thumb{flex:0 0 auto;width:104px;height:104px;border-radius:11px;overflow:hidden;border:1px solid var(--border);background:var(--alt);cursor:pointer;padding:0;position:relative;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.sc-thumb>img,.sc-thumb>video{width:100%;height:100%;object-fit:cover;display:block}
.sc-thumb .cover-ph{width:100%;height:100%}
.sc-thumb:hover{transform:translateY(-2px)}
.sc-thumb.active{border-color:var(--key);box-shadow:0 0 0 2px var(--key) inset}
.sc-thumb .vid-badge{position:absolute;right:6px;bottom:6px;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));pointer-events:none}
.sc-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s}
.sc-arrow:hover{border-color:var(--key);color:var(--key)}
.sc-arrow:active{transform:scale(.94)}
@media (max-width:640px){.sc-thumb{width:80px;height:80px}.sc-arrow{width:34px;height:34px}}

/* ===== Department grid: uniform squares (clarified 11 Jun) ===== */
.work-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:18px; }
@media (max-width:520px){ .work-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
.work-grid .work-card { display:block; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .18s, transform .18s; }
.work-grid .work-card:hover { border-color:var(--key); box-shadow:0 0 0 1px color-mix(in srgb, var(--key) 30%, transparent); }
.work-grid .work-cover { aspect-ratio:1/1; background:var(--alt); overflow:hidden; position:relative; }
.work-grid .work-cover > img, .work-grid .work-cover > video { width:100%; height:100%; object-fit:cover; display:block; }
.work-grid .work-cover .cover-ph { width:100%; height:100%; background:linear-gradient(135deg,var(--alt),var(--surface)); }
.work-grid .work-meta { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 12px 12px; }
.work-grid .work-meta h3 { font-size:.95rem; margin:0; }
.work-grid .work-meta span { font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--muted); }

/* generic video badge (used on covers + thumbs) */
.vid-badge { position:absolute; right:7px; bottom:7px; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 0 2px rgba(0,0,0,.6)); pointer-events:none; }

/* ===== In-work gallery: main image + thumbnail strip ===== */
.gal-show { display:flex; flex-direction:column; gap:14px; }
.gal-stage { position:relative; display:block; margin:0; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:#000; cursor:zoom-in; }
.gal-media { aspect-ratio:4/3; overflow:hidden; transform-origin:center; }
.gal-media > img, .gal-media > video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.gal-media.swapping { opacity:0; transform:scale(.97); }
@media (prefers-reduced-motion: no-preference){ .gal-media { transition:opacity .14s ease, transform .14s ease; } .gal-media.in { animation:scIn .3s cubic-bezier(.22,.61,.36,1); } }
.gal-cap { color:var(--muted); font-size:13px; min-height:1em; }
.gal-cap:empty { display:none; }
.gal-strip-wrap { position:relative; display:flex; align-items:center; gap:8px; }
.gal-strip { display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px; flex:1; }
.gal-strip::-webkit-scrollbar { display:none; }
.gal-thumb { flex:0 0 auto; width:84px; height:84px; border-radius:9px; overflow:hidden; border:1px solid var(--border); background:var(--alt); cursor:pointer; padding:0; position:relative; transition:border-color .18s, transform .18s, box-shadow .18s; }
.gal-thumb > img, .gal-thumb > video { width:100%; height:100%; object-fit:cover; display:block; }
.gal-thumb:hover { transform:translateY(-2px); }
.gal-thumb.active { border-color:var(--key); box-shadow:0 0 0 2px var(--key) inset; }
@media (max-width:640px){ .gal-thumb { width:66px; height:66px; } .gal-media { aspect-ratio:1/1; } }

/* ===== Commission status states (open/paused/closed/soon) ===== */
:root { --paused:#E8B23C; --soon:#5B86E5; }
.status-btn.is-open .status-dot { background:var(--open); box-shadow:0 0 10px var(--open); }
.status-btn.is-paused .status-dot { background:var(--paused); box-shadow:0 0 10px var(--paused); }
.status-btn.is-closed .status-dot { background:var(--closed); box-shadow:0 0 10px var(--closed); }
.status-btn.is-soon .status-dot { background:var(--soon); box-shadow:0 0 10px var(--soon); }
.status-btn.is-open .status-check { color:var(--open); }
.status-btn.is-paused .status-check { color:var(--paused); }
.status-btn.is-closed .status-check { color:var(--closed); }
.status-btn.is-soon .status-check { color:var(--soon); }
.status-btn.is-open:hover { border-color:var(--open); }
.status-btn.is-paused:hover { border-color:var(--paused); }
.status-btn.is-closed:hover { border-color:var(--closed); }
.status-btn.is-soon:hover { border-color:var(--soon); }
/* Hide the hero status pill until JS sets the real state, so it never flashes
   the default "Commissions: Open" before the actual status loads. The space is
   reserved (opacity, not display) so there is no layout shift. */
.hero .status-btn { opacity: 0; transition: opacity .15s ease; }
.hero .status-btn.is-open,
.hero .status-btn.is-paused,
.hero .status-btn.is-closed,
.hero .status-btn.is-soon { opacity: 1; }

/* ===== Numbered steps (How it works) ===== */
.panel .steps { list-style:none; counter-reset:step; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.panel .steps li { counter-increment:step; position:relative; padding-left:34px; color:var(--muted); line-height:1.55; }
.panel .steps li::before { content:counter(step); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--key); color:var(--bg); font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.panel .steps li b { color:var(--text); }

/* ===== Inline video embeds (YouTube / Vimeo) ===== */
.embed-frame { position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:var(--r); overflow:hidden; }
.embed-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.gal-media .embed-frame { border-radius:var(--r); }
.embed-thumb-ph { width:100%; height:100%; min-height:64px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--alt),var(--surface)); color:var(--key); }
.embed-thumb-ph span { font-size:1.4rem; line-height:1; }
.lb-embed { width:min(92vw,1280px); aspect-ratio:16/9; }
.lb-embed .embed-frame { width:100%; height:100%; padding-top:0; border-radius:10px; }

/* ===== Commissions: stacked, left-aligned panels indented from the main text ===== */
.panel-stack { display:flex; flex-direction:column; margin-left:22px; padding-left:26px; border-left:2px solid var(--border); }
.panel-stack .panel { padding:18px 0; }
.panel-stack .panel:first-child { padding-top:2px; }
.panel-stack .panel:last-child { padding-bottom:2px; }
.panel-stack .panel + .panel { border-top:1px solid var(--border); }
.panel-stack .panel h3 { margin-bottom:8px; }
.panel-stack .panel p { margin:0; color:var(--muted); line-height:1.6; }
.panel-stack .panel .steps { margin-top:12px; }
@media (max-width:720px){ .panel-stack { margin-left:0; padding-left:16px; } }

/* ===== Language dropdown ===== */
.lang-dd{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:.82rem;background:transparent;color:var(--text);cursor:pointer;transition:border-color .15s ease}
.lang-btn:hover{border-color:var(--key)}
.lang-caret{font-size:.7rem;opacity:.7}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lang-menu[hidden]{display:none}
.lang-menu button{text-align:left;background:transparent;border:0;border-radius:7px;padding:7px 10px;font-size:.85rem;color:var(--muted);cursor:pointer;transition:background .12s ease,color .12s ease}
.lang-menu button:hover{background:var(--alt);color:var(--text)}
.lang-menu button.active{background:var(--alt);color:var(--text)}

/* ===== category filter controls (Characters / Rigs / Tools) ===== */
.grid-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.grid-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:7px 13px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.chip:hover{color:var(--text);border-color:var(--muted-2)}
.chip.active{color:var(--bg);background:var(--key);border-color:var(--key)}
.grid-sort select{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 10px;cursor:pointer}
@media (max-width:600px){.grid-controls{justify-content:flex-start}}

/* ===== Featured Work (home) ===== */
#featured{padding-top:8px}
#featured .featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:24px;margin-top:20px}
.feat-card{display:block;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);transition:transform .15s ease,border-color .15s ease;text-decoration:none;color:inherit}
.feat-card:hover{border-color:var(--key)}
.feat-cover{position:relative;aspect-ratio:16/9;background:var(--alt)}
.feat-cover img,.feat-cover video{width:100%;height:100%;object-fit:cover;display:block}
.feat-cover .cover-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--alt),var(--surface))}
.feat-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#fff;background:rgba(0,0,0,.30)}
.feat-meta{padding:16px 18px}
.feat-meta h3{font-family:"Bricolage Grotesque",sans-serif;font-size:1.12rem;font-weight:700;margin:0;line-height:1.25}
#featured .feat-meta{display:none}

/* ===== Worked On (film posters, home) ===== */
#worked-on{padding-top:8px}
.feat-card--static,.poster-card--static{cursor:default}
.feat-card--static:hover,.poster-card--static:hover{transform:none;border-color:var(--border)}
#worked-on .poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;margin-top:20px}
.poster-card{display:block;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--border);text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease}
.poster-card:hover{transform:translateY(-2px);border-color:var(--muted-2)}
.poster-cover{position:relative;aspect-ratio:2/3;background:var(--alt)}
.poster-cover img,.poster-cover video{width:100%;height:100%;object-fit:cover;display:block}
.poster-cover .cover-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--alt),var(--surface))}
.poster-meta{padding:11px 13px}
.poster-meta h3{font-family:"Bricolage Grotesque",sans-serif;font-size:.92rem;font-weight:700;margin:0;line-height:1.25}

/* ---- Project detail page (stages on top, left to right) ---- */
.project-case .pstage-nav{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:16px}
.project-case .psub-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pstage-tab,.psub-tab{font-family:"IBM Plex Mono",monospace;font-size:.86rem;line-height:1;padding:9px 15px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pstage-tab:hover,.psub-tab:hover{color:var(--text);border-color:var(--muted-2)}
.pstage-tab.active{background:var(--key);border-color:var(--key);color:var(--bg)}
.psub-tab.active{background:var(--fill);border-color:var(--fill);color:var(--bg)}

/* ---- Project: status timeline + pipeline + breakdown ---- */
.status-nav{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.status-block{flex:1 1 0;min-width:150px;max-width:300px;text-align:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1rem;padding:16px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.status-block:hover{color:var(--text);border-color:var(--muted-2)}
.status-block.active{background:var(--key);border-color:var(--key);color:var(--bg)}
.pipeline{margin-bottom:26px}
.pipeline-title{margin-bottom:12px}
.pipeline-bar{height:6px;border-radius:6px;background:var(--surface);border:1px solid var(--border);overflow:hidden;margin-top:14px}
.pipeline-fill{height:100%;width:0;background:var(--key);border-radius:6px;transition:width .35s ease}
.pipeline-empty{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.9rem;padding:4px 0}
.proj-gallery{margin-bottom:6px}
.project-case .gal-stage{aspect-ratio:16/9;width:100%}
.project-case .gal-stage .gal-media,.project-case .gal-stage .gal-media img,.project-case .gal-stage .gal-media video{width:100%;height:100%}
.project-case .gal-stage .gal-media img,.project-case .gal-stage .gal-media video{object-fit:cover}
.project-case .gal-thumb{aspect-ratio:16/9;width:160px;height:auto}
.project-case .gal-thumb img,.project-case .gal-thumb video{width:100%;height:100%;object-fit:cover}
.stage-breakdown{margin-top:30px;border-top:1px solid var(--border);padding-top:24px}
.stage-breakdown .bd-title{margin-bottom:12px}
.stage-breakdown .embed-frame{max-width:820px}


/* ===== Commissions: Personal/Commercial path tabs + estimator wizard ===== */
#paths { padding-top: clamp(46px, 6vw, 78px); padding-bottom: 0; }
#paths .wrap { padding-top: 0; }
.cm-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cm-tab { flex: 1 1 110px; min-width: 110px; font-family: "IBM Plex Mono", monospace; font-size: 1.04rem; font-weight: 600; letter-spacing: .03em; line-height: 1; padding: 18px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, color .15s; }
.cm-tab:hover { color: var(--text); border-color: var(--muted-2); }
.cm-tab.active { background: var(--key); border-color: var(--key); color: var(--bg); }
.cm-panel > section { padding-top: clamp(34px, 5vw, 60px); padding-bottom: 0; }
.cm-panel > section:last-child { padding-bottom: clamp(44px, 6vw, 76px); }
.cm-panel[hidden] { display: none; }

.cm-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.cm-step-tab { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; transition: border-color .15s, color .15s; }
.cm-step-tab .cm-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--alt); color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: .7rem; font-weight: 700; }
.cm-step-tab:hover { border-color: var(--muted-2); color: var(--text); }
.cm-step-tab.active { border-color: var(--key); color: var(--text); }
.cm-step-tab.active .cm-step-n { background: var(--key); color: var(--bg); }
.cm-step-tab.done .cm-step-n { background: var(--fill); color: var(--bg); }
.calc-step { display: none; }
.calc-step.active { display: block; animation: cmFade .2s ease; }
@keyframes cmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cm-step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.cm-step-nav .cm-spacer { flex: 1; }

.svc-collapse { border: 1px solid var(--border); border-radius: 14px; background: var(--alt); }
.svc-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.svc-collapse > summary::-webkit-details-marker { display: none; }
.svc-collapse > summary::after { content: "\002B"; margin-left: auto; color: var(--muted); font-family: "IBM Plex Mono", monospace; }
.svc-collapse[open] > summary::after { content: "\2212"; }
.svc-collapse[open] > summary { border-bottom: 1px solid var(--border); }
.svc-collapse .svc-collapse-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; }
.svc-collapse > .lede { padding: 14px 18px 0; }
.svc-collapse > .svc-wrap { padding: 8px 18px 18px; margin-top: 0; }

@media (max-width: 640px) {
  .cm-tabs { flex-direction: column; }
  .cm-tab { flex: 0 0 auto; }
}

/* ===== Home: cinematic work-first redesign (scoped to body.home) ===== */
:root { --edge: #d61e71; }
[data-theme="light"] { --edge: #c81e6a; }

/* subtle film grain over the whole page */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hero: drop the dual orange/teal glow for a calm cinematic top light */
.home .hero {
  background: var(--bg);
  padding: clamp(64px, 8vw, 110px) 0 clamp(44px, 7vw, 84px);
}
.home .hero-inner { max-width: 760px; }
.home .kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font-family: "Hanken Grotesk", sans-serif; font-size: .98rem; letter-spacing: 0;
  font-weight: 500; text-transform: none; color: var(--muted);
}
.home .kicker-tick { width: 7px; height: 7px; border-radius: 50%; background: var(--edge); box-shadow: 0 0 10px var(--edge); }
.home .hero h1 { letter-spacing: -.022em; }
.home .hero .role { font-family: "IBM Plex Mono", monospace; font-size: .85rem; letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 500; opacity: 1; margin-top: 2px; }

/* mono buttons with one rare raspberry pop on the primary hover */
.home .btn.ghost:hover { border-color: var(--muted-2); }

/* work-first gallery tiles */
.home #work { padding-top: clamp(20px, 4vw, 48px); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }
.work-tile { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--alt); transition: border-color .18s, transform .18s; }
.work-tile:hover { border-color: var(--key); }
.wt-media { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(155deg, var(--alt), var(--surface)); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.wt-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -90px 80px -60px rgba(0,0,0,.7); }
.wt-cat { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.wt-meta { padding: 18px 20px 22px; }
.wt-meta h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.4rem; }
.wt-meta p { color: var(--muted); font-size: .92rem; margin: 8px 0 14px; }
.wt-go { font-family: "IBM Plex Mono", monospace; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .15s; }
.work-tile:hover .wt-go { color: var(--edge); }

/* ===== Site-wide de-AI: textured primary button + raspberry hover ===== */
.btn.primary { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='nb'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nb)'/%3E%3C/svg%3E"); background-size: 160px 160px; background-blend-mode: soft-light; }
.btn.primary:hover { background-color: var(--edge); color: #fff; background-image: none; }

/* ===== TOS: accordion (kills the wall of text) ===== */
.tos-list { border-top: 1px solid var(--border); }
.tos-item { border-bottom: 1px solid var(--border); }
.tos-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 4px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.04rem; color: var(--text); transition: color .15s; }
.tos-item > summary::-webkit-details-marker { display: none; }
.tos-item > summary::before { content: "+"; font-family: "IBM Plex Mono", monospace; color: var(--edge); font-size: 1.15rem; width: 16px; flex: none; text-align: center; }
.tos-item[open] > summary::before { content: "\2212"; }
.tos-item > summary:hover { color: var(--edge); }
.tos-item > p { color: var(--muted); font-size: .94rem; line-height: 1.62; margin: 0 0 18px; padding-left: 28px; max-width: 80ch; }

/* ===== Color revival: raspberry as the single signature accent on inner pages ===== */
.label.key { color: var(--edge); }
.pipeline-fill { background: var(--edge); }
.status-block.active { background: var(--edge); border-color: var(--edge); color: #fff; }
.pstage-tab.active { background: var(--edge); border-color: var(--edge); color: #fff; }
.cm-tab.active { background: var(--key); border-color: var(--key); color: var(--bg); box-shadow: none; }
.cm-step-tab.active { border-color: var(--edge); color: var(--text); }
.cm-step-tab.active .cm-step-n { background: var(--edge); color: #fff; }
.cm-step-tab.done .cm-step-n { background: var(--muted-2); color: var(--bg); }
.dept-breakdown { margin: 4px 0 26px; }
.dept-breakdown .embed-frame { max-width: 820px; }

/* ===== Work tech specs strip ===== */
.work-specs { margin: 16px 0 4px; }
.work-specs:empty { display: none; }
.spec-row { display: flex; flex-wrap: wrap; gap: 10px; }
.spec { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 92px; }
.spec-k { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--edge); }
.spec-v { font-family: "IBM Plex Mono", monospace; font-size: .9rem; color: var(--text); }

/* ===== Accessibility: visible keyboard focus ===== */
:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }

/* ===== 3D viewer + breakdown (3D direction) ===== */
.work-viewer { margin-top: 28px; }
.viewer-lbl { display: block; margin-bottom: 10px; }
.work-viewer .viewer-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--alt); }
.work-viewer .viewer-frame iframe, .work-viewer .viewer-frame model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--alt); }
.work-breakdown { margin-top: 28px; }
.bd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.bd-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bd-tab { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 6px 13px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; }
.bd-tab:hover { color: var(--text); }
.bd-tab.active { border-color: var(--edge); color: var(--text); box-shadow: inset 0 0 0 1px var(--edge); }
.bd-stage { position: relative; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--alt); aspect-ratio: 16 / 10; }
.bd-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bd-img.active { display: block; }
@media (max-width: 720px) { .work-viewer .viewer-frame { aspect-ratio: 4 / 3; } }
/* light theme: film grain reads cleaner as a subtle multiply at lower opacity */
[data-theme="light"] body::after { opacity: .045; mix-blend-mode: multiply; }
/* empty states: clearer dashed cards */
.grid-empty, .gallery-empty { border: 1px dashed var(--border); border-radius: var(--r); background: color-mix(in srgb, var(--alt) 55%, transparent); }

/* ===== compact ArtStation-style grid (SECTION pages only, never .home) + tidier 3D blocks ===== */
body:not(.home) .work-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
@media (max-width: 560px) { body:not(.home) .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
body:not(.home) .work-grid .work-cover { aspect-ratio: 1 / 1; }
body:not(.home) .work-grid .work-meta { padding: 12px 14px 14px; gap: 8px; }
body:not(.home) .work-grid .work-meta h3 { font-size: .98rem; }
body:not(.home) .work-grid .work-meta span { font-size: .72rem; }
.work-viewer { max-width: 640px; }
.work-breakdown { max-width: none; margin-top: 10px; }
.tech-renders { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.tech-toggle { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 18px; font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); user-select: none; }
.tech-toggle::-webkit-details-marker { display: none; }
.tech-toggle::marker { content: ""; }
.tech-toggle:hover { background: var(--alt); }
.tech-toggle .tr-ico { color: var(--edge); font-size: 1.05rem; line-height: 1; }
.tech-toggle .tr-count { color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: none; }
.tech-toggle .tr-caret { margin-left: auto; transition: transform .2s ease; color: var(--muted); font-size: .7rem; }
.tech-renders[open] > .tech-toggle { border-bottom: 1px solid var(--border); }
.tech-renders[open] > .tech-toggle .tr-caret { transform: rotate(180deg); }
.tech-body { padding: 14px; }
.tech-body .bd-tabs { margin-bottom: 12px; }
.tech-body .bd-img { width: 100%; height: 100%; border-radius: calc(var(--r) - 6px); }

/* ===== Empty "coming soon" grid state ===== */
.grid-soon { padding: 8px 0 4px; }
.ghost-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ghost-tile { aspect-ratio: 4 / 5; border: 1px dashed var(--border); border-radius: 14px; background: linear-gradient(155deg, color-mix(in srgb, var(--alt) 70%, transparent), transparent); opacity: .5; }
.grid-empty-msg { margin-top: 16px; text-align: center; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: .82rem; letter-spacing: .04em; }
@media (max-width: 560px) { .ghost-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ===== Copy-email button (Contacts) ===== */
.ct-email-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 30px; }
.ct-email-row .ct-email { margin: 0; }
.ct-copy { font-family: "IBM Plex Mono", monospace; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--alt); color: var(--muted); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.ct-copy:hover { border-color: var(--muted-2); color: var(--edge); }
.ct-copy.ok { border-color: var(--edge); color: var(--edge); }

/* ===== Homepage tile hover (scale + sheen) ===== */
.wt-media { transition: background-size .45s ease; }
.wt-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%); transform: translateX(-130%); transition: none; pointer-events: none; }
.work-tile:hover .wt-media { background-size: 100% 100%; }
.work-tile.is-shine .wt-media::before { transform: translateX(130%); transition: transform .65s ease; }

/* ===== Custom 404 page ===== */
.nf-wrap { padding: 40px 0 24px; text-align: center; }
.nf-code { font-family: "Bricolage Grotesque", sans-serif; font-weight: 900; font-size: clamp(5rem, 18vw, 11rem); line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--muted-2); letter-spacing: .02em; }
.nf-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.2rem); margin-top: 6px; }
.nf-text { margin: 14px auto 24px; max-width: 460px; }
.nf-wrap .ctas { justify-content: center; }

/* ===== Accessibility: visible keyboard focus ===== */
:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; border-radius: 3px; }
.lightbox .lb-close:focus-visible, .lightbox .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ===== Copy-email ICON button ===== */
.ct-copy { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid var(--border); background: var(--alt); color: var(--muted); cursor: pointer; transition: border-color .18s, color .18s, background .18s, transform .12s; }
.ct-copy:hover { border-color: var(--muted-2); color: var(--edge); }
.ct-copy:active { transform: scale(.92); }
.ct-copy .ic { display: block; }
.ct-copy .ic-check { display: none; }
.ct-copy.ok { border-color: var(--edge); color: var(--edge); }
.ct-copy.ok .ic-copy { display: none; }
.ct-copy.ok .ic-check { display: block; }

/* ===== Interactive tilt cards (contacts + about social) ===== */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform .08s ease-out, border-color .18s, background .18s; }
.ct-card { position: relative; overflow: hidden; }
.ct-card::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-135%); transition: none; pointer-events: none; }
.ct-card.is-shine::before { transform: translateX(135%); transition: transform .4s ease; }

/* About stack: dock-style carousel (hover lift + 3D tilt + neighbours part) */
.stack-logos { perspective: 760px; }
.stk-dock { transition: transform .18s cubic-bezier(.2,.7,.3,1); transform-style: preserve-3d; will-change: transform; }

/* ===== ADDED: accessibility skip-link ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--key,#ededf0);color:var(--bg,#0c0c11);padding:10px 16px;border-bottom-right-radius:8px;font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;outline:2px solid var(--edge);}

/* VTuber coming-soon teaser */
.vtuber-soon{border:1px solid var(--line,#222);border-radius:14px;padding:22px 24px;margin:0 0 28px;background:linear-gradient(135deg,rgba(120,90,255,.08),rgba(255,90,170,.06));}
.vtuber-soon .vt-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line,#333);border-radius:999px;padding:3px 10px;margin-bottom:10px;}
.vtuber-soon .vt-title{margin:6px 0 8px;font-size:1.15rem;}
.vtuber-soon .vt-text{margin:0 0 16px;color:var(--muted);max-width:60ch;line-height:1.55;}

/* ===== Free Work (portfolio collab) ===== */
.freebie-banner { margin-top: 14px; }
.freebie-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--key) 55%, var(--border));
  background: color-mix(in srgb, var(--key) 10%, transparent);
  font: 600 .82rem/1 'IBM Plex Mono', monospace; color: var(--text);
  text-decoration: none; transition: transform .15s ease, border-color .15s ease;
}
.freebie-pill:hover { transform: translateY(-1px); border-color: var(--key); }
.freebie-pill .fb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--key); box-shadow: 0 0 10px var(--key); }
.freebie-pill .fb-cta { color: var(--key); font-weight: 700; }
.free-closed-notice {
  margin-top: 18px; padding: 12px 15px; border-radius: var(--r);
  border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted); font-size: .9rem;
}

/* ===== ADDED v24: calculator button text wrapping fix ===== */
.addon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  text-align: left;
}
.addon > span:first-child {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.addon .price {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.addon-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.lvl {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.25;
}
.lvl > span:first-child { overflow-wrap: anywhere; }
.lvl .mult { margin-left: 0; white-space: nowrap; }
.usage-row .lvl { justify-content: center; flex-wrap: wrap; }

.pkg .pname, .pkg .pprice { overflow-wrap: anywhere; }


/* bf3 smooth first paint */
/* Hold the page hidden until its content is actually painted, then fade the whole
   page in as ONE unit. The user never sees a half-empty shell or elements snapping
   into place — the page simply appears, already populated. The <head> sets
   bf3-pending synchronously (so nothing shows early) and a JS safety timeout there
   guarantees the page always reveals even if the network or JS misbehaves. */
@keyframes bf3In { from { opacity: 0; } to { opacity: 1; } }
html.bf3-pending body { opacity: 0; }
html.bf3-painted body { animation: bf3In .28s ease both; }
@media (prefers-reduced-motion: reduce) {
  html.bf3-painted body { animation: none; }
}


/* bf3 mobile adaptation */  /* iOS + Android full responsive layer */

/* --- base hardening for touch devices --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
* { -webkit-tap-highlight-color: transparent; }
img, video, canvas, svg, iframe { max-width: 100%; }
table { max-width: 100%; }

/* --- respect iOS notch / safe areas (also for installed PWA) --- */
.wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
header { padding-top: env(safe-area-inset-top); }
footer { padding-bottom: max(30px, env(safe-area-inset-bottom)); }

/* --- momentum scrolling for horizontal scrollers --- */
.wl-table-wrap, .sc-strip, .gal-strip, .grid-controls { -webkit-overflow-scrolling: touch; }

/* --- prevent iOS auto-zoom on focus: form controls must be >= 16px --- */
@media (max-width: 820px) {
  input, textarea, select,
  .field input, .field textarea, .grid-sort select { font-size: 16px; }
}
/* sort select on phone: match filter chip size (select does not trigger iOS zoom) */
@media (max-width: 820px) {
  .grid-sort select { font-size: .72rem; }
}

/* --- phones --- */
@media (max-width: 680px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  section { padding: clamp(40px, 9vw, 64px) 0; }

  /* nav: brand + tools on the top row, links centered on a full-width row below */
  .nav { padding: 12px 0; gap: 8px; }
  .brand { order: 1; }
  .nav-tools { order: 2; margin-left: auto; }
  .nav-links { order: 3; flex-basis: 100%; justify-content: center; gap: 2px; }
  .nav-links a { padding: 9px 10px; font-size: .72rem; }

  /* comfortable tap targets */
  .theme-toggle { width: 40px; height: 40px; }
  .btn { padding: 13px 20px; }
  .btn.sm { padding: 10px 16px; }

  /* hero + CTAs stack and stretch for thumbs */
  .hero .sub { font-size: 1rem; }
  .hero .ctas { gap: 10px; }
  .hero .ctas .btn { flex: 1 1 100%; justify-content: center; }

  /* footer centers nicely */
  footer { justify-content: center; text-align: center; row-gap: 10px; }
}

/* --- very small phones --- */
@media (max-width: 380px) {
  .nav-links a { padding: 8px 8px; font-size: .68rem; letter-spacing: .05em; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
}


/* bf3 mobile nav v2 — compact footer (iOS revision) */
.nav-burger { display: none; }

@media (max-width: 680px) {
  .nav { position: relative; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 8px;
    border: 1px solid var(--border); background: transparent;
    -webkit-appearance: none; appearance: none;
    color: var(--text); font-size: 18px; line-height: 1; cursor: pointer;
    transition: border-color .15s, transform .12s;
  }
  .nav-burger:active { transform: scale(.95); }
  .nav.open .nav-burger { border-color: var(--key); }

  /* nav links become a clean dropdown panel */
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-basis: auto; order: 0; gap: 2px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 8px;
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
    display: none; z-index: 120;
  }
  .nav.open .nav-links { display: flex; animation: bf3NavDrop .16s ease; }
  @keyframes bf3NavDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .nav-links a { padding: 12px 12px; font-size: .82rem; border-radius: 8px; }
  .nav-links a.active { background: var(--surface); color: var(--text); }

  /* compact footer */
  footer { margin-top: 36px; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); font-size: .7rem; row-gap: 8px; }
  .foot-logos { gap: 12px 14px; min-height: 0; }
  .foot-img { width: 20px; height: 20px; }
  .foot-ico { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav.open .nav-links { animation: none; }
}


/* bf3 de-slop v1 — grain, art-led hero, signature, choreographed motion */
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; }
[data-theme="light"] body::after { opacity: .05; mix-blend-mode: multiply; }

.home .hero-inner { max-width: var(--maxw); }
.hero-counter { display: flex; align-items: center; gap: 24px; width: 100%; margin: 28px 0 0; padding: 10px 0 10px 26px; border-left: 5px solid var(--hc-color, var(--key)); }
.hero-counter[hidden] { display: none; }
.hero-counter .hc-num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(3.6rem, 6.5vw, 5.5rem); line-height: .82; letter-spacing: -.03em; color: var(--hc-color, var(--key)); font-variant-numeric: tabular-nums; }
.hero-counter .hc-label { font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.4; max-width: 16ch; }
.home .hero .hero-art { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 30px 80px -34px rgba(0,0,0,.6); }
.home .hero .hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home .hero .hero-art figcaption { position: absolute; left: 12px; bottom: 12px; font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.55); padding: 5px 9px; border-radius: 999px; }
@media (min-width: 900px) {
  .home .hero .hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: center; }
  .home .hero .hero-inner.hero-has-counter { align-items: stretch; }
  .home .hero .hero-inner.hero-has-counter .hero-copy { display: flex; flex-direction: column; height: 100%; }
  .home .hero .hero-inner.hero-has-counter .hero-art-wrap { align-self: start; }
  .home .hero .hero-inner.hero-has-counter .hero-copy > h1 { margin-top: -.08em; }
  .home .hero .hero-inner.hero-has-counter .hero-counter { margin-top: auto; margin-bottom: 0; }
}
@media (max-width: 899px) {
  .home .hero .hero-art { margin-top: 30px; aspect-ratio: 16 / 11; }
}


@media (prefers-reduced-motion: no-preference) {
  html.ff-ready .home .hero .hero-copy > * { animation: bf3HeroUp .6s cubic-bezier(.22,.61,.36,1) backwards; }
  html.ff-ready .home .hero .kicker { animation-delay: .03s; }
  html.ff-ready .home .hero h1 { animation-delay: .10s; }
  html.ff-ready .home .hero .sub { animation-delay: .18s; }
  html.ff-ready .home .hero .status-row { animation-delay: .26s; }
  html.ff-ready .home .hero .ctas { animation-delay: .33s; }
  html.ff-ready .home .hero .hero-art-wrap { animation: bf3HeroArt .8s cubic-bezier(.22,.61,.36,1) .12s backwards; }
}
@keyframes bf3HeroUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bf3HeroArt { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }


/* bf3 18+ page — standing character figure */
.aa-stage { position: relative; overflow: hidden; min-height: calc(100vh - 240px); display: flex; align-items: center; padding: clamp(40px, 7vw, 96px) 0; }
.aa-figure { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; max-width: 720px; pointer-events: none; z-index: 0; display: flex; align-items: flex-end; justify-content: center; }
.aa-figure img { height: 100%; width: 100%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 24px 60px rgba(0,0,0,.55)); -webkit-mask-image: linear-gradient(to left, #000 62%, transparent); mask-image: linear-gradient(to left, #000 62%, transparent); }
.aa-figure.is-empty { align-items: flex-end; }
.aa-ph { width: min(340px, 78%); aspect-ratio: 3 / 5; border: 1.5px dashed var(--border); border-radius: 22px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--text) 5%, transparent)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--muted-2); padding: 26px; }
.aa-ph svg { width: 60px; height: 60px; opacity: .55; }
.aa-ph span { font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .03em; max-width: 22ch; line-height: 1.55; }
.aa-grid { position: relative; z-index: 1; }
.aa-copy { max-width: 540px; }
.aa-copy h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 12px 0 0; }
.aa-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin: 16px 0 26px; max-width: 42ch; }
.aa-gate { border: 1px solid var(--border); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); padding: 22px 24px; max-width: 460px; }
.aa-gate .x18 { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .08em; color: var(--closed); border: 1px solid var(--closed); border-radius: 999px; padding: 4px 11px; }
.aa-steps { margin: 16px 0 14px; padding-left: 20px; color: var(--text); line-height: 1.7; font-size: .96rem; }
.aa-steps li { margin: 3px 0; }
.aa-note { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
@media (max-width: 820px) {
  .aa-stage { min-height: 0; }
  .aa-figure { width: 100%; max-width: none; opacity: .13; }
  .aa-figure img { object-position: bottom center; -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); }
  .aa-figure.is-empty { display: none; }
  .aa-copy { max-width: none; }
}


/* bf3 categories */
.cat-section { margin-top: clamp(34px, 5vw, 60px); }
.cat-section-head { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; padding-top: 18px; border-top: 1px solid var(--border); }
.cat-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: .74rem; color: var(--muted); margin: 14px 0 2px; }
.cat-crumbs a { color: var(--muted); text-decoration: none; }
.cat-crumbs a:hover { color: var(--text); }
.cat-crumbs > span:last-child { color: var(--text); }
.cat-crumbs .crumb-sep { color: var(--border); }


/* ===== NSFW section + age gate ===== */
.age-gate{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,6,10,.6);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)}
.age-card{max-width:440px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--text);font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.05rem;margin-bottom:16px;letter-spacing:.02em}
.age-card h2{margin:0 0 12px;font-size:1.55rem;line-height:1.1}
.age-card p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 20px}
.age-actions{display:flex;flex-direction:column;gap:10px}
.age-actions .btn{width:100%;justify-content:center;text-align:center}
.age-fine{font-size:.74rem;color:var(--muted);margin:18px 0 0;opacity:.8}
html.nsfw-locked{overflow:hidden}
html.nsfw-locked .nsfw-hero{filter:blur(17px);pointer-events:none;user-select:none}
.nsfw-hero .kicker .kicker-tick{background:var(--closed,#D85B4E)}
.nsfw-block{margin:0 0 48px}
.nsfw-block:last-child{margin-bottom:0}
.nsfw-block .cat-section-head{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}

/* ===================== #53 fixes (v37) ===================== */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:24px;margin-top:18px;justify-content:start}
.work-grid{justify-content:start}
.feat-card{transform-style:preserve-3d;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.feat-card:not(.feat-card--static):hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--key) 30%, transparent)}
html{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
body>main,main#main{flex:1 0 auto}
body>footer{flex-shrink:0}

/* ===================== #53b fixes (v38) ===================== */
/* footer: it used position:sticky;bottom:0 which, combined with the column
   flexbox, made it float as a detached box. Put it back in normal flow so the
   sticky-footer (flex push-down) keeps it at the page bottom, full content width. */
body > footer, footer { position: static; bottom: auto; margin-top: auto; }
body > footer { width: 100%; }
/* NSFW page uses body.home, so the compact body:not(.home) grid never applied and
   the auto-fit .work-grid stretched a single card to full width. Match normal pages. */
.nsfw-page .work-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.nsfw-page .work-grid .work-cover { aspect-ratio: 1 / 1; }
.nsfw-page .work-grid .work-meta { padding: 8px 11px 10px; gap: 8px; }
.nsfw-page .work-grid .work-meta h3 { font-size: .82rem; }
.nsfw-page .work-grid .work-meta span { font-size: .64rem; }
@media (max-width: 560px) { .nsfw-page .work-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
/* keep featured cards card-sized (auto-fill preserves empty tracks => no stretch) */
.featured-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); }
.nsfw-page .featured-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); }

/* ===================== #53c fixes (v39) ===================== */
/* sections no longer reserve 60vh of emptiness; the flex sticky-footer keeps the
   footer at the bottom, so categories/works just sit at the top with no void. */
[data-grid], [data-waitlist], [data-nsfw] { min-height: 0; }
/* copy-email button matches the email box height exactly */
.ct-email-row { align-items: stretch; }
.ct-copy { align-self: stretch; width: 46px; min-width: 46px; height: auto; padding: 0; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
/* featured cards: visible sheen/glint sweep on hover (like the work tiles) */
/* hero featured project: tilt + shine (moved here from the projects grid) */
.home .hero .hero-art-wrap { perspective: 1000px; }
.home .hero .hero-art { transform-style: preserve-3d; }
.hero-feat-link { display: block; width: 100%; height: 100%; position: relative; text-decoration: none; color: inherit; }
.hero-tilt { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.hero-feat-link::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.24) 50%, transparent 65%); transform: translateX(-135%); transition: none; pointer-events: none; }
.hero-feat-link.is-shine::before { transform: translateX(135%); transition: transform .6s ease; }


/* ===== #56 unified card hover (v41): no zoom/bounce -- shine + soft highlight ===== */
.work-card .work-cover::before, .feat-card .feat-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-130%); transition: none;
}
.work-card.is-shine .work-cover::before, .feat-card.is-shine .feat-cover::before {
  transform: translateX(130%); transition: transform .6s ease;
}
/* unify page-title vertical position across pages */
#top { padding-top: clamp(46px, 6vw, 78px); }
#top .wrap > h1:first-child, #top .wrap > h2:first-child,
#top .hero-copy > h1:first-child, #top .hero-copy > h2:first-child { margin-top: 0; }
.hero .hero-copy h1 { margin-top: 0; }

/* ===== #56b (v42): NSFW block spacing ===== */
.nsfw-block .cat-section { margin-top: 0; }
.nsfw-block:first-child { margin-top: 0; }


/* ===== #56c: NSFW now uses the single-section layout (like the character page) ===== */

/* footer bug-report link — centered */
body > footer { position: relative; }
.foot-bug { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: .85; }
.foot-bug:hover { color: var(--key); opacity: 1; }
@media (max-width: 600px) {
  .foot-bug { position: static; left: auto; top: auto; transform: none; order: 4; flex-basis: 100%; }
}

/* info hub tabs */
.info-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.info-tab{flex:1 1 120px;font-family:"IBM Plex Mono",monospace;font-size:1.04rem;font-weight:600;letter-spacing:.03em;line-height:1;padding:18px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;text-align:center;transition:background .15s,border-color .15s,color .15s}
.info-tab:hover{color:var(--text);border-color:var(--muted-2)}
.info-tab.active{background:var(--key);border-color:var(--key);color:var(--bg)}
.info-panel{display:none}
.info-panel.active{display:block}
.info-panel[hidden]{display:none}
#top:has(.info-tabs){padding-bottom:6px}
.info-panel > section{padding-top:22px}


/* ===== Characters SFW / NSFW split landing ===== */
.split-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:8px; }
.split-cards--one { grid-template-columns:1fr; max-width:520px; }
@media (max-width:680px){ .split-cards { grid-template-columns:1fr; } }
.split-card { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(420px,66vh,600px); border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--alt); text-decoration:none; color:inherit; transition:border-color .18s, transform .18s; }
.split-card:hover { border-color:var(--key); transform:translateY(-2px); }
.split-media { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.split-card--sfw .split-media { background-image:linear-gradient(155deg,#16221d,#0c0c11); }
.split-card--nsfw .split-media { background-image:linear-gradient(155deg,#271620,#0c0c11); }
.split-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.04) 100%); }
.split-meta { position:relative; padding:22px 24px 24px; }
.split-meta h3 { margin:0; font-size:1.7rem; letter-spacing:-.01em; }
.split-meta p { margin:6px 0 12px; color:var(--muted-2,#cfcfd6); font-size:.95rem; }
.split-meta .wt-go { font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--key); }
.split-card:hover .split-meta .wt-go { color:var(--edge); }
.split-badge { position:absolute; top:14px; right:14px; z-index:2; font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:600; letter-spacing:.08em; padding:5px 9px; border-radius:8px; background:var(--key); color:var(--bg); }
.split-back { display:inline-block; margin-bottom:16px; }
/* inline 18+ gate for the Characters NSFW card */
.age-inline { display:flex; justify-content:center; padding:30px 0; }
.age-card { max-width:460px; text-align:center; border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:34px 30px; }
.age-mark { font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:1.1rem; color:var(--key); margin-bottom:10px; }
.age-card h3 { margin:0 0 8px; font-size:1.4rem; }
.age-card p { margin:0 0 20px; color:var(--muted); }
.age-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== v68: sales & promo codes ===== */
.calc-side .total .was{ text-decoration:line-through; color:var(--muted,#888); font-size:.6em; margin-right:6px; font-weight:500; }
.calc-side .total .save-badge{ display:inline-block; background:#e5484d; color:#fff; font:700 .5em/1 'IBM Plex Mono',monospace; padding:4px 7px; border-radius:999px; vertical-align:middle; margin-left:6px; }
.pkg .pprice s{ opacity:.5; margin-right:5px; }
.pkg .pprice .pkg-off{ color:#e5484d; font-style:normal; font-weight:700; margin-left:4px; }
.calc-promo{ margin:22px 0 4px; }
.calc-promo .promo-label{ display:block; font:600 .72rem/1 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:11px; }
.calc-promo .promo-row{ display:flex; gap:8px; }
.calc-promo .promo-input{ flex:1 1 auto; min-width:0; padding:9px 11px; border-radius:9px; border:1px solid var(--border,#2a2a2a); background:transparent; color:inherit; font:inherit; }
.calc-promo .promo-msg{ font-size:.78rem; margin-top:6px; min-height:1em; }
.calc-promo .promo-msg.ok{ color:#30a46c; }
.calc-promo .promo-msg.bad{ color:#e5484d; }
.disclaimer.fineprint{ font-size:.72rem; opacity:.7; margin-top:8px; }
.disclaimer.fineprint a{ color:inherit; text-decoration:underline; }

/* v71: light-theme fixes for split hero media */
[data-theme="light"] .split-card--sfw .split-media { background-image:linear-gradient(155deg,#dce9e3,#eef0ea); }
[data-theme="light"] .split-card--nsfw .split-media { background-image:linear-gradient(155deg,#efdde7,#eef0ea); }

/* ===== ADDED v73: waitlist redesign (currently-working + progress bar) ===== */
.wl-sec-h { font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 14px; }
.wl-now { margin-top:22px; }
.wl-queue { margin-top:48px; }
.wl-now-card { border:1px solid var(--border); border-left:4px solid var(--waitlist); border-radius:var(--r); background:var(--surface); padding:34px 40px; text-align:center; }
.wl-now-card + .wl-now-card { margin-top:18px; }
.wl-now-name { font-size:2rem; font-weight:600; letter-spacing:-.01em; color:var(--text); margin-bottom:26px; text-align:center; }
.wl-fields { display:flex; flex-wrap:wrap; justify-content:center; gap:22px 56px; margin-bottom:30px; }
.wl-field { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; }
.wl-field .k { font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.wl-field .v { font-size:1.25rem; color:var(--text); }
.wl-progress { position:relative; margin-top:16px; padding-top:28px; }
.wl-progress-bubble { position:absolute; top:0; transform:translateX(-50%); font-family:"IBM Plex Mono",monospace; font-size:1.05rem; font-weight:600; color:var(--key); white-space:nowrap; transition:left .6s ease, color .4s ease; }
.wl-progress-bubble.wl-p-red { color:#DE7A66; }
.wl-progress-bubble.wl-p-yellow { color:#E3B23C; }
.wl-progress-bubble.wl-p-green { color:#5FB37A; }
.wl-progress-bubble.wl-p-diamond { color:#8FD9EC; }
.wl-progress-track { height:16px; border-radius:999px; background:var(--alt); border:1px solid var(--border); overflow:hidden; }
.wl-progress-fill { height:100%; border-radius:999px; background:var(--waitlist); transition:width .6s ease, background-color .4s ease; }
.wl-progress-fill.wl-p-red { background:#DE7A66; }
.wl-progress-fill.wl-p-yellow { background:#E3B23C; }
.wl-progress-fill.wl-p-green { background:#5FB37A; }
.wl-progress-fill.wl-p-diamond { background:linear-gradient(90deg,#79CDE6,#B6ECF6); box-shadow:0 0 12px rgba(150,224,240,.55); }
.wl-now-card.wl-p-red { border-left-color:#DE7A66; }
.wl-now-card.wl-p-yellow { border-left-color:#E3B23C; }
.wl-now-card.wl-p-green { border-left-color:#5FB37A; }
.wl-now-card.wl-p-diamond { border-left-color:#79CDE6; }
.wl-legend { margin-top:22px; font-size:.82rem; color:var(--muted-2); line-height:1.55; }
.wl-legend-h { font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--muted); margin-bottom:9px; }
.wl-legend-row { padding:3px 0; }
.wl-legend b { font-weight:600; }
.wl-st-active { color:#5FB37A; }
.wl-st-queued { color:#E3B23C; }
.wl-st-contacted { color:#8FD9EC; }
.wl-st-hold { color:#9A9AA6; }
.copy-hint { margin-top:12px; font-size:.86rem; color:var(--muted); line-height:1.55; }
.copy-hint a { color:var(--text); text-decoration:underline; }
.btn.copied { background:#5FB37A !important; border-color:#5FB37A !important; color:#0B0B0E !important; }
/* ===== Reviews (full-width stacked, scroll-reveal) ===== */
.rv-wrap { width: 100%; margin: 0; padding: 8px 0 120px; min-height: 50vh; }
.rv-perk { margin-top: 12px; color: var(--waitlist); font-size: .95rem; line-height: 1.55; }
.rv-intro { margin-bottom: 40px; text-wrap: balance; }
[data-i18n="wl_lede"] { text-wrap: balance; }
.rv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.rv-bar[hidden] { display: none; }
.rv-count { font-family: "IBM Plex Mono", monospace; font-size: .85rem; letter-spacing: .02em; color: var(--muted); }
.rv-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rv-sort { display: flex; align-items: center; gap: 8px; }
.rv-sort-lbl { font-family: "IBM Plex Mono", monospace; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rv-sort select { font-family: "Hanken Grotesk", sans-serif; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 34px 8px 12px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A9AA6' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.rv-sort select:hover { border-color: var(--key); }
.rv-empty { text-align: center; color: var(--muted); padding: 80px 0; }
.rv-card {
  position: relative;
  width: 100%; overflow-wrap: anywhere; min-width: 0;
  margin: 0 0 22px; padding: 22px 28px;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface);
}
.rv-date { position: absolute; top: 18px; right: 24px; font-family: "IBM Plex Mono", monospace; font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.rv-who { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding-right: 88px; }
.rv-av { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--border); }
.rv-av-ph { display: flex; align-items: center; justify-content: center; background: var(--alt); color: var(--key); font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 1.4rem; }
.rv-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.rv-name { font-weight: 600; color: var(--text); font-size: 1.2rem; overflow-wrap: anywhere; }
.rv-handle { font-size: .92rem; color: var(--muted); overflow-wrap: anywhere; }
.rv-text { margin: 0 0 14px; line-height: 1.7; color: var(--text); font-size: 1.12rem; overflow-wrap: anywhere; word-break: break-word; white-space: pre-line; }
.rv-stars { display: flex; justify-content: flex-end; gap: 4px; }
.rv-star { color: var(--border); font-size: 1.35rem; line-height: 1; }
.rv-star.on { color: #E3B23C; }
/* page-enter feel: the whole list fades up ONCE as a single block; individual cards are NOT animated */
/* Reviews render as static markup inline in reviews.html; no entrance animation. */
@media (max-width: 560px) {
  .rv-wrap { padding: 6px 0 100px; }
  .rv-card { padding: 24px 22px; }
  .rv-text { font-size: 1.05rem; }
  .rv-av { width: 52px; height: 52px; }
}


/* ===== Path (vertical experience timeline) ===== */
.tl-wrap { width: 100%; margin: 0; padding: 10px 0 120px; }
.tl-intro { margin-bottom: 46px; }
.tl-empty { text-align: center; color: var(--muted); padding: 80px 0; }
.tl { position: relative; width: 100%; max-width: 100%; margin: 0; padding: 8px 0 20px; }
.tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(var(--border), var(--border)); }
.tl-item { position: relative; width: 50%; box-sizing: border-box; padding-bottom: 56px; opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.tl-item.tl-in { opacity: 1; transform: translateY(0); }
.tl-left { left: 0; text-align: right; padding-left: 4px; padding-right: 132px; }
.tl-right { left: 50%; text-align: left; padding-left: 132px; padding-right: 4px; }
.tl-node { position: absolute; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--key); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--border); z-index: 1; }
.tl-left .tl-node { right: -7.5px; }
.tl-right .tl-node { left: -7.5px; }
.tl-date { position: absolute; top: -3px; white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; color: var(--key); }
.tl-left .tl-date { right: 44px; }
.tl-right .tl-date { left: 44px; }
.tl-card { display: inline-block; width: 100%; max-width: none; text-align: left; }
.tl-card .work-cover { aspect-ratio: 16 / 9; }
.tl-card .work-cover::before { display: none; }
.tl-card .work-meta { padding: 12px 14px; }
.tl-progress { position: absolute; top: 0; left: 50%; width: 17px; height: 17px; margin-left: -8.5px; margin-top: -8.5px; border-radius: 50%; background: var(--key); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--bg), 0 0 8px rgba(201,201,210,.5); z-index: 3; pointer-events: none; transition: top .1s linear; }
@media (max-width: 720px) {
  /* keep the desktop tree (center line + alternating sides), just smaller */
  .tl { max-width: 100%; }
  .tl-wrap { padding-bottom: 64px; }
  .tl-intro { margin-bottom: 28px; }
  .tl::before { left: 50%; }
  .tl-progress { left: 50%; margin-left: -8.5px; }
  .tl-item { width: 50%; padding: 26px 0 30px; }
  .tl-left { left: 0; text-align: left; padding-left: 2px; padding-right: 16px; }
  .tl-right { left: 50%; text-align: left; padding-left: 16px; padding-right: 2px; }
  .tl-left .tl-node { right: -7.5px; left: auto; }
  .tl-right .tl-node { left: -7.5px; right: auto; }
  /* date sits ABOVE the card (not beside it) so it never overlaps */
  .tl-date { top: -20px; font-size: .74rem; }
  .tl-left .tl-date { right: 23.5px; left: auto; }
  .tl-right .tl-date { left: 23.5px; right: auto; }
  .tl-card { max-width: 100%; }
  .tl-card .work-meta { padding: 8px 10px; }
  .tl-card .work-meta h3 { font-size: .8rem; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-item { transition: opacity .3s ease; transform: none; }
  .tl-item.tl-in { transform: none; }
  .tl-progress { transition: none; }
}

/* ===== bf3 mobile full-pass v1 (v121): overflow guard + small-screen hardening ===== */
/* kill any horizontal scroll / side-shift on phones (clip keeps sticky header working) */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
/* long unbroken strings (urls, handles, big headings) never blow out the viewport */
h1, h2, h3, p, li, .lede, .sub, .rv-handle, .wt-title { overflow-wrap: break-word; }

@media (max-width: 620px) {
  /* estimator / calc side card: tighter padding so it fits narrow screens */
  .calc-side { padding: 22px 18px; }
  .calc-side .total { font-size: 2rem; }
  /* project status timeline blocks each take a full row */
  .status-nav { gap: 10px; }
  .status-block { flex: 1 1 100%; min-width: 0; max-width: none; }
  /* info hub + commission tabs: one clear column, easy to tap */
  .info-tabs { flex-direction: column; }
  .info-tab { flex: 0 0 auto; }
  /* commercial quota plaque stacks its badge above the text */
  .quota { flex-direction: column; gap: 10px; padding: 16px 18px; }
  /* gates breathe a bit less */
  .aa-gate { padding: 20px 18px; }
  .gate { padding: 22px 18px; }
}

@media (max-width: 480px) {
  h2 { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  /* estimator step nav + wizard steps wrap cleanly */
  .cm-steps { gap: 6px; }
  .cm-step-tab { font-size: .78rem; padding: 7px 11px; }
  .cm-step-nav { flex-wrap: wrap; }
  .cm-step-nav .btn { flex: 1 1 100%; justify-content: center; }
  /* design-level + addon pills full width for thumbs */
  .lvl-row .lvl { flex: 1 1 100%; text-align: center; }
  .addon-grid { grid-template-columns: 1fr; }
  /* contact info bar single column on the smallest phones */
  .contact-bar { grid-template-columns: 1fr; }
  /* keep the works counter number from crowding its label */
  .hero-counter { gap: 16px; padding-left: 18px; }
  /* review cards: comfortable padding; date stays top-right like desktop */
  .rv-card { padding: 22px 18px; }
  /* waitlist CTA buttons full width */
  .wl-cta-btns .btn { flex: 1 1 100%; justify-content: center; }
}

/* ===== bf3 mobile fixes v2 (v122): footer bug line + featured card sizing ===== */
@media (max-width: 600px) {
  /* compact the "found a bug" footer line */
  footer { row-gap: 6px; }
  .foot-bug { margin: 2px 0 0; font-size: .68rem; opacity: .7; }
}
@media (max-width: 620px) {
  /* featured project card matches full-width dept/section cards on phones */
  #featured .featured-grid,
  .featured-grid { grid-template-columns: 1fr; }
  .nsfw-page .featured-grid { grid-template-columns: 1fr; }
  /* featured cover as tall/prominent as the department cards (.wt-media is 4/5) */
  #featured .feat-cover { aspect-ratio: 4 / 5; }
  /* title bar on phones so featured cards match the department cards' size */
  #featured .feat-meta { display: block; padding: 18px 20px 22px; }
  #featured .feat-meta h3 { font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
  #featured .feat-meta .wt-go { display: inline-block; margin-top: 12px; }
  /* hero featured card matches the department cards (4/5) on phones */
  .home .hero .hero-art { aspect-ratio: 4 / 5; margin-left: 0; margin-right: 0; margin-bottom: 26px; }
}

/* ===== v139: calculator overhaul (preview cards, categories, presets-first, wide summary) ===== */
.calc-intro { margin-top: 0; }
.calc-intro .h { font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px; }
.calc-intro .helper { color:var(--muted); font-size:.82rem; margin:4px 0 12px; }
.calc-intro .calc-intro-cta { margin-top:16px; }
.calc.calc-collapsed .calc-main, .calc.calc-collapsed .calc-side { display:none; }
.calc:not(.calc-collapsed) .calc-intro { border-bottom:1px solid var(--border); padding-bottom:26px; margin-bottom:8px; }
.calc { grid-template-columns: 1fr; }
.calc-side { position:static; display:flex; flex-wrap:wrap; gap:26px 44px; align-items:flex-start; }
.calc-side .cs-primary { flex:1 1 360px; min-width:0; }
.calc-side .cs-secondary { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; }
.calc-side .breakdown-list { margin-top:16px; padding-top:14px; }
.calc-side .actions { flex-direction:row; flex-wrap:wrap; gap:10px; margin-top:18px; }
.calc-side .actions .btn { flex:0 0 auto; }
.calc-side .calc-promo { margin-top:0; }
.calc-side .disclaimer { margin-top:16px; }
.pkg-grid { grid-template-columns: repeat(4, 1fr); gap:12px; }
.pkg.pkg-card { padding:16px; gap:8px; }
.pkg.pkg-card .pname { font-size:1.02rem; }
.pkg.pkg-card .pprice { font-size:.9rem; color:var(--muted); }
.pkg .pkg-prev { display:block; width:100%; aspect-ratio:16 / 9; margin-top:6px; border-radius:10px; background:#d7d7dc; overflow:hidden; }
.pkg .pkg-prev img { width:100%; height:100%; object-fit:cover; display:block; }
.addon-cat { margin-bottom:18px; }
.addon-cat:last-child { margin-bottom:0; }
.addon-cat-h { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:.82rem; color:var(--muted); margin:0 0 8px; }
@media (max-width: 620px) { .pkg-grid { grid-template-columns: 1fr; } }

/* ===== v140: 4-up cards, group spacing, bundle/addon previews, intro toggles ===== */
.pkg.pkg-card { padding:12px; gap:6px; }
.pkg.pkg-card .pname { font-size:.9rem; }
.pkg.pkg-card .pprice { font-size:.8rem; color:var(--muted); }

.pkg-group-h { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.02rem; color:var(--text); text-transform:none; letter-spacing:0; margin:32px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.pkg-group-h:first-of-type { margin-top:10px; }
.calc-block .pkg-grid + .pkg-group-h { margin-top:36px; }

.calc-intro-cta { display:flex; flex-wrap:wrap; gap:10px; }
.calc-intro-bundles { margin-top:16px; }
.btn.ghost.active { border-color:var(--key); background:var(--active-tint); color:var(--text); }

.bundle .bundle-prev { display:block; width:100%; aspect-ratio:16 / 9; margin-top:8px; border-radius:10px; background:#d7d7dc; overflow:hidden; order:2; }
.bundle .bundle-prev img { width:100%; height:100%; object-fit:cover; display:block; }
.addon .addon-prev { display:block; width:100%; aspect-ratio:16 / 9; margin:2px 0; border-radius:8px; background:#d7d7dc; overflow:hidden; order:-1; }
.addon .addon-prev img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 1024px){ .pkg-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 760px){ .pkg-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .pkg-grid { grid-template-columns:1fr; } }

/* ===== v141: bigger aligned bundles, card expand button + option modal ===== */
.bundle-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 14px; }
.bundle { height:100%; padding:16px 18px; gap:6px; }
.bundle .bname { font-size:1.05rem; }
.bundle .bdesc { font-size:.82rem; }
.bundle .bundle-prev { margin-top:auto; }

.pkg.pkg-card { position:relative; }
.pkg .pkg-expand { position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:rgba(0,0,0,.55); color:#fff; font-size:.82rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s, background .15s; }
.pkg.pkg-card:hover .pkg-expand, .pkg .pkg-expand:focus { opacity:1; }
.pkg .pkg-expand:hover { background:rgba(0,0,0,.82); }
@media (hover: none) { .pkg .pkg-expand { opacity:1; } }

.opt-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); padding:24px; }
.opt-modal.open { display:flex; }
.opt-modal-card { position:relative; width:min(920px,100%); max-height:88vh; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:16px; display:grid; grid-template-columns:1.1fr 1fr; }
.om-close { position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:9px; border:none; background:rgba(0,0,0,.5); color:#fff; font-size:1rem; cursor:pointer; }
.om-close:hover { background:rgba(0,0,0,.82); }
.om-media { padding:18px; }
.om-main { width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#d7d7dc; }
.om-main img { width:100%; height:100%; object-fit:cover; display:block; }
.om-thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.om-thumb { width:64px; aspect-ratio:16/9; border-radius:7px; overflow:hidden; border:1px solid var(--border); background:#d7d7dc; cursor:pointer; padding:0; }
.om-thumb.active { border-color:var(--key); }
.om-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.om-info { padding:22px 24px 26px; }
.om-title { font-family:"Bricolage Grotesque",sans-serif; margin:0 0 6px; font-size:1.3rem; }
.om-price { font-family:"IBM Plex Mono",monospace; color:var(--muted); margin-bottom:14px; }
.om-price s { opacity:.5; margin-right:5px; }
.om-price .pkg-off { color:#e5484d; font-style:normal; font-weight:700; margin-left:4px; }
.om-what { color:var(--muted); line-height:1.5; margin:0 0 14px; }
@media (max-width:680px){ .opt-modal-card { grid-template-columns:1fr; } }

/* ===== v142: expand handle inside preview, wide modal carousel ===== */
.pkg .pkg-prev { position:relative; }
.pkg .pkg-expand { position:absolute; top:auto; bottom:8px; right:8px; width:auto; height:auto; padding:7px 10px; font-size:.95rem; line-height:1; opacity:1; background:rgba(0,0,0,.62); }
.pkg.pkg-card:hover .pkg-expand, .pkg .pkg-expand:focus { opacity:1; }
.pkg .pkg-expand:hover { background:rgba(0,0,0,.85); }

.opt-modal-card { width:min(1080px,100%); max-height:88vh; overflow:hidden; grid-template-columns:1.35fr 1fr; align-items:stretch; }
.om-media { padding:0; }
.om-carousel { position:relative; width:100%; height:100%; min-height:100%; background:#0f0f13; display:flex; align-items:center; justify-content:center; border-radius:16px 0 0 16px; overflow:hidden; }
.om-carousel .om-main { width:100%; height:100%; aspect-ratio:auto; border-radius:0; background:#d7d7dc; }
.om-carousel .om-main img { width:100%; height:100%; object-fit:cover; display:block; }
.om-carousel .om-main.om-empty { min-height:340px; }
.om-cnav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:1.4rem; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; }
.om-cnav:hover { background:rgba(0,0,0,.82); }
.om-prev { left:10px; } .om-next { right:10px; }
.om-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
.om-dot { width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; padding:0; }
.om-dot.active { background:#fff; }
.om-info { max-height:88vh; overflow:auto; }
@media (max-width:760px){ .opt-modal-card { grid-template-columns:1fr; overflow:auto; } .om-carousel { border-radius:16px 16px 0 0; height:auto; } .om-carousel .om-main { height:auto; aspect-ratio:16/9; } .om-info { max-height:none; } }

/* ===== v143: bigger option modal, fixed 3:2 media, roomier text ===== */
.opt-modal-card { width:min(1160px,100%); align-items:start; }
.om-carousel { aspect-ratio:3/2; height:auto; min-height:0; }
.om-carousel .om-main { height:100%; min-height:0; }
.om-carousel .om-main.om-empty { min-height:0; }
.om-info { max-height:88vh; overflow:auto; padding:30px 34px 34px; }
.om-info .om-title { font-size:1.5rem; line-height:1.2; margin:0 0 6px; }
.om-info .om-price { font-size:1.05rem; margin:0 0 18px; }
.om-info .om-what { margin:0 0 22px; line-height:1.55; color:var(--muted); }
.om-info .svc-field { margin:0 0 18px; }
.om-info .svc-field:last-child { margin-bottom:0; }
.om-info .svc-flabel { display:block; margin:0 0 8px; letter-spacing:.06em; }
.om-info .svc-field ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.om-info .svc-field li { line-height:1.45; }
@media (max-width:760px){ .om-info { max-height:none; padding:22px 20px 26px; } .om-carousel { aspect-ratio:16/9; } }

/* ===== v145: modal fill + level/addon cards + expand handles ===== */
.opt-modal-card { align-items:stretch; }
.om-carousel { display:block; position:relative; width:100%; height:100%; min-height:360px; aspect-ratio:auto; overflow:hidden; }
.om-carousel .om-main { position:absolute; inset:0; width:100%; height:100%; min-height:0; }
.om-carousel .om-main img { width:100%; height:100%; object-fit:cover; display:block; }
.om-carousel .om-main.om-empty { position:absolute; inset:0; background:#d7d7dc; min-height:360px; }
@media (max-width:760px){ .om-carousel { height:auto; aspect-ratio:16/9; min-height:0; } .om-carousel .om-main.om-empty { min-height:0; } }
/* expand handle (bundle/level/addon) */
.card-expand { position:absolute; bottom:8px; right:8px; z-index:2; display:inline-flex; align-items:center; justify-content:center; padding:7px 10px; font-size:.95rem; line-height:1; border-radius:8px; border:none; background:rgba(0,0,0,.62); color:#fff; cursor:pointer; opacity:1; transition:background .15s; }
.card-expand:hover, .card-expand:focus { background:rgba(0,0,0,.85); outline:none; }
.bundle .bundle-prev, .addon .addon-prev, .lvl .lvl-prev { position:relative; }
/* level cards */
.lvl-row[data-calc-levels] { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.lvl.lvl-card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; text-align:left; height:100%; }
.lvl.lvl-card .lname { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1rem; line-height:1.2; }
.lvl.lvl-card .mult { font-family:"IBM Plex Mono",monospace; font-size:.85rem; margin-left:0; }
.lvl.lvl-card .lvl-prev { display:block; width:100%; aspect-ratio:16/9; margin-top:auto; border-radius:10px; background:#d7d7dc; overflow:hidden; }
.lvl.lvl-card .lvl-prev img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){ .lvl-row[data-calc-levels] { grid-template-columns:1fr; } }
/* addon cards */
.addon.addon-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; padding:14px; height:100%; }
.addon.addon-card .aname { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.addon.addon-card .price { font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--muted); white-space:normal; }
.addon.addon-card .addon-prev { display:block; width:100%; aspect-ratio:16/9; margin:0; margin-top:auto; border-radius:10px; background:#d7d7dc; overflow:hidden; order:0; }
.addon.addon-card .addon-prev img { width:100%; height:100%; object-fit:cover; display:block; }



/* ===== v146: add-on cards flow in a row, a bit smaller (fix outer vs inner grid) ===== */
.addon-grid[data-calc-addons] { display: block; }
.addon-cat .addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; align-items: stretch; }
.addon-cat .addon.addon-card { padding: 12px; gap: 6px; }
.addon-cat .addon.addon-card .addon-prev { aspect-ratio: auto; height: 78px; margin-top: auto; }
.addon-cat .addon.addon-card .addon-prev .card-expand { padding: 5px 8px; font-size: .82rem; bottom: 6px; right: 6px; }
@media (max-width: 520px){ .addon-cat .addon-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 360px){ .addon-cat .addon-grid { grid-template-columns: 1fr; } }


/* ===== v148: unify opened-card size across all tabs (min-height like the package modal) ===== */
.opt-modal-card { min-height: 460px; align-content: stretch; }
@media (max-width:760px){ .opt-modal-card { min-height: 0; } }

/* ===== v149: DEFINITIVE opened-card modal — fixed size for ALL tabs, images always cover ===== */
.opt-modal-card { width: min(1120px, 95vw); height: min(600px, 86vh); min-height: 0; max-height: 86vh; display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; align-content: stretch; overflow: hidden; }
.om-media { padding: 0; height: 100%; min-width: 0; overflow: hidden; }
.om-carousel { display: block; position: relative; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; background: #d7d7dc; overflow: hidden; border-radius: 16px 0 0 16px; }
.om-carousel .om-main, .opt-modal-card .om-main { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; background: #d7d7dc; }
.om-carousel .om-main img, .opt-modal-card .om-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-carousel .om-main.om-empty { position: absolute; inset: 0; background: #d7d7dc; min-height: 0; }
.om-info { height: 100%; max-height: none; overflow-y: auto; min-width: 0; padding: 30px 34px 34px; }
@media (max-width: 760px) {
  .opt-modal-card { grid-template-columns: 1fr; height: auto; max-height: 92vh; overflow-y: auto; }
  .om-media { height: auto; }
  .om-carousel { aspect-ratio: 16/9; height: auto; border-radius: 16px 16px 0 0; }
  .om-carousel .om-main, .opt-modal-card .om-main { position: relative; }
  .om-info { height: auto; }
}

/* ===== v150: larger opened card + bundle card price ===== */
.opt-modal-card { width: min(1240px, 96vw); height: min(680px, 90vh); max-height: 90vh; }
.bundle .bprice { font-family: "IBM Plex Mono", monospace; font-size: .82rem; color: var(--muted); }
@media (max-width: 760px) { .opt-modal-card { height: auto; max-height: 92vh; } }

/* ===== v151: two-column summary + What's included + explicit Details affordance ===== */
.calc-side { display: block; }
.calc-side .cs-cols { display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-start; }
.calc-side .cs-cols .cs-primary { flex: 1 1 340px; min-width: 0; }
.calc-side .cs-cols .cs-secondary { flex: 1 1 300px; min-width: 0; }
.calc-side .cs-foot { margin-top: 30px; padding-top: 0; display: flex; flex-direction: column; gap: 14px; }
.calc-side .cs-foot .calc-promo { margin: 0; }
.calc-side .cs-foot .actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin: 0; }
.calc-side .cs-foot .disclaimer { margin: 2px 0 0; }
.cs-included .cs-inc-h { font: 600 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.cs-included .cs-inc-sub { margin-top: 16px; font: 600 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.cs-included .cs-inc-list { list-style: none; margin: 0; padding: 0; }
.cs-included .cs-inc-list li { position: relative; padding: 5px 0 5px 16px; font-size: .9rem; line-height: 1.4; color: var(--text); }
.cs-included .cs-inc-list li::before { content: "\2013"; position: absolute; left: 0; color: var(--muted-2); }
.cs-included .cs-inc-empty { font-size: .9rem; color: var(--muted); }
.pkg .pkg-expand, .card-expand { gap: 6px; padding: 9px 13px; font-size: .82rem; }
.pkg .pkg-expand::after, .card-expand::after { content: "Details"; font: 600 .78rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: .02em; }
.addon-cat .addon.addon-card .addon-prev .card-expand { padding: 6px 10px; }
.addon-cat .addon.addon-card .addon-prev .card-expand::after { font-size: .72rem; }

/* ===== v152: What's included add-on rows ===== */
.cs-included .cs-inc-addon { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--text); }
.cs-included .cs-inc-addon .cs-inc-note { font: 500 .74rem/1 "IBM Plex Mono", monospace; color: var(--muted-2); margin-left: 6px; }

/* v155 - unified "what's included" list style: en-dash markers everywhere */
.svc-field ul, .om-info .svc-field ul, .explain-card ul { list-style: none; margin: 0; padding: 0; }
.explain-card ul { margin-top: 8px; }
.om-info .svc-field ul { display: flex; flex-direction: column; gap: 6px; }
.svc-field li, .om-info .svc-field li, .explain-card li { position: relative; padding-left: 16px; }
.svc-field li::before, .om-info .svc-field li::before, .explain-card li::before { content: "\2013"; position: absolute; left: 0; color: var(--muted-2); }

/* v160 - modal collapsible sections + larger text */
.om-info .om-sec { border-top: 1px solid var(--border); margin: 0; }
.om-info .om-sec:first-of-type { border-top: none; }
.om-info .om-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 14px 0; font: 600 .9rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--key); }
.om-info .om-sec > summary::-webkit-details-marker { display: none; }
.om-info .om-sec > summary::after { content: "+"; margin-left: auto; font-size: 1.15rem; color: var(--muted-2); line-height: 1; }
.om-info .om-sec[open] > summary::after { content: "\2013"; }
.om-info .om-sec-n { font-size: .8rem; color: var(--muted-2); font-weight: 500; }
.om-info .om-sec > ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.om-info .om-sec > ul li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.om-info .om-sec > ul li::before { content: "\2013"; position: absolute; left: 0; color: var(--muted-2); }
.om-info .om-what { font-size: 1.02rem; }
.om-info .svc-note { font-size: .9rem; margin-top: 16px; }

/* v163 - larger add-on cards in calculator */
.addon-cat .addon-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.addon-cat .addon.addon-card { padding: 16px; gap: 9px; }
.addon-cat .addon.addon-card .aname { font-size: .98rem; }
.addon-cat .addon.addon-card .price { font-size: .82rem; }
.addon-cat .addon.addon-card .addon-prev { height: 96px; }

/* v164 - work-type toggle (render / print / all) */
.wt-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.wt-btn { font: 600 .88rem/1 "IBM Plex Mono", monospace; letter-spacing: .04em; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.wt-btn:hover { color: var(--text); border-color: var(--muted-2); }
.wt-btn.active { color: var(--bg); background: var(--text); border-color: var(--text); }

/* v165 - work-type toggle sits in step-tabs row, matches cm-step-tab */
.cm-steps .wt-toggle { margin: 0 0 0 auto; display: inline-flex; gap: 8px; flex-wrap: wrap; align-self: center; }
.wt-btn { display: inline-flex; align-items: center; cursor: pointer; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; letter-spacing: 0; transition: border-color .15s, color .15s; }
.wt-btn:hover { border-color: var(--muted-2); color: var(--text); }
.wt-btn.active { border-color: var(--edge); color: var(--text); background: transparent; }
@media (max-width: 620px){ .cm-steps .wt-toggle { margin: 8px 0 0; width: 100%; } }

/* ===== FAQ LIST (data-driven accordion) ===== */
.qa { border-top: 1px solid var(--border); }
.qa-item { border-bottom: 1px solid var(--border); }
.qa-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 4px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.04rem; color: var(--text); transition: color .15s; user-select: none; }
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary::before { content: "+"; font-family: "IBM Plex Mono", monospace; color: var(--edge); font-size: 1.15rem; width: 16px; flex: none; text-align: center; }
.qa-item[open] > summary::before { content: "\2212"; }
.qa-item > summary:hover { color: var(--edge); }
.qa-item > p { color: var(--muted); font-size: .94rem; line-height: 1.62; margin: 0 0 18px; padding-left: 28px; max-width: 80ch; }

/* ===== PAYMENT METHODS STRIP ===== */
.calc-payment-methods { margin-bottom:0; }
.pay-methods {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.pay-method { display:flex; align-items:center; }
.pay-method img { height:20px; width:auto; opacity:.65; transition:opacity .18s; display:block; }
.pay-method img:hover { opacity:1; }
.calc-pay-strip {
  display:flex; align-items:center; gap:10px;
  margin-top:12px; flex-wrap:nowrap;
}
.calc-pay-label {
  font-size:.7rem; color:var(--muted,#888);
  text-transform:uppercase; letter-spacing:.07em;
  white-space:nowrap; flex-shrink:0;
  line-height:20px; /* match icon height so label is centered */
  align-self:center;
}

/* ===== CONTACT ROUTING CARDS ===== */
.cr-heading { font-size:1rem; font-weight:700; margin:0 0 14px; }
.cr-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.cr-card {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--line,#222); border-radius:12px;
  padding:14px 18px; background:var(--surface-2, rgba(255,255,255,.03));
}
.cr-card-body { display:flex; gap:12px; align-items:flex-start; flex:1; }
.cr-card-text { display:flex; flex-direction:column; gap:3px; }
.cr-card-text strong { font-size:.95rem; }
.cr-hint { font-size:.8rem; color:var(--muted); line-height:1.4; }
.cr-icon-img img { width:28px; height:28px; object-fit:contain; }
.cr-btn { white-space:nowrap; flex-shrink:0; }
/* ===== CONTACT ROUTING - ICONS ===== */
.cr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.cr-icon-text {
  font-size: 1.3rem;
  line-height: 1;
}
.cr-icon-img img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}