/* =====================================================================
   Faenomen — design system v2
   References: Van Cleef & Arpels (air, restraint) + random.studio
   (its type system, applied wholesale: one face, one weight, three sizes,
   sentence case, left-aligned text).
   Type: ONY Sans (brand face from the showreel) for everything;
   (Kommuna accent retired — one typeface throughout, by request) for numbers, dates and the
   "Step into Faenomen." sign-off.
   ===================================================================== */

@font-face{ font-family:"ONY Sans"; src:url("fonts/ONYSans-ExtraLight.woff2") format("woff2"), url("fonts/ONYSans-ExtraLight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"ONY Sans"; src:url("fonts/ONYSans-Light.woff2") format("woff2"), url("fonts/ONYSans-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"ONY Sans"; src:url("fonts/ONYSans-Regular.woff2") format("woff2"), url("fonts/ONYSans-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"ONY Sans"; src:url("fonts/ONYSans-Medium.woff2") format("woff2"), url("fonts/ONYSans-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"ONY Sans"; src:url("fonts/ONYSans-Bold.woff2") format("woff2"), url("fonts/ONYSans-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* palette — porcelain white, a greige veil for panels, warm ink */
  --paper:#fbfaf7;
  --veil:#efece6;
  --ink:#161512;
  --ink-soft:#5f5b53;
  --stone:#8e887c;
  --line:#dcd7cd;
  --accent:#3d5641;
  --on-media:#ffffff;

  --sans:"ONY Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:var(--sans); /* single-typeface system: numbers and sign-offs use ONY Sans too */
  /* legacy aliases so older markup keeps resolving */
  --serif:var(--sans);

  /* ---------- type system: random.studio, rebuilt in ONY Sans ----------
     Measured on random.studio: one face, one weight (300), three sizes.
       XL  40/47  -0.03em    manifesto, headings, statements
       L   23/29  -0.0087em  captions, leads, project titles, footer
       M   16/22  +0.0125em  nav, labels, body, meta
     No uppercase, no bold: hierarchy comes from size and grey only.
     (The FAENOMEN wordmark keeps its bold caps — set by the client.) */
  --fs-xl: clamp(1.75rem, 1.05rem + 1.95vw, 2.5rem); --lh-xl:1.175; --ls-xl:-0.03em;
  --fs-l:  clamp(1.125rem, 0.98rem + 0.55vw, 1.4375rem); --lh-l:1.26; --ls-l:-0.0087em;
  --fs-m:  1rem;                                      --lh-m:1.375; --ls-m:0.0125em;
  --w: 300;

  /* old step names now resolve onto the three sizes */
  --fs-display:var(--fs-xl); --lh-display:var(--lh-xl); --ls-display:var(--ls-xl);
  --fs-h1:var(--fs-xl);      --lh-h1:var(--lh-xl);      --ls-h1:var(--ls-xl);
  --fs-h2:var(--fs-xl);      --lh-h2:var(--lh-xl);      --ls-h2:var(--ls-xl);
  --fs-statement:var(--fs-xl); --lh-statement:var(--lh-xl); --ls-statement:var(--ls-xl);
  --fs-lead:var(--fs-l);     --lh-lead:var(--lh-l);     --ls-lead:var(--ls-l);
  --fs-h3:var(--fs-l);       --lh-h3:var(--lh-l);       --ls-h3:var(--ls-l);
  --fs-body:var(--fs-m);     --lh-body:var(--lh-m);     --ls-body:var(--ls-m);
  --fs-small:var(--fs-m);    --lh-small:var(--lh-m);
  --fs-label:var(--fs-m);    --lh-label:var(--lh-m);    --ls-label:var(--ls-m);
  --fs-meta:var(--fs-m);                                --ls-meta:var(--ls-m);

  /* legacy tokens still referenced by generated pages */
  --fs-hero:var(--fs-display); --lh-hero:var(--lh-display); --ls-hero:var(--ls-display);
  --ls-label-wide:var(--ls-m);

  --gutter: clamp(1rem, 3vw, 2.75rem);
  --max: 1600px;
  --header-h: 4.25rem;
  --section: clamp(5rem, 11vw, 10rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-inline:var(--gutter);
  overflow-x:clip; overflow-wrap:break-word;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--sans); font-weight:300; margin:0; text-wrap:balance; color:var(--ink); }
p{ margin:0; }
em{ font-style:normal; color:var(--accent); }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:1px solid currentColor; outline-offset:4px; }

.wrap{ max-width:var(--max); margin-inline:auto; }
.bleed{ margin-inline:calc(var(--gutter) * -1); }
.label, .cat-tag{
  font-family:var(--sans); font-weight:500; font-size:var(--fs-label); line-height:var(--lh-label);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft);
}
.num{ font-family:var(--sans); font-weight:400; font-size:var(--fs-meta); letter-spacing:0.04em; color:var(--stone); font-variant-numeric:tabular-nums; }
.link-line{
  font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  text-decoration:none; padding-bottom:0.35rem;
  background:linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat;
  transition:background-size .5s var(--ease);
}
.link-line:hover{ background-size:0% 1px; background-position:right bottom; }

/* ---------- reveal (visible at rest, only a small settle) ---------- */
.reveal{ transform:translateY(14px); transition:transform 1s var(--ease); }
.reveal.is-visible{ transform:none; }

/* =====================================================================
   HEADER — VCA split: nav left, wordmark centred, language right
   ===================================================================== */
header.site{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:calc(env(safe-area-inset-top, 0px) + 0.2rem) var(--gutter) 0;
  color:var(--ink); background:rgba(251,250,247,0.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
header.site .wrap, header.site .bar{
  max-width:var(--max); margin-inline:auto; height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
}
header.site .nav-group{ display:contents; }
html.scrolled header.site{ border-bottom-color:var(--line); }
header.site .mark, footer .mark{
  grid-column:2; justify-self:center;
  /* wordmark set like the brand reference: bold caps, tight natural spacing */
  font-family:var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:0.01em; line-height:1;
  text-transform:uppercase; text-decoration:none; color:inherit;
  white-space:nowrap;
}
nav.index{ grid-column:1; grid-row:1; display:flex; gap:clamp(1.1rem,2vw,2.1rem); flex-wrap:wrap; }
nav.index a{
  font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  text-decoration:none; color:inherit; opacity:0.72; transition:opacity .3s ease; white-space:nowrap;
  padding-block:0.4rem;
}
nav.index a:hover, nav.index a.active{ opacity:1; }
.header-end{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:1.25rem; }
.menu-btn{
  display:none; grid-column:1; justify-self:start;
  background:none; border:0; padding:0.5rem 0; cursor:pointer; color:inherit;
  font:500 var(--fs-label)/1 var(--sans); letter-spacing:var(--ls-label); text-transform:uppercase;
}

/* language switch — two quiet words, the active one underlined */
.lang-toggle{ display:flex; gap:0.9rem; font-family:var(--sans); }
.lang-toggle button{
  background:none; border:0; padding:0.3rem 0; cursor:pointer; color:inherit; opacity:0.5;
  font:500 var(--fs-label)/1 var(--sans); letter-spacing:var(--ls-label);
  border-bottom:1px solid transparent; transition:opacity .3s ease, border-color .3s ease;
}
.lang-toggle button.active{ opacity:1; border-bottom-color:currentColor; }
.lang-toggle .pill{ display:none; }

/* home: header sits transparent over the film, white type, until the film is scrolled past */
.home header.site{ background:transparent; color:var(--on-media); -webkit-backdrop-filter:none; backdrop-filter:none; }
html.past-hero .home header.site{
  background:rgba(251,250,247,0.94); color:var(--ink); border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
}

/* inner pages clear the fixed bar */
.page:not(.home) main{ padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem)); }

@media (max-width:900px){
  .menu-btn{ display:block; }
  nav.index{
    position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; justify-content:center;
    align-items:center; gap:1.4rem; background:var(--paper); color:var(--ink);
    opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s linear .45s;
  }
  nav.index a{ font-weight:300; font-size:clamp(1.9rem,8vw,2.6rem); letter-spacing:-0.02em; text-transform:none; opacity:1; }
  html.menu-open nav.index{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
  html.menu-open header.site, html.menu-open .home header.site{ color:var(--ink); background:transparent; border-bottom-color:transparent; }
  html.menu-open{ overflow:hidden; }
  header.site .mark{ font-size:1rem; }
}

/* =====================================================================
   HOME · HERO FILM
   ===================================================================== */
.hero{
  position:relative; margin-inline:calc(var(--gutter) * -1);
  height:100vh; height:100svh; min-height:30rem; overflow:hidden; background:#0d0d0c; color:var(--on-media);
}
.hero video{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.hero::after{ /* a whisper of shade top and bottom so the white type always reads */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,0.36) 100%);
}
.hero-foot{
  position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:calc(env(safe-area-inset-bottom,0px) + clamp(1.1rem,2.6vw,2rem));
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:1rem;
}
.hero-foot .label{ color:inherit; opacity:0.9; }
.hero-scroll{ grid-column:2; justify-self:center; color:inherit; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.hero-scroll::after{ content:""; width:1px; height:2.4rem; background:currentColor; opacity:0.7; transform-origin:top; animation:drip 2.4s var(--ease) infinite; }
@keyframes drip{ 0%{ transform:scaleY(0); } 45%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }
.hero-ctrl{ grid-column:3; justify-self:end; display:flex; gap:1.4rem; }
.hero-ctrl button{
  background:none; border:0; padding:0.3rem 0; cursor:pointer; color:inherit;
  font:500 var(--fs-label)/1 var(--sans); letter-spacing:var(--ls-label); text-transform:uppercase; opacity:0.85;
}
.hero-ctrl button:hover{ opacity:1; }
@media (max-width:600px){
  .hero-foot{ grid-template-columns:1fr auto; }
  .hero-foot > .label{ display:none; }
  .hero-scroll{ grid-column:1; justify-self:start; }
  .hero-ctrl{ grid-column:2; }
}

/* =====================================================================
   HOME · MANIFESTO
   ===================================================================== */
.manifesto{ padding-block:var(--section) calc(var(--section) * 0.9); }
.manifesto .eyebrow{ display:block; text-align:center; margin-bottom:clamp(1.6rem,3vw,2.6rem); }
/* studio name follows the wordmark: bold, tight */
.studio-name{ font-weight:700; letter-spacing:0.01em; color:var(--ink); }
.manifesto h1{
  font-weight:200; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display);
  text-align:center; max-width:11ch; margin-inline:auto;
}
.manifesto-intro{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(1rem,2vw,2rem);
  margin-top:clamp(4rem,9vw,8.5rem);
}
.manifesto-intro .aside{ grid-column:1 / span 3; display:flex; flex-direction:column; gap:0.5rem; padding-top:0.55rem; }
.manifesto-intro .aside .num{ font-size:0.95rem; color:var(--ink); }
.manifesto-intro .body{ grid-column:5 / span 7; display:flex; flex-direction:column; gap:1.6rem; }
.manifesto-intro .lead{
  font-weight:300; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); text-wrap:balance;
}
.manifesto-intro .body p:not(.lead){ max-width:38rem; color:var(--ink-soft); font-size:var(--fs-lead); line-height:var(--lh-lead); letter-spacing:var(--ls-lead); font-weight:300; }
.manifesto-statement{
  margin:clamp(4.5rem,10vw,9rem) auto 0; max-width:31ch; text-align:center;
  font-weight:300; font-size:var(--fs-statement); line-height:var(--lh-statement); letter-spacing:var(--ls-statement);
  text-wrap:pretty;
}
.signoff{
  margin-top:clamp(3rem,6vw,5rem); display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.signoff::before{ content:""; width:1px; height:3.5rem; background:var(--line); }
.signoff p{ font-family:var(--sans); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase; }
@media (max-width:800px){
  .manifesto-intro{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .manifesto-intro .aside, .manifesto-intro .body{ grid-column:1; }
  .manifesto-intro .aside{ flex-direction:row; justify-content:space-between; padding-top:0; border-top:1px solid var(--line); padding-top:0.9rem; }
}

/* =====================================================================
   SECTION HEADS (shared)
   ===================================================================== */
.section-head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem;
  margin-bottom:clamp(3rem,6vw,5.5rem);
}
.section-head h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); }
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.4rem 1.6rem; }
.filters a{ font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none; color:var(--ink-soft); padding-block:0.35rem; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease; }
.filters a:hover, .filters a.active{ color:var(--ink); border-bottom-color:currentColor; }

