/* ============ MJC Portfolio — styled on the MJC Personal Brand System ============ */
:root {
  /* ---- Brand tokens (mirrors tokens/colors.css in the design system) ---- */
  --mjc-ink: #0A0A0B;
  --mjc-ink-soft: #26262B;
  --mjc-paper: #FFFFFF;
  --mjc-paper-2: #F6F7F9;
  --mjc-paper-3: #EDEFF3;
  --mjc-gray-200: #E0E4EA;
  --mjc-gray-300: #CBD1DB;
  --mjc-gray-500: #7B8494;
  --mjc-gray-600: #5A6472;
  --mjc-gray-800: #2A2F38;
  --mjc-gray-900: #171A20;
  --mjc-blue: #26B2FC;
  --mjc-blue-bright: #48BBFD;
  --mjc-blue-deep: #0E86D8;
  --mjc-blue-ink: #075C97;
  --mjc-sky: #AAE0FD;
  --mjc-mist: #D5EEFF;
  --mjc-mist-2: #EAF6FF;
  --mjc-peach: #F3C7AD;
  --mjc-peach-deep: #E39C6E;
  --mjc-mauve: #C9A9B4;
  --mjc-lilac: #DEE2F6;
  --mjc-lilac-deep: #A9AEE0;
  --mjc-gradient:
    radial-gradient(120% 130% at 18% 8%, #F3C7AD 0%, rgba(243,199,173,0) 34%),
    radial-gradient(120% 120% at 88% 12%, #DEE2F6 0%, rgba(222,226,246,0) 38%),
    radial-gradient(140% 150% at 40% 45%, #26B2FC 0%, #48BBFD 38%, #AAE0FD 68%, #EAF6FF 100%);
  --mjc-gradient-cool: linear-gradient(135deg, #26B2FC 0%, #48BBFD 46%, #AAE0FD 100%);
  --mjc-gradient-warm: linear-gradient(120deg, #F3C7AD 0%, #C9A9B4 50%, #DEE2F6 100%);

  /* ---- Layout tokens (mirrors tokens/layout.css) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --shadow-md: 0 8px 24px rgba(16,32,48,0.10);
  --shadow-lg: 0 18px 48px rgba(16,32,48,0.14);
  --shadow-blue: 0 12px 32px rgba(38,178,252,0.28);
  --shadow-focus: 0 0 0 3px rgba(38,178,252,0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --container-max: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---- Typography (mirrors tokens/typography.css) ---- */
  --font-display: "Domine", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-body: 1.6;
  --ls-tight: -0.012em;
  --ls-overline: 0.16em;

  /* ---- Semantic aliases ---- */
  --ink: var(--mjc-ink);
  --paper: var(--mjc-paper);
  --accent: var(--mjc-blue-deep);      /* accessible action/text accent on white */
  --accent-bright: var(--mjc-blue);    /* highlights, rings, glow */
  --warm: var(--mjc-peach-deep);       /* the Work act warms up — borders/arrows only */
  --muted: var(--mjc-gray-600);        /* gray-500 failed AA at label sizes */
  --header-h: 72px;
  --section-pad: clamp(var(--space-9), 12vh, var(--space-10));
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--mjc-blue); color: #063A61; }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.accent { color: var(--accent); }

/* ============ SKIP LINK ============ */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; box-shadow: var(--shadow-lg); }

/* ============ PRELOADER ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.preloader-mark {
  height: 34px;
  width: auto;
  animation: preloaderPulse 1.1s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { opacity: .35; transform: scale(.98); }
  50%      { opacity: 1;   transform: scale(1); }
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.38));
  backdrop-filter: blur(24px) saturate(1.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.9);
  border-bottom: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 40px rgba(16,32,48,.08), inset 0 1px 0 rgba(255,255,255,.9);
  z-index: 100;
  transform: translateY(-110%);
  transition: transform .55s var(--ease-out);
}
.site-header.is-visible { transform: translateY(0); }
/* over the ink Contact section the white glass turned muddy gray — flip to dark glass */
.site-header { transition: transform .55s var(--ease-out), background .35s, border-color .35s, color .35s; }
.site-header.is-dark {
  background: linear-gradient(rgba(10,10,11,.62), rgba(10,10,11,.42));
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 10px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--paper);
}
.site-header.is-dark .nav-cta { background: var(--paper); color: var(--ink); }
.site-header.is-dark .nav-cta:hover { background: var(--mjc-blue); color: #063A61; }

.header-inner {
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-5), 4vw, var(--space-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-id { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.header-role {
  padding-left: var(--space-4);
  border-left: 1px solid var(--mjc-gray-300);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--muted);
}
.site-header.is-dark .header-role { color: rgba(255,255,255,.75); border-left-color: rgba(255,255,255,.28); }
@media (max-width: 860px) { .header-role { display: none; } }
.header-brand {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(19px, 5.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.header-nav { display: flex; align-items: center; gap: clamp(var(--space-4), 3vw, var(--space-6)); font-size: 15px; font-weight: 600; }
.header-nav a { position: relative; }
.header-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.header-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.nav-cta:hover { background: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-blue); }

.scroll-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; }
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: var(--mjc-gradient-cool);
}

/* ============ INTRO ============ */
.intro { height: 280dvh; position: relative; }
.intro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* signature gradient mesh — the real brand gradient, breathing in behind the mark */
.hero-mesh {
  position: absolute;
  z-index: 1;
  width: min(112vw, 1560px);
  aspect-ratio: 1.5;
  background: url("assets/hero-gradient.jpg") center / cover no-repeat;   /* MJC-Brand-Gradient, drawn in toward the centre so the peach + lilac survive the mask */
  border-radius: var(--radius-circle);
  filter: blur(26px) saturate(1.35);
  opacity: 0;
  transition: opacity 3.2s cubic-bezier(.4, 0, .2, 1) .35s;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 46%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 46%, transparent 74%);
}

/* typewriter */
.intro-type {
  position: absolute;
  z-index: 5;
  text-align: center;
  padding: 0 var(--space-5);
}
.type-line {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  min-height: 1.14em;
}
.type-line--sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 2.2vw, 24px);
  color: var(--ink);
  margin-top: var(--space-4);
  letter-spacing: .06em;
}
@media (max-width: 1090px) {
  .type-line--sub { color: var(--ink); }
}
/* the name, once typed: the About underline draws in slowly from the left.
   Deeper than the paragraph mist so it still reads over the hero gradient. */
.type-name {
  padding: 0 .06em;
  margin: 0 -.06em;
  background: linear-gradient(rgba(38,178,252,.42), rgba(38,178,252,.42)) no-repeat left bottom / 0% .34em;
  transition: background-size 2.2s cubic-bezier(.4, 0, .2, 1) .2s;
}
.type-name.is-drawn { background-size: 100% .34em; }
/* caret lives in a pseudo-element so it never enters the accessibility tree */
.type-line.is-typing::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: 1em;
  margin-left: .08em;
  background: var(--accent-bright);
  vertical-align: -0.12em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* logo assembly stage */
.logo-stage {
  position: relative;
  z-index: 4;
  width: min(86vw, 1160px);
  display: grid;
  justify-items: center;
}
.logo-box {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3086 / 1299;
}
/* piece placement — % of the 3086x1299 logo box, straight from Figma */
.piece { position: absolute; }
.logo-box:not(.is-settled) .piece { will-change: transform, opacity; }
#pieceM       { left: 0%;      top: 1.078%;  width: 45.301%; }
#pieceJtop    { left: 49.935%; top: 1.078%;  width: 19.799%; }
#pieceScurve  { left: 38.756%; top: 0%;      width: 61.212%; }
#pieceCbottom { left: 69.184%; top: 68.052%; width: 30.816%; }
.piece img { width: 100%; height: auto; }

/* scroll hint */
.scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 6;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.scroll-hint.is-on { opacity: 1; }
.hero-mesh.is-on { opacity: .5; }
.scroll-hint-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-hint-line {
  width: 1px; height: 44px;
  background: linear-gradient(var(--mjc-blue-deep), transparent);
  animation: hintDrop 1.6s ease-in-out infinite;
}
@keyframes hintDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============ FIRST SECTION AFTER THE HERO ============ */
/* the assembled logo sits mid-viewport with empty space under it; the next section slides up into that
   space (logo height = stage width x 1299/3086, plus a little air) so the two read as one beat.
   It arrives as a sheet with a soft top edge, so its text never sits on the hero gradient. */
.after-hero {
  --logo-stage-h: calc(min(86vw, 1160px) * .421 + 32px);
  --sheet-fade: 56px;
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * max(0px, (100svh - var(--logo-stage-h)) / 2));
}

