:root {
  --ink: #1f1f1f;
  --muted-ink: rgba(31, 31, 31, 0.68);
  --grey: #d9d9d9;
  --line: rgba(31, 31, 31, 0.34);
  --green: #027b49;
  --yellow: #fbb833;
  --pink: #f92779;
  --red: #fa4d43;
  --magenta: #fe16a7;
  --blue: #2458ff;
  --white: #f7f3ea;
  --orange: #f5772b;
  --sky: #92c4e9;
  --lilac: #b697e3;
  --chartreuse: #c9d64f;
  --mint: #9ed9a8;
  --mustard: #d9a114;
  --service-coral: #d96a61;
  --service-apricot: #e2b958;
  --service-stone: #d9844a;
  --service-sage: #2f7a59;
  --service-cream: #d993b7;
  --service-blue: #4e72d9;
  --service-warm-grey: #9dbfdc;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--grey);
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
}

/* Homepage content bounded to 1570; the full-color / black sections stay full-bleed */
.entry-screen {
  max-width: 1570px;
  margin-inline: auto;
}

body.custom-cursor,
body.custom-cursor a,
body.custom-cursor button {
  cursor: none;
}

body.custom-cursor .brand-panel,
body.custom-cursor .service-panel,
body.custom-cursor .brand-panel a,
body.custom-cursor .service-panel a {
  cursor: pointer;
}

body.custom-cursor.panel-cursor .cursor-cloud {
  opacity: 0;
}

a {
  color: inherit;
}

.cursor-cloud {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: clamp(28px, 3.4vw, 48px);
  aspect-ratio: 1;
  border-radius: 47% 53% 58% 42% / 42% 48% 52% 58%;
  background:
    radial-gradient(circle at 62% 60%, rgba(254, 22, 167, 0.98), rgba(254, 22, 167, 0.62) 55%, transparent 74%);
  box-shadow: 0 0 24px rgba(254, 22, 167, 0.5);
  filter: blur(2.5px);
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  will-change: transform;
}

.cursor-cloud.is-visible {
  opacity: 1;
}

.entry-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding: clamp(22px, 4vh, 44px) clamp(24px, 7vw, 120px) clamp(26px, 4vh, 52px);
  background: var(--grey);
}