/* =====================================================================
   HOME · DIRECTIONS (VCA "creations" row)
   ===================================================================== */
.directions{ padding-block:var(--section) 0; border-top:1px solid var(--line); }
.dir-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem); }
.dir{ text-decoration:none; display:flex; flex-direction:column; gap:1.1rem; }
.dir .frame{ aspect-ratio:4/5; overflow:hidden; background:var(--veil); }
.dir .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.dir .cap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.45rem; }
.dir h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); font-weight:400; }
@media (max-width:900px){ .dir-row{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2.5rem; } }

/* =====================================================================
   HOME · PROJECTS — random.studio stagger on a 12-col grid
   each card sets --col (grid placement) and --ar (frame ratio) inline
   ===================================================================== */
.projects{ padding-block:var(--section) 0; }
.manifesto + .projects{ border-top:1px solid var(--line); }
.proj-grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1rem,2vw,2rem); row-gap:clamp(4rem,9vw,8rem); align-items:end;
}
.proj{ grid-column:var(--col, span 6); text-decoration:none; display:flex; flex-direction:column; gap:1rem; }
.proj .frame{ aspect-ratio:var(--ar, 3/2); overflow:hidden; background:var(--veil); max-width:100%; }
.proj .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.proj .cap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.2rem 1rem; align-items:baseline; }
.proj h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); font-weight:400; }
.proj .proj-sub{ grid-column:1; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-soft); }
.proj .cat-tag{ grid-column:2; grid-row:1; }
.proj.lift{ align-self:start; }
/* the feature bleeds edge to edge; its caption stays in the column */
.proj.feature{ grid-column:1 / -1; }
.proj.feature .frame{ margin-inline:calc(var(--gutter) * -1); max-width:none; }
@media (max-width:900px){
  .proj-grid{ grid-template-columns:minmax(0,1fr); row-gap:3.5rem; }
  .proj{ grid-column:1; }
  .proj.portrait{ width:78%; }
  .proj.portrait.right{ margin-left:auto; }
}

