/* ── Fonts (self-hosted, extracted from the source bundle) ───────────── */
/* Archivo italic */
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("assets/fonts/archivo-italic-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("assets/fonts/archivo-italic-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("assets/fonts/archivo-italic-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Archivo normal */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("assets/fonts/archivo-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("assets/fonts/archivo-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("assets/fonts/archivo-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Archivo Narrow */
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/archivo-narrow-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/archivo-narrow-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/archivo-narrow-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 400 */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-mono-400-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-mono-400-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-mono-400-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-mono-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-mono-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 500 */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-mono-500-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-mono-500-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-mono-500-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-mono-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-mono-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Base ────────────────────────────────────────────────────────────── */
:root {
  --night: #0B0203;
  --cream: #FBF3EA;
  --red: #FF2740;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--night); overflow-x: clip; }
body { font-family: Archivo, Helvetica, sans-serif; color: var(--cream); position: relative; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
::selection { background: var(--red); color: var(--night); }
h1, h2, h3, p { margin: 0; }
img { display: block; }

@keyframes irMarq  { from { transform: translateX(0) }    to { transform: translateX(-50%) } }
@keyframes irMarqR { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes irSpin  { from { transform: rotate(0) }        to { transform: rotate(360deg) } }
@keyframes irFloat { 0%,100% { transform: translateY(0) rotate(-8deg) } 50% { transform: translateY(-14px) rotate(-4deg) } }
@keyframes irPulse { 0%,100% { opacity: .35; transform: scale(1) } 50% { opacity: .75; transform: scale(1.14) } }

.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06; background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; }
.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--red); z-index: 70; width: 0%; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.mono { font-family: var(--mono); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 1000px; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 78% 10%, #6E0A14 0%, #2A0407 45%, #0B0203 100%); }
.hero-bg { position: absolute; inset: 0; z-index: 0; background-image: url("assets/img/hero-bg.jpg"); background-size: cover; background-position: center bottom; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,2,3,.42) 0%, rgba(11,2,3,.18) 42%, rgba(11,2,3,.88) 100%); }
.hero-orb { position: absolute; top: -6%; right: -4%; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, #FF2740 0%, rgba(255,39,64,0) 65%); filter: blur(20px); animation: irPulse 7s ease-in-out infinite; pointer-events: none; z-index: 1; }

.hero-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 26px 34px; }
.hero-header img { height: 36px; width: auto; }
.hero-nav { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hero-nav a { padding: 9px 16px; border: 1px solid rgba(251,243,234,.25); border-radius: 100px; transition: background .25s, color .25s, border-color .25s; }
.hero-nav a:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }
.hero-nav a.cta { background: var(--red); color: var(--night); font-weight: 600; border-color: var(--red); }
.hero-nav a.cta:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }

.hero-main { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 34px; }
.hero-title { margin: 10px 0 0; font-size: clamp(44px, 10vw, 150px); line-height: .82; font-weight: 900; font-stretch: 118%; letter-spacing: -.045em; text-transform: uppercase; }
.hero-title .line { display: block; }
.hero-title .line-noise { display: flex; align-items: center; gap: clamp(10px, 1.7vw, 24px); min-width: 0; }
.hero-title .noise { color: var(--red); font-style: italic; flex: 0 0 auto; }
.hero-title .stroke { display: block; -webkit-text-stroke: 2px var(--cream); color: transparent; }

.hero-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 44px; }
.hero-sub p { max-width: 380px; font-size: 15px; line-height: 1.55; color: rgba(251,243,234,.72); }
.hero-scroll { display: flex; align-items: center; gap: 18px; }
.hero-scroll .label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,243,234,.5); text-align: right; line-height: 1.6; }
.hero-scroll .dial { width: 64px; height: 64px; border-radius: 50%; border: 1px dashed rgba(251,243,234,.4); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--red); animation: irSpin 12s linear infinite; }

