/* ===== FONTS ===== */
@font-face {
  font-family: "Thunder";
  src: url("/assets/fonts/Thunder-BlackLC.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thunder";
  src: url("/assets/fonts/Thunder-BoldLC.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("/assets/fonts/Nohemi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("/assets/fonts/Nohemi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("/assets/fonts/Nohemi-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===== VARIABLES ===== */
:root {
  --dark: #000000;
  --light: #ffffff;
  --green: #729e84;
  --gray: #000000;
  --muted: #dcdcdc;
  --fig: #0d99ff;
  --accent: #82cacc;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.76, 0, 0.24, 1);
  /* Logo height, shared. .header and .hdr-actions are separate fixed
     elements, so nothing aligns them automatically - the buttons centre on
     their own height and the logo on its own, and the two drift apart by a
     few pixels differently at every breakpoint. Giving .hdr-actions a
     min-height of exactly this makes both centre on the same line. Change it
     here, not on .logo-img. */
  --logo-h: 44px;
  /* the header row height: whichever of the logo and the buttons is taller.
     Both centre inside it, so they share one centre line at every width. */
  --bar-h: 44px;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* native smooth scrolling fights ScrollTrigger's pinned sections: the
   browser is still easing towards the anchor while ScrollTrigger is
   measuring, so a jump to #work or #flow-root lands inside a pin with
   the wrong offset and the section reads as blank. Desktop absorbs it;
   a phone, where the pins are tighter and the scroll is flung rather
   than wheeled, does not. Anchors jump instantly on touch instead. */
@media (hover: none) and (pointer: coarse) {
  html { scroll-behavior: auto; }
}
/* held while the preloader is up - see revealSite() in main.js */
html.is-loading,
html.is-loading body { overflow: hidden; }
html.is-loading body { overscroll-behavior: none; }
body {
  background: var(--dark);
  color: var(--light);
  font-family: "Nohemi", system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===== PRELOADER ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.preloader__gray {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9998;
}
.preloader__fg {
  position: absolute;
  inset: 0;
  background: #000000;
  z-index: 9999;
}
.preloader__stripes {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(10px, 1.4vw, 22px);
}
.preloader__stripe {
  width: 1.5px;
  height: 100%;
  background: #ffffff;
  transform-origin: bottom center;
  transform: scaleY(0);
  will-change: transform;
}
.preloader__counter {
  position: absolute;
  bottom: clamp(16px, 3.5vw, 42px);
  right: clamp(16px, 4vw, 60px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  color: var(--light);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: clamp(43px, 10.2vw, 114px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.preloader__num {
  min-width: 0.55em;
  text-align: right;
}
.preloader__percent {
  font-size: 0.28em;
  font-weight: 700;
  margin-left: 0.04em;
  transform: translateY(-0.12em);
  opacity: 0.9;
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 1.15rem clamp(1.25rem, 4vw, 2.75rem);
  opacity: 0;
  transition: transform 0.45s var(--ease);
  will-change: transform;
}
.header.is-hidden { transform: translateY(-130%); }

/* Menu sits on its own layer so it stays put when the logo hides.
   Solid dark pill so it survives the cream and blue cards. */
/* Let's Connect + Menu, pinned together on their own layer */
.hdr-actions {
  position: fixed;
  top: 1.15rem;
  right: clamp(1.25rem, 4vw, 2.75rem);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  /* single source of truth for button height - both the connect button
     and the menu button read from this so they always match */
  --btn-h: 36px;
  /* centre the buttons on the same row as the logo */
  min-height: var(--bar-h);
}
.hdr-actions .menu-btn {
  background: rgba(12, 14, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.hdr-actions .menu-btn:hover {
  background: rgba(12, 14, 15, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
}

/* two-state SLIDE - plain 2D transform + opacity only.
   (previous version used rotateX/preserve-3d/backface-visibility, which
   makes Chromium re-rasterize the text layer every frame and jitters -
   swapped to a flat translateY swap, which stays on the compositor.) */
.connect-btn {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  --h: var(--btn-h);
  --dur: 0.5s;
  --e: cubic-bezier(0.16, 1, 0.3, 1);
}
.connect-btn__stack {
  position: relative;
  display: block;
  height: var(--h);
  overflow: hidden;
}

.connect-btn__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 22px;
  font-family: "Nohemi", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  will-change: transform;
  transition: transform var(--dur) var(--e);
}
/* front face - stays in flow so it gives the button its width */
.connect-btn__state--a {
  position: relative;
  height: var(--h);
  background: var(--accent);
  color: #08171a;
  transform: translateY(0);
}
/* second face, parked below, slides up on hover */
.connect-btn__state--b {
  position: absolute;
  inset: 0;
  height: var(--h);
  background: #fdf9e8;
  color: #0a5f62;
  transform: translateY(100%);
}
.connect-btn:hover .connect-btn__state--a {
  transform: translateY(-100%);
}
.connect-btn:hover .connect-btn__state--b {
  transform: translateY(0);
}

/* Nohemi's ascender is much taller than its descender, so flex centres
   the line box but the capitals ride 0.082em high. 0.1em (a touch more,
   to beat pixel rounding) puts the cap height on the pill's centre line. */
.connect-btn__label {
  display: inline-block;
  line-height: 1;
  position: relative;
  top: 0.1em;
}
/* heart-hands come alive once the face has landed */
.connect-btn__icon {
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  flex-shrink: 0;
  transform-origin: center;
  /* the emoji font sits high too; drop it level with the label */
  position: relative;
  top: 0.12em;
}
.connect-btn:hover .connect-btn__icon {
  animation: connectBeat 1.7s ease-in-out calc(var(--dur) * 0.7) infinite alternate;
}
@keyframes connectBeat {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.12) rotate(-5deg); }
  60%  { transform: scale(0.97) rotate(3deg); }
  100% { transform: scale(1.04) rotate(0deg); }
}

@media (max-width: 640px) {
  .hdr-actions { --btn-h: 32px; }
  .connect-btn__state { padding: 0 18px; font-size: 0.85rem; }
  .connect-btn__icon { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-btn__state { transition-duration: 0.15s; }
  .connect-btn:hover .connect-btn__icon { animation: none; }
}
.logo {
  display: flex;
  align-items: center;
  min-height: var(--bar-h);
  gap: 0.75rem;
  text-decoration: none;
}
.logo-img {
  height: var(--logo-h);
  width: auto;
  display: block;
  flex-shrink: 0;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.35s var(--ease);
}
.logo:hover .logo-img { opacity: 1; transform: scale(1.03); }
@media (max-width: 760px) { :root { --logo-h: 32px; --bar-h: 36px; } }
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-main {
  font-family: "Nohemi", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: #ffffff;
}
.logo-sub {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}
.menu-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  height: var(--btn-h, 52px);
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--light);
  font-family: "Nohemi", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
/* same Nohemi cap-height correction as .connect-btn__label */
.menu-btn__label {
  line-height: 1;
  position: relative;
  top: 0.1em;
}
.hamburger {
  width: 14px;
  height: 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--light);
  width: 100%;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7rem clamp(1.25rem, 5vw, 4rem) 4rem;
  position: relative;
  background: #121212;
  overflow: hidden;
  opacity: 0;
}
#bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
}
.hero__copy {
  max-width: 47%;
  margin-left: 8%;
}
.hero h1 {
  font-family: "Nohemi", sans-serif;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.032em;
  color: #eef3f4;
  margin: 0 0 1.4rem;
}
.hero__intro {
  font-size: clamp(1.08rem, 1.26vw, 1.22rem);
  line-height: 1.68;
  color: #b3bdc1;
  max-width: 42ch;
  margin: 0;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 1.75rem;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, transform 0.25s var(--ease);
}
.hero__cta:hover { background: rgba(255, 255, 255, 0.20); transform: scale(1.06); }

/* ===== HOVER WORDS ===== */
/* keeps a phrase glued to its trailing comma/full stop. .hw is an atomic
   inline (inline-block), and CSS gives those a soft wrap opportunity on
   both sides regardless of whitespace - so without this the line could
   break between "Cloud IT" and its comma, orphaning ", Guard IT." onto
   the next line. Breaks still happen at the spaces between groups. */
.hw-grp { white-space: nowrap; }
.hw { position: relative; display: inline-block; white-space: nowrap; cursor: default; }
.hw__text { display: inline-block; transition: opacity 0.2s ease; }
.hw .ch { display: inline-block; transition: transform 0.34s var(--ease), color 0.3s ease; }
.hw__fx { position: absolute; inset: -3px -7px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; }
.hw[data-hot="1"] .hw__fx { opacity: 1; }

.hw-frame {
  position: absolute; inset: 0;
  border: 1px solid var(--accent); border-radius: 3px;
  transform: scale(0.96); opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.22s ease;
}
.hw[data-hot="1"] .hw-frame { transform: scale(1); opacity: 0.95; }
.hw-tick {
  position: absolute; width: 6px; height: 6px;
  background: #121212; border: 1px solid var(--accent); border-radius: 1px;
  transform: scale(0); transition: transform 0.24s var(--ease);
}
.hw[data-hot="1"] .hw-tick { transform: scale(1); }
.hw-tick.a { left: -3px; top: -3px; }
.hw-tick.b { right: -3px; top: -3px; transition-delay: 0.04s; }
.hw-tick.c { left: -3px; bottom: -3px; transition-delay: 0.08s; }
.hw-tick.d { right: -3px; bottom: -3px; transition-delay: 0.12s; }
.hw-dim {
  position: absolute; right: 1px; bottom: 1px; z-index: 3;
  background: var(--accent); color: #08171a;
  font: 500 0.6rem/1 ui-monospace, monospace; letter-spacing: 0.04em;
  padding: 3px 6px; border-radius: 2px; white-space: nowrap;
  opacity: 0; transform: translateY(3px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease);
}
.hw[data-hot="1"] .hw-dim { opacity: 1; transform: translateY(0); }
.hw[data-kind="design"][data-hot="1"] .ch { transform: translateY(-2px); }

.hw[data-kind="cloud"][data-hot="1"] .hw__text,
.hw[data-kind="guard"][data-hot="1"] .hw__text { opacity: 0.05; }

.hw .ch.scr { color: var(--accent); }
.hw .ch.fin { color: var(--accent); font-family: "Fragment Mono", ui-monospace, monospace; }
/* monospace runs much wider than Nohemi - scale the code word so
   "<CodeIT/>" occupies the same box as "Code IT" and cannot wrap */
/* while scrambling the letters stay in the headline face at full size,
   so the effect reads as a scramble. only the final code string is mono. */
.hw[data-kind="code"] .ch.scr,
.hw[data-kind="code"] .ch.fin {
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 0.60em;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}
.hw[data-kind="code"] { overflow: visible; }

.hw-cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-node {
  fill: #15151a; stroke: rgba(207,239,240,0.5); stroke-width: 1.4; opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(0.7);
}
.hw[data-hot="1"] .cl-node { animation: clPop 0.22s var(--ease) both; }
.hw[data-hot="1"] .cl-node:nth-of-type(2) { animation-delay: 0.05s; }
.hw[data-hot="1"] .cl-node:nth-of-type(3) { animation-delay: 0.10s; }
@keyframes clPop { to { opacity: 1; transform: scale(1); } }
.cl-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: normal;
  word-spacing: normal;
  fill: #eafafa;
  opacity: 0;
}
.hw[data-hot="1"] .cl-text { animation: clIn 0.2s 0.12s both; }
@keyframes clIn { to { opacity: 1; } }
.cl-wire { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1.4; stroke-dasharray: 4 3; }
.cl-run { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0; }
.hw[data-hot="1"] .cl-run { animation: clIn 0.3s 0.18s both, clMarch 1s linear 0.3s infinite; }
@keyframes clMarch { to { stroke-dashoffset: -16; } }

.hw-deny {
  position: absolute;
  /* height reduced; width pinned exactly to the word
     (left/right cancel the -7px overhang on .hw__fx) */
  top: 18%; bottom: 18%;
  left: 7px; right: 7px;
  display: flex; align-items: center; justify-content: center; gap: 0.45em;
  background: rgba(22,6,8,0.97); border: 1px solid #ff5f53; border-radius: 4px;
  font: 700 0.18em/1 ui-monospace, monospace; letter-spacing: 0.13em; word-spacing: normal;
  color: #ff8a7d; overflow: hidden;
}
.hw[data-kind="guard"][data-hot="1"] .hw-deny { animation: hwShake 0.32s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes hwShake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(3px); }
  50% { transform: translateX(-1px); }
  100% { transform: none; }
}
.hw-deny::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,95,83,.10) 0 8px, transparent 8px 16px);
}
.hw-deny::after {
  content: ""; position: absolute; left: 0; right: 0; height: 28%;
  background: linear-gradient(180deg, transparent, rgba(255,95,83,.22), transparent);
  animation: hwScan 1.6s linear infinite;
}
@keyframes hwScan { 0% { top: -30%; } 100% { top: 100%; } }
.hw-deny__lock {
  position: relative; flex: none; width: 0.62em; height: 0.52em;
  border: 2px solid #ff5f53; border-radius: 1px;
}
.hw-deny__lock::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  width: 0.42em; height: 0.30em; border: 2px solid #ff5f53; border-bottom: 0;
  border-radius: 0.3em 0.3em 0 0;
}
.hw-deny__txt { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .hero__copy { max-width: 60%; margin-left: 4%; }
}
@media (max-width: 760px) {
  .hero { align-items: flex-end; padding: 6.5rem 1.25rem 3.5rem; }
  .hero__copy { max-width: 100%; margin-left: 0; padding-top: 1.5rem; margin-bottom: 18vh; }
  .hero h1 { font-size: clamp(2rem, 10.5vw, 3rem); line-height: 1.34; }
  .hero__intro { font-size: 1.1rem; }
  .hw-dim { display: none; }
  .hw-deny { font-size: 0.16em; letter-spacing: 0.08em; top: 20%; bottom: 20%; left: 7px; right: 7px; }
  .hero__cue { display: none; }
}
@media (hover: none) {
  .hw::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.05em;
    height: 1.5px; background: rgba(130,202,204,.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw .ch { transition: none; }
  .hw-deny::after { animation: none; }
}

/* ===== HIGH-END STRATEGY SECTION ===== */
.section {
  padding: 6.5rem clamp(1.25rem, 5vw, 4rem);
}
.section__header {
  max-width: 680px;
  margin-bottom: 3.5rem;
}
.section__label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.8rem;
  font-weight: 600;
}
.section__title {
  font-family: "Nohemi", sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: #ffffff;
}

/* ===== HIGH-END CTA SECTION ===== */
.cta {
  padding: 5rem clamp(1.25rem, 5vw, 4rem) 7rem;
}
.cta__inner {
  background: linear-gradient(135deg, rgba(24, 24, 32, 0.9) 0%, rgba(12, 12, 16, 0.95) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  text-align: center;
  padding: 4.5rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
.cta__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1.2rem;
  display: inline-block;
}
.cta h2 {
  font-family: "Nohemi", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin-bottom: 1.2rem;
  line-height: 1.15;
  color: #ffffff;
}
.cta p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.6;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: #ffffff;
  color: #000000;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  font-family: "Nohemi", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.25s var(--ease), background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}
.btn:hover {
  transform: translateY(-3px) scale(1.02);
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.3);
}

/* ===== FOOTER ===== */
.big-name {
  font-family: "Thunder", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 18vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--light);
  opacity: 0.05;
  text-align: center;
  padding: 2rem 1rem 4rem;
  pointer-events: none;
  user-select: none;
}

