/* The homepage uses the bundled face so a cold font request cannot resize its chrome. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fonts/inter-tight-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fonts/inter-tight-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* ============================================================
   Bernhard Romano — portfolio
   Base, tokens, preloader, cursor, nav, hero
   ============================================================ */

:root {
  --bg:        #e9e6df;
  --bg-deep:   #0d0d0c;
  --ink:       #16150f;
  --ink-soft:  #5a554c;
  --ink-faint: #16150f33;
  --paper:     #f3f0e9;
  --accent:    #b4532a;
  --accent-2:  #5a6b4e;

  --hero-bg:    #67635f;
  --pill:       #16171b;
  --globe-disc: #d7d3ca;

  /* Navigation overlay. The indigo is the one accent that is not part of the
     warm page palette — swap --menu-accent for var(--accent) to tie it back in. */
  --menu-bg:        #1a1b1d;
  --menu-accent:    #3f49de;
  --menu-btn:       clamp(3.4rem, 6.5vw, 5.9rem);
  --menu-btn-inset: clamp(0.8rem, 1.6vw, 1.5rem);
  --menu-gutter:    clamp(1.25rem, 9.3vw, 9rem);
  --menu-col:       21.4rem;
  --curtain-ease:   cubic-bezier(0.42, 0, 0.22, 1);

  --fs-h2:      clamp(2.2rem, 6.2vw, 5.6rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.4rem);
  --fs-lead:    clamp(1.3rem, 2.9vw, 2.9rem);
  --fs-body:    clamp(1rem, 1.12vw, 1.18rem);
  --fs-meta:    clamp(0.72rem, 0.8vw, 0.82rem);

  --pad:  clamp(1.1rem, 4.4vw, 4.4rem);
  --gap:  clamp(2.6rem, 7.5vw, 9rem);

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.76, 0, 0.24, 1);

  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html.has-smooth { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; height: 100vh; }
body.menu-open  { overflow: hidden; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

.k, .section-head__idx, .hero__key, .project__year, .step__time {
  font-size: var(--fs-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}

.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
  display: inline-block;
  margin-right: 0.55em;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent-2) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-2) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent-2) 0%,  transparent); }
}

/* ---------------- Reveal primitives ---------------- */

[data-reveal] { will-change: transform, opacity; }

[data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity 1s var(--ease), transform 1.15s var(--ease);
}
[data-reveal="fade"].is-in { opacity: 1; transform: none; }

.r-line  { display: block; overflow: hidden; }
.r-line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.15s var(--ease);
}
.is-in .r-line > span, .r-line.is-in > span { transform: none; }

.r-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.r-word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.05s var(--ease);
}
.is-in .r-word > span { transform: none; }

/* ============================================================
   PRELOADER
   ============================================================ */

.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-deep);
  color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad);
  transition: opacity 0.4s linear 0.9s, visibility 0s linear 1.3s;
}
.preloader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.preloader__inner { width: 100%; }

.preloader__name {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.4rem, 4vw, 3rem);
}
.preloader__word { display: block; overflow: hidden; }
.preloader__word > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.2s var(--ease);
}
.preloader__word:nth-child(2) > span { transition-delay: 0.1s; }
.preloader.is-ready .preloader__word > span { transform: none; }

.preloader__meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 1rem;
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.35s;
}
.preloader.is-ready .preloader__meta { opacity: 1; }