.hero-tags { position: relative; z-index: 10; padding: 0 34px 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-tags span { padding: 8px 16px; border-radius: 100px; background: rgba(251,243,234,.08); border: 1px solid rgba(251,243,234,.18); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.hero-tags span.hot { background: var(--red); border-color: var(--red); color: var(--night); font-weight: 600; }

/* ── Tickers ─────────────────────────────────────────────────────────── */
.ticker { padding: 14px 0; overflow: hidden; position: relative; z-index: 12; }
.ticker-red { background: var(--red); color: var(--night); transform: rotate(-1.6deg) scale(1.04); margin: -24px 0 -10px; }
.ticker-cream { background: var(--cream); color: var(--night); transform: rotate(1.4deg) scale(1.04); }
.ticker .track { display: flex; width: max-content; }
.ticker-red .track { animation: irMarq 22s linear infinite; }
.ticker-cream .track { animation: irMarqR 28s linear infinite; }
.ticker span { font-weight: 900; font-stretch: 118%; text-transform: uppercase; padding-right: 24px; white-space: nowrap; }
.ticker-red span { font-size: 26px; }
.ticker-cream span { font-size: 24px; }

/* ── Manifesto ───────────────────────────────────────────────────────── */
.manifesto { background: var(--cream); color: var(--night); padding: 130px 34px 110px; position: relative; overflow: hidden; }
.manifesto-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); min-width: 0; gap: 60px; align-items: start; }
.manifesto h2 { margin: 18px 0 0; font-size: clamp(34px, 4.8vw, 74px); line-height: .92; font-weight: 900; font-stretch: 112%; letter-spacing: -.04em; text-transform: uppercase; }
.manifesto h2 .accent { color: var(--red); font-style: italic; }
.manifesto .blurb { margin: 28px 0 0; max-width: 480px; font-size: 15px; line-height: 1.65; color: rgba(11,2,3,.72); }
.stats { display: flex; gap: 44px; margin-top: 44px; }
.stats .num { font-size: clamp(32px, 3.8vw, 56px); font-weight: 900; font-stretch: 110%; letter-spacing: -.04em; line-height: 1; }
.stats .cap { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(11,2,3,.55); }
.collage { position: relative; height: 520px; }
.collage .photo { position: absolute; box-shadow: 0 30px 60px rgba(11,2,3,.22); border-radius: 10px; overflow: hidden; }
.collage .photo img { width: 100%; height: 100%; object-fit: cover; }
.collage .photo-1 { top: 0; right: 0; width: 280px; height: 340px; transform: rotate(4deg); }
.collage .photo-2 { bottom: 20px; left: 0; width: 250px; height: 300px; transform: rotate(-6deg); }
.collage .badge { position: absolute; bottom: 70px; right: 26px; width: 96px; height: 96px; border-radius: 50%; background: var(--red); color: var(--cream); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; animation: irFloat 6s ease-in-out infinite; }

/* ── Services ────────────────────────────────────────────────────────── */
.services { background: var(--night); padding: 120px 34px 130px; }
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.services-head h2 { font-size: clamp(36px, 5.2vw, 80px); line-height: .9; font-weight: 900; font-stretch: 112%; letter-spacing: -.04em; text-transform: uppercase; }
.svc-list { margin-top: 56px; border-top: 1px solid rgba(251,243,234,.18); }
.svc-row { border-bottom: 1px solid rgba(251,243,234,.18); padding: 26px 8px; display: grid; grid-template-columns: 70px minmax(0,1fr) minmax(0,300px) 40px; gap: 24px; align-items: center; cursor: pointer; transition: background .3s, padding .3s; }
.svc-row:hover, .svc-row.active { background: var(--red); padding-left: 22px; }
.svc-row .num { font-family: var(--mono); font-size: 11px; color: rgba(251,243,234,.5); }
.svc-row h3 { font-size: clamp(24px, 3vw, 44px); line-height: 1; font-weight: 800; font-stretch: 110%; letter-spacing: -.03em; text-transform: uppercase; }
.svc-row .desc { font-size: 12.5px; line-height: 1.6; color: rgba(251,243,234,.65); }
.svc-row .arrow { font-size: 22px; justify-self: end; }
.svc-peek { margin-top: 26px; height: 0; overflow: hidden; border-radius: 16px; transition: height .45s cubic-bezier(.2,.8,.2,1); }
.svc-peek.open { height: 300px; }
.svc-peek-inner { position: relative; height: 300px; }
.svc-peek-inner img { width: 100%; height: 100%; object-fit: cover; }
.svc-peek-title { position: absolute; left: 22px; bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; background: var(--red); color: var(--night); padding: 7px 14px; border-radius: 100px; pointer-events: none; }