/* ============ ABOUT ============ */
.about { padding: var(--section-pad) 0; }
.about-role {
  margin-bottom: var(--space-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--mjc-blue-ink);
}

/* ---- statement on the left, a large portrait on the right ---- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 25vw, 320px);
  align-items: center;
  gap: clamp(var(--space-6), 6vw, var(--space-9));
}
.about-lede {
  max-width: 24em;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.25vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
/* the soft underline, used sparingly */
.about-lede .ul,
.about-more .ul { box-shadow: inset 0 -0.34em 0 var(--mjc-mist); }
.about-more {
  max-width: 36em;
  margin-top: var(--space-5);
  font-size: clamp(16px, 1.5vw, 20px);      /* 10px under the lede at full size */
  line-height: var(--lh-body);
  color: var(--ink);
}
/* the portrait is a coin: pixel art on the face, the real photo on the back, same disc on both.
   Both images sit on white that matches the paper, so they need no frame. The wrapper holds the
   hover (it never rotates), so the pointer can't fall off the coin mid-flip. The turn itself is driven
   from script.js (--flip), which also swaps the faces at exactly 90 degrees. */
.about-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  perspective: 900px;
}
.about-coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--flip, 0deg));
}
.about-coin-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.about-coin-back { transform: rotateY(180deg); visibility: hidden; }
/* only the side facing you is drawn, so no browser can show the turned-away side mirrored */
.about-portrait.is-back .about-coin-face { visibility: hidden; }
.about-portrait.is-back .about-coin-back { visibility: visible; }
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-portrait { order: -1; width: min(190px, 52vw); margin-left: -4%; }
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: clamp(var(--space-7), 8vh, var(--space-9));
}
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-7); }
}
.fact { display: grid; gap: var(--space-1); align-content: start; }
.fact-num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.fact-num.plus::after { content: "+"; color: var(--accent-bright); }
.fact-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ WORK ============ */
.work { background: var(--mjc-paper-2); padding: var(--section-pad) 0; }
.work.after-hero {
  padding-top: calc(var(--sheet-fade) + var(--space-5));
  background: linear-gradient(to bottom, rgba(246,247,249,0) 0, var(--mjc-paper-2) var(--sheet-fade));
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(var(--space-6), 6vh, var(--space-8));
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

/* masked editorial title reveal — the serif rises out of a clipped line */
.title-mask { display: block; overflow: hidden; }
.title-mask > * {
  transform: translateY(112%) rotate(2.5deg);
  transform-origin: left bottom;
  transition: transform 1s var(--ease-out) .12s;
}
.reveal.is-in .title-mask > *,
.title-mask.reveal.is-in > * { transform: none; }

/* asymmetric grid on a steady 2-column base: wide cards span both */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-5), 3vw, var(--space-6));
}
.card--feature {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
}
/* below 860px the text column is too narrow for the award badge on one line, so the feature card
   stacks (image on top) while still spanning the full row */
