/* JUDGY blocks — the design system as shipped, scoped so Elementor's own
   markup is never restyled by accident. Carried over unchanged from the
   approved build; see tokens.css for the values. */

/* ═══════════════════════════════════════════════════════════════
   JUDGY — site stylesheet
   Values carried over from the approved homepage build, unchanged.
   Everything below uses logical properties so RTL needs no mirror
   rules. Hard edges, zero radius, big padding, full width.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.judgy {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--fd);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--g); color: var(--ink); }

:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--gd); }

.skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--gut);
  z-index: 300; background: var(--g); color: #000; padding: 1rem 1.75rem;
  font-family: var(--fm); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.skip:focus { inset-block-start: 1rem; }

.wrap { width: 100%; padding-inline: var(--gut); }      /* FULL WIDTH — gutters only */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }

.eye {
  font-family: var(--fm); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wlab); margin: 0 0 1.5rem;
}
.light .eye { color: var(--klab); }
.rule { flex: 1; height: 1px; background: var(--w16); }
.light { background: var(--bone); color: #0d0d0d; }
.light .rule { background: var(--k16); }
/* Elementor owns section padding — set --pad on a container instead of
   letting a bare element selector fight the builder. */
.judgy-section { padding-block: var(--pad); }

/* ══ PRELOADER ══ */
#pre {
  position: fixed; inset: 0; z-index: 200; background: #000;
  transition: opacity .7s var(--ease), visibility .7s;
}
#pre.go { opacity: 0; visibility: hidden; }
#pre .glow {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: min(62vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(50, 233, 148, .30) 0%, rgba(50, 233, 148, .10) 32%, transparent 66%);
  animation: brea 3s var(--ease) infinite alternate;
}
@keyframes brea { to { opacity: .55; transform: translate(-50%, -50%) scale(1.12); } }
#pre .plg {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%); width: clamp(96px, 11vw, 150px);
}
#pre .plg img { width: 100%; animation: fl 2.6s var(--ease) infinite alternate; }
@keyframes fl { to { opacity: .72; } }
#pct {
  position: absolute; inset-block-end: clamp(2rem, 5vw, 4.5rem); inset-inline-start: var(--gut);
  display: flex; align-items: flex-start; gap: .35rem; line-height: .82;
}
#pct b { font-size: clamp(4rem, 12vw, 10rem); font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#pct i { font-style: normal; font-size: clamp(1rem, 2.2vw, 1.9rem); color: var(--g); font-weight: 600; }
#bar { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; background: var(--g); width: 0; }

/* ══ CURSOR — ring + dot, desktop only ══ */
/* Both start invisible: before the first mousemove they would otherwise
   sit at 0,0 and read as a stray green arc in the corner. */
#cr, #cdot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 190; border-radius: 50%; opacity: 0; }
body.cur #cr, body.cur #cdot { opacity: 1; }
#cr {
  width: 38px; height: 38px; border: 1px solid var(--g); transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s, opacity .3s;
}
#cdot { width: 5px; height: 5px; background: var(--g); transform: translate(-50%, -50%); }
body.hv #cr { width: 74px; height: 74px; background: rgba(50, 233, 148, .14); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { #cr, #cdot { display: none; } }

