*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --red: #D41414;
  --text: #0D0D0D;
  --base: #F5F0EC;
  --section-pad-y: clamp(4rem, 8vw, 10rem);
  --section-pad-x: clamp(1rem, 2vw, 3rem);
}

/* === SCROLLBAR ================================================ */
::-webkit-scrollbar { width: 5px; border-radius: 0; }
::-webkit-scrollbar-track { background: var(--text); border-radius: 0; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--base); border-radius: 0; }

* { scrollbar-width: thin; scrollbar-color: var(--red) var(--text); }

/* === SELECTION ================================================ */
::selection { background: var(--red); color: var(--base); }
::-moz-selection { background: var(--red); color: var(--base); }

@font-face { font-family: 'Base'; src: url('fonts/f1.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Base-Bold'; src: url('fonts/t6.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Heading'; src: url('fonts/heading.woff2') format('woff2'); font-weight: 400; font-style: normal; }

html, body {
  margin: 0;
  min-height: 100%;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--red);
  color: var(--text);
  font-family: 'Base', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.has-cursor,
body.has-cursor * { cursor: none !important; }

.main-container{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
}

.main-container .hero-container{
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  width: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: clamp(0.75rem, 1.6vw, 1.5rem);
  align-items: stretch;
  padding: clamp(1.5rem, 3vw, 2.5rem) 2rem 1.5rem;
}

.main-container .hero-container .hero-image{
  width: 100%;
  overflow: visible;
  min-width: 0;
  will-change: clip-path, transform;
  min-height: 0;
  align-self: end;
  padding-top: clamp(0.6rem, 1.2vw, 1rem);
  border-top: 2px solid var(--text);
}

.main-container .hero-container .hero-heading {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.main-container .hero-container .hero-heading .social-icons{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 40px;
  list-style-type: none;
  align-items: center;
  width: min(280px, 70vw);
}
.main-container .hero-container .hero-heading .social-icons li{
  height: auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.2rem;
  max-height: 40px;
  max-width: 40px;
  background: var(--text);
  margin-left: 0;
  will-change: transform;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.main-container .hero-container .hero-heading .social-icons li:nth-first-child{
  margin-left: 0px;
}

.main-container .hero-container .hero-heading .social-icons:hover li{ transform: translateY(-2px); }

.main-container .hero-container .hero-heading .social-icons li svg{
  fill: var(--red);
}
.main-container .hero-container .hero-heading .social-icons li a{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.main-container .hero-container .hero-heading .sub-text{
  font-family: 'heading';
  font-size: clamp(2.4rem, 7vw, 9rem);
  color: var(--text);
  line-height: 0.85;
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 0.8rem;
  text-transform: uppercase;
}

.main-container .hero-container .hero-heading .sub-text p {
  display: inline-block;
  white-space: nowrap;
}

.main-container .hero-container .hero-heading .sub-text .char {
  display: inline-block;
  will-change: transform, opacity;
}

.main-container .hero-container .hero-heading .hero-image{
  height: 100%;
  width: 100%;
}

.main-container .hero-container .hero-image svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  will-change: clip-path;
}

.main-container .hero-container .hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.main-container .hero-container .hero-heading img,
.main-container .hero-container .hero-heading svg {
  display: block;
  width: 100%;
  height: auto;
}

.main-container .hero-container .hero-heading .user-image{
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  background:
    repeating-linear-gradient(45deg, var(--base) 0 10px, var(--red) 10px 20px);
  flex: 0 0 auto;
  min-width: 0;
}

.main-container .hero-container .hero-heading .sub-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  width: 100%;
  height: auto;
  padding: 0;
  align-items: end;
  gap: clamp(1rem, 2vw, 2rem);
}

/* === GLOBAL CURSOR ============================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--base);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 44px; height: 44px;
  border: 1.5px solid var(--base);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Base', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--base);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cursor-ring.is-hover { width: 70px; height: 70px; }
.cursor-ring.is-view { width: 96px; height: 96px; background: var(--base); color: var(--text); }
.cursor-ring.is-image { width: 84px; height: 84px; background: var(--base); color: var(--text); }
.cursor-ring.is-mail { width: 88px; height: 88px; background: var(--base); color: var(--text); }
.cursor-ring.is-plus { width: 56px; height: 56px; }
.cursor-ring.is-down { transform: translate(-50%, -50%) scale(0.85); }

/* === NAV TOGGLE (fixed top-left) ============================= */
.nav-toggle-wrap {
  position: fixed;
  top: 32px; left: 32px;
  z-index: 201;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--base);
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}


.nav-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.ntw-close { display: none; }
.nav-is-open .ntw-open { display: none; }
.nav-is-open .ntw-close { display: inline; }

/* === NAV OVERLAY (full-page) ================================= */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s cubic-bezier(0.77, 0, 0.18, 1);
}
.nav-overlay.is-open {
  pointer-events: all;
  clip-path: inset(0 0 0% 0);
}

.nav-overlay-bg {
  position: absolute;
  inset: 0;
  background: var(--text);
}

.nav-links-full {
  list-style: none;
  text-align: center;
  position: relative;
  z-index: 2;
}

.nfl-item {
  overflow: hidden;
}

.nav-link-big {
  display: block;
  text-decoration: none;
  color: var(--base);
  font-family: 'Heading';
  font-size: clamp(3.5rem, 9vw, 11rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 0.08em 0;
  position: relative;
  overflow: hidden;
}

.nlb-text {
  position: relative;
  z-index: 1;
  display: block;
  transition: color 0.25s ease;
}
.nav-link-big:hover .nlb-text { color: var(--red); }

.nlb-strip {
  position: absolute;
  inset: 0;
  background: var(--base);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
  pointer-events: none;
}

/* sub-marquee strip following cursor */
.nav-sub-strip {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: clamp(2.5rem, 4vw, 4rem);
  overflow: hidden;
  z-index: 3;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.3s cubic-bezier(0.77, 0, 0.18, 1);
  background: var(--red);
  pointer-events: none;
  will-change: transform;
}
.nav-sub-strip.is-active { clip-path: inset(0 0% 0 0%); }

.nav-sub-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'Heading';
  font-size: clamp(1.2rem, 2.5vw, 2.8rem);
  line-height: 1;
  color: var(--text);
  padding: 0.35em 0;
  will-change: transform;
}

.nav-overlay-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(245,240,236,0.2);
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--base);
  opacity: 0.65;
  z-index: 2;
}

