/* =========================================================
   РИНО — дизайн-студия · многостраничный сайт
   Design tokens
========================================================= */
:root{
  --bg: #0c0b0a;
  --bg-1: #131211;
  --bg-2: #1a1816;
  --ink: #F0E9DF;
  --ink-dim: #C6BDB0;
  --ink-faint: #8a8175;
  --line: rgba(240,233,223,.14);
  --line-soft: rgba(240,233,223,.07);
  --accent: #B85C3C;
  --accent-ink: #15130F;
  --radius: 18px;
  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);   /* long, expensive settle */
  --ease-soft: cubic-bezier(.33,1,.68,1);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family:"Onest", sans-serif; font-weight: 800; line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
p{ margin:0; }
a{ color: inherit; }
img,video{ max-width:100%; display:block; }
button{ font-family:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
.mono{ font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; }
::selection{ background: var(--accent); color: var(--accent-ink); }

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); }
.wrap--narrow{ max-width: 860px; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.eyebrow{ font-family:"JetBrains Mono"; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); display:block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.95em 1.7em; border-radius:100px;
  font-weight:700; font-size:.86rem; letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition: transform .3s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn--accent{ background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover{ transform: translateY(-2px); }
.btn--ghost{ background:transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink-dim); transform: translateY(-2px); }
.btn--sm{ padding:.6em 1.2em; font-size:.76rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:600; font-size:.9rem; color: var(--ink); border-bottom:1px solid var(--line); padding-bottom:.15em; transition: border-color .2s, color .2s, gap .2s; }
.link-arrow:hover{ color: var(--accent); border-color: var(--accent); gap:.6rem; }

.reveal{ opacity:0; transform: translateY(22px); transition: opacity .9s var(--ease-expo), transform 1.05s var(--ease-expo); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* =========================================================
   Motion system
   1. Curtain reveal — images and video wipe up from behind a mask
      while easing out of an overscale. Reads as film, not as a fade.
   2. Stagger — children of a revealed container follow in sequence.
   3. Page transition — the whole document cross-fades between routes.
========================================================= */

/* 1. Curtain */
.case-card__media img,
.svc-card__media img,
.production-media video,
.production-media__sub,
.about-media,
.case-gallery img,
.texture-grid img{
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14);
  transition: clip-path 1.25s var(--ease-expo), transform 1.5s var(--ease-expo);
}
.case-card.in .case-card__media img,
.svc-card.in .svc-card__media img,
.production-media.in video,
.production-media__sub.in,
.about-media.in,
.case-gallery img.in,
.texture-grid img.in{
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* Hover scale must beat the resting curtain transform */
.case-card:hover .case-card__media img{ transform: scale(1.04); transition: transform .8s var(--ease-soft); }
@media (prefers-reduced-motion: reduce){
  .case-card__media img, .svc-card__media img, .production-media video,
  .production-media__sub, .about-media, .case-gallery img, .texture-grid img{
    clip-path:none; transform:none; transition:none;
  }
}

/* 2. Stagger — one shared scale, applied wherever a set reveals together */
.case-grid .case-card:nth-child(2){ transition-delay:.10s; }
.case-grid .case-card:nth-child(3){ transition-delay:.20s; }
.case-grid .case-card:nth-child(4){ transition-delay:.30s; }
.case-grid .case-card:nth-child(5){ transition-delay:.40s; }
.case-grid .case-card:nth-child(6){ transition-delay:.50s; }

.svc-grid .svc-card{ opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease-expo), transform 1.05s var(--ease-expo); }
.svc-grid .svc-card.in{ opacity:1; transform:none; }
.svc-grid .svc-card:nth-child(2){ transition-delay:.08s; }
.svc-grid .svc-card:nth-child(3){ transition-delay:.16s; }
.svc-grid .svc-card:nth-child(4){ transition-delay:.24s; }
.svc-grid .svc-card:nth-child(5){ transition-delay:.32s; }
.svc-grid .svc-card:nth-child(6){ transition-delay:.40s; }

.teaser-list .teaser-row{
  opacity:0; transform: translateY(16px);
  transition: opacity .8s var(--ease-expo), transform .9s var(--ease-expo), color .25s;
}
.teaser-list.in .teaser-row{ opacity:1; transform:none; }
.teaser-list.in .teaser-row:nth-child(2){ transition-delay:.07s; }
.teaser-list.in .teaser-row:nth-child(3){ transition-delay:.14s; }
.teaser-list.in .teaser-row:nth-child(4){ transition-delay:.21s; }
.teaser-list.in .teaser-row:nth-child(5){ transition-delay:.28s; }
.teaser-list.in .teaser-row:nth-child(6){ transition-delay:.35s; }

.process-open .process-step{ opacity:0; transform: translateY(18px); transition: opacity .8s var(--ease-expo), transform .9s var(--ease-expo); }
.process-open.in .process-step{ opacity:1; transform:none; }
.process-open.in .process-step:nth-child(2){ transition-delay:.12s; }
.process-open.in .process-step:nth-child(3){ transition-delay:.24s; }
.process-open.in .process-step:nth-child(4){ transition-delay:.36s; }

.steps li{ opacity:0; transform: translateY(16px); transition: opacity .8s var(--ease-expo), transform .9s var(--ease-expo); }
.steps li.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .svc-grid .svc-card, .teaser-list .teaser-row, .process-open .process-step, .steps li{
    opacity:1; transform:none; transition:none;
  }
}

