/* ==========================================================================
   HUSEJN KOFRC — PORTFOLIO DESIGN SYSTEM  (full rules: STYLE.md)
   Type   : Archivo for everything; Newsreader italic only for the one or two
            emphasis words in a headline
   Colour : true black / pure white sections, blue #0071E3 buttons; the
            blue-violet-pink gradient is reserved for the CTA signature
   ========================================================================== */

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

:root{
  /* colors */
  --bg: #000000;
  --bg-soft: #000000;
  --surface: #141319;
  --surface-2: #1b1a22;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f4f2ec;
  --text-muted: #9a98a3;
  --text-dim: #5c5a66;

  --accent-blue: #4c8cff;
  --accent-violet: #8b5cf6;
  --accent-pink: #ff3d81;
  --gradient: linear-gradient(120deg, var(--accent-blue) 0%, var(--accent-violet) 55%, var(--accent-pink) 100%);
  --gradient-soft: linear-gradient(120deg, rgba(76,140,255,.25), rgba(139,92,246,.25) 55%, rgba(255,61,129,.25));

  /* type */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  /* monospace retired — labels/tags now use tracked --font-sans instead */
  --font-mono: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* native UI stack (SF Pro on Apple, Segoe on Windows) — testimonial card reading text only */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* layout */
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1400px;
  --radius: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
  /* space between sections: the head of the next section adds its own top padding on top of this */
  --section-end: clamp(120px, 13vw, 220px);
  --section-start: clamp(170px, 20vw, 320px);
}

html{
  background: var(--bg);
  scroll-behavior: auto;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.4;
  overflow-x: clip;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
em{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
button{ font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }
section{ position: relative; }
[hidden]{ display: none !important; }   /* the hidden attribute always wins (hidden sections, booking steps) */

/* ---------- helpers ---------- */
/* Section heading kit -- the same three pieces everywhere (STYLE.md):
   eyebrow  : small, uppercase, widely tracked, muted -- optional
   title    : big, medium weight, tight tracking; one italic serif phrase allowed, in the title's own colour
   intro    : one or two calm sentences in muted text */
.eyebrow{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.eyebrow__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gradient);
  flex-shrink: 0;
}

.section-head{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-start) var(--pad) clamp(48px,6vw,72px);
}
.section-head--row{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  flex-wrap: wrap;
}
.section-head--row .section-intro{ max-width: 340px; margin: 0; }
.section-head--center{ text-align: center; }
.section-head--center .eyebrow{ justify-content: center; }
.section-head--center .section-intro{ max-width: 640px; margin-left: auto; margin-right: auto; }

.section-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.section-title em{
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.015em;
  color: inherit;
}
.section-intro{
  margin-top: 28px;
  max-width: 480px;
  color: var(--text-muted);
  font-size: clamp(16px,1.45vw,20px);
  line-height: 1.55;
}