.entry-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
}
.social-icons a {
  display: inline-flex;
  padding: 6px;
  margin: -6px;
  color: var(--ink);
  transition: color 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-icons svg { pointer-events: none; }
.social-icons a:hover,
.social-icons a:focus-visible {
  color: var(--magenta);
  transform: translateY(-4px) scale(1.18) rotate(-4deg);
}
.social-icons svg {
  width: clamp(19px, 1.9vw, 24px);
  height: auto;
  display: block;
}

/* Contact icons on the dark About screens (replaces the old "Get in touch") */
.about-icons {
  margin-top: clamp(22px, 3.4vh, 40px);
  gap: clamp(18px, 2vw, 28px);
}
.about-icons a { color: var(--white); }
.about-icons svg { width: clamp(19px, 1.9vw, 24px); }

.entry-topbar .eyebrow {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.hero-statement {
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 8vh, 110px);
}

.hero-line {
  max-width: 42ch;
  margin: 0;
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.5rem, 3.7vw, 3.7rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.hero-verb {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.5rem, 3.7vw, 3.7rem);
  line-height: 1;
  text-transform: uppercase;
}
.hero-verb-static { margin-right: 0.2em; }
.hero-verb-flip {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}
.hero-verb-track {
  display: block;
  animation: verbFlip 9s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.hero-verb-track span { display: block; height: 1em; }

@keyframes verbFlip {
  0%, 26% { transform: translateY(0); }
  33%, 59% { transform: translateY(-1em); }
  66%, 92% { transform: translateY(-2em); }
  100% { transform: translateY(-3em); }
}

.marquee {
  overflow: hidden;
  padding: clamp(10px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--line);
  background: var(--grey);
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 3.2rem);
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
}

.marquee-designer,
.designer-path,
.marquee-brand,
.brand-path {
  display: none;
}

body.show-designers .marquee-designer,
body.show-designers .designer-path,
body.show-brands .marquee-brand,
body.show-brands .brand-path {
  display: block;
}

.marquee-track {
  display: inline-flex;
  animation: marqueeScroll 22s linear infinite;
}

.marquee-track-reverse {
  animation-direction: reverse;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.contact-links {
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  font-size: clamp(0.68rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.contact-links a {
  text-decoration-color: rgba(31, 31, 31, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Two door cards in Inna's original style: color face + offset color stripes */
.brick-doors {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 76px);
  width: 100%;
  margin-top: auto;
  padding-right: 14px;
}

/* Hero/door position on desktop, from the design playground. Responsive
   (clamp) instead of fixed px so it holds at any desktop viewport height.
   Scoped to min-width:881px so mobile (max-width:880px) is untouched. */
@media (min-width: 881px) {
  .hero-statement { margin-top: clamp(28px, 8vh, 110px); }
  .brick-doors { margin-bottom: clamp(16px, 3.3vh, 44px); }
}

.door-btn {
  display: block;
  color: var(--white);
  text-decoration: none;
}
.door-btn:focus-visible { outline: none; }

/* Mobile-only entry buttons; the desktop doors above stay untouched. Shown only
   inside the max-width:880px block further down (same hide/show pattern the site
   uses for the marquees + path sections). */
.entry-cards { display: none; }

.door {
  position: relative;
  display: block;
  height: clamp(260px, 44vh, 460px);
  overflow: hidden;
  box-shadow:
    0 18px 0 var(--bottom),
    18px 0 0 var(--side),
    18px 18px 0 var(--side);
}
.door-a .door { --face: var(--magenta); --side: var(--blue); --bottom: var(--yellow); }
.door-b .door { --face: var(--green); --side: var(--pink); --bottom: var(--yellow); }

/* The window revealed when the face slides open on hover */
.door-window {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 52% 62%, rgba(249, 39, 121, 0.55), transparent 55%),
    var(--ink);
  color: var(--white);
}
.door-window-label {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 3.6rem);
  line-height: 0.86;
  text-align: center;
  text-transform: uppercase;
}

/* The colored face that slides away to open the window */
.door-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2vw, 34px);
  background: var(--face);
  /* closing uses this transition; opening is the keyframed swing below */
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Opens with a soft double swing that fades out into finer and finer
   settles, like a real door coming to rest. The transform is ALSO declared
   here so that on mouse-out the property animates back through the
   transition above instead of snapping shut. */
@keyframes doorOpen {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(92%); }
  57%  { transform: translateX(85%); }
  67%  { transform: translateX(90.5%); }
  76%  { transform: translateX(86.6%); }
  84%  { transform: translateX(89.3%); }
  91%  { transform: translateX(87.5%); }
  96%  { transform: translateX(88.4%); }
  100% { transform: translateX(88%); }
}
.door-btn:hover .door-face,
.door-btn:focus-visible .door-face {
  transform: translateX(88%);
  animation: doorOpen 1.45s cubic-bezier(0.4, 0, 0.3, 1) forwards;
}
.door-btn:focus-visible .door { outline: 3px solid var(--ink); outline-offset: 5px; }

.door-kicker {
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.66rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: 0.85;
}

.door-headline {
  /* Line break is explicit (<br> in the markup) on both doors now, so width
     no longer needs to force the wrap - just wide enough that neither line
     wraps a second time. */
  max-width: none;
  margin-top: auto;
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.path-section {
  background: var(--grey);
  padding: 0;
}

.path-intro {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 3.4fr);
  gap: 24px;
  align-content: start;
  min-height: 52vh;
  padding: clamp(20px, 3vw, 44px) clamp(16px, 2.5vw, 40px) clamp(70px, 14vh, 160px);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.path-intro span {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 500;
  text-transform: none;
}

.path-intro h2 {
  max-width: 26ch;
  margin: 0;
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.9rem, 3.9vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: none;
}

.designer-path .path-intro,
.brand-path .path-intro {
  display: grid;
  height: 100vh;
  height: 100svh;
  grid-template-columns: 1fr;
  align-content: center;
  overflow: visible;
  padding: clamp(24px, 4vw, 56px);
  border-top: 0;
  background: var(--ink);
  color: var(--white);
}

.designer-path .path-intro span,
.brand-path .path-intro span {
  margin-bottom: 18px;
  font-size: clamp(0.86rem, 1.2vw, 1.1rem);
  font-weight: 800;
  text-transform: uppercase;
}

.designer-path .path-intro h2,
.brand-path .path-intro h2 {
  max-width: min(1280px, 94vw);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.9rem, 4.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.panel-stack,
.service-grid {
  position: relative;
}

.stack-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.brand-panel,
.service-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: none;
  border-left: 1px solid var(--ink);
  color: var(--ink);
  overflow: hidden;
  transform: translateX(110%);
  will-change: transform;
  cursor: pointer;
}

.brand-panel:first-child,
.service-panel:first-child {
  transform: translateX(0);
}

.panel-green { background: var(--green); }
.panel-yellow { background: var(--yellow); }
.panel-pink { background: #f19ec8; }
.panel-red { background: var(--red); }
.panel-blue { background: var(--blue); }

.panel-number {
  position: absolute;
  top: 50%;
  left: clamp(16px, 2.5vw, 40px);
  z-index: 2;
  margin: 0;
  transform: translateY(-50%);
  font-family: "League Gothic", "Arial Narrow", sans-serif;
  font-size: clamp(24rem, 132vh, 74rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.73;
  color: var(--ink);
  pointer-events: none;
}

/* Brand cards carry no number in Inna's layout */
.brand-panel .panel-number { display: none; }

/* Forces League Gothic (used only by the big numbers) to load on page-load */
.font-preload {
  position: absolute;
  left: -9999px;
  top: 0;
  font-family: "League Gothic", sans-serif;
  font-size: 40px;
  pointer-events: none;
  user-select: none;
}

/* ===== Brand panel (designer path): wide image top, color + copy + portrait below ===== */
.brand-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54%;
  margin: 0;
  overflow: hidden;
  z-index: 1;
  border-bottom: 1px solid var(--ink);
}
.brand-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-portrait {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 3.5vw, 72px);
  top: 58%;
  bottom: clamp(28px, 6vh, 60px);
  width: auto;
  aspect-ratio: 0.8;
  margin: 0;
  overflow: hidden;
}
.brand-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.designer-portrait img {
  filter: grayscale(1) contrast(1.06);
}

.brand-copy {
  position: absolute;
  z-index: 3;
  top: 58%;
  /* Tracks the portrait's REAL edge (its width is height-driven via
     aspect-ratio, so this must scale with the same vh terms) instead of a
     fixed px/vw distance. That way the photo always renders full-size,
     uncropped, on any screen - the text column moves and reflows instead. */
  left: calc(clamp(24px, 3.5vw, 72px) + (42svh - clamp(28px, 6vh, 60px)) * 0.8 + 65px);
  right: clamp(24px, 3.5vw, 72px);
  max-width: 740px;
  bottom: clamp(28px, 6vh, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ink);
  overflow: hidden;
}
.panel-green .brand-copy { color: var(--white); }
.panel-blue .brand-copy { color: var(--white); }

.brand-copy-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(12px, 2vw, 28px);
  margin-bottom: clamp(6px, 1vh, 10px);
}
.brand-copy-head h3 {
  margin: 0;
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.35rem, 2.1vw, 2.05rem);
  font-weight: 700;
  line-height: 1;
  /* Matches the numbered service headings on the design-brands path (e.g.
     "INTERNATIONAL READINESS") - per Inna, brand names should read the
     same way. */
  text-transform: uppercase;
}
.brand-links {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.brand-links svg {
  display: block;
  width: clamp(18px, 1.4vw, 22px);
  height: clamp(18px, 1.4vw, 22px);
}

/* Order is name -> descriptor -> divider rule -> body (see the punch list,
   7.2): the rule sits under the descriptor now, not directly under the
   name/links row. */
.brand-descriptor {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  padding-bottom: clamp(8px, 1.2vh, 14px);
  border-bottom: 2px solid currentColor;
  font-style: italic;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
}

.brand-body {
  margin: 0;
  color: currentColor;
  font-size: clamp(0.9rem, 1.02vw, 1.06rem);
  font-weight: 400;
  line-height: 1.32;
  overflow: hidden;
}

.brand-link {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-transform: none;
}

/* ===== Service panel copy (big word + supporting line; positioned below) ===== */
.service-copy h3 {
  margin: 0 0 10px;
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}

.service-copy {
  position: absolute;
  z-index: 3;
  left: calc(clamp(16px, 2.5vw, 40px) + 64vh);
  bottom: clamp(28px, 7vh, 64px);
  width: min(430px, 74vw);
  max-height: min(58vh, 520px);
  margin: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.service-copy p {
  max-width: none;
  margin: 0 0 0.75em;
  color: currentColor;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  font-weight: 400;
  line-height: 1.22;
}
.service-copy p:last-of-type { margin-bottom: 0; }

.brand-panel:focus-visible,
.service-panel:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -10px;
}

.brand-intro {
  min-height: 52vh;
}

.gradient-01 { background: #d96a61; } /* 1 */
.gradient-02 { background: #e2b958; } /* 2 */
.gradient-03 { background: #2f7a59; } /* 3 */
.gradient-04 { background: #d993b7; } /* 4 */
.gradient-05 { background: #4e72d9; } /* 5 */
.gradient-06 { background: var(--service-blue); }
.gradient-07 { background: var(--service-warm-grey); }

/* full-height vertical rule dividing the big number from the text column.
   --rule-x is set per-panel by JS so the line hugs each number (digit widths vary). */
.service-panel:not(.about-panel)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rule-x, 40vw);
  width: 2px;
  background: var(--ink);
  z-index: 1;
}

.service-panel:not(.about-panel) .service-copy {
  top: auto;
  left: var(--text-x, 46vw); /* set per-panel by JS so text hugs the rule (tight cluster) */
  right: auto;
  bottom: 5.8vh; /* aligns to the number's INK base (box base is 8vh up, glyph overflows ~2.2vh lower) */
  /* --text-w is set per-panel by JS (layoutServiceRules), capped to whatever
     space is actually left before the viewport edge once the panel's own
     stacking shift is accounted for - a fixed 600px can run past the edge
     and clip the heading on panels with a wide number (e.g. "5"). */
  width: var(--text-w, min(40vw, 600px));
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: start;
  max-height: 82vh;
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
  padding: 0;
}

.service-panel:not(.about-panel) .service-copy h3 {
  max-width: none;
  margin: 0 0 clamp(16px, 2.4vh, 28px);
  padding-bottom: clamp(12px, 1.8vh, 22px);
  border-bottom: 2px solid var(--ink); /* rule under the title, like the reference */
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 3.4rem);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.service-panel:not(.about-panel) .service-copy p {
  max-width: 48ch;
  margin: 0 0 clamp(9px, 1.3vh, 16px);
  font-size: clamp(0.92rem, 1.12vw, 1.28rem);
  font-weight: 500;
  line-height: 1.28;
}
.service-panel:not(.about-panel) .service-copy p:last-child { margin-bottom: 0; }

.service-panel:not(.about-panel) .panel-number {
  top: 50%;
  right: auto;
  bottom: auto;
  left: clamp(10px, 2vw, 34px);
  z-index: 2;
  transform: translateY(-50%);
  color: var(--ink);
  line-height: 0.7;
  font-size: clamp(30rem, 120vh, 94rem);
}

/* Service panels are number + text only - no work images (per Inna) */
.service-examples {
  display: none !important;
}
.service-examples--legacy {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.service-examples figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 18px 44px rgba(31, 31, 31, 0.22);
  animation: none !important; /* no "breathing" */
}

.service-examples img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-examples figure:nth-child(1) {
  top: 24%;
  left: 68%;
  width: clamp(140px, 13vw, 220px);
  aspect-ratio: 0.82;
  animation: exFloat 7s ease-in-out infinite;
}
.service-examples figure:nth-child(2) {
  top: 50%;
  left: 75%;
  width: clamp(130px, 12vw, 200px);
  aspect-ratio: 1.3;
  animation: exFloat 9s ease-in-out -1.5s infinite;
}
.service-examples figure:nth-child(3) {
  bottom: 9%;
  left: 69%;
  width: clamp(120px, 11vw, 180px);
  aspect-ratio: 0.9;
  animation: exFloat 8s ease-in-out -3s infinite reverse;
}

@keyframes exFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.6deg); }
  50%      { transform: translate3d(0, -18px, 0) rotate(1.6deg); }
}

@keyframes buttonBreatheOne {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(31, 31, 31, 0);
    transform: translate(0, 0) scale(1);
  }

  50% {
    box-shadow: 12px 12px 0 rgba(31, 31, 31, 0.92);
    transform: translate(-6px, -6px) scale(1.018);
  }
}

