/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}
/* ============================================================
   BLACK SALT STUDIO - style.css
   Monochrome. Black, titanium, bone. Apple-grade restraint
   with a little edge in the type and the mono detailing.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --black: #000000;
  --panel: #08080a;
  --panel-2: #0e0e11;
  --text: #f5f5f7;       /* off-white */
  --text-dim: #86868b;   /* titanium grey */
  --text-dimmer: #5b5b60;
  --line: rgba(245, 245, 247, 0.1);
  --line-soft: rgba(245, 245, 247, 0.06);

  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --pad: clamp(20px, 5vw, 80px);
  --nav-h: 64px;
  --maxw: 1320px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--text); color: var(--black); }

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

:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; border-radius: 2px; }

/* ---------- utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  color: var(--text-dim);
  margin-bottom: clamp(20px, 3vh, 36px);
}

/* titanium sheen on key words - monochrome, but it glints */
.sheen {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 35%, #8a8a90 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* fade-in primitives (JS adds .is-in; CSS is the reduced-motion fallback) */
.js [data-fade] { opacity: 0; transform: translateY(22px); }
.js [data-fade].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--pad);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(0, 0, 0, 0.72); }
.nav.is-hidden { transform: translateY(-100%); }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (max-width: 440px) {
  .nav-brand { font-size: 12.5px; gap: 8px; }
  .nav-cta { padding: 8px 14px; }
}

.nav-links { display: flex; gap: clamp(18px, 2.4vw, 40px); }

.nav-links a {
  position: relative;
  color: var(--text-dim);
  padding: 6px 0;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--text); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}
.nav-cta:hover { background: var(--text); color: var(--black); border-color: var(--text); }

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ============================================================
   MOBILE MENU
   A hamburger that isn't the stock three equal bars: graduated,
   right-aligned lines (a little editorial asymmetry) that equalise
   on hover, then spring into an X on open. Tapping inflates a
   rounded "bubble" out of the button (clip-path circle grows from
   the button corner), links stagger in behind it. Injected by
   initUI(), so it lives on every page.
   ============================================================ */

/* the button lives fixed, above the scrim + bubble, so it doubles
   as the close control. Hidden until the primary links drop out. */
.nav-toggle {
  display: none;
  position: fixed;
  top: calc((var(--nav-h) - 42px) / 2);
  right: var(--pad);
  z-index: 300;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), transform 0.6s var(--ease);
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  /* the CTA moves inside the bubble, leaving a clean brand + button bar */
  .nav-cta { display: none; }
}

.nav-toggle__box {
  position: relative;
  width: 22px;
  height: 14px;
}

.nav-toggle__line {
  position: absolute;
  right: 0;
  height: 1.6px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: width 0.5s var(--ease),
    top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s var(--ease);
}
.nav-toggle__line:nth-child(1) { top: 0; width: 100%; }
.nav-toggle__line:nth-child(2) { top: 6px; width: 64%; }
.nav-toggle__line:nth-child(3) { top: 12px; width: 34%; }

/* considered micro-interaction: lines snap to alignment on hover */
@media (hover: hover) {
  .nav-toggle:hover .nav-toggle__line { width: 100%; }
}

/* open = inverted bubble button with a springy black X */
.nav-toggle.is-open {
  background: var(--text);
  color: var(--black);
  border-color: var(--text);
}
.nav-toggle.is-open .nav-toggle__line { width: 100%; }
.nav-toggle.is-open .nav-toggle__line:nth-child(1) { top: 6px; transform: rotate(45deg); transition-delay: 0.05s; }
.nav-toggle.is-open .nav-toggle__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .nav-toggle__line:nth-child(3) { top: 6px; transform: rotate(-45deg); transition-delay: 0.11s; }

/* dimming scrim, also the tap-to-close surface */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.menu-scrim.is-open { opacity: 1; visibility: visible; }

/* the bubble: a rounded card that inflates from the button corner */
.menu-bubble {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 210;
  width: min(84vw, 360px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 66px 10px 12px;
  background: rgba(8, 8, 10, 0.9);
  border: 1px solid var(--line);
  border-radius: 26px;
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  clip-path: circle(0px at calc(100% - 34px) 26px);
  transition: clip-path 0.62s var(--ease), visibility 0.62s var(--ease);
}
.menu-bubble.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 34px) 26px);
}

.menu-list { display: flex; flex-direction: column; }

.menu-item > a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 16px;
  color: var(--text);
  transition: background 0.3s var(--ease);
}
.menu-item + .menu-item { border-top: 1px solid var(--line-soft); }
.menu-index { color: var(--text-dim); font-size: 10px; }
.menu-label { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
/* current page: faint "you are here" highlight, matching the hover token */
.menu-item > a[aria-current="page"] { background: var(--line-soft); }
.menu-item > a[aria-current="page"] .menu-index { color: var(--text); }
@media (hover: hover) {
  .menu-item > a:hover { background: var(--line-soft); }
}

.menu-foot {
  margin-top: 12px;
  padding: 16px 16px 6px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--black);
  transition: opacity 0.3s var(--ease);
}
.menu-cta:active { opacity: 0.85; }
.menu-mail { color: var(--text-dim); }

/* content staggers in just behind the inflating bubble */
.menu-bubble .menu-item,
.menu-bubble .menu-foot > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.menu-bubble.is-open .menu-item,
.menu-bubble.is-open .menu-foot > * {
  opacity: 1;
  transform: none;
}
.menu-bubble.is-open .menu-item:nth-child(1) { transition-delay: 0.16s; }
.menu-bubble.is-open .menu-item:nth-child(2) { transition-delay: 0.22s; }
.menu-bubble.is-open .menu-item:nth-child(3) { transition-delay: 0.28s; }
.menu-bubble.is-open .menu-item:nth-child(4) { transition-delay: 0.34s; }
.menu-bubble.is-open .menu-item:nth-child(5) { transition-delay: 0.40s; }
.menu-bubble.is-open .menu-foot > * { transition-delay: 0.44s; }

/* lock the page behind the open menu (covers reduced-motion / no-Lenis) */
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 4vh) var(--pad) clamp(28px, 5vh, 56px);
  overflow: clip;
}

.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-eyebrow {
  color: var(--text-dim);
  margin-bottom: clamp(18px, 3.5vh, 40px);
}

.hero-lockup { width: 100%; }

