/* ==========================================================================
   DESIGN LAB STUDIO — styles
   Visual language inspired by the Intero template: monochrome, large uppercase
   grotesk headings, monospaced labels, full-bleed imagery.
   ========================================================================== */

:root {
  /* Color tokens */
  --ink: #111111;
  --ink-soft: #555555;
  --ink-faint: #8a8a8a;
  --paper: #ffffff;
  --panel: #f6f6f6;
  --line: #e4e4e4;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.78);

  /* Image placeholder (shown until a real photo exists at the given path) */
  --ph: linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(135deg, #8d877d 0%, #5d5850 45%, #2f2c28 100%);

  /* Type */
  --font-sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale (8pt) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;

  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1440px;
  --header-h: 76px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 600ms;

  --z-header: 100;
  --z-menu: 200;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible { outline-color: var(--on-dark); }

.skip-link {
  position: absolute; left: var(--s-2); top: -60px; z-index: 1000;
  background: var(--ink); color: var(--on-dark);
  padding: 12px 16px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
}
.skip-link:focus { top: var(--s-2); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 140px) 0; }
.section--panel { background: var(--panel); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.display {
  font-weight: 500;
  font-size: clamp(44px, 9vw, 132px);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.h1 {
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.h2 {
  font-weight: 500;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.h3 {
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.body { color: var(--ink-soft); max-width: 65ch; }
.body + .body { margin-top: var(--s-2); }
.statement {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -.02em;
  max-width: 24ch;
}
.statement .muted { color: var(--ink-faint); }
.statement strong { font-weight: 700; }

/* ---------- Buttons (arrow tile + label, as in the reference) ---------- */
.btn {
  display: inline-flex; align-items: stretch; gap: 3px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  min-height: 48px;
  cursor: pointer;
  touch-action: manipulation;
}
/* On hover the arrow tile glides to the right end and the label slides left to
   take its place — they swap, colors stay put (as in the reference).
   The distances depend on the label width, so main.js measures them. */
.btn { --btn-bg: var(--ink); --btn-ink: var(--on-dark); }
.btn--light { --btn-bg: var(--paper); --btn-ink: var(--ink); }
.btn__icon, .btn__label {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-bg); color: var(--btn-ink);
  /* Gentle acceleration, soft landing — slower than the site's default ease */
  transition: transform .85s cubic-bezier(.45, 0, .2, 1);
}
.btn__icon { width: 48px; }
.btn__icon svg { width: 16px; height: 16px; }
.btn__label { padding: 0 22px; }
.btn:hover .btn__icon, .btn:focus-visible .btn__icon { transform: translateX(var(--icon-shift, 0px)); }
.btn:hover .btn__label, .btn:focus-visible .btn__label { transform: translateX(var(--label-shift, 0px)); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Media placeholders ---------- */
.media {
  position: relative;
  background: var(--img, none) center / cover no-repeat, var(--ph);
  background-color: #4a463f;
  overflow: hidden;
}
.media::after { /* subtle label shown on placeholders only when no image is set */
  content: attr(data-ph);
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.media[style*="--img"]::after,
.work-row .media::after, .hero .media::after, .project-hero .media::after { content: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  color: var(--on-dark);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.site-header.is-solid,
.page--solid .site-header {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  color: var(--ink);
  border-bottom-color: var(--line);
}

.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo__text { font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.logo__text span { font-weight: 400; opacity: .7; }

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav__links { display: flex; gap: var(--s-4); }
/* Header colors as tokens, so the label copies and the language pill can follow them */
.site-header { --nav-color: var(--on-dark); --lang-ink: var(--ink); }
.site-header.is-solid, .page--solid .site-header { --nav-color: var(--ink); --lang-ink: var(--paper); }
.menu { --nav-color: var(--on-dark); --lang-ink: var(--ink); }

/* Nav links: on hover the label slides out and an identical copy slides in
   (as in the reference). The real text stays for screen readers, made invisible;
   the two visible copies are pseudo-elements reading data-label (set in main.js). */
.nav__links a {
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  position: relative; display: inline-block; padding: 12px 0; overflow: hidden;
  color: transparent;
}
.nav__links a::before, .nav__links a::after {
  content: attr(data-label);
  position: absolute; left: 0; top: 12px;
  color: var(--nav-color);
  transition: transform .5s var(--ease-out);
}
.nav__links a::after { transform: translateX(110%); }
.nav__links a:hover::before, .nav__links a:focus-visible::before { transform: translateX(-110%); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: none; }
.nav__links a[aria-current="page"] { border-bottom: 1px solid var(--nav-color); }
/* Without JS there is no data-label copy, so show the real text */
.no-js .nav__links a, .no-js .nav__cta span { color: inherit; }

/* "Get in touch": underline sweeps in on hover */
.nav__cta span { position: relative; display: inline-block; }
.nav__cta span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__cta:hover span::after,
.nav__cta:focus-visible span::after,
.nav__cta[aria-current="page"] span::after { transform: scaleX(1); transform-origin: left; }

/* "Get in touch" sits apart from the link group, at the far right (as in the reference) */
.nav { flex: 1; justify-content: flex-end; }
.nav__links { margin: 0 auto; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.nav__cta svg { width: 12px; height: 12px; transition: transform .35s var(--ease-out); }
.nav__cta:hover svg { transform: rotate(45deg); }
.nav__cta:hover span { text-decoration: underline; text-underline-offset: 5px; }
.nav__cta[aria-current="page"] span { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 900px) { .nav__cta { display: none; } .nav__links { margin: 0; } }

/* Language switch: quiet pill with an indicator that glides between EN and RO */
.lang {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(128, 128, 128, .18);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.lang::before {
  content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: 999px; background: currentColor;
  transition: transform .5s var(--ease-out);
}
.lang[data-active="ro"]::before { transform: translateX(100%); }
.lang button {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  min-width: 36px; min-height: 28px; padding: 0 10px; border-radius: 999px;
  opacity: .55; transition: opacity .3s ease, color .3s ease;
}
.lang button:hover { opacity: .85; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button[aria-pressed="true"] span { color: var(--lang-ink); }
/* Roomier tap targets in the mobile menu */
.menu__foot .lang button { min-width: 48px; min-height: 40px; }

.menu-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
}
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; }
.menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }

/* Mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--ink); color: var(--on-dark);
  display: flex; flex-direction: column;
  padding: var(--s-3) var(--gutter) var(--s-6);
  transform: translateY(-100%);
  transition: transform .6s var(--ease-out), visibility 0s linear .6s;
  visibility: hidden;
}
.menu.is-open { transform: none; visibility: visible; transition: transform .6s var(--ease-out); }
.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--header-h) - var(--s-3)); }
.menu__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.menu__close svg { width: 22px; height: 22px; }
.menu__links { margin-top: auto; display: grid; gap: 4px; }
.menu__links a {
  font-size: clamp(40px, 12vw, 72px); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase;
}
.menu__links a[aria-current="page"] { color: var(--ink-faint); }
.menu__foot { margin-top: var(--s-6); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); color: var(--on-dark-soft); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav { gap: var(--s-2); }
  .nav > .lang { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  color: var(--on-dark);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + var(--s-6)) 0 clamp(40px, 6vw, 80px);
}
.hero__media { position: absolute; inset: 0; }
.hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.55) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: end; }
.hero__aside { max-width: 380px; display: grid; gap: var(--s-3); }
.hero__aside p { color: var(--on-dark-soft); font-size: 16px; line-height: 1.55; }
.hero__tag { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
/* Desktop hero: the side block sits at the top right, the title at the bottom left.
   Pinned to the hero box itself — no viewport-height offsets, so resizing keeps it put. */
@media (min-width: 1000px) {
  .hero { align-items: stretch; }
  .hero .container { display: flex; flex-direction: column; justify-content: space-between; }
  .hero__grid { display: contents; }
  .hero__aside { order: -1; align-self: flex-end; margin-top: 0; }
}

/* ---------- Page header (inner pages) ---------- */
.page-head { padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(40px, 6vw, 72px); }
.page-head .h1 { margin-top: var(--s-3); }
.page-head .lead { margin-top: var(--s-3); }

/* ---------- Intro / stats ---------- */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(180px, 1fr) 3fr; gap: var(--s-8); } }
.intro__content { display: grid; gap: var(--s-4); justify-items: start; }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  border-top: 1px solid var(--line); padding-top: var(--s-4); width: 100%;
}
.stat__num {
  font-weight: 500; font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: var(--s-1); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } .stat { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); } }

/* ---------- Section heading row ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .h2 { margin-top: var(--s-2); }

/* ---------- Featured work (full-bleed rows) ---------- */
.work-list { display: grid; gap: 4px; }
.work-row { position: relative; display: block; color: var(--on-dark); }
.work-row .media { aspect-ratio: 16 / 8; transition: transform 1.2s var(--ease-out); }
.work-row__frame { overflow: hidden; }
.work-row:hover .media { transform: scale(1.03); }
.work-row::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 62%, rgba(0,0,0,.6) 100%);
}
.work-row__meta, .work-row__title {
  position: absolute; left: 0; right: 0; z-index: 2; padding: var(--s-3) var(--gutter);
}
.work-row__meta {
  top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.work-row__meta > :nth-child(2) { text-align: center; }
.work-row__meta > :nth-child(3) { text-align: right; }
.work-row__meta small { display: block; font-size: 13px; color: var(--on-dark-soft); }
.work-row__title { bottom: 0; display: flex; justify-content: space-between; align-items: end; gap: var(--s-2); }
.work-row__title h3 { font-weight: 500; font-size: clamp(30px, 5vw, 72px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.work-row__arrow {
  flex: none; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink); transition: transform .4s var(--ease-out);
}
.work-row__arrow svg { width: 18px; height: 18px; }
.work-row:hover .work-row__arrow { transform: rotate(45deg); }
@media (max-width: 700px) {
  .work-row .media { aspect-ratio: 4 / 5; }
  .work-row__meta { grid-template-columns: 1fr 1fr; }
  .work-row__meta > :nth-child(2) { text-align: right; }
  .work-row__meta > :nth-child(3) { display: none; }
  .work-row__arrow { width: 48px; height: 48px; }
}

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 800px) { .services { grid-template-columns: repeat(2, 1fr); } }
.service {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .service:nth-child(odd) { padding-right: var(--s-6); border-right: 1px solid var(--line); }
  .service:nth-child(even) { padding-left: var(--s-6); }
}
.service__num { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); padding-top: 6px; }
.service p { margin-top: var(--s-1); color: var(--ink-soft); }

/* ---------- Process ---------- */
.process { display: grid; gap: 4px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--paper); padding: var(--s-4); min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6);
}
.step__num { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--line); }
.step p { margin-top: var(--s-1); color: var(--ink-soft); font-size: 15px; }

