/* ============================================================
   SCHREIBER STUDIO — Main Stylesheet
   ============================================================ */

:root {
  --bg: #f5f5f3;
  --white: #ffffff;
  --black: #0a0a0a;
  --gray-100: #f0f0ee;
  --gray-200: #e0e0de;
  --gray-400: #767676;
  --gray-600: #555;
  --accent: #c6ff00;
  --font: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --header-h: 60px;
  --t: 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  --tf: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--black);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  direction: rtl;
  text-align: start;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed; inset: 0;
  background: var(--white);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.6s ease 0.2s;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo {
  height: 40px; width: auto;
  opacity: 0; transform: scale(0.8);
  animation: loaderLogoIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards;
}
.loader-brand {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  animation: loaderTextIn 0.5s ease 0.9s forwards;
}
.loader-bar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; background: var(--accent);
  width: 0; animation: loaderBar 2s ease forwards;
}
@keyframes loaderLogoIn { to { opacity:1; transform:scale(1); } }
@keyframes loaderTextIn { to { opacity:1; transform:translateY(0); } }
@keyframes loaderBar { 0%{width:0} 60%{width:75%} 100%{width:100%} }

/* ============================================================
   HEADER
   ============================================================ */
#header {
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h);
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
#header.scrolled {
  background: rgba(245,245,243,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
}

/* Logo is taken out of flow and centered on the viewport itself so it
   never shifts when the nav / lang-switcher swap sides between locales. */
.header-logo {
  position: absolute; left: 50%;
  top: calc((var(--header-h) - 26px) / 2); /* 26px = logo image height */
  transform: translateX(-50%);
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
}
.header-logo svg, .header-logo img { height: 26px; width: auto; transition: transform var(--tf); display: block; }
.header-logo:hover svg, .header-logo:hover img { transform: scale(1.06); }

/* Nav and lang-switcher are explicitly pinned per locale below (not mirrored
   via `direction`) — `direction: ltr` here keeps each block's own internal
   item order fixed regardless of page language. */
.header-nav {
  position: absolute;
  top: calc((var(--header-h) - 28px) / 2); /* 28px = .header-nav a height */
  display: flex; align-items: center;
  gap: 6px;
  direction: ltr;
}
html[dir="rtl"] .header-nav { right: 40px; }
html[dir="ltr"] .header-nav { left: 40px; }

.header-nav a {
  width: 88px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; white-space: nowrap;
  color: var(--gray-600);
  background: rgba(10,10,10,0.04);
  border-radius: 999px;
  transition: background var(--tf), color var(--tf);
}
.header-nav a:hover { color: var(--black); background: rgba(10,10,10,0.08); }
.header-nav a.active { color: var(--black); background: var(--accent); font-weight: 600; }

.header-right {
  position: absolute;
  top: calc((var(--header-h) - 28px) / 2);
  height: 28px;
  display: flex; align-items: center; gap: 8px;
  direction: ltr;
}
html[dir="rtl"] .header-right { left: 40px; }
html[dir="ltr"] .header-right { right: 40px; }
.header-lang {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--gray-400);
}
.header-lang a { color: var(--gray-400); transition: color var(--tf); }
.header-lang a:hover { color: var(--black); }
.header-lang .sep {
  width: 1px; height: 12px;
  background: var(--gray-200); display: inline-block;
}
.lang-active {
  color: var(--black) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 4px; cursor: pointer;
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--black); transition: var(--tf);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none; position: fixed;
  inset: 0; top: var(--header-h);
  background: var(--white); z-index: 99;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 36px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav a { font-size: 28px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================================
   HERO
   ============================================================ */
/* All hero layout/styling lives in index.html's page-specific <style>
   block (the homepage is the only page with a #hero section). */
@keyframes fadeUp {
  to { opacity:1; transform:translateY(0); }
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.section-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 48px;
}
.section-num {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; color: var(--gray-400);
}
.section-line {
  width: 40px; height: 1px; background: var(--gray-400);
}
.section-name {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gray-400);
}

/* ============================================================
   FEATURED WORKS (home)
   ============================================================ */