/* the mark: BLACK SALT STUDIO at a strict 80vw. A looping video masked to the
   wordmark - an outlined SVG embedded as a data-URI, so ONE stylesheet works in
   dev and on WEBINONE. Unlike the old hidden-video/canvas approach this works
   on mobile, because the video is a normal visible element (which autoplays
   muted inline). If autoplay is ever blocked, the poster frame shows, still
   masked into the letters. */
.hero-mark {
  position: relative;
  /* fill 80vw, but cap the height at ~58vh so it never swallows the viewport on
     wide screens (matches the old canvas maxH). aspect-ratio keeps it square. */
  width: min(80vw, 80vh);
  margin-inline: auto;
  aspect-ratio: 3405 / 2474; /* matches mark.svg so the wordmark fills the box */
  will-change: transform;
}
.hero-mark-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNC4wMCAtMjQuMDAgMzQwNS4wMCAyNDczLjU2IiBmaWxsPSIjZmZmIj4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQzLjAwIDY5Ny4wMCkgc2NhbGUoMSAtMSkiIGQ9Ik02MyAwVjY5N0gzMTZRNDIxIDY5NyA0ODEuMCA2NTAuMFE1NDEgNjAzIDU0MSA1MjFRNTQxIDQ3MyA1MjIuMCA0MzYuNVE1MDMgNDAwIDQ2OSAzNzhRNTI1IDM1NSA1NTIuMCAzMTIuMFE1NzkgMjY5IDU3OSAyMDdRNTc5IDExMCA1MTguMCA1NS4wUTQ1NyAwIDM1MCAwWk0yMDYgMTMxSDMzOFE0MzYgMTMxIDQzNiAyMTNRNDM2IDI1MiA0MTEuNSAyNzMuNVEzODcgMjk1IDM0MiAyOTVIMjA2Wk0yMDYgNDIzSDMxOFEzNTYgNDIzIDM3Ny4wIDQ0My4wUTM5OCA0NjMgMzk4IDQ5OFEzOTggNTMwIDM3Ni41IDU0OC4wUTM1NSA1NjYgMzE2IDU2NkgyMDZaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyOC4wMCA2OTcuMDApIHNjYWxlKDEgLTEpIiBkPSJNNjMgMFY2OTdIMjA2VjEyOEg0OTdWMFoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwNS4wMCA2OTcuMDApIHNjYWxlKDEgLTEpIiBkPSJNNSAwIDI5MCA2OTdIMzk2TDY4MSAwSDUyNUw0NzggMTI3SDIwOUwxNjEgMFpNNDMwIDI1NSAzNDQgNDg1IDI1NyAyNTVaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjEuMDAgNjk3LjAwKSBzY2FsZSgxIC0xKSIgZD0iTTM3MyAtMTdRMjczIC0xNyAxOTcuMCAyOS4wUTEyMSA3NSA3OC41IDE1Ny4wUTM2IDIzOSAzNiAzNDlRMzYgNDU5IDc4LjUgNTQwLjVRMTIxIDYyMiAxOTcuMCA2NjguMFEyNzMgNzE0IDM3MyA3MTRRNDg2IDcxNCA1NjcuNSA2NTcuNVE2NDkgNjAxIDY4NSA1MDJMNTUwIDQ1M1E1MjkgNTEyIDQ4My41IDU0NC41UTQzOCA1NzcgMzczIDU3N1EzMTQgNTc3IDI3MC4wIDU0OS41UTIyNiA1MjIgMjAyLjUgNDcxLjBRMTc5IDQyMCAxNzkgMzQ5UTE3OSAyNzggMjAyLjUgMjI2LjVRMjI2IDE3NSAyNzAuMCAxNDcuNVEzMTQgMTIwIDM3MyAxMjBRNDM4IDEyMCA0ODMuNSAxNTMuMFE1MjkgMTg2IDU1MCAyNDRMNjg1IDE5NVE2NDkgOTcgNTY3LjUgNDAuMFE0ODYgLTE3IDM3MyAtMTdaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NDIuMDAgNjk3LjAwKSBzY2FsZSgxIC0xKSIgZD0iTTYzIDBWNjk3SDIwNlY0MTdMNDcwIDY5N0g2NjNMMzk2IDQyN0w2NjUgMEg0OTVMMjkzIDMyMkwyMDYgMjM0VjBaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0Ni4wMCAxNTYxLjI4KSBzY2FsZSgxIC0xKSIgZD0iTTI5OSAtMTRRMTg1IC0xNCAxMTIuNSA0NS4wUTQwIDEwNCAyNCAyMDJMMTY0IDIzN1ExNzUgMTc1IDIxMi4wIDE0NC4wUTI0OSAxMTMgMzA0IDExM1EzMzIgMTEzIDM1NS4wIDEyMi41UTM3OCAxMzIgMzkxLjAgMTUwLjBRNDA0IDE2OCA0MDQgMTkzUTQwNCAyMTYgMzkwLjUgMjMzLjVRMzc3IDI1MSAzNDguMCAyNjYuMFEzMTkgMjgxIDI3NCAyOThRMjA2IDMyNSAxNjEuMCAzNTUuNVExMTYgMzg2IDk0LjUgNDI2LjBRNzMgNDY2IDczIDUxOVE3MyA1NzYgMTAxLjAgNjIwLjBRMTI5IDY2NCAxNzkuNSA2ODkuMFEyMzAgNzE0IDI5NyA3MTRRMzY5IDcxNCA0MjQuMCA2ODEuMFE0NzkgNjQ4IDUxMyA1ODJMMzk5IDUxM1EzNzkgNTQ5IDM1Mi4wIDU2OC4wUTMyNSA1ODcgMjkyIDU4N1EyNzEgNTg3IDI1NC4wIDU3OS4wUTIzNyA1NzEgMjI2LjUgNTU2LjBRMjE2IDU0MSAyMTYgNTIyUTIxNiA1MDIgMjI4LjAgNDg1LjVRMjQwIDQ2OSAyNjkuNSA0NTMuMFEyOTkgNDM3IDM0OCA0MThRNDE0IDM5NCA0NTcuNSAzNjQuNVE1MDEgMzM1IDUyMy41IDI5Ni4wUTU0NiAyNTcgNTQ2IDIwMlE1NDYgMTM5IDUxNS4wIDkwLjBRNDg0IDQxIDQyOC41IDEzLjVRMzczIC0xNCAyOTkgLTE0WiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDk1LjAwIDE1NjEuMjgpIHNjYWxlKDEgLTEpIiBkPSJNNSAwIDI5MCA2OTdIMzk2TDY4MSAwSDUyNUw0NzggMTI3SDIwOUwxNjEgMFpNNDMwIDI1NSAzNDQgNDg1IDI1NyAyNTVaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3NTEuMDAgMTU2MS4yOCkgc2NhbGUoMSAtMSkiIGQ9Ik02MyAwVjY5N0gyMDZWMTI4SDQ5N1YwWiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjI4LjAwIDE1NjEuMjgpIHNjYWxlKDEgLTEpIiBkPSJNMjE5IDBWNTY5SDlWNjk3SDU3M1Y1NjlIMzY0VjBaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAgMjQyNS41Nikgc2NhbGUoMSAtMSkiIGQ9Ik0yOTkgLTE0UTE4NSAtMTQgMTEyLjUgNDUuMFE0MCAxMDQgMjQgMjAyTDE2NCAyMzdRMTc1IDE3NSAyMTIuMCAxNDQuMFEyNDkgMTEzIDMwNCAxMTNRMzMyIDExMyAzNTUuMCAxMjIuNVEzNzggMTMyIDM5MS4wIDE1MC4wUTQwNCAxNjggNDA0IDE5M1E0MDQgMjE2IDM5MC41IDIzMy41UTM3NyAyNTEgMzQ4LjAgMjY2LjBRMzE5IDI4MSAyNzQgMjk4UTIwNiAzMjUgMTYxLjAgMzU1LjVRMTE2IDM4NiA5NC41IDQyNi4wUTczIDQ2NiA3MyA1MTlRNzMgNTc2IDEwMS4wIDYyMC4wUTEyOSA2NjQgMTc5LjUgNjg5LjBRMjMwIDcxNCAyOTcgNzE0UTM2OSA3MTQgNDI0LjAgNjgxLjBRNDc5IDY0OCA1MTMgNTgyTDM5OSA1MTNRMzc5IDU0OSAzNTIuMCA1NjguMFEzMjUgNTg3IDI5MiA1ODdRMjcxIDU4NyAyNTQuMCA1NzkuMFEyMzcgNTcxIDIyNi41IDU1Ni4wUTIxNiA1NDEgMjE2IDUyMlEyMTYgNTAyIDIyOC4wIDQ4NS41UTI0MCA0NjkgMjY5LjUgNDUzLjBRMjk5IDQzNyAzNDggNDE4UTQxNCAzOTQgNDU3LjUgMzY0LjVRNTAxIDMzNSA1MjMuNSAyOTYuMFE1NDYgMjU3IDU0NiAyMDJRNTQ2IDEzOSA1MTUuMCA5MC4wUTQ4NCA0MSA0MjguNSAxMy41UTM3MyAtMTQgMjk5IC0xNFoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ5LjAwIDI0MjUuNTYpIHNjYWxlKDEgLTEpIiBkPSJNMjE5IDBWNTY5SDlWNjk3SDU3M1Y1NjlIMzY0VjBaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMDIuMDAgMjQyNS41Nikgc2NhbGUoMSAtMSkiIGQ9Ik0zMjkgLTE3UTE5NCAtMTcgMTI1LjUgNTAuMFE1NyAxMTcgNTcgMjUyVjY5N0gyMDBWMjY4UTIwMCAyMTcgMjEwLjAgMTgzLjBRMjIwIDE0OSAyNDguNSAxMzIuMFEyNzcgMTE1IDMyOSAxMTVRMzgxIDExNSA0MDguNSAxMzIuMFE0MzYgMTQ5IDQ0Ny4wIDE4My4wUTQ1OCAyMTcgNDU4IDI2N1Y2OTdINjAxVjI1N1E2MDEgMTE5IDUzMi4wIDUxLjBRNDYzIC0xNyAzMjkgLTE3WiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzMwLjAwIDI0MjUuNTYpIHNjYWxlKDEgLTEpIiBkPSJNNjMgMFY2OTdIMjcwUTQ0NCA2OTcgNTM5LjUgNjA1LjBRNjM1IDUxMyA2MzUgMzQzUTYzNSAxNzcgNTQxLjAgODguNVE0NDcgMCAyNjkgMFpNMjA2IDEzMUgyNTRRMzI5IDEzMSAzODIuMCAxNDkuNVE0MzUgMTY4IDQ2My4wIDIxNS4wUTQ5MSAyNjIgNDkxIDM0OFE0OTEgNDMyIDQ2NC4wIDQ3OS41UTQzNyA1MjcgMzg3LjAgNTQ2LjVRMzM3IDU2NiAyNjcgNTY2SDIwNloiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjM3MS4wMCAyNDI1LjU2KSBzY2FsZSgxIC0xKSIgZD0iTTYzIDBWNjk3SDIwNlYwWiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjEwLjAwIDI0MjUuNTYpIHNjYWxlKDEgLTEpIiBkPSJNMzczIC0xN1EyNzMgLTE3IDE5Ny4wIDI5LjBRMTIxIDc1IDc4LjUgMTU3LjBRMzYgMjM5IDM2IDM0OFEzNiA0NTggNzguNSA1NDAuMFExMjEgNjIyIDE5Ny4wIDY2OC4wUTI3MyA3MTQgMzczIDcxNFE0NzQgNzE0IDU1MC4wIDY2OC41UTYyNiA2MjMgNjY4LjUgNTQxLjBRNzExIDQ1OSA3MTEgMzQ4UTcxMSAyMzggNjY4LjAgMTU2LjBRNjI1IDc0IDU0OS4wIDI4LjVRNDczIC0xNyAzNzMgLTE3Wk0zNzMgMTIwUTQzMyAxMjAgNDc2LjAgMTQ4LjBRNTE5IDE3NiA1NDMuMCAyMjcuNVE1NjcgMjc5IDU2NyAzNDhRNTY3IDQxOCA1NDMuMCA0NjkuNVE1MTkgNTIxIDQ3Ni4wIDU0OS4wUTQzMyA1NzcgMzcyIDU3N1EzMTQgNTc3IDI3MC4wIDU0OS41UTIyNiA1MjIgMjAyLjUgNDcxLjBRMTc5IDQyMCAxNzkgMzQ4UTE3OSAyNzcgMjAyLjUgMjI2LjBRMjI2IDE3NSAyNzAuMCAxNDcuNVEzMTQgMTIwIDM3MyAxMjBaIi8+Cjwvc3ZnPgo=") center / contain no-repeat;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNC4wMCAtMjQuMDAgMzQwNS4wMCAyNDczLjU2IiBmaWxsPSIjZmZmIj4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQzLjAwIDY5Ny4wMCkgc2NhbGUoMSAtMSkiIGQ9Ik02MyAwVjY5N0gzMTZRNDIxIDY5NyA0ODEuMCA2NTAuMFE1NDEgNjAzIDU0MSA1MjFRNTQxIDQ3MyA1MjIuMCA0MzYuNVE1MDMgNDAwIDQ2OSAzNzhRNTI1IDM1NSA1NTIuMCAzMTIuMFE1NzkgMjY5IDU3OSAyMDdRNTc5IDExMCA1MTguMCA1NS4wUTQ1NyAwIDM1MCAwWk0yMDYgMTMxSDMzOFE0MzYgMTMxIDQzNiAyMTNRNDM2IDI1MiA0MTEuNSAyNzMuNVEzODcgMjk1IDM0MiAyOTVIMjA2Wk0yMDYgNDIzSDMxOFEzNTYgNDIzIDM3Ny4wIDQ0My4wUTM5OCA0NjMgMzk4IDQ5OFEzOTggNTMwIDM3Ni41IDU0OC4wUTM1NSA1NjYgMzE2IDU2NkgyMDZaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyOC4wMCA2OTcuMDApIHNjYWxlKDEgLTEpIiBkPSJNNjMgMFY2OTdIMjA2VjEyOEg0OTdWMFoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwNS4wMCA2OTcuMDApIHNjYWxlKDEgLTEpIiBkPSJNNSAwIDI5MCA2OTdIMzk2TDY4MSAwSDUyNUw0NzggMTI3SDIwOUwxNjEgMFpNNDMwIDI1NSAzNDQgNDg1IDI1NyAyNTVaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjEuMDAgNjk3LjAwKSBzY2FsZSgxIC0xKSIgZD0iTTM3MyAtMTdRMjczIC0xNyAxOTcuMCAyOS4wUTEyMSA3NSA3OC41IDE1Ny4wUTM2IDIzOSAzNiAzNDlRMzYgNDU5IDc4LjUgNTQwLjVRMTIxIDYyMiAxOTcuMCA2NjguMFEyNzMgNzE0IDM3MyA3MTRRNDg2IDcxNCA1NjcuNSA2NTcuNVE2NDkgNjAxIDY4NSA1MDJMNTUwIDQ1M1E1MjkgNTEyIDQ4My41IDU0NC41UTQzOCA1NzcgMzczIDU3N1EzMTQgNTc3IDI3MC4wIDU0OS41UTIyNiA1MjIgMjAyLjUgNDcxLjBRMTc5IDQyMCAxNzkgMzQ5UTE3OSAyNzggMjAyLjUgMjI2LjVRMjI2IDE3NSAyNzAuMCAxNDcuNVEzMTQgMTIwIDM3MyAxMjBRNDM4IDEyMCA0ODMuNSAxNTMuMFE1MjkgMTg2IDU1MCAyNDRMNjg1IDE5NVE2NDkgOTcgNTY3LjUgNDAuMFE0ODYgLTE3IDM3MyAtMTdaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NDIuMDAgNjk3LjAwKSBzY2FsZSgxIC0xKSIgZD0iTTYzIDBWNjk3SDIwNlY0MTdMNDcwIDY5N0g2NjNMMzk2IDQyN0w2NjUgMEg0OTVMMjkzIDMyMkwyMDYgMjM0VjBaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0Ni4wMCAxNTYxLjI4KSBzY2FsZSgxIC0xKSIgZD0iTTI5OSAtMTRRMTg1IC0xNCAxMTIuNSA0NS4wUTQwIDEwNCAyNCAyMDJMMTY0IDIzN1ExNzUgMTc1IDIxMi4wIDE0NC4wUTI0OSAxMTMgMzA0IDExM1EzMzIgMTEzIDM1NS4wIDEyMi41UTM3OCAxMzIgMzkxLjAgMTUwLjBRNDA0IDE2OCA0MDQgMTkzUTQwNCAyMTYgMzkwLjUgMjMzLjVRMzc3IDI1MSAzNDguMCAyNjYuMFEzMTkgMjgxIDI3NCAyOThRMjA2IDMyNSAxNjEuMCAzNTUuNVExMTYgMzg2IDk0LjUgNDI2LjBRNzMgNDY2IDczIDUxOVE3MyA1NzYgMTAxLjAgNjIwLjBRMTI5IDY2NCAxNzkuNSA2ODkuMFEyMzAgNzE0IDI5NyA3MTRRMzY5IDcxNCA0MjQuMCA2ODEuMFE0NzkgNjQ4IDUxMyA1ODJMMzk5IDUxM1EzNzkgNTQ5IDM1Mi4wIDU2OC4wUTMyNSA1ODcgMjkyIDU4N1EyNzEgNTg3IDI1NC4wIDU3OS4wUTIzNyA1NzEgMjI2LjUgNTU2LjBRMjE2IDU0MSAyMTYgNTIyUTIxNiA1MDIgMjI4LjAgNDg1LjVRMjQwIDQ2OSAyNjkuNSA0NTMuMFEyOTkgNDM3IDM0OCA0MThRNDE0IDM5NCA0NTcuNSAzNjQuNVE1MDEgMzM1IDUyMy41IDI5Ni4wUTU0NiAyNTcgNTQ2IDIwMlE1NDYgMTM5IDUxNS4wIDkwLjBRNDg0IDQxIDQyOC41IDEzLjVRMzczIC0xNCAyOTkgLTE0WiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDk1LjAwIDE1NjEuMjgpIHNjYWxlKDEgLTEpIiBkPSJNNSAwIDI5MCA2OTdIMzk2TDY4MSAwSDUyNUw0NzggMTI3SDIwOUwxNjEgMFpNNDMwIDI1NSAzNDQgNDg1IDI1NyAyNTVaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3NTEuMDAgMTU2MS4yOCkgc2NhbGUoMSAtMSkiIGQ9Ik02MyAwVjY5N0gyMDZWMTI4SDQ5N1YwWiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjI4LjAwIDE1NjEuMjgpIHNjYWxlKDEgLTEpIiBkPSJNMjE5IDBWNTY5SDlWNjk3SDU3M1Y1NjlIMzY0VjBaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAgMjQyNS41Nikgc2NhbGUoMSAtMSkiIGQ9Ik0yOTkgLTE0UTE4NSAtMTQgMTEyLjUgNDUuMFE0MCAxMDQgMjQgMjAyTDE2NCAyMzdRMTc1IDE3NSAyMTIuMCAxNDQuMFEyNDkgMTEzIDMwNCAxMTNRMzMyIDExMyAzNTUuMCAxMjIuNVEzNzggMTMyIDM5MS4wIDE1MC4wUTQwNCAxNjggNDA0IDE5M1E0MDQgMjE2IDM5MC41IDIzMy41UTM3NyAyNTEgMzQ4LjAgMjY2LjBRMzE5IDI4MSAyNzQgMjk4UTIwNiAzMjUgMTYxLjAgMzU1LjVRMTE2IDM4NiA5NC41IDQyNi4wUTczIDQ2NiA3MyA1MTlRNzMgNTc2IDEwMS4wIDYyMC4wUTEyOSA2NjQgMTc5LjUgNjg5LjBRMjMwIDcxNCAyOTcgNzE0UTM2OSA3MTQgNDI0LjAgNjgxLjBRNDc5IDY0OCA1MTMgNTgyTDM5OSA1MTNRMzc5IDU0OSAzNTIuMCA1NjguMFEzMjUgNTg3IDI5MiA1ODdRMjcxIDU4NyAyNTQuMCA1NzkuMFEyMzcgNTcxIDIyNi41IDU1Ni4wUTIxNiA1NDEgMjE2IDUyMlEyMTYgNTAyIDIyOC4wIDQ4NS41UTI0MCA0NjkgMjY5LjUgNDUzLjBRMjk5IDQzNyAzNDggNDE4UTQxNCAzOTQgNDU3LjUgMzY0LjVRNTAxIDMzNSA1MjMuNSAyOTYuMFE1NDYgMjU3IDU0NiAyMDJRNTQ2IDEzOSA1MTUuMCA5MC4wUTQ4NCA0MSA0MjguNSAxMy41UTM3MyAtMTQgMjk5IC0xNFoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ5LjAwIDI0MjUuNTYpIHNjYWxlKDEgLTEpIiBkPSJNMjE5IDBWNTY5SDlWNjk3SDU3M1Y1NjlIMzY0VjBaIi8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMDIuMDAgMjQyNS41Nikgc2NhbGUoMSAtMSkiIGQ9Ik0zMjkgLTE3UTE5NCAtMTcgMTI1LjUgNTAuMFE1NyAxMTcgNTcgMjUyVjY5N0gyMDBWMjY4UTIwMCAyMTcgMjEwLjAgMTgzLjBRMjIwIDE0OSAyNDguNSAxMzIuMFEyNzcgMTE1IDMyOSAxMTVRMzgxIDExNSA0MDguNSAxMzIuMFE0MzYgMTQ5IDQ0Ny4wIDE4My4wUTQ1OCAyMTcgNDU4IDI2N1Y2OTdINjAxVjI1N1E2MDEgMTE5IDUzMi4wIDUxLjBRNDYzIC0xNyAzMjkgLTE3WiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzMwLjAwIDI0MjUuNTYpIHNjYWxlKDEgLTEpIiBkPSJNNjMgMFY2OTdIMjcwUTQ0NCA2OTcgNTM5LjUgNjA1LjBRNjM1IDUxMyA2MzUgMzQzUTYzNSAxNzcgNTQxLjAgODguNVE0NDcgMCAyNjkgMFpNMjA2IDEzMUgyNTRRMzI5IDEzMSAzODIuMCAxNDkuNVE0MzUgMTY4IDQ2My4wIDIxNS4wUTQ5MSAyNjIgNDkxIDM0OFE0OTEgNDMyIDQ2NC4wIDQ3OS41UTQzNyA1MjcgMzg3LjAgNTQ2LjVRMzM3IDU2NiAyNjcgNTY2SDIwNloiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjM3MS4wMCAyNDI1LjU2KSBzY2FsZSgxIC0xKSIgZD0iTTYzIDBWNjk3SDIwNlYwWiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjEwLjAwIDI0MjUuNTYpIHNjYWxlKDEgLTEpIiBkPSJNMzczIC0xN1EyNzMgLTE3IDE5Ny4wIDI5LjBRMTIxIDc1IDc4LjUgMTU3LjBRMzYgMjM5IDM2IDM0OFEzNiA0NTggNzguNSA1NDAuMFExMjEgNjIyIDE5Ny4wIDY2OC4wUTI3MyA3MTQgMzczIDcxNFE0NzQgNzE0IDU1MC4wIDY2OC41UTYyNiA2MjMgNjY4LjUgNTQxLjBRNzExIDQ1OSA3MTEgMzQ4UTcxMSAyMzggNjY4LjAgMTU2LjBRNjI1IDc0IDU0OS4wIDI4LjVRNDczIC0xNyAzNzMgLTE3Wk0zNzMgMTIwUTQzMyAxMjAgNDc2LjAgMTQ4LjBRNTE5IDE3NiA1NDMuMCAyMjcuNVE1NjcgMjc5IDU2NyAzNDhRNTY3IDQxOCA1NDMuMCA0NjkuNVE1MTkgNTIxIDQ3Ni4wIDU0OS4wUTQzMyA1NzcgMzcyIDU3N1EzMTQgNTc3IDI3MC4wIDU0OS41UTIyNiA1MjIgMjAyLjUgNDcxLjBRMTc5IDQyMCAxNzkgMzQ4UTE3OSAyNzcgMjAyLjUgMjI2LjBRMjI2IDE3NSAyNzAuMCAxNDcuNVEzMTQgMTIwIDM3MyAxMjBaIi8+Cjwvc3ZnPgo=") center / contain no-repeat;
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  width: 100%;
  margin-top: clamp(36px, 6vh, 72px);
  text-align: left;
}