@media (max-width: 860px) {
  .card--feature { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .card--feature { grid-column: auto; }
}

.card {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--mjc-paper-3);
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--warm);
}
.thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: var(--mjc-paper-3);
}
/* the image fills its column and matches the text column's height. No aspect-ratio here: with one, a tall
   text column made the image wider than its column and it slid over the text. */
.card--feature > * { min-width: 0; }
.card--feature .thumb { aspect-ratio: auto; height: 100%; min-height: clamp(240px, 28vw, 400px); }
/* feature meta fills the column: the badge, title, subheader and company pill sit together mid-height */
.card--feature .card-meta {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-6) var(--space-6) var(--space-7);
}
.card--feature .card-award { margin-top: auto; margin-bottom: var(--space-3); }
.card--feature .card-company { margin-bottom: auto; }
@media (max-width: 860px) {
  .card--feature .thumb { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .card--feature .card-meta { padding: var(--space-5) var(--space-7) var(--space-5) var(--space-5); }
}
.thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.card:hover .thumb > img { transform: scale(1.05); }
.thumb-veil {
  position: absolute;
  inset: 0;
  background: rgba(10,10,11,.45);
  opacity: 0;
  transition: opacity .35s;
}
.card:hover .thumb-veil { opacity: 1; }

.card-meta { padding: var(--space-5) var(--space-8) var(--space-6) var(--space-6); }
.card-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.card--feature .card-title { font-size: clamp(22px, 2.6vw, 32px); }
/* the real control: a button stretched over the whole card */
.card-trigger {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.card-trigger::after { content: ""; position: absolute; inset: 0; }
.card-trigger:focus-visible::after { box-shadow: inset var(--shadow-focus); border-radius: var(--radius-lg); }
/* outcome subheader: the result, right under the header */
.card-outcome {
  font-size: clamp(15px, 1.4vw, 16.5px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--mjc-gray-600);
  margin-top: var(--space-2);
  text-wrap: pretty;
}
/* company pill: who the work was for */
.card-company {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.card-pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mjc-gray-600);
  border: 1px solid var(--mjc-gray-200);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
/* award callout: a yellow badge — amber ink on pale gold keeps it readable */
.card-award {
  white-space: nowrap;                     /* "Awarded Best for XR Headsets" always on one line */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #6B4A00;
  background: #FFEFB0;
  border: 1px solid #F2C230;
  border-radius: var(--radius-pill);
  padding: 2px 10px 2px 6px;
}
.card-award svg { flex: none; width: 15px; height: 15px; color: #D69A00; }
.card-arrow {
  position: absolute;
  right: var(--space-6); bottom: var(--space-6);
  font-size: 22px;
  line-height: 1;
  transform: translateX(-8px);
  opacity: 0;
  transition: transform .35s, opacity .35s;
}
.card:hover .card-arrow { transform: translateX(0); opacity: 1; color: var(--warm); }

/* ============ CONTACT ============ */
.contact {
  background: var(--mjc-ink);
  color: var(--paper);
  padding: var(--section-pad) 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  left: 50%; top: -20%;
  width: 120vw; aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: url("assets/brand-gradient-sm.jpg") center / cover no-repeat;
  filter: blur(80px);
  opacity: .2;
  pointer-events: none;
}
.contact > * { position: relative; }
.contact-mark-wrap {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --pos: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry));
  display: grid;
  place-items: center;
  width: fit-content;
  margin: 0 auto clamp(var(--space-6), 5vh, var(--space-7));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  /* it's a button (it opens the business card), so clear the browser's button look */
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.contact-mark {
  width: clamp(120px, 15vw, 168px);
  height: auto;
  filter: invert(1);                      /* white on ink at rest */
  transition: filter .825s var(--ease-out);   /* the fade back out; :hover sets the quick fade in */
}
.contact-mark-wrap:hover .contact-mark { filter: none; transition-duration: .3s; }   /* black on the gradient, like the card back */
/* hover: the same face as the back of the business card — the brand gradient at full strength, framed the
   same way, with a soft-light foil and a glint that follow the pointer.
   The tile lives on ::before so it can fade (a background image can't transition). */
.contact-mark-wrap::before, .contact-title .accent::before,
.contact-mark-wrap::after,  .contact-title .accent::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease-out);   /* the fade back out; :hover sets the quick fade in */
}
.contact-mark-wrap::before, .contact-title .accent::before {
  background:
    /* the card's iridescent foil, drifting with the pointer… */
    linear-gradient(115deg,
      transparent 10%,
      rgba(170,224,253,.95) 28%, rgba(243,199,173,.95) 40%, rgba(222,226,246,.95) 52%,
      rgba(169,174,224,.95) 64%, rgba(72,187,253,.9) 76%,
      transparent 92%) var(--pos) 50% / 260% 260% no-repeat,
    /* …over the brand gradient, enlarged and pinned top-left exactly as on the card back */
    url("assets/brand-gradient.jpg") 15% 10% / 140% auto no-repeat;
  background-blend-mode: soft-light, normal;
}
.contact-mark-wrap::after, .contact-title .accent::after {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
}
.contact-mark-wrap:hover::before, .contact-title .accent:hover::before { opacity: 1; transition-duration: .4s; }
.contact-mark-wrap:hover::after,  .contact-title .accent:hover::after  { opacity: .8; transition-duration: .4s; }
.contact-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.contact-title .accent {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --pos: 50%;
  position: relative;
  isolation: isolate;
  /* no overflow:hidden here — on an inline-block it moves the baseline and lifts the word */
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry));
  display: inline-block;
  color: var(--mjc-blue-bright);
  border-radius: .14em;
  padding: 0 .12em;
  margin: 0 -.12em;                       /* pad the highlight without shifting the line */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color .825s var(--ease-out);   /* the fade back out; :hover sets the quick fade in */
}
.contact-title .accent:hover { color: var(--ink); transition-duration: .3s; }   /* black on the gradient */