#featured-works {
  padding: 80px 40px 80px;
  background: var(--bg);
}
.fw-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.fw-view-all {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--black);
  text-decoration: none; transition: gap var(--tf);
}
.fw-view-all:hover { gap: 22px; }
.fw-view-all .circle {
  width: 36px; height: 36px;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all var(--tf);
}
.fw-view-all:hover .circle {
  background: var(--black); color: var(--white);
}

/* Cards grid */
.fw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.fw-card {
  position: relative; overflow: hidden;
  cursor: pointer; display: block;
  aspect-ratio: 3/4;
  background: #1a1a1a;
  text-decoration: none; color: white;
}
.fw-card img,
.fw-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.fw-card:hover img,
.fw-card:hover video {
  filter: grayscale(0) brightness(0.8);
  transform: scale(1.04);
}
.fw-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
  pointer-events: none;
}
.fw-card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px;
  z-index: 2;
}
.fw-card-num {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.fw-card-title {
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 1.2; margin-bottom: 4px;
}
.fw-card-cat {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.fw-card-arrow {
  position: absolute; bottom: 20px; right: 20px;
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: white;
  transition: all var(--tf);
  z-index: 2;
}
.fw-card:hover .fw-card-arrow {
  background: white; color: var(--black);
  border-color: white; transform: rotate(45deg);
}

/* ============================================================
   WHAT WE DO + ABOUT PREVIEW (home row)
   ============================================================ */
#home-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--gray-200);
}

/* What we do */
#what-we-do {
  padding: 72px 48px;
  border-right: 1px solid var(--gray-200);
}
.services-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
.svc-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-200);
}
.svc-item:nth-child(2n+1) { padding-right: 24px; }
.svc-item:nth-child(2n)   { padding-left: 24px; }
.svc-item:last-child,
.svc-item:nth-last-child(2) { border-bottom: none; }

.svc-icon {
  width: 36px; height: 36px;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; font-size: 14px; color: var(--gray-400);
  transition: all var(--tf);
}
.svc-item:hover .svc-icon {
  border-color: var(--accent); color: var(--black);
}
.svc-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.svc-desc {
  font-size: 12px; color: var(--gray-600); line-height: 1.65;
}
.svc-arrow {
  display: block; font-size: 13px; color: var(--gray-300);
  margin-top: 12px; transition: all var(--tf);
}
.svc-item:hover .svc-arrow { color: var(--black); transform: translateX(4px); }

/* About preview */
#about-preview {
  display: grid; grid-template-columns: 1fr 1fr;
}
.about-img {
  position: relative; overflow: hidden;
  background: var(--gray-200);
}
.about-img img {
  width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1);
  transition: filter 0.5s ease;
}
.about-img:hover img { filter: grayscale(0.2); }
.about-img-placeholder {
  width: 100%; height: 100%; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: linear-gradient(135deg, #e8e8e6 0%, #d8d8d6 100%);
}
.about-text {
  padding: 48px 40px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--white);
}
.about-text h2 {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.2; margin-bottom: 24px;
}
.about-text h2 .dot { color: var(--accent); }
.about-text p { font-size: 13px; color: var(--gray-600); line-height: 1.75; margin-bottom: 24px; }
.about-cta {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--black); text-decoration: none;
  transition: gap var(--tf);
}
.about-cta:hover { gap: 12px; }
.about-cta .circle {
  font-size: 13px; transition: color var(--tf); flex-shrink: 0;
}
.about-cta:hover .circle { color: var(--accent); }

/* ============================================================
   WORKS PAGE
   ============================================================ */
.works-page { padding: 0 40px 100px; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 48px;
  border-bottom: 1px solid var(--gray-200);
}
.filter-btn {
  padding: 12px 20px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray-400); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--tf); margin-bottom: -1px;
  background: none; border-radius: 0;
}
.filter-btn:hover { color: var(--black); }
.filter-btn.active { color: var(--black); border-bottom-color: var(--accent); }

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.work-item {
  position: relative; overflow: hidden;
  background: #1a1a1a; cursor: pointer;
  display: block; text-decoration: none;
  grid-column: span 1;
  aspect-ratio: 4/3;
}