.hero-sub {
  max-width: 40ch;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-dim);
}
.hero-sub .sheen { font-weight: 600; }

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.3s;
}
.hero-scroll:hover { color: var(--text); }

.hero-scroll-track {
  position: relative;
  width: 1px; height: 44px;
  background: var(--line);
  overflow: clip;
  display: block;
}
.hero-scroll-track i {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--text);
  animation: drip 1.9s var(--ease) infinite;
}
@keyframes drip {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(280%); }
}

@media (max-width: 720px) {
  .hero-foot { flex-direction: column; align-items: center; gap: 24px; }
  .hero-scroll-track { width: 44px; height: 1px; }
  .hero-scroll-track i { width: 40%; height: 100%; animation-name: drip-x; }
}
@keyframes drip-x {
  0% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(280%); }
}

/* ---------- statement (pinned word reveal) ---------- */
.statement {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(120px, 22vh, 260px) var(--pad);
}

.statement-eyebrow { color: var(--text-dimmer); margin-bottom: clamp(28px, 5vh, 56px); }

.statement-copy {
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.statement-copy .word { color: var(--text-dimmer); transition: color 0.3s var(--ease); }
.statement-copy .word.lit { color: var(--text); }

/* ---------- feature (full-bleed image moment) ---------- */
.feature {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(40px, 8vh, 96px) var(--pad);
  overflow: clip;
}

.feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.feature-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
/* legibility wash over the imagery */
.feature::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.feature-overlay {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
.feature-alt .feature-overlay { text-align: right; margin-left: auto; }
.feature-alt .feature-line { margin-left: auto; }

.feature-label { color: var(--text-dim); margin-bottom: 18px; }

.feature-title {
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.feature-line {
  margin-top: 22px;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--text-dim);
}

/* ---------- capabilities ---------- */
/* full-width section: the overflow:clip that contains the mountains' vertical
   bleed must clip at the viewport edge, not a max-width - otherwise it would
   crop the 100vw image. So the section spans full width and the max-width /
   gutters live on .caps-content instead. */
.caps {
  position: relative;
  padding-block: clamp(110px, 18vh, 220px);
  overflow: clip;
}

/* the grid of capabilities sits above the mountains, constrained + centred */
.caps-content {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

/* mountains pinned to the BOTTOM of the viewport while the services scroll
   past, then released to scroll up once the section ends. As the FIRST child
   with its flow height collapsed (margin-bottom) the content overlaps it;
   sticky top:(100vh - var(--bg-h)) holds the image against the viewport floor
   through the whole list, and .caps's overflow:clip keeps it from ever
   spilling onto the next section as it finally scrolls away. --bg-h is the
   single source of truth for the strip height - tall enough that object-fit
   cover doesn't over-zoom the 1.85:1 photo into the wide floor strip. */
.caps-bg {
  --bg-h: 70vh;
  position: sticky;
  top: calc(100vh - var(--bg-h));
  height: var(--bg-h);
  margin-bottom: calc(-1 * var(--bg-h));
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed */
  z-index: 0;
  pointer-events: none;
}
.caps-bg-img {
  position: relative;
  width: 100%;
  height: 100%;
}
.caps-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%; /* frame the peaks with headroom, clouds at the floor */
}
/* fade the top into black + a dark scrim so the services stay legible */
.caps-bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.62) 34%, rgba(0, 0, 0, 0.55) 100%);
}