/* ══ HEADER ══ */
header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 120; height: 92px;
  display: flex; align-items: center; border-bottom: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur);
}
/* backdrop-filter is permitted HERE and nowhere else on the site. */
header.st {
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
  border-bottom-color: var(--w16); transform: translateZ(0);
}
@media (pointer: coarse) {
  header.st { background: rgba(0, 0, 0, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(1px)) { header.st { background: rgba(0, 0, 0, .94); } }

.hd { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.soc { display: flex; gap: .55rem; }
.soc a {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--w16);
  transition: border-color var(--dur), color var(--dur);
}
.soc a:hover { border-color: var(--g); color: var(--g); }
.soc svg { width: 14px; height: 14px; }
.hlg { justify-self: center; }
.hlg img { height: 40px; width: auto; }
.hr { display: flex; align-items: center; justify-content: flex-end; gap: clamp(.6rem, 1.6vw, 1.4rem); }
.lang { font-family: var(--fm); font-size: .75rem; color: var(--w64); }
.lang:hover { color: #fff; }
.cbtn {
  padding: .85rem 1.9rem; background: var(--g); border: 1px solid var(--g); color: #000;
  font-family: var(--fm); font-weight: 700; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.cbtn:hover { background: transparent; color: var(--g); }
#bg {
  width: 48px; height: 48px; border: 1px solid var(--w24); display: grid; place-items: center;
  align-content: center; gap: 6px; transition: border-color var(--dur);
}
#bg:hover { border-color: #fff; }
#bg i { width: 20px; height: 1.5px; background: #fff; display: block; transition: transform .34s var(--ease); }
@media (max-width: 780px) { .soc, .cbtn { display: none; } }

/* ══ MENU OVERLAY — numbered, heavy, patterned ══ */
#mn {
  position: fixed; inset: 0; z-index: 150; background: #0a0a0a; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility .55s;
}
body.mo #mn { opacity: 1; visibility: visible; }
#mn .pat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
#mn .vg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .88)); }
.mtop {
  position: absolute; inset-block-start: 2rem; inset-inline-end: var(--gut);
  display: flex; align-items: center; gap: 2rem; z-index: 2;
}
.mtop .lang { font-family: var(--fm); font-size: .8125rem; letter-spacing: .1em; color: var(--w92); }
#mx { width: 44px; height: 44px; display: grid; place-items: center; position: relative; }
#mx::before, #mx::after { content: ''; position: absolute; width: 26px; height: 2px; background: var(--g); }
#mx::before { transform: rotate(45deg); }
#mx::after { transform: rotate(-45deg); }
.mnav { position: relative; z-index: 2; width: 100%; padding-inline: var(--gut); }
.ml {
  display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2.5rem); padding-block: .05em;
  transform: translateY(52px); opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
body.mo .ml { transform: none; opacity: 1; }
body.mo .ml:nth-child(1) { transition-delay: .10s; }
body.mo .ml:nth-child(2) { transition-delay: .16s; }
body.mo .ml:nth-child(3) { transition-delay: .22s; }
body.mo .ml:nth-child(4) { transition-delay: .28s; }
body.mo .ml:nth-child(5) { transition-delay: .34s; }
body.mo .ml:nth-child(6) { transition-delay: .40s; }
body.mo .ml:nth-child(7) { transition-delay: .46s; }
.ml span {
  font-family: var(--fm); font-size: clamp(.75rem, 1.1vw, .9375rem);
  color: var(--g); opacity: .65; flex: none; width: 2.6em;
}
.ml b {
  font-size: clamp(2rem, 6.4vw, 5rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  color: rgba(255, 255, 255, .42); border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
[dir="rtl"] .ml b { letter-spacing: 0; line-height: 1.24; }
.ml:hover b, .ml.cur b { color: #fff; border-bottom-color: var(--g); }
.mf {
  position: absolute; inset-block-end: 2rem; inset-inline-start: var(--gut); inset-inline-end: var(--gut);
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wlab); z-index: 2;
}

/* ══ REVEAL ══ */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

.act { display: flex; align-items: center; gap: 1.25rem; padding-top: 4rem; }
.act i { font-family: var(--fm); font-size: .6875rem; letter-spacing: .18em; color: var(--g); font-style: normal; }
.act s {
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .18em; color: var(--wlab);
  text-decoration: none; text-transform: uppercase;
}
.light .act s { color: var(--klab); }

/* ══ HERO ══ */
#hero { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(7rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem); }
#hero > .g { width: 100%; }
.stat {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--fm); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wlab); margin-bottom: 2.25rem;
}
.pulse { width: 7px; height: 7px; background: var(--g); flex: none; animation: pl 2.4s var(--ease) infinite; }
@keyframes pl { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

h1 { font-size: clamp(3.2rem, 9.4vw, 8.5rem); font-weight: 900; line-height: .92; letter-spacing: -.045em; margin: 0 0 2.5rem; }
h1 em { font-style: normal; color: var(--g); }
.ln { display: block; overflow: hidden; }
.ln > span { display: block; transform: translateY(106%); animation: up 1s var(--ease) forwards; }
.ln:nth-child(2) > span { animation-delay: .09s; }
.ln:nth-child(3) > span { animation-delay: .18s; }
@keyframes up { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ln > span { transform: none; animation: none; } }

.sub { font-size: clamp(1.0625rem, 1.6vw, 1.4rem); color: var(--w64); max-width: 36rem; margin: 0; }
.ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 3rem; }
.btn {
  display: inline-block; padding: 1.25rem 2.5rem; font-size: .875rem; font-weight: 600;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.bp { background: var(--g); color: #000; }
.bp:hover { background: #63f1b0; }
.bs { border: 1px solid var(--w40); }
.bs:hover { border-color: #fff; background: #fff; color: #000; }
.light .bs { border-color: var(--klab); }
.light .bs:hover { background: #000; color: #fff; border-color: #000; }

.hpor {
  position: relative; aspect-ratio: 3/4; border: 1px solid var(--w16); overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, rgba(50, 233, 148, .16), transparent 62%), #080808;
  display: grid; place-items: center;
}
.hpor img { width: 66%; filter: drop-shadow(0 0 46px rgba(50, 233, 148, .35)); }
.hpor::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline: 0; height: 42%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
}
.hcap {
  position: absolute; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 2;
  font-family: var(--fm); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wlab);
}
.cnr { position: absolute; width: 16px; height: 16px; border: 2px solid var(--g); z-index: 2; }
.c-1 { inset-block-start: 10px; inset-inline-start: 10px; border-inline-end: 0; border-block-end: 0; }
.c-2 { inset-block-start: 10px; inset-inline-end: 10px; border-inline-start: 0; border-block-end: 0; }
.c-3 { inset-block-end: 10px; inset-inline-start: 10px; border-inline-end: 0; border-block-start: 0; }
.c-4 { inset-block-end: 10px; inset-inline-end: 10px; border-inline-start: 0; border-block-start: 0; }

/* ══ MARQUEE — direction-aware ══ */
.mq { border-block: 1px solid var(--w16); overflow: hidden; padding-block: 1.6rem; display: flex; }
.mqt {
  display: flex; align-items: center; gap: 2.75rem; white-space: nowrap;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.025em;
  animation: sl 36s linear infinite; flex: none; padding-inline-end: 2.75rem;
}
@keyframes sl { to { transform: translateX(-100%); } }
[dir="rtl"] .mqt { animation-direction: reverse; letter-spacing: 0; }
.mq:hover .mqt { animation-play-state: paused; }
.pip { width: 10px; height: 10px; background: var(--g); flex: none; }

/* ══ SECTION HEAD ══ */
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 4rem; }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 0; }
.lk {
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--w64); border-bottom: 1px solid var(--w24); padding-bottom: .3rem;
  transition: color var(--dur), border-color var(--dur);
}
.lk:hover { color: var(--g); border-color: var(--g); }
.light .lk { color: var(--k64); border-color: var(--k16); }
.light .lk:hover { color: var(--gd); border-color: var(--gd); }

.ph { font-size: clamp(1.5rem, 3.1vw, 2.7rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; margin: 0; }
.sy { display: flex; gap: 1.1rem; padding-block: 1.2rem; border-bottom: 1px solid var(--w16); }
.sy:last-child { border-bottom: 0; }
.sy i { font-family: var(--fm); font-size: .6875rem; color: var(--g); font-style: normal; flex: none; }
.sy p { margin: 0; font-size: .9375rem; color: var(--w64); }

/* ══ PROJECT STRIP — expand on hover ══ */
.pcs { display: flex; gap: 2px; height: clamp(420px, 52vw, 620px); background: var(--w16); }
.pc { position: relative; flex: 1; overflow: hidden; background: #101010; transition: flex var(--dur) var(--ease); min-width: 0; }
@media (min-width: 900px) { .pc:hover, .pc.on { flex: 3.6; } }
@media (max-width: 899px) { .pcs { flex-direction: column; height: auto; } .pc { height: 280px; } .pc.on { height: 460px; } }
.pc-img { position: absolute; inset: 0; container-type: size; }
.pc-img img {
  width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top;
  filter: grayscale(1) contrast(1.05) brightness(.52);
  transition: filter .7s var(--ease), transform 7s linear;
}
.pc:hover .pc-img img, .pc.on .pc-img img {
  filter: grayscale(0) contrast(1) brightness(.88);
  transform: translateY(calc(-100% + 100cqh));
}
@media (prefers-reduced-motion: reduce) { .pc:hover .pc-img img, .pc.on .pc-img img { transform: none; } }
.pc::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, .18), rgba(6, 6, 6, .92));
  transition: background var(--dur);
}
.pc:hover::after, .pc.on::after {
  background: linear-gradient(180deg, rgba(4, 4, 4, .05) 0%, rgba(4, 4, 4, .18) 44%, rgba(4, 4, 4, .94) 100%);
}
.pc-idle { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.75rem 1.5rem; z-index: 2; transition: opacity .3s var(--ease); }
.pc-idle b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
.pc-n { font-family: var(--fm); font-size: .6875rem; letter-spacing: .14em; color: var(--g); display: block; margin-bottom: .6rem; }
.pc:hover .pc-idle, .pc.on .pc-idle { opacity: 0; }
.pc-open {
  position: absolute; inset: 0; padding: clamp(1.5rem, 2.4vw, 2.75rem); z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none;
}
.pc:hover .pc-open, .pc.on .pc-open { opacity: 1; transform: none; }
.pc-open h3 { font-size: clamp(1.5rem, 2.5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 1rem; }
.pc-open p { margin: 0 0 1.75rem; font-size: .9375rem; color: var(--w64); max-width: 34rem; }
.pc-open dl {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.5rem; margin: 0 0 1.75rem;
  font-family: var(--fm); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
}
.pc-open dt { color: var(--wlab); }
.pc-open dd { margin: 0; color: var(--w92); }
.pc-go { font-family: var(--fm); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g); }
.br { position: absolute; width: 18px; height: 18px; border: 2px solid var(--g); }
.b-tl { inset-block-start: 12px; inset-inline-start: 12px; border-inline-end: 0; border-block-end: 0; }
.b-tr { inset-block-start: 12px; inset-inline-end: 12px; border-inline-start: 0; border-block-end: 0; }
.b-bl { inset-block-end: 12px; inset-inline-start: 12px; border-inline-end: 0; border-block-start: 0; }
.b-br { inset-block-end: 12px; inset-inline-end: 12px; border-inline-start: 0; border-block-start: 0; }

