/* Self-hosted fonts (Inter, IBM Plex Mono) — no external Google request */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ---------- Tokens ---------- */
:root {
  --bg: #0f0e0e;
  --fg: #f7f7f7;
  --pink: #ffc7a8;
  --dark: #0f0e0e;
  --radius: 24px;
  /* like the original: content spans nearly full width (max 1800px),
     small clear gutter on the sides; centres only on very wide screens */
  --maxw: 1800px;
  --pad: max(44px, calc((100vw - var(--maxw)) / 2));
  /* fixed gutter for the reading column (blog article); must NOT grow with
     --pad, otherwise wide screens collapse the 780px column to one word/line */
  --bl-gut: 44px;
}
/* mobile: one shared side gutter for every section, matching the project card */
@media (max-width: 760px) { :root { --pad: 20px; } }

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

html { -webkit-text-size-adjust: 100%; background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* custom scrollbar thumb — colour set by JS per section */
.scrollbar {
  position: fixed;
  top: 0;
  right: 7px;
  width: 4px;
  height: 60px;
  z-index: 200;
  border-radius: 100px;
  background-color: #f7f7f7;
  transition: background-color .6s ease;
  pointer-events: none;
  will-change: transform;
}

body {
  background: transparent;
  color: var(--fg);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* fixed layer; colour switches at section thresholds, animated over time */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transition: background-color .7s ease;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.12px;
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
/* auto-hide: slides up when scrolling down, back when scrolling up */
.nav--hidden { transform: translateY(-140%); }
.nav__group { display: flex; gap: 8px; }
.nav__logo {
  /* absolutely centered on screen so it stays put in every language */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 15vw, 210px);
  height: clamp(16px, 1.4vw, 20px);
  background-color: var(--nav-fg);
  -webkit-mask: url(../images/logo.svg) center / contain no-repeat;
  mask: url(../images/logo.svg) center / contain no-repeat;
  transition: background-color .7s ease; /* same timing as the background */
}
/* nav colours are driven by JS per section, in sync with the background:
   --nav-fg = contrast colour (white on dark, black on light/orange)
   --nav-bg = the actual section background colour (used as hover text) */
.nav { --nav-fg: #fff; --nav-bg: #0f0e0e; }
/* subtle gradient behind the header, tinted with the current section colour */
.nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 108%;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--nav-bg) 60%, transparent),
    transparent
  );
  z-index: -1;
  pointer-events: none;
}
.nav .pill {
  color: var(--nav-fg);
  border-color: var(--nav-fg);
  transition: color .7s ease, background .3s ease, border-color .7s ease;
}
.nav .pill:hover {
  background: var(--nav-fg);
  border-color: var(--nav-fg);
  color: var(--nav-bg);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.pill:hover { background: #fff; color: var(--dark); }
.pill--lang { min-width: 46px; }

/* language dropdown */
.lang { position: relative; }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang.is-open .pill--lang[aria-expanded] { background: var(--nav-fg); color: var(--nav-bg); }

/* ---------- Mobile menu (hamburger) ---------- */
/* injected by JS; hidden on desktop, shown under the mobile breakpoint */
.nav__menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; }
.nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 18px; height: 12px; }
.nav__burger span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
/* hamburger turns into an X while the menu is open */
body.menu-open .nav__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .nav__burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.navmenu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 14, 14, .98);
  display: flex; flex-direction: column; align-items: center;
  padding: 96px var(--pad) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