.contact-form {
  position: relative;
  scroll-margin-top: calc(var(--header-h) + var(--space-5));   /* lands clear of the fixed header */
  max-width: 640px;
  margin: clamp(var(--space-7), 6vh, var(--space-8)) auto 0;
  min-height: 438px;   /* reserve the Tally starting height so the footer doesn't jump */
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

/* ---- social links under the form ---- */
.contact-social {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-top: clamp(var(--space-6), 5vh, var(--space-7));
}
.contact-social-label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.contact-social-links { display: flex; justify-content: center; gap: var(--space-3); }
/* the same badges as on the business card: a white logo on a blue rounded square */
.social-link { display: inline-flex; border-radius: var(--radius-sm); }
.social-link svg {
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--mjc-blue-deep);
  color: #fff;
  transition: background .2s, transform .2s;
}
.social-link:hover svg { background: var(--mjc-blue-bright); transform: translateY(-2px); }

.footer {
  margin-top: clamp(var(--space-8), 12vh, var(--space-10));
  padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-7));
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid;
  grid-template-columns: 1fr auto 1fr;     /* copyright · logo · back to top */
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.footer > :first-child { justify-self: start; }
.back-top { justify-self: end; }
.footer .contact-mark-wrap { margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }
.footer .contact-mark { width: clamp(64px, 7vw, 88px); }
.back-top:hover { color: var(--mjc-blue-bright); }