/* ══ NUMBERS ══ */
.nums { border-block: 1px solid var(--w16); padding-block: clamp(3.5rem, 6vw, 6rem); }
.numrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3.5rem) 1.5rem; }
@media (min-width: 680px) { .numrow { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .numrow { grid-template-columns: repeat(6, 1fr); } }
.nm { cursor: default; transition: color var(--dur) var(--ease); }
.nm:hover { color: var(--g); }
.nm:hover span { color: var(--g); opacity: .8; }
.nm b {
  display: block; font-size: clamp(3.4rem, 7vw, 6.5rem); font-weight: 900; letter-spacing: -.045em;
  line-height: .86; font-variant-numeric: tabular-nums; transition: color var(--dur);
}
.nm span {
  font-family: var(--fm); font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wlab); margin-top: 1rem; display: block; transition: color var(--dur), opacity var(--dur);
}
[dir="rtl"] .nm span { letter-spacing: 0; }

/* ══ PLATFORMS ══ */
.pf { border-top: 1px solid var(--k16); padding-top: 1.5rem; }
.pf:first-child, .pf:hover { border-top-color: var(--g); }
.pfh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.pfh b { font-size: 1.3rem; font-weight: 700; }
.pfh i { font-family: var(--fm); font-size: .6875rem; font-style: normal; color: var(--gd); }
.pf p { margin: 0 0 1.25rem; font-size: .875rem; color: var(--k64); }
.pf ul { list-style: none; margin: 0; padding: 0; font-family: var(--fm); font-size: .6875rem; line-height: 2; color: var(--klab); text-transform: uppercase; }