.work-item img, .work-item video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.work-item:hover img, .work-item:hover video {
  filter: grayscale(0) brightness(0.85);
  transform: scale(1.03);
}
.work-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
  pointer-events: none;
}
.work-item-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px; z-index: 2;
  opacity: 0; transform: translateY(6px);
  transition: all 0.3s ease;
}
.work-item:hover .work-item-info { opacity: 1; transform: translateY(0); }
.work-item-info h3 { font-size: 14px; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 0.05em; }
.work-item-info span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.work-item-num {
  position: absolute; top: 16px; left: 16px;
  font-size: 9px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4); z-index: 2;
}
.work-empty {
  grid-column: 1/-1;
  padding: 80px 0; text-align: center;
  font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray-400);
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.project-hero {
  min-height: 80vh; /* fallback for browsers without svh support */
  min-height: 80svh;
  display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
  background: var(--black);
  padding: 80px 60px;
  padding-top: calc(var(--header-h) + 60px);
}
.project-hero-media {
  position: absolute; inset: 0;
}
.project-hero-media img, .project-hero-media video {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.65;
}
.project-hero-content { position: relative; z-index: 2; color: white; max-width: 760px; }
.project-hero-content .cat {
  font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.project-hero-content h1 {
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 32px;
}
.project-meta { display: flex; gap: 48px; flex-wrap: wrap; }
.meta-item label {
  display: block; font-size: 9px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 4px;
}
.meta-item span { font-size: 13px; color: white; }

.project-body { padding: 80px 60px; max-width: 1200px; margin: 0 auto; }
.project-overview { max-width: 680px; margin: 0 auto 80px; text-align: center; }
.project-overview .label {
  font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 20px;
}
.project-body p.section-label {
  display: block;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 20px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--black); text-decoration: none;
  transition: opacity var(--tf);
}
.btn-primary:hover { opacity: 0.6; }
.project-overview p { font-size: 18px; font-weight: 300; line-height: 1.85; color: var(--gray-600); }

.gallery-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 80px;
}
.gallery-grid img, .gallery-grid video {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
}
.process-steps {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 24px; margin-bottom: 80px;
}
.process-step { padding: 28px 0; border-top: 2px solid var(--gray-200); }
.process-step .step-num { font-size: 10px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 10px; }
.process-step h4 { font-size: 15px; font-weight: 500; }

.final-video {
  width: 100%; aspect-ratio: 16/9;
  background: var(--black); margin-bottom: 80px;
  position: relative; overflow: hidden;
}
.final-video video { width: 100%; height: 100%; object-fit: contain; background: var(--black); }
.final-video.is-portrait {
  aspect-ratio: 9/16;
  max-width: min(420px, 100%);
  margin-inline: auto;
}
.final-video.is-square { aspect-ratio: 1/1; max-width: min(720px, 100%); margin-inline: auto; }
.final-video.is-landscape { aspect-ratio: 16/9; }
.play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.play-btn-inner {
  width: 64px; height: 64px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px; transition: all var(--tf), opacity var(--t); padding-left: 4px;
}
.play-btn:hover .play-btn-inner { background: white; color: var(--black); border-color: white; }

/* While playing: overlay stays clickable (click anywhere to pause) but the icon
   only appears on hover, so it doesn't sit on top of the video permanently. */
.play-btn.is-playing .play-btn-inner { opacity: 0; padding-left: 0; }
.play-btn.is-playing:hover .play-btn-inner { opacity: 1; }

/* Fullscreen expand — mobile only (desktop already has a large inline video). */
.fullscreen-btn {
  display: none;
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: white; font-size: 16px; cursor: pointer;
  align-items: center; justify-content: center;
}
@media (max-width: 900px) {
  .fullscreen-btn { display: flex; }
}