/* ============ MODAL ============ */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(var(--space-4), 4vw, var(--space-7));
}
.modal[hidden] { display: none; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,11,.5);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  animation: overlayIn .35s var(--ease-out);
}
@keyframes overlayIn { from { opacity: 0; } }
.modal-dialog {
  position: relative;
  width: min(720px, 100%);
  animation: dialogIn .45s var(--ease-out);
}
.modal-scroll {
  max-height: min(86vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;                   /* the blue progress line stands in for the scrollbar */
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.modal-scroll::-webkit-scrollbar { display: none; }
/* scroll progress for the case study: the header's blue line, turned on its side where the scrollbar would be */
.modal-progress {
  position: absolute;
  top: var(--radius-xl);
  bottom: var(--radius-xl);
  right: 5px;
  z-index: 2;
  width: 3px;
  border-radius: 3px;
  pointer-events: none;
}
.modal-progress span {
  display: block;
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #26B2FC 0%, #48BBFD 46%, #AAE0FD 100%);
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
}
.modal-close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  z-index: 2;
  width: 40px; height: 40px;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .2s, background .2s, color .2s;
}
.modal-close:hover { transform: rotate(90deg); background: var(--mjc-blue-deep); color: #fff; }

/* ============ BUSINESS CARD POP-UP (the footer logo opens it) ============ */
.cardpop-dialog {
  position: relative;
  width: min(560px, 100%);
  animation: cardIn .6s var(--ease-out);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(.9); }
}
.cardpop-hint {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* the card: two sides, a holographic foil, and it tilts toward the pointer */
.bizcard {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --pos: 50%; --flip: 0deg;
  width: 100%;
  aspect-ratio: 1.62;
  perspective: 1400px;
  border-radius: var(--radius-xl);
  cursor: pointer;
}
.bizcard:focus { outline: none; }
.bizcard:focus-visible { box-shadow: 0 0 0 3px rgba(72,187,253,.7); }
.bizcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* tilt (--rx, --ry) and flip (--flip) are both eased in script.js, frame by frame; a CSS transition here
     would restart on every pointer move and make the flip stutter */
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));
}
.bizcard-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.5) inset;
  transition: box-shadow .6s var(--ease-out);
}
/* Only the side facing you is ever drawn. Some browsers (Safari) let the turned-away side show through
   mirrored despite backface-visibility, so script.js switches the faces outright as the card passes edge-on. */