/* ══ PROCESS ══ */
.stp { display: flex; gap: clamp(1rem, 2.6vw, 2.25rem); padding-block: 1.7rem; border-bottom: 1px solid var(--w16); flex-wrap: wrap; }
.stp:last-child { border-bottom: 0; }
.stp i { font-family: var(--fm); font-size: .8125rem; font-style: normal; color: var(--g); width: 34px; flex: none; }
.stp b { font-size: 1.0625rem; font-weight: 600; width: 11rem; flex: none; }
.stp p { margin: 0; font-size: .9375rem; color: var(--w64); flex: 1; min-width: 240px; }
.light .stp { border-bottom-color: var(--k16); }
.light .stp i { color: var(--gd); }
.light .stp p { color: var(--k64); }

/* ══ BRANDING TURN ══ */
#brand { position: relative; overflow: hidden; border-block: 1px solid var(--w16); }
#brand .bgi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
#brand .inn { position: relative; }
.th { font-size: clamp(2.2rem, 5.6vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.01; margin: 0; }
.bl2 {
  display: inline-block; padding: 1.15rem 2.3rem; border: 1px solid var(--g); color: var(--g);
  font-size: .875rem; font-weight: 600; transition: background var(--dur), color var(--dur);
}
.bl2:hover { background: var(--g); color: #000; }
.bs4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 4.5rem; }
@media (min-width: 880px) { .bs4 { grid-template-columns: repeat(4, 1fr); } }
.bcd { border: 1px solid var(--w16); overflow: hidden; background: #0b0b0b; }
.bcd img { width: 100%; transition: transform .8s var(--ease); }
.bcd:hover img { transform: scale(1.05); }
.bcap { padding: 1.1rem 1.15rem 1.25rem; }
.bcap b { display: block; font-size: 1rem; font-weight: 600; }
.bcap span { font-family: var(--fm); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wlab); }

/* ══ SERVICES — ledger rows ══ */
.sv {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.6rem; border-top: 1px solid var(--k16); flex-wrap: wrap;
  transition: padding-inline-start var(--dur);
}
.sv:last-of-type { border-bottom: 1px solid var(--k16); }
.sv:hover { padding-inline-start: 1rem; }
.sv b { font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.025em; }
.svr { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); flex-wrap: wrap; }
.svd { font-size: .875rem; color: var(--klab); max-width: 19rem; }
.svp { font-family: var(--fm); font-size: .75rem; color: var(--k64); text-transform: uppercase; }
.aw { color: var(--k16); font-size: 1.1rem; transition: color var(--dur), transform var(--dur); }
.sv:hover .aw, .ld:hover .aw { color: var(--gd); transform: translateX(6px); }
[dir="rtl"] .aw { transform: scaleX(-1); }
[dir="rtl"] .sv:hover .aw, [dir="rtl"] .ld:hover .aw { transform: scaleX(-1) translateX(6px); }

/* ══ BUNDLES — full-width ledger rows. NOT three cards. ══ */
.ld {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: 0 1.25rem; align-items: center;
  padding-block: 1.8rem; border-top: 1px solid var(--k16); transition: background var(--dur);
}
.ld:last-of-type { border-bottom: 1px solid var(--k16); }
.ld:hover { background: rgba(0, 0, 0, .04); }
.ldn { font-family: var(--fm); font-size: .75rem; color: var(--klab); }
.ld:hover .ldn { color: var(--gd); }
.ldb { display: grid; gap: .6rem; }
.ldt { font-size: 1.45rem; font-weight: 700; }
.ldi { font-family: var(--fm); font-size: .6875rem; color: var(--klab); text-transform: uppercase; line-height: 1.9; }
.ldp { display: flex; align-items: baseline; gap: 1.25rem; }
.ldp b { font-size: 1.2rem; font-weight: 700; }
@media (min-width: 940px) {
  .ldb { grid-template-columns: 2.6fr 4fr 1.8fr 2.4fr; align-items: center; gap: 1.25rem; }
  .ldp { justify-content: flex-end; }
}

/* ══ TESTIMONIALS ══ */
.qt { border-top: 1px solid var(--w16); padding-top: 1.75rem; }
.qt p { font-size: clamp(1.15rem, 2.1vw, 1.6rem); line-height: 1.42; letter-spacing: -.015em; margin: 0 0 1.75rem; font-weight: 500; }
[dir="rtl"] .qt p { letter-spacing: 0; line-height: 1.7; }
.qt cite { font-family: var(--fm); font-size: .6875rem; color: var(--wlab); font-style: normal; line-height: 1.9; display: block; }

/* ══ FAQ ══ */
details { border-bottom: 1px solid var(--w16); }
summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.5rem; font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: color var(--dur);
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--g); }
summary em { font-style: normal; font-size: 1.35rem; color: var(--wlab); transition: transform .34s var(--ease), color var(--dur); }
details[open] summary em { transform: rotate(45deg); color: var(--g); }
details p { margin: 0 0 1.5rem; font-size: .9375rem; color: var(--w64); max-width: 38rem; }