/* ========== FLOW ART - ABOUT US SCROLL CARDS (exact port) ========== */

/* ═══════════════════════════════════════════════════════
   PORTFOLIO - SELECTED WORK (ticket cards)
   ═══════════════════════════════════════════════════════ */
.work { position: relative; }
.work__count {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-top: 0.85rem;
}

.ticket-wrap {
  perspective: 1200px;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticket-wrap.is-visible { opacity: 1; transform: translateY(0); }

.ticket {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 741 / 425;
  text-decoration: none;
  color: #f5f0e8;
  will-change: transform;
  transition: transform 420ms var(--ease), box-shadow 420ms ease;
  overflow: visible;
  filter: drop-shadow(0 0 0.5px rgba(245, 240, 232, 0.12));
}
.ticket:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.ticket__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: url(#ticketClip);
  box-sizing: border-box;
}
.ticket__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 55% at 16% 10%, rgba(130, 202, 204, 0.10) 0%, transparent 62%),
    radial-gradient(60% 60% at 88% 84%, rgba(130, 202, 204, 0.07) 0%, transparent 66%),
    radial-gradient(90% 70% at 62% 18%, rgba(255, 255, 255, 0.055) 0%, transparent 58%),
    radial-gradient(120% 100% at 30% 25%, #262626 0%, #0a0a0a 68%);
}
/* teal edge that lights up on hover */
.ticket__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(130, 202, 204, 0);
  transition: box-shadow 0.35s ease;
}
.ticket:hover .ticket__body::after {
  box-shadow: inset 0 0 0 1px rgba(130, 202, 204, 0.45);
}

.ticket__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.30;
  mix-blend-mode: screen;
  pointer-events: none;
  /* soft diagonal sweeps over fine grain - the paper-shader look */
  background-image:
    linear-gradient(112deg, transparent 18%, rgba(255,255,255,0.09) 34%, transparent 46%),
    linear-gradient(74deg, transparent 52%, rgba(255,255,255,0.055) 68%, transparent 80%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 140px 140px;
}

.ticket__shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
              rgba(245, 240, 232, 0.14), transparent 70%);
}
.ticket:hover .ticket__shine { opacity: 1; }

/* NOTE: this selector was missing in the source file, which left the
   scan properties orphaned and killed the rules that followed it. */
.ticket__scan {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(245, 240, 232, 0.55) 48%, transparent 100%);
  transform: translateY(-110%);
}
.ticket-wrap.is-visible .ticket__scan {
  animation: scanReveal 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
}
@keyframes scanReveal {
  0%   { transform: translateY(-110%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110%); opacity: 0; }
}