/* ── Work ────────────────────────────────────────────────────────────── */
.work { background: var(--night); padding: 120px 34px; }
.work-inner { max-width: 1200px; margin: 0 auto; }
.work-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
.work-grid img { width: 100%; height: 100%; object-fit: cover; }
.w-main { grid-column: span 4; height: 420px; border-radius: 16px; overflow: hidden; position: relative; }
.w-side { grid-column: span 2; display: flex; flex-direction: column; gap: 18px; }
.w-side .w-img { flex: 1; border-radius: 16px; overflow: hidden; min-height: 0; }
.w-card { background: var(--red); color: var(--night); border-radius: 16px; padding: 22px; }
.w-card .big { font-size: clamp(26px, 2.6vw, 40px); font-weight: 900; font-stretch: 112%; letter-spacing: -.03em; line-height: 1; }
.w-card p { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.w-small { grid-column: span 2; height: 300px; border-radius: 16px; overflow: hidden; }

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact { background: var(--red); color: var(--night); padding: 120px 34px; position: relative; overflow: hidden; }
.contact-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.contact .eyebrow { color: var(--night); }
.contact h2 { margin: 16px 0 0; font-size: clamp(48px, 11vw, 170px); line-height: .82; font-weight: 900; font-stretch: 120%; letter-spacing: -.05em; text-transform: uppercase; }
.contact h2 .it { font-style: italic; }
.contact-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 44px; padding: 22px 40px; border-radius: 100px; background: var(--night); color: var(--cream); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; transition: background .25s, color .25s; }
.contact-cta:hover { background: var(--cream); color: var(--night); }
.contact-links { margin-top: 56px; display: flex; justify-content: center; gap: 40px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; flex-wrap: wrap; }
.contact-links a:hover { color: var(--cream); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer { background: var(--night); padding: 40px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer img { height: 28px; width: auto; }
.footer span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,243,234,.45); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { min-height: 100svh; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 50px; }
  .collage { height: 440px; max-width: 480px; }
  .w-main { grid-column: span 6; height: 320px; }
  .w-side { grid-column: span 6; }
  .w-side .w-img { min-height: 260px; }
  .w-small { grid-column: span 3; height: 240px; }
}
@media (max-width: 700px) {
  .hero-header, .hero-main, .hero-tags, .manifesto, .services, .work, .contact, .footer { padding-left: 20px; padding-right: 20px; }
  .hero-sub { flex-direction: column; align-items: flex-start; gap: 28px; margin-top: 34px; }
  .svc-row { grid-template-columns: 40px minmax(0,1fr) 28px; grid-template-areas: "num title arrow" "num desc arrow"; row-gap: 10px; }
  .svc-row .num { grid-area: num; }
  .svc-row h3 { grid-area: title; }
  .svc-row .desc { grid-area: desc; }
  .svc-row .arrow { grid-area: arrow; }
  .w-small { grid-column: span 6; height: 240px; }
  .stats { gap: 28px; flex-wrap: wrap; }
  .collage { height: 400px; }
  .collage .photo-1 { width: 220px; height: 270px; }
  .collage .photo-2 { width: 200px; height: 240px; }
  .contact-links { gap: 18px; }
  .footer { flex-direction: column; gap: 14px; }
}
@media (max-width: 380px) {
  .hero-header { flex-direction: column; gap: 14px; }
  .stats .num { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker .track, .hero-orb, .hero-scroll .dial, .collage .badge { animation: none; }
  .svc-peek { transition: none; }
  html { scroll-behavior: auto; }
}