/* =====================================================================
   HOME · CLIENTS
   ===================================================================== */
.clients{ padding-block:0; }
.manifesto + .clients{ margin-top:0; }
.trust-bar{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.8rem,3.5vw,2.8rem); padding-block:clamp(2.5rem,5vw,4rem); border-block:1px solid var(--line); }
.trust-bar .trust-label{ font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:var(--ink-soft); }
/* every logo is pre-sized onto the same 480×192 canvas (equal optical area,
   one ink colour), so the grid itself only has to lay out identical boxes */
.trust-list{
  list-style:none; margin:0; padding:0; width:100%; max-width:76rem;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(0.75rem,2vw,1.75rem) clamp(0.5rem,1.6vw,1.5rem);
}
.trust-list li{ display:block; }
.trust-list img{ display:block; width:100%; height:auto; aspect-ratio:480/192; opacity:0.82; transition:opacity .3s ease; }
.trust-list li:hover img{ opacity:1; }
@media (max-width:760px){ .trust-list{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:1rem; } }

/* =====================================================================
   HOME · CONTACT CALL
   ===================================================================== */
.call{ text-align:center; padding-block:0 var(--section); display:flex; flex-direction:column; align-items:center; gap:1.8rem; }
.call h2{ font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); font-weight:200; max-width:14ch; }
.call p{ max-width:34rem; color:var(--ink-soft); }

/* =====================================================================
   FOOTER — a wall-wide wordmark, then the fine print
   ===================================================================== */
footer{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem) calc(env(safe-area-inset-bottom,0px) + 1.5rem); margin-top:var(--section); }
.home footer, footer.flush{ margin-top:0; }
footer .wrap{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2rem clamp(1rem,2vw,2rem); align-items:start; }
footer .foot-word{
  grid-column:1 / -1; font-weight:200; text-transform:uppercase; letter-spacing:-0.02em; line-height:0.8;
  font-size:clamp(3rem, 15.2vw, 15.5rem); text-align:center; white-space:nowrap; overflow:hidden;
  margin-bottom:clamp(1.5rem,4vw,3.5rem);
}
footer .foot-col{ grid-column:span 3; display:flex; flex-direction:column; gap:0.55rem; font-size:var(--fs-small); }
footer .foot-col a{ text-decoration:none; color:var(--ink-soft); transition:color .3s ease; }
footer .foot-col a:hover{ color:var(--ink); }
footer .foot-col .label{ margin-bottom:0.4rem; }
footer .foot-sign{ grid-column:span 6; justify-self:end; text-align:right; display:flex; flex-direction:column; gap:0.55rem; }
footer .foot-sign p:first-child{ font-family:var(--sans); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase; }
footer .meta{ color:var(--stone); font-size:var(--fs-small); }
/* legacy footer (mark + meta only) */
footer .wrap > .mark{ grid-column:1 / span 6; justify-self:start; }
footer .wrap > .meta{ grid-column:7 / -1; justify-self:end; }
@media (max-width:800px){
  footer .foot-col{ grid-column:span 6; }
  footer .foot-sign{ grid-column:1 / -1; justify-self:start; text-align:left; }
}

/* =====================================================================
   INNER PAGES — projects, directions, categories, studio
   ===================================================================== */