.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-size: 14px; font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid var(--border-strong);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--primary{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn--primary:hover{ transform: translateY(-2px); }
.btn--ghost{ color: var(--text); }
.btn--ghost:hover{ border-color: var(--text); }
.btn svg{ transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translate(2px,-2px); }

/* ---------- grain overlay ---------- */
.grain{
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  /* perf: no mix-blend-mode — blending a fixed full-viewport layer forces
     expensive compositing on every scrolled frame; plain low opacity reads
     nearly identical and is essentially free */
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- preloader ---------- */
.preloader{
  position: fixed; inset: 0; z-index: 998;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* the logo fades in on its own (pure CSS, so it shows even before the scripts arrive) */
.preloader__mark{
  position: relative;
  width: clamp(190px, 26vw, 280px);
  animation: preloaderIn .5s ease both;
}
@keyframes preloaderIn{ from{ opacity: 0; } to{ opacity: 1; } }
.preloader__logo{ display: block; width: 100%; height: auto; }
/* the blue ring sits where a fourth letter of "DEV" would be; same 256×124 box as the logo image */
.preloader__ring{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.preloader__ring-arc{ fill: none; stroke: #0473E3; stroke-width: 8; stroke-linecap: round; }

/* ---------- topbar (announcement bar + nav, hide/show together on scroll) ---------- */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: transform .5s var(--ease);
}
.topbar.is-hidden{ transform: translateY(-110%); }

/* ---------- announcement bar: white, sits above the dark nav ---------- */
.announce{
  background: #fff; color: #131217;
  border-bottom: 1px solid rgba(10,10,13,.08);
  overflow: hidden;
}
.announce__inner{
  max-width: var(--maxw); margin: 0 auto;
  padding: 11px var(--pad);
  display: flex; align-items: center; gap: 14px;
}
.announce__badge{
  flex-shrink: 0;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: #16a34a;
  border-radius: 100px; padding: 5px 12px;
}
.announce__text{
  flex: 1; min-width: 0;
  font-size: 13.5px; color: #55535c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.announce__actions{ flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.announce__cta{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #fff;
  background: #0071E3; border-radius: 100px; padding: 8px 16px;
  transition: background .18s ease;
  white-space: nowrap;
}
.announce__cta:hover{ background: #0a7ef0; }
.announce__close{
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: #8a8892;
  transition: background .3s ease, color .3s ease;
}
.announce__close:hover{ background: rgba(10,10,13,.06); color: #131217; }

.announce-hidden .announce{ display: none; }

@media (max-width: 640px){
  .announce__text{ display: none; }
  .announce__inner{ padding: 10px var(--pad); gap: 10px; }
}

/* ---------- nav ---------- */
.nav{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad);
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(10,10,13,.7);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}

/* wordmark: the provided logo image is black on transparent, so it's inverted to white by default
   (nav over dark sections, footer) and shown as-is over the white hero (see .is-on-light below) */
.nav__logo{ display: flex; align-items: center; }
.nav__logo-img{
  display: block;
  width: clamp(64px, 6.8vw, 80px); height: auto;
  filter: invert(1);
}

.nav__right{ display: flex; align-items: center; gap: 10px; }
/* a plain text link beside the pill; hover changes colour only */
.nav__link{
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text);
  transition: color .18s, opacity .3s ease, visibility .3s;
}
.nav__link:hover{ color: var(--text-muted); }
.nav__link:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 2px; border-radius: 8px; }
header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__link{ color: #000; }
header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__link:hover{ color: #55535c; }

.nav__cta{
  display: inline-flex; align-items: center;
  padding: 10px 19px; border-radius: 100px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--bg); background: var(--text);
  transition: opacity .3s ease, visibility .3s;
}
.nav__cta:hover{ opacity: .85; }

.nav__toggle{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 10px;
  transition: border-color .3s ease, background .3s ease;
}
.nav__toggle span{ height: 1.6px; width: 12px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .3s ease; }
.nav__toggle span:first-child{ transform: translateX(3px); }
.nav__toggle span:last-child{ transform: translateX(-3px); }
.nav__toggle.is-open span:first-child{ transform: translateX(-3px); }
.nav__toggle.is-open span:last-child{ transform: translateX(3px); }
/* hover only where there is a real mouse: on a phone a tap would leave :hover stuck, so the lines would already sit
   in their "open" places and opening or closing the menu would show no movement */
@media (hover: hover) and (pointer: fine){
  .nav__toggle:hover{ border-color: var(--text); }
  .nav__toggle:hover span:first-child{ transform: translateX(-3px); }
  .nav__toggle:hover span:last-child{ transform: translateX(3px); }
  header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__toggle:hover{ border-color: #000; }
}

/* over the white hero: transparent bar with dark ink (the logo shows as its native black).
   Not applied while the full-screen menu is open — that overlay is dark. */
.nav__logo-img{ transition: filter .4s ease; }
header.nav.is-on-light:not(:has(.nav__toggle.is-open)){
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__logo-img{ filter: none; }
header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__cta{ background: #000; color: #fff; }
header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__toggle{ border-color: rgba(0,0,0,.28); }
header.nav.is-on-light:not(:has(.nav__toggle.is-open)) .nav__toggle span{ background: #000; }

/* ---------- menu: full-screen, numbered links left, one big visual preview right ---------- */
/* Links use the heading type (Archivo 500, tight); Newsreader italic only inside the previews' titles. Hover and the
   active link change colour only. The preview is one dark card in the skills-card language (soft coloured light on
   near-black) and cross-fades per link. Phones / touch: links only, contact pills below. */
.nav-mobile{
  position: fixed; inset: 0; z-index: 90;
  background: #000;
  display: flex; flex-direction: column;
  padding: clamp(92px, 12vh, 124px) var(--pad) 0;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.nav-mobile.is-open{ transform: translateY(0); }
.menu-open .announce{ display: none; }                /* the white bar would sit over the dark menu */
/* the open menu has its own "Let's Talk" (under the links), so the nav one steps aside */
.menu-open .nav__cta, .menu-open .nav__link{ opacity: 0; visibility: hidden; pointer-events: none; }

.menu{
  flex: 1; min-height: 0; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 90px); align-items: center;
}
.menu__links{ display: flex; flex-direction: column; }
.menu__link{
  display: block;
  padding: clamp(3px, .9vh, 10px) 0; color: #4a4852;
  transition: color .25s ease;
}
.menu__title{
  display: block; font-weight: 500; letter-spacing: -.04em; line-height: 1;
  /* five links and the button have to fit between the navbar and the foot at any height, so the size also
     follows the screen's height (e.g. a 1080p screen at 125% Windows scaling is only ~800px tall) */
  font-size: min(clamp(40px, 5.4vw, 78px), calc(15vh - 58px));
}
.menu__sub{ display: block; margin-top: 8px; font-size: 14px; color: #3a3842; transition: color .25s ease; }
.menu__link:hover, .menu__link:focus-visible, .menu__link.is-active{ color: var(--text); }
.menu__link:hover .menu__sub, .menu__link:focus-visible .menu__sub, .menu__link.is-active .menu__sub{ color: var(--text-muted); }
.menu__link:focus-visible{ outline: none; }
.menu__cta{
  align-self: flex-start; margin-top: clamp(14px, 3vh, 30px);
  display: inline-flex; align-items: center; gap: 8px;
  background: #0071E3; color: #fff; border-radius: 100px; padding: 15px 26px;
  font-size: 16px; font-weight: 500; transition: background-color .18s;
}
.menu__cta:hover{ background: #0a7ef0; }
.menu__cta:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 3px; }

.menu__preview{ display: none; position: relative; height: min(64vh, 560px); }
@media (min-width: 901px) and (hover: hover) and (pointer: fine){
  .menu__preview{ display: grid; }
}
.menu-panel{
  grid-area: 1 / 1; position: relative; display: block; overflow: hidden; border-radius: 28px;
  background: radial-gradient(90% 70% at 70% 0%, var(--light), rgba(0,0,0,0) 70%), #07070a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.menu-panel.is-active{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu-panel__eyebrow{
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted);
}
.menu-panel__title{ display: block; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: var(--text); }
.menu-panel__intro{ display: block; margin-top: 14px; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }

/* work: two real site windows, Servee in front */
.menu-window{
  position: absolute; border-radius: 14px; overflow: hidden; background: #0f0f12;
  box-shadow: 0 40px 80px -24px #000;
}
.menu-window--back{ left: 12%; right: 12%; top: 8%; height: 52%; opacity: .55; transform: scale(.92); transform-origin: 50% 0; }
.menu-window--front{ left: 6%; right: 6%; top: 18%; height: 62%; }
.menu-window__bar{
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  background: #1a1a1d; font-size: 11.5px; color: var(--text);
}
.menu-window__bar i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.menu-window__bar b{ font-weight: 500; margin-left: 8px; }
.menu-window__bar em{ margin-left: auto; font-family: var(--font-sans); font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.menu-window img{ display: block; width: 100%; height: calc(100% - 32px); object-fit: cover; object-position: top; }

/* services: the six skills, in the site's order, with their tool marks */
.menu-tiles{ position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; }
.menu-tile{
  display: flex; flex-direction: column; justify-content: space-between; min-height: 0;
  border-radius: 16px; padding: 16px;
  background: radial-gradient(120% 90% at 20% 0%, var(--tile), #04050a 70%);
}
.menu-chip{ display: block; width: 40px; height: 40px; transform: rotate(var(--rot)); filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); }
.menu-chip svg{ display: block; width: 100%; height: 100%; }
.menu-tile__name{ font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }

/* about: the photo and a short intro */
.menu-about{ position: absolute; inset: 6%; display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; }
.menu-about__photo{ display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -24px #000; }
.menu-about__photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* process: a mini stepper in the stepper's own blue */
.menu-process{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 8%; }
.menu-steps{ position: relative; display: flex; justify-content: space-between; margin-top: 38px; }
/* five equal columns: the dots sit at 10%, 30% … 90%, so the line runs exactly from the first dot to the last */
.menu-steps::before, .menu-steps::after{ content: ''; position: absolute; left: 10%; top: 18px; height: 2px; }
.menu-steps::before{ right: 10%; background: rgba(255,255,255,.12); }
.menu-steps::after{ width: 40%; background: #3939e1; }
.menu-step{ flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; color: #6b6974; }
.menu-step i{
  width: 16px; height: 16px; border-radius: 50%; margin-top: 11px;
  background: #1c1c1f; border: 1.5px solid rgba(255,255,255,.22);
}
.menu-step.is-on{ color: var(--text); }
.menu-step.is-on i{ background: #3939e1; border-color: #3939e1; }

.menu__foot{
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px 0 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.menu__contact{ display: flex; flex-wrap: wrap; gap: 10px; }
.menu__note{ color: var(--text-dim); font-size: 13px; }

/* touch / narrow: there is no hover and no preview, so every link reads at full strength (muted would look disabled) */
@media (max-width: 900px), (hover: none){
  .menu__link{ color: var(--text); }
  .menu__sub{ color: var(--text-muted); }
}
@media (max-width: 900px){
  .menu{ grid-template-columns: 1fr; align-content: center; }
  .menu__title{ font-size: min(clamp(38px, 11vw, 60px), calc(20vh - 102px)); }
}
/* shorter screens: the subtitles step aside so the titles can stay big */
@media (max-height: 820px){
  .menu__sub{ display: none; }
  .menu__title{ font-size: min(clamp(40px, 5.4vw, 78px), calc(15vh - 36px)); }
}
@media (max-height: 820px) and (max-width: 900px){
  .menu__title{ font-size: min(clamp(38px, 11vw, 60px), calc(10vh - 22px)); }
}
@media (max-width: 560px){
  .menu__note{ display: none; }
}

@media (max-width: 640px){
  .nav__cta{ padding: 9px 15px; font-size: 12px; }
  .nav__link{ font-size: 12px; padding: 0 6px; }
  .nav__right{ gap: 6px; }
}

/* ---------- hero: typed intro, then a photo shape opens up between the two lines ---------- */
.sr-only{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hero{ position: relative; background: #fff; color: #000; }
.hero__scroll{ position: relative; height: 100svh; }
.hero__stage{
  position: relative; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  /* bottom pad puts the resting pair at ~42-43% of the viewport, as in the sketch */
  padding: 0 var(--pad) 15vh;
}

/* While the intro plays the page can't scroll (wheel/touch/keys drive the intro instead, see main.js).
   The padding stands in for the scrollbar that just disappeared, so nothing shifts when it comes back;
   its strip is painted white to match the hero. */
html.is-locked{
  overflow: hidden;
  padding-right: var(--sbw, 0px);
  background: #fff;
  overscroll-behavior: none;
  touch-action: pinch-zoom;
}
html.is-locked .topbar{ right: var(--sbw, 0px); }

.intro{
  /* sized so "Husejn Kofrc" spans ~36% of the viewport, as in the sketch */
  --fs: clamp(34px, calc(22px + 3.2vw), 92px);
  font-family: var(--font-sans); font-size: var(--fs); font-weight: 400;
  letter-spacing: .17em; line-height: 1.3;
  width: max-content; max-width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  will-change: transform;
}
.intro__line{ position: relative; white-space: nowrap; }
.intro__line--hey{ font-size: .9em; color: #5E5252; }
.intro__line--name{ color: #000; }

/* the invisible ghost holds each line's final size, so typing never shifts the layout */
.intro__ghost{ visibility: hidden; }
.intro__typed{ position: absolute; left: 0; top: 0; white-space: pre; }
.intro__text{ white-space: pre; }

.intro__caret{
  display: inline-block; width: max(2px, .04em); height: 1em;
  margin-left: .06em; vertical-align: -.14em;
  background: currentColor;
  animation: caretBlink 1.1s step-end infinite;
}
.intro.is-typing .intro__caret{ animation: none; opacity: 1; }
/* once the picture starts to grow, the caret is done */
.intro.is-caret-off .intro__caret{ animation: none; opacity: 0; transition: opacity .25s ease; }
@keyframes caretBlink{ 50%{ opacity: 0; } }

/* the photo shape: reserved height animates open (GSAP), the shape itself is
   revealed with clip-path from a dot at its top-left corner to the full rect */
.intro__media{ position: relative; width: 100%; height: 0; flex-shrink: 0; }
.intro__shape{
  position: absolute; left: 0; top: .36em;
  width: calc(100% - .17em); aspect-ratio: 1.6 / 1;
  /* short screens: the photo gives up height so both lines and the navbar still fit */
  max-height: calc(100svh - 3em - 180px);
  opacity: 0;
  clip-path: inset(0 100% 100% 0 round 999px);
}
.intro__slot{ position: absolute; inset: 0; background: #d9d9d9; }
.intro__slot picture{ display: block; width: 100%; height: 100%; }
.intro__slot img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* phones: the name spans the full width and the photo is taller (its own 5:4 crop), so the intro fills the screen */
@media (max-width: 760px){
  .intro{ --fs: min(calc((100vw - 2 * var(--pad)) / 7.75), 60px); }
  .intro__shape{ aspect-ratio: 1.25 / 1; }
}

/* ---------- marquee: white, a continuation of the landing page (and the white sections after it) ---------- */
.marquee{
  /* the words dissolve into white over this much of each end */
  --fade: max(8.6%, 44px);
  background: #fff;
  padding: clamp(28px, 4vw, 44px) 0 clamp(32px, 4.5vw, 52px);
}
.marquee__row{
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.marquee__track{ display: inline-flex; will-change: transform; }
/* margin (not flex gap) so both halves of the duplicated track are exactly equal and the -50% loop has no jump */
.marquee__track span{
  margin-right: clamp(40px, 4.4vw, 68px);
  font-family: var(--font-sans); font-weight: 500; font-size: clamp(17px, 1.45vw, 22px);
  color: #5E5252;
}

/* ---------- skills: a horizontal card gallery (Apple-style) ---------- */
/* A plain overflow-x scroller: the mouse wheel scrolls the page as usual, a two-finger trackpad swipe (or shift+wheel,
   or a touch swipe) moves the row natively, and the arrows bottom-right glide it one card at a time (main.js).
   Cards snap to the page's left padding, so the first card lines up with the heading. */
.skills{
  --w: clamp(250px, 24vw, 340px);
  --gap: clamp(12px, 1.3vw, 20px);
  padding: var(--section-start) 0 var(--section-end);
}
.skills__head{ padding: 0 var(--pad); margin-bottom: clamp(40px, 6vh, 64px); }
.skills__title{ max-width: 16ch; }

.skills__track{
  display: flex; gap: var(--gap);
  overflow-x: auto; overflow-y: hidden;
  padding: 0 var(--pad);
  scroll-padding-inline: var(--pad);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;          /* a swipe past the last card must not trigger browser back/forward */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.skills__track::-webkit-scrollbar{ display: none; }
.skills__track.is-gliding{ scroll-snap-type: none; }   /* the arrow tween drives scrollLeft; snapping would fight it */
.skills__track .skill-card{ scroll-snap-align: start; }

.skill-card{
  position: relative; flex: 0 0 var(--w); width: var(--w);
  height: calc(var(--w) * 1.7);
  border-radius: clamp(20px, calc(var(--w) * .117), 36px);
  overflow: hidden; isolation: isolate;
  background: #04050a; color: #fff;
}
.skill-card::after{                                    /* keeps the text readable over any artwork */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.7) 26%, rgba(0,0,0,0) 60%);
}
.skill-card__art{ position: absolute; inset: 0; z-index: 0; }
.skill-card__art img{ display: block; width: 100%; height: 100%; object-fit: cover; }   /* for the real screenshots later */
.skill-card__body{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 calc(var(--w) * .075) calc(var(--w) * .085);
}
.skill-card__title{
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -.01em; line-height: 1.12;
  font-size: clamp(17px, calc(var(--w) * .088), 26px);
}
.skill-card__desc{
  margin-top: .5em; color: rgba(255,255,255,.8);
  font-size: clamp(12px, calc(var(--w) * .056), 15px); line-height: 1.36;
}

/* placeholder artwork: soft coloured light on near-black, a faint grid and a few floating marks */
.art{ background: #04050a; overflow: hidden; }
.art::before{ content: ''; position: absolute; inset: 0; }
.art--blue::before{ background:
  radial-gradient(120% 55% at 18% 0%, rgba(58,76,255,.95), rgba(58,76,255,0) 62%),
  radial-gradient(90% 50% at 100% 46%, rgba(110,52,255,.45), rgba(110,52,255,0) 70%); }
.art--violet::before{ background:
  radial-gradient(110% 55% at 72% 6%, rgba(139,92,246,.95), rgba(139,92,246,0) 62%),
  radial-gradient(90% 45% at 0% 50%, rgba(255,61,129,.45), rgba(255,61,129,0) 70%); }
.art--ink::before{ background: linear-gradient(180deg, #0d0d14 0%, #000 70%); }
.art--green::before{ background:
  radial-gradient(110% 55% at 50% 0%, rgba(20,184,140,.75), rgba(20,184,140,0) 64%),
  radial-gradient(80% 40% at 100% 55%, rgba(136,206,2,.28), rgba(136,206,2,0) 70%); }
.art--gauge::before{ background: linear-gradient(180deg, #0a0c12, #000 75%); }
.art--teal::before{ background: radial-gradient(110% 55% at 25% 0%, rgba(34,197,94,.55), rgba(34,197,94,0) 62%); }

.art__grid{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 68%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 68%);
}
.art-chip{
  position: absolute; width: calc(var(--w) * .22); aspect-ratio: 1;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.art-chip--sm{ width: calc(var(--w) * .16); }
.art-chip svg{ display: block; width: 100%; height: 100%; }
.art-screen{
  position: absolute; left: 16%; top: 42%; width: 68%; height: 22%;
  border-radius: 8px;
  background: linear-gradient(135deg, #e7e7eb, #9c9ca4);
  transform: perspective(600px) rotateX(20deg) rotateZ(-5deg);
  box-shadow: 0 30px 40px -12px rgba(0,0,0,.7);
}
.art-screen::before{
  content: ''; position: absolute; inset: 14% 10%;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.2) 0 2px, transparent 2px 9px);
}
/* drawn artwork: one 300x510 SVG per card (same ratio as the card), painted in DOM order with the chips */
.art-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--font-sans); }
/* Webflow card: a slice of the Designer, tilted away and fading into the dark */
.art-wf{
  position: absolute; left: 11%; top: 21%; width: 150%;
  transform: perspective(900px) rotateY(-24deg) rotateX(10deg) rotateZ(-3deg); transform-origin: 0 0;
  -webkit-mask-image: radial-gradient(115% 95% at 0% 0%, #000 38%, transparent 78%);
  mask-image: radial-gradient(115% 95% at 0% 0%, #000 38%, transparent 78%);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.6));
}
.art-wf svg{ display: block; width: 100%; height: auto; font-family: var(--font-sans); }

.skills__foot{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(24px, 4vh, 40px) var(--pad) 0;
}
.skills__tech{ list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.skills__tech li{ width: clamp(40px, 3.6vw, 52px); height: clamp(40px, 3.6vw, 52px); flex: 0 0 auto; }
.skills__tech svg{ display: block; width: 100%; height: 100%; }
.skills__arrows{ display: flex; gap: 14px; flex: 0 0 auto; }
.skills__arrow{
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: #e8e8ed; color: #1d1d1f;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .18s, color .18s, opacity .18s;
}
.skills__arrow:hover:not(:disabled){ background: #dcdce1; }
.skills__arrow:disabled{ opacity: .42; cursor: default; }
.skills__arrow:focus-visible{ outline: 2px solid #0071E3; outline-offset: 3px; }
@media (max-width: 640px){
  .skills__arrow{ width: 44px; height: 44px; }
  .skills__foot{ flex-direction: column; align-items: stretch; }
  .skills__arrows{ display: none; }                  /* phones swipe the row; the arrows only took room */
  .skills__tech{ gap: 10px; }
  .skills__tech li{ width: 36px; height: 36px; }
}

/* ---------- orbit: work tiles floating around a changing message ---------- */
/* Each tile sits at (--x, --y) of the stage, centred on that point; --s is its width in px at desktop size.
   .orbit__tile carries the mouse-follow transform, .orbit__float the idle drift, so the two never fight. */
/* only sideways overflow is clipped (no horizontal scroll); tiles and their shadows may spill up and down freely,
   so nothing gets cut off in a hard line */
.orbit{ padding: clamp(80px, 10vw, 180px) 0 var(--section-end); overflow-x: clip; }
.orbit__stage{
  position: relative;
  height: clamp(640px, 100svh, 920px);
  display: grid; place-items: center;
}
.orbit__tiles{ position: absolute; inset: 0; pointer-events: none; }
.orbit__tile{
  --tw: calc(var(--s) * min(1px, .078vw));
  position: absolute; left: var(--x); top: var(--y);
  width: var(--tw); margin: calc(var(--tw) * -.375) 0 0 calc(var(--tw) * -.5);
  will-change: transform;
}
.orbit__float{
  aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  transform: rotate(var(--r));
  background: #04050a;
  box-shadow: 0 24px 50px -18px rgba(10,10,20,.35), 0 2px 6px rgba(10,10,20,.08);
}
.orbit__float svg{ display: block; width: 100%; height: 100%; }
/* a light tile on the white page: a hairline keeps its edge from dissolving into the background */
.orbit__float--light{ background: #f9f8f6; box-shadow: 0 0 0 1px rgba(10,10,20,.07), 0 24px 50px -18px rgba(10,10,20,.35), 0 2px 6px rgba(10,10,20,.08); }

.orbit__center{ position: relative; z-index: 2; text-align: center; padding: 0 var(--pad); }
.orbit__center .eyebrow{ justify-content: center; }
.orbit__msg{ min-height: 2.04em; }                  /* two lines reserved, so switching messages never shifts the button */
.orbit__msg-text{ display: inline-block; transform-origin: 50% 50%; }
.orbit__cta{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 36px;
  background: #0071E3; color: #fff; border-radius: 100px; padding: 14px 26px;
  font-size: 16px; font-weight: 500;
  transition: background-color .18s;
}
.orbit__cta:hover{ background: #0a7ef0; }
.orbit__cta:focus-visible{ outline: 2px solid #0071E3; outline-offset: 3px; }


/* ---------- about: a white page that turns out to be the Webflow Designer's canvas ---------- */
/* Pinned scene (sticky, like the Process stepper). main.js measures where the canvas of the screenshot lands
   (.about__frame) and moves the live page (.about__page) from full-screen into exactly that rectangle while the
   frame scales down with it, so the Designer seems to form around the page. Black around it opens the dark part. */
.about__scroll{ position: relative; height: 300vh; }
.about__pin{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #000;
}
.about__frame{
  position: absolute; left: var(--fl, 5vw); top: var(--ft, 10vh); width: var(--fw, 90vw);
  transform-origin: 0 0; will-change: transform;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
}
.about__frame img{ display: block; width: 100%; height: auto; }
/* Designer selection: lives on the page layer and scales down with it (~.6-.7), so line and tag are drawn larger
   here to land at Webflow's own sizes (about 1.5px and 11px) once the page sits in the canvas */
.about__select{
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2.2px #037ff1;
}
.about__select-tag{
  position: absolute; left: 0; top: 0;
  background: #037ff1; color: #fff; font: 500 16px/1 var(--font-sans); padding: 6px 10px;
}
.about__page{
  position: absolute; left: 0; top: 0; width: 100%; height: var(--ph, 100vh);
  background: #000; color: var(--text);
  transform-origin: 0 0; will-change: transform, clip-path;
  z-index: 1;
}
/* Layout after the reference: a compact one-line title, a stack of pill questions on the left, one big photo on
   the right. Every size is tied to the viewport height so the whole thing (with an answer open) fits one screen
   before the pull-back starts. */
.about__inner{
  height: 100vh; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(76px, 13vh, 132px) var(--pad) clamp(24px, 6vh, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4vw, 72px); align-content: start;
}
.about__title{
  grid-column: 1 / -1; margin-bottom: clamp(16px, 4vh, 40px);
  font-size: min(clamp(32px, 4vw, 60px), 7.2vh); line-height: 1.05;
}
.about__text{ display: contents; }                 /* title spans the grid; the list takes the left column */

.about__list{ grid-column: 1; grid-row: 2; list-style: none; display: flex; flex-direction: column; gap: clamp(6px, 2vh, 18px); align-self: start; }
.about__item{
  border-radius: 999px;
  background: linear-gradient(90deg, #1c1c1f 0%, #1c1c1f 55%, rgba(28,28,31,.35) 100%);
  transition: border-radius .35s var(--ease), background-color .35s var(--ease);
}
.about__item.is-open{ border-radius: 24px; background: #1c1c1f; }
.about__q{
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: clamp(7px, 1.6vh, 14px) 20px clamp(7px, 1.6vh, 14px) clamp(9px, 1.5vh, 14px);
  color: var(--text); font-size: clamp(15px, 2.1vh, 18px); font-weight: 500; letter-spacing: -.01em;
}
.about__q-icon{
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid currentColor; color: #4da3ff;
  display: flex; align-items: center; justify-content: center;
}
.about__q-icon svg{ width: 15px; height: 15px; transition: transform .3s var(--ease); }
.about__item.is-open .about__q-icon svg{ transform: rotate(45deg); }   /* plus turns into a close mark */
.about__q:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 2px; border-radius: 999px; }
.about__a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.about__item.is-open .about__a{ grid-template-rows: 1fr; }
.about__a > div{ overflow: hidden; }
.about__a p{
  padding: 0 22px clamp(10px, 1.8vh, 16px) calc(clamp(9px, 1.4vh, 13px) + 38px);
  color: var(--text-muted); font-size: clamp(14px, 1.9vh, 16px); line-height: 1.5;
}

.about__side{ grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; align-self: start; }
.about__photo{
  /* always exactly 4:3, as wide as the free height allows and never wider than the column. main.js measures the
     room (--photo-w); the pills below take the same width, so photo and pills always line up. A flatter frame
     would make object-fit crop the photo into a close-up. */
  width: var(--photo-w, min(100%, 52vh * 4 / 3)); aspect-ratio: 4 / 3;
  border-radius: clamp(18px, 2vw, 26px); overflow: hidden; background: #141417;
}
.about__photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.about__photo-ph{
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #6b6974; font-size: 14px;
}
.about__social{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(10px, 1.8vh, 16px); max-width: var(--photo-w, none); }
.pill-link{
  display: inline-flex; align-items: center; gap: 8px;
  background: #1c1c1f; color: var(--text); border-radius: 100px; padding: clamp(7px, 1.2vh, 10px) 16px;
  font-size: 14px; font-weight: 500; transition: background-color .18s;
}
.pill-link:hover{ background: #2a2a2f; }
.pill-link:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 3px; }
/* email pill: copies the address. The pill itself never moves; the round icon on its right turns blue, the copy
   mark gives way to a check that draws itself, and a small "Copied" tag rises above the pill for a moment. */
.mail-pill{ position: relative; padding-right: 6px; cursor: pointer; font-family: inherit; }
.mail-pill__icon{
  position: relative; width: 28px; height: 28px; margin-left: 4px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}
.mail-pill__icon svg{ grid-area: 1 / 1; width: 16px; height: 16px; }
.mail-pill__copy{ transition: opacity .2s ease, transform .25s var(--ease); }
.mail-pill__check{ stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s var(--ease) .12s; }
.mail-pill__toast{
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  background: #f4f2ec; color: #0a0a0d; border-radius: 100px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: opacity .25s ease, transform .35s var(--ease);
}
.mail-pill.is-copied .mail-pill__icon{ background: #0071E3; color: #fff; }
.mail-pill.is-copied .mail-pill__copy{ opacity: 0; transform: scale(.6); }
.mail-pill.is-copied .mail-pill__check{ stroke-dashoffset: 0; }
.mail-pill.is-copied .mail-pill__toast{ opacity: 1; transform: translate(-50%, 0); }

.about__caption{
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px); z-index: 2;
  text-align: center; color: #9a98a3; font-size: 15px; letter-spacing: .01em; opacity: 0;
}

/* phones and reduced motion: no scene, just the page */
.about.is-static .about__scroll{ height: auto; }
.about.is-static .about__pin{ position: relative; height: auto; overflow: visible; }
.about.is-static .about__frame, .about.is-static .about__caption{ display: none; }
.about.is-static .about__page{ position: relative; height: auto; transform: none !important; clip-path: none !important; }
.about.is-static .about__inner{
  height: auto; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 28px;
  padding-top: clamp(112px, 14vw, 200px); padding-bottom: clamp(64px, 10vw, 120px);
}
.about.is-static .about__title{ font-size: clamp(34px, 8.5vw, 60px); margin-bottom: 0; }
.about.is-static .about__q{ font-size: 16px; }
.about.is-static .about__list, .about.is-static .about__side{ grid-column: 1; grid-row: auto; }
.about.is-static .about__photo{ width: min(100%, 520px); }
.about.is-static .about__social{ max-width: none; }

/* ---------- process (horizontal connected stepper) ---------- */
.process{ padding-bottom: var(--section-end); }
.process__scroll{ height: 320vh; }
.process .section-head{ padding-bottom: 0; }   /* the pinned stepper below brings its own top space */
/* same heading kit as Testimonials, different composition: title left, intro right on the title's baseline,
   opened by a short piece of the stepper's own blue line */
.process__intro{ max-width: 360px; padding-bottom: .6em; }
.process__intro::before{
  content: ''; display: block; width: 44px; height: 2px; margin-bottom: 22px;
  background: #3939e1; border-radius: 2px;
}
.process__pin{
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  /* asymmetric padding keeps the pinned content clear of the fixed navbar */
  padding-top: clamp(90px, 14vh, 150px); padding-bottom: 44px;
}

.process__nodes{
  position: relative; width: 100%;
  display: flex; justify-content: space-between; align-items: flex-start;
  max-width: 860px; margin: 0 auto 72px; padding: 0 var(--pad);
}
.process__connector{
  position: absolute; top: 23px; left: 0; right: 0;
  height: 2px; background: var(--border-strong); z-index: 0;
}
.process__connector-fill{
  /* perf: full width + scaleX transform instead of animating width, so the
     scroll-scrubbed fill never triggers layout */
  position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
  background: #3939e1;
}

.process__node{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; flex: 1;
}
.process__node-icon{
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-strong); background: var(--bg-soft); color: var(--text-dim);
  /* short and without a size change: the circle turns blue the moment the line reaches its edge */
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.process__node-icon::before{
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  background: #3939e1; filter: blur(14px);
  opacity: 0; z-index: -1;
  transition: opacity .3s ease;
}
.process__node-num{ font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); transition: color .4s ease; }

.process__node.is-active .process__node-icon{
  border-color: transparent; background: #3939e1; color: #fff;
}
.process__node.is-active .process__node-icon::before{ opacity: .55; }
.process__node.is-active .process__node-num{ color: var(--text); }

.process__node.is-done .process__node-icon{
  border-color: transparent; background: var(--text-dim); color: var(--bg);
}
.process__node.is-done .process__node-num{ color: var(--text-dim); }

/* stage: sketch mockup left, step copy right */
.process__stage{
  width: 100%; max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
  padding: 0 var(--pad);
}

/* mobile-only vertical progress rail (fills with scroll, like the connector) */
.process__rail{ display: none; }

.process__sketches{ position: relative; }
.process__sketch{
  display: none;
  background: #101014; border-radius: var(--radius);
  padding: 18px 20px 20px;
  box-shadow: 0 24px 60px rgba(10,10,13,.18);
}
.process__sketch.is-active{ display: block; }

.process__sketch-bar{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.process__sketch-dots i{
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px;
}
.process__sketch-dots i:nth-child(1){ background: #ff5f57; }
.process__sketch-dots i:nth-child(2){ background: #febc2e; }
.process__sketch-dots i:nth-child(3){ background: #28c840; }
.process__sketch-label{
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 11.5px; letter-spacing: .02em;
  color: rgba(255,255,255,.55);
}

.process__sketch-canvas{
  border: 1.5px dashed rgba(255,255,255,.22); border-radius: 14px;
  min-height: 158px; padding: 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.sk-lines{ display: flex; flex-direction: column; gap: 13px; }
.sk-bar{ display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); }
.sk-wire-head{ height: 12px; border-radius: 6px; background: rgba(255,255,255,.15); margin-bottom: 12px; }
.sk-wire-row{ display: flex; gap: 10px; }
.sk-wire-box{ display: block; height: 58px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
.sk-slider{ position: relative; height: 2px; border-radius: 2px; background: rgba(255,255,255,.2); margin: 17px 0; }
.sk-slider i{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; background: #d7d5de;
}
.sk-chart{ display: flex; align-items: flex-end; gap: 10px; height: 74px; }
.sk-chart i{ display: block; flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,.15); }
.sk-chart i:last-child{ background: #3939e1; }

.process__sketch-tags{ display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.process__sketch-tags span{
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px; padding: 5px 12px;
  font-family: var(--font-sans); font-size: 11px; color: rgba(255,255,255,.6);
}

.process__detail{ min-height: 170px; }
.process__detail-title{
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(34px,4.6vw,56px);
  margin-bottom: 16px; letter-spacing: -0.01em;
}
.process__detail-text{ color: var(--text-muted); font-size: clamp(17px,1.8vw,20px); line-height: 1.65; max-width: 40ch; }

@media (max-width: 760px){
  /* pinned scroll story on mobile too, but restaged: the horizontal node row
     goes away and a thin vertical rail on the left fills as you scroll, with
     the step text top-right and the sketch card below it */
  /* the pinned stage sits centred in a full screen, which left ~200px of empty screen between the intro and the
     first step. The pin's empty top is (100svh + 64px - stage height ~366px) / 2, so pulling the scroll area up by
     that minus ~96px keeps the heading and the stepper reading as one section (the pin is transparent) */
  .process__scroll{ height: 260vh; margin-top: min(0px, calc(247px - 50svh)); }
  .process__pin{
    height: 100vh; height: 100svh;
    padding-top: 92px; padding-bottom: 28px;
  }
  .process__nodes{ display: none; }
  .process__stage{
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 24px 16px;
    align-items: stretch;
  }
  .process__rail{
    display: block; grid-column: 1; grid-row: 1 / 3;
    width: 4px; justify-self: center;
    border-radius: 4px; background: rgba(10,10,13,.12);
    position: relative;
  }
  .process__rail-fill{
    position: absolute; inset: 0; border-radius: 4px;
    background: #3939e1;
    transform: scaleY(0); transform-origin: top center; will-change: transform;
  }
  /* round step checkpoints along the rail; tapping one jumps to its step (main.js) */
  .process__rail-dot{
    position: absolute; left: 50%; z-index: 1;
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    background: #fff; border: 2px solid rgba(10,10,13,.22);
    transform: translate(-50%, -50%);
    transition: background .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .process__rail-dot::after{ content: ''; position: absolute; inset: -15px; border-radius: 50%; }  /* 44px tap area */
  .process__rail-dot:focus-visible{ outline: 2px solid #0071E3; outline-offset: 3px; }
  .process__rail-dot:nth-child(2){ top: 2%; }
  .process__rail-dot:nth-child(3){ top: 26%; }
  .process__rail-dot:nth-child(4){ top: 50%; }
  .process__rail-dot:nth-child(5){ top: 74%; }
  .process__rail-dot:nth-child(6){ top: 98%; }
  .process__rail-dot.is-passed{ background: #3939e1; border-color: #3939e1; }

  /* tighter type + sketch so the pinned stage never spills into the next section */
  .process__detail{ grid-column: 2; grid-row: 1; min-height: 128px; }
  .process__detail-title{ font-size: 27px; margin-bottom: 10px; }
  .process__detail-text{ font-size: 15px; line-height: 1.55; }
  .process__sketches{ grid-column: 2; grid-row: 2; align-self: start; }
  .process__sketch{ padding: 14px 16px 16px; }
  .process__sketch-canvas{ min-height: 112px; padding: 18px; }
  .process__sketch-bar{ margin-bottom: 12px; }
  .process__sketch-tags{ margin-top: 12px; }
  .process__sketch-tags span{ padding: 4px 10px; font-size: 10.5px; }
  .sk-chart{ height: 58px; }
  .sk-wire-box{ height: 44px; }
}

/* ---------- work: a deck of site windows ---------- */
/* Heading after webflow.com's hero (centred title, subtitle, two buttons); below it a deck of browser windows: the
   front one full size, the ones behind peeking over its top, each a bit narrower and darker. The arrow drops the
   front window out of the deck and it comes back in at the back (main.js, block "work deck"). */
.work{ position: relative; isolation: isolate; padding-bottom: var(--section-end); }
.work::before{                                        /* depth: one soft spotlight behind the deck */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%);
  /* fades to pure black well before the section ends, so nothing shows where the next section begins */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 88%);
}
.work__actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.work__btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; border-radius: 100px; padding: 15px 28px; font-size: 16px; font-weight: 500;
  transition: background-color .18s;
}
.work__btn--primary{ background: #0071E3; color: #fff; }
.work__btn--primary:hover{ background: #0a7ef0; }
.work__btn--ghost{ background: #1c1c1f; color: var(--text); }
.work__btn--ghost:hover{ background: #2a2a2f; }
.work__btn:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 3px; }

.work__deck{
  --card-w: min(1080px, calc(100vw - 2 * var(--pad) - 2 * 84px));
  --peek: clamp(28px, 3.4vw, 46px);
  max-width: var(--maxw); margin: clamp(16px, 2.5vw, 40px) auto 0; padding: 0 var(--pad);
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; column-gap: 28px;
  position: relative;
}
.work__deck::before{ content: ''; }                  /* empty first cell mirrors the control, keeping the cards centred */
.work__cards{
  grid-column: 2; position: relative; height: var(--deck-h, 640px);
  perspective: 1600px;                              /* the dropping window tips toward the viewer */
  /* the dropping card fades out through the bottom edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
}
.deck-card{
  --dim: 0;
  position: absolute; left: 50%; top: var(--deck-top, 92px);
  width: var(--card-w); margin-left: calc(var(--card-w) / -2);
  border-radius: 18px; overflow: hidden;
  background: #0f0f12;
  box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.9);
  transform-origin: 50% 0; will-change: transform;
  cursor: pointer; outline: none;
}
.deck-card::after{                                    /* cards further back sit in shadow */
  content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim); pointer-events: none;
}
.deck-card:focus-visible{ box-shadow: 0 0 0 2px #4da3ff, 0 40px 90px -30px rgba(0,0,0,.9); }
.deck-card__bar{
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 18px;
  background: #1a1a1d; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px; color: var(--text);
}
.deck-card__dots{ display: flex; gap: 6px; }
.deck-card__dots i{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.deck-card__name{ font-weight: 500; }
.deck-card__tag{ margin-left: auto; color: var(--text-muted); font-size: 12.5px; }
.deck-card__screen{ aspect-ratio: 1876 / 900; background: #0a0a0c; }
.deck-card__screen picture{ display: block; width: 100%; height: 100%; }
.deck-card__screen img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* placeholders until real screenshots arrive: a dark page with a hero wireframe */
.deck-card__ph{ display: block; width: 100%; height: 100%; padding: 12% 10% 0; }
.deck-card__ph i{ display: block; height: 5%; margin-bottom: 3%; border-radius: 6px; background: rgba(255,255,255,.85); }
.deck-card__ph i:nth-child(1){ width: 58%; height: 9%; }
.deck-card__ph i:nth-child(2){ width: 42%; height: 9%; opacity: .9; }
.deck-card__ph i:nth-child(3){ width: 36%; opacity: .35; }
.deck-card__ph b{ display: block; width: 16%; height: 8%; margin-top: 4%; border-radius: 99px; background: #fff; opacity: .9; }
.deck-card__ph--violet{ background: radial-gradient(90% 90% at 85% 10%, #6d4aff, #0f0a1f 60%); }
.deck-card__ph--green{ background: radial-gradient(90% 90% at 80% 15%, #14b88c, #041510 60%); }

.work__control{ grid-column: 3; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.work__next{
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1c1c1f; color: var(--text); border: 1px solid rgba(255,255,255,.1);
  transition: background-color .18s;
}
.work__next:hover{ background: #2a2a2f; }
.work__next:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 3px; }
.work__dots{ display: flex; gap: 7px; }
.work__dots i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background-color .35s ease; }
.work__dots i.is-on{ background: #fff; }

/* phone: windows peek further (their title bars stay readable); cards on the left, the control on the right edge,
   under the thumb of a right hand */
@media (max-width: 700px){
  .work__deck{
    --card-w: calc(100vw - 2 * var(--pad) - 60px);
    --peek: 54px;
    grid-template-columns: 1fr 48px; column-gap: 12px;
  }
  .work__deck::before{ display: none; }
  .work__cards{ grid-column: 1; }
  .work__control{ grid-column: 2; grid-row: 1; }
  .work__next{ width: 48px; height: 48px; }
  .deck-card{ border-radius: 16px; }
  .deck-card__bar{ height: 50px; padding: 0 14px; }
  .deck-card__tag{ display: none; }
}

/* ---------- project modal ---------- */
.project-modal{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.project-modal.is-open{ opacity: 1; pointer-events: auto; }
.project-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(16px);
}
.project-modal__panel{
  position: relative; z-index: 1;
  width: 100%; max-width: 1120px; max-height: calc(100svh - 48px); overflow: auto;
  scrollbar-width: none;                              /* it is sized to fit; only a tiny screen would still scroll */
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  background: linear-gradient(160deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,.75);
  opacity: 0; transform: translateY(24px) scale(.96);
}
.project-modal__close{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,13,.55); border: 1px solid var(--border-strong);
  color: var(--text); backdrop-filter: blur(6px);
  transition: background .3s ease;
}
.project-modal__close:hover{ background: rgba(10,10,13,.85); }

/* media side: the site plays on a laptop, lit by one soft blue light (the skills-card language) */
.project-modal__media{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(36px, 4.4vw, 56px) clamp(18px, 2.2vw, 30px);
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(0,113,227,.18), rgba(0,113,227,0) 72%),
    var(--bg-soft);
}
/* MacBook Pro, CSS only, sized in container units so it scales as one piece: an aluminium lid edge, a thin black
   bezel with the notch, and a silver body a little wider than the lid. On the 16:9 screen: the macOS menu bar (the
   notch shows over it), a Safari-style toolbar with the site's address, then the page at its full width -- the
   recordings are wider than a MacBook screen, so a browser window is the only way to show them without cutting. */
.laptop{ container-type: inline-size; width: 100%; }
.laptop__lid{
  width: 86cqw; margin: 0 auto; padding: .45cqw;
  border-radius: 3.6cqw 3.6cqw 1cqw 1cqw;
  background: linear-gradient(180deg, #c9cacd, #8d8e92 60%, #6f7074);
}
.laptop__screen{
  padding: 1.25cqw 1.25cqw 2.3cqw;
  border-radius: 3.2cqw 3.2cqw .7cqw .7cqw;
  background: #030304;
}
.laptop__display{
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 1.7cqw 1.7cqw 0 0; background: #f6f6f8;
}
.laptop__menubar{
  position: absolute; top: 0; left: 0; right: 0; height: 3.8%;
  display: flex; align-items: center; gap: 1.5cqw; padding: 0 2.2cqw;
  background: #e9e9ed;
}
.laptop__menubar i, .laptop__menubar b{ display: block; height: .45cqw; border-radius: 1px; background: #9a9aa1; }
.laptop__menubar i{ width: 2.2cqw; }
.laptop__menubar i:first-child{ width: 2.8cqw; background: #55555c; }
.laptop__menubar b{ width: 5.5cqw; margin-left: auto; }
.laptop__toolbar{
  position: absolute; top: 3.8%; left: 0; right: 0; height: 9.26%;
  display: flex; align-items: center; padding: 0 1.8cqw;
  background: #f6f6f8; border-bottom: 1px solid #dedee3;
}
.laptop__lights{ display: flex; gap: .65cqw; }
.laptop__lights i{ width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: #ff5f57; }
.laptop__lights i:nth-child(2){ background: #febc2e; }
.laptop__lights i:nth-child(3){ background: #28c840; }
.laptop__url{
  position: absolute; left: 50%; top: 50%; width: 34cqw; margin: -1.25cqw 0 0 -17cqw; height: 2.5cqw;
  display: flex; align-items: center; justify-content: center; border-radius: .8cqw;
  background: #e6e6ea; color: #45454c; font: 500 1.3cqw/1 var(--font-sans); white-space: nowrap; overflow: hidden;
}
.laptop__notch{                                       /* over the light menu bar, so it reads as the real thing */
  position: absolute; top: 0; left: 50%; z-index: 2;
  width: 11cqw; height: 2.2cqw; margin-left: -5.5cqw;
  border-radius: 0 0 1.1cqw 1.1cqw; background: #030304;
}
.laptop__notch::after{                                /* camera */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: .7cqw; height: .7cqw; margin: -.35cqw 0 0 -.35cqw; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c3a55, #0b0d14 70%);
}
/* the page window: the display below the menu bar and toolbar, the same proportions as the cut recordings */
.laptop__site{ position: absolute; left: 0; right: 0; bottom: 0; top: 13.06%; overflow: hidden; background: #000; }
.laptop__still{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.laptop__still:not([src]), .laptop__still[src=""]{ visibility: hidden; }
/* the recordings are cut to the page itself (no browser bar), so they simply fill the window */
.laptop__video{
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .4s ease;
}
.laptop__video.is-playing{ opacity: 1; }
.laptop__base{
  position: relative; width: 100cqw; height: 2.3cqw;
  border-radius: .3cqw .3cqw 3cqw 3cqw / .3cqw .3cqw 2.3cqw 2.3cqw;
  background: linear-gradient(180deg, #eceef0 0%, #cfd0d3 28%, #a4a5a9 70%, #76777b 100%);
  box-shadow: 0 2.4cqw 4cqw -1.6cqw rgba(0,0,0,.85);
}
.laptop__base::before{                                /* the thumb notch */
  content: ''; position: absolute; top: 0; left: 50%;
  width: 15cqw; height: .9cqw; margin-left: -7.5cqw;
  border-radius: 0 0 1.4cqw 1.4cqw; background: linear-gradient(180deg, #9a9b9f, #c3c4c7);
}

.project-modal__panel::-webkit-scrollbar{ display: none; }
.project-modal__content{
  padding: clamp(28px, 5.5vh, 48px) clamp(28px, 3.2vw, 44px); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(10px);
}
.project-modal__tag{
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: 100px; padding: 7px 13px; margin-bottom: clamp(12px, 2.2vh, 20px);
}
.project-modal__title{ font-family: var(--font-sans); font-weight: 600; font-size: clamp(22px,2.6vw,30px); margin-bottom: clamp(14px, 2.6vh, 22px); }
.project-modal__points{ list-style: none; display: flex; flex-direction: column; gap: clamp(10px, 1.9vh, 16px); margin-bottom: auto; padding-bottom: clamp(18px, 3.4vh, 30px); }
.project-modal__points li{ font-size: clamp(13.5px, 1.75vh, 14.5px); line-height: 1.55; color: var(--text-muted); }
.project-modal__points strong{ display: block; color: var(--text); font-weight: 600; margin-bottom: 3px; }
/* the blue "Visit website" button, same as the site's other primary buttons (.work__btn--primary) */
.project-modal__actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.project-modal__tabs{ display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.project-modal__tab{
  height: 40px; padding: 0 13px; border-radius: 100px;
  font: 500 13px/1 var(--font-sans); color: var(--text-muted); background: rgba(255,255,255,.07);
  transition: background-color .18s, color .18s;
}
.project-modal__tab[aria-selected="true"]{ background: #f4f2ec; color: #0a0a0d; }
.project-modal__tab:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 2px; }

@media (max-width: 760px){
  /* phones: everything in one screen -- a smaller frame round the laptop, and the points behind tabs, one at a time */
  .project-modal{ padding: 12px; }
  .project-modal__panel{ grid-template-columns: 1fr; max-height: calc(100svh - 24px); }
  .project-modal__media{ padding: 60px 14px 14px; }   /* clear of the close button */
  .project-modal__content{ padding: 20px 22px 24px; }
  .project-modal__tag{ margin-bottom: 12px; padding: 6px 12px; }
  .project-modal__title{ font-size: 24px; margin-bottom: 14px; }
  .project-modal__tabs{ display: flex; }
  .project-modal__points{ display: grid; padding-bottom: 20px; }
  .project-modal__points li{ grid-area: 1 / 1; visibility: hidden; font-size: 15px; }
  .project-modal__points li.is-active{ visibility: visible; }
  .project-modal__points strong{ display: none; }     /* the tab already names it */
  .project-modal__actions .work__btn{ padding: 13px 18px; font-size: 15px; }
}
/* short phones (an SE with Safari's bars): a smaller laptop and tighter spacing, so it still fits one screen */
@media (max-width: 760px) and (max-height: 640px){
  .project-modal__media{ padding: 54px 14px 10px; }
  .project-modal__media .laptop{ width: 76%; margin: 0 auto; }
  .project-modal__content{ padding: 14px 20px 18px; }
  .project-modal__tag{ margin-bottom: 8px; }
  .project-modal__title{ font-size: 22px; margin-bottom: 10px; }
  .project-modal__tabs{ margin-bottom: 10px; }
  .project-modal__points{ padding-bottom: 14px; }
  .project-modal__points li{ font-size: 14.5px; line-height: 1.5; }
}

/* ---------- ai workflow (apple-style stat slider: text / line / big gradient word) ---------- */
.aiwork__wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) var(--section-end); }
.aiwork__viewport{ overflow: hidden; }
.aiwork__track{ display: flex; will-change: transform; }
.aiwork__page{
  flex: 0 0 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.aiwork__stat{ display: flex; flex-direction: column; }
.aiwork__stat-text{
  color: var(--text-muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6;
  max-width: 44ch; margin-bottom: 22px;
}
.aiwork__stat-line{
  height: 1px; width: 100%;
  background: linear-gradient(90deg, rgba(76,140,255,.55), rgba(139,92,246,.35), rgba(255,255,255,.06));
  margin-bottom: 18px;
}
.aiwork__stat-word{
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(44px, 6vw, 76px); line-height: 1.05;
  background: linear-gradient(100deg, #f4f2ec 0%, #8fb3ff 58%, #a88df8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}

.aiwork__arrows{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 40px; }
.aiwork__arrow{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: none; color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .3s ease, opacity .3s ease, background .3s ease;
}
.aiwork__arrow:hover:not(:disabled){ border-color: var(--text); background: rgba(255,255,255,.05); }
.aiwork__arrow:disabled{ opacity: .3; cursor: default; }

@media (max-width: 760px){
  .aiwork__page{ grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- testimonials (sliding video + card) ---------- */
.testimonials__body{
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad) var(--section-end);
}
.testimonials__viewport{ overflow: hidden; }
.testimonials__track{ display: flex; gap: 24px; will-change: transform; }

.testimonial-slide{
  flex: 0 0 100%;
  /* left-aligned (not centered) so the video/card block's left edge always
     matches the section title's left edge, instead of drifting further
     right as the viewport grows past the inner's 1080px cap */
  display: flex; align-items: center; justify-content: flex-start;
}
.testimonial-slide__inner{
  width: 100%; max-width: 1080px;
  display: grid; grid-template-columns: 34% 1fr; gap: 24px;
}

.testimonial-slide__video{
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); aspect-ratio: 3/4;
}
.testimonial-slide__video-el{ width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.testimonial-slide__video-hint{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-dim);
  background: linear-gradient(160deg, var(--surface), var(--bg-soft));
}
.testimonial-slide__video-hint b{ color: var(--text-muted); font-weight: 600; }
.testimonial-slide__play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(10,10,13,.55); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; color: var(--text);
  cursor: pointer; transition: transform .3s var(--ease), background .3s ease;
}
.testimonial-slide__play:hover{ transform: translate(-50%, -50%) scale(1.08); background: rgba(10,10,13,.75); }

.testimonial-slide__card{
  background: linear-gradient(160deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 32px;
  display: flex; flex-direction: column;
}
.testimonial-slide__badge{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #0a0a0d;
  border: none; background: #fff;
  border-radius: 100px; padding: 9px 15px; margin-bottom: 24px;
}
.testimonial-slide__stars{
  color: #e2b857; font-size: 12px; letter-spacing: 2px; line-height: 1;
}
.testimonial-slide__quote{
  font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(18px, 2vw, 23px); line-height: 1.45; color: var(--text);
  margin-bottom: 26px;
}
.testimonial-slide__points{ list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: auto; padding-bottom: 26px; }
.testimonial-slide__points li{ display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 16px; }
/* line icon in the action blue on a pale blue tile */
.testimonial-slide__point-icon{
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgba(0,113,227,.16); color: #4da3ff;
  display: flex; align-items: center; justify-content: center;
}
.testimonial-slide__point-icon svg{ display: block; width: 21px; height: 21px; }
.testimonial-slide__foot{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.testimonial-slide__person{ display: flex; align-items: center; gap: 12px; }
.testimonial-slide__avatar{ width: 38px; height: 38px; border-radius: 50%; background: var(--gradient); flex-shrink: 0; overflow: hidden; }
.testimonial-slide__avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial-slide__person-info{ display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.testimonial-slide__person-info strong{ font-weight: 600; color: var(--text); }
.testimonial-slide__person-info em{ font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.testimonial-slide__link{
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
  background: #0071E3; border-radius: 10px; padding: 10px 18px;
  transition: background .18s ease;
}
.testimonial-slide__link:hover{ background: #0a7ef0; color: #fff; }

/* hidden until there's more than one testimonial to navigate between */
.testimonials__nav{ display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.testimonials__dot{
  width: 8px; height: 8px; border-radius: 100px; background: var(--border-strong); border: none; padding: 0; cursor: pointer;
  transition: width .4s var(--ease), background .4s ease;
}
.testimonials__dot:hover:not(.is-active){ background: var(--text-dim); }
.testimonials__dot.is-active{ width: 28px; background: var(--gradient); }
.testimonials__arrow{
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: none; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color .3s ease, opacity .3s ease;
}
.testimonials__arrow:first-child{ margin-right: 4px; }
.testimonials__arrow:last-child{ margin-left: 4px; }
.testimonials__arrow:hover:not(:disabled){ color: var(--text); }
.testimonials__arrow:disabled{ opacity: .35; cursor: default; }

@media (max-width: 760px){
  .testimonial-slide__inner{ grid-template-columns: 1fr; }
  .testimonial-slide__video{ aspect-ratio: 3/4; }
}

/* ---------- cta / contact (rising curved panel) ---------- */
.cta{
  min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 140px var(--pad); overflow: hidden;
  position: relative; z-index: 2;
  background: #000;
}
.cta__bg{
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 50% at 50% 100%, rgba(0,113,227,.16), transparent 70%);
}
.cta > *{ position: relative; z-index: 1; }
.cta .eyebrow{ justify-content: center; }
/* the heading kit at display size: three even lines, the middle one is the site's signature phrase */
.cta__title{
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(44px, 7.4vw, 104px); line-height: 1.04; letter-spacing: -0.035em;
}
.cta__line{ display: block; }
/* Signature phrase: every letter is its own span (so it can rise in on its own), yet the gradient runs unbroken
   across the whole phrase -- main.js gives each letter the phrase width (--em-w) and its own offset (--x). */
.cta__em{
  --cta-grad: linear-gradient(90deg, #1f6bff 0%, #3d8bff 30%, #7fb8ff 62%, #d9ecff 100%);
  display: block; padding: .02em 0 .1em;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.01em; line-height: 1;
}
.cta__word{ display: inline-block; white-space: nowrap; }
.cta__ch{
  display: inline-block;
  padding: 0 .07em; margin: 0 -.07em;               /* room for italic overhangs so no letter gets clipped */
  background: var(--cta-grad);
  background-size: var(--em-w, 100%) 100%;
  background-position: calc(var(--x, 0px) * -1) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cta__email, .cta__hint{ opacity: 0; }
.cta__email.is-shown, .cta__hint.is-shown{ opacity: 1; }
.cta__sub{ max-width: 480px; margin: 36px auto 0; color: var(--text-muted); font-size: 16px; line-height: 1.6; }

.cta__book{
  margin-top: 44px; display: inline-flex; align-items: center; gap: 8px;
  background: #0071E3; color: #fff; border-radius: 100px; padding: 17px 30px;
  font-size: 17px; font-weight: 500; transition: background-color .18s;
}
.cta__book:hover{ background: #0a7ef0; }
.cta__email{
  margin-top: 18px; display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: clamp(16px,2.4vw,22px);
  padding: 20px 30px; border: 1px solid var(--border-strong); border-radius: 100px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cta__email:hover{ background: var(--text); color: var(--bg); }
.cta__hint{
  display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}

/* ---------- book a call (book.html) ---------- */
/* Left: the heading kit, a real testimonial and the email pill. Right: one white card in two steps (our short form,
   then the Calendly calendar prefilled with it). White so Calendly's own white calendar sits in it naturally. */
.book-page{ background: #000; min-height: 100vh; position: relative; isolation: isolate; }
.book-page::before{
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 0%, rgba(0,113,227,.24), rgba(0,113,227,0) 70%),
    radial-gradient(45% 40% at 100% 100%, rgba(0,113,227,.12), rgba(0,113,227,0) 70%);
}
.book-top{
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.book-top__logo img{ display: block; width: clamp(64px, 6.8vw, 80px); height: auto; filter: invert(1); }
.book{
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(32px, 7vh, 80px) var(--pad) clamp(64px, 10vh, 120px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "intro card" "proof card";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 100px); align-items: start;
}
.book__intro{ grid-area: intro; }
.book__proof{ grid-area: proof; }
.book-card{ grid-area: card; }
.book__badge{
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px;
  background: #1c1c1f; color: var(--text); border-radius: 100px; padding: 10px 16px;
  font-size: 14px; font-weight: 500;
}
.book__badge svg{ color: #4da3ff; }
.book__title{ font-size: clamp(38px, 4.4vw, 68px); }     /* two lines beside the card, like the heading kit */
.book__lead{ max-width: 520px; }
.book__quote{
  margin-top: clamp(36px, 6vh, 60px); max-width: 560px;
  background: rgba(20,20,24,.72); border: 1px solid rgba(255,255,255,.07); border-radius: 24px;
  padding: 26px 28px 24px;
}
.book__quote-mark{ display: block; height: 30px; font-family: var(--font-serif); font-size: 64px; line-height: 1; color: #4da3ff; }
.book__quote blockquote{ font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; letter-spacing: -.01em; }
.book__quote figcaption{ display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.book__quote figcaption img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.book__quote figcaption strong{ display: block; font-weight: 600; font-size: 15px; }
.book__quote figcaption span span{ display: block; color: var(--text-muted); font-size: 13.5px; }
.book__email{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; color: var(--text-muted); font-size: 15px; }

.book-card{
  background: #fff; color: #131217; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.8);
  scroll-margin-top: 20px;
}
.book-card__steps{
  list-style: none; display: flex; justify-content: center; gap: 22px;
  padding: 18px 20px; border-bottom: 1px solid rgba(10,10,13,.08);
  font-size: 15px; color: #8a8892;
}
.book-card__steps li{ display: flex; align-items: center; gap: 9px; }
.book-card__steps li::before{ content: ''; width: 9px; height: 9px; border-radius: 50%; background: #d4d3d9; transition: background-color .25s ease; }
.book-card__steps li.is-current{ color: #131217; }
.book-card__steps li.is-current::before{ background: #0071E3; }
.book-card__steps li.is-done::before{ background: #131217; }
.book-card__step{ padding: 30px 32px 32px; }
.book-card__title{ font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.book-card__text{ margin-top: 8px; color: #55535c; font-size: 15.5px; line-height: 1.5; }

.book-form{ margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.book-form__field{ display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 500; color: #131217; }
.book-form__field i{ font-style: normal; color: #0071E3; }
.book-form__field small{ font-weight: 400; color: #8a8892; font-size: 13px; }
.book-form__field input, .book-form__field textarea{
  font: inherit; font-weight: 400; font-size: 16px; color: #131217;
  border: 1px solid #dcdce2; border-radius: 12px; padding: 14px 16px; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.book-form__field textarea{ resize: vertical; min-height: 88px; }
.book-form__field input::placeholder, .book-form__field textarea::placeholder{ color: #a5a3ac; }
.book-form__field input:focus, .book-form__field textarea:focus{ outline: none; border-color: #0071E3; box-shadow: 0 0 0 3px rgba(0,113,227,.15); }
.book-form__error{ display: none; font-style: normal; font-weight: 400; font-size: 13px; color: #d4343c; }
.book-form__field.is-invalid input{ border-color: #d4343c; }
.book-form__field.is-invalid .book-form__error{ display: block; }
.book-form__note{ font-size: 13px; color: #8a8892; line-height: 1.5; }
.book-form__trap{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book-form__submit{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: #0071E3; color: #fff; border-radius: 14px; padding: 17px 20px;
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background-color .18s;
}
.book-form__submit:hover{ background: #0a7ef0; }
.book-form__submit:focus-visible{ outline: 2px solid #0071E3; outline-offset: 3px; }

.book-card__who{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #55535c; margin-bottom: 8px; }
.book-card__back{ font: inherit; font-size: 14px; font-weight: 500; color: #0071E3; cursor: pointer; }
.book-card__calendar{ min-height: 680px; margin: 0 -32px -32px; }
.book-card__calendar .calendly-inline-widget, .book-card__calendar iframe{ width: 100%; height: 680px; border: 0; }
.book-card__missing, .book-card__loading{ margin: 24px 32px; padding: 20px; border-radius: 14px; background: #f5f5f7; color: #55535c; font-size: 15px; line-height: 1.55; }
.book-card__missing a{ color: #0071E3; }
.book-card__done{ text-align: center; padding: 56px 32px; }
.book-card__done-icon{ display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #0071E3; color: #fff; margin-bottom: 18px; }
.book-card__done .book-form__submit{ margin-top: 26px; }

@media (max-width: 900px){
  /* phones: the form comes right after the intro; the testimonial and email follow it */
  .book{ grid-template-columns: 1fr; grid-template-areas: "intro" "card" "proof"; grid-template-rows: none; row-gap: 32px; }
  .book__quote{ margin-top: 0; }
  .book__title{ font-size: clamp(38px, 8vw, 60px); }
}
@media (max-width: 560px){
  .book-card__step{ padding: 24px 20px 24px; }
  .book-card__calendar{ margin: 0 -20px -24px; }
}

/* ---------- footer ---------- */
.footer{ max-width: var(--maxw); margin: 0 auto; padding: 60px var(--pad) 40px; }
.footer__top{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 20px; }
.footer__links{ display: flex; gap: 28px; }
.footer__links a{ font-size: 14px; color: var(--text-muted); transition: color .3s ease; }
.footer__links a:hover{ color: var(--text); }
.footer__bottom{
  display: flex; justify-content: space-between; padding-top: 24px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); flex-wrap: wrap; gap: 10px;
}
.footer__bottom a{ color: var(--text-dim); transition: color .3s ease; }
.footer__bottom a:hover{ color: var(--text); }

/* ---------- reveal base states (JS toggles .is-visible) ---------- */
[data-reveal]{
  opacity: 0; transform: translateY(26px);
}
/* [data-reveal] animates via CSS transition on .is-visible; a soft focus-pull
   (blur -> sharp) echoes the preloader/CTA signature move */
[data-reveal]{
  filter: blur(6px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
}
.is-visible[data-reveal]{
  opacity: 1; transform: translateY(0); filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   MOBILE & TOUCH POLISH — cheaper effects and comfortable targets on phones
   ========================================================================== */
@media (max-width: 760px){
  /* solid nav instead of backdrop blur — blur samples the page every frame */
  .nav.is-scrolled{ background: rgba(10,10,13,.94); backdrop-filter: none; }
  /* skip blur in reveals on small screens; fade+rise still plays */
  [data-reveal]{ filter: none; }
  .is-visible[data-reveal]{ filter: none; }

  .testimonial-slide__card{ padding: 24px 20px; }
  .testimonials__nav{ margin-top: 28px; }
  .aiwork__arrows{ margin-top: 28px; }
}

@media (max-width: 640px){
  .cta{ min-height: 70vh; padding: 100px var(--pad) 90px; }
  .cta__email{ padding: 16px 22px; }
}

@media (max-width: 480px){
  .testimonial-slide__foot{ flex-direction: column; align-items: stretch; }
  .testimonial-slide__link{ text-align: center; }
}

@media (pointer: coarse){
  .testimonials__dot{ width: 10px; height: 10px; }
  .testimonials__dot.is-active{ width: 30px; }
  .testimonials__arrow{ width: 34px; height: 34px; }
}

/* ---------- phones: the full pass (2026-09-27) ----------
   Measured on a real 390x844 emulation (DPR 2, touch). Nothing overflows sideways; these fix what felt off:
   section gaps sized for a desktop, Orbit tiles sitting on top of the headline, desktop screenshots cut into tall
   cards, and a few tap targets / labels below comfortable sizes. */
@media (max-width: 760px){
  /* section rhythm: still generous, but ~40% tighter than desktop so a phone never scrolls through empty screens */
  :root{ --section-end: 76px; --section-start: 112px; }

  /* tap targets: 40px+ for everything a thumb is meant to hit */
  .nav__logo{ padding: 6px 0; }
  .nav__cta{ padding: 12px 17px; font-size: 13px; }
  .nav__toggle{ width: 42px; height: 42px; }
  .footer__links{ gap: 8px 22px; flex-wrap: wrap; }
  .footer__links a{ display: inline-block; padding: 10px 0; }
  .footer__bottom a{ display: inline-block; padding: 12px 0; }
  .project-modal__close{ top: 10px; right: 10px; width: 44px; height: 44px; }
  .testimonial-slide__link{ padding-top: 13px; padding-bottom: 13px; }

  /* small labels up to a readable 12px */
  .testimonial-slide__badge{ font-size: 12px; }
  .testimonial-slide__person-info em{ font-size: 12px; }
  .process__sketch-label{ font-size: 12px; }
  .process__sketch-tags span{ font-size: 11.5px; }
  .cta__hint{ font-size: 12px; }

  /* Orbit: four tiles in two calm bands above and below the message, never on top of it */
  .orbit{ padding-top: 40px; }
  .orbit__stage{ height: clamp(600px, 92svh, 740px); }
  .orbit__tile{ --tw: calc(var(--s) * .66px); }
  .orbit__tile:nth-child(3), .orbit__tile:nth-child(5), .orbit__tile:nth-child(6), .orbit__tile:nth-child(7){ display: none; }
  .orbit__tile:nth-child(1){ left: 25% !important; top: 12% !important; }
  .orbit__tile:nth-child(2){ left: 74% !important; top: 15% !important; }
  .orbit__tile:nth-child(4){ left: 27% !important; top: 86% !important; }
  .orbit__tile:nth-child(8){ left: 73% !important; top: 84% !important; }
  .orbit__msg{ font-size: clamp(34px, 9.4vw, 46px); }
  .orbit__cta{ margin-top: 28px; }

  /* Case study: site windows keep a landscape screen, so desktop screenshots aren't cut into a tall crop */
  .deck-card__screen{ aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   LIGHT SECTIONS — testimonials + process run on pure white,
   the rest of the page stays dark. Scoped overrides only.
   ========================================================================== */
.section--light{
  background: #ffffff;
  color: #131217;
}
.section--light .eyebrow{ color: #6b6974; }
.section--light .section-title{ color: #131217; }
.section--light .section-intro{ color: #55535c; }

/* testimonial card on white */
.section--light .testimonial-slide__card{
  background: #fff;
  border-color: rgba(10,10,13,.12);
  box-shadow: none;
}
.section--light .testimonial-slide__badge{
  box-shadow: 0 4px 16px rgba(10,10,13,.12);
}
.section--light .testimonial-slide__quote{ color: #131217; }
.section--light .testimonial-slide__points li{ color: #55535c; }
.section--light .testimonial-slide__point-icon{ background: #ebf3fd; color: #0071E3; }
.section--light .testimonial-slide__foot{ border-top-color: rgba(10,10,13,.10); }
.section--light .testimonial-slide__person-info strong{ color: #131217; }
.section--light .testimonial-slide__person-info em{ color: #8a8892; }
.section--light .testimonial-slide__video{ background: #f0f0f2; }
.section--light .testimonial-slide__video-hint{
  background: #f0f0f2; color: #8a8892;
}
.section--light .testimonial-slide__video-hint b{ color: #55535c; }

/* dots + arrows on white */
.section--light .testimonials__dot{ background: rgba(10,10,13,.18); }
.section--light .testimonials__dot:hover:not(.is-active){ background: rgba(10,10,13,.38); }
.section--light .testimonials__dot.is-active{ background: #0071E3; }
.section--light .testimonials__arrow{ color: #6b6974; }
.section--light .testimonials__arrow:hover:not(:disabled){ color: #131217; }

/* process stepper on white */
.section--light .process__connector{ background: rgba(10,10,13,.14); }
.section--light .process__node-icon{
  background: #fff; border-color: rgba(10,10,13,.20); color: #8a8892;
}
.section--light .process__node.is-active .process__node-icon{
  background: #3939e1; border-color: transparent; color: #fff;
}
.section--light .process__node.is-done .process__node-icon{
  background: #c2c0c9; border-color: transparent; color: #fff;
}
.section--light .process__node-num{ color: #a5a3ac; }
.section--light .process__node.is-active .process__node-num{ color: #131217; }
.section--light .process__node.is-done .process__node-num{ color: #a5a3ac; }
.section--light .process__detail-title{ color: #131217; }
.section--light .process__detail-text{ color: #55535c; }

/* =====================================================================
   CASE STUDIES PAGE (case-studies.html) -- black like the booking page; one article per project:
   head (number on top), the site playing on the MacBook, then context / problem / process / solution / result
   rows, a gallery of browser-window shots, and a call to action. Reveals and video: js/case-studies.js.
   ===================================================================== */
.cs-page{ background: #000; position: relative; isolation: isolate; }
.cs-page::before{
  content: ''; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 12% 0%, rgba(0,113,227,.22), rgba(0,113,227,0) 70%);
}

.cs{ max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }

/* head + index */
.cs-hero{ padding: clamp(64px, 10vw, 140px) 0 0; }
.cs-hero .section-intro{ max-width: 560px; }
.cs-index{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(48px, 6vw, 72px); }
.cs-card{
  position: relative; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px) 0;
  border-radius: clamp(22px, 2.4vw, 32px); background: #04050a;
  transition: background-color .18s;
}
.cs-card::before{ content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cs-card--blue::before{ background: radial-gradient(80% 70% at 85% 100%, rgba(0,113,227,.32), rgba(0,113,227,0) 70%); }
.cs-card--violet::before{ background: radial-gradient(80% 70% at 85% 100%, rgba(124,77,255,.3), rgba(124,77,255,0) 70%); }
.cs-card:hover{ background: #0a0b12; }
.cs-card:focus-visible{ outline: 2px solid #4da3ff; outline-offset: 3px; }
.cs-card > *{ position: relative; z-index: 1; }
.cs-card__meta{ font-size: 15px; color: var(--text-muted); }
.cs-card__hook{ font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
.cs-card__shot{
  display: block; margin-top: clamp(20px, 2.4vw, 30px); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,.1); border-bottom: 0;
}
.cs-card__shot img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* one case study */
.cs-study{ padding-top: clamp(120px, 14vw, 200px); scroll-margin-top: 24px; }
.cs-study__lede{ margin-top: 28px; max-width: 700px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(244,242,236,.8); }
/* a case study's title sits one step under the page's own */
.cs-study .section-title{ font-size: clamp(36px, 5vw, 72px); }
.cs-page .section-title, .pj-page .section-title{ text-wrap: balance; }
.cs-meta{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin-top: clamp(36px, 4vw, 52px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
}
.cs-meta dt{ font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }
.cs-meta dd{ font-size: 15px; line-height: 1.5; color: var(--text); }

.cs-stage{
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(40px, 6vw, 88px) clamp(16px, 7vw, 120px) clamp(28px, 4vw, 48px);
  border-radius: clamp(24px, 2.6vw, 36px); background: #04050a;
}
.cs-stage--blue{ background: radial-gradient(60% 70% at 50% 40%, rgba(0,113,227,.26), rgba(0,113,227,0) 72%), #04050a; }
.cs-stage--violet{ background: radial-gradient(60% 70% at 50% 40%, rgba(124,77,255,.26), rgba(124,77,255,0) 72%), #04050a; }
.cs-stage .laptop{ max-width: 980px; margin: 0 auto; }
.cs-stage__cap{ margin-top: clamp(22px, 3vw, 36px); text-align: center; font-size: 14px; color: var(--text-muted); }

.cs-body{ margin-top: clamp(48px, 6vw, 80px); }
.cs-row{
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px;
  padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid rgba(255,255,255,.08);
}
.cs-row--follow{ border-top: 0; padding-top: 8px; }
.cs-row__label{ font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; color: var(--text); }
.cs-row__text{ max-width: 720px; }
.cs-row__text p{ font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; color: rgba(244,242,236,.8); }
.cs-row__text p + p, .cs-row__text .cs-stats + p{ margin-top: 16px; }
.cs-row__text h4{ font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.cs-row__text p + h4{ margin-top: 26px; }
.cs-row__text strong{ color: var(--text); font-weight: 600; }
.cs-row__text em{ font-size: 1.05em; }

.cs-gallery{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 8px 0 clamp(32px, 4vw, 48px) calc(200px + 32px); }
.cs-shot{ margin: 0; }
.cs-shot--wide{ grid-column: 1 / -1; }
.cs-shot img{ display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; }
.cs-shot figcaption{ margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.cs-stats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 8px; }
.cs-stats p{ display: flex; flex-direction: column; gap: 8px; }
.cs-stats strong{ font-size: clamp(52px, 6vw, 88px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.cs-stats span{ font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 280px; }
.cs-quote{ margin-top: clamp(28px, 3.6vw, 40px); }

.cs-cta{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
  margin-top: clamp(24px, 3vw, 40px); padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border-radius: 24px; background: #0e0e11; border: 1px solid rgba(255,255,255,.07);
}
.cs-cta p{ font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.cs-cta__actions{ display: flex; flex-wrap: wrap; gap: 10px; }


/* reveals: fade up once (js/case-studies.js adds .is-in); without JS or with reduced motion everything just shows */
.cs-js [data-cs-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.cs-js [data-cs-reveal].is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .cs-js [data-cs-reveal]{ opacity: 1; transform: none; transition: none; } }

@media (max-width: 860px){
  .cs-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-row{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cs-row--follow .cs-row__label{ display: none; }
  .cs-gallery{ margin-left: 0; }
}
@media (max-width: 640px){
  .cs-index, .cs-gallery{ grid-template-columns: minmax(0, 1fr); }
  .cs-stats{ gap: 16px; }
  .cs-stats span{ font-size: 14px; }
  .cs-cta{ padding: 24px 20px; }
  .cs-cta__actions .work__btn{ flex: 1 1 auto; }
}

/* ---------- sub-pages: shared top bar and footer (case-studies.html dark, projects.html white) ---------- */
.sub-top{
  max-width: 1200px; margin: 0 auto; padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sub-top__logo img{ display: block; width: clamp(64px, 6.8vw, 80px); height: auto; }
.cs-page .sub-top__logo img{ filter: invert(1); }     /* the logo file is black */
.sub-top__nav{ display: flex; align-items: center; gap: 2px; }
.sub-top__link{
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px;
  font-size: 14px; font-weight: 500; color: #6b6974; transition: color .18s;
}
.sub-top__link:hover, .sub-top__link[aria-current="page"]{ color: #131217; }
.cs-page .sub-top__link{ color: var(--text-muted); }
.cs-page .sub-top__link:hover, .cs-page .sub-top__link[aria-current="page"]{ color: var(--text); }
.sub-top__link:focus-visible, .sub-foot__mail:focus-visible{ outline: 2px solid #0071E3; outline-offset: 2px; border-radius: 8px; }
.sub-top__cta{ margin-left: 8px; padding: 11px 20px; font-size: 14px; }
.sub-foot{
  max-width: 1200px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad) 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sub-foot__mail{ font-size: 15px; color: #55535c; transition: color .18s; }
.sub-foot__mail:hover{ color: #131217; }
.cs-page .sub-foot__mail{ color: var(--text-muted); }
.cs-page .sub-foot__mail:hover{ color: var(--text); }
@media (max-width: 480px){
  .sub-top{ gap: 8px; }
  .sub-top__link{ padding: 0 6px; font-size: 13px; }
  .sub-top__cta{ margin-left: 4px; padding: 10px 14px; font-size: 13px; }
}

/* =====================================================================
   PROJECTS PAGE (projects.html) -- white; every project in one grid. Each card: the site on a light-grey stage,
   bleeding off its right and bottom edge, then type, name, one line, the stack and two blue links.
   ===================================================================== */
.pj-page{ background: #fff; color: #131217; }
.pj-page .eyebrow{ color: #6b6974; }
.pj-page .section-intro{ color: #55535c; max-width: 560px; }
.pj{ max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.pj-head{ padding: clamp(64px, 10vw, 140px) 0 clamp(48px, 6vw, 72px); }
.pj-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px) clamp(16px, 2vw, 24px); }
.pj-card__media{
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  padding: 11% 0 0 9%; border-radius: clamp(20px, 2vw, 28px); background: #f5f5f7;
}
.pj-card__media img{
  display: block; width: 125%; max-width: none; height: 100%; object-fit: cover; object-position: left top;
  border: 1px solid rgba(0,0,0,.08); border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0;
}
.pj-card__body{ padding: 22px 2px 0; }
.pj-card__type{ font-size: 14px; color: #6b6974; margin-bottom: 6px; }
.pj-card__title{ font-size: clamp(24px, 2.1vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.pj-card__text{ margin-top: 10px; font-size: 16px; line-height: 1.55; color: #55535c; }
.pj-card__stack{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pj-card__stack li{ padding: 5px 11px; border-radius: 100px; background: #f5f5f7; font-size: 13px; color: #55535c; }
.pj-card__links{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.pj-card__links a{
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  font-size: 15px; font-weight: 500; color: #0071E3; transition: color .18s;
}
.pj-card__links a:hover{ color: #0a7ef0; }
.pj-card__links a:focus-visible{ outline: 2px solid #0071E3; outline-offset: 3px; border-radius: 6px; }
.pj-end{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
  margin-top: clamp(96px, 12vw, 160px); padding: clamp(36px, 5vw, 64px);
  border-radius: clamp(24px, 2.6vw, 36px); background: #f5f5f7;
}
.pj-end__title{ font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; max-width: 640px; text-wrap: balance; }
@media (max-width: 1000px){ .pj-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){
  .pj-grid{ grid-template-columns: minmax(0, 1fr); }
  .pj-end{ padding: 32px 24px; }
}

/* ---------- 404 (404.html): the case-studies black, one calm message and the way back ---------- */
.nf{ min-height: 62vh; }
.nf .section-intro{ max-width: 460px; }
.nf__actions{ margin-top: 36px; }