/* left column - title + intro, sticky while the services scroll past */
.caps-head {
  position: sticky;
  top: calc(var(--nav-h) + clamp(28px, 7vh, 70px));
  align-self: start;
}

.caps-title {
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: 26px;
}

.caps-intro {
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--text-dim);
}

/* right column - services running down */
.caps-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.cap {
  position: relative;
  padding: clamp(28px, 3.4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}
.cap::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--pad) * -0.5);
  background: radial-gradient(120% 100% at 50% 0%, rgba(245,245,247,0.05), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.cap:hover::before { opacity: 1; }

.cap-num { color: var(--text-dimmer); display: block; margin-bottom: clamp(14px, 1.4vw, 20px); }

.cap-name {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 14px;
}

.cap-desc {
  max-width: 46ch;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.cap-tags { color: var(--text-dimmer); }

@media (max-width: 860px) {
  .caps-content { grid-template-columns: 1fr; gap: clamp(40px, 8vh, 72px); }
  .caps-head { position: static; }
}

/* ---------- intro stage (text + carousel layered over rising mountains) ---------- */
.intro-stage {
  position: relative;
  overflow: clip;
}
/* the intro text and the carousel sit ABOVE the mountains */
.intro-stage .statement,
.intro-stage .logo-band {
  position: relative;
  z-index: 2;
}

/* mountains rise behind everything; their top lands in the lower half of the
   text section and they extend down behind the logo carousel */
.intro-mountains {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  /* clip the scaled (parallax) image to its box so its top edge can't
     poke above the darkening gradient and show as a lighter band */
  overflow: clip;
}
.intro-mountains img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  will-change: transform;
}
/* black at the top so the peaks emerge from the void; darker at the base to
   keep the carousel logos legible and blend into the next section */
.intro-mountains::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #000 0%,
    rgba(0, 0, 0, 0.55) 14%,
    rgba(0, 0, 0, 0.12) 42%,
    rgba(0, 0, 0, 0.3) 66%,
    rgba(0, 0, 0, 0.7) 88%,
    #000 100%
  );
}