.ticket__divider {
  position: absolute;
  top: 0; bottom: 0; left: 75.85%;
  width: 1px;
  z-index: 3;
  background-image: repeating-linear-gradient(
    rgba(245, 240, 232, 0.22) 0px, rgba(245, 240, 232, 0.22) 8px,
    transparent 8px, transparent 16px);
}
.ticket__notch { display: none; }

.ticket__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  padding-right: calc(24% + clamp(1rem, 2.5vw, 2rem));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.ticket__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.ticket__eyebrow {
  font-family: "Nohemi", sans-serif;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.016em;
  line-height: 1.4;
  color: rgba(245, 240, 232, 0.85);
}
.ticket__status {
  flex-shrink: 0;
  font-family: "Nohemi", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 232, 0.25);
  white-space: nowrap;
}
.ticket__status--live {
  color: #0a0a0a;
  background: #f5f0e8;
  border-color: #f5f0e8;
}
.ticket__status--progress {
  color: rgba(245, 240, 232, 0.85);
  background: transparent;
}
.ticket__status--progress::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.ticket__title {
  font-family: "Nohemi", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #f5f0e8;
}
.ticket__meta {
  font-family: "Nohemi", sans-serif;
  font-weight: 500;
  font-size: clamp(0.65rem, 1.2vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(245, 240, 232, 0.55);
}

.ticket__side {
  position: absolute;
  top: 0; right: 0;
  width: 24%;
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticket__year {
  font-family: "Nohemi", sans-serif;
  font-weight: 600;
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  writing-mode: vertical-rl;
  letter-spacing: -0.02em;
  color: #f5f0e8;
  opacity: 0.12;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ticket__cta {
  font-family: "Nohemi", sans-serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0em;
  writing-mode: vertical-rl;
  color: #f5f0e8;
  opacity: 0.88;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease, color 0.25s ease;
}
.ticket:hover .ticket__cta {
  opacity: 1;
  letter-spacing: 0.06em;
  color: var(--accent);
}

@media (max-width: 480px) {
  .ticket__divider, .ticket__notch { left: 75.85%; }
  .ticket__content { width: 72%; }
  .ticket__side { width: 28%; }
}
@media (hover: none) {
  .ticket__shine { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-wrap { transition: opacity 0.3s ease; transform: none; }
  .ticket-wrap.is-visible .ticket__scan { animation: none; }
  .ticket__status--progress::before { animation: none; opacity: 0.8; }
}
/* light sweeps back across the card when the cursor leaves */
.ticket.is-flash .ticket__scan {
  animation: scanReveal 0.75s cubic-bezier(0.65, 0, 0.35, 1) both;
}
/* ═══════════════════════════════════════════════════════
   SECTION DIVIDERS
   ═══════════════════════════════════════════════════════ */
.section-rule {
  position: relative;
  height: 1px;
  margin-inline: clamp(1.25rem, 5vw, 4rem);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 18%,
    rgba(130, 202, 204, 0.30) 50%,
    rgba(255, 255, 255, 0.14) 82%,
    transparent 100%
  );
}
/* small diamond marker on the centre of the rule */
.section-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent);
  opacity: 0.55;
}

/* the About Us cards are full-bleed colour blocks, so the rule
   before them would sit on the cream panel - hide that one */
.section-rule:first-of-type { display: none; }

/* Copy now runs full width on the flow cards */

/* ===== ABOUT US - image panel (restored, contain-fit) ===== */
/* contain, not cover - the illustrations are wide and were being cropped */
/* copy sits beside the image again */

/* ═══════════════════════════════════════════════════════
   PORTFOLIO - TICKET PRINTER
   Cards themselves are unchanged; this is the stage.
   ═══════════════════════════════════════════════════════ */
.work {
  position: relative;
  padding: 0;
  background: #08080a;
}
.work__bg {
  position: sticky;
  top: 0;
  /* vh first: an older mobile browser that does not know svh would drop
     the declaration entirely and collapse this to height:auto */
  height: 100vh;
  margin-bottom: -100vh;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 0;
  pointer-events: none;
}
.work__spot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 36% at 50% 8%, rgba(130, 202, 204, 0.20), transparent 72%),
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
}
.work__perf {
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  opacity: 0.9;
  background-image: radial-gradient(circle at 8px 11px, #08080a 5.5px, transparent 6px);
  background-size: 16px 24px;
}
.work__perf--l { left: 0;  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07); }
.work__perf--r { right: 0; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07); }

.work__count {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-top: 0.85rem;
}

@keyframes slotPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* the printer stage: pinned, cards issue into it */
/* spacer that gives the section its scroll length - set by JS */
.work__runway { position: relative; z-index: 1; }
.work__tail { height: 40vh; }

/* ---- phones and tablets: same pinned printer as desktop, sized down.
        1023px, not 900px, so an iPad Pro in portrait stops rendering a
        440px ticket marooned in a 1000px-tall empty stage. Kept in step
        with runwayHeight() in main.js. ---- */
@media (max-width: 1023px) {
  .work__head { padding: 0 1.25rem; }
  .work__stage { padding-top: clamp(1.25rem, 2.5vh, 2rem); }
}

/* ═══════════════════════════════════════════════════════
   THE PRINTER - physical housing above the slot
   ═══════════════════════════════════════════════════════ */

/* brushed metal body */
.work__printer-body {
  position: relative;
  height: clamp(46px, 6vw, 68px);
  border-radius: 14px 14px 4px 4px;
  background:
    linear-gradient(180deg, #33383b 0%, #23282b 42%, #171b1d 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  background-blend-mode: overlay;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 18px 40px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 2vw, 24px);
}
/* cooling vents */
.work__printer-vent {
  width: clamp(56px, 9vw, 104px);
  height: 56%;
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0 2px,
    rgba(255,255,255,0.05) 2px 5px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.work__printer-brand {
  font-family: ui-monospace, monospace;
  font-size: clamp(7px, 0.8vw, 9px);
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.32);
}
/* status led */
.work__printer-led {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(130,202,204,0.75), inset 0 0 3px rgba(255,255,255,0.6);
  animation: printerLed 2.4s ease-in-out infinite;
}
@keyframes printerLed { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* the lip the paper feeds under */
.work__printer-lip {
  position: relative;
  height: 10px;
  margin: 0 6px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #14181a 0%, #0a0d0e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 18px rgba(0,0,0,0.6);
}
/* the dark opening itself */
.work__slot {
  position: relative;
  height: 9px;
  margin: 0 10px;
  border-radius: 3px;
  background: #000;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(0,0,0,0.9);
}
/* light spilling out of the opening */
.work__slot-glow {
  position: relative;
  height: 2px;
  margin: -1px 14px 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(130,202,204,0.9), transparent);
  filter: blur(0.5px);
  animation: slotPulse 2.4s ease-in-out infinite;
}
@keyframes slotPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.95; } }
/* tear-off teeth below the slot */
.work__printer-teeth {
  height: 7px;
  margin: 2px 10px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent),
    repeating-linear-gradient(90deg,
      #1a1e20 0 4px,
      transparent 4px 5px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px);
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px);
  opacity: 0.75;
}

/* the stage tucks just under the printer */