/* ══ FOOTER — AWJ structure ══ */
footer { border-top: 1px solid var(--w16); padding-block: clamp(3.5rem, 6vw, 5.5rem) 0; position: relative; overflow: hidden; }
.ftop { display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: start; }
@media (min-width: 960px) { .ftop { grid-template-columns: 1.1fr .9fr 1fr; gap: 2.5rem; } }
.fbig { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 900; letter-spacing: -.035em; line-height: .98; margin: 0 0 2rem; text-transform: uppercase; }
[dir="rtl"] .fbig { letter-spacing: 0; line-height: 1.24; }
.fbig em { font-style: normal; color: var(--g); }
.fbig-s { text-transform: none; margin-bottom: 1.5rem; }
.fmarks { display: flex; align-items: center; gap: 1.5rem; }
.fmarks img { height: 52px; width: auto; }
.fdash { width: 64px; height: 1px; background: var(--w24); }
.fest { font-family: var(--fm); font-size: .6875rem; letter-spacing: .16em; color: var(--wlab); line-height: 1.5; }
.fmid { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
@media (min-width: 960px) { .fmid { align-items: center; text-align: center; } }
.fmid img { height: 58px; width: auto; }
.fmail { font-size: 1.0625rem; color: var(--w92); border-bottom: 1px solid var(--w24); padding-bottom: .25rem; transition: color var(--dur), border-color var(--dur); }
.fmail:hover { color: var(--g); border-color: var(--g); }
.faddr { border-inline-start: 1px solid var(--w24); padding-inline-start: 1.5rem; }
.faddr p { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.75; color: var(--w92); }
.frow {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; align-items: center;
  padding-block: clamp(2.5rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.flinks { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.75rem); }
.flinks a { font-size: .9375rem; font-weight: 600; color: var(--w92); transition: color var(--dur); }
.flinks a:hover { color: var(--g); }
.fsite { font-size: .9375rem; font-weight: 700; color: var(--w92); letter-spacing: .02em; transition: color var(--dur); }
.fsite:hover { color: var(--g); }
.fmark { position: relative; height: clamp(90px, 14vw, 190px); overflow: hidden; display: grid; place-items: center; pointer-events: none; }
.fmark span {
  font-size: clamp(5rem, 20vw, 16rem); font-weight: 900; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); white-space: nowrap; transform: translateY(16%);
}

/* ══ SCROLL TO TOP — diamond ══ */
#top {
  position: fixed; inset-block-end: 2rem; inset-inline-end: 1.4rem; width: 46px; height: 46px;
  border: 1px solid var(--w40); transform: rotate(45deg) scale(.5); opacity: 0; visibility: hidden;
  z-index: 110; display: grid; place-items: center; transition: all var(--dur);
}
#top.sh { opacity: 1; visibility: visible; transform: rotate(45deg) scale(1); }
#top:hover { border-color: var(--g); background: var(--g); }
#top i { transform: rotate(-45deg); font-style: normal; font-size: .85rem; color: var(--w64); }
#top:hover i { color: #000; }

/* ══ GRID HELPERS ══ */
.c1-7, .c9-12, .c1-6, .c8-12, .c1-3, .c5-12, .c5-11, .c7-12 { grid-column: 1 / -1; }
.c7-8, .c9-10, .c11-12 { grid-column: span 6; }
.p4 { grid-column: span 6; }
@media (min-width: 780px) { .p4 { grid-column: span 3; } }
@media (min-width: 1000px) {
  .c1-7 { grid-column: 1 / 8; } .c9-12 { grid-column: 9 / 13; }
  .c1-6 { grid-column: 1 / 7; } .c8-12 { grid-column: 8 / 13; }
  .c1-3 { grid-column: 1 / 4; } .c5-12 { grid-column: 5 / 13; }
  .c5-11 { grid-column: 5 / 12; } .c7-12 { grid-column: 7 / 13; }
  .c7-8 { grid-column: 7 / 9; } .c9-10 { grid-column: 9 / 11; } .c11-12 { grid-column: 11 / 13; }
}
.mt3 { margin-top: 1.5rem; } .mt4 { margin-top: 2.5rem; } .mt5 { margin-top: 4rem; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES
   ═══════════════════════════════════════════════════════════════ */

/* ── Page intro (geekpeek pattern: label, giant head, meta rule) ── */
.pi { padding-block: clamp(10rem, 16vw, 15rem) clamp(3.5rem, 6vw, 5.5rem); }
.pi h1 { font-size: clamp(2.6rem, 8vw, 6.6rem); margin: 0 0 2rem; }
.pi .pisub { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--w64); max-width: 40rem; margin: 0; }
.pimeta {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center;
  border-top: 1px solid var(--w16); margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.5rem;
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wlab);
}
[dir="rtl"] .pimeta { letter-spacing: 0; }
.pimeta b { color: var(--g); font-weight: 500; }

/* ── Breadcrumb ── */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-family: var(--fm); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wlab); margin-bottom: 2rem;
}
[dir="rtl"] .crumb { letter-spacing: 0; }
.crumb a { color: var(--wlab); transition: color var(--dur); }
.crumb a:hover { color: var(--g); }
.crumb span { color: var(--wlab); }

/* ── Filter bar ── */
.fbar { border-top: 1px solid var(--w16); border-bottom: 1px solid var(--w16); padding-block: 1.5rem; }
.fgrp { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.35rem; padding-block: .55rem; }
.fgrp + .fgrp { border-top: 1px solid var(--w06); }
.flab {
  font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wlab); width: 6.5rem; flex: none;
}
[dir="rtl"] .flab { letter-spacing: 0; }
.fopt {
  font-family: var(--fm); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  color: var(--wlab); padding: .35rem 0; border-bottom: 2px solid transparent;
  transition: color var(--dur), border-color var(--dur);
}
[dir="rtl"] .fopt { letter-spacing: 0; }
.fopt:hover { color: var(--w92); }
.fopt.on { color: var(--g); border-bottom-color: var(--g); }
.fopt i { font-style: normal; color: var(--wlab); margin-inline-start: .35rem; font-size: .625rem; }
.fopt.on i { color: var(--g); opacity: .7; }