@keyframes buttonBreatheTwo {
  0%,
  100% {
    box-shadow: 12px 12px 0 rgba(31, 31, 31, 0.92);
    transform: translate(-6px, -6px) scale(1.018);
  }

  50% {
    box-shadow: 0 0 0 rgba(31, 31, 31, 0);
    transform: translate(0, 0) scale(1);
  }
}

@media (min-width: 881px) and (max-height: 760px) {
  .hero-line,
  .hero-verb { font-size: clamp(1.2rem, 2.6vw, 2.4rem); }

  .designer-path .path-intro h2,
  .brand-path .path-intro h2 {
    font-size: clamp(1.3rem, 3vw, 2.6rem);
    line-height: 1;
  }

  .door { height: clamp(180px, 30vh, 300px); }
  .door-headline { font-size: clamp(1.2rem, 2.2vw, 2rem); }
}

@media (max-width: 880px) {
  .entry-screen {
    height: 100vh;
    height: 100svh;
    /* more bottom room so the doors aren't cramped against the bottom edge */
    padding: 20px 16px clamp(30px, 6vh, 60px);
  }

  .entry-topbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .entry-topbar .eyebrow { font-size: clamp(1.2rem, 5vw, 1.55rem); }
  .entry-topbar .social-icons { gap: clamp(11px, 3.2vw, 16px); }
  .entry-topbar .social-icons svg { width: clamp(17px, 4.4vw, 21px); }

  .entry-topbar { flex-shrink: 0; }
  .hero-statement {
    flex-shrink: 0; /* never compress - compressing spills the hero text over the doors */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: clamp(18px, 3.2vh, 42px);
  }
  /* header a touch smaller (per Inna) */
  .hero-line { max-width: 100%; font-size: clamp(1.22rem, 5.9vw, 2.2rem); }
  .hero-verb {
    position: static;
    margin-top: 12px;
    font-size: clamp(1.5rem, 7.5vw, 2.4rem);
  }

  /* Trying the doors again on mobile instead of the flat entry cards: same
     face-slides-open effect as desktop, but self-playing in a loop instead of
     needing hover - see .door-a/.door-b auto-animation further below. */
  .brick-doors {
    display: none; /* shelved: animated auto-cycling doors below are unapproved for mobile, kept in the file for later */
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vh, 46px);
    padding-right: 12px;
    flex-shrink: 0; /* never compress */
  }
  .door-a { margin-top: clamp(6px, 1.4vh, 12px); }
  .door { height: clamp(172px, 24vh, 214px); padding: 18px 18px; }
  .door-headline { font-size: clamp(1.2rem, 5.6vw, 1.75rem); }

  /* Auto-alternating open/close: door A opens first; right as it starts
     closing, door B opens - so exactly one door is "open" at a time, looping
     forever. Same doorOpen swing keyframe as desktop's hover effect, just
     triggered by this timeline instead of :hover. */
  .door-a .door-face {
    animation: doorAutoCycle 4.8s cubic-bezier(0.4, 0, 0.3, 1) infinite;
  }
  .door-b .door-face {
    animation: doorAutoCycle 4.8s cubic-bezier(0.4, 0, 0.3, 1) infinite;
    animation-delay: 2.4s;
  }
  /* Each door holds open for exactly 2s (2s of 4.8s = 41.67%), symmetric with
     a 2s closed hold, so offset by exactly half the cycle, A's close and B's
     open always land in the same window - never both closed. The open ramp
     reuses the desktop hover door's exact multi-step settle (see @keyframes
     doorOpen above); the close ramp stays a single quick snap. */
  @keyframes doorAutoCycle {
    0%      { transform: translateX(88%); }
    41.67%  { transform: translateX(88%); }
    50%     { transform: translateX(0); }
    91.67%  { transform: translateX(0); }
    95.42%  { transform: translateX(92%); }
    96.42%  { transform: translateX(85%); }
    97.25%  { transform: translateX(90.5%); }
    98%     { transform: translateX(86.6%); }
    98.67%  { transform: translateX(89.3%); }
    99.25%  { transform: translateX(87.5%); }
    99.67%  { transform: translateX(88.4%); }
    100%    { transform: translateX(88%); }
  }

  /* ===== Mobile entry cards: active mobile experience (the auto-cycling
     doors above are shelved, unapproved). Two offset layers per card, echoing
     the desktop .door stripes. ===== */
  .entry-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5.5vh, 44px);
    width: 100%;
    margin-top: auto;
    flex-shrink: 0; /* never compress - keeps the cards off the bottom edge */
  }

  .entry-card {
    position: relative;
    display: block;
    /* leave room on the right for the 18px offset stack so it isn't clipped */
    width: calc(100% - 18px);
    color: var(--white);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .entry-card-a { --face: var(--pink);  --stack-1: var(--yellow); --stack-2: var(--blue); }
  .entry-card-b { --face: var(--green); --stack-1: var(--yellow); --stack-2: var(--red); }

  .entry-card-face {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: clamp(180px, 24vh, 280px);
    padding: clamp(18px, 5.2vw, 28px);
    background: var(--face);
    /* hard-edged offset "poster" stack (no blur, no radius) - flat, like .door */
    box-shadow:
      9px 9px 0 0 var(--stack-1),
      18px 18px 0 0 var(--stack-2);
  }

  .entry-kicker {
    font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(0.66rem, 3vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.1;
    text-transform: uppercase;
    opacity: 0.92;
  }

  .entry-headline {
    /* Was a fixed gap under the kicker; now absorbs the leftover space itself,
       so the headline sits low, snug above the divider - not pinned to the top. */
    margin-top: auto;
    font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(1.22rem, 5.4vw, 1.75rem);
    font-weight: 500; /* lighter than the black-weight desktop headline */
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
  }

  .entry-divider {
    margin-top: clamp(8px, 1.4vh, 12px); /* same gap as below it, to the action row */
    height: 1px;
    width: 100%;
    background: currentColor;
    opacity: 0.55;
  }

  .entry-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(8px, 1.4vh, 12px);
  }
  .entry-action-label {
    font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(0.66rem, 3vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .entry-arrow {
    flex: none;
    width: clamp(30px, 9vw, 40px);
    height: auto;
  }

  /* Idle loop: the arrow is always fully visible (no reveal/fade), but never
     sits still - it winds back and springs forward on a loop, like it's
     tugging at a leash. Pure kinetic motion, no opacity choreography. */
  .entry-arrow {
    animation: entrySlingshot 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }
  @keyframes entrySlingshot {
    0%   { transform: translateX(0); }
    18%  { transform: translateX(-7px); }
    34%  { transform: translateX(14px); }
    46%  { transform: translateX(-3px); }
    56%  { transform: translateX(4px); }
    66%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }

  /* Tap feedback: a firmer forward nudge on top of the idle loop. */
  .entry-card:active { transform: translateY(1px); }
  .entry-card:active .entry-arrow { animation-play-state: paused; transform: translateX(10px); }

  /* .door-btn:focus-visible removes the outline globally - restore a visible one */
  .entry-card:focus-visible { outline: none; }
  .entry-card:focus-visible .entry-card-face {
    outline: 3px solid var(--white);
    outline-offset: 4px;
  }

  .contact-links {
    gap: 16px;
    font-size: 0.7rem;
  }

  .path-section {
    padding: 0;
  }

  .path-intro {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 44vh;
    padding: 20px 16px 60px;
  }

  .designer-path .path-intro,
  .brand-path .path-intro {
    height: 100svh;
    padding: 22px 16px;
  }

  /* ===== Vertical stacked cards (no horizontal jack) ===== */
  .panel-stack,
  .service-grid { height: auto !important; }
  .stack-frame {
    position: static;
    height: auto;
    overflow: visible;
  }
  .brand-panel,
  .service-panel {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    transform: none !important;
    border-left: 0;
    border-top: 1px solid var(--ink);
  }
  /* stacking peek: each card sits a bit lower, so a colored edge of the one before shows on top */
  .stack-frame > *:nth-child(2) { top: 12px; }
  .stack-frame > *:nth-child(3) { top: 24px; }
  .stack-frame > *:nth-child(4) { top: 36px; }
  .stack-frame > *:nth-child(5) { top: 48px; }
  .stack-frame > *:nth-child(6) { top: 60px; }

  /* Hold the LAST card stuck for one more screen, then pull the About back up
     into that window so it rides over the still-stuck card (real stacking).
     NOTE: this must be in-flow height inside the frame's CONTENT box - sticky is
     clamped to the content box, so padding-bottom here does nothing. */
  .stack-frame::after {
    content: "";
    display: block;
    height: 100svh;
    background: var(--ink);
  }
  .about-section {
    position: relative;
    z-index: 5;
    margin-top: -100svh;
  }
  /* Both paths now have a .path-cta strip between the last stuck card and
     About, taking up real (non-spacer) document space. Cancel the shared
     -100svh pull-up entirely here so About renders in its natural position
     right after that strip, instead of being dragged up to overlap and hide
     it (see 1.1 in the punch list for the bug this exact thing caused). */
  .about-designer,
  .about-brand {
    margin-top: 0;
  }
  /* Behind the sticky cards must be DARK (matches the About + intro), never the
     homepage grey. When the mobile URL bar collapses the cards are sized in svh
     (the small viewport) so a sliver of the container shows below the pinned last
     card - keep that sliver dark so there is no grey flash before "About me". */
  .panel-stack,
  .service-grid { background: var(--ink); }

  /* Brand card (mobile): heading + links + paragraph, product image at the bottom (Inna's PDF) */
  .brand-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 6vw, 36px) 16px 0;
  }
  .brand-panel .panel-number { display: none; }
  .brand-portrait { display: none; }
  .brand-copy {
    order: 1;
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    transform: none;
    z-index: 2;
    display: block;
    overflow: visible;
    opacity: 1;
    flex: 0 0 auto;
  }
  .brand-copy-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
  }
  .brand-copy-head h3 { font-size: clamp(1.6rem, 7.6vw, 2.5rem); }
  .brand-links svg { width: clamp(20px, 5.5vw, 26px); height: clamp(20px, 5.5vw, 26px); }
  .brand-descriptor { font-size: clamp(0.92rem, 3.6vw, 1.05rem); margin-bottom: 14px; padding-bottom: 10px; }
  .brand-body { font-size: clamp(0.86rem, 3.6vw, 1rem); line-height: 1.3; }
  .brand-hero {
    display: block;
    order: 2;
    position: relative;
    inset: auto;
    flex: 1 0 26svh; /* fills the leftover space, but never shrinks below 26svh */
    min-height: 0;
    margin: clamp(14px, 3.5vw, 22px) 0 0;
    border: 0;
    opacity: 1 !important;
    transform: none !important;
  }
  .brand-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Service card: big number lying on its SIDE at the top, text below */
  .service-panel { min-height: 100svh; }
  .service-panel:not(.about-panel) .service-copy {
    position: absolute;
    top: clamp(240px, 29vh, 320px);
    left: 18px;
    right: 18px;
    bottom: auto;
    width: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: none;
    overflow: visible;
    transform: none !important;
    opacity: 1 !important;
  }
  .service-panel:not(.about-panel) .service-copy h3 {
    max-width: none;
    font-size: clamp(1.45rem, 7vw, 2.2rem);
    line-height: 0.96;
    padding-bottom: 9px;
    margin-bottom: 11px;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: none;
  }
  .service-panel:not(.about-panel) .service-copy p {
    max-width: none;
    font-size: clamp(0.8rem, 3.4vw, 0.98rem);
    line-height: 1.3;
    margin-bottom: clamp(8px, 1.4vh, 13px);
  }
  /* the number is the graphic: huge and rotated onto its SIDE across the top.
     translate(-50%,-50%) makes `top` the number's visual CENTER. */
  .service-panel:not(.about-panel) .panel-number {
    top: clamp(70px, 15vh, 145px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
    /* rotated width = ~0.72 x font-size, so ~130vw fills the card edge-to-edge */
    font-size: clamp(18rem, 130vw, 52rem);
    line-height: 0.72;
    opacity: 1;
    color: var(--ink);
    z-index: 2;
  }
  .service-examples { display: none; } /* mobile = no images */
  .service-panel:not(.about-panel)::before { display: none; } /* no vertical rule on mobile */

  /* Page 1 only: the "1" glyph is much narrower than the other digits, so after
     the 90-degree rotation its ink lands ~27px lower than theirs and also ends
     ~55px higher. Pull the number AND the text block up so both gaps (card top
     to number, number to title) match pages 2-5. */
  .service-grid .stack-frame > .service-panel:first-child .panel-number {
    top: calc(clamp(70px, 15vh, 145px) - 27px);
  }
  .service-grid .stack-frame > .service-panel:first-child .service-copy {
    top: calc(clamp(240px, 29vh, 320px) - 55px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ===== CTA strip between the brand sequence and About me (designer path) ===== */
.path-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 25vh;
  max-width: 1570px;
  margin-inline: auto;
  padding: clamp(28px, 4vh, 48px) clamp(24px, 7vw, 120px);
  background: var(--grey);
  color: var(--ink);
  border-top: 2px solid var(--line);
}

.path-cta-text {
  flex: none;
  margin: 0;
  font-family: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.3rem, 2.9vw, 2.9rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  /* Not nowrap on purpose: this sentence's length isn't fixed (two paths
     have two different CTAs, and copy gets revised) - if it doesn't fit
     the fixed-width arrow+icons on one line, it should wrap to a second
     line rather than push them off the edge of the screen. */
  max-width: 60%;
}

.path-cta-arrow {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  color: var(--magenta);
  animation: ctaArrowSlingshot 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.path-cta-arrow svg {
  display: block;
  width: min(100%, 130px);
  height: auto;
}
svg.path-cta-arrow-mobile { display: none; }

@keyframes ctaArrowSlingshot {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  34%  { transform: translateX(14px); }
  46%  { transform: translateX(-3px); }
  56%  { transform: translateX(4px); }
  66%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

.path-cta-icons {
  flex: none;
  gap: clamp(20px, 2.2vw, 30px);
}
.path-cta-icons svg { width: clamp(26px, 2.8vw, 34px); }

@media (max-width: 880px) {
  /* Row 1: sentence, full width. Row 2: arrow on the left, icons on the
     right, facing each other on the same line. */
  .path-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 0;
    padding: clamp(28px, 7vw, 40px) 16px;
    gap: clamp(20px, 4vh, 24px) clamp(16px, 4vw, 28px);
  }
  /* Reversed from desktop, per Inna: bold heavy text (like the door
     headlines), thin arrow - instead of thin text / bold arrow. */
  .path-cta-text { grid-column: 1 / -1; white-space: normal; font-weight: 800; }
  .path-cta-arrow { grid-column: 1; flex: none; justify-content: flex-start; }
  .path-cta-arrow svg { width: clamp(80px, 30vw, 140px); }
  svg.path-cta-arrow-desktop { display: none; }
  svg.path-cta-arrow-mobile { display: block; }
  .path-cta-icons { grid-column: 2; }
}

/* ===== About Inna — its own vertical screen under each carousel ===== */
.about-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(48px, 9vh, 120px) clamp(20px, 6vw, 96px);
  background: var(--ink);
  color: var(--white);
  border-top: 2px solid rgba(247, 243, 234, 0.2);
}

.about-portrait {
  aspect-ratio: 0.82;
  max-height: 76vh;
  overflow: hidden;
}
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

.about-body { max-width: 74ch; }

.about-kicker {
  margin: 0 0 10px;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.about-body h3 {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 0.96;
  text-transform: uppercase;
}

.about-body p {
  margin: 0 0 0.85em;
  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  line-height: 1.5;
  opacity: 0.9;
}

.about-body .brand-link { margin-top: 18px; color: var(--white); }

/* ===== Floating website screenshot when hovering "Visit website" ===== */
.link-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: min(360px, 44vw);
  aspect-ratio: 16 / 10;
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 rgba(31, 31, 31, 0.9);
  background-color: var(--grey);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(-50%, -118%) scale(0.94);
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  will-change: transform, opacity;
}
.link-preview.is-visible {
  opacity: 1;
  transform: translate(-50%, -128%) scale(1);
}
@media (hover: none) {
  .link-preview { display: none; }
}

@media (max-width: 880px) {
  .about-section {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vh, 34px);
    padding: clamp(40px, 8vh, 72px) 18px clamp(52px, 9vh, 80px);
  }
  .about-portrait { max-height: 46vh; width: min(72vw, 320px); }
}

/* ===== Intro statement: words rise in one-by-one on view; light up on hover ===== */
.path-intro h2 .w {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: 0;
  transform: translateY(0.5em);
  border-radius: 2px;
  will-change: transform, opacity;
}
.path-intro.revealed h2 .w {
  animation: introWordIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes introWordIn {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) {
  .path-intro h2 .w { transition: color 0.18s ease; }
  .path-intro h2 .w:hover { color: var(--hi); }
}
@media (prefers-reduced-motion: reduce) {
  .path-intro h2 .w { opacity: 1; transform: none; }
}