@media (max-width: 700px) {
  .intro-mountains { top: 52%; }
}

/* ---------- texture divider ---------- */
.divider {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 14vh, 160px) var(--pad);
  overflow: clip;
}
.divider-media { position: absolute; inset: 0; z-index: 0; }
.divider-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; will-change: transform; }
.divider::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4), rgba(0,0,0,0.85));
}
.divider-line {
  position: relative;
  z-index: 2;
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

/* ---------- clients ---------- */
.clients {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(110px, 18vh, 220px) var(--pad);
}

.clients-head { margin-bottom: clamp(48px, 8vh, 96px); }
.clients-title {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.clients-list { border-top: 1px solid var(--line); }

.client {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.6vh, 30px) 4px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.client-name {
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-dim);
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.client-tag { color: var(--text-dimmer); white-space: nowrap; transition: color 0.4s var(--ease); }

.client:hover .client-name { color: var(--text); transform: translateX(clamp(6px, 1.2vw, 16px)); }
.client:hover .client-tag { color: var(--text-dim); }

.clients-foot { color: var(--text-dimmer); margin-top: clamp(24px, 4vh, 40px); }

/* ---------- logo scroller (full-width band) ---------- */
.logo-band {
  width: 100%;
  padding-block: clamp(28px, 5vh, 56px);
}
.logo-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(22px, 3.2vw, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.logo-lane {
  display: flex;
  width: max-content;
  animation: logo-scroll 48s linear infinite;
}
.logo-marquee:hover .logo-lane { animation-play-state: paused; }

.logo-track {
  display: flex;
  align-items: center;
  gap: clamp(38px, 6vw, 88px);
  padding-right: clamp(38px, 6vw, 88px);
  margin: 0;
  list-style: none;
  flex: none;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(32px, 4vw, 48px);
  flex: none;
  /* fallback for any text-wordmark items */
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
}

/* drop-in logo image: any colour file renders as flat white, normalised to
   a consistent slot - wide wordmarks cap by width, square marks by height */
.logo-item img {
  display: block;
  height: 100%;
  width: auto;
  max-width: clamp(120px, 15vw, 185px);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.logo-item:hover img { opacity: 1; }

@keyframes logo-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- gallery (selected work) ---------- */
.gallery {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(110px, 18vh, 220px) var(--pad);
}

.gallery-head { max-width: 60ch; margin-bottom: clamp(48px, 8vh, 96px); }
.gallery-title {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.gallery-intro { max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--text-dim); }

/* two staggered columns - the right column rides lower, mnmlst-style */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.gallery-col {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 130px);
}
.gallery-col--low { margin-top: clamp(64px, 11vw, 170px); }

/* recent work (webinone per-item list layout): the module layout renders one
   .work-card per item, so the two columns come from CSS multicol here, not two
   .gallery-col containers. Natural-height cards flow independently, so there are
   no row-alignment gaps. */
.work-grid { columns: 2; column-gap: clamp(24px, 4vw, 64px); }
.work-grid .work-card { break-inside: avoid; margin: 0 0 clamp(56px, 8vw, 130px); }
@media (max-width: 820px) { .work-grid { columns: 1; } }

.work-card { position: relative; }
/* the growing card lifts above its neighbours so the scale-up never clips */
.work-card:hover,
.work-card:focus-within { z-index: 4; }
.work-link { position: absolute; inset: 0; z-index: 3; }

.work-media {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  will-change: transform; /* JS springs the frame up in scale on hover */
}
.work-media img,
.work-media video {
  width: 100%;
  height: auto; /* respect each asset's native aspect ratio (no crop) */
  display: block;
  transition: filter 0.55s var(--ease);
  will-change: transform, filter;
}

/* Black-and-white by default; the image/video resolves into full colour on
   hover. Hover-capable pointers only - touch screens have no hover, so they
   show it as-is (and skip the JS interaction in initWorkCards). */
@media (hover: hover) {
  .work-media img,
  .work-media video {
    filter: grayscale(1) contrast(1.08);
  }
  .work-card:hover .work-media img,
  .work-card:hover .work-media video,
  .work-card:focus-within .work-media img,
  .work-card:focus-within .work-media video { filter: none; }
}

/* meta sits BELOW the thumbnail but at a higher z-index, so the magnetically
   drifting image slides UNDER the titles. Lines size to their own text so the
   negative sweep highlight hugs each line. */
.work-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 14px);
  margin-top: clamp(16px, 1.8vw, 24px);
}
.work-tags { color: var(--text-dim); }

/* hover sweep: a white block wipes across each line and the text flips to a
   negative. A duplicate black-on-white copy (.work-line-b, built in JS) is
   revealed by an animating clip-path; the visible text is .work-line-a. The
   padding gives the highlight breathing room (and indents the text slightly). */
.work-line {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* The highlight sits a little proud of the text on every side - even all round,
   so it reads balanced. The matching padding keeps the negative text aligned
   with the visible text, and growing the block (not the line) means no extra
   row spacing and no indent. */
.work-line-b {
  position: absolute;
  inset: -0.18em -0.28em;
  padding: 0.18em 0.28em;
  background: var(--text);
  color: var(--black);
  clip-path: inset(0 100% 0 0); /* hidden until the sweep reveals it L→R */
  pointer-events: none;
}
.work-name {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2; /* roomy enough that the hover highlight sits evenly top/bottom */
}
.work-summary { color: var(--text-dim); font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 40ch; }

@media (max-width: 820px) {
  .gallery-grid { display: flex; flex-direction: column; gap: clamp(40px, 9vw, 64px); }
  .gallery-col { gap: clamp(40px, 9vw, 64px); }
  .gallery-col--low { margin-top: 0; }
}

/* ---------- testimonials ---------- */
.testimonials {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(110px, 18vh, 220px) var(--pad);
}

.testi-head { margin-bottom: clamp(48px, 8vh, 96px); }
.testi-title {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 56px);
}

.testi {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 34px);
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 2.6vw, 36px);
}