.fstate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem; font-family: var(--fm); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wlab);
}
[dir="rtl"] .fstate { letter-spacing: 0; }
.fstate b { color: var(--g); font-weight: 500; }
.fclear { color: var(--w64); border-bottom: 1px solid var(--w24); padding-bottom: .2rem; }
.fclear:hover { color: var(--g); border-color: var(--g); }

/* ── Empty state ── */
.empty { border: 1px solid var(--w16); padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem); text-align: center; }
.empty b { display: block; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 1rem; }
[dir="rtl"] .empty b { letter-spacing: 0; }
.empty p { margin: 0 auto 2rem; color: var(--w64); max-width: 32rem; font-size: .9375rem; }

/* ── Web archive grid — technical treatment ── */
.wgrid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--w16); border-block: 1px solid var(--w16); }
@media (min-width: 720px) { .wgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .wgrid { grid-template-columns: repeat(3, 1fr); } }
.wcard { position: relative; background: #0a0a0a; display: block; overflow: hidden; }
.wcard .shot { position: relative; aspect-ratio: 16/11; overflow: hidden; background: #101010; }
.wcard .shot img {
  width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top;
  filter: grayscale(1) brightness(.6); transition: filter .6s var(--ease), transform 5s linear;
}
.wcard:hover .shot img { filter: grayscale(0) brightness(.95); }
.wcard .wbody { padding: 1.5rem clamp(1.25rem, 2vw, 1.85rem) 1.85rem; }
.wcard .wn { font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; color: var(--g); display: block; margin-bottom: .75rem; }
[dir="rtl"] .wcard .wn { letter-spacing: 0; }
.wcard h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .65rem; }
[dir="rtl"] .wcard h3 { letter-spacing: 0; }
.wcard p { margin: 0 0 1.35rem; font-size: .875rem; color: var(--w64); }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  font-family: var(--fm); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wlab); border: 1px solid var(--w16); padding: .35rem .6rem;
}
[dir="rtl"] .tag { letter-spacing: 0; }
.tag.acc { color: var(--g); border-color: rgba(50, 233, 148, .45); }
.wcard::after {
  content: ''; position: absolute; inset: 0; border: 1px solid transparent;
  transition: border-color var(--dur); pointer-events: none;
}
.wcard:hover::after { border-color: var(--g); }

/* ── Branding archive — editorial, larger imagery, index numbers ── */
.bgrid { display: grid; grid-template-columns: 1fr; gap: clamp(3.5rem, 7vw, 7rem); }
@media (min-width: 900px) { .bgrid { grid-template-columns: repeat(2, 1fr); gap: clamp(4rem, 6vw, 7rem) 2px; } }
.bitem { position: relative; display: block; }
.bitem .bimg { position: relative; overflow: hidden; background: #0b0b0b; border: 1px solid var(--w16); aspect-ratio: 4/3; }
.bitem .bimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .6s var(--ease); filter: brightness(.82); }
.bitem:hover .bimg img { transform: scale(1.04); filter: brightness(1); }
.bidx {
  position: absolute; inset-block-start: -.35em; inset-inline-start: 0; z-index: 2;
  font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--w24); pointer-events: none;
}
.bitem:hover .bidx { -webkit-text-stroke-color: var(--g); }
.bbody { padding-top: 1.6rem; position: relative; }
.bbody h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .6rem; }
[dir="rtl"] .bbody h3 { letter-spacing: 0; }
.bbody p { margin: 0 0 1.35rem; font-size: .9375rem; color: var(--w64); max-width: 34rem; }

/* ── Single project — shared ── */
.phero { position: relative; margin-top: 92px; border-bottom: 1px solid var(--w16); }
.phero .full { width: 100%; max-height: 82vh; object-fit: cover; object-position: top; background: #0b0b0b; }
.pbleed { width: 100%; border-block: 1px solid var(--w16); background: #0b0b0b; }
.pbleed img { width: 100%; max-height: 78vh; object-fit: cover; object-position: center; }

.metabar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem;
  border-block: 1px solid var(--w16); padding-block: 2.25rem;
}
@media (min-width: 760px) { .metabar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .metabar { grid-template-columns: repeat(6, 1fr); } }
.metabar dt {
  font-family: var(--fm); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wlab); margin-bottom: .6rem;
}
[dir="rtl"] .metabar dt { letter-spacing: 0; }
.metabar dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--w92); }
.metabar dd a { color: var(--g); border-bottom: 1px solid rgba(50, 233, 148, .4); }
.metabar dd a:hover { border-bottom-color: var(--g); }

.prose { max-width: 40rem; }
.prose h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.025em; margin: 0 0 1rem; }
[dir="rtl"] .prose h3 { letter-spacing: 0; }
.prose p { color: var(--w64); font-size: 1rem; margin: 0 0 1.4rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--w92); font-weight: 600; }

.sblock { padding-block: clamp(4rem, 8vw, 8rem); }
.sblock + .sblock { border-top: 1px solid var(--w16); }

.slist { list-style: none; margin: 0; padding: 0; }
.slist li { display: flex; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--w16); font-size: .9375rem; color: var(--w64); }
.slist li::before { content: ''; width: 7px; height: 7px; background: var(--g); flex: none; margin-top: .5rem; }

.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .results { grid-template-columns: repeat(4, 1fr); } }
.res b { display: block; font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 900; letter-spacing: -.04em; line-height: .9; color: var(--g); font-variant-numeric: tabular-nums; }
.res span { display: block; margin-top: .9rem; font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wlab); }
[dir="rtl"] .res span { letter-spacing: 0; }