/* legacy .nav-time used in footer */
.nav-time { font-variant-numeric: tabular-nums; }

/* === WIPE STRIP (applied by JS to each reveal target) ========= */
.reveal-strip {
  position: absolute;
  inset: -4% 0;
  transform-origin: right center;
  pointer-events: none;
  z-index: 10;
}

/* === SECTION SHELL ============================================ */
.section {
  width: 100%;
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--red);
  color: var(--text);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--text);
}
.section--dark { background: var(--text); color: var(--base); border-top-color: var(--base); }
.section--base { background: var(--base); color: var(--text); border-top-color: var(--text); }

.section-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid currentColor;
}
.section--dark .section-bar { border-color: var(--base); }
.section--base .section-bar { border-color: var(--text); }

.reveal-head {
  font-family: 'Heading';
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.reveal-head .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* === ABOUT ==================================================== */
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.about-title { grid-column: 1 / 13; }
.about-title--alt {
  grid-column: 1 / 13;
  padding-left: clamp(0px, 18vw, 22rem);
  color: var(--red);
}
.section--dark .about-title--alt { color: var(--red); }
.about-photo {
  grid-column: 1 / 5;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, var(--red) 0%, var(--red) 100%),
    repeating-linear-gradient(45deg, #1a1a1a 0 4px, transparent 4px 12px);
  background-blend-mode: multiply;
  position: relative;
  margin-top: clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  outline: 1px solid var(--base);
  outline-offset: -1px;
}
.about-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(245,240,236,0.05) 0 8px, transparent 8px 24px);
}
.photo-tag {
  position: absolute;
  bottom: 0.75rem; left: 0.75rem;
  font-family: 'Base', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--base);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--base);
}
.about-copy {
  grid-column: 6 / 13;
  margin-top: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  line-height: 1.4;
  max-width: 60ch;
}
.about-lede {
  font-size: clamp(1.4rem, 2.4vw, 2.6rem);
  line-height: 1.15;
  font-family: 'Heading';
  text-transform: uppercase;
}
.about-stats {
  grid-column: 6 / 13;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin-top: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid currentColor;
}
.section--dark .about-stats { border-top-color: var(--base); }
.about-stats li {
  padding: 1.25rem 0.75rem;
  border-right: 1px solid currentColor;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.section--dark .about-stats li { border-right-color: var(--base); }
.about-stats li:last-child { border-right: none; }
.about-stats strong {
  font-family: 'Heading';
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}
.about-stats span {
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* === WORKS ==================================================== */
.works-title { margin-bottom: clamp(2rem, 4vw, 3rem); }

.domain {
  margin-top: clamp(3rem, 6vw, 6rem);
}
.domain-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid currentColor;
  text-transform: uppercase;
}
.domain-num {
  font-family: 'Heading';
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--text);
}
.domain-name {
  font-family: 'Heading';
  font-size: clamp(1.2rem, 2.4vw, 2.2rem);
  letter-spacing: 0.005em;
  line-height: 1;
  align-self: end;
  padding-bottom: 0.4rem;
}
.domain-count {
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  align-self: end;
  padding-bottom: 0.6rem;
  opacity: 0.75;
}