.testi-num { color: var(--text-dimmer); }

.testi-quote {
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.testi-quote::before { content: '\201C'; }
.testi-quote::after { content: '\201D'; }

.testi-by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}
.testi-name { font-weight: 600; color: var(--text); }
.testi-role { color: var(--text-dimmer); }

@media (max-width: 820px) {
  .testi-grid { grid-template-columns: 1fr; gap: 0; }
  .testi { padding-block: clamp(28px, 7vw, 40px) 0; }
}

/* ---------- cta ---------- */
.cta {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(110px, 16vh, 200px) var(--pad);
  overflow: clip;
}
.cta-media { position: absolute; inset: 0; z-index: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; will-change: transform; }
.cta::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.82) 70%);
}

.cta-inner { position: relative; z-index: 2; max-width: var(--maxw); }
.cta .eyebrow { color: var(--text-dim); }

.cta-title {
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: clamp(36px, 6vh, 64px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--text);
  color: var(--black);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  transition: transform 0.3s var(--ease), background 0.3s;
  will-change: transform;
}
.btn:hover { background: #fff; }
.btn-arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.cta-mail { color: var(--text-dim); transition: color 0.3s; }
.cta-mail:hover { color: var(--text); }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: clamp(64px, 10vh, 120px) var(--pad) clamp(24px, 4vh, 40px);
  max-width: var(--maxw);
  margin-inline: auto;
}