.next-proj-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 60px; border-top: 1px solid var(--gray-200);
}
.next-proj-link { display: flex; align-items: center; gap: 20px; text-decoration: none; color: var(--black); }
.next-proj-link .label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 6px; }
.next-proj-link h3 { font-size: 24px; font-weight: 300; transition: transform var(--tf); }
.next-proj-link:hover h3 { transform: translateX(8px); }
.next-proj-arrow { font-size: 28px; color: var(--gray-200); transition: all var(--tf); }
.next-proj-link:hover .next-proj-arrow { color: var(--black); transform: translateX(8px); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: calc(var(--header-h) + 80px) 60px 60px;
  background: var(--bg);
}
.page-hero .eyebrow {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 16px;
}
.page-hero h1 {
  font-size: clamp(40px,6vw,80px);
  font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 20px;
}
.page-hero p { font-size: 15px; color: var(--gray-600); max-width: 500px; line-height: 1.75; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.services-full { padding: calc(var(--header-h) + 80px) 60px 100px; }
.service-block {
  display: grid; grid-template-columns: 56px 1fr 32px;
  gap: 40px; align-items: start;
  padding: 52px 0; border-top: 1px solid var(--gray-200);
  cursor: default; transition: padding var(--tf);
}
.service-block:last-child { border-bottom: 1px solid var(--gray-200); }
.service-block .num { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); padding-top: 4px; }
.service-block h2 { font-size: clamp(22px,3vw,34px); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 14px; }
.service-block p { font-size: 14px; color: var(--gray-600); line-height: 1.8; max-width: 520px; }
.service-block .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.service-block .tag {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--gray-200); padding: 5px 12px; color: var(--gray-600);
}
.sb-arrow { font-size: 20px; color: var(--gray-200); padding-top: 6px; transition: color var(--tf); }
.service-block:hover .sb-arrow { color: var(--black); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-page { padding: calc(var(--header-h) + 80px) 60px 100px; }
.about-page-intro { max-width: 860px; margin-bottom: 80px; padding-top: 0; }
.about-page-intro h1 { font-size: clamp(32px,4.5vw,58px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 28px; }
.about-page-intro h1 .ai { color: var(--accent); }
.about-page-intro p { font-size: 16px; color: var(--gray-600); line-height: 1.9; max-width: 600px; }

.about-wide-img {
  width: 100%; aspect-ratio: 21/8;
  background: var(--gray-200); overflow: hidden; margin-bottom: 80px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.about-wide-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

.about-caps {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; border-top: 1px solid var(--gray-200); margin-bottom: 80px;
}
.cap-item {
  padding: 36px 28px;
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.cap-item:nth-child(3n) { border-right: none; }
.cap-item .icon { font-size: 18px; margin-bottom: 14px; }
.cap-item h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.cap-item p { font-size: 12px; color: var(--gray-600); line-height: 1.65; }

/* ============================================================
   PROCESS PAGE
   ============================================================ */
.process-page { padding: calc(var(--header-h) + 80px) 60px 100px; }
.process-list { display: flex; flex-direction: column; }
.process-list-item {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 48px; padding: 60px 0;
  border-top: 1px solid var(--gray-200); position: relative;
}
.process-list-item:last-child { border-bottom: 1px solid var(--gray-200); }
.process-step-num {
  font-size: 60px; font-weight: 200;
  letter-spacing: -0.03em; line-height: 1; color: var(--gray-200);
}
.process-step-content h2 {
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 14px;
}
.process-step-content p {
  font-size: 14px; color: var(--gray-600); line-height: 1.85; max-width: 520px;
}
.process-detail { margin-top: 20px; }
.process-detail-label {
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 5px;
}
.process-detail-val { font-size: 13px; color: var(--gray-600); }
.process-accent-line {
  position: absolute; left: 0; top: 0;
  width: 2px; height: 0; background: var(--accent);
  transition: height 0.6s ease;
}
.process-list-item.visible .process-accent-line { height: 100%; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page {
  min-height: calc(100vh - var(--header-h));
  padding: calc(var(--header-h) + 40px) 60px 60px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
  align-content: center;
}
.contact-left h1 { font-size: clamp(28px,4vw,48px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 28px; }
.contact-left h1 .dot { color: var(--accent); }
.contact-left p { font-size: 14px; color: var(--gray-600); line-height: 1.8; margin-bottom: 48px; max-width: 360px; }
.contact-links { display: flex; flex-direction: column; gap: 26px; }
.contact-link {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--black); text-decoration: none;
  transition: color var(--tf);
}
.contact-link:hover { color: var(--gray-600); }
.contact-link .link-icon {
  width: 36px; height: 36px; border: 1px solid var(--gray-200);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all var(--tf); flex-shrink: 0;
}
.contact-link:hover .link-icon { border-color: var(--accent); background: var(--accent); }

.form-group { margin-bottom: 30px; }
.form-group label {
  display: block; font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 8px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 0;
  font-size: 14px; font-family: var(--font);
  color: var(--black); background: transparent;
  border: none; border-bottom: 1px solid var(--gray-200);
  outline: none; transition: border-color var(--tf);
  -webkit-appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-bottom-color: var(--black); }
.form-group textarea { resize: none; height: 90px; }
.btn-submit {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 0;
  border: none; color: var(--black); cursor: pointer;
  background: transparent; font-family: var(--font);
  transition: gap var(--tf), color var(--tf); margin-top: 8px;
}
.btn-submit:hover { gap: 24px; color: var(--accent); }
.btn-submit .circle {
  width: 48px; height: 48px; border: 1.5px solid var(--black);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 18px; transition: all var(--tf);
}
.btn-submit:hover .circle { background: var(--black); color: var(--white); }

.form-consent { margin-bottom: 18px; }
.form-consent label.checkbox-label {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: 'Assistant', var(--font);
  font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--gray-600); line-height: 1.6; cursor: pointer; margin-bottom: 0;
}
input.consent-checkbox {
  -webkit-appearance: checkbox; appearance: checkbox;
  width: 1em; height: 1em; min-width: 14px; min-height: 14px;
  margin: 2px 0 0; padding: 0; border: none; background: none;
  flex-shrink: 0; accent-color: var(--black); cursor: pointer;
}
.consent-links { display: flex; gap: 16px; margin-top: 10px; margin-inline-start: 32px; }
.consent-links a {
  font-family: 'Assistant', var(--font);
  font-size: 12px; font-weight: 600; color: var(--black); text-decoration: underline; text-underline-offset: 2px; transition: color var(--tf);
}
.consent-links a:hover { color: var(--gray-600); }
.form-privacy-note { font-size: 11px; color: var(--gray-400); line-height: 1.7; margin-top: 28px; max-width: 460px; }

/* Required contact consent is boxed and bolder so it reads as mandatory, not fine print */
.form-consent-required {
  padding: 16px 18px;
  border: 1.5px solid var(--black);
  background: var(--gray-100);
}
.form-consent-required label.checkbox-label {
  color: var(--black); font-weight: 500;
}
.form-consent-required input[type="checkbox"] {
  border: 1.5px solid var(--black);
}
.form-consent-required.consent-invalid { border-color: #c00; background: #fff5f5; }
.form-consent-required.consent-invalid label.checkbox-label { color: #c00; }

/* ============================================================
   SUCCESS OVERLAY (contact form)
   ============================================================ */
.success-overlay {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10,10,10,0.4); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t), visibility 0s linear var(--t);
}
.success-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--t);
}
.success-overlay-box {
  width: 100%; max-width: 380px;
  background: var(--white);
  text-align: center;
  padding: 48px 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.16);
  transform: scale(0.94);
  transition: transform var(--t);
}
.success-overlay.open .success-overlay-box { transform: scale(1); }
.success-overlay-box h2 {
  font-size: 20px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--black); margin-bottom: 16px;
}
.success-overlay-box h2 .dot { color: var(--accent); }
.success-overlay-box p {
  font-size: 13px; color: var(--gray-600); line-height: 1.8; margin-bottom: 32px;
}
.success-overlay-close {
  display: inline-block; padding: 13px 36px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1.5px solid var(--black); background: transparent; color: var(--black);
  cursor: pointer; font-family: var(--font); transition: all var(--tf);
}
.success-overlay-close:hover { background: var(--black); color: var(--white); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 48px 60px;
  border-top: 1px solid var(--gray-200);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
}
.footer-brand { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; }
.footer-brand .ai { color: var(--accent); }
.footer-links { display: flex; gap: 28px; }
.footer-links a {
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-400);
  transition: color var(--tf);
}
.footer-links a:hover { color: var(--black); }
.footer-copy { font-size: 11px; color: var(--gray-400); text-align: right; }