.cat-tag{ display:inline-block; }
.project-hero-frame{
  margin-inline:calc(var(--gutter) * -1); overflow:hidden; background:var(--veil);
  height:clamp(22rem, 72vh, 52rem);
}
.project-hero-frame img{ width:100%; height:100%; object-fit:cover; max-width:none; }
.project-head{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1.2rem clamp(1rem,2vw,2rem); align-items:end;
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2rem,4vw,3.5rem); border-bottom:1px solid var(--line);
}
.project-head > div{ grid-column:1 / span 7; display:flex; flex-direction:column; gap:1rem; }
.project-head h1{ font-weight:200; font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); text-align:left; }
.project-head .sub{ grid-column:9 / -1; font-size:var(--fs-lead) !important; line-height:var(--lh-lead); font-weight:300; max-width:none !important; }
.project-body{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2rem clamp(1rem,2vw,2rem);
  padding-block:clamp(2.5rem,5vw,4.5rem);
}
.project-body > div:first-child{ grid-column:1 / span 6; }
.project-body > div:first-child p{ font-weight:300; font-size:var(--fs-lead); line-height:var(--lh-lead); letter-spacing:var(--ls-lead); }
.project-body > div:last-child{ grid-column:8 / -1; color:var(--ink-soft); }
.project-body p + p{ margin-top:1.1rem; }
.tags{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.tags span{ font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; border:1px solid var(--line); padding:0.55rem 0.85rem 0.5rem; color:var(--ink-soft); }
.project-nav{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem;
  padding-block:1.6rem; border-top:1px solid var(--line);
}
.project-nav a{ font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none; color:var(--ink-soft); transition:color .3s ease; }
.project-nav a:hover{ color:var(--ink); }
@media (max-width:800px){
  .project-head > div, .project-head .sub, .project-body > div:first-child, .project-body > div:last-child{ grid-column:1 / -1; }
}

/* category pages */
.projects-intro{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; margin-bottom:1.4rem; }
.projects-intro h2{ font-weight:200; font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); }
.all-link{ font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none; color:var(--ink-soft); }
.all-link:hover{ color:var(--ink); }
.cat-page-intro{ max-width:34rem; margin:0 auto clamp(3.5rem,7vw,6rem); text-align:center; color:var(--ink-soft); font-size:var(--fs-lead); line-height:var(--lh-lead); font-weight:300; }
.cat-chip{ text-decoration:none; }
.plates{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(3rem,6vw,5rem) clamp(1rem,2vw,2rem); align-items:end; margin-bottom:clamp(3rem,6vw,5rem); }
.plate{ grid-column:span 6; margin:0; }
.plate:nth-child(3n+1){ grid-column:1 / span 7; }
.plate:nth-child(3n+2){ grid-column:9 / span 4; }
.plate:nth-child(3n+3){ grid-column:3 / span 6; }
.plate-link{ text-decoration:none; display:flex; flex-direction:column; gap:1rem; }
.plate .frame{ aspect-ratio:4/3; overflow:hidden; background:var(--veil); }
.plate:nth-child(3n+2) .frame{ aspect-ratio:4/5; }
.plate .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.plate figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.plate h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:400; }
.plate .sub{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:0.2rem; }
@media (max-width:800px){ .plate, .plate:nth-child(n){ grid-column:1 / -1; } }

/* studio page */
#about, #clients, #contact{ padding-block:clamp(2rem,5vw,4rem) clamp(4rem,8vw,7rem); }
#clients, #contact{ border-top:1px solid var(--line); padding-top:clamp(4rem,8vw,7rem); }
.about-grid, .clients-grid, .contact-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3rem clamp(1rem,2vw,2rem); align-items:start; }
.about-grid > div{ grid-column:1 / span 7; display:flex; flex-direction:column; gap:2.2rem; }
.about-grid h2, .contact-grid h2{ font-weight:200; font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); text-align:left; }
.copy{ display:flex; flex-direction:column; gap:1.1rem; color:var(--ink-soft); max-width:38rem; }
.about-grid blockquote{ grid-column:9 / -1; margin:0; padding-top:1rem; border-top:1px solid var(--line); }
.about-grid blockquote p{ font-weight:300; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.clients-grid > div:first-child{ grid-column:1 / span 6; display:flex; flex-direction:column; gap:1.1rem; font-weight:300; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.client-strip{ grid-column:8 / -1; display:flex; flex-direction:column; }
.client-strip span{ font-weight:300; font-size:var(--fs-h2); line-height:1.25; letter-spacing:var(--ls-h2); padding-block:0.6rem; border-bottom:1px solid var(--line); }
.contact-grid > div:first-child{ grid-column:1 / span 6; }
.contact-grid > div:last-child{ grid-column:8 / -1; }
.contact-grid .copy{ gap:1.6rem; }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.6rem; }
.field label{ font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); }
.field input, .field textarea{
  font:300 1.15rem/1.4 var(--sans); color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:0.6rem 0; border-radius:0; transition:border-color .3s ease;
}
.field textarea{ min-height:7rem; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.submit{
  background:var(--ink); color:var(--paper); border:0; cursor:pointer; padding:1.05rem 2rem 1rem;
  font:500 var(--fs-label)/1 var(--sans); letter-spacing:var(--ls-label); text-transform:uppercase; transition:opacity .3s ease;
}
.submit:hover{ opacity:0.82; }
.confirm{ font-weight:300; font-size:var(--fs-lead); }
@media (max-width:800px){
  .about-grid > div, .about-grid blockquote, .clients-grid > div:first-child, .client-strip, .contact-grid > div:first-child, .contact-grid > div:last-child{ grid-column:1 / -1; }
}

/* custom cursor tag (desktop) */
.cursor-tag{
  position:fixed; left:0; top:0; z-index:70; pointer-events:none; opacity:0;
  padding:0.6rem 0.9rem 0.55rem; background:var(--ink); color:var(--paper);
  font:500 var(--fs-label)/1 var(--sans); letter-spacing:var(--ls-label); text-transform:uppercase;
  transition:opacity .25s ease;
}
.cursor-tag.is-active{ opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor-tag{ display:none !important; } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation:none !important; }
  .reveal{ transform:none; }
}

/* =====================================================================
   RANDOM.STUDIO TYPE SYSTEM — applied across every component
   Placed last so it settles every earlier rule; revert = delete block.
   ===================================================================== */