.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: clamp(48px, 8vh, 88px);
}
.foot-brand { font-size: 22px; }
.foot-tag { max-width: 36ch; color: var(--text-dim); }

.foot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: clamp(48px, 8vh, 80px);
}
.foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foot-label { color: var(--text-dimmer); margin-bottom: 6px; }
.foot-col a, .foot-col span { color: var(--text-dim); transition: color 0.3s; }
.foot-col a:hover { color: var(--text); }
.foot-clock { color: var(--text); }

.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  color: var(--text-dimmer);
}
.to-top { color: var(--text-dimmer); transition: color 0.3s; }
.to-top:hover { color: var(--text); }

@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */
.cs-hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 7vh) var(--pad) 0;
}

.cs-back {
  display: inline-block;
  color: var(--text-dim);
  margin-bottom: clamp(28px, 5vh, 56px);
  transition: color 0.3s var(--ease);
}
.cs-back:hover { color: var(--text); }

.cs-hero .eyebrow { color: var(--text-dim); }

.cs-title {
  font-size: clamp(3rem, 9.5vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin-bottom: clamp(40px, 7vh, 84px);
}

.cs-hero-media {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
/* first feature image/video shows at its natural ratio (no forced crop) */
.cs-hero-media img,
.cs-hero-media video { width: 100%; height: auto; display: block; }

/* click-to-zoom links wrapping the hero + shot images (PhotoSwipe gallery) */
.cs-zoom { display: block; cursor: zoom-in; }
.cs-hero-media .cs-zoom { display: block; width: 100%; }

/* overview + meta */
.cs-intro {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(72px, 13vh, 150px) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.cs-overview .eyebrow { color: var(--text-dim); }
.cs-lead {
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 26ch;
}

.cs-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.6vw, 30px);
}
.cs-meta-row { display: flex; flex-direction: column; gap: 7px; }
.cs-meta-label { color: var(--text-dimmer); }
.cs-meta-value { color: var(--text); letter-spacing: 0.04em; }

/* live-site link in the meta sidebar */
.cs-meta-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  width: fit-content;
  color: var(--text);
  letter-spacing: 0.04em;
}
.cs-meta-linktext {
  border-bottom: 1px solid var(--text-dimmer);
  transition: border-color 0.3s var(--ease);
}
.cs-meta-link:hover .cs-meta-linktext { border-color: var(--text); }
.cs-meta-arrow { transition: transform 0.3s var(--ease); }
.cs-meta-link:hover .cs-meta-arrow { transform: translate(2px, -2px); }