/* ---------- CTA ---------- */
.cta { position: relative; color: var(--on-dark); padding: clamp(96px, 14vw, 200px) 0; overflow: hidden; }
.cta .media { position: absolute; inset: 0; }
.cta .media::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.cta .container { position: relative; z-index: 1; display: grid; gap: var(--s-4); justify-items: start; }
.cta p { color: var(--on-dark-soft); max-width: 48ch; font-size: 18px; }

/* ---------- Projects grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-6); }
.filter {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  min-height: 44px; padding: 0 18px; background: var(--panel); color: var(--ink);
  transition: background-color .25s ease, color .25s ease;
}
.filter:hover { background: #ececec; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }

.grid { display: grid; gap: clamp(32px, 4vw, 56px) var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.card { display: block; }
.card__frame { overflow: hidden; }
.card .media { aspect-ratio: 4 / 3; transition: transform 1s var(--ease-out); }
.card:hover .media { transform: scale(1.04); }
.card__body { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); align-items: start; }
.card__title { font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1; }
.card__meta { margin-top: 6px; }
.card__year { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); white-space: nowrap; padding-top: 6px; }
.grid__empty { color: var(--ink-soft); }

/* ---------- Project detail ---------- */
.project-hero { height: 88vh; height: 88dvh; min-height: 520px; position: relative; color: var(--on-dark); display: flex; align-items: flex-end; }
.project-hero .media { position: absolute; inset: 0; }
/* Scrim: keeps white header + title legible over bright photos too */
.project-hero .media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.05) 32%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.78)); }
.project-hero .container { position: relative; z-index: 2; padding-bottom: clamp(40px, 6vw, 72px); }
.project-hero .display { margin-top: var(--s-2); }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(5, 1fr); } }
.fact { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.fact dd { margin: 6px 0 0; font-size: 18px; font-weight: 500; }

.gallery { display: grid; gap: 4px; grid-template-columns: 1fr; }
.gallery .media { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .media:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
}

.next-project { display: block; background: var(--ink); color: var(--on-dark); padding: clamp(56px, 8vw, 110px) 0; }
.next-project .container { display: flex; justify-content: space-between; align-items: end; gap: var(--s-3); }
.next-project .eyebrow { color: var(--on-dark-soft); }
.next-project .h1 { margin-top: var(--s-2); }
.next-project:hover .work-row__arrow { transform: rotate(45deg); }

/* ---------- About ---------- */
.about-grid { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .about-grid { grid-template-columns: 5fr 6fr; gap: var(--s-12); align-items: start; } }
.about-grid .media { aspect-ratio: 4 / 5; }
.about-text { display: grid; gap: var(--s-3); }
.principles { display: grid; gap: 4px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle { background: var(--paper); padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; min-height: 240px; }
.principle p { color: var(--ink-soft); }

.list-rows { border-top: 1px solid var(--line); }
.list-rows li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.list-rows li span:last-child { color: var(--ink-soft); font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--s-8); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 3fr 2fr; gap: var(--s-12); } }
.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-1); }
.field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.field label .req { color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1px solid transparent; border-radius: 0;
  min-height: 52px; padding: 14px 16px; width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #b3261e; }
.field__error { font-size: 14px; color: #b3261e; min-height: 0; }
.field__error:empty { display: none; }
.form__note { font-size: 14px; color: var(--ink-soft); }
.form__status { font-size: 15px; }
.form__status:empty { display: none; }
.form__status[data-state="ok"] { padding: 14px 16px; background: var(--panel); border-left: 2px solid var(--ink); }
.form__status[data-state="error"] { padding: 14px 16px; background: #fbeceb; border-left: 2px solid #b3261e; color: #8c1d18; }
.form__status a { text-decoration: underline; text-underline-offset: 3px; }
.btn:disabled { cursor: progress; opacity: .6; }

.details { display: grid; gap: var(--s-4); align-content: start; }
.detail { display: grid; gap: 6px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.detail a, .detail p { font-size: 18px; font-weight: 500; }
.detail a:hover { text-decoration: underline; text-underline-offset: 4px; }
.socials { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.socials a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); transition: background-color .25s ease, color .25s ease;
}
.socials a:hover { background: var(--ink); color: var(--on-dark); }
.socials svg { width: 18px; height: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); padding: clamp(64px, 8vw, 110px) 0 var(--s-4); }
.footer-top { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 2fr 1.3fr 1fr; } }
/* Page links sit in two columns, read top-to-bottom per column (as in the reference) */
.footer-col--nav ul {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--s-3);
}
.footer-col--nav li + li { margin-top: 0; }
.footer-col--nav a {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.footer-top .h2 { max-width: 14ch; }
.footer-col h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 400; margin-bottom: var(--s-2); }
.footer-col li + li { margin-top: 6px; }
.footer-col a { display: inline-block; padding: 4px 0; color: var(--on-dark); opacity: .9; transition: opacity .3s ease; }
.footer-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-wordmark {
  margin: 0 0 clamp(48px, 7vw, 100px);
  text-align: center;
  font-weight: 600; font-size: clamp(40px, 12vw, 186px); line-height: .82; letter-spacing: -.05em;
  text-transform: uppercase; white-space: nowrap;
}
/* Social links — "Fb / Ig / Be / X / Ln", as in the reference */
.footer-brand { display: grid; gap: var(--s-4); align-content: start; }
.social-links { display: flex; flex-wrap: wrap; align-items: center; }
.social-links li { display: flex; align-items: center; }
.social-links li + li::before {
  content: "/"; padding: 0 10px;
  font-family: var(--font-mono); font-size: 13px; opacity: .35;
}
.social-links a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 24px; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: .02em;
  opacity: .9; transition: opacity .25s ease;
}
.social-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* Footer name: 50% opacity + top-to-bottom fade. The gradient sits on each animated
   word (.w__i) so it renders correctly while the words move. */