body{ font-weight:var(--w); }
h1,h2,h3,p,li,a,button,input,textarea,label,span{ font-weight:var(--w); }

/* three styles, nothing else */
.t-xl, .manifesto h1, .manifesto-statement, .section-head h2, .call h2,
.project-head h1, .projects-intro h2, .about-grid h2, .contact-grid h2{
  font-size:var(--fs-xl); line-height:var(--lh-xl); letter-spacing:var(--ls-xl); font-weight:var(--w);
}
.t-l, .manifesto-intro .lead, .manifesto-intro .body p:not(.lead), .proj h3, .proj .proj-sub,
.plate h3, .plate .sub, .dir h3, .project-head .sub, .project-body p, .cat-page-intro,
.about-grid blockquote p, .clients-grid > div:first-child, .client-strip span, .confirm,
footer .foot-col a, footer .foot-sign p:first-child, .field input, .field textarea{
  font-size:var(--fs-l); line-height:var(--lh-l); letter-spacing:var(--ls-l); font-weight:var(--w);
}
.t-m, .label, .cat-tag, .num, .link-line, nav.index a, .menu-btn, .lang-toggle button, .hero-ctrl button,
.filters a, .trust-bar .trust-label, .tags span, .project-nav a, .all-link, .field label, .submit,
.cursor-tag, footer .meta, footer .foot-col .label, .call p, .copy{
  font-size:var(--fs-m); line-height:var(--lh-m); letter-spacing:var(--ls-m); font-weight:var(--w);
  text-transform:none;
}
/* hierarchy by grey, not by weight */
.label, .cat-tag, .num, .proj .proj-sub, .plate .sub, .manifesto-intro .body p:not(.lead),
.trust-bar .trust-label, footer .foot-col .label, footer .meta, .field label, .project-head .sub,
.project-body > div:last-child, .cat-page-intro{ color:var(--ink-soft); }
.manifesto-intro .aside .num{ font-size:var(--fs-m); color:var(--ink); }

/* wordmark + studio name stay bold caps (client brief), everything else sentence case */
header.site .mark, footer .mark{ font-weight:700; text-transform:uppercase; letter-spacing:0.01em; }
.studio-name{ font-weight:700; text-transform:uppercase; letter-spacing:0.01em; }

/* left-aligned, like random.studio — text sits on the grid's left edge */
.manifesto h1{ text-align:left; max-width:18ch; margin-inline:0; }
.manifesto-statement{ text-align:left; margin-inline:0; max-width:34ch; }
.section-head{ flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:baseline; text-align:left; gap:1rem 2rem; }
.section-head .label{ flex-basis:100%; }
.filters{ justify-content:flex-start; gap:0.3rem 1.4rem; }
.filters a{ border-bottom:0; padding-block:0; }
.filters a.active, .filters a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:0.25em; text-decoration-thickness:1px; }
.trust-bar{ align-items:flex-start; }
.call{ text-align:left; align-items:flex-start; }
.call h2{ max-width:18ch; }
.projects-intro{ align-items:flex-start; text-align:left; }
.cat-page-intro{ text-align:left; margin-inline:0; }
.link-line{ padding-bottom:0.2rem; }
nav.index{ gap:clamp(1rem,1.8vw,1.75rem); }
.lang-toggle{ gap:0.75rem; }
.lang-toggle button{ border-bottom:0; }
.lang-toggle button.active{ text-decoration:underline; text-underline-offset:0.25em; text-decoration-thickness:1px; }
.tags span{ padding:0.35rem 0.75rem; }
.submit{ padding:0.85rem 1.6rem; }
.proj .cap{ gap:0 1rem; }
@media (max-width:900px){
  nav.index a{ font-size:var(--fs-xl); line-height:var(--lh-xl); letter-spacing:var(--ls-xl); }
  .section-head{ flex-direction:column; align-items:flex-start; }
}
footer .foot-sign p:first-child{ text-transform:none; }
.projects + .call{ margin-top:var(--section); }
/* no hairline dividers between home sections — space alone separates them */
.trust-bar{ border-block:0; padding-block:0; }
.manifesto + .projects, .directions{ border-top:0; }
.manifesto-intro .aside{ border-top:0; }
.clients + .projects{ padding-top:var(--section); }
.manifesto{ padding-bottom:var(--section); }
/* one left edge for the whole manifesto: headline, intro, statement and the
   section labels below all start on the gutter line; the founding year moves
   to the right edge as quiet meta */
.manifesto-intro .body{ grid-column:1 / span 7; grid-row:1; }
.manifesto-intro .aside{ grid-column:10 / -1; grid-row:1; padding-top:0.3rem; text-align:right; align-items:flex-end; }
.manifesto-intro .body p, .manifesto-intro .lead{ max-width:36rem; }
@media (max-width:800px){
  .manifesto-intro .body{ grid-column:1; grid-row:1; }
  .manifesto-intro .aside{ grid-column:1; grid-row:2; text-align:left; align-items:flex-start; flex-direction:row; justify-content:flex-start; gap:0.75rem; }
}
/* manifesto: every paragraph speaks at heading size, with more air between them */
.manifesto{ padding-block:calc(var(--section) * 1.25); }
.manifesto-intro{ margin-top:clamp(4.5rem,10vw,9rem); }
.manifesto-intro .body{ grid-column:1 / span 9; gap:clamp(2rem,4vw,3.5rem); }
.manifesto-intro .lead, .manifesto-intro .body p, .manifesto-intro .body p:not(.lead){
  font-size:var(--fs-xl); line-height:var(--lh-xl); letter-spacing:var(--ls-xl); color:var(--ink); max-width:34ch;
}
.manifesto-statement{ margin-top:clamp(4.5rem,10vw,9rem); }

/* clients: a bigger block — logos run the full content width, more room around */
.trust-bar{ gap:clamp(2.5rem,5vw,4rem); }
.trust-list{ max-width:none; gap:clamp(1.5rem,3.5vw,3rem) clamp(0.75rem,2vw,2rem); }
.clients + .projects{ padding-top:calc(var(--section) * 1.25); }