/* technologies */
.cs-tech {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(72px, 13vh, 150px);
}
.cs-tech .eyebrow { color: var(--text-dim); margin-bottom: clamp(22px, 3vh, 34px); }
.cs-tech-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.cs-chip {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel);
  transition: border-color 0.3s, background 0.3s;
}
.cs-chip:hover { border-color: var(--text-dim); background: var(--panel-2); }

/* staggered image array */
.cs-shots {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(90px, 16vh, 200px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 8vh, 120px);
}
.cs-shot {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.cs-shot img { width: 100%; height: auto; display: block; } /* full image, no crop */
.cs-shot--wide { width: 100%; }
.cs-shot--left { width: min(62%, 760px); align-self: flex-start; }
.cs-shot--right { width: min(62%, 760px); align-self: flex-end; }

@media (max-width: 760px) {
  .cs-intro { grid-template-columns: 1fr; gap: clamp(32px, 8vw, 56px); }
  .cs-lead { max-width: none; }
  .cs-shot--left,
  .cs-shot--right { width: 100%; align-self: stretch; }
}

/* ============================================================
   SUBPAGE HEADER  (folio / about / contact share this)
   ============================================================ */
.page-head {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(56px, 12vh, 130px)) var(--pad) clamp(36px, 6vh, 80px);
}
.page-head .eyebrow { color: var(--text-dim); }
.page-title {
  font-size: clamp(2.8rem, 8.5vw, 7rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.page-intro {
  margin-top: clamp(22px, 4vh, 40px);
  max-width: 50ch;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--text-dim);
}

/* the current page's nav item stays lit */
.nav-links a[aria-current="page"] { color: var(--text); }

/* ============================================================
   FOLIO PAGE
   ============================================================ */
.folio-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(110px, 18vh, 220px);
}

/* "view more" button under the home work grid */
.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(56px, 9vw, 130px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 32px;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: var(--text);
  color: var(--black);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
}
.btn-ghost:hover { background: transparent; color: var(--text); border-color: var(--text); }
.btn-ghost-arrow { transition: transform 0.3s var(--ease); }
.btn-ghost:hover .btn-ghost-arrow { transform: translateX(4px); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-lead {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(40px, 7vh, 90px) var(--pad) clamp(80px, 14vh, 170px);
}
.about-lead p {
  max-width: 24ch;
  color: var(--text);
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.03em;
}
.about-lead-dim { color: var(--text-dim); }

/* founder block: portrait + bio + pull quote */
.about-founder {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(80px, 14vh, 170px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: start;
}
.about-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.about-founder-body .eyebrow { color: var(--text-dim); }
.about-founder-name {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: clamp(22px, 3vh, 34px);
}
.about-founder-body p {
  color: var(--text-dim);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  max-width: 56ch;
  margin-bottom: 1.1em;
}
.about-quote {
  margin-top: clamp(24px, 4vh, 40px);
  max-width: 28ch;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--text);
}
.about-quote::before { content: '\201C'; }
.about-quote::after { content: '\201D'; }

/* how we work: numbered principles */
.about-how {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(80px, 14vh, 170px);
}
.about-how-head { margin-bottom: clamp(36px, 6vh, 64px); }
.about-how-title {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.principles { border-top: 1px solid var(--line); }
.principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(16px, 3vw, 64px);
  align-items: baseline;
  padding: clamp(26px, 3.2vw, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.principle-num { color: var(--text-dimmer); }
.principle-name {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.principle-desc { color: var(--text-dim); max-width: 48ch; }

/* clients band heading */
.about-clients-head {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(36px, 6vh, 56px);
}
.about-clients-head .eyebrow { color: var(--text-dim); }
.about-clients-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

@media (max-width: 760px) {
  .about-founder { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 44px); }
  .about-portrait { width: 100%; max-width: 360px; }
  .principle { grid-template-columns: 1fr; gap: 6px; }
  .principle-num { margin-bottom: 6px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-body {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(90px, 16vh, 200px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: clamp(20px, 2.6vh, 30px); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field-label { color: var(--text-dim); }
.field-label .opt { text-transform: none; color: var(--text-dimmer); margin-left: 6px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dimmer); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text-dim);
  background: var(--panel-2);
}
.field textarea { resize: vertical; min-height: 150px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2386868b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.contact-form .btn { align-self: flex-start; margin-top: clamp(8px, 1.5vh, 16px); }
.contact-form-note { color: var(--text-dimmer); margin-top: 6px; }
.contact-form-note a { color: var(--text-dim); transition: color 0.3s; }
.contact-form-note a:hover { color: var(--text); }

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.6vh, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vh, 36px);
}
.contact-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.contact-label { color: var(--text-dimmer); }
.contact-block a,
.contact-block span { color: var(--text-dim); transition: color 0.3s; }
.contact-block a:hover { color: var(--text); }
.contact-socials { flex-direction: row; flex-wrap: wrap; gap: 18px; }

@media (max-width: 820px) {
  .contact-body { grid-template-columns: 1fr; gap: clamp(40px, 9vw, 64px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-track i { animation: none; }
  .js [data-fade] { opacity: 1; transform: none; }
  .statement-copy .word { color: var(--text); }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}