.bizcard-back { visibility: hidden; }
.bizcard.is-back .bizcard-front { visibility: hidden; }
.bizcard.is-back .bizcard-back { visibility: visible; }
.bizcard.is-active .bizcard-face {
  box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 44px rgba(38,178,252,.28), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.bizcard-front {
  transform: rotateY(0deg);                /* gives Safari a 3D layer to apply backface-visibility to */
  color: var(--ink);
  /* pearl, not pure white — a white glint needs something to brighten */
  background: linear-gradient(135deg, #F7F9FC 0%, #ECF1F7 45%, #DFEBF8 100%);
}
.bizcard-back {
  transform: rotateY(180deg);
  /* enlarged and pinned top-left, which keeps the image's bottom-right corner mark out of frame */
  background: url("assets/brand-gradient.jpg") 15% 10% / 140% auto no-repeat;
}
/* iridescent foil in the brand's own palette */
.bizcard-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 10%,
    rgba(170,224,253,.95) 28%, rgba(243,199,173,.95) 40%, rgba(222,226,246,.95) 52%,
    rgba(169,174,224,.95) 64%, rgba(72,187,253,.9) 76%,
    transparent 92%);
  background-size: 260% 260%;
  background-position: var(--pos) 50%;
  mix-blend-mode: multiply;
  opacity: .34;
  transition: opacity .5s var(--ease-out);
}
.bizcard-back .bizcard-foil { mix-blend-mode: soft-light; opacity: .7; }
.bizcard.is-active .bizcard-foil { opacity: .66; }
.bizcard.is-active .bizcard-back .bizcard-foil { opacity: .9; }
.bizcard-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.bizcard.is-active .bizcard-glare { opacity: 1; }
.bizcard-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(var(--space-4), 5vw, var(--space-6));
}
.bizcard-photo {
  width: clamp(60px, 16vw, 92px);
  height: clamp(60px, 16vw, 92px);
  border-radius: var(--radius-circle);
  object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(16,32,48,.16);
}
.bizcard-id { display: grid; gap: var(--space-1); }
.bizcard-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
}
.bizcard-title { font-size: clamp(14px, 3.4vw, 18px); font-weight: 600; color: var(--mjc-blue-ink); }
.bizcard-tagline { font-size: clamp(12px, 2.9vw, 15px); color: var(--mjc-gray-600); }
.bizcard-contacts {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(16,32,48,.12);
}
.bizcard-contact { display: inline-flex; border-radius: var(--radius-sm); }
.bizcard-contact svg {
  width: 36px; height: 36px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--mjc-blue-deep);
  color: #fff;
  transition: background .2s, transform .2s;
}
.bizcard-contact:hover svg { background: var(--mjc-blue-ink); transform: translateY(-1px); }
/* bottom right: closes the card and goes back to the form */
.bizcard-cta {
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.bizcard-cta:hover { background: var(--mjc-blue-deep); transform: translateY(-1px); }
.bizcard-back-content { align-items: center; justify-content: center; }
.bizcard-back-logo { width: 52%; height: auto; }
@media (max-width: 520px) {
  .bizcard { aspect-ratio: 1.45; }
  .bizcard-contact svg { width: 32px; height: 32px; padding: 7px; }
}

/* previous / next project — flank the dialog on wide screens */
.modal-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  /* the same glass as the top banner: frosted white, a bright rim, a soft shadow */
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--radius-circle);
  background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.38));
  backdrop-filter: blur(24px) saturate(1.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.9);
  box-shadow: 0 10px 40px rgba(16,32,48,.18), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  transform: translateY(-50%);
  transition: background .2s, color .2s, transform .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.modal-prev { right: calc(100% + var(--space-5)); }
.modal-next { left: calc(100% + var(--space-5)); }
.modal-nav:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 14px 44px rgba(16,32,48,.24), inset 0 1px 0 #fff; opacity: 1; }
.modal-prev:hover { transform: translateY(-50%) translateX(-3px); }
.modal-next:hover { transform: translateY(-50%) translateX(3px); }
/* narrower screens: float them over the dialog's bottom corners */
@media (max-width: 960px) {
  .modal-nav {
    top: auto;
    bottom: var(--space-3);
    width: 46px; height: 46px;
    transform: none;
    /* over the white case study the glass needs a firmer edge to read */
    background: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.58));
    border-color: rgba(203,209,219,.8);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .modal-prev { right: auto; left: var(--space-3); }
  .modal-next { left: auto; right: var(--space-3); }
  .modal-prev:hover, .modal-next:hover { transform: none; }
  .modal .pm-body { padding-bottom: var(--space-10); }   /* beats the base .pm-body declared later */
}