/* Work card base */
.work-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.work-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--text);
  position: relative;
  overflow: hidden;
  outline: 1px solid var(--text);
  outline-offset: -1px;
  transition: transform 0.5s ease;
}
.work-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(245,240,236,0.06) 0 6px, transparent 6px 18px);
  pointer-events: none;
}
.work-card:hover .work-thumb { transform: scale(1.02); }
.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.25rem;
  border-top: 1px solid currentColor;
  gap: 0.5rem;
}
.work-name {
  font-family: 'Heading';
  font-size: clamp(1.1rem, 1.8vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
.work-type {
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  white-space: nowrap;
}

/* === 3D WEB GRID ============================================= */
.grid-3d {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.5vw, 2rem);
  grid-auto-flow: dense;
}
.grid-3d .hero-card { grid-column: span 8; }
.grid-3d .hero-card .work-thumb { aspect-ratio: 16 / 11; }
.grid-3d .tall-card { grid-column: span 4; grid-row: span 2; }
.grid-3d .tall-card .work-thumb { aspect-ratio: 3 / 5; flex: 1; }
.grid-3d .tall-card { display: flex; flex-direction: column; gap: 0.75rem; }
.grid-3d .work-card:not(.hero-card):not(.tall-card) { grid-column: span 4; }
.grid-3d .work-card:not(.hero-card):not(.tall-card) .work-thumb { aspect-ratio: 4 / 3; }

/* 3D thumb gradients — dark, tech-feel */
.thumb-3d-a { background: linear-gradient(135deg, #0D0D0D 0%, #2a0606 100%); }
.thumb-3d-b { background: linear-gradient(160deg, #0D0D0D 0%, #1a2030 100%); }
.thumb-3d-c { background: linear-gradient(135deg, #0D0D0D 0%, #1a1a1a 100%); }
.thumb-3d-d { background: linear-gradient(135deg, #0D0D0D 0%, #5a0a0a 50%, #0D0D0D 100%); }
.thumb-3d-e { background: linear-gradient(135deg, #0D0D0D 0%, #D41414 100%); }

/* === UI/UX GRID ============================================== */
.grid-uiux {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.5vw, 2rem);
  grid-auto-flow: dense;
}
.grid-uiux .laptop-card { grid-column: span 8; }
.grid-uiux .laptop-card .work-thumb { aspect-ratio: 16 / 9; }
.grid-uiux .phone-card { grid-column: span 4; }
.grid-uiux .phone-card .work-thumb { aspect-ratio: 9 / 14; }
.grid-uiux .tablet-card { grid-column: span 4; }
.grid-uiux .tablet-card .work-thumb { aspect-ratio: 4 / 3; }
.grid-uiux .work-thumb {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* UI/UX thumb gradients — cleaner, brighter */
.thumb-ui-a { background: linear-gradient(135deg, #F5F0EC 0%, #d9cfc4 100%); outline-color: var(--text) !important; }
.thumb-ui-b { background: linear-gradient(160deg, #0D0D0D 0%, #2a0606 100%); }
.thumb-ui-c { background: linear-gradient(135deg, #F5F0EC 0%, #b8a999 100%); outline-color: var(--text) !important; }
.thumb-ui-d { background: linear-gradient(135deg, #0D0D0D 0%, #4a0a0a 100%); }
.thumb-ui-e { background: linear-gradient(135deg, #F5F0EC 0%, #a4988a 100%); outline-color: var(--text) !important; }

/* === GRAPHICS — POSTER WALL ================================== */
.poster-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2vw, 2.5rem);
  grid-auto-flow: dense;
}
.poster-tall { grid-column: span 4; }
.poster-wide { grid-column: span 8; }
.poster-sq { grid-column: span 4; }
.poster-frame {
  background: var(--base);
  padding: clamp(0.65rem, 1vw, 1rem);
  border: 1px solid var(--text);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.poster-frame::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  background: var(--text);
  z-index: 2;
}
.poster-frame .work-thumb {
  outline: 1px solid var(--text);
  outline-offset: 0;
}
.poster:hover .poster-frame { transform: translateY(-6px); }
.poster-tall .poster-frame .work-thumb { aspect-ratio: 2 / 3; }
.poster-wide .poster-frame .work-thumb { aspect-ratio: 16 / 10; }
.poster-sq .poster-frame .work-thumb { aspect-ratio: 1 / 1; }

/* Graphics thumbs — bold flat color blocks */
.thumb-g-a { background: linear-gradient(180deg, #D41414 50%, #0D0D0D 50%); }
.thumb-g-b { background: linear-gradient(90deg, #0D0D0D 33%, #F5F0EC 33%, #F5F0EC 66%, #D41414 66%); }
.thumb-g-c { background: linear-gradient(45deg, #D41414 0%, #0D0D0D 100%); }
.thumb-g-d { background: linear-gradient(135deg, #F5F0EC 0%, #D41414 100%); }
.thumb-g-e { background: #0D0D0D; }
.thumb-g-f { background: linear-gradient(180deg, #F5F0EC 0%, #D41414 100%); }

/* === PHOTOGRAPHY — CONTACT SHEET ============================= */
.photo-suite {
  background: var(--text);
  color: var(--base);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border: 1px solid var(--text);
  position: relative;
  outline: 1px solid var(--text);
  outline-offset: 8px;
}
.photo-suite::before,
.photo-suite::after {
  content: '';
  position: absolute;
  left: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  height: 0.55rem;
  background-image: repeating-linear-gradient(90deg,
    var(--base) 0 0.55rem,
    transparent 0.55rem 1.3rem);
}
.photo-suite::before { top: 0.45rem; }
.photo-suite::after { bottom: 0.45rem; }
.photo-suite-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  padding: 0.75rem 0 clamp(1rem, 1.5vw, 1.5rem);
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
  border-bottom: 1px dashed rgba(245,240,236,0.3);
}
.photo-feature {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  position: relative;
}
.photo-feature .frame-num {
  position: absolute;
  top: -0.5rem; right: 0;
  font-family: 'Base', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.7;
  background: var(--text);
  padding: 0 0.5rem;
  z-index: 2;
}
.photo-feature .work-thumb {
  aspect-ratio: 16 / 9;
  outline-color: var(--base);
}
.photo-feature-meta {
  border-top-color: rgba(245,240,236,0.4) !important;
}
.photo-feature-meta .work-name {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}
.photo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 1vw, 1rem);
}
.negative {
  background: var(--base);
  color: var(--text);
  padding: 0.6rem 0.6rem 0.7rem;
  position: relative;
  gap: 0.5rem !important;
}
.negative .work-thumb {
  aspect-ratio: 3 / 4;
  outline: 1px solid var(--text);
  outline-offset: 0;
}
.negative .frame-num {
  position: absolute;
  top: 0.25rem; right: 0.5rem;
  font-family: 'Base', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 0.6;
  z-index: 2;
}
.negative .work-meta {
  border-top: 1px solid rgba(13,13,13,0.25);
  padding-top: 0.4rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.negative .work-name {
  font-size: 0.78rem;
  line-height: 1;
}
.negative .work-type {
  font-size: 9px;
  letter-spacing: 0.16em;
}

/* Photo thumbs — moody monochrome */
.thumb-p-a { background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%); }
.thumb-p-b { background: linear-gradient(160deg, #6a6a6a 0%, #1a1a1a 100%); }
.thumb-p-c { background: linear-gradient(135deg, #786857 0%, #2a1d1d 100%); }
.thumb-p-d { background: linear-gradient(135deg, #b8a989 0%, #4a3a2a 100%); }
.thumb-p-e { background: linear-gradient(135deg, #c4b59a 0%, #785a3a 100%); }
.thumb-p-f { background: linear-gradient(135deg, #3a3a3a 0%, #0a0a0a 100%); }

/* === ART + DIRECTION — HAND DRAWN =========================== */
.art-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2vw, 2.5rem);
  grid-auto-flow: dense;
}
.art-card { grid-column: span 4; }
.art-card--wide { grid-column: span 7; }
.art-card--tall { grid-column: span 5; grid-row: span 2; }
.art-card--sq { grid-column: span 3; }

.art-frame {
  background: var(--base);
  padding: clamp(0.6rem, 1vw, 1.2rem);
  border: 1px solid var(--text);
  position: relative;
  transition: transform 0.4s ease;
}
.art-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(13,13,13,0.15);
  pointer-events: none;
}
.art-frame .work-thumb {
  outline: 1px solid var(--text);
  outline-offset: 0;
  background: var(--base);
  transition: transform 0.5s ease;
}
.art-card:hover .art-frame { transform: translateY(-4px); }
.art-card:hover .work-thumb { transform: scale(1.01); }

.art-card .work-thumb { aspect-ratio: 4 / 5; }
.art-card--wide .work-thumb { aspect-ratio: 16 / 10; }
.art-card--tall .work-thumb { aspect-ratio: 3 / 5; }
.art-card--sq .work-thumb { aspect-ratio: 1 / 1; }

.art-frame .work-thumb::after {
  background: repeating-linear-gradient(135deg, rgba(13,13,13,0.08) 0 2px, transparent 2px 7px),
              linear-gradient(180deg, rgba(245,240,236,0.3), rgba(245,240,236,0));
  opacity: 0.6;
}

.art-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.art-meta .work-type {
  white-space: normal;
}

/* Artworks thumbs */
.thumb-art-a { background: linear-gradient(135deg, #F5F0EC 0%, #e2d7ca 100%); }
.thumb-art-b { background: linear-gradient(160deg, #4a3a2a 0%, #1a1512 100%); }
.thumb-art-c { background: linear-gradient(135deg, #1a1a1a 0%, #0D0D0D 100%); }
.thumb-art-d { background: linear-gradient(135deg, #b8a989 0%, #786857 100%); }
.thumb-art-e { background: linear-gradient(135deg, #D41414 0%, #0D0D0D 100%); }
.thumb-art-f { background: linear-gradient(135deg, #F5F0EC 0%, #c4b59a 100%); }
.thumb-art-g { background: linear-gradient(135deg, #3a3a3a 0%, #0a0a0a 100%); }
.thumb-art-h { background: linear-gradient(135deg, #F5F0EC 0%, #D41414 100%); }

/* === SKILLS =================================================== */
.section--base .section-bar--invert { color: var(--text); border-color: var(--text); }
.marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  padding: clamp(1rem, 1.5vw, 1.75rem) 0;
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'Heading';
  font-size: clamp(2.5rem, 7vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  will-change: transform;
}
.marquee-track span { padding-right: clamp(1.5rem, 3vw, 4rem); }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--text);
  border-left: 1px solid var(--text);
}
.skill-block {
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border-right: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  background: var(--base);
  transition: background 0.35s ease, color 0.35s ease;
  min-height: clamp(220px, 24vw, 320px);
}
.skill-block:hover { background: var(--red); color: var(--text); }
.skill-num {
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.75;
}
.skill-block h3 {
  font-family: 'Heading';
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.skill-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: auto;
  font-family: 'Base', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* === SERVICES ================================================= */
.services-title {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
/* === SERVICES ================================================= */
.services-list {
  list-style: none;
  border-top: 1px solid currentColor;
}

.service-row {
  position: relative;
  height: clamp(5.5rem, 8vw, 9.5rem);
  overflow: hidden;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

/* shared layer base */
.sr-front,
.sr-back {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 0 1rem;
  padding: 0 clamp(0.5rem, 1vw, 1.5rem);
}

/* back layer — clip-path controlled entirely by GSAP */
.sr-back {
  background: var(--red);
  color: var(--text);
}

.service-num {
  font-family: 'Base', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  opacity: 0.75;
  grid-column: 1;
}

.service-name {
  font-family: 'Heading';
  font-size: clamp(1.6rem, 4vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  grid-column: 2;
}

.service-desc {
  font-family: 'Base';
  font-size: clamp(0.8rem, 1vw, 1rem);
  line-height: 1.4;
  grid-column: 3;
  opacity: 0.9;
  padding-right: 0.5rem;
}

/* === PROJECT HOVER STRIP ===================================== */
.project-hover-strip {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: clamp(2.5rem, 4vw, 4rem);
  overflow: hidden;
  z-index: 9000;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.35s cubic-bezier(0.77, 0, 0.18, 1);
  background: var(--text);
  pointer-events: none;
  will-change: transform;
}
.project-hover-strip.is-active { clip-path: inset(0 0% 0 0%); }

.project-hover-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'Heading';
  font-size: clamp(1.2rem, 2.5vw, 2.8rem);
  line-height: 1;
  color: var(--base);
  padding: 0.35em 0;
  will-change: transform;
}

@media (hover: none), (max-width: 900px) {
  .project-hover-strip,
  .nav-sub-strip { display: none; }
}

/* === WORKED WITH ============================================== */
.worked-title { margin-bottom: clamp(2rem, 4vw, 3rem); }
.worked-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--text);
  border-left: 1px solid var(--text);
}
.worked-grid li {
  border-right: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  padding: clamp(1.25rem, 2vw, 2rem) 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Heading';
  font-size: clamp(1rem, 1.6vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease;
  min-height: clamp(100px, 10vw, 160px);
}
.worked-grid li::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: translateY(101%);
  transition: transform 0.4s ease;
  z-index: 0;
}
.worked-grid li span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.worked-grid li:hover { color: var(--base); }
.worked-grid li:hover::before { transform: translateY(0); }
.worked-sub {
  font-family: 'Base', monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.65;
  text-transform: uppercase;
}

/* === CONTACT ================================================== */
.contact-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--base);
  border-bottom: 1px solid var(--base);
  padding: 0.75rem 0;
  margin-bottom: clamp(2rem, 5vw, 5rem);
}
.contact-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'Heading';
  font-size: clamp(3rem, 10vw, 12rem);
  line-height: 0.9;
  color: var(--red);
  text-transform: uppercase;
  will-change: transform;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.contact-cta { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-prefix,
.contact-or {
  font-family: 'Base', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.contact-mail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
  font-family: 'Heading';
  font-size: clamp(2rem, 5.5vw, 6rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  padding: clamp(1rem, 2vw, 2rem) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  position: relative;
  overflow: hidden;
}
.contact-mail .char {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.7,0,0.3,1);
}
.contact-mail:hover .char { transform: translateY(-6px); }
.contact-arrow {
  font-family: 'Heading';
  transition: transform 0.4s ease;
}
.contact-mail:hover .contact-arrow { transform: translate(6px, -6px) rotate(0deg); }

.contact-links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid currentColor;
}
.contact-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  font-family: 'Base', monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  transition: padding-left 0.3s ease, color 0.3s ease;
}
.contact-links a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 0;
  background: var(--red);
  z-index: -1;
  transition: width 0.4s ease;
}
.contact-links a:hover { padding-left: 1rem; color: var(--red); }

.site-foot {
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* === HERO MOBILE (existing) =================================== */
@media (max-width: 768px) {
  .main-container .hero-container {
    min-height: 100vh;
    height: 100vh;
    min-height: 100svh;
    height: 100svh;
    padding: 4rem 1.25rem 1.25rem;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 1rem;
    align-items: stretch;
  }

  .main-container .hero-container .hero-heading .sub-hero {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .main-container .hero-container .hero-heading .sub-text {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-width: 0;
    font-size: clamp(2.3rem, 12vw, 5.6rem);
    grid-row: 2;
  }

  .main-container .hero-container .hero-heading .sub-text p {
    width: 100%;
    display: block;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .main-container .hero-container .hero-heading .social-icons {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .main-container .hero-container .hero-heading .social-icons li {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1 !important;
    margin-left: 0;
    padding: 0.2rem;
  }

  .main-container .hero-container .hero-heading .social-icons:hover li { transform: none; }

  .main-container .hero-container .hero-image {
    margin: 0;
    min-width: 0;
  }

  .main-container .hero-container .hero-heading .user-image {
    width: 100%;
    height: 100%;
    align-self: end;
    justify-self: end;
    grid-row: 1;
  }
}

/* === NEW SECTIONS MOBILE ====================================== */
@media (max-width: 900px) {
  .nav-toggle-wrap { font-size: 10px; gap: 0.6rem; padding: 0.7rem 0.85rem; }
  .nav-link-big { font-size: clamp(2.8rem, 13vw, 7rem); }
  .nav-overlay-foot { font-size: 9px; }

  .art-grid { grid-template-columns: 1fr; }
  .photo-suite { padding: 1rem; outline-offset: 0; }
  .photo-suite::before,
  .photo-suite::after {
    left: 0.75rem;
    right: 0.75rem;
    height: 0.4rem;
  }
  .photo-suite-head { flex-wrap: wrap; gap: 0.35rem; }
  .photo-suite-head span { width: 100%; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-title, .about-title--alt, .about-photo, .about-copy, .about-stats {
    grid-column: 1 / -1;
  }
  .about-title--alt { padding-left: 1.5rem; }
  .about-photo { aspect-ratio: 4 / 5; margin-top: 1rem; max-width: 80%; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stats li:nth-child(2) { border-right: none; }
  .about-stats li { border-bottom: 1px solid currentColor; }
  .section--dark .about-stats li { border-bottom-color: var(--base); }

  .domain-bar { grid-template-columns: auto 1fr; gap: 0.75rem; align-items: end; }
  .domain-num { font-size: clamp(2rem, 9vw, 4rem); }
  .domain-name { font-size: clamp(1rem, 4vw, 1.8rem); padding-bottom: 0.2rem; }
  .domain-count { grid-column: 1 / -1; padding-bottom: 0; padding-top: 0.3rem; }

  .grid-3d,
  .grid-uiux { grid-template-columns: 1fr; }
  .grid-3d .hero-card,
  .grid-3d .tall-card,
  .grid-3d .work-card:not(.hero-card):not(.tall-card),
  .grid-uiux .laptop-card,
  .grid-uiux .phone-card,
  .grid-uiux .tablet-card { grid-column: 1 / -1; grid-row: auto; }
  .grid-3d .hero-card .work-thumb,
  .grid-3d .tall-card .work-thumb,
  .grid-3d .work-card .work-thumb { aspect-ratio: 4 / 3; }
  .grid-uiux .laptop-card .work-thumb,
  .grid-uiux .phone-card .work-thumb,
  .grid-uiux .tablet-card .work-thumb { aspect-ratio: 4 / 3; }
  .grid-uiux .work-thumb { outline-offset: 4px; }

  .poster-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .poster-tall, .poster-wide, .poster-sq { grid-column: span 1; }
  .poster-wall .poster-hero { grid-column: 1 / -1; }
  .poster { min-width: 0; }
  .poster .work-meta { flex-wrap: wrap; justify-content: flex-start; gap: 0.35rem; }
  .poster .work-type { white-space: normal; }
  .poster-tall .poster-frame .work-thumb,
  .poster-wide .poster-frame .work-thumb,
  .poster-sq .poster-frame .work-thumb { aspect-ratio: 3 / 4; }

  .photo-suite { padding: 1.25rem 1rem; outline-offset: 4px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip .negative-hero { grid-column: 1 / -1; }
  .photo-feature .work-thumb { aspect-ratio: 4 / 3; }

  .art-grid { grid-template-columns: repeat(2, 1fr); }
  .art-card,
  .art-card--wide,
  .art-card--tall,
  .art-card--sq {
    grid-column: span 1;
    grid-row: auto;
  }
  .art-card .work-thumb,
  .art-card--wide .work-thumb,
  .art-card--tall .work-thumb,
  .art-card--sq .work-thumb {
    aspect-ratio: 4 / 5;
  }

  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .skill-block { min-height: 200px; }

  .service-row { height: clamp(5rem, 13vw, 9rem); }
  .service-name { font-size: clamp(1.4rem, 7vw, 3.5rem); }
  .sr-front { grid-template-columns: 50px 1fr; }
  .sr-back { grid-template-columns: 50px 1fr; }
  .service-desc { grid-column: 2; font-size: 0.75rem; }

  .worked-grid { grid-template-columns: repeat(2, 1fr); }
  .worked-grid li { font-size: clamp(0.9rem, 4vw, 1.5rem); min-height: 80px; }

  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-mail { font-size: clamp(1.5rem, 8vw, 4rem); flex-direction: row; gap: 0.5rem; }
  .contact-mail span:first-child { word-break: break-all; }
  .site-foot { flex-direction: column; gap: 0.5rem; }

  .cursor-dot, .cursor-ring { display: none; }
  body.has-cursor, body.has-cursor * { cursor: auto !important; }
}

@media (max-width: 480px) {
  .reveal-head { font-size: clamp(2.2rem, 13vw, 5rem); }
  .section-bar { font-size: 10px; flex-wrap: wrap; gap: 0.5rem; }
  .about-lede { font-size: clamp(1.2rem, 5vw, 2rem); }
  .sr-front { grid-template-columns: 32px 1fr; }
  .sr-back { grid-template-columns: 32px 1fr; }
  .service-num { font-size: 10px; }
}

/* === PROJECT IMAGES — duotone (red/black) idle, full color on hover === */
.work-thumb img,
.user-image img,
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: url(#duotone-rk);
  transition: filter 0.5s ease, transform 0.6s ease;
  will-change: filter, transform;
}
.user-image,
.about-photo { position: relative; }
.user-image img,
.about-photo img { z-index: 0; }
.about-photo .photo-tag { z-index: 2; }
.about-photo::before { z-index: 1; }
.work-thumb img { z-index: 0; }
.work-thumb::after { z-index: 1; }

/* Lift the duotone on hover — reveal the real image */
.work-card:hover .work-thumb img,
.user-image:hover img,
.about-photo:hover img {
  filter: none;
}

/* Negatives sit on a black film backdrop; soften the diagonal scrim so the photo reads */
.negative .work-thumb::after { opacity: 0.35; }

.eyes-wrap {
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 201;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.eye {
  width: 52px;
  height: 52px;
  background: #F5F0EC;
  border: 2px solid #0D0D0D;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 0 #0D0D0D;
  transition: width 0.35s cubic-bezier(0.34, 1.6, 0.64, 1),
              height 0.35s cubic-bezier(0.34, 1.6, 0.64, 1),
              box-shadow 0.35s ease;
}
.pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #0D0D0D;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.35s cubic-bezier(0.34, 1.6, 0.64, 1),
              height 0.35s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.pupil::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 5px;
  height: 5px;
  background: #F5F0EC;
  border-radius: 50%;
  transition: width 0.35s ease, height 0.35s ease, top 0.35s ease, left 0.35s ease;
}
.pupil::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 4px;
  width: 0;
  height: 0;
  background: #F5F0EC;
  border-radius: 50%;
  opacity: 0;
  transition: width 0.3s ease 0.05s, height 0.3s ease 0.05s, opacity 0.3s ease 0.05s;
}

/* CUTE MODE — eyes grow, pupils get giant sparkles */
.eyes-wrap.is-cute .eye {
  width: 72px;
  height: 72px;
  box-shadow: 0 3px 0 #0D0D0D, 0 0 0 4px rgba(212, 20, 20, 0.15);
}
.eyes-wrap.is-cute .pupil {
  width: 32px;
  height: 32px;
}
.eyes-wrap.is-cute .pupil::after {
  width: 10px;
  height: 10px;
  top: 5px;
  left: 5px;
}
.eyes-wrap.is-cute .pupil::before {
  width: 4px;
  height: 4px;
  opacity: 1;
}

@media (max-width: 768px) {
  .eyes-wrap { top: 20px; right: 20px; gap: 6px; }
  .eye { width: 36px; height: 36px; }
  .pupil { width: 13px; height: 13px; }
  .pupil::after { width: 3px; height: 3px; top: 2px; left: 2px; }
  .eyes-wrap.is-cute .eye { width: 50px; height: 50px; }
  .eyes-wrap.is-cute .pupil { width: 22px; height: 22px; }
  .eyes-wrap.is-cute .pupil::after { width: 7px; height: 7px; top: 3px; left: 3px; }
  .eyes-wrap.is-cute .pupil::before { width: 3px; height: 3px; }
}

/* === FOOT LINK (Pexels) ====================================== */
.foot-link {
  font-family: 'Base', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.foot-link:hover { color: var(--red); }

/* === PRELOADER =============================================== */
body.preloading { overflow: hidden; }

.pre-loader {
  position: fixed;
  inset: 0;
  background-color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: 'Heading', 'Base', sans-serif;
}

.pre-loader .grid-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: grid;
  grid-auto-rows: 20vh;
}

.pre-loader .grid-item {
  position: relative;
  width: 20vh;
  height: 20vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: strict;
}

.pre-loader .grid-overlay,
.pre-loader .center-overlay {
  position: absolute;
  inset: 0;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.pre-loader .grid-item span,
.pre-loader .center-square span {
  will-change: transform;
}

.pre-loader .grid-item span {
  color: var(--red);
  font-size: 20vh;
  font-weight: 800;
  user-select: none;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}

.pre-loader .center-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(2, 20vh);
  grid-template-rows: repeat(2, 20vh);
  width: 40vh;
  height: 40vh;
  z-index: 1;
}

.pre-loader .center-square {
  width: 20vh;
  height: 20vh;
  background-color: var(--text);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.pre-loader .center-square span {
  position: absolute;
  font-size: 40vh;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 900;
  height: 40vh;
  width: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--red);
}

.pre-loader .center-square--tl span { left: 0; top: 0; transform: translate(50%, 50%); }
.pre-loader .center-square--tr span { right: 0; top: 0; transform: translate(50%, 50%); }
.pre-loader .center-square--bl span { left: 0; bottom: 0; transform: translate(50%, 50%); }
.pre-loader .center-square--br span { right: 0; bottom: 0; transform: translate(50%, 50%); }