.gal { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 820px) { .gal { grid-template-columns: repeat(2, 1fr); } }
.gal figure { margin: 0; background: #0b0b0b; border: 1px solid var(--w16); }
.gal figure.wide { grid-column: 1 / -1; }
.gal figcaption {
  padding: 1rem 1.25rem; font-family: var(--fm); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wlab); border-top: 1px solid var(--w16);
}
[dir="rtl"] .gal figcaption { letter-spacing: 0; }

/* ── Brand specimen blocks ── */
.pal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 720px) { .pal { grid-template-columns: repeat(5, 1fr); } }
/* The colour field is the client's brand, whatever it is, so the label
   never sits on it — a mid-tone swatch cannot clear 4.5:1 against either
   black or white. It gets its own solid strip instead. */
.sw { aspect-ratio: 3/4; position: relative; display: flex; align-items: flex-end; border: 1px solid var(--w16); }
.sw .lbl {
  width: 100%; background: var(--ink); color: var(--w92); padding: .8rem .9rem;
  font-family: var(--fm); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7;
}
.sw .lbl i { font-style: normal; color: var(--wlab); display: block; }
[dir="rtl"] .sw .lbl { letter-spacing: 0; }

.spec { border: 1px solid var(--w16); padding: clamp(1.75rem, 3.5vw, 3rem); }
.spec + .spec { border-top: 0; }
.spec .sname { font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin-bottom: 1.25rem; }
[dir="rtl"] .spec .sname { letter-spacing: 0; }
.spec .sbig { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; margin: 0 0 1rem; }
[dir="rtl"] .spec .sbig { letter-spacing: 0; line-height: 1.25; }
.spec .sset { font-size: 1rem; color: var(--w64); margin: 0; }

/* ── Pager (prev / next project) ── */
.pager { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--w16); }
@media (min-width: 760px) { .pager { grid-template-columns: repeat(2, 1fr); } }
.pgr { padding: clamp(2.5rem, 5vw, 4.5rem) var(--gut); transition: background var(--dur); }
.pgr + .pgr { border-top: 1px solid var(--w16); }
@media (min-width: 760px) { .pgr + .pgr { border-top: 0; border-inline-start: 1px solid var(--w16); text-align: end; } }
.pgr:hover { background: var(--w06); }
.pgr span { font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wlab); display: block; margin-bottom: .9rem; }
[dir="rtl"] .pgr span { letter-spacing: 0; }
.pgr b { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
[dir="rtl"] .pgr b { letter-spacing: 0; }
.pgr:hover b { color: var(--g); }

/* ── Services page ── */
.srv { border-top: 1px solid var(--w16); padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.srv:last-of-type { border-bottom: 1px solid var(--w16); }
.srvh { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.srvh i { font-family: var(--fm); font-size: .75rem; font-style: normal; color: var(--g); }
.srvh h3 { font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; margin: 0; }
[dir="rtl"] .srvh h3 { letter-spacing: 0; }
.srvcols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) { .srvcols { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.srvcol h4 {
  font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wlab); margin: 0 0 1.1rem; font-weight: 500;
}
[dir="rtl"] .srvcol h4 { letter-spacing: 0; }
.srvcol p { margin: 0; font-size: .9375rem; color: var(--w64); }
.srvcol ul { list-style: none; margin: 0; padding: 0; }
.srvcol li { font-size: .9375rem; color: var(--w64); padding-block: .5rem; border-bottom: 1px solid var(--w06); }
.srvprice { font-size: 1.5rem; font-weight: 800; color: var(--g); letter-spacing: -.02em; }
[dir="rtl"] .srvprice { letter-spacing: 0; }
.srvnote { font-family: var(--fm); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wlab); margin-top: .75rem; display: block; }
[dir="rtl"] .srvnote { letter-spacing: 0; }

/* ── Bundles page ── */
.bnd { border-top: 1px solid var(--w16); padding-block: clamp(3rem, 6vw, 5rem); }
.bnd:last-of-type { border-bottom: 1px solid var(--w16); }
.bndtop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.bndtop .lhs { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.bndtop i { font-family: var(--fm); font-size: .75rem; font-style: normal; color: var(--g); }
.bndtop h3 { font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; margin: 0; }
[dir="rtl"] .bndtop h3 { letter-spacing: 0; }
.bndprice { text-align: end; }
.bndprice b { display: block; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; color: var(--g); letter-spacing: -.03em; }
[dir="rtl"] .bndprice b { letter-spacing: 0; }
.bndprice span { font-family: var(--fm); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wlab); }
[dir="rtl"] .bndprice span { letter-spacing: 0; }
.bndinc { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; }
@media (min-width: 760px) { .bndinc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bndinc { grid-template-columns: repeat(3, 1fr); } }
.bndinc div { display: flex; gap: .9rem; padding-block: .8rem; border-bottom: 1px solid var(--w06); font-size: .9375rem; color: var(--w64); }
.bndinc div::before { content: ''; width: 6px; height: 6px; background: var(--g); flex: none; margin-top: .55rem; }

/* ── Resume timeline — vertical, green markers ── */
.tl { position: relative; padding-inline-start: 2.25rem; }
.tl::before { content: ''; position: absolute; inset-block: .6rem 0; inset-inline-start: 5px; width: 1px; background: var(--w16); }
.tli { position: relative; padding-block: 0 clamp(2.5rem, 4vw, 3.5rem); }
.tli::before {
  content: ''; position: absolute; inset-block-start: .55rem; inset-inline-start: -2.25rem;
  width: 11px; height: 11px; background: var(--g); transform: rotate(45deg);
}
.tli .tly { font-family: var(--fm); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g); display: block; margin-bottom: .6rem; }
[dir="rtl"] .tli .tly { letter-spacing: 0; }
.tli h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
.tli .tlo { font-family: var(--fm); font-size: .75rem; color: var(--wlab); display: block; margin-bottom: .9rem; }
.tli p { margin: 0; font-size: .9375rem; color: var(--w64); max-width: 38rem; }

.skillrow { display: grid; grid-template-columns: 1fr; gap: 0; }
.sk { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid var(--w16); }
.sk b { font-size: 1rem; font-weight: 600; }
.sk span { font-family: var(--fm); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wlab); }
[dir="rtl"] .sk span { letter-spacing: 0; }