.preloader__label {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #f3f0e988;
}
.preloader__count {
  font-family: var(--sans);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.preloader__count i { font-style: normal; opacity: 0.4; font-size: 0.45em; }

.preloader__bar {
  height: 1px; width: 100%;
  background: #f3f0e926;
  overflow: hidden;
}
.preloader__bar > span {
  display: block; height: 100%; width: 0%;
  background: var(--paper);
  transition: width 0.25s linear;
}

.preloader__curtain {
  position: absolute; inset: 0;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.05s var(--ease-io);
}
.preloader.is-done .preloader__curtain { transform: scaleY(1); }

/* ============================================================
   CURSOR
   ============================================================ */

.cursor {
  position: fixed; inset: 0; z-index: 900; pointer-events: none; display: none;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cursor.is-awake { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.cursor__dot {
  width: 7px; height: 7px;
  background: var(--ink);
  transition: opacity 0.3s var(--ease), transform 0.2s var(--ease);
}
.cursor__ring {
  width: 42px; height: 42px;
  border: 1px solid var(--ink-faint);
  display: grid; place-items: center;
  transition: width 0.45s var(--ease), height 0.45s var(--ease),
              background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.cursor__ring span {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); opacity: 0;
  transition: opacity 0.3s var(--ease);
  transform: translateY(1px);
}
.cursor.is-hover .cursor__ring { width: 62px; height: 62px; border-color: transparent; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cursor.is-hover .cursor__dot  { opacity: 0; }
.cursor.is-view  .cursor__ring { width: 104px; height: 104px; background: var(--ink); border-color: var(--ink); }
.cursor.is-view  .cursor__ring span { opacity: 1; }
.cursor.is-view  .cursor__dot  { opacity: 0; }
.cursor.is-dark  .cursor__dot  { background: var(--paper); }
.cursor.is-dark  .cursor__ring { border-color: #f3f0e940; }
.cursor.is-dark.is-view .cursor__ring { background: var(--paper); border-color: var(--paper); }
.cursor.is-dark.is-view .cursor__ring span { color: var(--ink); }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2vw, 1.7rem) var(--pad);
  padding-right: calc(var(--menu-btn) + var(--menu-btn-inset) + 1rem);
  mix-blend-mode: difference;
  color: #fff;
  transition: transform 0.75s var(--ease), opacity 0.5s var(--ease);
}
/* Over the photograph, difference blending would mute the type against a
   mid-grey backdrop, so the nav goes plain white while the hero is in view. */
.nav--onhero { mix-blend-mode: normal; color: #fff; }
.nav.is-hidden { transform: translate3d(0, -110%, 0); opacity: 0; }
.nav.no-blend  { mix-blend-mode: normal; }

.nav__brand { display: flex; align-items: baseline; gap: 0.38rem; font-weight: 400; letter-spacing: -0.02em; }
.nav__mark { font-size: 1.02rem; line-height: 1; }
.nav__brandtext {
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  letter-spacing: -0.012em;
}

.nav__links { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); margin-left: auto; }
.nav__link {
  position: relative; display: block; overflow: hidden; height: 1.2em;
  font-size: clamp(0.88rem, 1vw, 1.02rem); letter-spacing: -0.012em; font-weight: 400;
}
.nav__link span { display: block; transition: transform 0.6s var(--ease); }
.nav__link span:last-child { position: absolute; top: 100%; left: 0; }
.nav__link:hover span { transform: translateY(-100%); }

/* ---------------- Circular menu toggle ---------------- */

.menu-btn {
  position: fixed;
  top: var(--menu-btn-inset); right: var(--menu-btn-inset);
  z-index: 700;
  width: var(--menu-btn); height: var(--menu-btn);
  display: grid; place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--menu-bg);
  -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: scale(0.84);
  transition: opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s;
}
body.is-ready .menu-btn { opacity: 1; transform: none; }

/* The accent rises into the disc from below and is clipped by the circle. */
.menu-btn__fill {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--menu-accent);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.52s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover .menu-btn__fill { transform: translate3d(0, 0, 0); }
}
.menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.menu-btn:focus-visible .menu-btn__fill,
.menu-btn.is-open .menu-btn__fill { transform: translate3d(0, 0, 0); }

.menu-btn__bars {
  position: relative; z-index: 1;
  width: calc(var(--menu-btn) * 0.26); height: 1px;
}
.menu-btn__bars i {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: #fff;
  transition: transform 0.55s var(--ease);
}
.menu-btn__bars i:nth-child(1) { transform: translate3d(0, calc(var(--menu-btn) * -0.041), 0); }
.menu-btn__bars i:nth-child(2) { transform: translate3d(0, calc(var(--menu-btn) *  0.041), 0); }
.menu-btn.is-open .menu-btn__bars i:nth-child(1) { transform: rotate(45deg); }
.menu-btn.is-open .menu-btn__bars i:nth-child(2) { transform: rotate(-45deg); }

/* ---------------- Navigation overlay ---------------- */

.menu {
  position: fixed; inset: 0; z-index: 600;
  overflow: hidden;
  visibility: hidden; pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }

/* Sweeps in from the right. The panel is twice the viewport tall so its left
   edge is a shallow arc centred on the middle of the screen; the horizontal
   radius runs out as it lands, which flattens the arc and squares the corners. */
.menu__curtain {
  position: absolute; right: 0; top: -50%;
  width: 100%; height: 200%;
  background: var(--menu-bg);
  transform: translate3d(100%, 0, 0);
  border-radius: 47% 0 0 47% / 50% 0 0 50%;
  transition: transform 0.72s var(--curtain-ease),
              border-radius 0.72s var(--curtain-ease);
}
.menu.is-open .menu__curtain {
  transform: translate3d(0, 0, 0);
  border-radius: 0 0 0 0 / 50% 0 0 50%;
}

.menu__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  padding: clamp(4.4rem, 17vh, 8.6rem) var(--menu-gutter) clamp(1.5rem, 4.5vh, 2.8rem);
  padding-left: max(var(--pad), 3.2rem);
  color: #fff;
}

/* Everything in the column rides in behind the curtain, a shade out of step. */
.menu__eyebrow, .menu__list, .menu__foot {
  width: min(var(--menu-col), 100%);
  transform: translate3d(calc(100% + var(--menu-gutter) + 10rem), 0, 0);
  transition: transform 0.62s var(--ease);
}
.menu.is-open .menu__eyebrow { transform: none; transition-delay: 0.13s; }
.menu.is-open .menu__list    { transform: none; transition-duration: 0.74s; transition-delay: 0.19s; }
.menu.is-open .menu__foot    { transform: none; transition-duration: 0.8s;  transition-delay: 0.25s; }

.menu__eyebrow {
  margin: 0 0 3.6rem;
  padding-bottom: 1.96rem;
  border-bottom: 1px solid #ffffff2e;
  font-size: clamp(0.68rem, 0.84vw, 0.76rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: #ffffff80;
}

.menu__list a {
  position: relative;
  display: inline-block;
  font-size: clamp(2.1rem, 4.3vw, 4.05rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: #fff;
  transition: transform 0.5s var(--ease);
}
/* The marker hangs in the gutter so the words stay flush with the rule above. */
.menu__list a > i {
  position: absolute;
  right: calc(100% + 0.58em);
  top: 0.6em;
  width: 0.185em; height: 0.185em;
  border-radius: 50%;
  background: #fff;
  opacity: 0.28;
  transform: translateY(-50%) scale(0.72);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.menu__list a[aria-current] > i,
.menu__list a:hover > i,
.menu__list a:focus-visible > i { opacity: 1; transform: translateY(-50%) scale(1); }
.menu__list a:hover, .menu__list a:focus-visible { transform: translateX(0.12em); }
.menu__list a:focus-visible { outline: none; }

.menu__foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: var(--fs-meta); letter-spacing: 0.09em; text-transform: uppercase;
  color: #ffffff59;
}
.menu__foot a { transition: color 0.4s var(--ease); }
.menu__foot a:hover { color: #fff; }

/* Tall, narrow screens: the column reads better centred than stranded up top. */
@media (max-aspect-ratio: 3 / 4) {
  .menu__panel { justify-content: center; padding-top: clamp(4.4rem, 12vh, 7rem); }
  .menu__foot { margin-top: clamp(2.6rem, 10vh, 6rem); }
}

/* ============================================================
   HERO — full-bleed portrait, pill badge, drifting name
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: #fff;
}

/* The supplied studio portrait fills the hero, with the face centered. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(126% 100% at 50% 30%,
    #7e7977 0%, #6d6966 42%, #5b5756 74%, #4e4b4a 100%);
}
.hero__bg picture,
.hero__bg img {
  position: absolute;
  width: 100%; height: 100%;
}
.hero__bg img {
  object-fit: cover;
  object-position: 50% 42%;
}

.hero__bg-main {
  --shot: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(calc(var(--shot) * 1.1));
  transition: transform 2.3s var(--ease) 0.15s;
}
body.is-ready .hero__bg-main { transform: translate(-50%, -50%) scale(var(--shot)); }

/* keeps white type legible at the head and foot of the frame */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,14,16, 0.40) 0%, rgba(14,14,16, 0) 24%),
    linear-gradient(to top,    rgba(14,14,16, 0.46) 0%, rgba(14,14,16, 0) 40%);
}