/* case-study content */
.pm-hero {
  width: 100%;
  height: clamp(220px, 42vw, 380px);
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--mjc-paper-3);
}
.pm-hero img,
.pm-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ken Burns: a slow 5% push in and back out, easing at both ends */
.ken-burns {
  transform-origin: center center;
  animation: kenBurns 26s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.05) translate3d(-1%, -0.8%, 0); }
}
.pm-body { padding: clamp(var(--space-5), 4vw, var(--space-8)); }
.pm-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
  padding-right: var(--space-7);   /* clear of the close button */
}
.pm-outcome {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--mjc-gray-600);
  margin-top: var(--space-2);
}
/* the award badge from the home card, under the subheader */
.pm-badge { margin-top: var(--space-3); }
/* tag pills sit above the title as category labels */
.pm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.pm-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mjc-gray-600);
  border: 1px solid var(--mjc-gray-200);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
/* one labelled spec row: project · role */
.pm-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--mjc-gray-200);
  border-bottom: 1px solid var(--mjc-gray-200);
}
.pm-specs > div { display: grid; gap: var(--space-1); align-content: start; }
.pm-specs dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pm-specs dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 640px) {
  .pm-specs { grid-template-columns: 1fr; }
}
.pm-section { margin-top: var(--space-6); }
/* links close the case study */
.pm-section--links { margin-top: var(--space-6); }
.pm-section h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.pm-section p { font-size: 15.5px; line-height: var(--lh-body); color: var(--mjc-ink-soft); }
.pm-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pm-link {
  font-family: var(--font-body);
  font-size: 13px;                         /* same text as the Highlights pills */
  font-weight: 600;
  background: var(--mjc-mist-2);
  color: var(--mjc-blue-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  transition: background .2s, color .2s, transform .2s;
}
.pm-link:hover { background: var(--mjc-blue-deep); color: #fff; transform: translateY(-1px); }
/* Highlights — its label sits above like every other section; the box holds one sentence, then the numbers */
.pm-highlights {
  margin-top: var(--space-3);
  padding: var(--space-5);
  background: rgba(234, 246, 255, .9);        /* --mjc-mist-2 at 90% */
  border: 1px solid rgba(170, 224, 253, .9);   /* --mjc-sky at 90% */
  border-left: 4px solid rgba(14, 134, 216, .9); /* --mjc-blue-deep at 90% */
  border-radius: var(--radius-md);
}
.pm-section .pm-highlights p { font-size: 15.5px; line-height: var(--lh-body); font-weight: 600; color: var(--mjc-ink); }
.pm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.pm-stats li {
  font-size: 13px;
  font-weight: 600;
  color: var(--mjc-blue-ink);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(170, 224, 253, .9);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
/* award: the trophy and what it was for, in a gold-outlined box */
.pm-award {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1.5px solid #F2C230;
  border-radius: var(--radius-md);
}
.pm-award img { flex: none; width: clamp(96px, 22vw, 132px); height: auto; border-radius: var(--radius-sm); }
.pm-award-text { display: grid; gap: var(--space-1); }
.pm-award-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mjc-blue-ink);
}
.pm-award-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.pm-award-title svg { flex: none; width: 22px; height: 22px; color: #D69A00; }   /* the same trophy as the home card */
.pm-award-detail { font-size: 15.5px; line-height: var(--lh-body); color: var(--mjc-ink-soft); }   /* same as the other body text */

/* ============ REVEAL ON SCROLL ============ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============ SMALL SCREENS ============ */
@media (max-width: 640px) {
  .header-nav { gap: var(--space-4); font-size: 14px; }
  /* phones: the name and the CTA are what fit — Work/About stay one tap away via the page itself */
  .header-nav a:not(.nav-cta) { display: none; }
  .nav-cta { padding: var(--space-2) var(--space-4); }
  .section-head { flex-direction: column; gap: var(--space-2); }
  .card-meta { padding: var(--space-5) var(--space-7) var(--space-5) var(--space-5); }
  .card-arrow { right: var(--space-4); bottom: var(--space-5); }
  .footer { grid-template-columns: 1fr; justify-items: center; gap: var(--space-4); text-align: center; }
  .footer > :first-child, .back-top { justify-self: center; }
  .footer .contact-mark-wrap { order: -1; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint-line, .preloader-mark { animation: none !important; }
  .type-line.is-typing::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .title-mask > * { transform: none; transition: none; }
  .modal-overlay, .modal-dialog, .cardpop-dialog { animation: none; }
  .thumb > img, .card, .card-arrow { transition: none; }
  .ken-burns { animation: none; }
  .type-name, .contact-mark, .contact-title .accent, .hero-mesh, .scroll-hint { transition: none !important; }
  .social-link svg, .bizcard-face { transition: none !important; }
}