/* centred group (links + language pills); contact block sits at the bottom */
.navmenu__main {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1.4vh, 12px);
}
body.menu-open .navmenu { opacity: 1; visibility: visible; }
.navmenu__link {
  color: #f7f7f7; font-weight: 400; letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: clamp(34px, 10vw, 52px); line-height: 1.1;
  opacity: .55; transition: opacity .3s ease;
}
.navmenu__link:hover, .navmenu__link:active { opacity: 1; }
/* language switcher when moved into the menu */
.navmenu > .lang { margin-top: clamp(20px, 4vh, 40px); }
/* SK / EN pills side by side inside the mobile menu */
.navmenu__lang { display: flex; gap: 10px; margin-top: clamp(24px, 5vh, 48px); }
.navmenu__lang .pill {
  color: #f7f7f7; background: transparent;
  border: 1px solid rgba(247, 247, 247, .3);
  cursor: pointer;
}
.navmenu__lang .pill.is-active {
  background: #f7f7f7; color: #0f0e0e; border-color: #f7f7f7;
}
/* contact info at the bottom of the mobile menu */
.navmenu__contact {
  margin-top: auto;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px;
  padding-top: clamp(28px, 5vh, 48px);
}
.navmenu__contact-label {
  color: rgba(247, 247, 247, .5);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.navmenu__contact-mail {
  color: #f7f7f7; font-size: clamp(24px, 7vw, 32px);
  letter-spacing: -.03em; line-height: 1.1;
  transition: opacity .3s ease;
}
.navmenu__contact-tel {
  color: #f7f7f7; font-size: clamp(24px, 7vw, 32px);
  letter-spacing: -.03em; line-height: 1.1;
  transition: opacity .3s ease;
}
.navmenu__contact-mail:hover, .navmenu__contact-tel:hover { opacity: .6; }
body.menu-open { overflow: hidden; }

@media (max-width: 760px) {
  /* left = logo, right = hamburger; links + language live in the menu */
  .nav__group--left { display: none; }
  .nav__group--right { display: none; }
  .nav__menu-btn { display: inline-flex; }
  /* logo on the left instead of centred */
  .nav__logo {
    position: static; transform: none; left: auto; top: auto;
    width: clamp(140px, 44vw, 180px); height: 18px;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* soft, long blend to the dark section (starts higher, very gradual) */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0) 18%,
    rgba(15, 14, 14, 0) 50%,
    rgba(15, 14, 14, 0.18) 68%,
    rgba(15, 14, 14, 0.45) 82%,
    rgba(15, 14, 14, 0.8) 93%,
    rgba(15, 14, 14, 1) 100%
  );
}
.hero__content {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(32px, 6vh, 72px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 6vw, 90px);
}
.hero__intro { max-width: 680px; }
.hero__tag { margin-bottom: 18px; opacity: .85; }
.hero__title {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.hero__lead {
  max-width: 540px;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(247, 247, 247, 0.82);
}
/* Showreel button */
.showreel {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  border: 1px solid rgba(247, 247, 247, 0.5);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.showreel:hover { background: #fff; color: var(--dark); }
.showreel:hover .showreel__icon { background: var(--dark); color: #fff; }
.showreel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--dark); /* triangle colour (currentColor) */
  transition: background .3s ease, color .3s ease;
}
.showreel__icon svg {
  width: 11px;
  height: 11px;
  margin-left: 1px; /* optical centring */
}

/* Showreel hover preview (follows the cursor) */
.showreel-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(190px, 19vw, 280px);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.showreel-preview.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.showreel-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Showreel fullscreen player */
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 7, 7, 0.94);
  padding: clamp(16px, 3.5vw, 60px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal video {
  width: min(100%, 1500px);
  max-height: 90vh;
  border-radius: 12px;
  outline: none;
  transform: scale(0.9);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.modal.is-open video { transform: scale(1); opacity: 1; }
.modal__close {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 36px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.modal__close:hover { background: #fff; color: #000; }

/* ---------- Portfolio (sticky stacking cards) ---------- */
.portfolio {
  padding: var(--pad);
}
.project {
  position: sticky;
  top: clamp(24px, 6vh, 64px);
  /* cap the card width and centre it (cards are narrower than the nav) */
  max-width: 1320px;
  margin: 0 auto clamp(48px, 12vh, 130px);
  background: var(--panel);
  color: var(--dark);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(18px, 1.8vw, 28px);
  height: min(880px, 86vh);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25);
  /* JS scales each card down as the next one stacks over it (deck effect) */
  transform-origin: center top;
  will-change: transform;
}
.project:last-child { margin-bottom: 0; }
.project__info {
  padding: clamp(10px, 1.4vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.tags { display: flex; gap: 8px; }
.pill--tag { color: var(--dark); border-color: rgba(15,14,14,.4); cursor: default; }
.pill--tag:hover { background: transparent; color: var(--dark); }
/* "in preparation" status pill — not clickable */
.pill--soon { opacity: .72; cursor: default; }
/* <picture> wrapper fills the card media (used to swap a mobile-only image) */
.project__media picture, .pf-card__media picture { display: block; width: 100%; height: 100%; }
.pill--dark {
  align-self: flex-start;
  color: #fff;
  background: var(--dark);
  border-color: var(--dark);
}
.pill--dark:hover { background: transparent; color: var(--dark); }

/* See project button: text in the card's own colour, arrow diagonal by
   default and straightening on hover, button grows a little to the right */
.pill--project {
  color: var(--panel);
  padding-right: 18px;
  transition: background .3s ease, color .3s ease,
              padding-right .4s cubic-bezier(.16, 1, .3, 1);
}
.pill__arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}
.pill__arrow svg {
  width: 15px;
  height: 15px;
  display: block;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.pill--project:hover {
  background: var(--dark);
  color: var(--panel);
  padding-right: 22px; /* minimal growth to the right */
}
/* hover = exactly the same arrow, just straightened */
.pill--project:hover .pill__arrow svg { transform: rotate(0deg); }
.project__bottom { display: flex; flex-direction: column; gap: 28px; }
.project__title {
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.07em;
}
.project__title .muted { color: rgba(15, 14, 14, 0.4); }
.project__media {
  overflow: hidden;
  border-radius: 14px;
}
.project__media img,
.project__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--z, 1)) translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.project:hover .project__media img,
.project:hover .project__media video { --z: 1.08; }

/* ---------- Shared section spacing ---------- */
.about, .services, .contact {
  padding: clamp(90px, 14vh, 200px) var(--pad);
}

.label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.label--right { justify-content: flex-end; }
.about .label { justify-content: center; }
.label__arrow { display: inline-block; }

/* ---------- About ---------- */
.about {
  text-align: center;
  position: relative;
  min-height: 122vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;      /* text sits in the upper area, closer to the cards */
  padding: clamp(150px, 22vh, 320px) var(--pad) clamp(80px, 12vh, 180px);
}
.about .label, .about__title, .about__body { position: relative; z-index: 2; }
.about__title {
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  max-width: 1100px;
  margin: 0 auto 40px;
}
.about__arrow { display: inline-block; }
.about__body {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: rgba(247,247,247,.72);
}
/* scattered floating photos — kept at the edges, clear of the centred text */
.about__photo {
  position: absolute;
  z-index: 1;
  width: clamp(120px, 12vw, 200px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  will-change: transform;
  transform: translateY(var(--py, 0px)); /* --py set by parallax JS */
}
/* pulled in from the edges, varied sizes. Top photos start high and sink on scroll */
.about__photo--1 { left: 5%;  top: 6%;     width: clamp(140px, 14vw, 230px); }
.about__photo--2 { left: 0%;  top: 44%;    width: clamp(120px, 12vw, 190px); }
.about__photo--4 { left: 4%;  bottom: 4%;  width: clamp(120px, 11.5vw, 185px); }
.about__photo--3 { right: 4%; top: 12%;    width: clamp(150px, 15vw, 250px); }
.about__photo--6 { right: 3%; top: 50%;    width: clamp(115px, 11vw, 175px); }
/* centre photo — bigger, sits ABOVE the text (its own layer) as it rises over it */
.about__photo--5 {
  left: 50%; bottom: 5%;
  width: clamp(240px, 26vw, 430px);
  aspect-ratio: 3 / 2; /* landscape centre photo */
  z-index: 3; /* above the text (which is z-index 2) */
  transform: translateX(-50%) translateY(var(--py, 0px));
}

@media (max-width: 900px) {
  /* keep the section tall so the floating photos have room to drift and
     scatter around the centred text (like the reference) */
  .about {
    min-height: 118vh;
    justify-content: center;
    padding: clamp(110px, 18vh, 200px) 8px;
  }
  .about__title { font-size: clamp(30px, 8.4vw, 50px); }
  .about__photo { width: clamp(92px, 26vw, 132px); }
  /* all photos visible, scattered in the top and bottom bands */
  .about__photo--5 {
    left: 50%; top: 3%; bottom: auto;
    width: clamp(180px, 58vw, 260px);
    aspect-ratio: 3 / 2;
    transform: translateX(-50%) translateY(var(--py, 0px));
    z-index: 1;
  }
  .about__photo--1 { left: 3%;  top: 17%; bottom: auto; }
  .about__photo--3 { right: 3%; top: 19%; bottom: auto; width: clamp(104px, 30vw, 150px); }
  .about__photo--2 { left: 1%;  top: auto; bottom: 21%; }
  .about__photo--6 { right: 2%; top: auto; bottom: 8%; width: clamp(116px, 34vw, 160px); }
  .about__photo--4 { left: 3%;  top: auto; bottom: 3%; }
}

/* ---------- Services / What we do (light section) ---------- */
.services {
  background: transparent; /* colour comes from .bg-layer */
  color: var(--dark);
}
.services__head {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: clamp(300px, 40vw, 560px);
}
.services__list { text-align: right; }
.services__list ul li {
  font-weight: 400;
  font-size: clamp(48px, 12.5vw, 180px);
  line-height: 1;
  letter-spacing: -0.08em;
  color: rgba(15, 14, 14, 0.2);
  transition: color .4s ease;
}
.services__list ul li.active { color: var(--dark); }
.services__float {
  position: absolute;
  left: 0;
  top: 38%;
  width: clamp(150px, 16vw, 235px);
  aspect-ratio: 3 / 4;
  will-change: transform;
}
.services__float img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0;
  transform: scale(1.45) translate(var(--tx, 0px), var(--ty, 0px));
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.services__float img.is-active { opacity: 1; }
.clients {
  text-align: center;
  margin-top: clamp(90px, 20vh, 260px);
}
.clients__label { margin-bottom: 24px; opacity: .6; }
.clients__list {
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

/* ---------- Partner logos (infinite marquee) ---------- */
.logos {
  overflow: hidden;
  margin-top: clamp(60px, 12vh, 180px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos__track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.5vw, 64px);
  width: max-content;
  animation: logos-scroll 34s linear infinite;
}
/* each logo is a square SVG recoloured to the dark tone via CSS mask */
.logos__item {
  flex: 0 0 auto;
  width: clamp(88px, 10vw, 132px);
  height: clamp(88px, 10vw, 132px);
  background-color: var(--dark);
  -webkit-mask: var(--logo) center / 130% no-repeat;
  mask: var(--logo) center / 130% no-repeat;
  opacity: 0.55;
  transition: opacity .3s ease;
}
/* very wide logo (HG Commerce): wider box + fit fully so it isn't cropped */
.logos__item--wide {
  width: clamp(160px, 17vw, 210px);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.logos__item:hover { opacity: 1; }
@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos__track { animation: none; } }

/* ---------- Testimonials ---------- */
.tst {
  padding: clamp(60px, 10vh, 140px) 0;
  color: var(--dark);
  overflow: hidden;
}
/* phones: tighten vertical spacing around the services section */
@media (max-width: 760px) {
  /* pull "what we do" closer to the About section above it */
  .services { padding-top: clamp(20px, 3.5vh, 32px); padding-bottom: clamp(30px, 6vh, 56px); }
  /* pull the testimonials closer to the partner logos above */
  .tst { padding-top: clamp(30px, 6vh, 56px); }
}
.tst__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  margin-bottom: clamp(24px, 4vh, 48px);
}
.tst__label { margin-bottom: 0; }
.tst__nav { display: flex; gap: 10px; }
.tst__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(15, 14, 14, 0.25);
  background: transparent;
  color: var(--dark);
  font-size: 17px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.tst__arrow:hover { background: var(--dark); color: #fff; }
.tst__arrow:disabled { opacity: .3; cursor: default; }
.tst__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  padding: 0 var(--pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tst__track::-webkit-scrollbar { display: none; }
.tst__card {
  flex: 0 0 clamp(300px, 46vw, 720px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 46vh, 520px);
  padding: clamp(28px, 3vw, 52px);
  border-radius: 20px;
  background: var(--c);
  color: var(--t);
}
.tst__mark {
  position: absolute;
  top: clamp(20px, 2.4vw, 40px);
  right: clamp(24px, 3vw, 48px);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(60px, 7vw, 110px);
  line-height: 0.6;
  opacity: 0.9;
}
.tst__quote {
  margin-top: clamp(56px, 8vh, 110px);
  max-width: 30ch;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.tst__author {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  letter-spacing: -0.02em;
  opacity: .85;
}
.tst__author strong { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq {
  color: var(--dark);
  padding: clamp(80px, 12vh, 180px) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.faq__tag { opacity: .6; margin-bottom: 24px; }
.faq__title {
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: clamp(32px, 5vh, 60px);
}
.faq__help { max-width: 360px; }
.faq__help-label { margin-bottom: 14px; opacity: .8; }
.faq__help-text {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  opacity: .7;
  margin-bottom: 28px;
}
.faq__item { border-top: 1px solid rgba(15, 14, 14, 0.14); }
.faq__item:last-child { border-bottom: 1px solid rgba(15, 14, 14, 0.14); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vh, 32px) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--dark);
  font-family: "Inter", sans-serif;
  font-size: clamp(18px, 1.6vw, 26px);
  letter-spacing: -0.02em;
}
.faq__icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--dark);
  transition: transform .3s ease, opacity .3s ease;
}
.faq__icon::before { left: 0; top: 9px; width: 20px; height: 2px; }
.faq__icon::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: clamp(20px, 3vh, 32px);
  max-width: 620px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  opacity: .72;
}
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact {
  background: transparent; /* colour comes from .bg-layer */
  color: var(--dark);
}
.contact__title {
  font-weight: 400;
  font-size: clamp(48px, 12.5vw, 180px);
  line-height: 1;
  letter-spacing: -0.08em;
  margin-bottom: clamp(48px, 8vh, 110px);
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.contact__col { display: flex; flex-direction: column; }
.contact__col .mono { margin-bottom: 24px; }
.contact__col p { font-size: 14px; letter-spacing: -0.04em; line-height: 1.5; margin-bottom: 16px; }
.contact__col a { font-size: 14px; letter-spacing: -0.04em; line-height: 1.6; width: fit-content; }
.contact__col a:hover { opacity: .6; }

/* ---------- Footer ---------- */
.footer {
  background: transparent; /* colour comes from .bg-layer */
  color: var(--dark);
  padding: 0 var(--pad) clamp(24px, 4vh, 48px);
}
.footer__brand {
  position: relative;
  margin: clamp(40px, 6vh, 80px) auto clamp(24px, 4vh, 48px);
}
.footer__logo {
  width: 100%;
  aspect-ratio: 1468 / 130;
  background-color: var(--dark);
  /* wordmark without the final "o" — its place becomes the back-to-top button */
  -webkit-mask: url(../images/logo-footer.svg) center / contain no-repeat;
  mask: url(../images/logo-footer.svg) center / contain no-repeat;
  display: block;
}
/* circular outline button that replaces the last "o"; scrolls to the top */
.footer__totop {
  position: absolute;
  right: 0;
  top: 28.5%;
  height: 70.8%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: max(2px, 0.16vw) solid var(--dark);
  border-radius: 50%;
  background: transparent;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.footer__totop:hover {
  background: var(--dark);
  color: var(--pink);
  transform: translateY(-3px);
}
.footer__totop svg {
  width: 42%;
  height: 42%;
  display: block;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(15,14,14,.25);
  padding-top: 20px;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__social { display: flex; gap: 24px; }
.footer__social a:hover { opacity: .6; }

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* project detail pages: text reveals with a blur → focus fade */
.pd-body [data-reveal] {
  filter: blur(12px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
              transform .9s cubic-bezier(.16, 1, .3, 1),
              filter .9s cubic-bezier(.16, 1, .3, 1);
}
.pd-body [data-reveal].is-visible { filter: blur(0); }
/* blog cards/featured: fade only, no vertical shift (keeps gaps constant) */
.bl-featured[data-reveal], .bl-card[data-reveal] { transform: none; }

/* homepage: header appears only after the hero intro animation finishes */
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
body:not(.pd-body) .nav { animation: nav-fade .6s ease 1.95s both; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .project {
    /* cards pin and stack on scroll (deck effect); auto height so the image
       below the info stays a clean 1:1 square. minmax(0,1fr) avoids overflow */
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: clamp(66px, 9vh, 88px);
    height: auto;
    margin: 0 auto clamp(40px, 9vh, 96px);
    padding: clamp(14px, 4vw, 20px);
    gap: 16px;
    box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.22);
  }
  /* info first, then a square image */
  .project__info { padding: 6px 6px 0; gap: 16px; justify-content: flex-start; }
  .project__media { order: 0; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; height: auto; }
  .project__media img,
  .project__media video { min-width: 0; }
  .tags { flex-wrap: wrap; }
  .project__bottom { gap: 18px; }
  .project__title { font-size: clamp(28px, 6.8vw, 42px); line-height: 1.02; }
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__content { flex-direction: column; align-items: flex-start; }
  .services__float { top: auto; bottom: 0; left: clamp(20px, 7vw, 40px); width: clamp(76px, 22vw, 100px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ===================================================================
   Project detail page (podstránka projektu) — dark theme
   =================================================================== */
.pd-body .bg-layer { background: var(--bg); } /* dark page */
.pd { color: var(--fg); padding: 0 var(--pad); }

/* Hero image */
.pd-hero { padding-top: clamp(66px, 6vh, 82px); }
.pd-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(12px, 1.4vw, 20px);
  display: block;
}

/* Title + subtitle */
.pd-head {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(36px, 6vh, 80px) 0 clamp(24px, 4vh, 48px);
}
/* back button uses the site's pill style (.pill) — this only adds spacing */
.pd-back {
  gap: 8px;
  margin-bottom: clamp(28px, 5vh, 60px);
}
.pd-back svg { width: 13px; height: 13px; }
.pd-title {
  font-weight: 400; font-size: 120px;
  line-height: 0.96; letter-spacing: -0.03em;
}
.pd-subtitle {
  font-weight: 400; font-size: 120px;
  line-height: 1.0; letter-spacing: -0.02em;
  color: var(--accent, rgba(247, 247, 247, .5)); margin-top: 4px;
}

/* Meta (left) + intro (right half) two columns */
.pd-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 90px);
  padding: clamp(40px, 9vh, 150px) 0 clamp(44px, 8vh, 120px);
  align-items: start;
}
.pd-meta { display: flex; flex-direction: column; gap: 7px; }
.pd-meta__col {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline;
}
.pd-meta__label {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: rgba(247, 247, 247, .45);
}
.pd-meta__value { font-size: clamp(14px, 1.3vw, 17px); font-weight: 500; }
.pd-intro {
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.5; color: #f7f7f7;
}

/* Image gallery — 2-column grid, some full-width */
.pd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
.pd-gallery img,
.pd-gallery video {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 1 / 1; /* square */
  border-radius: clamp(12px, 1.4vw, 20px);
  display: block;
}
.pd-gallery img.pd-wide,
.pd-gallery video.pd-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* rectangle */
/* 4:3 full-width block */
.pd-gallery img.pd-43,
.pd-gallery video.pd-43 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* portrait poster shown fully, centred, at a limited width */
.pd-gallery img.pd-portrait {
  grid-column: 1 / -1; aspect-ratio: 3 / 4;
  width: min(460px, 100%); justify-self: center;
}

/* Next project — full-bleed scrolling marquee */
.pd-next {
  display: block; text-decoration: none; color: var(--fg);
  margin: clamp(90px, 16vh, 220px) calc(var(--pad) * -1) 0; /* edge to edge, bigger gap above */
  overflow: hidden;
}
.pd-next__track {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 64px);
  width: max-content;
  padding: clamp(56px, 9vh, 120px) 0;
  will-change: transform;
}
.pd-next__name {
  font-weight: 400; font-size: 120px;
  line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
}
.pd-next__thumb {
  height: clamp(120px, 15vw, 180px); aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 16px; flex: 0 0 auto;
}
@keyframes pd-next-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pd-next__track { animation: none; } }
/* menší "Ďalší" marquee na mobile */
@media (max-width: 680px) {
  .pd-next__name { font-size: 52px; }
  .pd-next__track { gap: 20px; padding: clamp(40px, 6vh, 64px) 0; }
  .pd-next__thumb { height: 84px; border-radius: 12px; }
}

/* cursor-following bubble with the next project's name (colour = its card) */
.pd-next-bubble {
  position: fixed; left: 0; top: 0; z-index: 350;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 100px;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px;
  color: #0f0e0e; white-space: nowrap; pointer-events: none;
  transform-origin: top left;
  transform: translate(9px, 9px) scale(0.6);
  opacity: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pd-next-bubble.is-visible { opacity: 1; transform: translate(9px, 9px) scale(1); }

@media (max-width: 800px) {
  .pd-info { grid-template-columns: 1fr; gap: 28px; }
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-gallery img { aspect-ratio: 1 / 1; grid-column: auto; }
  .pd-gallery img.pd-wide { aspect-ratio: 16 / 9; grid-column: auto; }
  .pd-gallery img.pd-43 { aspect-ratio: 4 / 3; grid-column: auto; }
  .pd-title, .pd-subtitle { font-size: 15vw; } /* scale down so it never overflows */
}

/* Footer on the dark project page: flip to light ink */
.pd-body .footer { color: var(--fg); }
/* on the project-detail pages the .pd wrapper already adds var(--pad),
   so drop the footer's own side padding to avoid a double indent.
   (The About page has no such wrapper, so it keeps the default padding.) */
.pd .footer { padding-left: 0; padding-right: 0; }
.pd-body .footer__logo { background-color: var(--fg); }
.pd-body .footer__bottom { border-top-color: rgba(247, 247, 247, .2); }
.pd-body .footer__totop { border-color: var(--fg); color: var(--fg); }
.pd-body .footer__totop:hover { background: var(--fg); color: var(--bg); }

/* ===================================================================
   Page transition — panel wipes bottom → top on every internal navigation
   =================================================================== */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #0f0e0e;
  transform: translateY(0);       /* covers the page on load (no flash) */
  pointer-events: none;
  will-change: transform;
  animation: pt-reveal .7s cubic-bezier(.76, 0, .24, 1) forwards; /* then reveals upward */
}
@keyframes pt-reveal {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition { animation: none; transform: translateY(-100%); }
}

/* ===================================================================
   Homepage hero intro — image rises from below, tilted, then fills the
   screen and straightens (plays on every homepage load / navigation)
   =================================================================== */
@keyframes hero-intro {
  /* phase 1: small, tilted, softly rounded, rises from the bottom to the centre */
  0%   { transform: translateY(62%) scale(0.32) rotate(-7deg); border-radius: 60px; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  48%  { transform: translateY(0)   scale(0.32) rotate(-7deg); border-radius: 60px; animation-timing-function: cubic-bezier(.7, 0, .28, 1); }
  /* phase 2: then it grows to full screen, straightens and the corners sharpen */
  100% { transform: translateY(0)   scale(1)    rotate(0deg); border-radius: 0; }
}
.hero__img {
  transform-origin: center center;
  animation: hero-intro 1.8s .15s both;
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__overlay { animation: hero-fade-in .7s ease 1.5s both; }
@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__content { animation: hero-content-in .9s cubic-bezier(.16, 1, .3, 1) 1.6s both; }

@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero__overlay, .hero__content { animation: none; }
}

/* ===================================================================
   About page (O nás) — dark theme (uses .pd-body for nav/footer/bg)
   =================================================================== */
.ab { color: var(--fg); }
.ab-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: rgba(247, 247, 247, .55);
}
.ab-h2 {
  font-weight: 400; font-size: 64px;
  line-height: 1.0; letter-spacing: -0.03em; margin-top: 14px;
}

/* Hero */
.ab-hero { position: relative; height: 94vh; min-height: 620px; overflow: hidden; }
.ab-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 32%, rgba(15,14,14,.55) 72%, rgba(15,14,14,1) 100%);
}
.ab-hero__content { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(40px, 7vh, 96px); }
.ab-hero__title {
  font-weight: 400; font-size: 120px;
  line-height: 1.0; letter-spacing: -0.03em; margin-top: 18px; max-width: 16ch;
}
.ab-hero__lead {
  max-width: 680px; margin-top: 22px;
  font-size: 28px; line-height: 1.4; color: #f7f7f7;
}

/* generic section */
.ab-section { padding: clamp(70px, 12vh, 170px) var(--pad); }

/* Numbers */
.ab-numbers { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4vw, 64px) clamp(28px, 4vw, 60px); }
.ab-stat__num { font-weight: 400; font-size: 120px; line-height: 1.0; letter-spacing: -0.04em; }
.ab-stat__tag {
  display: inline-block; margin-top: 14px;
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px; line-height: 14px;
  text-transform: uppercase; letter-spacing: .02em;
  color: #f7f7f7;
  border: 1px solid rgba(247, 247, 247, .35); border-radius: 100px; padding: 5px 12px;
}
.ab-stat__desc { margin-top: 16px; max-width: 30ch; font-size: 18px; line-height: 22px; color: #f7f7f7; }

/* Quote + values */
.ab-quote {
  display: grid; grid-template-columns: 1fr 1fr;
  aspect-ratio: 2.6 / 1;
  border-radius: 20px; overflow: hidden;
}
.ab-quote__text {
  background: #1b1a1a; padding: clamp(34px, 4.5vw, 72px);
  display: grid; grid-template-rows: 1fr auto; gap: 24px;
}
.ab-quote__q {
  align-self: center;
  font-size: 36px; line-height: 43px; max-width: 18ch;
  transition: opacity .35s ease;
}
.ab-quote__foot { display: flex; flex-direction: column; gap: 16px; }
.ab-quote__author { transition: opacity .35s ease; }
.ab-quote__author strong { display: block; font-weight: 400; font-size: 18px; line-height: 22px; color: #f7f7f7; }
.ab-quote__author span { font-size: 18px; line-height: 22px; color: rgba(247, 247, 247, .5); }
.ab-quote__dots { display: flex; gap: 8px; }
.ab-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: none; background: rgba(247, 247, 247, .3); cursor: pointer;
  transition: background .3s ease;
}
.ab-dot.is-active { background: #f7f7f7; }
.ab-quote__img { min-height: 0; }
.ab-quote__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.ab-values { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 14px; }
.ab-value {
  background: #1b1a1a; border-radius: 16px; aspect-ratio: 16 / 11;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ab-value { padding: 6px; }
.ab-value img { max-height: 100%; max-width: 100%; filter: brightness(0) invert(1); opacity: .85; }

/* Key people */
.ab-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.ab-person { position: relative; border-radius: 16px; overflow: hidden; }
.ab-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ab-person::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,0) 62%);
}
.ab-person__info { position: absolute; left: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 28px); }
.ab-person__name { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: #fff; line-height: 1.15; }
.ab-person__role { margin-top: 2px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.ab-person__socials { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.ab-person__socials a {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: #fff; opacity: .85; transition: opacity .2s ease;
}
.ab-person__socials a:hover { opacity: 1; }

@media (max-width: 860px) {
  .ab-hero__title { font-size: 15vw; }
  .ab-hero__lead { font-size: 20px; }
  .ab-h2 { font-size: 40px; }
  .ab-stat__num { font-size: 72px; }
  .ab-stat__desc { font-size: 16px; line-height: 1.4; }
  .ab-numbers { grid-template-columns: 1fr; gap: 40px; }
  .ab-quote { grid-template-columns: 1fr; aspect-ratio: auto; }
  /* square photo + fixed-height text box so switching reviews never resizes it */
  .ab-quote__img { aspect-ratio: 1 / 1; min-height: 0; order: -1; }
  .ab-quote__text {
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    min-height: 340px;
  }
  .ab-quote__q { align-self: auto; font-size: 22px; line-height: 1.4; max-width: none; }
  .ab-values { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ab-value { aspect-ratio: 4 / 3; border-radius: 18px; }
  .ab-people-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* About page — claim statement (styled like the homepage About section:
   dark page, big centred light text; photos can be added later) */
.ab-claim {
  color: var(--fg);
  text-align: center;
  padding: clamp(100px, 20vh, 250px) var(--pad);
}
.ab-claim__text {
  margin: 0 auto;
  max-width: 15ch;
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 100px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.ab-claim__hl {
  background: var(--fg);
  color: var(--dark);
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* homepage: lock scroll while the hero intro plays (loading-like state) */
html.is-hero-loading, html.is-hero-loading body { overflow: hidden !important; touch-action: none; }

/* About page — centred title with floating SVGs drifting on scroll */
.ab-float {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vh, 140px) var(--pad);
}
.ab-float__title {
  position: relative;
  z-index: 2;
  text-align: center;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 150px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.ab-float__item {
  position: absolute;
  z-index: 1;
  width: clamp(150px, 19vw, 300px);
  opacity: .95;
  will-change: transform;
}
.ab-float__item--1 { left: 3%;   top: 25%; }
.ab-float__item--2 { right: 4%;  top: 21%; }
.ab-float__item--3 { left: 6%;   bottom: 16%; }
.ab-float__item--4 { right: 5%;  bottom: 12%; }
.ab-float__item--5 { left: 39%;  top: 14%; }
@media (max-width: 860px) {
  .ab-float__item { width: clamp(120px, 34vw, 200px); }
}

/* Contact page — form styled to the site */
.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: start;
}
.ct-aside__title { font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 14px; }
.ct-contact { display: flex; flex-direction: column; gap: 6px; margin-top: clamp(24px, 4vh, 40px); }
.ct-contact a { font-size: clamp(15px, 1.4vw, 18px); color: rgba(247, 247, 247, .7); transition: color .3s ease; }
.ct-contact a:hover { color: var(--fg); }

.ct-form { display: flex; flex-direction: column; gap: 14px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field label {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .02em; color: rgba(247, 247, 247, .5);
}
.ct-field input, .ct-field textarea, .ct-field select {
  background-color: transparent;
  border: 1px solid rgba(247, 247, 247, .3);
  border-radius: 100px;
  color: var(--fg); font-family: inherit; font-size: clamp(15px, 1.5vw, 18px);
  padding: 15px 24px; outline: none; transition: border-color .3s ease;
}
.ct-field input::placeholder, .ct-field textarea::placeholder { color: rgba(247, 247, 247, .35); }
.ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus { border-color: var(--fg); }
.ct-field textarea { border-radius: 22px; resize: vertical; min-height: 150px; line-height: 1.5; }
/* custom dropdown (opens below the pill) */
.ct-dd { position: relative; }
.ct-dd__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background-color: transparent; border: 1px solid rgba(247, 247, 247, .3); border-radius: 100px;
  color: var(--fg); font-family: inherit; font-size: clamp(15px, 1.5vw, 18px);
  padding: 15px 24px; cursor: pointer; text-align: left; transition: border-color .3s ease;
}
.ct-dd.is-open .ct-dd__toggle, .ct-dd__toggle:focus-visible { border-color: var(--fg); }
.ct-dd__value[data-empty="true"] { color: rgba(247, 247, 247, .35); }
.ct-dd__arrow { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .3s ease; }
.ct-dd.is-open .ct-dd__arrow { transform: rotate(180deg); }
.ct-dd__menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: #1b1a1a; border: 1px solid rgba(247, 247, 247, .15); border-radius: 20px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility .25s;
  max-height: 320px; overflow-y: auto;
}
.ct-dd.is-open .ct-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ct-dd__opt {
  padding: 11px 16px; border-radius: 100px; cursor: pointer;
  font-size: clamp(15px, 1.5vw, 17px); transition: background .2s ease;
}
.ct-dd__opt:hover, .ct-dd__opt.is-active { background: rgba(247, 247, 247, .09); }
.ct-submit {
  align-self: flex-start; margin-top: 6px; gap: 4px;
  background: var(--fg); color: var(--bg); border-color: var(--fg);
  padding-right: 16px;
  transition: background .3s ease, color .3s ease, padding-right .4s cubic-bezier(.16, 1, .3, 1);
}
.ct-submit:hover { background: var(--fg); color: var(--bg); padding-right: 21px; }
.ct-submit:hover .pill__arrow svg { transform: rotate(0deg); }
.ct-note { font-size: 14px; color: rgba(247, 247, 247, .55); }
@media (max-width: 860px) {
  .ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct-row { grid-template-columns: 1fr; }
}

/* Contact — confirmation modal (glass, centred, close with X) */
.ct-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.ct-modal.is-open { opacity: 1; visibility: visible; }
.ct-modal__box {
  position: relative; width: 100%; max-width: 460px;
  padding: clamp(34px, 5vw, 58px);
  border-radius: 26px;
  border: 1px solid rgba(247, 247, 247, .25);
  background: rgba(247, 247, 247, .07);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  text-align: center;
  transform: translateY(18px) scale(.96);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ct-modal.is-open .ct-modal__box { transform: translateY(0) scale(1); }
.ct-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(247, 247, 247, .3); background: transparent; color: var(--fg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.ct-modal__close:hover { background: var(--fg); color: var(--bg); }
.ct-modal__close svg { width: 16px; height: 16px; }
.ct-modal__title { font-weight: 400; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.1; }
.ct-modal__text { margin-top: 14px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; color: rgba(247, 247, 247, .75); }

/* Contact form — custom validation state */
.ct-field.is-error input,
.ct-field.is-error textarea,
.ct-field.is-error .ct-dd__toggle { border-color: var(--pink); }
.ct-field__err {
  display: none;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--pink);
}
.ct-field.is-error .ct-field__err { display: block; }

.ct-submit[disabled] { opacity: .55; pointer-events: none; }

/* ===================== Blog ===================== */
.bl-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: "IBM Plex Mono", monospace; font-weight: 600;
  font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
  color: rgba(247, 247, 247, .55);
}
.bl-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.bl-meta__cat { color: var(--pink); }

/* category rendered as a button-style pill */
.bl-meta__cat {
  color: var(--fg);
  padding: 5px 12px;
  border: 1px solid rgba(247, 247, 247, .3);
  border-radius: 100px;
}

/* Filter bar above the first article */
.bl-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: clamp(26px, 3vw, 44px);
}
.bl-filter__cats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bl-filter__label {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .02em; color: rgba(247, 247, 247, .55);
  margin-right: 2px;
}
.bl-fpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid rgba(247, 247, 247, .3);
  background: transparent; color: var(--fg);
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
  letter-spacing: -.12px; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bl-fpill:hover { border-color: rgba(247, 247, 247, .6); }
.bl-fpill.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.bl-fpill__x { display: none; align-items: center; margin-right: -2px; }
.bl-fpill.is-active .bl-fpill__x { display: inline-flex; }
.bl-fpill__x svg { width: 12px; height: 12px; }

/* Featured article — wide banner with a solid inset card */
.bl-featured {
  display: block;
  position: relative;
  margin-bottom: clamp(24px, 2vw, 34px);
}
.bl-featured__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 21 / 9; }
.bl-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.bl-featured:hover .bl-featured__media img { transform: scale(1.03); }
.bl-featured__card {
  --inset: clamp(16px, 1.7vw, 28px);
  position: absolute; top: var(--inset); right: var(--inset); bottom: var(--inset);
  width: min(430px, 42%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 2vw, 36px);
  border-radius: 18px;
  background: #1b1a1a;
}
.bl-featured__title {
  font-weight: 400; font-size: clamp(24px, 1.9vw, 32px);
  line-height: 1.12; letter-spacing: -.02em; margin: 0 0 22px;
}
.bl-featured .bl-meta { margin-bottom: 18px; }

/* Card grid */
.bl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2vw, 34px);
}
.bl-card { display: flex; flex-direction: column; }
.bl-card__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; margin-bottom: 20px; }
.bl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.bl-card:hover .bl-card__media img { transform: scale(1.05); }
.bl-card__title {
  font-weight: 400; font-size: 24px; line-height: 1.18;
  letter-spacing: -.02em; margin: 14px 0 10px;
}
.bl-card__excerpt { font-size: 15px; line-height: 1.55; color: rgba(247, 247, 247, .6); }
.bl-card__more {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--fg);
}
.bl-card__more svg { width: 14px; height: 14px; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.bl-card:hover .bl-card__more svg { transform: translateX(4px); }

@media (max-width: 1100px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  /* the featured (first) article renders like a normal card — no banner, no dark box */
  .bl-featured { margin-bottom: clamp(24px, 4vw, 34px); }
  .bl-featured__media { aspect-ratio: 3 / 2; margin-bottom: 20px; border-radius: var(--radius); }
  .bl-featured__card {
    position: static; transform: none; width: auto; margin: 0;
    padding: 0; background: transparent; border-radius: 0; display: block;
  }
  .bl-featured__title {
    font-weight: 400; font-size: 24px; line-height: 1.18;
    letter-spacing: -.02em; margin: 14px 0 10px;
  }
  .bl-featured .bl-meta { margin-bottom: 0; }
}
@media (max-width: 620px) { .bl-grid { grid-template-columns: 1fr; } }

/* Blog pagination — pill buttons (1, 2, 3 …) */
.bl-pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: clamp(44px, 7vh, 90px);
}
.bl-pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 14px;
  border: 1px solid rgba(247, 247, 247, .3); border-radius: 100px;
  background: transparent; color: var(--fg);
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 13px;
  letter-spacing: -.12px; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.bl-pager__btn:hover:not(:disabled) { border-color: rgba(247, 247, 247, .65); }
.bl-pager__btn.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.bl-pager__btn:disabled { opacity: .3; cursor: default; }
.bl-pager__btn svg { width: 16px; height: 16px; display: block; }
.bl-pager__dots {
  display: inline-flex; align-items: flex-end; justify-content: center;
  min-width: 22px; height: 46px; padding-bottom: 12px;
  color: rgba(247, 247, 247, .45);
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px;
}

/* "Read next" section at the bottom of a single article — full width */
.bl-more {
  border-top: 1px solid rgba(247, 247, 247, .14);
  margin-top: clamp(40px, 7vh, 80px);
  padding: clamp(48px, 8vh, 90px) var(--pad) clamp(70px, 11vh, 130px);
}
.bl-more__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: clamp(24px, 4vh, 42px);
}
.bl-more__title {
  font-weight: 400; font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05; letter-spacing: -.03em; margin: 0;
}
.bl-more__all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid currentColor; border-radius: 100px;
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: -.12px; color: var(--fg);
  white-space: nowrap; background: transparent; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.bl-more__all:hover { background: var(--fg); color: var(--bg); }