/* --- right rail: scroll cue over the two service lines --- */
.hero__rail {
  position: absolute; z-index: 2;
  right: var(--pad); top: 50%;
  transform: translateY(var(--cy, -50%));
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(2rem, 6.5vh, 5rem);
}

.hero__arrow {
  width: clamp(19px, 1.6vw, 25px);
  color: #fff;
  opacity: 0;
  animation: arrow-drift 2.8s var(--ease) infinite;
  transition: opacity 0.9s var(--ease) 0.95s, transform 0.5s var(--ease);
}
body.is-ready .hero__arrow { opacity: 0.92; }
.hero__arrow svg { display: block; width: 100%; height: auto; }
.hero__arrow:hover { transform: translate(3px, 3px); }
@keyframes arrow-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 3px 3px; }
}

.hero__role {
  font-size: clamp(1.1rem, 1.95vw, 2.05rem);
  line-height: 1.26;
  letter-spacing: -0.016em;
  font-weight: 400;
}
.hero__role .mask {
  display: block; overflow: hidden;
  padding-bottom: 0.07em; margin-bottom: -0.07em;
}
.hero__role .mask > span {
  display: block;
  transform: translate3d(0, 112%, 0);
  transition: transform 1.15s var(--ease);
}
body.is-ready .hero__role .mask > span { transform: none; }
body.is-ready .hero__role .mask:nth-child(1) > span { transition-delay: 0.55s; }
body.is-ready .hero__role .mask:nth-child(2) > span { transition-delay: 0.63s; }
body.is-ready .hero__role .mask:nth-child(3) > span { transition-delay: 0.71s; }

/* --- left pill: runs off the edge of the screen --- */
.hero__badge {
  --bleed: 2.6rem;
  position: absolute; z-index: 2;
  left: calc(var(--bleed) * -1);
  top: 50%;
  transform: translate(-108%, var(--cy, -50%));
  transition: transform 1.2s var(--ease) 0.4s;
  display: flex; align-items: center;
  gap: clamp(1rem, 2.1vw, 2.1rem);
  background: var(--pill);
  border-radius: 999px;
  padding: 0.8rem;
  padding-left: calc(var(--bleed) + var(--pad));
}
body.is-ready .hero__badge { transform: translate(0, var(--cy, -50%)); }

.hero__loc {
  font-size: clamp(0.95rem, 1.18vw, 1.22rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--paper);
}
.hero__loc-lead { display: block; }
.hero__loc-places {
  display: block; position: relative;
  height: 1.3em; overflow: hidden;
  min-width: 5.5ch;
}
.hero__loc-places > span {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  transform: translate3d(0, 115%, 0);
  opacity: 0;
  transition: transform 0.62s var(--ease), opacity 0.4s var(--ease);
}
.hero__loc-places > span.is-on  { transform: none; opacity: 1; }
.hero__loc-places > span.is-out { transform: translate3d(0, -115%, 0); opacity: 0; }

.hero__globe {
  position: relative;
  flex: none;
  width: clamp(3rem, 4.6vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--globe-disc);
  color: var(--pill);
  display: grid; place-items: center;
}
/* The drawn globe holds the frame until the animated one is on screen. */
.hero__globe-anim {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.9s var(--ease);
}
.hero__globe-anim > svg { width: 100% !important; height: 100% !important; display: block; }
.hero__globe-line { transition: opacity 0.6s var(--ease); }
.hero__globe.has-anim .hero__globe-anim { opacity: 1; }
.hero__globe.has-anim .hero__globe-line { opacity: 0; }
/* The sphere turns by sweeping its meridians (SMIL, inside the markup);
   spinning the whole drawing would tip the latitude lines with it. */
.hero__globe svg { width: 66%; height: 66%; }

/* --- the name, drifting across the foot of the frame --- */
.hero__name {
  position: absolute; z-index: 2;
  left: 0; right: 0;
  bottom: clamp(0.5rem, 2.1vh, 2rem);
  overflow: hidden;
}
.hero__name-lift {
  transform: translate3d(0, 114%, 0);
  transition: transform 1.5s var(--ease) 0.3s;
}
body.is-ready .hero__name-lift { transform: none; }

.hero__name-track { display: flex; width: max-content; will-change: transform; }
.hero__name-set { display: flex; align-items: center; flex: none; }
.hero__name-set span {
  font-size: clamp(2.8rem, 13vw, 12.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.038em;
  white-space: nowrap;
}
.hero__name-set .rule {
  flex: none;
  width: clamp(2.4rem, 8.5vw, 8.5rem);
  height: clamp(3px, 0.6vw, 8px);
  background: currentColor;
  margin: 0 clamp(1.1rem, 3.4vw, 3.4rem);
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  padding: clamp(0.7rem, 1.6vw, 1.3rem) 0;
  background: var(--bg);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__set { display: flex; align-items: center; flex-shrink: 0; }
.marquee__set span {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5.4vw, 5rem);
  line-height: 1; letter-spacing: -0.025em;
  padding: 0 clamp(0.8rem, 2vw, 2rem);
  white-space: nowrap;
}
.marquee__set i {
  font-style: normal;
  font-size: clamp(0.8rem, 1.6vw, 1.5rem);
  color: var(--accent);
  transform: translateY(-0.25em);
}

/* ============================================================
   SECTION HEAD
   ============================================================ */

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem clamp(1rem, 3vw, 3rem);
  padding: 0 var(--pad);
  margin-bottom: clamp(2.4rem, 6vw, 6rem);
}
.section-head__idx { grid-column: 1; grid-row: 1; }
.section-head__title {
  grid-column: 1; grid-row: 2;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.section-head__note {
  grid-column: 2; grid-row: 2;
  max-width: 24ch;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: 1.45;
  padding-bottom: 0.4rem;
}

/* ============================================================
   INTRO
   ============================================================ */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: var(--gap) var(--pad);
}
.intro__index span { font-size: var(--fs-meta); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }

.intro__lead {
  font-size: var(--fs-lead);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 400;
  max-width: 30ch;
}

.intro__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(2.4rem, 6vw, 5.5rem);
  max-width: 48rem;
}
.intro__meta .k { display: block; margin-bottom: 0.7rem; }
.intro__meta p { color: var(--ink-soft); line-height: 1.55; }

/* ============================================================
   WORK
   ============================================================ */

.work { padding: var(--gap) 0; }

.projects { border-top: 1px solid var(--ink-faint); }

.project { border-bottom: 1px solid var(--ink-faint); }

.project__link {
  display: grid;
  grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.2rem, 2.6vw, 2.4rem) var(--pad);
  position: relative;
  transition: background-color 0.7s var(--ease), color 0.7s var(--ease);
}
.project__link::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s var(--ease-io);
  z-index: 0;
}
.project__link:hover::after { transform: scaleY(1); transform-origin: top; }
.project__link > * { position: relative; z-index: 1; }
.project__link:hover { color: var(--paper); }

.project__visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: #ddd9d0;
}
.project__art {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  transform: scale(1.12);
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
  filter: saturate(0.55);
}
.project__link:hover .project__art { transform: scale(1); filter: saturate(1); }
.project__glyph { font-size: clamp(1.1rem, 2vw, 2rem); color: #ffffffcc; }

.project[data-tint="a"] .project__art { background: linear-gradient(135deg, #8d9b7e, #46503c); }
.project[data-tint="b"] .project__art { background: linear-gradient(135deg, #c98a5f, #7d3f22); }
.project[data-tint="c"] .project__art { background: linear-gradient(135deg, #97a7b5, #3f4b57); }
.project[data-tint="d"] .project__art { background: linear-gradient(135deg, #c2b393, #70624a); }

.project__meta { display: flex; flex-direction: column; gap: 0.45rem; }
.project__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.025em;
}
.project__tags { font-size: var(--fs-meta); letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.6; }

.project__desc {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  opacity: 0.68;
  max-width: 44ch;
}

.project__year { justify-self: end; color: inherit; opacity: 0.55; }

/* ============================================================
   SERVICES — sticky stacked cards
   ============================================================ */

.services { padding: var(--gap) 0 0; }

.cards { padding: 0 var(--pad) clamp(3rem, 8vw, 9rem); }

.card { position: sticky; top: clamp(4.5rem, 10vh, 8rem); padding-top: 1rem; }
.card__inner {
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  padding: clamp(1.4rem, 3.4vw, 3.4rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 3.4rem);
  align-items: start;
  min-height: clamp(15rem, 27vh, 21rem);
  box-shadow: 0 -1px 0 0 #00000008, 0 24px 60px -40px #00000040;
  transform-origin: top center;
}
.card:nth-child(1) .card__inner { background: #f3f0e9; }
.card:nth-child(2) .card__inner { background: #ece8de; }
.card:nth-child(3) .card__inner { background: #e4dfd2; }
.card:nth-child(4) .card__inner { background: var(--bg-deep); color: var(--paper); border-color: #ffffff1f; }
.card:nth-child(4) .card__num,
.card:nth-child(4) .card__text { color: #f3f0e999; }
.card:nth-child(4) .card__list li { border-color: #ffffff22; }

.card__num {
  font-size: var(--fs-meta); letter-spacing: 0.1em; font-weight: 500;
  color: var(--ink-soft); padding-top: 0.5rem;
}
.card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  grid-column: 2;
}
.card__text {
  grid-column: 2;
  margin-top: clamp(0.8rem, 1.6vw, 1.4rem);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 42ch;
}
.card__list { grid-column: 3; grid-row: 1 / span 3; }
.card__list li {
  padding: 0.72rem 0;
  border-top: 1px solid var(--ink-faint);
  font-size: clamp(0.9rem, 1vw, 1rem);
}
.card__list li:last-child { border-bottom: 1px solid var(--ink-faint); }

/* ============================================================
   ABOUT
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: var(--gap) var(--pad);
  align-items: start;
}

.about__media { position: relative; }
.about__mask {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 4.7;
  background: #d8d4cb;
}
.about__mask img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(100%) contrast(1.04);
  transform: scale(1.06);
  transition: filter 1.1s var(--ease), transform 1.6s var(--ease);
}
.about__media:hover .about__mask img { filter: grayscale(0%); transform: scale(1); }

.about__sticker {
  position: absolute;
  right: clamp(-1.6rem, -2vw, -1rem);
  bottom: clamp(1.2rem, 3vw, 2.6rem);
  width: clamp(92px, 11vw, 136px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--bg-deep);
  border-radius: 50%;
  color: var(--paper);
}
.about__sticker svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: spin 18s linear infinite;
}
.about__sticker text {
  font-size: 9.2px; letter-spacing: 0.1em; text-transform: uppercase;
  fill: currentColor; font-family: var(--sans); font-weight: 500;
}
.about__sticker i { font-style: normal; font-size: 1.1rem; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.about__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 1rem 0 clamp(1.5rem, 3vw, 2.8rem);
  max-width: 18ch;
}
.about__text { display: grid; gap: 1.1rem; max-width: 54ch; color: var(--ink-soft); line-height: 1.6; }

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--ink-faint);
  padding-top: clamp(1.2rem, 2.5vw, 2rem);
}
.about__stats strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.about__stats span {
  display: block; margin-top: 0.45rem;
  font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   PROCESS
   ============================================================ */

.process { padding: var(--gap) 0; }
.steps { border-top: 1px solid var(--ink-faint); }

.step {
  display: grid;
  grid-template-columns: clamp(50px, 6vw, 90px) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.6rem) var(--pad);
  border-bottom: 1px solid var(--ink-faint);
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity 0.95s var(--ease), transform 1.05s var(--ease);
}
.step.is-in { opacity: 1; transform: none; }
.step__num { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--ink-soft); }
.step__body h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.025em;
  margin-bottom: 0.7rem;
}
.step__body p { color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  background: var(--bg-deep);
  color: var(--paper);
  padding: calc(var(--gap) * 1.1) var(--pad);
  position: relative;
  overflow: hidden;
}
.contact__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact__eyebrow {
  display: inline-flex; align-items: center;
  font-size: var(--fs-meta); letter-spacing: 0.09em; text-transform: uppercase;
  color: #f3f0e9aa;
}

.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 10.5vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: clamp(1.4rem, 3vw, 2.6rem) 0 clamp(2rem, 5vw, 3.6rem);
}
.contact__title .line { display: block; overflow: hidden; }
.contact__title .line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.3s var(--ease);
}
.contact__title .line:nth-child(2) > span { transition-delay: 0.08s; }
.contact.is-in .contact__title .line > span { transform: none; }
.contact__title em { font-style: italic; color: var(--accent); }

.contact__mail {
  display: inline-block;
  border: 1px solid #f3f0e93d;
  border-radius: 999px;
  padding: clamp(0.85rem, 1.6vw, 1.3rem) clamp(1.5rem, 3vw, 2.8rem);
  overflow: hidden;
  position: relative;
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  letter-spacing: -0.015em;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.contact__mail-inner { display: block; position: relative; overflow: hidden; height: 1.3em; }
.contact__mail-inner span { display: block; transition: transform 0.6s var(--ease); }
.contact__mail-inner span:last-child { position: absolute; top: 100%; left: 0; right: 0; }
.contact__mail:hover { background: var(--paper); color: var(--bg-deep); border-color: var(--paper); }
.contact__mail:hover .contact__mail-inner span { transform: translateY(-100%); }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  margin-top: clamp(3rem, 8vw, 7rem);
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid #f3f0e91f;
  text-align: left;
}
.contact__grid .k { display: block; margin-bottom: 0.8rem; color: #f3f0e977; }
.contact__grid p { color: #f3f0e9cc; line-height: 1.6; font-variant-numeric: tabular-nums; }
.contact__social li { padding: 0.3rem 0; }
.contact__social a {
  position: relative; color: #f3f0e9cc;
  transition: color 0.4s var(--ease);
}
.contact__social a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.contact__social a:hover { color: var(--paper); }
.contact__social a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer { background: var(--bg-deep); color: var(--paper); padding: 0 var(--pad) var(--pad); overflow: hidden; }

.footer__big {
  display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0 2vw;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 11.4vw, 12.6rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: #f3f0e966;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.4rem, 3vw, 2.4rem);
  user-select: none;
}
.footer__big span { display: block; white-space: nowrap; }

.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem;
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid #f3f0e91f;
  font-size: var(--fs-meta); letter-spacing: 0.07em; text-transform: uppercase;
  color: #f3f0e988;
}
.footer__top { transition: color 0.4s var(--ease); }
.footer__top:hover { color: var(--paper); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-height: 620px) and (min-width: 861px) {
  .hero__rail { gap: 1.6rem; }
  .hero__name-set span { font-size: clamp(2.6rem, 9.5vw, 8rem); }
}

@media (max-width: 1100px) {
  .intro { grid-template-columns: 1fr; }
  .project__link { grid-template-columns: clamp(70px, 12vw, 120px) minmax(0, 1fr) auto; }
  .project__desc { grid-column: 2 / -1; }
  .card__inner { grid-template-columns: auto minmax(0, 1fr); }
  .card__list { grid-column: 1 / -1; grid-row: auto; margin-top: 1.2rem; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 26rem; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }

  .hero {
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: clamp(1.1rem, 3vh, 2rem);
    padding: 0 0 clamp(0.7rem, 2vh, 1.3rem);
  }
  .hero__rail {
    position: static; --cy: 0%;
    align-self: flex-end; align-items: flex-end; text-align: right;
    padding-right: var(--pad); gap: clamp(1rem, 3vh, 1.8rem);
  }
  .hero__badge {
    position: static; --cy: 0%;
    align-self: flex-start;
    margin-left: calc(var(--bleed) * -1);
  }
  .hero__name { position: static; }

  .section-head { grid-template-columns: 1fr; }
  .section-head__note { grid-column: 1; grid-row: 3; max-width: 38ch; padding-top: 0.8rem; }

  .project__link { grid-template-columns: 1fr; gap: 1rem; }
  .project__visual { aspect-ratio: 16 / 10; }
  .project__year { justify-self: start; }
  .project__meta { gap: 0.3rem; }

  .card { position: static; }
  .card__inner { grid-template-columns: 1fr; min-height: 0; }
  .card__num { padding-top: 0; }
  .card__title, .card__text { grid-column: 1; }

  .about__stats { grid-template-columns: 1fr; gap: 1.4rem; }
  .about__sticker { right: 0.7rem; bottom: 0.7rem; }
  .step { grid-template-columns: 40px 1fr; }
  .step__time { grid-column: 2; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__inner { align-items: flex-start; text-align: left; }
  .footer__big { flex-direction: column; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee__track { transform: none !important; }
  [data-reveal], .step { opacity: 1 !important; transform: none !important; }
  .r-line > span, .r-word > span,
  .contact__title .line > span, .hero__role .mask > span,
  .preloader__word > span { transform: none !important; }
  .hero__name-lift { transform: none !important; }
  .hero__bg-main { transform: translate(-50%, -50%) scale(var(--shot)) !important; }
  .hero__badge { transform: translate(0, var(--cy, -50%)) !important; }
  .hero__arrow { opacity: 0.92 !important; }
  .hero__globe svg { animation: none !important; }
  .hero__name-track { transform: none !important; }
  .cursor { display: none !important; }
}

/* ---------- About me disc ---------- */
.aboutme{display:inline-block;margin-top:clamp(2.2rem,5vw,3.4rem);text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.aboutme__disc{display:grid;place-items:center;width:clamp(150px,17vw,210px);aspect-ratio:1;border-radius:50%;
  background:var(--ink,#141413);color:var(--paper,#faf9f5);
  transition:transform .55s cubic-bezier(.16,1,.3,1),background .35s ease}
.aboutme__label{font-family:var(--sans);font-size:clamp(.95rem,1.25vw,1.12rem);font-weight:400;letter-spacing:-.01em}
.aboutme:hover .aboutme__disc{transform:scale(1.06)}
.aboutme:active .aboutme__disc{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.aboutme__disc{transition:none}}

/* About without the portrait: single column, text keeps a readable measure */
.about { grid-template-columns: minmax(0, 1fr); }
.about__body { max-width: 60ch; }

/* ---------- page type matches /about (Instrument Sans); hero keeps its own ---------- */
:root{
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.preloader, .cursor, .nav, .menu, .hero{
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
}
body{ letter-spacing: -.005em; }
.section-head__title, .about__title, .card__title, .step__body h3, .project__name{ letter-spacing: -.03em; }

/* Inheritance carries the resolved stack, so the hero chrome needs explicit families */
.preloader, .preloader *, .cursor, .cursor *,
.nav, .nav *, .menu, .menu *,
.hero, .hero *{
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.preloader__name, .menu__list a{
  font-family: "Instrument Serif", "Times New Roman", Georgia, serif;
}

/* A short greeting in place of a simulated loading percentage. */
.preloader { justify-content: center; align-items: center; text-align: center; transition: opacity .35s ease, visibility 0s linear .35s; }
.preloader__greeting { font-family: var(--serif); font-size: clamp(3.5rem, 10vw, 9rem); letter-spacing: -.025em; line-height: 1; }

/* The menu disc stays out of the hero and arrives once the page is scrolled */
.menu-btn{ opacity: 0; transform: scale(0.84); pointer-events: none; }
body.is-ready .menu-btn{ opacity: 0; transform: scale(0.84); pointer-events: none; }
body.is-ready.nav-shown .menu-btn{ opacity: 1; transform: none; pointer-events: auto; }
body.menu-open .menu-btn{ opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) {
  body.is-ready .menu-btn { opacity: 1; transform: none; pointer-events: auto; }
}

/* Greeting words fade and lift between languages */
#preloaderGreeting{ display:inline-block; opacity:0; transform:translateY(.28em);
  transition:opacity .34s var(--ease), transform .46s var(--ease); }
#preloaderGreeting.is-in{ opacity:1; transform:none; }
#preloaderGreeting.is-out{ opacity:0; transform:translateY(-.26em); }
@media (prefers-reduced-motion: reduce){ #preloaderGreeting{ opacity:1; transform:none; transition:none; } }

.menu__clock time{ font-variant-numeric: tabular-nums; }

/* Phones have no inline links, so the disc stays reachable from the top. */
@media (max-width: 760px) {
  body.is-ready .menu-btn { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- mobile QA: thumb-sized hit areas ---------- */
@media (max-width: 760px) {
  .footer__bar a, .menu__foot a, .footer__top {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .menu__list a { min-height: 48px; }
  .hero__arrow {
    width: 44px; height: 44px; display: grid; place-items: center;
    margin-right: -10px;
  }
  .hero__arrow svg { width: 20px; height: 20px; }
}

/* ---------- main-page overlay: glass panel from the right ---------- */
.menu__curtain {
  right: 0; top: 0; height: 100%;
  width: min(430px, 92vw);
  border-radius: 0; border-left: 1px solid rgba(255,255,255,.14);
  background: rgba(16,16,15,.62);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: -40px 0 80px -30px rgba(0,0,0,.6);
  transform: translate3d(100%, 0, 0);
  transition: transform .62s cubic-bezier(.76,0,.24,1);
}
.menu.is-open .menu__curtain { transform: translate3d(0, 0, 0); border-radius: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu__curtain { background: rgba(13,13,12,.97); }
}
/* the dim behind the panel */
.menu::before {
  content: ""; position: absolute; inset: 0; background: rgba(8,8,8,.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .5s ease;
}
.menu.is-open::before { opacity: 1; }
.menu__panel {
  left: auto; right: 0; width: min(430px, 92vw);
  padding: clamp(4.4rem, 15vh, 7rem) 26px clamp(1.5rem, 4.5vh, 2.4rem);
  align-items: flex-start;
}
.menu__eyebrow, .menu__list li, .menu__foot { transform: translate3d(20px, 0, 0); }
.menu.is-open .menu__eyebrow,
.menu.is-open .menu__list li,
.menu.is-open .menu__foot { transform: none; }

/* ---------- main page: the top bar leaves, the menu disc arrives ----------
   Above the fold the inline links do the work. Once the hero is behind you
   the bar lifts out of the way and the circular toggle takes over, the way
   the reference site hands navigation to a single control. */
.br-nav {
  transition: transform .62s var(--ease), opacity .34s ease,
              visibility 0s linear 0s;
  will-change: transform;
}
body.nav-shown .br-nav {
  transform: translate3d(0, -102%, 0);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform .62s var(--ease), opacity .3s ease,
              visibility 0s linear .62s;
}
body.nav-shown .br-nav .br-work[open] > .br-work__links { display: none; }
body.is-ready.nav-shown .menu-btn { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .br-nav, body.nav-shown .br-nav { transition: none; }
}

/* ---------- faster greeting, wider location slot ----------
   The greeting now changes word every 240ms, so the cross-fade has to clear
   out of the way in time; the old .34s/.46s pair left two words on screen. */
#preloaderGreeting {
  transition: opacity .18s var(--ease), transform .26s var(--ease);
}
/* "Austria" is wider than the old 5.5ch slot, and the row clips its overflow. */
.hero__loc-places { min-width: 8ch; }

/* Phone hero: name across the portrait, services below, and a simple Menu. */
.menu-btn__label { display: none; }
@media (max-width: 760px) {
  .hero { display: block; height: 100svh; min-height: 100svh; padding: 0; }
  .hero__bg { background: #1c1d20; }
  .hero__bg img.hero__bg-main {
    top: calc(50% - clamp(40px, 8svh, 68px));
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  }
  .hero__veil {
    background: linear-gradient(to bottom, rgba(14,14,16,.16), transparent 24%),
                linear-gradient(to top, rgba(14,14,16,.2), transparent 35%);
  }
  .hero__name { position: absolute; top: 53%; bottom: auto; }
  .hero__name-set span { font-size: min(36.6vw, 19svh); line-height: 1; }
  .hero__name-set .rule { width: 21vw; height: 1.4vw; margin-inline: 6vw; }
  .hero__rail {
    position: absolute; top: auto; right: auto; left: 20px; bottom: 7svh;
    --cy: 0%; transform: none; padding: 0; gap: 8px;
    align-items: flex-start; text-align: left;
  }
  .hero__arrow { margin-right: 0; margin-left: -10px; }
  .hero__arrow svg { width: 22px; height: 22px; }
  .hero__role { font-size: clamp(20px, 6.3vw, 28px); line-height: 1.35; }
  .hero__badge {
    position: absolute; top: auto; left: auto; right: 20px; bottom: 8svh;
    --cy: 0%; --bleed: 0; padding: 0; margin: 0; gap: 0;
    background: transparent; border-radius: 0;
  }
  .hero__loc { display: none; }
  .hero__globe { width: clamp(48px, 13vw, 58px); background: transparent; color: #fff; }
  .hero__globe svg { width: 100%; height: 100%; }
  body .br-nav { padding: 24px 20px; font-size: 16px; }
  body:not(.nav-shown) .menu-btn {
    top: 24px; right: 20px; width: auto; min-width: 66px; height: 44px;
    border-radius: 0; background: transparent; overflow: visible;
  }
  body:not(.nav-shown) .menu-btn__fill,
  body:not(.nav-shown) .menu-btn__bars { display: none; }
  body:not(.nav-shown) .menu-btn__label {
    display: inline-flex; align-items: center; gap: 10px;
    color: #fff; font: 400 16px/1 "Inter Tight", sans-serif;
  }
  .menu-btn__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .menu-btn__close-word { display: none; }
  .menu-btn.is-open .menu-btn__word { display: none; }
  .menu-btn.is-open .menu-btn__close-word { display: inline; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .hero__name { top: 29%; }
  .hero__role { font-size: 18px; }
  body .br-nav { padding-block: 12px; }
  body:not(.nav-shown) .menu-btn { top: 12px; }
}

/* Keep the sheet painted until its exit completes and let short screens scroll. */
.menu.is-closing { visibility: visible; pointer-events: auto; }
.menu__panel { overflow-y: auto; overscroll-behavior: contain; }
.menu__panel {
  transform: translate3d(100%, 0, 0);
  transition: transform .62s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.menu.is-open .menu__panel { transform: translate3d(0, 0, 0); }
.menu.is-closing .menu__panel, .menu.is-closing .menu__curtain {
  transition: transform .5s cubic-bezier(.76,0,.24,1) .1s;
}
.menu__list li, .menu.is-open .menu__list li { transform: none; }
.menu__eyebrow, .menu__list, .menu__foot {
  flex-shrink: 0; opacity: 0; transform: translate3d(22px, 0, 0);
  transition: opacity .3s ease, transform .5s var(--ease);
}
.menu.is-open .menu__eyebrow, .menu.is-open .menu__list, .menu.is-open .menu__foot {
  opacity: 1; transform: none;
}
.menu.is-closing .menu__eyebrow, .menu.is-closing .menu__list, .menu.is-closing .menu__foot {
  opacity: 0; transition-duration: .18s; transition-delay: 0s;
}
.menu__foot { overflow-wrap: anywhere; }
.menu-btn { visibility: hidden; }
body.is-ready.nav-shown .menu-btn, body.menu-open .menu-btn { visibility: visible; }
@media (max-width: 760px) { body.is-ready .menu-btn { visibility: visible; } }
@media (max-height: 500px) {
  .menu__panel { padding-top: 74px; padding-bottom: 24px; }
  .menu__eyebrow { margin-bottom: 24px; padding-bottom: 18px; }
  .menu__foot { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu__panel, .menu__curtain, .menu__eyebrow, .menu__list, .menu__foot { transition: none; }
}

/* Keep phone navigation in one composited layer, with a stable tap target. */
@media (max-width: 760px) {
  .menu__curtain {
    background: #191a1b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body .menu-btn, body:not(.nav-shown) .menu-btn {
    top: 24px; right: 20px; width: 76px; min-width: 76px; height: 44px;
    border-radius: 22px; overflow: visible; background: transparent;
    transition: opacity .4s ease, background-color .4s ease;
  }
  body.nav-shown .menu-btn, body.menu-open .menu-btn { background: #191a1b; }
  body .menu-btn__fill, body .menu-btn__bars { display: none; }
  body .menu-btn__label, body:not(.nav-shown) .menu-btn__label {
    position: relative; display: block; width: 54px; height: 18px;
    color: #fff; font: 400 16px/18px "Inter Tight", sans-serif;
  }
  .menu-btn__label::before {
    position: absolute; left: 0; top: 6px; width: 6px; height: 6px;
  }
  .menu-btn__word, .menu-btn__close-word,
  .menu-btn.is-open .menu-btn__word, .menu-btn.is-open .menu-btn__close-word {
    position: absolute; inset: 0 0 0 14px; display: block;
    transition: opacity .2s ease, transform .3s var(--ease);
  }
  .menu-btn__word { opacity: 1; transform: none; }
  .menu-btn__close-word { opacity: 0; transform: translateY(5px); }
  .menu-btn.is-open .menu-btn__word { opacity: 0; transform: translateY(-5px); }
  .menu-btn.is-open .menu-btn__close-word { opacity: 1; transform: none; }
}
@media (max-width: 760px) and (orientation: landscape) {
  body .menu-btn, body:not(.nav-shown) .menu-btn { top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn, .menu-btn__word, .menu-btn__close-word { transition: none !important; }
}

@media (max-width: 760px) { .menu::before { -webkit-backdrop-filter: none; backdrop-filter: none; } }

.menu__eyebrow, .menu__list, .menu__foot,
.menu.is-open .menu__eyebrow, .menu.is-open .menu__list, .menu.is-open .menu__foot,
.menu.is-closing .menu__eyebrow, .menu.is-closing .menu__list, .menu.is-closing .menu__foot {
  transform: none; transition-property: opacity;
}
@media (max-width: 760px) {
  .menu__list a:hover, .menu__list a:focus-visible { transform: none; }
  .menu__list a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
}
@media (max-aspect-ratio: 3 / 4) {
  .menu__panel { justify-content: flex-start; justify-content: safe center; }
}


/* ---------- "Let's work together", the same closing panel as the other sites ----------
   Ported from experience.css / work.css so the three read as one family: the
   ink ground, the Helvetica stack and the vw geometry are theirs, not this
   page's warm palette. The scroll-effects script finds `.contact-footer`
   first, so this panel gets the curved cap and the travelling button. */
.contact-footer {
  position: relative; overflow: hidden;
  background: #1c1d20; color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-height: 70vw; padding-top: 19.9vw; padding-bottom: 7vw;
  letter-spacing: -.012em;
}
.contact-footer .content { width: 77.14%; margin-inline: auto; }
.contact-footer a { color: inherit; text-decoration: none; }
.contact-heading { position: relative; }
.contact-heading h2 { font-size: 6.125vw; line-height: 1.065; letter-spacing: -.018em; font-weight: 400; margin: 0; }
.contact-heading .first-line { display: flex; align-items: center; gap: 1.95vw; }
.contact-heading .second-line { display: block; }
.contact-portrait { width: 5.25vw; height: 5.25vw; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-arrow { position: absolute; right: 0; top: 5.2vw; width: 1.8vw; height: 1.8vw; }
.contact-rule { position: relative; height: 1px; background: #4a4b4d; margin-top: 9.9vw; }
.contact-button {
  position: absolute; right: 7.55vw; top: 0;
  width: 15.15vw; height: 15.15vw; margin-top: -7.575vw;
  border-radius: 50%; display: grid; place-items: center;
  background: #455ce9; color: #fff;
  font-size: 1.64vw; letter-spacing: -.04em;
  transition: background .3s, transform .25s cubic-bezier(.22,1,.36,1);
}
.contact-button:hover { background: #334bd7; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1.4vw; margin-top: 7vw; }
.contact-pill {
  display: inline-flex; justify-content: center; align-items: center;
  height: 7.1vw; padding-inline: 4.15vw;
  border: max(1px, .1vw) solid #505153; border-radius: 100vw;
  font-size: 1.64vw; letter-spacing: -.018em;
  transition: background .3s, border-color .3s;
}
.contact-pill:hover { background: #2d2e32; border-color: #858587; }
/* the big-name footer carries on underneath; same ground, so the two panels
   read as one block the way the other sites' footers do */
.contact-footer + .footer { padding-top: clamp(2rem, 4vw, 4rem); background: #1c1d20; }

@media (max-width: 760px) {
  .contact-footer { padding-top: 110px; padding-bottom: 40px; min-height: 0; }
  .contact-footer .content { width: calc(100% - 48px); }
  .contact-heading h2 { font-size: clamp(44px, 10.7vw, 78px); line-height: 1.07; letter-spacing: -.045em; }
  .contact-heading .first-line { gap: 13px; }
  .contact-portrait { width: 46px; height: 46px; }
  .contact-arrow { display: none; }
  .contact-rule { margin-top: 105px; }
  .contact-button { width: 142px; height: 142px; right: 0; margin-top: -71px; font-size: 16px; }
  .contact-links { gap: 12px; margin-top: 56px; }
  .contact-pill { height: 64px; max-width: 100%; padding-inline: 28px; font-size: 16px; }
}
@media (max-width: 360px) {
  .contact-heading h2 { font-size: 12vw; }
  .contact-portrait { width: 38px; height: 38px; }
  .contact-pill { padding-inline: 20px; font-size: 15px; }
}

/* ---------- the curved cap above the closing panel ----------
   The shared script paints the cap white, which is right on the other sites
   but wrong here: the page above this panel is warm paper, so a white arc
   showed as a pale wedge. Matching the cap to the page, and widening the
   ellipse so its ends fall well outside the viewport, leaves a single soft
   curve instead of a visible edge. */
.contact-footer.br-scroll-footer { --br-cap-color: #e9e6df; }
.contact-footer.br-scroll-footer .br-scroll-footer__ellipse {
  width: 260%;
  height: 1200%;
  transform: translate(-50%, -91.5%);
}

/* The page's real heading. The giant drifting name beside it is decoration,
   so the heading is read, not seen. */
.hero__h1 {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- phone hit areas ----------
   Audit at 390px found the language switch, and a few inline links, below the
   44px that a thumb needs. Padding grows the target without moving the type. */
@media (max-width: 760px) {
  .language-links a,
  .br-languages a,
  .langsw a {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .footer-social-links a,
  .details__line,
  .demo-replay,
  .more {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}