@media (max-width: 1023px) {
  .work__printer { width: min(78vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .work__printer-led, .work__slot-glow { animation: none; opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════
   PRINTER STAGE - head, printer and cards pin as ONE unit
   so they can never drift apart or release separately
   ═══════════════════════════════════════════════════════ */
.work__stage {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(3.5rem, 7vh, 5.5rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
.work__head {
  text-align: center;
  pointer-events: none;
  margin-bottom: clamp(1rem, 2.2vh, 1.75rem);
}
.work__head .section__title { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.work__head .section__title { margin-inline: auto; }
.work__count {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-top: 0.8rem;
}
.work__printer {
  position: relative;
  z-index: 5;
  width: min(50vw, 660px);
  pointer-events: none;
}
/* the cards issue into this, directly under the printer */
.work-grid {
  position: relative;
  z-index: 3;
  display: block;
  /* card width tracks the printer so the ticket always looks like it
     came out of that slot, on any screen */
  width: min(46vw, 600px);
  flex: 1 1 auto;
  min-height: 0;
  margin-top: -6px;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 97%);
}
.work-grid .ticket-wrap {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  margin: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ---- hover: shine only. the tilt fought the printer's own 3D
        transform on the wrapper, which is what made it jitter ---- */
.work-grid .ticket { transform: none !important; }
.work-grid .ticket__shine { transition: opacity 0.25s ease; }
.work-grid .ticket:hover .ticket__body::after {
  box-shadow: inset 0 0 0 1px rgba(130, 202, 204, 0.55);
}

@media (max-width: 1023px) {
  /* same pinned/stacking mechanism as desktop - only the width changes,
     scaled down to fit a phone instead of hidden behind a plain list */
  .work-grid {
    width: min(84vw, 460px);
  }

  /* the stage is sticky, so a shrink-to-fit height left the bottom of the
     screen as a dead black band for the whole portfolio scroll (46% of the
     viewport on an iPad Air). Fill the screen and centre the printer unit
     inside it instead - same run-out, no empty band. */
  .work__stage {
    height: 100vh;
    height: 100svh;
    justify-content: center;
    padding-top: clamp(4.5rem, 9vh, 6rem);
    padding-bottom: clamp(1rem, 2.5vh, 1.75rem);
  }
  .work__head { margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem); }
  .work-grid {
    flex: 0 0 auto;
    height: clamp(250px, 36svh, 320px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  }
}

/* ═══════════════════════════════════════════════════════
   PREMIUM BLACK - a single glassy surface used site-wide
   ═══════════════════════════════════════════════════════ */
:root {
  --black: #08090b;
  --black-2: #0c0e11;
  --black-glass: rgba(14, 17, 20, 0.62);
  --sheen: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, transparent 42%);
}
body {
  background:
    radial-gradient(70% 45% at 18% 8%,  rgba(130,202,204,0.055), transparent 62%),
    radial-gradient(60% 45% at 88% 82%, rgba(130,202,204,0.035), transparent 66%),
    var(--black);
  background-attachment: fixed, fixed, fixed;
}
.cta__inner {
  background:
    var(--sheen),
    linear-gradient(150deg, rgba(22,26,30,0.92) 0%, rgba(10,12,14,0.96) 100%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
}
.work { background: var(--black); }
.work__perf { background-image: radial-gradient(circle at 8px 11px, var(--black) 5.5px, transparent 6px); }

.flow-root { width: 100%; overflow-x: hidden; }

.flow-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.flow-art-container {
  position: relative;
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding-left: 4vw;
  padding-right: 4vw;
  padding-top: clamp(5rem, 10vw, 6.5rem);
  padding-bottom: 4vw;
  will-change: transform;
  transform-origin: bottom left;
}

.flow-card--design { background: var(--black); color: var(--light); }
.flow-card--engineering { background: var(--accent); color: #0a0a0a; }
.flow-card--strategy { background: #f5f0e8; color: #0a0a0a; }
.flow-card--security { background: #7DA2AB; color: #0a0a0a; }
.flow-card--intro { background: #000000; color: var(--light); justify-content: flex-end; }

.flow-card__inner {
  display: flex;
  justify-content: space-between;
  gap: 4vw;
  flex: 1;
  min-height: 0;
}
.flow-card__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
/* Mobile: each card pins for one screen-height of scroll, same
   mechanism as desktop, so the lock/reveal behaviour matches instead
   of falling back to a plain stack */
@media (max-width: 899px) {
  .flow-section,
  .flow-art-container {
    min-height: 100svh;
  }
  .flow-card__inner {
    flex-direction: column;
  }
}

.flow-card__top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.flow-card__number {
  font-family: "Nohemi", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
}
.flow-card__line {
  width: 1px;
  height: 16px;
  background: currentColor;
  opacity: 0.4;
  margin-top: 0.25rem;
}
.flow-card__desc {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  max-width: 42ch;
  opacity: 0.92;
}
.flow-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.flow-card__title {
  font-family: "Thunder", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
}
.flow-card__label {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-top: 0.75rem;
}

/* ===== ABOUT US - image panel (restored, contain-fit) ===== */
.flow-card__right {
  display: none;
  flex-direction: column;
  width: 30%;
  max-width: 420px;
  flex-shrink: 0;
}
.flow-card__imgLabel {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.flow-card__imgFrame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}
/* contain, not cover - the illustrations are wide and were being cropped */
.flow-card__imgFrame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.flow-card__imgRule {
  margin-top: 1.25rem;
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: 0.4;
}
@media (min-width: 900px) {
  .flow-card__right { display: flex; }
}
/* Each flow card is PINNED for the length of its scroll: the section is
   held at the top of the screen with overflow:hidden, so anything past
   one viewport height is not "below the fold", it is never reachable at
   all. Stacked into a single column the phone layout came to roughly
   740px of content on a 667px screen - the title and the label were
   simply cut off. Everything here exists to make the card FIT. */
@media (max-width: 899px) {
  .flow-art-container {
    padding-top: clamp(4.25rem, 9vh, 5.25rem);
    padding-bottom: 1.25rem;
    gap: 0.9rem;
  }
  .flow-card__inner { gap: 0.9rem; }
  .flow-card__top { gap: 0.7rem; }
  .flow-card__right {
    display: flex;
    width: 100%;
    max-width: none;
    order: -1;
  }
  .flow-card__imgLabel { font-size: 0.72rem; margin-bottom: 0.4rem; }
  .flow-card__imgFrame {
    aspect-ratio: auto;
    max-height: clamp(150px, 26svh, 380px);
    padding: 0.4rem;
  }
  .flow-card__imgFrame img { max-height: clamp(150px, 26svh, 380px); }
  .flow-card__imgRule { margin-top: 0.75rem; }
  .flow-card__desc { font-size: 0.88rem; line-height: 1.5; max-width: none; }
  .flow-card__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .flow-card__label { font-size: 0.72rem; margin-top: 0.4rem; }
}

/* landscape phone: 390px of height for a full-screen pinned card. The
   column stack cannot fit, so the image goes back beside the copy - the
   one layout that uses width instead of height. */
@media (max-height: 560px) and (orientation: landscape) {
  .flow-art-container { padding-top: 3.5rem; padding-bottom: 1rem; }
  .flow-card__inner { flex-direction: row; gap: 1.5rem; }
  .flow-card__right { order: 0; width: 30%; max-width: 300px; }
  .flow-card__imgFrame,
  .flow-card__imgFrame img { max-height: 42svh; }
  .flow-card__desc { font-size: 0.8rem; line-height: 1.45; }
  .flow-card__title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
}
/* ═══════════════════════════════════════════════════════
   ABOUT - THE STUDIO (story + printed docket)
   ═══════════════════════════════════════════════════════ */
.about {
  position: relative;
  padding: clamp(5.5rem, 11vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 6vh, 4.5rem);
  background: var(--black);
  overflow: hidden;
}
.about__aura {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 36% at 50% 0%, rgba(130, 202, 204, 0.11), transparent 66%);
}
.about__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 500 0.95rem/1 ui-monospace, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1.6rem;
}
.about__eyebrow i { width: 14px; height: 1px; background: rgba(130, 202, 204, 0.7); display: block; }
.about__title {
  font-family: "Nohemi", sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0;
  max-width: 17ch;
}
.about__title em { font-style: normal; color: var(--accent); font-weight: 400; }
.about__p {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.8;
  color: #ffffff;
  margin: 1.35rem 0 0;
  max-width: 50ch;
}
/* the Sanskrit spelling carries its own rule */
.about__sans {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* everything is white now, so emphasis is carried by a rule */
.about__p b {
  color: #ffffff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* the mark: scattered circles that assemble into the Agneya hexagon+A
   on hover, replacing the old ticket-docket */
.about__mark {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 7.2;
  border-radius: var(--radius-2xl, 18px);
  overflow: hidden;
  background: radial-gradient(60% 55% at 50% 42%, rgba(130,202,204,0.07), transparent 70%), #0c0e11;
  border: 1px solid rgba(255,255,255,0.08);
}
/* fallback for browsers/PCs without aspect-ratio support - without this,
   the canvas (position:absolute, contributes no auto-height) sits inside
   a 0-height box and never renders anything at all */
.about__mark::before {
  content: "";
  display: block;
  padding-top: 80%; /* 7.2 / 9, matches the aspect-ratio above */
}
.about__mark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.about__mark-pill {
  pointer-events: none;
  position: absolute; left: 50%; top: 50%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  background: #f5f0e8;
  color: #0a0a0b;
  padding: 0.5rem 1rem;
  font: 500 0.68rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  z-index: 5;
  border-radius: 3px;
}
.about__mark-pill span {
  grid-column: 1; grid-row: 1;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.about__mark-pill .about__mark-pill-a { opacity: 1; }
.about__mark:hover .about__mark-pill-a { opacity: 0; }
.about__mark:hover .about__mark-pill-b { opacity: 1; }
@media (max-width: 640px) {
  .about__mark-pill { font-size: 0.58rem; padding: 0.42rem 0.75rem; }
}

/* handoff into How We Work */
.about__to {
  position: relative; z-index: 2;
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex; flex-direction: column; align-items: center;
}
.about__to-cap {
  font: 500 0.9rem/1 ui-monospace, monospace;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #ffffff; padding-bottom: 0.9rem;
}
.about__to-line {
  width: 1px; height: 56px; position: relative;
  background: linear-gradient(180deg, rgba(130,202,204,0.55), rgba(130,202,204,0.06));
}
.about__to-line::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  border-right: 1px solid rgba(130,202,204,0.55);
  border-bottom: 1px solid rgba(130,202,204,0.55);
}
/* a lit bead travels down, with a soft halo trailing it */
.about__to-line i {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 2px; height: 26px; border-radius: 2px;
  filter: blur(0.4px);
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: aboutFall 2s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
.about__to-line i::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130, 202, 204, 0.30), transparent 70%);
}
@keyframes aboutFall {
  0%   { top: -26px; opacity: 0; }
  15%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { top: calc(100% - 26px); opacity: 0; }
}

/* the arrowhead flares as the bead reaches it */
.about__to-line::after {
  animation: aboutHeadPop 2s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
@keyframes aboutHeadPop {
  0%, 72% {
    border-color: rgba(130, 202, 204, 0.35);
    transform: translateX(-50%) rotate(45deg) scale(1);
  }
  84% {
    border-color: #bff0f1;
    transform: translateX(-50%) rotate(45deg) scale(1.35);
  }
  100% {
    border-color: rgba(130, 202, 204, 0.35);
    transform: translateX(-50%) rotate(45deg) scale(1);
  }
}

@media (max-width: 860px) {
  .about { padding: 4.5rem 1.25rem 2.5rem; }
  .about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); max-width: none; }
  .about__p { font-size: 1rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* a travelling bead is not vestibular motion - slow it rather than
     freezing it, otherwise it just sits stuck partway down the line */
  .about__to-line i { animation-duration: 3.6s; }
  .about__to-line::after { animation-duration: 3.6s; }
}

/* ═══════════════════════════════════════════════════════
   PHONE PASS - preloader through footer
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ---- preloader ---- */
  .preloader__counter {
    bottom: 20px;
    right: 18px;
    font-size: clamp(38px, 15vw, 64px);
  }

  /* ---- header ---- */
  :root { --logo-h: 28px; --bar-h: 32px; }
  .header { padding: 0.9rem 1rem; }
  .hdr-actions { top: 0.9rem; right: 1rem; gap: 0.4rem; }
  .hdr-actions .menu-btn { padding: 0 13px; font-size: 0.62rem; }

  /* ---- hero ---- */
  .hero { padding: 5.5rem 1.15rem 3rem; }
  .hero__copy { padding-top: 1rem; margin-bottom: 14vh; }
  .hero h1 { font-size: clamp(1.85rem, 10vw, 2.6rem); line-height: 1.3; }
  .hero__intro { font-size: 0.98rem; line-height: 1.7; }
  .hero__cta { width: 42px; height: 42px; margin-top: 1.4rem; }

  /* ---- about + docket ---- */
  .about { padding: 3.75rem 1.15rem 2rem; }
  .about__grid { gap: 2.25rem; }
  .about__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; margin-bottom: 1.1rem; }
  .about__title { font-size: clamp(1.8rem, 9vw, 2.4rem); line-height: 1.16; }
  .about__p { font-size: 0.98rem; line-height: 1.75; margin-top: 1.1rem; }
  .about__to { margin-top: 2rem; }
  .about__to-line { height: 42px; }

  /* ---- how we work ---- */

  /* ---- portfolio ---- */
  .work { padding: 3.5rem 0; }
  .work__head { padding: 0 1.15rem 1.5rem; }
  .work-grid { padding: 0 1.15rem; gap: 1.15rem; }
  .work__count { font-size: 0.62rem; }

  /* ---- capabilities ---- */
  .caps { padding: 2rem 1.15rem; }

  /* ---- cta + footer ---- */
  .cta { padding: 3.75rem 1.15rem; }
  .cta__inner { padding: 2rem 1.25rem; }
  .cta h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1.2; }
  .big-name { padding: 0.75rem 0.75rem 2rem; }

  /* stop any section from causing sideways scroll */
  .section-rule { margin-inline: 1.15rem; }
}

/* very small phones */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(1.65rem, 9.5vw, 2.1rem); }
  .about__title { font-size: 1.7rem; }
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS - paper stock, tilted, draggable
   Uses the site tokens: Nohemi, --accent, --black
   ═══════════════════════════════════════════════════════ */
.tst {
  position: relative;
  background: #ffffff;
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(4.5rem, 10vh, 7.5rem);
  user-select: none;
  overflow: hidden;
}
.tst__title {
  font-family: "Nohemi", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--black);
  text-align: center;
  margin: 0;
}
.tst__title em {
  display: block;
  font-family: "Thunder", "Nohemi", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 1.25em;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.15em;
}

.tst__rail {
  position: relative;
  overflow: hidden;
  cursor: grab;
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
  padding: 2.25rem 0 2.75rem;
}
.tst__rail.is-drag { cursor: grabbing; }
.tst__track { display: flex; align-items: center; width: max-content; will-change: transform; }

.tst-card {
  position: relative;
  flex: none;
  width: clamp(262px, 23vw, 322px);
  margin-right: -32px;
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: center;
  border-radius: 3px;
  background: var(--black);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}
/* paper grain, same trick as the studio docket */
.tst-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
}
.tst-card--alt { background: #f4f1ea; color: var(--black); }

.tst-card__qm {
  position: absolute;
  font: 700 1.75rem/1 Georgia, serif;
  color: var(--accent);
  opacity: 0.7;
  pointer-events: none;
}
.tst-card--alt .tst-card__qm { color: var(--black); opacity: 0.32; }
.tst-card__qm--tr { top: 0.75rem; right: 1rem; }
.tst-card__qm--bl { bottom: 0.6rem; left: 1rem; }

.tst-card__q {
  font-family: "Nohemi", sans-serif;
  font-size: clamp(0.78rem, 0.95vw, 0.875rem);
  line-height: 1.72;
  margin: 0;
  position: relative;
}
.tst-card__who {
  border-top: 1px solid rgba(130, 202, 204, 0.42);
  padding-top: 0.8rem;
  margin-top: 1.05rem;
  position: relative;
}
.tst-card--alt .tst-card__who { border-top-color: rgba(8, 9, 11, 0.22); }
.tst-card__who b { display: block; font-size: 0.75rem; font-weight: 600; }
.tst-card__who span {
  display: block;
  font-size: 0.66rem;
  font-weight: 400;
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.5);
}
.tst-card--alt .tst-card__who span { color: rgba(8, 9, 11, 0.55); }

/* hovering straightens a card and lifts it clear */
.tst-card:hover {
  transform: translateY(-6px) rotate(0deg) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  z-index: 40 !important;
}

@media (max-width: 640px) {
  .tst { padding: 3.25rem 0 4rem; }
  .tst__title { font-size: clamp(1.7rem, 9vw, 2.3rem); }
  .tst__rail { margin-top: 1.75rem; padding: 1.75rem 0 2rem; }
  .tst-card { width: 82vw; margin-right: -22px; padding: 1.4rem 1.4rem 1.2rem; }
  .tst-card__q { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-card { transition: none; }
}

/* media/security.jpg is landscape while the other three are portrait -
   hold it to its own proportion so it can't fill the tall 4:5 frame */

/* used in section headings - was referenced in markup with no rule */
.serif {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   CAPABILITIES - single source of truth.
   Ported from the approved preview. Do not add caps rules elsewhere.
   Row 1: Design · Code · Cloud · Security
   Row 2: AI Automation · Digital Marketing
   ═══════════════════════════════════════════════════════════════════ */
.caps {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--black);
}
.caps__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.caps__spot {
  position: absolute; inset: 0;
  background:
    radial-gradient(44% 32% at 50% 2%, rgba(130,202,204,0.16), transparent 72%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,0.035), transparent 70%);
}
.caps__perf {
  position: absolute; top: 0; bottom: 0; width: 14px; opacity: 0.9;
  background-image: radial-gradient(circle at 7px 10px, var(--black) 5px, transparent 5.5px);
  background-size: 14px 22px;
}
.caps__perf--l { left: 0;  box-shadow: inset 1px 0 0 rgba(255,255,255,0.07); }
.caps__perf--r { right: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,0.07); }

/* header row: eyebrow left, count right */
.caps__top {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 2.25rem;
}
.caps__eyebrow {
  font: 600 clamp(1.1rem, 2vw, 1.6rem)/1 "Nohemi", sans-serif;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #ffffff;
}
.caps__count {
  font: 500 0.7rem/1 ui-monospace, monospace;
  letter-spacing: 0.16em; color: var(--accent);
}
.caps__head {
  position: relative; z-index: 2;
  white-space: nowrap;
  font-family: "Nohemi", sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 500; line-height: 1.15; letter-spacing: -0.03em;
  color: #eef3f4; text-align: center; margin: 0 0 0.4rem;
}
.caps__head em { font-style: normal; color: var(--accent); }
.caps__sub {
  position: relative; z-index: 2;
  font-size: 0.9rem; line-height: 1.6;
  color: rgba(255,255,255,0.45);
  text-align: center; max-width: 46ch;
  margin: 0 auto 2.25rem;
}

/* ── the two rows ── */
.caps__list { position: relative; z-index: 2; display: block; }
.caps__row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(1rem, 3.4vw, 3rem);
}
.caps__row--sm { margin-bottom: 0.5rem; }
.caps__rule {
  height: 1px;
  margin: 1.15rem 0 1.25rem;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,0.12) 22%, rgba(130,202,204,0.28) 50%,
    rgba(255,255,255,0.12) 78%, transparent);
}