/* 3. Page transition — the document fades out before the next route loads */
html.js body{ opacity:0; transition: opacity .45s var(--ease-soft); }
html.js body.is-ready{ opacity:1; }
html.js body.is-leaving{ opacity:0; transition: opacity .3s var(--ease-soft); }
@media (prefers-reduced-motion: reduce){
  html.js body, html.js body.is-leaving{ opacity:1 !important; transition:none; }
}

/* Scroll progress hairline */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:80;
  background: var(--accent); pointer-events:none;
  transition: width .12s linear;
}

/* =========================================================
   Header / Footer (shared across every page)
========================================================= */
.site-header{ position: sticky; top:0; z-index: 50; background: rgba(12,11,10,0); border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); }
.site-header.is-scrolled{ background: rgba(12,11,10,.88); backdrop-filter: blur(10px); border-bottom-color: var(--line-soft); }

/* ---- Home-only: floating nav pill ----
   The <header> itself (body-level wrapper) carries NO background, NO border,
   NO shadow, NO pseudo-elements, in ANY state (default / .is-scrolled /
   .header-hidden). It exists purely to position the pill. All visual
   styling — background, border, blur, radius — lives on .header-inner only. */
header.home-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: none; border: 0; box-shadow: none;
  pointer-events: none; /* wrapper is see-through; only the pill is clickable */
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
header.home-header > *{ pointer-events: auto; }
header.home-header::before, header.home-header::after{ content: none; display:none; }
header.home-header.is-scrolled{ background: none; border: 0; box-shadow: none; }
header.home-header.header-hidden{ transform: translateY(-130%); opacity:0; pointer-events:none; }

.home-header .header-inner{
  max-width: 1020px; height: 58px; margin: 18px auto 0; padding: 0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background: rgba(14,12,10,0.82);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.home-header .logo{ font-size:1.02rem; }
.home-header .main-nav ul{ gap:1.7rem; font-size:.84rem; }

.home-header .mobile-nav{
  max-width: 1020px; margin: 8px auto 0; border-radius:16px; overflow:hidden;
  background: rgba(14,12,10,0.92); border:1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
}

@media (max-width:640px){
  .home-header .header-inner{ max-width: calc(100% - 24px); height:54px; margin: 12px auto 0; padding: 0 1rem; }
  .home-header .mobile-nav{ max-width: calc(100% - 24px); margin: 6px auto 0; }
}

/* ---- Framed media band (manifesto, closing CTA) ---- */
.media-frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:12px;
}
.glass-section{ padding: 4.5rem clamp(1.5rem,4vw,3.5rem); }
.fw-medium{ font-weight:600 !important; }
.home-sections{ max-width:1320px; margin:0 auto; padding: 0 clamp(1.2rem,4vw,3rem); }
@media (max-width:640px){ .glass-section{ padding: 3rem 1.3rem; } }