.footer-wordmark { opacity: .5; }
.footer-wordmark .w__i,
.no-js .footer-wordmark {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer-bottom {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-soft);
}
.footer-bottom a:hover { color: var(--on-dark); }

/* ==========================================================================
   Motion — smooth scroll + scroll-driven animations (see js/motion.js)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* Clip slide-in / parallax overflow here (not on body, whose overflow is handed to the viewport) */
main, .site-footer { overflow-x: clip; }

/* Fade + rise + un-blur (as in the reference) */
.reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  filter: blur(10px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
/* Cards that slide in from the right */
.service.reveal, .step.reveal, .principle.reveal { transform: translate3d(140px, 0, 0); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* Headings rise word by word from a mask */
[data-split] .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* room for Ă Î Ș Ț above/below, and for the last letter's edge on the right */
  padding: .14em .12em .1em 0; margin: -.14em -.12em -.1em 0;
}
[data-split] .w__i {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 45ms);
}
[data-split].is-in .w__i { transform: none; }

/* Hero photo slowly zooms out on load */
.hero { overflow: hidden; }
.hero__media { scale: 1.18; transition: scale 2.4s var(--ease-out); }
.is-loaded .hero__media, .no-js .hero__media { scale: 1; }

/* Parallax (distance set per element by JS) */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }
.work-row__frame > .media, .card__frame > .media { scale: 1.12; }
.cta > .media { scale: 1.15; }
/* Photo hero (project + contact pages): slow zoom-out on load, then parallax */
.project-hero > .media { scale: 1.26; transition: scale 2.4s var(--ease-out); }
.is-loaded .project-hero > .media, .no-js .project-hero > .media { scale: 1.15; }
.project-hero { overflow: hidden; }

/* Featured projects: sticky stacking cards */
.work-row {
  position: sticky; top: var(--header-h);
  transform: scale(calc(1 - var(--cover, 0) * .06));
  transform-origin: 50% 0;
}
.work-row::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #000; opacity: calc(var(--cover, 0) * .6);
}
.work-row .media { max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); }
.work-row[data-clip] { clip-path: inset(12% 6% 0 6%); transition: clip-path 1.4s var(--ease-out); }
.work-row[data-clip].is-in { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  [data-split] .w__i { transform: none; }
  .hero__media { scale: 1; }
  [data-parallax] { translate: none; }
  .work-row { transform: none; }
  .work-row::after { opacity: 0; }
  .work-row[data-clip] { clip-path: none; }
}