.cap-svc { position: relative; display: flex; flex-direction: column; align-items: center; }
.cap-idx {
  font: 500 0.6rem/1 ui-monospace, monospace;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.32);
  margin-bottom: 0.4rem; transition: color 0.25s ease;
}
.cap-svc.is-active .cap-idx { color: var(--accent); }
/* fixed headroom the pills fall through - never animate this */
.cap-dd { height: clamp(84px, 10.5vh, 118px); pointer-events: none; }

.cap-stage { position: relative; display: inline-flex; cursor: pointer; }
.cap-word {
  margin: 0;
  font-family: "Thunder", "Nohemi", sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  position: relative; z-index: 2;
  will-change: color;
  transition: color 0.25s ease-out;
}
.cap-svc.is-active .cap-word { color: #f5f0e8; }

/* alternate starting colour per service: odd = blue -> white on hover,
   even = white -> blue on hover */
.cap-svc:nth-child(even) .cap-word { color: #f5f0e8; }
.cap-svc:nth-child(even).is-active .cap-word { color: var(--accent); }

.cap-arena {
  position: absolute;
  left: -50px; right: -50px; bottom: 0; top: -56px;
  pointer-events: none; z-index: 4;
  contain: layout style paint;
}
.cap-pill {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  background: rgba(14,17,20,0.72);
  color: #eef3f4;
  border: 1px solid rgba(238,243,244,0.8);
  border-radius: 99px;
  padding: 6px 11px;
 font: 500 0.7rem/1 "Nohemi", system-ui, sans-serif;
  transform: translate3d(-9999px, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cap-svc.is-active .cap-pill { opacity: 1; }

/* single call to action */
.caps__actions {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.caps__btn {
  position: relative; overflow: hidden;
  border-radius: 999px; display: inline-block; text-decoration: none;
}
.caps__btn span {
  display: block; padding: 0.7rem 1.35rem;
  font: 500 0.75rem/1 "Nohemi", sans-serif; letter-spacing: 0.04em;
  transition: transform 0.4s var(--ease);
}
.caps__btn .a { background: var(--accent); color: #08171a; }
.caps__btn .b { position: absolute; inset: 0; background: #f5f0e8; color: #0a0a0b; transform: translateY(100%); }
.caps__btn:hover .a { transform: translateY(-100%); }
.caps__btn:hover .b { transform: translateY(0); }

/* the per-service tag marquee only exists on phones */
.cap-marquee { display: none; }

/* ── phones AND tablets: stack into cards, physics off ──
   the desktop layout reserves .cap-dd headroom for pills that only ever
   appear on :hover, so any touch device was left with a tall empty gap and
   detached index numbers. Anything without a real hover pointer gets the
   card layout instead, regardless of width. ── */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .caps { padding: 2rem 1.15rem; }
  .caps__perf { display: none; }
  .caps__head { font-size: clamp(1.35rem, 7vw, 1.8rem); }
  .caps__sub { font-size: 0.86rem; margin-bottom: 1.1rem; }
  .caps__row { flex-direction: column; gap: 0.5rem; }
  .caps__row--sm { margin-bottom: 0.5rem; }
  .caps__rule { display: none; }
  .cap-idx { display: none; }
  .cap-dd, .cap-arena { display: none; }
  .cap-svc {
    width: 100%;
    align-items: stretch;
    cursor: default;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 0.85rem 1rem 1rem;
    background: linear-gradient(150deg, rgba(255,255,255,0.035), transparent);
  }
  .cap-stage { display: block; cursor: default; }
  .cap-word { color: #eef3f4; font-size: clamp(1.4rem, 7vw, 1.9rem); white-space: normal; }
  .cap-marquee {
    display: block; overflow: hidden; margin-top: 0.6rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .cap-marquee__track {
    display: flex; gap: 0.4rem; width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: capRun 18s linear infinite both;
  }
  /* every other card scrolls the other way so the section reads as alive */
  .cap-svc:nth-child(even) .cap-marquee__track {
    animation-duration: 22s;
    animation-direction: reverse;
  }
  .cap-tag {
    font: 500 0.62rem/1 "Nohemi", system-ui, sans-serif;
    color: #eef3f4;
    border: 1px solid rgba(238,243,244,0.5);
    border-radius: 99px; padding: 5px 9px; white-space: nowrap;
    background: rgba(14,17,20,0.62);
  }
  .caps__actions { margin-top: 1.75rem; padding-top: 1.5rem; }
  .caps__btn span { padding: 0.7rem 1.2rem; font-size: 0.72rem; }
}
@keyframes capRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cap-pill { transition: none; }
  .cap-marquee__track { animation-duration: 70s; }
}

/* ═══════════════════════════════════════════════════════
   NEED - "Tell us what you need" + "Contact us" (replaces old CTA)
   ═══════════════════════════════════════════════════════ */
.need {
  padding: 5rem clamp(1.25rem, 5vw, 4rem) 6rem;
  position: relative;
}
.need__inner { max-width: 1100px; margin: 0 auto; }

.need__step { display: none; }
.need__step.is-active { display: block; }

/* matches .about__title and .caps__head - Nohemi 500, tight tracking */
.need__title {
  font-family: "Nohemi", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-align: center;
  margin: 0 auto 1.75rem;
}

/* step 1 is centred; the contact step keeps its two-column layout */
.need__step--tech { text-align: center; }
.need__step--tech .need__pillbar-main { justify-content: center; }
.need__step--tech .need__grid { justify-content: center; }
.need__step--contact .need__title { text-align: left; margin-inline: 0; }

/* ---- step 1: pill bar ---- */
/* The bar is a capsule with one row of pills, but a dozen picks wrap it to
   three. Two things broke there: a 999px radius on a tall box curves so far
   in that the Next button sits outside the border, and Next - being just
   another flex item - got dragged onto whatever row the pills left it on.
   So: Next gets its own grid column (never moves, always vertically
   centred), and the radius is pinned to half the one-row height, which is
   the same capsule at one row and a clean rounded rect once it wraps. */
.need__pillbar {
  --need-bar-h: 68px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--need-bar-h) / 2);
  min-height: var(--need-bar-h);
  padding: 0.6rem 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 2.5rem;
}
/* Pin the columns by hand rather than letting auto-placement decide. Left to
   itself, anything that is not .need__next drops into the auto column, blows
   it out to the width of the pills and squeezes the prefix down to one word
   per line - which is exactly what a stale copy of the markup (no
   .need__pillbar-main wrapper) used to render. Everything except Next now
   stacks down column 1 no matter how the markup is shaped. */
.need__pillbar > * { grid-column: 1; min-width: 0; }
.need__pillbar > .need__next { grid-column: 2; grid-row: 1; }
.need__pillbar-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-width: 0;
}
.need__pillbar-prefix {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
}
/* display:contents, not flex - as its own flex item this span claimed the
   whole width of every line it wrapped onto, which bumped the + onto a line
   of its own. Dissolving the box lets the pills and the + share one flow, so
   the + always trails the last pill. #needPills is still the JS render
   target; only its box disappears, not the element. */
.need__pills { display: contents; }
.need__pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #062326;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.need__pill button {
  background: none; border: none; cursor: pointer;
  color: #062326; font-size: 0.85rem; line-height: 1; padding: 0;
}
.need__add {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent; color: var(--light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; cursor: default; flex-shrink: 0;
}
.need__next {
  align-self: center;
  padding: 0.7rem 1.5rem;
  font-size: 0.85rem;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.need__next.is-enabled { opacity: 1; pointer-events: auto; }

/* ---- step 1: tech grid ---- */
.need__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.75rem;
}
.need__row { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.need__row-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 1.1rem 0.2rem;
  font-family: "Nohemi", sans-serif;
  font-size: 1.02rem;
  color: var(--light);
}
.need__row-arrow { color: var(--accent); font-size: 0.85rem; flex-shrink: 0; }
.need__row-label { flex: 1; line-height: 1.25; }
.need__row-icon { color: rgba(255, 255, 255, 0.35); font-size: 0.95rem; flex-shrink: 0; }
.need__row-btn.is-selected .need__row-icon { color: var(--accent); }

/* ---- step 2: contact ---- */
.need__contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
.need__intro {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: 2rem;
}
.need__office { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.1rem; }
.need__office-city {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "Nohemi", sans-serif; font-weight: 600; font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.need__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
.need__office-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
.need__office-email { color: var(--accent); font-size: 0.85rem; }

.need__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 0.85rem; }
.need__field label {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 0.4rem;
}
.need__field input, .need__field textarea {
  width: 100%; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.6rem;
  padding: 0.75rem 0.9rem; color: var(--light); font-family: "Nohemi", sans-serif;
  font-size: 0.92rem; box-sizing: border-box;
}
.need__field input:focus, .need__field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(130, 202, 204, 0.15);
}
.need__field { margin-bottom: 0.85rem; }
.need__selection {
  background: rgba(255, 255, 255, 0.04); border-radius: 0.9rem;
  padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.need__selection-label {
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 0.6rem;
}
.need__selection-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.need__consent {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 1.3rem;
}
.need__consent input { width: auto; }
.need__consent-wrap { margin-bottom: 1.3rem; }
.need__consent-wrap .need__consent { margin-bottom: 0; }

/* Unticked-consent warning. Sits directly under the checkbox so the eye
   lands on it from the button, and the checkbox itself turns red too. */
.need__consent-error {
  margin-top: 0.5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem; line-height: 1.5; color: #ff6b57;
}
.need__consent-wrap.is-invalid .need__consent { color: #ff8f7a; }
.need__consent-wrap.is-invalid .need__consent input {
  outline: 2px solid #ff6b57; outline-offset: 2px; border-radius: 3px;
}
.need__consent-wrap.is-invalid { animation: needConsentNudge 0.4s ease; }
@keyframes needConsentNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .need__consent-wrap.is-invalid { animation: none; }
}

.need__submit { width: 100%; justify-content: center; }
.need__submit[disabled] { opacity: 0.55; cursor: progress; pointer-events: none; }
/* Locked, not disabled - the click must still reach the handler so we can
   say why the form did not send. */
.need__submit.is-locked { opacity: 0.5; cursor: not-allowed; }

/* Honeypot. Moved off-canvas rather than display:none, since the cruder
   bots skip anything that is outright hidden. */
.need__hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.need__status {
  margin-top: 0.85rem; min-height: 1.2em;
  font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; line-height: 1.5;
}
.need__status.is-error { color: #ff8f7a; }

.need__sent {
  text-align: left; padding: 0 0 2.5rem;
  font-family: "Nohemi", sans-serif;
}
.need__sent p:first-child { font-size: 1.15rem; color: var(--light); margin-bottom: 0.6rem; }
.need__sent p:last-child { font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); }
.need__back {
  margin-top: 2rem; background: none; border: none; color: rgba(255, 255, 255, 0.55);
  font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; cursor: pointer;
}
.need__back:hover { color: var(--light); }

@media (max-width: 1023px) {
  .need__grid { grid-template-columns: repeat(2, 1fr); }
  .need__contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 767px) {
  .need__grid { grid-template-columns: 1fr; }
  .need__form-row { grid-template-columns: 1fr; }
  .need__row-btn { font-size: 0.95rem; padding: 0.9rem 0.2rem; }
}

/* ═══════════════════════════════════════════════════════
   FOOTER - contact boxes (phone / address / email, hover video)
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   NAV OVERLAY - the page slides left and tilts to reveal it
   ═══════════════════════════════════════════════════════ */
.page-wrap {
  position: relative;
  z-index: 1;
  background: var(--black);
}
/* will-change and backface-visibility create a containing block, which breaks
   ScrollTrigger's pinned sections (they use position:fixed). So they are only
   applied while the nav is actually animating, never at rest. */
.page-wrap.is-shifting {
  will-change: transform;
  backface-visibility: hidden;
}
body.nav-open { overflow: hidden; width: 100%; }
/* the nav sits behind the page, so it must not scroll with it */
body.nav-open .site-nav { position: fixed; }

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #050607;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(1.5rem, 5vw, 4rem);
  pointer-events: none;
}
body.nav-open .site-nav { pointer-events: auto; }

.site-nav__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(0.15rem, 1vh, 0.5rem);
}
.nav-link {
  font-family: "Thunder", "Nohemi", sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f4f1ea;
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-link:hover { color: var(--accent); }

/* sits exactly where Menu was, and matches it pixel for pixel */
.nav-close {
  position: fixed;
  top: 1.15rem;
  right: clamp(1.25rem, 4vw, 2.75rem);
  /* sibling of .page-wrap, so this actually wins - inside .site-nav it was
     trapped in that element's stacking context and the page ate the clicks */
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Nohemi", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--light);
  background: rgba(12, 14, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
}
body.nav-open .nav-close { opacity: 1; pointer-events: auto; }
.nav-close:hover {
  background: rgba(12, 14, 15, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
}
/* an X built the same way as the hamburger */
.nav-close__x {
  position: relative;
  width: 14px;
  height: 9px;
  flex: none;
}
.nav-close__x span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--light);
}
.nav-close__x span:first-child { transform: translateY(-50%) rotate(45deg); }
.nav-close__x span:last-child  { transform: translateY(-50%) rotate(-45deg); }

/* the header buttons step aside while the menu is open */
.hdr-actions { transition: opacity 0.3s ease; }
body.nav-open .hdr-actions { opacity: 0 !important; pointer-events: none; }

.site-nav__meta {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4rem);
  bottom: clamp(1.5rem, 5vw, 4rem);
  text-align: right;
  font: 400 0.72rem/1.7 ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 234, 0.42);
}

/* roll-up label: the word lifts away and a copy rises into its place */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.roll__a, .roll__b {
  display: block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.roll__b {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.nav-link:hover .roll__a,
.nav-close:hover .roll__a { transform: translateY(-100%); }
.nav-link:hover .roll__b,
.nav-close:hover .roll__b { transform: translateY(0); }

@media (max-width: 640px) {
  .nav-link { font-size: clamp(2rem, 11vw, 3rem); }
  .site-nav__meta { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .roll__a, .roll__b { transition-duration: 0.2s; }
}

/* all four frames share the same 4/5 box - the landscape image simply
   sits centred inside it rather than reshaping the frame */
.flow-card--security .flow-card__imgFrame img {
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER - notched panel, logo centred, contact boxes closing it out
   Single source of truth. Do not add .footer rules elsewhere.
   ═══════════════════════════════════════════════════════════════════ */
.footer {
  --fr: clamp(16px, 2vw, 26px);
  --fpad: clamp(10px, 1.6vw, 20px);
  background: var(--accent);
  padding: 0 var(--fpad) 0;
  border: 0;
}
.footer__tab { height: clamp(26px, 3.2vw, 42px); position: relative; }
.footer__tab i {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: clamp(170px, 32%, 400px); height: 100%;
  background: var(--black);
}
.footer__tab--top i    { bottom: 0; border-radius: var(--fr) var(--fr) 0 0; }
.footer__tab--bottom i { top: 0;    border-radius: 0 0 var(--fr) var(--fr); }
.footer__tab i::before,
.footer__tab i::after { content: ""; position: absolute; width: var(--fr); height: var(--fr); background: var(--black); }
.footer__tab--top i::before {
  left: calc(-1 * var(--fr)); bottom: 0;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
  mask: radial-gradient(circle at 0 0, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
}
.footer__tab--top i::after {
  right: calc(-1 * var(--fr)); bottom: 0;
  -webkit-mask: radial-gradient(circle at 100% 0, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
  mask: radial-gradient(circle at 100% 0, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
}
.footer__tab--bottom i::before {
  left: calc(-1 * var(--fr)); top: 0;
  -webkit-mask: radial-gradient(circle at 0 100%, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
  mask: radial-gradient(circle at 0 100%, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
}
.footer__tab--bottom i::after {
  right: calc(-1 * var(--fr)); top: 0;
  -webkit-mask: radial-gradient(circle at 100% 100%, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
  mask: radial-gradient(circle at 100% 100%, #0000 0 var(--fr), #000 calc(var(--fr) + 0.5px));
}

.footer__panel {
  position: relative;
  overflow: hidden;
  background: var(--black);
  border-radius: clamp(20px, 2.6vw, 38px);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3.4vw, 3.25rem) 0;
}
.footer__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.footer__cols {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
.footer__eyebrow {
  font: 600 0.58rem/1 "Nohemi", sans-serif;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 244, 237, 0.42);
  margin: 0 0 0.85rem;
}
.footer__col a {
  display: block;
  font-family: "Nohemi", sans-serif;
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55;
  text-transform: uppercase;
  color: #f4f4ed;
  transition: color 0.25s ease;
}
.footer__col a:hover { color: var(--accent); }
.footer__col--right { text-align: right; }

.footer__mid { text-align: center; }
.footer__logo {
  height: clamp(46px, 6vw, 78px);
  width: auto;
  margin: 0 auto;
  display: block;
}
.footer__tagline {
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  line-height: 1.7;
  color: #ffffff;
  margin: 1rem 0 0;
}
.footer__cta {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(130, 202, 204, 0.5);
  text-underline-offset: 4px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.footer__cta:hover { color: #cfeff0; text-decoration-color: rgba(130, 202, 204, 0.9); }

/* ── contact boxes: hover behaviour kept exactly as it was ── */
.footer__boxes {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  overflow: hidden;
  margin: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.footer__box {
  position: relative;
  padding: 2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  min-height: 120px;
}
.footer__box:last-child { border-right: none; }
.footer__box--link { cursor: pointer; }
.footer__box-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.35s ease;
  filter: grayscale(0.25) brightness(0.55);
}
.footer__box--link:hover .footer__box-media { opacity: 0.6; }
.footer__box-content { position: relative; z-index: 1; }
.footer__box a {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer__box-addr { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.85); }
.footer__box-addr b { display: block; font-weight: 600; }

.footer__legal {
  background: var(--accent);
  text-align: center;
  padding: clamp(0.7rem, 1.4vw, 1rem) 0.75rem;
}
.footer__legal p { margin: 0; font: 500 0.68rem/1.5 "Nohemi", sans-serif; color: #08171a; }
.footer__legal a { color: #08171a; font-weight: 600; text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .footer__cols { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1.75rem; }
  .footer__col--right { text-align: center; }
  .footer__boxes { grid-template-columns: 1fr; }
  .footer__box { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .footer__box:last-child { border-bottom: none; }
  .footer__tab i { width: clamp(140px, 46%, 260px); }
}

/* ═══════════════════════════════════════════════════════
   TABLET & TOUCH REFINEMENTS
   Everything below fixes issues that only show up on phones
   and iPads: undersized artwork on tablets, tap targets below
   the 44px touch minimum, sub-11px text, and hover-only assets
   that a touch device can never reveal.
   ═══════════════════════════════════════════════════════ */

/* ---- portfolio: scale the printer + tickets up for tablets.
        The phone sizes (84vw) left a small card marooned on an
        820px iPad, so the mid range gets its own step. ---- */
@media (min-width: 601px) and (max-width: 1023px) {
  .work__printer { width: min(64vw, 520px); }
  .work-grid {
    width: min(68vw, 560px);
    height: clamp(320px, 34svh, 430px);
  }
}

/* ---- capabilities: two columns of cards on tablets instead of
        one tall stack, and a larger word size to match the screen ---- */
@media (min-width: 601px) and (max-width: 1023px) {
  .caps__row { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }
  .caps__row--sm { margin-bottom: 0.75rem; }
  .cap-svc { width: calc(50% - 0.375rem); }
  .cap-word { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
  .caps__head { font-size: clamp(1.7rem, 4vw, 2.4rem); }
  .caps__sub { font-size: 0.95rem; }
}

/* ---- text that fell under 11px on small screens ---- */
@media (max-width: 1023px) {
  .ticket__status { font-size: 0.7rem; }
  .about__mark-pill { font-size: 0.7rem; }
}

/* ---- touch targets: the 44px minimum. Padding is used rather than
        fixed heights so nothing is stretched out of proportion. ---- */
@media (hover: none) and (pointer: coarse) {
  /* --btn-h is the single source of truth both header buttons read from.
     Forcing min-height on .connect-btn instead grew its outer box while
     the coloured pill inside stayed at 36px, so the two buttons no
     longer lined up. Raising the variable keeps them identical. */
  .hdr-actions { --btn-h: 44px; }

  .logo { display: inline-flex; align-items: center; min-height: 44px; }

  .caps__btn span { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  .need__add { width: 34px; height: 34px; }

  .footer__col a,
  .footer__cta,
  .footer__box a {
    display: inline-block;
    padding-block: 0.4rem;
  }

  /* 1.2MB of hover-only artwork that a touch device can never show */
  .footer__box-media { display: none; }
}

/* ---- footer contact boxes: the email string overran its cell
        between 768px and 1023px ---- */
@media (max-width: 1023px) {
  .footer__box a { font-size: 0.78rem; overflow-wrap: anywhere; }
  .footer__box { padding-inline: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════
   PHONE & TABLET PASS - fit, portrait, and touch input
   Everything below fixes things that only go wrong off the
   desktop: content clipped inside pinned full-screen
   sections, portrait tablets running the desktop hero, and
   inputs that make iOS zoom the page.
   ═══════════════════════════════════════════════════════ */

/* ---- hero: portrait tablets ----
   initHeroBackground() moves the WebGL mark to the middle of the screen
   as soon as the viewport goes portrait (the ar < 1 branch). Below 760px
   the copy already drops to the bottom to clear it, but a portrait iPad
   is wider than that and was still centring the copy at 60% width - so
   the mark rendered straight through the headline. Same switch point as
   the shader, so the two can never disagree again.

   From 601px up, because the phone rule's 18vh bottom margin is measured
   against the viewport while the mark is sized against the viewport WIDTH
   - on a tall, wide screen like an iPad Mini that pushed the headline
   back up into the mark even with the copy bottom-aligned. 8vh clears it
   on every portrait tablet size. */
@media (max-aspect-ratio: 1 / 1) and (min-width: 601px) {
  .hero { align-items: flex-end; padding-bottom: 3.5rem; }
  .hero__copy { max-width: 100%; margin-left: 0; margin-bottom: 8vh; }
  .hero h1 { font-size: clamp(2.4rem, 6.2vw, 3.6rem); }
  .hero__intro { max-width: 52ch; }
}

/* ---- capabilities ---- */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  /* the heading keeps its desktop nowrap, so "We know what we're good
     at!" ran past the edge of a 360px phone and body{overflow-x:hidden}
     quietly clipped the end of it */
  .caps__head { white-space: normal; }
  /* the cards are different heights; flex-end left their tops ragged */
  .caps__row { align-items: stretch; }
}

/* ---- portfolio: landscape phone ----
   Head + printer housing + ticket stack is ~500px of fixed furniture in
   a 390px pinned stage. The housing is the part that is decoration
   rather than content, so it is what goes. */
@media (max-height: 560px) and (orientation: landscape) {
  .work__stage { padding-top: 3rem; padding-bottom: 0.5rem; }
  .work__printer { display: none; }
  .work__head { margin-bottom: 0.4rem; }
  .work__head .section__label { display: none; }
  .work__head .section__title { font-size: 1.3rem; }
  .work__count { margin-top: 0.3rem; font-size: 0.58rem; }
  .work-grid {
    width: min(34vw, 300px);
    height: clamp(150px, 52svh, 230px);
    margin-top: 0;
  }
}

/* ---- hero: landscape phone ----
   7rem of top padding inside a 390px-tall viewport pushed the headline
   most of the way off the screen before it had said anything. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { align-items: center; padding: 4.5rem clamp(1.25rem, 5vw, 4rem) 2.5rem; }
  .hero__copy { max-width: 62%; margin-left: 0; margin-bottom: 0; padding-top: 0; }
  .hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.4rem); line-height: 1.3; margin-bottom: 0.9rem; }
  .hero__intro { font-size: 0.92rem; line-height: 1.55; }
}

/* ---- about: the mark assembles on scroll instead of on hover ----
   paired with the touch branch in the about-mark module in main.js */
.about__mark.is-assembled .about__mark-pill-a { opacity: 0; }
.about__mark.is-assembled .about__mark-pill-b { opacity: 1; }

/* ---- testimonials ----
   without this the browser claims the gesture for scrolling and the
   rail never receives the pointermove, so the cards cannot be dragged.
   pan-y keeps vertical scrolling native and gives horizontal to the JS. */
.tst__rail { touch-action: pan-y; }

/* ---- forms: stop iOS zooming in on focus ----
   Mobile Safari zooms the whole page whenever a focused field is under
   16px, and it does not zoom back out afterwards - the visitor is left
   on a page wider than the screen for the rest of the session. */
@media (hover: none) and (pointer: coarse) {
  .need__field input,
  .need__field textarea { font-size: 16px; }
  .need__consent input { width: 18px; height: 18px; flex: none; }
  .need__consent { align-items: flex-start; }
  .need__row-btn { padding-block: 0.95rem; }
}

/* on a narrow screen even one pill wraps, so drop the capsule shape
   entirely and stack Next full-width under the pills */
@media (max-width: 640px) {
  .need__pillbar {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 1.25rem;
    min-height: 0;
    padding: 0.75rem 0.9rem;
    gap: 0.75rem;
  }
  .need__pillbar-main { gap: 0.5rem; }
  /* single column here, so Next has to come back out of column 2 or it
     would spawn an implicit one and sit off to the side */
  .need__pillbar > .need__next { grid-column: 1; grid-row: auto; }
  .need__next { width: 100%; justify-content: center; }
  .need { padding: 3.5rem 1.15rem 4rem; }
  .need__title { margin-bottom: 1.25rem; }
}


/* ===== LINK TO THE FULL PORTFOLIO =======================================
   Sits inside .work__head under the issuing count. These rules live here
   rather than in pages.css because index.html does not load pages.css,
   and it must not: pages.css forces .header opacity to 1, which would
   reveal the header before the preloader hands over. */
/* .work__head is pointer-events:none so the tickets behind it stay
   interactive. Re-enable it for this link only, or it cannot be clicked. */
.work__more { text-align: center; margin-top: 1.6rem; position: relative; z-index: 6; pointer-events: auto; }
.work__more a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.work__more a:hover,
.work__more a:focus-visible { color: var(--accent); border-color: var(--accent); }
.work__more span { transition: transform 0.6s var(--ease); }
.work__more .l { padding-right: 2px; }
.work__more .r { padding-left: 2px; }
.work__more a:hover .l { transform: translateX(-5px); }
.work__more a:hover .r { transform: translateX(5px); }
.work__more i { font-style: normal; margin: 0 6px; transition: transform 0.5s var(--ease); }
.work__more a:hover i { transform: translate(3px, -3px); }

/* ===== HOME PAGE BLOG + FAQ STRIPS =====================================
   Sit between the testimonials and the contact section. Card and
   accordion styling comes from pages.css, which the home page now loads
   as well; only the section chrome is defined here. */
.home-strip { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem); }
.home-strip__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); padding: 0 clamp(1.25rem, 5vw, 4rem); }
.home-strip .posts { padding-top: 0; padding-bottom: 0; }
.home-strip .faq { padding-top: 0; padding-bottom: 0; }
.home-strip .faq__group { max-width: 860px; margin-inline: auto; }
.home-strip .work__more { margin-top: clamp(2rem, 4vw, 3rem); }
.home-strip .pcard__title { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }


/* a project with no public URL keeps the ticket look but is not a link */
.ticket--private { cursor: default; display: block; }