/* ============================================================
   ADMIN — shared buttons
   ============================================================ */
.btn-admin-save {
  padding: 11px 28px; background: var(--black); color: var(--white);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; font-family: var(--font); border: none;
}
.btn-admin-save:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-admin-cancel {
  padding: 11px 20px; border: 1px solid var(--gray-200);
  color: var(--gray-400); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; font-family: var(--font); background: none;
  transition: all var(--tf);
}
.btn-admin-cancel:hover { border-color: var(--black); color: var(--black); }

/* ============================================================
   PIN GATE
   ============================================================ */
#pin-gate {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,10,10,0.92); backdrop-filter: blur(8px);
  direction: ltr;
}
#pin-gate.open { display: flex; }
.pin-box { width: 280px; text-align: center; }
.pin-title { font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
.pin-subtitle { font-size: 11px; color: #888; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 24px; }
.pin-box input {
  width: 100%; padding: 14px; font-size: 24px; letter-spacing: 0.6em;
  text-align: center; font-family: var(--font); border: 1px solid #333;
  background: #161616; color: var(--white); outline: none; border-radius: 2px;
}
.pin-box input:focus { border-color: var(--accent); }
.pin-error { font-size: 11px; color: #ff5a5a; margin-top: 10px; opacity: 0; transition: opacity var(--tf); }
.pin-error.show { opacity: 1; }
.pin-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: center; }
.pin-box.shake { animation: pinShake 0.4s; }
@keyframes pinShake {
  10%, 90% { transform: translateX(-4px); }
  20%, 80% { transform: translateX(6px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* ============================================================
   ADMIN CMS PANEL
   ============================================================ */
#admin-panel {
  position: fixed; inset: 0; z-index: 9998; display: none;
  background: var(--bg); direction: ltr; flex-direction: column;
}
#admin-panel.open { display: flex; }

.admin-topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 56px; border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.admin-title { font-size: 12px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; }
.admin-topbar-status { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-400); padding: 3px 9px; border: 1px solid var(--gray-200); border-radius: 20px; }
.admin-topbar-status.is-draft { color: #a67c00; border-color: #e8d9a0; background: #fdf8ea; }
.admin-topbar-status.is-published { color: #1a7a3d; border-color: #b8e0c4; background: #edf9f0; }
.admin-topbar-spacer { flex: 1; }
.admin-close {
  font-size: 18px; cursor: pointer; color: var(--gray-400);
  background: none; border: none; padding: 4px 10px; transition: color var(--tf);
}
.admin-close:hover { color: var(--black); }

.admin-body { flex: 1; display: flex; min-height: 0; }

/* Sidebar */
.admin-sidebar {
  flex: 0 0 240px; border-right: 1px solid var(--gray-200);
  background: var(--white); overflow-y: auto; padding: 16px 0;
}
.admin-new-btn {
  display: block; width: calc(100% - 32px); margin: 0 16px 14px;
  padding: 10px; background: var(--black); color: var(--white); border: none;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; font-family: var(--font);
}
.admin-proj-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  cursor: pointer; border-left: 2px solid transparent; transition: background var(--tf);
}
.admin-proj-item:hover { background: var(--bg); }
.admin-proj-item.active { background: var(--bg); border-left-color: var(--accent); }
.admin-proj-title { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.admin-proj-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: #d8c67a; }
.admin-proj-dot.is-published { background: #3fae66; }

/* Editor */
.admin-editor { flex: 1; overflow-y: auto; padding: 28px 32px 120px; }
.admin-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray-400); margin: 28px 0 12px;
}
.admin-section-label:first-child { margin-top: 0; }
.admin-form-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.admin-form-group.full { grid-template-columns: 1fr; }
.admin-fg label {
  display: block; font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 6px;
}
.admin-fg input, .admin-fg textarea, .admin-fg select {
  width: 100%; padding: 10px 12px; font-size: 13px;
  font-family: var(--font); border: 1px solid var(--gray-200);
  background: var(--white); outline: none; color: var(--black);
  transition: border-color var(--tf);
}
.admin-fg input:focus, .admin-fg textarea:focus, .admin-fg select:focus { border-color: var(--black); }
.admin-fg textarea { resize: vertical; min-height: 72px; }
.admin-fg.required label::after { content: ' *'; color: var(--accent-dark, #8a9e00); }
.admin-fg.invalid input, .admin-fg.invalid textarea { border-color: #d9534f; }
.admin-retranslate {
  border: none; background: none; cursor: pointer; color: var(--gray-400); font-size: 11px;
  padding: 0 0 0 4px; vertical-align: middle; font-family: var(--font); transition: color var(--tf);
}
.admin-retranslate:hover { color: var(--black); }

.admin-toggles { display: flex; gap: 24px; margin: 20px 0 8px; flex-wrap: wrap; }
.toggle-group { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.toggle-group input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

/* Image / video upload dropzone + thumbnails */
.admin-cover-upload {
  width: 100%; max-width: 320px; aspect-ratio: 4/3; border: 1px dashed var(--gray-200);
  background: var(--white) center/cover no-repeat; position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.admin-cover-upload:hover { border-color: var(--black); }
.admin-cover-upload .cu-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-400); pointer-events: none; }
.admin-cover-upload.has-image .cu-label { display: none; }
.admin-cover-upload .cu-replace {
  position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; opacity: 0;
  transition: opacity var(--tf); pointer-events: none;
}
.admin-cover-upload.has-image:hover .cu-replace { opacity: 1; }
.admin-cover-upload .cu-missing {
  display: none; font-size: 10px; line-height: 1.6; letter-spacing: 0.05em; text-align: center;
  color: #b3541e; padding: 0 16px; pointer-events: none;
}
.admin-cover-upload.media-missing .cu-label { display: none; }
.admin-cover-upload.media-missing .cu-missing { display: block; }
.admin-cover-upload.media-missing { border-color: #e8c19a; background-color: #fdf6f0; }

.admin-gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.admin-gallery-item {
  width: 110px; height: 110px; position: relative; background: var(--gray-100) center/cover no-repeat;
  border: 1px solid var(--gray-200);
}
.admin-gallery-item .gi-remove {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; line-height: 16px;
  text-align: center; background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; cursor: pointer; border: none;
}
.admin-gallery-item .gi-move { position: absolute; bottom: 3px; display: flex; gap: 2px; left: 3px; right: 3px; justify-content: space-between; }
.admin-gallery-item .gi-move button {
  width: 20px; height: 18px; background: rgba(0,0,0,0.65); color: #fff; border: none; cursor: pointer; font-size: 10px;
}
.admin-gallery-item .gi-missing {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  background: rgba(253,246,240,0.92); color: #b3541e; font-size: 20px;
}
.admin-gallery-item.media-missing { border-color: #e8c19a; }
.admin-gallery-item.media-missing .gi-missing { display: flex; }
.admin-gallery-add {
  width: 110px; height: 110px; border: 1px dashed var(--gray-200); background: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--gray-400);
}
.admin-gallery-add:hover { border-color: var(--black); color: var(--black); }

/* Repeatable text rows (process steps) */
.admin-list-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-list-row input { flex: 1; }
.admin-list-row button { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--gray-200); background: var(--white); cursor: pointer; font-size: 11px; }
.admin-list-row button:hover { border-color: var(--black); }
.admin-list-add {
  padding: 8px 14px; border: 1px dashed var(--gray-200); background: none; cursor: pointer;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-400); font-family: var(--font);
}
.admin-list-add:hover { border-color: var(--black); color: var(--black); }

.admin-video-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.admin-video-row .vr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-600); }
.admin-video-row .vr-missing { display: none; font-size: 10px; letter-spacing: 0.05em; color: #b3541e; white-space: nowrap; }
.admin-video-row.media-missing .vr-missing { display: inline; }
.admin-video-row.media-missing .vr-name { color: #b3541e; }

/* Preview pane */
/* min-width:0 opts out of flexbox's automatic min-content sizing — without it, the
   fixed-width 1280px desktop iframe inside would force this column wider than its
   420px flex-basis (a classic flexbox min-content quirk). */
.admin-preview { flex: 0 0 420px; min-width: 0; border-left: 1px solid var(--gray-200); background: #ececea; display: flex; flex-direction: column; }
.admin-preview-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-bottom: 1px solid var(--gray-200); background: var(--white);
}
.admin-device-btn {
  padding: 6px 14px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--gray-200); background: var(--white); cursor: pointer; font-family: var(--font);
}
.admin-device-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
.admin-preview-frame-wrap { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 20px; }
/* Desktop mode renders at a real desktop width (above the site's 900px mobile
   breakpoint) so it actually uses the desktop CSS, then gets zoomed down via JS
   (admin.js fitPreviewZoom) to fit the narrow preview column. Without this, both
   "desktop" and "mobile" modes rendered at ~380px and looked identical. */
#admin-preview-iframe { border: none; background: var(--white); width: 1280px; height: 1400px; transition: width var(--t); box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
#admin-preview-iframe.mobile { width: 375px; }

/* Toast */
#admin-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--black); color: var(--white); padding: 12px 22px; font-size: 12px;
  letter-spacing: 0.05em; z-index: 10001; opacity: 0; pointer-events: none; transition: all var(--tf);
}
#admin-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1100px) {
  .admin-preview { display: none; }
}
@media (max-width: 780px) {
  .admin-sidebar { flex: 0 0 180px; }
  .admin-form-group { grid-template-columns: 1fr; }
}

/* ============================================================
   ANIMATIONS / REVEAL
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .fw-grid { grid-template-columns: repeat(2,1fr); }
  .fw-card { aspect-ratio: 4/5; }
  #home-bottom { grid-template-columns: 1fr; }
  #what-we-do { border-right: none; border-bottom: 1px solid var(--gray-200); }
  #about-preview { grid-template-columns: 1fr; }
  .about-img { min-height: 280px; }
}
/* Header switches to the hamburger earlier than the rest of the site's
   900px breakpoint: with the nav pinned to one side and the wordmark logo
   mathematically centered, the pill nav collides with the logo below
   ~1180px (nav width + centered-logo half-width + edge offset no longer
   fit side by side). 1220px keeps a safety margin above that threshold. */
@media (max-width: 1220px) {
  .header-nav { display: none; }
  html[dir="rtl"] .header-right { left: 24px; }
  html[dir="ltr"] .header-right { right: 24px; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
}

/* Phone-width header (≤480px): .header-right previously bundled HE|EN
   and the hamburger into one flex block pinned 24px from one edge, which
   collided with the centered logo as soon as the viewport got narrow
   enough (verified: 15px overlap at 375px). Below 480px, unwrap that
   bundle (display:contents drops its own box/position) and pin HE|EN and
   the hamburger to opposite physical edges instead, independent of
   language direction — leaves the centered logo a clear gap on both
   sides at every width down to 320px. Desktop/tablet (>480px) untouched. */
@media (max-width: 480px) {
  .header-right { display: contents; }
  .header-lang { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
  .hamburger { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 900px) {
  section, .page-hero, .services-full, .about-page, .process-page, .works-page { padding-left: 24px; padding-right: 24px; }
  footer { grid-template-columns: 1fr; padding: 36px 24px; gap: 20px; }
  .footer-copy { text-align: left; }
  .footer-links { flex-wrap: wrap; }
  .contact-page { grid-template-columns: 1fr; min-height: auto; align-content: normal; padding: calc(var(--header-h) + 40px) 24px 80px; gap: 48px; }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .work-item:nth-child(n) { grid-column: span 1; aspect-ratio: 1; }
  #featured-works { padding: 60px 24px; }
  .fw-grid { grid-template-columns: 1fr 1fr; }
  .about-caps { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 40px 1fr; }
  .service-block .sb-arrow { display: none; }
  .project-body, .project-hero { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 600px) {
  .fw-grid { grid-template-columns: 1fr; }
  .fw-card { aspect-ratio: 4/3; }
  .works-grid { grid-template-columns: 1fr; }
  .work-item:nth-child(n) { grid-column: span 1; aspect-ratio: 16/9; }
  .about-caps { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .process-list-item { grid-template-columns: 60px 1fr; gap: 24px; }
}