/* =====================================================================
   MANIFESTO — variant A (random.studio run-on), with extra air
   Two paragraphs at XL in one narrow column; the opening phrase of each
   is ink, the rest a light grey, so the eye catches the two thoughts first.
   ===================================================================== */
.manifesto{ padding-block:calc(var(--section) * 1.5); }
.manifesto .run{ max-width:31ch; font-size:var(--fs-xl); line-height:1.24; letter-spacing:var(--ls-xl); }
.manifesto .run + .run{ margin-top:clamp(5rem,12vw,11rem); }
.manifesto .run h1, .manifesto .run strong, .manifesto .run p{
  display:inline; font:inherit; letter-spacing:inherit; line-height:inherit; margin:0; max-width:none; text-align:left;
}
.manifesto .run h1, .manifesto .run strong{ color:var(--ink); font-weight:var(--w); }
.manifesto .run p{ color:#a9a49a; }
.manifesto + .clients{ padding-top:0; margin-top:0; }
.clients + .projects{ padding-top:calc(var(--section) * 1.4); }

/* header: menu centred on its own line above the FAENOMEN wordmark (desktop);
   the language switch keeps the right edge on the menu's line */
@media (min-width:901px){
  :root{ --header-h:5.75rem; }
  header.site .wrap, header.site .bar{
    grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto;
    align-content:center; row-gap:0.7rem; height:var(--header-h);
  }
  nav.index{ grid-column:2; grid-row:1; justify-self:center; justify-content:center; }
  nav.index a{ padding-block:0; }
  header.site .mark{ grid-column:2; grid-row:2; justify-self:center; }
  .header-end{ grid-column:3; grid-row:1; justify-self:end; }
}

/* pure white ground everywhere */
:root{ --paper:#ffffff; --veil:#f2f2f0; }
header.site, html.past-hero .home header.site{ background:rgba(255,255,255,0.95); }
.home header.site{ background:transparent; }
html.past-hero .home header.site{ background:rgba(255,255,255,0.95); }

/* "Среди клиентов" set as a section heading, same as "Проекты" */
.trust-bar .trust-label{
  font-size:var(--fs-xl); line-height:var(--lh-xl); letter-spacing:var(--ls-xl);
  font-weight:var(--w); color:var(--ink); text-transform:none; margin:0;
}

/* clients: larger logos (redrawn bigger on their canvases) and a taller block */
.trust-bar{ gap:clamp(3rem,6vw,5rem); }
.trust-list{ gap:clamp(2rem,4.5vw,4rem) clamp(1rem,2.4vw,2.5rem); }
.trust-list img{ opacity:0.88; }
.manifesto + .clients{ padding-bottom:clamp(1rem,3vw,3rem); }
/* logos one step larger again: tighter columns give each cell more width */
.trust-list{ gap:clamp(2rem,4.5vw,4rem) clamp(0.9rem,2vw,2rem); }
.proj .cap{ grid-template-columns:minmax(0,1fr); }

/* =====================================================================
   AIR — spacing rebuilt on random.studio's measurements (at 1440px):
   gutter 40px; one block every 216px (15vw); hero → text ≈250px;
   manifesto in a single centred column (≈616px); one project per row,
   each 31–52% wide and shifted along the row; small captions ≈20px under
   the image; a long pause (≈380px) before the footer.
   ===================================================================== */
:root{ --air:clamp(4.5rem, 15vw, 15rem); }

/* manifesto: one centred reading column, text left-aligned inside it */
.manifesto{ padding-block:calc(var(--air) * 1.15) var(--air); }
.manifesto .wrap{ max-width:min(100%, 38.5rem); margin-inline:auto; }
.manifesto .run{ max-width:none; }
.manifesto .run + .run{ margin-top:calc(var(--air) * 0.75); }

/* clients */
.manifesto + .clients{ padding-block:0; }
.trust-bar{ gap:calc(var(--air) * 0.4); }

/* projects: a single file of pictures drifting left and right */
.clients + .projects{ padding-top:var(--air); }
.projects .section-head{ margin-bottom:var(--air); }
.proj-grid{ display:flex; flex-direction:column; align-items:flex-start; row-gap:var(--air); }
.proj, .proj.portrait, .proj.portrait.right{ grid-column:auto; width:calc(var(--w, 50) * 1%); margin-left:calc(var(--x, 0) * 1%); gap:1.2rem; }
.proj .cap{ max-width:24.5rem; }

/* contact call sits in the manifesto's column, after a long pause */
.projects + .call{ margin-top:calc(var(--air) * 1.3); }
.call{ max-width:min(100%, 38.5rem); margin-inline:auto; padding-bottom:calc(var(--air) * 1.4); }

@media (max-width:900px){
  .proj, .proj.portrait, .proj.portrait.right{ width:100%; margin-left:0; }
  .proj.portrait, .proj.portrait.right{ width:78%; }
  .proj-grid{ align-items:stretch; }
  .proj.portrait:not(.right){ align-self:flex-start; }
  .proj.portrait.right{ align-self:flex-end; }
}

/* header v3: one row — FAENOMEN centred, menu + language right-aligned,
   bold like the wordmark, one equal gap between every item */
@media (min-width:901px){
  :root{ --header-h:4.5rem; --nav-gap:clamp(1.25rem,2vw,2rem); }
  header.site .wrap, header.site .bar{ grid-template-columns:1fr auto 1fr; grid-template-rows:auto; row-gap:0; }
  header.site .mark{ grid-column:2; grid-row:1; }
  nav.index{ grid-column:3; grid-row:1; justify-self:end; justify-content:flex-end; gap:var(--nav-gap); margin-right:calc(var(--nav-gap) * 2 + 2.75rem); }
  .header-end{ grid-column:3; grid-row:1; justify-self:end; }
  .lang-toggle{ gap:var(--nav-gap); }
}
nav.index a, .lang-toggle button{ font-weight:700; letter-spacing:0.01em; }
.lang-toggle button{ opacity:0.45; }
.lang-toggle button.active{ opacity:1; }
@media (max-width:900px){ nav.index a{ font-weight:var(--w); } }
/* language switch moves to the left corner; menu alone on the right */
@media (min-width:901px){
  .header-end{ grid-column:1; grid-row:1; justify-self:start; }
  nav.index{ margin-right:0; }
}
/* wordmark twice as large */
header.site .mark{ font-size:2.3rem; }
@media (max-width:900px){ header.site .mark{ font-size:1.75rem; } }
@media (max-width:380px){ header.site .mark{ font-size:1.5rem; } }

/* header v4: FAENOMEN in the left corner; menu + language together on the right,
   one equal gap between every item (language reads as the menu's last word) */
@media (min-width:901px){
  header.site .mark{ grid-column:1; grid-row:1; justify-self:start; }
  nav.index{ grid-column:3; grid-row:1; justify-self:end; margin-right:calc(var(--nav-gap) * 2 + 2.75rem); }
  .header-end{ grid-column:3; grid-row:1; justify-self:end; }
}
@media (max-width:900px){
  header.site .wrap, header.site .bar{ grid-template-columns:auto 1fr auto auto; column-gap:1.1rem; }
  header.site .mark{ grid-column:1; grid-row:1; justify-self:start; }
  .header-end{ grid-column:3; grid-row:1; }
  .menu-btn{ grid-column:4; grid-row:1; justify-self:end; font-weight:700; }
}

/* contact finale: "STEP INTO FAENOMEN" as a full-width poster line */
.call.call-poster{ max-width:none; margin-inline:0; display:block; text-align:left; padding-bottom:calc(var(--air) * 0.9); }
.call-poster .poster{
  display:block; text-decoration:none; color:var(--ink);
  font-weight:700; text-transform:uppercase; letter-spacing:-0.02em; line-height:0.9;
  font-size:clamp(2rem, 8.9vw, 9.3rem); white-space:nowrap;
}
.call-poster .call-row{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem 2rem; margin-top:clamp(2rem,4vw,3.5rem); }
.call-poster .call-row p{ font-size:var(--fs-l); line-height:var(--lh-l); letter-spacing:var(--ls-l); color:var(--ink-soft); max-width:none; }
.call-poster .call-link{ font-size:var(--fs-l); line-height:var(--lh-l); font-weight:700; letter-spacing:0.01em; text-decoration:underline; text-underline-offset:0.3em; text-decoration-thickness:1px; }
.call-poster .call-link:hover{ text-decoration-thickness:2px; }
@media (max-width:600px){ .call-poster .poster{ white-space:normal; font-size:clamp(2.6rem,13vw,4rem); } }
footer .foot-sign{ grid-column:7 / -1; justify-self:end; }
@media (max-width:800px){ footer .foot-sign{ grid-column:1 / -1; justify-self:start; } }

/* studio page: "about" text set like the home manifesto */
#about.about-run{ padding-block:calc(var(--section) * 0.9) calc(var(--section) * 1.1); }
/* studio: founder portrait inside the about run */
.manifesto .founder{ margin:calc(var(--air) * 0.75) 0 0; width:min(100%, 24rem); }
.manifesto .founder img{ display:block; width:100%; height:auto; aspect-ratio:966/1279; object-fit:cover; background:var(--veil); }
.manifesto .founder figcaption{ margin-top:1.2rem; font-size:var(--fs-m); line-height:1.375; letter-spacing:0.0125em; color:var(--ink-soft); font-weight:300; }
.manifesto .founder + .run{ margin-top:calc(var(--air) * 0.5); }
@media (max-width:760px){ .manifesto .founder{ width:78%; } }

/* studio about v2: smaller text on the left, founder portrait on the right */
.about-split .wrap{
  max-width:var(--max, none); margin-inline:auto;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:start;
}
.about-split .about-text{ grid-column:1 / span 6; }
.about-split .run{ font-size:var(--fs-l); line-height:1.32; letter-spacing:var(--ls-l); max-width:34rem; }
.about-split .run + .run{ margin-top:clamp(2rem,4vw,3.25rem); }
.about-split .founder{
  grid-column:8 / -1; grid-row:1; margin:0; width:auto;
  position:sticky; top:calc(var(--header-h) + 2rem);
}
.about-split .founder figcaption{ margin-top:1rem; }
@media (max-width:760px){
  .about-split .wrap{ grid-template-columns:minmax(0,1fr); row-gap:clamp(2.5rem,8vw,3.5rem); }
  .about-split .about-text, .about-split .founder{ grid-column:1; }
  .about-split .founder{ grid-row:2; position:static; width:78%; }
}

/* clients: same gap under the heading as under "Проекты" */
.clients .trust-bar{ gap:var(--air); }
/* clients: bigger logos — tighter columns so each cell is wider */
.trust-list{ column-gap:clamp(0.5rem,1.2vw,1.25rem); }

/* project year on home cards: quiet, right of the title */
.proj .cap{ grid-template-columns:minmax(0,1fr) auto; max-width:none; }
.proj .cap h3{ grid-column:1; grid-row:1; }
.proj .proj-year{ grid-column:2; grid-row:1; color:var(--ink-soft); font-size:var(--fs-l); line-height:var(--lh-l); font-variant-numeric:tabular-nums; }
.proj .proj-sub{ grid-column:1 / -1; grid-row:2; max-width:24.5rem; }

/* project galleries: editorial rhythm like the home projects list */
.gallery{ display:flex; flex-direction:column; row-gap:clamp(2.5rem,6vw,6.5rem); margin-top:clamp(4.5rem,10vw,10rem); }
.g-row{ display:flex; align-items:flex-start; }
.g-row .g{ flex:none; margin:0; width:calc(var(--w) * 1%); margin-left:calc(var(--x) * 1%); }
.g-row .g img{ display:block; width:100%; height:auto; background:var(--veil); }
.g-row .g.drop{ margin-top:clamp(3rem,9vw,9rem); }
.gallery + .project-nav{ margin-top:clamp(4.5rem,10vw,10rem); }
@media (max-width:760px){
  .gallery{ row-gap:0.9rem; }
  .g-one .g{ width:100%; margin-left:0; }
  .g-two{ gap:0.9rem; }
  .g-two .g{ width:calc(50% - 0.45rem); margin-left:0; margin-top:0; }
}

/* press: "СМИ о нас" on the studio page and "Пресса" on project pages */
.press{ padding-block:var(--air) 0; }
.press-head{ font-size:var(--fs-xl); line-height:1.175; letter-spacing:var(--ls-xl); font-weight:var(--w); margin:0 0 clamp(2rem,4vw,3.5rem); }
.press-list{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.press-list li{ border-top:1px solid var(--line); }
.press-list a{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:baseline;
  padding-block:1.1rem 1.2rem; color:inherit; text-decoration:none; transition:color .25s ease;
}
.press-src{ grid-column:1 / span 3; font-size:var(--fs-m); color:var(--ink-soft); }
.press-title{ grid-column:4 / span 7; font-size:var(--fs-l); line-height:var(--lh-l); letter-spacing:var(--ls-l); }
.press-date{ grid-column:11 / -1; justify-self:end; font-size:var(--fs-m); color:var(--ink-soft); white-space:nowrap; }
.press-list a:hover .press-title{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }
.project-press{ margin-top:clamp(3.5rem,7vw,6rem); display:grid; gap:1.2rem; }
@media (max-width:760px){
  .press-list a{ grid-template-columns:1fr auto; row-gap:.35rem; }
  .press-src{ grid-column:1; grid-row:1; }
  .press-date{ grid-column:2; grid-row:1; }
  .press-title{ grid-column:1 / -1; grid-row:2; }
}

/* hero: sound on / off icon */
.sound-btn{
  position:absolute; z-index:3; right:var(--gutter); bottom:clamp(1rem,2.4vw,2rem);
  width:2.75rem; height:2.75rem; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,0.18); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s ease, transform .25s ease;
}
.sound-btn:hover{ background:rgba(0,0,0,0.32); }
.sound-btn:active{ transform:scale(0.94); }
.sound-btn:focus-visible{ outline:1px solid #fff; outline-offset:3px; }
.sound-btn svg{ width:1.35rem; height:1.35rem; grid-area:1 / 1; }
.sound-btn svg path{ fill:currentColor; }
.sound-btn svg path.w{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.sound-btn .i-off{ display:none; }
.sound-btn[data-state="off"] .i-on{ display:none; }
.sound-btn[data-state="off"] .i-off{ display:block; }

/* clients: slightly smaller block */
.trust-list{ row-gap:clamp(1.5rem,3.4vw,3rem); }

/* clients: tighter gap between heading and logos */
.clients .trust-bar{ gap:calc(var(--air) * 0.45); }

/* header: no hairline under it when scrolling */
header.site, html.scrolled header.site, html.past-hero .home header.site{ border-bottom:0 !important; box-shadow:none !important; }

/* contact poster: same size as the FAENOMEN mark in the header */
.call-poster .poster{ font-size:2.3rem; line-height:1; letter-spacing:0.01em; white-space:nowrap; }
@media (max-width:900px){ .call-poster .poster{ font-size:1.75rem; } }
@media (max-width:600px){ .call-poster .poster{ font-size:1.75rem; white-space:nowrap; } }
@media (max-width:380px){ .call-poster .poster{ font-size:1.5rem; } }
.call-poster .call-row{ margin-top:clamp(1.2rem,2.4vw,2rem); }

/* hero: show the whole frame of the reel (16:9), no cropping on any screen */
.hero{ height:auto; min-height:0; aspect-ratio:16 / 9; }
.hero video{ object-fit:contain; }

/* header v5: three languages — FAENOMEN left, then menu and RU · EN · KZ as one flowing row,
   so a longer menu word (e.g. «Байланыс») can never run under the switch */
@media (min-width:901px){
  header.site .bar{ display:flex; align-items:center; gap:0; }
  header.site .bar .mark{ order:0; margin-right:auto; }
  header.site .bar nav.index{ order:1; margin-right:0; flex-wrap:nowrap; }
  header.site .bar .header-end{ order:2; margin-left:var(--nav-gap); }
}

/* phones (touch screens only, so a narrow desktop window keeps the 16:9 film): the vertical cut fills the screen */
@media (max-width:760px) and (hover:none) and (pointer:coarse){
  /* width stays full; height follows 9:16 but never taller than the screen
     (aspect-ratio + max-height would shrink the width instead) */
  .hero{ aspect-ratio:auto; width:auto; max-height:none; height:min(177.78vw, 100vh); height:min(177.78vw, 100svh); }
  .hero video{ object-fit:cover; }
}

/* very narrow phones (320–360px): tighter header so RU · EN · KZ + menu fit */
@media (max-width:360px){
  header.site .wrap, header.site .bar{ column-gap:0.7rem; }
  .lang-toggle{ gap:0.5rem; }
}

/* mobile menu: the header's blur makes it the containing block for the fixed menu panel,
   squeezing the panel into the 70px bar — drop the blur while the menu is open */
@media (max-width:900px){
  html.menu-open header.site, html.menu-open.past-hero .home header.site, html.menu-open.scrolled header.site{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* home: link to the studio page right after the manifesto, before "Среди клиентов" */
.manifesto .run.about-more{ margin-top:clamp(1.75rem,3.5vw,3rem); }
.manifesto .about-link{
  display:inline-block; font-size:var(--fs-l); line-height:var(--lh-l); font-weight:700; letter-spacing:0.01em;
  color:var(--ink); text-decoration:underline; text-underline-offset:0.3em; text-decoration-thickness:1px;
}
.manifesto .about-link:hover{ text-decoration-thickness:2px; }

/* clients: rows wrap and the last, shorter row sits centred (20 logos) */
.trust-list{ display:flex; flex-wrap:wrap; justify-content:center; --cols:7; --cg:clamp(0.5rem,1.2vw,1.25rem); column-gap:var(--cg); }
.trust-list li{ flex:0 0 calc((100% - (var(--cols) - 1) * var(--cg)) / var(--cols)); min-width:0; }
@media (max-width:760px){ .trust-list{ --cols:3; } }