/* ---- Home hero: 12-col editorial composition ---- */
.hero-copy{ position:relative; }
.hero-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:1.5rem; align-items:start; }
.hero-left{ grid-column: 1 / 8; }
.hero-desc{ grid-column: 9 / 13; align-self:end; max-width:360px; }
.hero-desc p{ font-size:16px; line-height:1.65; color: var(--ink-dim); }
@media (max-width:900px){
  .hero-left{ grid-column: 1 / -1; }
  .hero-desc{ grid-column: 1 / -1; align-self:start; max-width:460px; margin-top:1.6rem; }
}

.hero-title{
  font-family:"Onest", sans-serif; font-weight:600; text-transform:none;
  line-height:1; letter-spacing:-.02em; margin-top:1rem;
}

/* ---- Preloader (home only) ---- */
.preloader{
  position:fixed; inset:0; z-index:100; background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: transform .85s var(--ease), opacity .5s var(--ease);
}
.preloader.is-done{ transform: translateY(-100%); opacity:0; pointer-events:none; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; }
.preloader__mark{ font-weight:900; font-size:1.35rem; letter-spacing:.05em; color: var(--ink); }
.preloader__bar{ display:block; width:170px; height:1px; background: var(--line); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0; background: var(--ink); transition: width .25s linear; }
/* No JS, or motion reduced: never show a blocking overlay */
html:not(.js) .preloader, .preloader.is-off{ display:none; }
@media (prefers-reduced-motion: reduce){ .preloader{ display:none; } }

/* ---- Hero load sequence: masked line reveal + staggered supporting text ---- */
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.hero-title .line > span{
  display:block; transform: translateY(110%);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--i) * 90ms);
}
.hero-seq{
  opacity:0; transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i) * 90ms);
}
body.is-loaded .hero-title .line > span{ transform:none; }
body.is-loaded .hero-seq{ opacity:1; transform:none; }
/* Safety: without JS, or with motion reduced, the hero is simply visible */
html:not(.js) .hero-title .line > span,
html:not(.js) .hero-seq{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-title .line > span{ transform:none; }
  .hero-seq{ opacity:1; transform:none; }
}

/* ---- Cursor-following label over portfolio media (fine pointers only) ---- */
.cursor-label{
  position:fixed; top:0; left:0; z-index:60; pointer-events:none;
  padding:.5em 1em; border-radius:100px;
  background: var(--ink); color: var(--accent-ink);
  font-size:.78rem; font-weight:600; white-space:nowrap;
  opacity:0; transform: translate(-50%,-50%) scale(.7);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cursor-label.is-visible{ opacity:1; transform: translate(-50%,-50%) scale(1); }
@media (hover: none), (prefers-reduced-motion: reduce){ .cursor-label{ display:none; } }

.hero-cta-row{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.8rem; }
.btn-rect{
  display:inline-flex; align-items:center; gap:.5rem; padding:.9em 1.7em; border-radius:6px;
  background: var(--ink); color: var(--accent-ink); font-weight:600; font-size:.92rem;
  text-decoration:none; transition: background .25s, color .25s, transform .25s var(--ease);
}
.btn-rect:hover{ background: var(--accent); color: var(--ink); }
.btn-rect--sm{ padding:.55em 1.2em; font-size:.8rem; }
.text-link{
  color: var(--ink-dim); text-decoration:none; font-size:.92rem; font-weight:500;
  border-bottom:1px solid transparent; padding-bottom:2px; transition: border-color .2s, color .2s;
}
.text-link:hover{ color: var(--ink); border-color: var(--ink-dim); }

.hero-infobar{
  position:absolute; left:0; right:0; bottom:2rem; z-index:2; padding:0 clamp(1.2rem,4vw,3rem);
  display:flex; justify-content:space-between; font-family:"JetBrains Mono";
  font-size:.72rem; letter-spacing:.08em; color: var(--ink-dim);
}
@media (max-width:560px){ .hero-infobar{ flex-direction:column; gap:.4rem; bottom:1.2rem; } }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding: 1.1rem clamp(1.2rem,4vw,3rem); }
.logo{ font-weight:900; font-size:1.15rem; letter-spacing:.02em; text-decoration:none; }
.main-nav ul{ display:flex; gap:2rem; font-size:.86rem; }
.main-nav a{ text-decoration:none; color: var(--ink-dim); transition: color .2s; }
.main-nav a:hover{ color: var(--ink); }
.main-nav a[aria-current="page"]{ color: var(--accent); }
.header-actions{ display:flex; align-items:center; gap:1rem; }
@media (max-width: 860px){ .main-nav{ display:none; } }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; width:18px; margin:0 auto; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px){ .nav-toggle{ display:flex; } }