.bl-more__all svg { width: 14px; height: 14px; transform: translateY(-1px); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.bl-more__all:hover svg { transform: translate(4px, -1px); }

/* ===================== Single article ===================== */
/* Wide hero image with a solid box across the bottom */
.bl-hero {
  position: relative;
  width: min(calc(860px - 2 * var(--bl-gut)), calc(100% - 2 * var(--bl-gut)));
  margin: clamp(84px, 12vh, 130px) auto clamp(44px, 6vh, 74px);
  border-radius: var(--radius); overflow: hidden;
}
.bl-hero__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bl-hero__back {
  position: absolute; top: clamp(14px, 1.6vw, 24px); left: clamp(14px, 1.6vw, 24px); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 100px;
  background: #1b1a1a; color: var(--fg);
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: -.12px;
}
.bl-hero__back svg { width: 15px; height: 15px; }
.bl-hero__box {
  --inset: clamp(14px, 1.5vw, 26px);
  position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset);
  padding: clamp(24px, 2.4vw, 40px);
  border-radius: 16px;
  background: #1b1a1a;
}
.bl-hero__box .bl-meta { margin-bottom: 16px; }
.bl-hero__title {
  font-weight: 400; font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.05; letter-spacing: -.03em; margin: 0; max-width: 22ch;
}
@media (max-width: 680px) {
  /* taller hero image + a clean title box below it (no overlap/straddling) */
  .bl-hero { overflow: visible; }
  .bl-hero__img { aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .bl-hero__box {
    position: static; left: auto; right: auto; bottom: auto;
    margin: 10px 0 0; border-radius: var(--radius);
    padding: clamp(20px, 5.5vw, 30px);
  }
  .bl-hero__box .bl-meta { margin-bottom: 12px; }
}

.bl-article__lead {
  max-width: 860px; margin: 0 auto clamp(26px, 4vh, 44px); padding: 0 var(--bl-gut);
  font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: rgba(247, 247, 247, .9);
}
.bl-prose { max-width: 860px; margin: 0 auto; padding: 0 var(--bl-gut) clamp(80px, 12vh, 150px); }
.bl-prose p { font-size: 18px; line-height: 1.75; color: rgba(247, 247, 247, .8); margin-bottom: 1.35em; }
.bl-prose h2 {
  font-weight: 400; font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1; letter-spacing: -.02em; margin: 1.7em 0 .55em;
}
.bl-prose ul { margin: 0 0 1.35em 1.1em; list-style: disc; }
.bl-prose li { font-size: 18px; line-height: 1.7; color: rgba(247, 247, 247, .8); margin-bottom: .4em; }
.bl-prose blockquote {
  margin: 1.6em 0; padding: 6px 0 6px 26px;
  border-left: 2px solid var(--pink);
  font-size: 24px; line-height: 1.4; letter-spacing: -.01em; color: #f7f7f7;
}
.bl-prose strong { color: #f7f7f7; font-weight: 600; }
.bl-back {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 26px;
}
.bl-back svg { width: 16px; height: 16px; }

/* ===================== Portfolio page ===================== */
.pf-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
}
/* cards in the page colour with just an outline */
.pf-card {
  background: transparent; color: var(--fg);
  border: 1px solid rgba(247, 247, 247, .18);
  border-radius: var(--radius);
  padding: clamp(18px, 1.6vw, 26px);
  display: flex; flex-direction: column;
  min-width: 0;
  cursor: pointer;
}
.pf-card__media { overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; }
.pf-card__media img,
.pf-card__media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* media follows the cursor (--tx/--ty set by JS) and zooms on hover, like the homepage cards */
  transform: scale(var(--z, 1)) translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform;
}
.pf-card:hover .pf-card__media img,
.pf-card:hover .pf-card__media video { --z: 1.08; }
.pf-card__body { padding: clamp(14px, 1.3vw, 22px) clamp(6px, .6vw, 12px) clamp(6px, .6vw, 10px); }
.pf-card .tags { margin-bottom: clamp(20px, 2.4vw, 34px); flex-wrap: wrap; }
.pf-card__bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: nowrap;
}
.pf-card__title {
  flex: 1 1 auto; min-width: 0;
  font-weight: 400; font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1; letter-spacing: -0.05em;
}
.pf-card .pill--project { flex-shrink: 0; }
.pf-card__title .muted { color: rgba(247, 247, 247, .45); }