/* ── Forms ── */
.formtabs { display: flex; gap: 2px; border: 1px solid var(--w16); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ftab {
  flex: 1; padding: 1.4rem 1rem; text-align: center; font-family: var(--fm); font-weight: 700;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wlab);
  transition: background var(--dur), color var(--dur);
}
[dir="rtl"] .ftab { letter-spacing: 0; }
.ftab[aria-selected="true"] { background: var(--g); color: #000; }
.ftab:hover:not([aria-selected="true"]) { color: #fff; background: var(--w06); }

.form { display: grid; grid-template-columns: 1fr; gap: 0; }
.fld { display: flex; flex-direction: column; gap: .7rem; padding-block: 1.35rem; border-bottom: 1px solid var(--w16); }
@media (min-width: 880px) { .fld { flex-direction: row; align-items: flex-start; gap: 2.5rem; } }
.fld > label {
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wlab); flex: none; padding-top: .55rem;
}
@media (min-width: 880px) { .fld > label { width: 13rem; } }
[dir="rtl"] .fld > label { letter-spacing: 0; }
.fld > label em { font-style: normal; color: var(--g); }
.fctl { flex: 1; min-width: 0; }
.fctl input[type="text"], .fctl input[type="email"], .fctl input[type="url"], .fctl input[type="tel"],
.fctl select, .fctl textarea {
  width: 100%; background: transparent; border: 1px solid var(--w16); color: #fff;
  font-family: inherit; font-size: 1rem; padding: .95rem 1.1rem; border-radius: 0;
  transition: border-color var(--dur);
  -webkit-appearance: none; appearance: none;
}
.fctl select {
  background-image: linear-gradient(45deg, transparent 50%, var(--g) 50%), linear-gradient(135deg, var(--g) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
[dir="rtl"] .fctl select { background-position: 14px center, 20px center; }
.fctl select option { background: #0b0b0b; color: #fff; }
.fctl textarea { min-height: 9rem; resize: vertical; }
.fctl input:focus, .fctl select:focus, .fctl textarea:focus { border-color: var(--g); outline: none; }
.fctl input::placeholder, .fctl textarea::placeholder { color: var(--wlab); }
.fhint { display: block; margin-top: .6rem; font-size: .8125rem; color: var(--wlab); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; border: 1px solid var(--w16); padding: .7rem 1.1rem; cursor: pointer;
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--w64); transition: border-color var(--dur), color var(--dur), background var(--dur);
}
[dir="rtl"] .chip span { letter-spacing: 0; }
.chip input:checked + span { border-color: var(--g); color: var(--g); background: rgba(50, 233, 148, .08); }
.chip input:focus-visible + span { outline: 2px solid var(--g); outline-offset: 2px; }

.fsubmit { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; padding-top: 2.5rem; }
.fsubmit .note { font-family: var(--fm); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wlab); }
[dir="rtl"] .fsubmit .note { letter-spacing: 0; }

/* ── About page ── */
.abgrid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 980px) { .abgrid { grid-template-columns: 1.3fr 1fr; gap: clamp(3rem, 6vw, 6rem); } }
.abport { border: 1px solid var(--w16); background: radial-gradient(ellipse at 50% 38%, rgba(50, 233, 148, .14), transparent 62%), #080808; aspect-ratio: 4/5; display: grid; place-items: center; position: relative; overflow: hidden; }
.abport img { width: 58%; filter: drop-shadow(0 0 46px rgba(50, 233, 148, .32)); }
.beliefs { list-style: none; margin: 0; padding: 0; }
.beliefs li { display: flex; gap: 1.25rem; padding-block: 1.5rem; border-bottom: 1px solid var(--w16); }
.beliefs li i { font-family: var(--fm); font-size: .6875rem; font-style: normal; color: var(--g); flex: none; padding-top: .3rem; }
.beliefs li p { margin: 0; font-size: 1.0625rem; color: var(--w92); font-weight: 500; }
.beliefs li p small { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--w64); font-weight: 400; }

/* ── 404 ── */
.nf { min-height: 100svh; display: flex; align-items: center; padding-block: 8rem; }
.nf .big {
  font-size: clamp(6rem, 24vw, 20rem); font-weight: 900; line-height: .84; letter-spacing: -.06em;
  margin: 0 0 2rem; color: transparent; -webkit-text-stroke: 2px var(--g);
}
[dir="rtl"] .nf .big { letter-spacing: 0; }

/* ── Print (resume) ── */
@media print {
  #pre, #cr, #cdot, header, #mn, #top, footer .fmark, .ctas, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .tl::before { background: #999; }
  .tli::before { background: #000; }
  a { color: #000; }
}