.mobile-nav{ overflow:hidden; max-height:0; opacity:0; transition: max-height .4s var(--ease), opacity .3s var(--ease); border-top:1px solid var(--line-soft); background: var(--bg-1); }
.mobile-nav.is-open{ max-height: 460px; opacity:1; }
.mobile-nav ul{ display:flex; flex-direction:column; padding: 1.2rem clamp(1.2rem,4vw,3rem) 0; gap:.2rem; }
.mobile-nav a{ display:block; padding:.8rem 0; text-decoration:none; font-size:1.05rem; border-bottom:1px solid var(--line-soft); }
.mobile-nav a[aria-current="page"]{ color: var(--accent); }
.mobile-nav .btn{ margin: 1.2rem clamp(1.2rem,4vw,3rem) 1.4rem; }

.site-footer{ border-top:1px solid var(--line-soft); padding: 2.4rem 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.footer-inner nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-inner a{ text-decoration:none; color: var(--ink-dim); font-size:.85rem; }
.footer-inner a:hover{ color: var(--ink); }
.footer-fine{ color: var(--ink-faint); font-size:.72rem; }

/* =========================================================
   Page hero (used on every inner page, shorter than home hero)
========================================================= */
.page-hero{ position:relative; padding: 8.5rem clamp(1.2rem,4vw,3rem) 4.5rem; overflow:hidden; border-bottom:1px solid var(--line-soft); }
.page-hero--media{ min-height: 62vh; display:flex; align-items:flex-end; }
.page-hero-media{ position:absolute; inset:0; z-index:-2; background: var(--bg); }
.page-hero-media video, .page-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-scrim{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(12,11,10,.95) 0%, rgba(12,11,10,.55) 45%, rgba(12,11,10,.3) 100%); }
.page-hero-inner{ position:relative; max-width: 800px; }
.page-hero h1{ font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-top:.7rem; }
.page-hero .lead{ margin-top:1.2rem; max-width:56ch; color: var(--ink-dim); font-size:1.05rem; }
.page-hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.breadcrumb{ font-size:.76rem; color: var(--ink-faint); margin-bottom:1rem; }
.breadcrumb a{ text-decoration:none; color: var(--ink-faint); }
.breadcrumb a:hover{ color: var(--ink-dim); }

/* =========================================================
   Section shell
========================================================= */
section{ padding: 6rem 0; }
.section--tight{ padding: 4.5rem 0; }
.section-head{ margin-bottom: 2.4rem; display:flex; justify-content:space-between; align-items:baseline; gap:2rem; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); max-width: 22ch; }
.section-head > div h2{ margin-top:.6rem; }
.section-head p{ color: var(--ink-dim); max-width:38ch; font-size:.98rem; }
.border-top{ border-top:1px solid var(--line-soft); }

/* =========================================================
   Manifesto
========================================================= */
.manifesto-inner{ max-width: 900px; }
.manifesto h2{ font-size: clamp(1.9rem, 4vw, 3rem); }
.manifesto p{ margin-top:1.2rem; color: var(--ink-dim); max-width:60ch; font-size:1.05rem; }

/* =========================================================
   Section background video (manifesto, closing CTA)
========================================================= */
.media-section{ position:relative; overflow:hidden; }
.media-bg{ position:absolute; inset:0; z-index:-2; background: var(--bg); }
.media-bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,11,10,.55) 0%, rgba(12,11,10,.82) 62%, rgba(12,11,10,.93) 100%);
}
.media-section.cta .media-bg::after{
  background:
    linear-gradient(100deg, rgba(12,11,10,.9) 0%, rgba(12,11,10,.55) 45%, rgba(12,11,10,.2) 75%),
    linear-gradient(180deg, rgba(12,11,10,.4) 0%, rgba(12,11,10,.7) 55%, rgba(12,11,10,.92) 100%);
}