/* category pills + button restyled for the dark outline card */
.pf-card .pill--tag { color: var(--fg); border-color: rgba(247, 247, 247, .3); }
.pf-card .pill--tag:hover { background: transparent; color: var(--fg); }
.pf-card .pill--project {
  color: var(--fg); background: transparent;
  border: 1px solid rgba(247, 247, 247, .3); padding-right: 16px;
}
/* button reacts to hovering the whole card (card is fully clickable) */
.pf-card:hover .pill--project {
  background: var(--fg); color: var(--bg); border-color: var(--fg); padding-right: 22px;
}
.pf-card:hover .pill--project .pill__arrow svg { transform: rotate(0deg); }

@media (max-width: 820px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  /* stack the title and button on phones so nothing overflows */
  .pf-card__bottom { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
  .pf-card__title { flex: 1 1 100%; font-size: clamp(30px, 8vw, 40px); }
  .pf-card .tags { margin-bottom: 18px; }
  /* action button spans the whole card width (edge to edge inside padding) */
  .pf-card__bottom .pill { flex: 1 1 100%; width: 100%; justify-content: center; }
}

/* ===================== Cookie consent ===================== */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: flex; justify-content: center;
  padding: clamp(12px, 2vw, 22px);
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.cookie.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie__box {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap;
  max-width: 920px; width: 100%;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(247, 247, 247, .16);
  background: rgba(20, 19, 19, .72);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.cookie__text { flex: 1 1 320px; font-size: 14px; line-height: 1.55; color: rgba(247, 247, 247, .8); }
.cookie__text a { color: var(--fg); text-decoration: underline; }
.cookie__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie__btn { cursor: pointer; }
.cookie__btn--ghost { color: var(--fg); border-color: rgba(247, 247, 247, .45); background: transparent; }
.cookie__btn--ghost:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.cookie__btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cookie__btn--solid:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 560px) {
  .cookie__actions { width: 100%; }
  .cookie__btn { flex: 1; }
}

/* Contact page — business / operator details */
.ct-legal {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: clamp(20px, 3vh, 34px);
  font-size: 12px; letter-spacing: .01em; text-transform: none;
  color: rgba(247, 247, 247, .45);
}

/* Prevent dragging images/videos out to the desktop (casual deterrent only) */
img, video {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ===================== Showreel custom player ===================== */
.modal .srp {
  position: relative;
  width: min(100%, 1500px);
  max-height: 90vh;
  transform: scale(0.9); opacity: 0;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.modal.is-open .srp { transform: scale(1); opacity: 1; }
.srp video {
  width: 100%; max-height: 90vh; display: block;
  border-radius: 12px; background: #000; cursor: pointer;
  transform: none; opacity: 1; outline: none;
}
.srp__controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 34px 20px 16px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.srp:hover .srp__controls,
.srp:not(.is-playing) .srp__controls { opacity: 1; }
.srp__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid rgba(247, 247, 247, .5); border-radius: 50%;
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.srp__btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.srp__btn svg { width: 18px; height: 18px; }
/* always exactly one icon visible per toggle */
.srp__i { display: none; }
.srp__i--play, .srp__i--vol { display: block; }
.srp.is-playing .srp__i--play { display: none; }
.srp.is-playing .srp__i--pause { display: block; }
.srp.is-muted .srp__i--vol { display: none; }
.srp.is-muted .srp__i--mute { display: block; }

.srp__btn--play .srp__i--play { margin-left: 2px; } /* optical centring of the triangle */

/* volume: mute icon + slider grouped inside one outlined pill */
.srp__vol {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  height: 40px; padding: 0 16px 0 13px;
  border: 1px solid rgba(247, 247, 247, .5); border-radius: 100px;
}
.srp__vol .srp__btn {
  width: auto; height: auto; border: none; border-radius: 0; background: transparent;
  transition: opacity .2s ease;
}
.srp__vol .srp__btn:hover { background: transparent; color: var(--fg); opacity: .7; }
.srp__volbar {
  position: relative; width: 64px; height: 4px; border-radius: 100px;
  background: rgba(247, 247, 247, .28); cursor: pointer; touch-action: none;
}
.srp__volbar::before { content: ""; position: absolute; inset: -8px 0; }
.srp__volfill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  border-radius: 100px; background: var(--fg);
}
@media (max-width: 560px) { .srp__volbar { display: none; } }
.srp__time {
  font-size: 12px; letter-spacing: -.02em; white-space: nowrap; flex-shrink: 0;
  color: rgba(247, 247, 247, .85);
}
.srp__bar {
  position: relative; flex: 1; height: 4px; border-radius: 100px;
  background: rgba(247, 247, 247, .28); cursor: pointer; touch-action: none;
}
.srp__bar::before { content: ""; position: absolute; inset: -8px 0; }
.srp__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 100px; background: var(--fg);
}

/* ============================================================
   Mobile type scale — applies on all pages (phones ≤680px):
   labels + body text = 16px, main headings = 36px
   ============================================================ */
@media (max-width: 680px) {
  .label { font-size: 16px; margin-bottom: 20px; }
  /* main headings */
  .hero__title,
  .ab-hero__title,
  .ab-h2,
  .ab-float__title,
  .pd-title,
  .project__title,
  .pf-card__title,
  .bl-hero__title,
  .bl-featured__title,
  .bl-card__title,
  .bl-more__title,
  .about__title,
  .pd-subtitle { font-size: 36px; line-height: 1.08; }
  /* body / lead / paragraph / subtitle text */
  .hero__lead,
  .ab-hero__lead,
  .ab-stat__desc,
  .pd-intro,
  .bl-article__lead,
  .bl-prose p,
  .bl-prose li { font-size: 16px; }
  /* homepage project cards: smaller pills + button */
  .project .pill { font-size: 10px; }
  /* contact: tighter gap between label and value */
  .contact__col .mono { margin-bottom: 8px; }
}