/* =========================================================
   Service teaser rows (home + /services index alt)
========================================================= */
.teaser-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.teaser-row{
  display:grid; grid-template-columns: minmax(220px,.9fr) 1.5fr auto; gap:2rem; align-items:baseline;
  padding:1.5rem 0; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit; transition: color .25s;
}
.teaser-row__title{ display:block; font-size:1.15rem; font-weight:600; transition: color .25s; }
.teaser-row:hover .teaser-row__title{ color: var(--accent); }
.teaser-row__desc{ display:block; color: var(--ink-dim); font-size:.92rem; line-height:1.55; }
.teaser-row__arrow{
  font-size:1rem; color: var(--accent); opacity:0; transform: translate(-4px,4px);
  transition: opacity .25s, transform .25s var(--ease);
}
.teaser-row:hover .teaser-row__arrow{ opacity:1; transform:none; }
@media (max-width:760px){
  .teaser-row{ grid-template-columns: 1fr auto; gap:.5rem 1rem; align-items:start; }
  .teaser-row__desc{ grid-column: 1 / -1; }
}

/* =========================================================
   Services index grid (/services)
========================================================= */
.svc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
@media (max-width: 980px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .svc-grid{ grid-template-columns: 1fr; } }
.svc-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--bg-1); text-decoration:none; color:inherit; transition: transform .3s var(--ease), border-color .3s; }
.svc-card:hover{ transform: translateY(-4px); border-color: var(--ink-dim); }
.svc-card__media{ aspect-ratio: 4/3; overflow:hidden; background: var(--bg-2); }
.svc-card__media img,.svc-card__media video{ width:100%; height:100%; object-fit:cover; }
.svc-card__body{ padding: 1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.svc-card__num{ color: var(--ink-faint); font-size:.78rem; }
.svc-card__body h3{ font-size:1.2rem; }
.svc-card__body p{ color: var(--ink-dim); font-size:.92rem; flex:1; }

/* =========================================================
   Service detail page
========================================================= */
.svc-scope{ display:grid; grid-template-columns: repeat(2,1fr); gap: .7rem 2.5rem; }
@media (max-width:640px){ .svc-scope{ grid-template-columns:1fr; } }
.svc-scope li{ padding:.9rem 0; border-top:1px solid var(--line-soft); color: var(--ink-dim); font-size:.98rem; }
.svc-when{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
@media (max-width:820px){ .svc-when{ grid-template-columns:1fr; } }
.svc-when li{ border-top:1px solid var(--line-soft); padding-top:1rem; color: var(--ink-dim); font-size:.95rem; }
.svc-other{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width:820px){ .svc-other{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .svc-other{ grid-template-columns: 1fr; } }
.svc-other a{ display:block; border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem; text-decoration:none; color:inherit; transition: border-color .25s, transform .25s var(--ease); }
.svc-other a:hover{ border-color: var(--accent); transform: translateY(-3px); }
.svc-other .n{ color: var(--ink-faint); font-size:.72rem; }
.svc-other .t{ display:block; margin-top:.4rem; font-weight:700; font-size:1rem; }

/* =========================================================
   Steps (reused on service pages, home, process page)
========================================================= */
.steps{ display:grid; grid-template-columns: repeat(5,1fr); gap:1.5rem; }
.steps--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .steps, .steps--4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .steps, .steps--4{ grid-template-columns: 1fr; } }
.steps li{ border-top:1px solid var(--line-soft); padding-top:1rem; }
.steps .mono{ color: var(--accent); font-size:.85rem; }
.steps p{ margin-top:.6rem; color: var(--ink-dim); font-size:.94rem; }

/* ---- Open horizontal process scheme (home) ---- */
.process-open{ position:relative; padding-top:2.2rem; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.process-open::before{
  content:""; position:absolute; top:0; left:0; height:1px; width:0;
  background: var(--line); transition: width 1.4s var(--ease) .15s;
}
.process-open.in::before{ width:100%; }
@media (prefers-reduced-motion: reduce){ .process-open::before{ width:100%; transition:none; } }
@media (max-width:820px){ .process-open{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .process-open{ grid-template-columns:1fr; } }
.process-step__num{ display:block; margin-bottom:.7rem; color: var(--ink-faint); font-size:.9rem; transition: color .25s; }
.process-step:hover .process-step__num{ color: var(--accent); }
.process-step h3{ font-size:1.05rem; font-weight:600; margin-bottom:.4rem; }
.process-step p{ color: var(--ink-dim); font-size:.92rem; line-height:1.55; }

/* =========================================================
   Portfolio grid (home teaser + /projects full)
========================================================= */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: 2.6rem; }
.filter{ background:none; border:1px solid var(--line); color: var(--ink-dim); padding:.55em 1.2em; border-radius:100px; font-size:.82rem; cursor:pointer; transition: border-color .2s, color .2s, background .2s; }
.filter:hover{ color: var(--ink); border-color: var(--ink-dim); }
.filter.is-active{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.case-grid{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 1.4rem; }
@media (max-width: 900px){ .case-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .case-grid{ grid-template-columns: 1fr; } }

.case-card{ grid-column: span 3; position:relative; text-decoration:none; color:inherit; display:block; opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.case-card.in{ opacity:1; transform:none; }
.case-card.is-hidden{ display:none; }
.case-card--wide{ grid-column: span 4; }
.case-card--tall{ grid-column: span 2; }
@media (max-width:900px){ .case-card, .case-card--wide, .case-card--tall{ grid-column: span 1; } }
.case-card__media{ aspect-ratio: 4/5; overflow:hidden; border-radius:10px; }
.case-card--wide .case-card__media{ aspect-ratio: 16/10; }
.case-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.case-card:hover .case-card__media img{ transform: scale(1.03); }
.case-card__info{ padding-top: 1rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.case-card__info h3{ font-size: .98rem; font-weight:600; }
.case-card__meta{ display:block; margin-top:.3rem; color: var(--ink-faint); font-size:.76rem; white-space:nowrap; }
.case-card__arrow{
  color: var(--accent); font-size:1.05rem; line-height:1; flex:none;
  opacity:0; transform: translate(-3px,3px); transition: opacity .25s, transform .25s var(--ease);
}
.case-card:hover .case-card__arrow{ opacity:1; transform:none; }

/* =========================================================
   Case detail page
========================================================= */
.case-meta-row{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1rem; font-size:.85rem; color: var(--ink-dim); }
.case-meta-row span{ display:flex; align-items:center; gap:.5rem; }
.case-meta-row span::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--accent); }

.case-blocks{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
@media (max-width:860px){ .case-blocks{ grid-template-columns:1fr; } }
.case-block{ border-top:1px solid var(--line-soft); padding-top:1.1rem; }
.case-block h3{ font-family:"JetBrains Mono"; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); font-weight:600; }
.case-block p{ margin-top:.7rem; color: var(--ink-dim); font-size:.98rem; }

.case-gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .case-gallery{ grid-template-columns:1fr; } }
.case-gallery img{ width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius); border:1px solid var(--line); }

.case-materials{ background: var(--bg-1); border:1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.case-materials p{ color: var(--ink-dim); max-width:64ch; }

.case-next{ display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:1px solid var(--line-soft); padding-top:1.6rem; flex-wrap:wrap; }
.case-next a{ text-decoration:none; color:inherit; }
.case-next .lbl{ display:block; font-size:.72rem; color: var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.4rem; }
.case-next .t{ font-weight:700; font-size:1.05rem; }

/* =========================================================
   Production process rail
========================================================= */
.production-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center; }
@media (max-width: 920px){ .production-inner{ grid-template-columns:1fr; } }
.process-rail{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top: 2.2rem; font-family:"JetBrains Mono"; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-dim); }
.process-rail li{ display:flex; align-items:center; gap:.5rem; }
.process-rail li:not(:last-child)::after{ content:"→"; margin-left:.5rem; color: var(--ink-faint); }
.production-media{ display:flex; flex-direction:column; gap:1rem; }
.production-media video{ width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius: 10px; border:1px solid var(--line); background: var(--bg-1); }
.production-media__sub{ width:100%; aspect-ratio: 16/7; object-fit:cover; border-radius: 10px; border:1px solid var(--line); }
.texture-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
@media (max-width:760px){ .texture-grid{ grid-template-columns: repeat(2,1fr); } }
.texture-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; border:1px solid var(--line); }

/* =========================================================
   About
========================================================= */
.about-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center; }
@media (max-width: 920px){ .about-inner{ grid-template-columns:1fr; } }
.principles{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.principles li{ padding-left:1.3rem; position:relative; color: var(--ink-dim); font-size:.96rem; }
.principles li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background: var(--accent); }
.about-media{ width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius); border:1px solid var(--line); }

/* =========================================================
   CTA / Contact
========================================================= */
.cta-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:start; }
@media (max-width: 920px){ .cta-inner{ grid-template-columns:1fr; } }
.cta-copy h2{ font-size: clamp(2.1rem,4.4vw,3.4rem); }
.cta-copy p{ margin-top:1.3rem; max-width:44ch; color: var(--ink-dim); font-size:1.05rem; }
.cta-actions{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:2.2rem; }

.contact-form{ display:flex; flex-direction:column; gap:1.2rem; background: var(--bg-1); border:1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.form-row{ display:flex; flex-direction:column; gap:.5rem; }
.form-row label{ font-size:.8rem; color: var(--ink-dim); }
.form-row .optional{ color: var(--ink-faint); }
.form-row input,.form-row textarea{ background: var(--bg-2); border:1px solid var(--line); border-radius:10px; color: var(--ink); padding:.8em 1em; font-family:inherit; font-size:.96rem; resize: vertical; }
.form-row input:focus,.form-row textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-status{ font-size:.85rem; color: var(--accent); min-height:1.2em; }
.cta-fine{ margin-top: 4rem; color: var(--ink-faint); font-size:.72rem; letter-spacing:.06em; }

.contact-channels{ display:flex; flex-direction:column; gap:0; margin-top:2rem; border-top:1px solid var(--line); max-width:360px; }
.contact-channels a{ display:flex; align-items:center; gap:.8rem; border-bottom:1px solid var(--line-soft); padding:1rem .2rem; text-decoration:none; color:inherit; font-size:.95rem; transition: color .2s; }
.contact-channels a:hover{ color: var(--accent); }
.contact-channels svg{ width:17px; height:17px; flex:none; }
.contact-channels .ext{ margin-left:auto; color: var(--ink-faint); font-size:.85rem; }

/* =========================================================
   Legal: consent checkbox, privacy page, cookie notice
========================================================= */
.form-consent{ display:flex; align-items:flex-start; gap:.7rem; }
.form-consent input[type="checkbox"]{
  flex:none; width:17px; height:17px; margin-top:.15rem;
  accent-color: var(--accent); cursor:pointer;
}
.form-consent label{ font-size:.8rem; line-height:1.5; color: var(--ink-faint); cursor:pointer; }
.form-consent a{ color: var(--ink-dim); text-decoration:underline; text-underline-offset:2px; }
.form-consent a:hover{ color: var(--accent); }

.legal{ max-width:760px; }
.legal h2{ font-size:1.15rem; font-weight:600; margin-top:2.6rem; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ color: var(--ink-dim); font-size:.96rem; line-height:1.7; }
.legal p{ margin-top:.9rem; }
.legal ul{ margin-top:.9rem; display:flex; flex-direction:column; gap:.5rem; }
.legal li{ padding-left:1.2rem; position:relative; }
.legal li::before{ content:"—"; position:absolute; left:0; color: var(--ink-faint); }
.legal .updated{ font-family:"JetBrains Mono"; font-size:.74rem; color: var(--ink-faint); letter-spacing:.06em; }

.cookie-notice{
  position:fixed; left:50%; bottom:20px; transform: translateX(-50%) translateY(140%);
  z-index:70; width:min(760px, calc(100% - 32px));
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1.1rem 1.3rem; border-radius:12px;
  background: rgba(14,12,10,.94); border:1px solid var(--line);
  backdrop-filter: blur(8px);
  transition: transform .5s var(--ease);
}
.cookie-notice.is-visible{ transform: translateX(-50%) translateY(0); }
.cookie-notice p{ flex:1; min-width:260px; font-size:.84rem; line-height:1.55; color: var(--ink-dim); }
.cookie-notice a{ color: var(--ink); text-decoration:underline; text-underline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .cookie-notice{ transition:none; } }

/* ---- Footer with legal block ---- */
.footer-inner{ align-items:flex-start; }
.footer-brand{ display:flex; flex-direction:column; gap:.5rem; }
.footer-legal{ display:flex; flex-direction:column; gap:.45rem; text-align:right; }
.footer-legal a{ font-size:.8rem; color: var(--ink-dim); text-decoration:underline; text-underline-offset:2px; }
.footer-legal a:hover{ color: var(--accent); }
.footer-legal span{ font-size:.7rem; color: var(--ink-faint); line-height:1.5; }
@media (max-width:760px){ .footer-legal{ text-align:left; } }