@font-face { font-family: "Chopin-Trial"; src: url("fonts/Chopin-Trial-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Neue Machina"; src: url("fonts/NeueMachina-Regular-hinted.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Machina"; src: url("fonts/NeueMachina-Medium-hinted.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neue Machina"; src: url("fonts/NeueMachina-Bold-hinted.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #002a37;
  --cream: #f3e9df;
  --rust: #d0552e;
  --gold: #f7a824;
  --sage: #add1b5;
  --teal: #4bb993;
  --teal-dark: #2c6f6c;
  --khaki: #fff5c0;
  --line-navy: rgba(0, 42, 55, 0.3);
  --line-cream: rgba(243, 233, 223, 0.4);
  --container: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Neue Machina", system-ui, sans-serif;
  color: var(--navy);
  background: var(--navy);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

h1, h2, h3 {
  font-family: "Chopin-Trial", "Neue Machina", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.06em;
  margin: 0;
}

.paper-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/paper-texture.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 1;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  height: 100svh;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-stripes {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100%, calc(100svh * 1.6));
  aspect-ratio: 1440 / 900;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  transform: translate(-50%, -50%);
}
.hero-stripes svg { position: absolute; left: 28.7%; top: 0; height: 100%; width: 99.4%; }

/* hero content positioned by percentage of the 1440x900 design canvas, matching Figma's
   absolute coordinates exactly instead of a generic 50/50 column split */
.hero-canvas {
  position: relative;
  z-index: 1;
  pointer-events: none;
  width: min(100%, calc(100svh * 1.6));
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 900;
  container-type: inline-size;
}
.hero-canvas > * { position: absolute; }
.hero-canvas a,
.hero-canvas button,
.hero-canvas .computer-wrap { pointer-events: auto; }

.hero-nav {
  /* Lives outside .hero-canvas now: that box is centered by aspect-ratio and
     can end up much shorter than .hero on windows that aren't ~1440x900,
     dragging the nav well below the real top of the page. Pinning it to
     .hero itself keeps it at the true top regardless of that centering.
     max-width+margin mirrors hero-canvas's own centering so the logo/nav
     still line up with the heading below on wide screens; container-type
     keeps the cqw-based logo/gap sizing below working the same as before.
     No explicit z-index: it sits before .hero-canvas in the DOM, so on the
     (rare) viewport where they geometrically overlap, .hero-canvas — and
     the .hero-dim inside it — still paints over it, keeping the nav part of
     the same dim/lit scene instead of always sitting bright on top. */
  position: absolute;
  top: 0; left: 0; right: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 40px 0;
  container-type: inline-size;
  display: flex; align-items: center; justify-content: space-between; color: var(--cream);
}
.logo { display: flex; align-items: center; }
.logo-img { width: clamp(110px, 9.5cqw, 145px); height: auto; min-width: 0; display: block; }
.nav-links {
  --nav-gap: clamp(22px, 2.15cqw, 34px);
  display: flex;
  gap: var(--nav-gap);
  font-size: 1.4cqw;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a { position: relative; padding: 0.7% 0; }
.nav-links a + a::before {
  content: "";
  position: absolute;
  left: calc(var(--nav-gap) / -2);
  top: 50%;
  width: 1px;
  height: .9em;
  background: rgba(243, 233, 223, .42);
  transform: translateY(-50%);
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0.7% 1.4%; border: 2px solid var(--navy);
  font-family: "Neue Machina", sans-serif; font-weight: 500; font-size: 1.4cqw; white-space: nowrap;
}
.btn-cream { background: var(--cream); color: var(--navy); }

.hero-heading h1 { color: var(--cream); font-size: 6.93cqw; letter-spacing: -0.06em; line-height: 0.95; margin: 0; }
.hero-ctablock p { color: var(--cream); font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 1.4cqw; line-height: 1.2; }
.hero-ctablock .hero-lead { margin: 0; }
.hero-ctablock .hero-location { margin: 12px 0 18px; font-size: 1cqw; opacity: .82; white-space: nowrap; }
.hero-ctablock .btn { justify-content: space-between; }
.hero-computer { z-index: 2; display: flex; justify-content: center; }

/* Dims the whole hero scene while the monitor is off. The overlay sits above
   the heading, CTA and contact dock, while .hero-computer remains above it. */
.hero-dim {
  /* .hero-canvas caps out at max-width:1440px, but .hero-stripes has no such
     cap and can render wider AND taller on tall/wide viewports — sizing this
     to the canvas box left bright, un-dimmed slivers of stripe on every edge.
     Overshooting well past the canvas on all four sides guarantees it always
     covers at least as much as the stripes do; .hero itself clips overflow,
     so the overshoot never bleeds into the section above/below. */
  position: absolute;
  z-index: 1;
  top: -25vh;
  bottom: -25vh;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: rgba(0, 0, 0, .75);
  pointer-events: none;
  opacity: 1;
  transition: opacity 460ms ease;
}
.hero-canvas:has(.computer-wrap.is-on) .hero-dim,
.hero-canvas:has(.computer-wrap.is-active):not(:has(.computer-wrap.is-off)) .hero-dim {
  opacity: 0;
}
.computer-wrap {
  position: relative;
  width: 100%;
  container-type: inline-size;
  outline: none;
  cursor: crosshair;
}
.computer-wrap .computer-img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
}
.crt-glow,
.crt-screen {
  position: absolute;
  left: 52.84%;
  top: 19.74%;
  width: 23.9%;
  height: 36.32%;
  pointer-events: none;
}
.crt-glow {
  z-index: 2;
  display: block;
  overflow: visible;
  fill: #ffd59a;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 225, 178, .88)) drop-shadow(8px 11px 18px rgba(255, 184, 94, .52));
  transform: none;
  transform-origin: 52% 52%;
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.crt-screen {
  z-index: 3;
  overflow: hidden;
  clip-path: none;
  -webkit-mask: url('assets/monitor-screen.svg') center / 100% 100% no-repeat;
  mask: url('assets/monitor-screen.svg') center / 100% 100% no-repeat;
  background: radial-gradient(ellipse at 52% 50%, #171108 0, #040302 72%);
  box-shadow: inset 0 0 11px rgba(255, 213, 154, .3);
  color: #fff2d6;
  opacity: 0;
  transform: translateZ(0);
  transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1), filter 560ms cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(.35);
}
.crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(145deg, rgba(255, 242, 207, .14), transparent 34%, rgba(255, 192, 104, .06) 70%, transparent);
  opacity: .7;
  mix-blend-mode: screen;
}
.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.58) 100%);
}
.crt-code {
  position: absolute;
  left: 7%;
  top: 44%;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: .48cqw;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(4px, 1.22cqw, 7px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.04em;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(255, 224, 170, .76);
  transform-origin: 0 0;
  transform: matrix(.88, -.48, .028, .94, 0, 0);
}
.crt-code span {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 260ms ease; /* smooth "erase" when .is-typing is removed */
}
.computer-wrap.is-on .crt-glow,
.computer-wrap.is-active .crt-glow,
.computer-wrap.is-on .crt-screen,
.computer-wrap.is-active .crt-screen {
  opacity: 1;
}
.computer-wrap.is-on .crt-screen,
.computer-wrap.is-active .crt-screen { filter: brightness(1); }
.computer-wrap.is-on .crt-glow,
.computer-wrap.is-active .crt-glow {
  opacity: .94;
}
.computer-wrap.is-on .crt-code span,
.computer-wrap.is-typing .crt-code span {
  animation: crt-line-in 140ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--line, 0) * 120ms + 420ms);
}
.crt-code span:nth-child(1) { --line: 0; }
.crt-code span:nth-child(2) { --line: 1; }
.crt-code span:nth-child(3) { --line: 2; }
.crt-code span:nth-child(4) { --line: 3; }
.crt-code span:nth-child(5) { --line: 4; }
.crt-code span:nth-child(6) { --line: 5; }
.crt-code span:nth-child(7) { --line: 6; }
.crt-code span:nth-child(8) { --line: 7; }
.crt-prompt b { animation: crt-caret 720ms steps(1, end) infinite; }
@keyframes crt-line-in { to { opacity: 1; transform: translateY(0); } }
@keyframes crt-caret { 50% { opacity: 0; } }
/* manual power-off (tap toggle on touch devices) — wins over everything else,
   hover included, so a deliberate "off" tap actually goes dark */
.computer-wrap.is-off .crt-glow,
.computer-wrap.is-off .crt-screen,
.computer-wrap.is-off .crt-code span {
  opacity: 0 !important;
}
.contact-dock { display: flex; gap: 0.55%; justify-content: flex-end; }
.icon-box {
  width: 3.3cqw; height: 3.3cqw; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cream); background: var(--navy); color: var(--cream);
}
.icon-box img { display: block; width: 30px; height: 20px; }
.icon-box-static { cursor: default; }

/* ---------- service sections ---------- */
.service { position: relative; padding-block: 90px; background: var(--rust); color: var(--cream); overflow: hidden; }

/* ---------- stacking scroll reveal (sections 01-06) ---------- */
/* Each service is a full viewport panel. The active panel sticks to the top;
   the next panel remains in normal flow and naturally slides up over it. */
.stack-panel.service {
  position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden; padding-block: 0;
  display: flex; flex-direction: column; z-index: var(--i, 1);
}
.stack-bar { flex: 0 0 auto; position: relative; z-index: 2; }
.stack-bar .eyebrow { padding-block: 25px 18px; margin: 0; }
.stack-reveal {
  position: relative; z-index: 1; flex: 1 1 auto; overflow: hidden;
}
.stack-reveal .container { height: 100%; display: flex; align-items: center; }
.stack-reveal .service-grid { margin-top: 0; width: 100%; }
.service.tone-gold, .service.tone-sage, .service.tone-teal, .service.tone-khaki { color: var(--navy); }
.service.tone-gold { background: var(--gold); }
.service.tone-sage { background: var(--sage); }
.service.tone-teal { background: var(--teal); }
.service.tone-teal-dark { background: var(--teal-dark); }
.service.tone-khaki { background: var(--khaki); }

.service .eyebrow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "Neue Machina", sans-serif; font-size: 32px; font-weight: 400;
  position: relative; z-index: 1;
  padding-bottom: 18px; border-bottom: 1px solid currentColor;
}
.service.tone-rust .eyebrow, .service.tone-teal-dark .eyebrow { border-color: rgba(243,233,223,.4); }
.service.tone-gold .eyebrow, .service.tone-sage .eyebrow, .service.tone-teal .eyebrow, .service.tone-khaki .eyebrow { border-color: rgba(0,42,55,.4); }

.service-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 751px 461px; justify-content: space-between; align-items: center; margin-top: 56px; }
.service.icon-left .service-grid { grid-template-columns: 461px 751px; }
.service-icon { display: flex; justify-content: center; }
.service-icon img { width: 100%; max-width: 461px; height: auto; }
.service-title { font-size: 64px; letter-spacing: -0.06em; margin-bottom: 16px; }
.service-desc { opacity: .92; font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.2; margin: 0 0 40px; }
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.service-list li {
  display: flex; align-items: center; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid currentColor;
  font-family: "Neue Machina", sans-serif; font-weight: 700; font-size: 26px;
}
.service.tone-rust .service-list li, .service.tone-teal-dark .service-list li { border-color: rgba(243,233,223,.4); }
.service.tone-gold .service-list li, .service.tone-sage .service-list li, .service.tone-teal .service-list li, .service.tone-khaki .service-list li { border-color: rgba(0,42,55,.4); }
.service-list li::before { content: "+"; font-weight: 700; }

/* ---------- about ---------- */
.about { position: relative; min-height: 900px; display: flex; align-items: flex-end; padding: 0; overflow: hidden; }
.about-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.about-art {
  position: absolute;
  left: -11.237vw;
  top: -24.583vw;
  width: 122.543vw;
  height: auto;
  max-width: none;
  pointer-events: none;
}
.about-background-layer { z-index: 0; }
.about-texture-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('assets/about-texture.png') center bottom / cover no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.about-heading {
  position: absolute;
  z-index: 2;
  top: 1.869vw;
  left: 2.813vw;
  width: 94.444vw;
  max-width: none;
  color: var(--cream);
  font-size: 15.107vw;
  letter-spacing: -0.06em;
  line-height: .9;
  text-wrap: nowrap;
  margin: 0;
}
.about-heading-mobile { display: none; }
.about-person-layer { z-index: 3; }
.about > .container { position: relative; z-index: 4; }
.about-cards { display: flex; gap: 20px; flex-wrap: wrap; max-width: 640px; }
.about-cards p {
  background: var(--cream); color: var(--navy); border: 2px solid var(--navy); padding: 20px 22px;
  font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.45; margin: 0; flex: 1 1 260px;
}

@media (min-width: 981px) {
  .about {
    height: 62.5vw;
    min-height: 0;
  }
  .about-photo { display: none; }
  .about > .container {
    position: absolute;
    left: 2.813vw;
    top: 34.583vw;
    width: 37.014vw;
    max-width: none;
    margin-inline: 0;
    padding: 0;
  }
  .about-cards {
    width: 100%;
    max-width: none;
    gap: 1.667vw;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .about-cards p {
    width: 100%;
    flex: 0 0 auto;
    padding: 1.389vw 2.778vw;
    font-size: 1.389vw;
    line-height: 1.2;
  }
  .about-cards p:first-child { height: 9.444vw; }
  .about-cards p:last-child { height: 11.111vw; }
  .about-role {
    position: absolute;
    z-index: 4;
    left: 75.243vw;
    top: 12.847vw;
    width: 22.014vw;
    height: 7.813vw;
    display: grid;
    place-items: center;
    color: var(--cream);
    text-align: center;
    text-transform: uppercase;
    font-family: "Neue Machina", sans-serif;
    font-weight: 700;
    font-size: 1.253vw;
    line-height: 1.2;
  }
  .about-role img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .about-role span {
    position: relative;
    z-index: 1;
  }
}

/* ---------- formats ---------- */
.formats { position: relative; background: var(--cream); padding-block: 90px; color: var(--navy); overflow: hidden; }
.formats h2 { font-size: 64px; letter-spacing: -0.05em; margin-bottom: 50px; position: relative; z-index: 1; }
.plans-scroll { position: relative; }
.plans-arrow { display: none; } /* shown on mobile only, see breakpoint below */
.plans { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan {
  background: var(--cream); color: var(--navy); border: 2px solid var(--navy);
  box-shadow: 7px 7px 0 var(--navy); padding: 40px 28px; display: flex; flex-direction: column; gap: 28px;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.plan:hover, .plan:focus-within {
  background: var(--teal-dark); color: var(--cream);
  transform: translateY(-8px); box-shadow: 10px 15px 0 var(--navy);
}
.plan .kicker { font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .04em; opacity: .65; }
.plan h3 { font-family: "Neue Machina", sans-serif; font-weight: 700; letter-spacing: -0.01em; font-size: 24px; margin: 0; line-height: 1.2; }
.plan p.desc { font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 17px; opacity: .75; line-height: 1.3; margin: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-navy);
  font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 17px;
  transition: border-color .22s ease;
}
.plan:hover li, .plan:focus-within li { border-bottom-color: var(--line-cream); }
.plan li::before { content: "✓"; }
.plan-meta {
  font-family: "Neue Machina", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  opacity: .6;
  margin: 0;
}

/* ---------- final CTA ---------- */
.final-cta { position: relative; background: var(--navy); padding-block: 80px; overflow: hidden; }
.final-grid { position: relative; z-index: 1; display: grid; align-items: center; gap: 40px; }
.final-copy h2 { font-size: 64px; line-height: .95; letter-spacing: -0.04em; color: var(--cream); margin: 0 0 22px; max-width: 592px; }
.final-copy p { color: var(--cream); opacity: .6; max-width: 681px; font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 32px; line-height: 1.2; margin: 0; }
.final-contacts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-row {
  min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--navy); border: 2px solid var(--cream); padding: 0 24px; color: var(--cream);
  font-family: "Neue Machina", sans-serif; font-weight: 400; font-size: 32px;
}
.footer-contact-icon { width: 49px; height: 31px; flex: 0 0 49px; display: flex; align-items: center; justify-content: center; }
.footer-contact-icon img { display: block; max-width: 100%; max-height: 100%; }
.contact-label { opacity: .6; text-align: right; }
.contact-row-static { cursor: default; }

p, li { text-wrap: pretty; }

@media (min-width: 981px) {
  .hero-ctablock .btn {
    width: 100%;
    height: 52px;
    padding: 0 20px;
  }
  .contact-dock {
    left: auto !important;
    top: 87.667% !important;
    right: 40px;
    bottom: auto;
    width: 27.014% !important;
    display: grid;
    grid-template-columns: 29.948% 32.784% 33.151%;
    gap: 2.059%;
  }
  .contact-dock .icon-box {
    width: 100%;
    height: 4.906cqw;
  }
  .contact-dock .icon-box:nth-child(1) img { width: 3.292cqw; height: 2.128cqw; }
  .contact-dock .icon-box:nth-child(2) img,
  .contact-dock .icon-box:nth-child(3) img { width: 3.391cqw; height: 2.128cqw; }
  .final-cta {
    height: 450px;
    padding-block: 100px;
  }
  .final-grid {
    width: calc(100% - 80px);
    max-width: 1360px;
    height: 250px;
    padding-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 681fr) minmax(0, 600fr);
    gap: min(79px, 5.486vw);
  }
  .final-copy { padding-top: 16px; }
  .final-copy h2 {
    max-width: 592px;
    margin-bottom: 22px;
    font-size: min(64px, 4.444vw);
    line-height: .95;
  }
  .final-heading-line { white-space: nowrap; }
  .final-copy p {
    max-width: 681px;
    font-size: min(32px, 2.222vw);
    line-height: 1.2;
  }
  .final-contacts {
    width: 100%;
    min-width: 0;
    gap: 8px;
  }
  .contact-row {
    height: 78px;
    justify-content: space-between;
    padding: 0 24px;
    font-size: min(32px, 2.222vw);
  }
}

footer.site-footer { background: var(--cream); padding-block: 20px 34px; text-align: center; font-size: 13px; color: rgba(0,42,55,.55); }

/* ---------- responsive ---------- */
@media (max-width: 1440px) and (min-width: 981px) {
  .service .eyebrow { font-size: 2.2vw; }
  .service-title { font-size: 4.4vw; }
  .service-desc { font-size: 1.4vw; }
  .service-list li { font-size: 1.8vw; }
  .about-heading { font-size: 14.4vw; }
  .formats h2 { font-size: 4vw; }
}
@media (max-width: 980px) {
  .hero { height: auto; min-height: 100svh; padding-block: 20px 40px; display: block; }
  .hero-stripes { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .hero-stripes svg { left: 0; width: 205%; }
  .hero-canvas { aspect-ratio: auto; height: auto; }
  .hero-canvas > * { position: static !important; width: 100% !important; left: auto !important; top: auto !important; }
  .hero-dim { display: none !important; } /* looked bad against the scroll on mobile — desktop only */
  .hero-nav { position: relative; z-index: 2; max-width: none; margin: 0; flex-wrap: wrap; padding: 10px 20px; gap: 12px; }
  .logo-img { width: 108px; min-width: 0; }
  .nav-links { display: none; }
  .hero-nav .btn { font-size: 16px; margin-left: auto; }
  .hero-heading { padding: 30px 20px 0; }
  .hero-heading h1 { font-size: 40px; }
  .hero-ctablock { padding: 20px 20px 0; }
  .hero-ctablock p { font-size: 16px; }
  .hero-ctablock .hero-location { margin: 10px 0 18px; font-size: 13px; white-space: normal; }
  .hero-ctablock .btn { font-size: 16px; }
  .hero-computer { margin-top: 20px; order: 2; }
  .computer-wrap { width: min(400px, 100%); margin: 0 auto; }
  .contact-dock { justify-content: center; margin-top: 20px; padding: 0 20px; }
  .icon-box { width: 48px; height: 48px; }
  .stack-panel.service {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding: 0;
    display: flex;
  }
  .stack-bar { padding-top: 0; }
  .stack-bar .eyebrow { padding-block: 18px 12px; }
  .stack-reveal { position: relative; flex: 1 1 auto; opacity: 1; transform: none; overflow: hidden; }
  .stack-reveal .container { height: 100%; display: flex; align-items: flex-start; padding-top: 4vh; }
  .service-grid, .service.icon-left .service-grid { grid-template-columns: 1fr; direction: ltr; }
  .service .eyebrow { font-size: 18px; }
  .service-title { font-size: 32px; }
  .service-desc { font-size: 15px; margin-bottom: 18px; }
  .service-list li { font-size: 16px; padding: 10px 0; }
  .service-icon { order: -1; margin-bottom: 34px; } /* ~= .service-title line height */
  .service-icon img { max-width: min(230px, 58vw); }
  .formats { padding-block: 44px 90px; } /* less empty air above the heading */
  .plans-scroll { margin-inline: -20px; } /* bleed to the viewport edge for a true peek */
  .plans {
    display: flex;
    grid-template-columns: unset;
    gap: 14px;
    padding-inline: 8vw; /* lets the first/last card also center when scrolled to */
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .plans-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px;
    color: var(--navy); opacity: 0.28;
    pointer-events: none; z-index: 2;
  }
  .plans-arrow svg { width: 100%; height: 100%; }
  .plans-arrow-left { left: 2px; }
  .plans-arrow-right { right: 2px; }
  /* on touch devices there's no hover, so the featured plan stays highlighted */
  .plan.featured { background: var(--teal-dark); color: var(--cream); }
  .plan.featured li { border-bottom-color: var(--line-cream); }
  .about {
    display: flex; align-items: stretch; min-height: 100svh; padding: 0; overflow: hidden;
  }
  .about-art, .about-texture-layer, .about-role { display: none; }
  .about-photo {
    position: absolute; inset: 0;
    background-image: url('assets/photo-about-mobile.jpg') !important;
    background-position: 48% top;
  }
  .about > .container {
    min-height: 100svh;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .about-heading {
    top: 28px;
    left: 28px;
    width: calc(100% - 56px);
    font-size: 40px;
    line-height: .95;
    letter-spacing: -0.04em;
    margin-bottom: 0;
  }
  .about-cards { margin-top: auto; }
  .formats h2 { font-size: 30px; }
  .final-cta { padding-block: 64px; }
  .final-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .final-copy h2 { max-width: none; margin-bottom: 18px; font-size: 36px; }
  .final-copy p { margin-inline: auto; font-size: 18px; }
  .final-contacts { width: 100%; }
  .contact-row { min-height: 68px; padding-inline: 16px; font-size: clamp(16px, 5vw, 22px); }
}
@media (max-width: 520px) {
  .btn span.label { display: none; }
  .btn { padding: 10px 14px; }

  /* Figma mobile About, node 151:6466 (320×568). The background and the
     transparent person are the same source image placed at the same size;
     the person layer sits above the three heading lines. */
  .about {
    display: block;
    width: 100%;
    height: 177.5vw;
    min-height: 0;
  }
  .about-photo,
  .about-texture-layer { display: none; }
  .about-art {
    display: block;
    left: -191.9vw;
    top: -81.563vw;
    width: 346.25vw;
    height: auto;
    max-width: none;
  }
  .about-background-layer { z-index: 0; }
  .about-heading-desktop { display: none; }
  .about-heading-mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    color: var(--cream);
    font-family: "Chopin-Trial", "Neue Machina", sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: .9;
    pointer-events: none;
  }
  .about-heading-mobile span {
    position: absolute;
    display: block;
    white-space: nowrap;
  }
  .about-heading-hello {
    left: 5.938vw;
    top: 4.688vw;
    font-size: 22.404vw;
  }
  .about-heading-called {
    left: 5.938vw;
    top: 25vw;
    font-size: 16.403vw;
  }
  .about-heading-boris {
    left: 5vw;
    top: 38.125vw;
    font-size: 29.063vw;
  }
  .about-person-layer { display: block; z-index: 3; }
  .about-role {
    display: grid;
    position: absolute;
    z-index: 4;
    left: 64.688vw;
    top: 37.813vw;
    width: 29.063vw;
    height: 10.315vw;
    place-items: center;
    color: var(--cream);
    text-align: center;
    text-transform: uppercase;
    font-family: "Neue Machina", sans-serif;
    font-weight: 700;
    font-size: 1.654vw;
    line-height: 1.2;
  }
  .about-role img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .about-role span { position: relative; z-index: 1; }
  .about > .container {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    min-height: 0;
    max-width: none;
    padding: 0;
  }
  .about-cards {
    position: absolute;
    left: 6.25vw;
    top: 117.716vw;
    width: 87.5vw;
    max-width: none;
    margin: 0;
    gap: 3.94vw;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .about-cards p {
    width: 100%;
    flex: 0 0 auto;
    border-width: 1px;
    padding: 3.283vw 6.566vw;
    font-size: 3.283vw;
    line-height: 1.2;
  }
  .about-cards p:first-child {
    min-height: 22.816vw;
    font-family: "Inter", system-ui, sans-serif;
  }
  .about-cards p:last-child { min-height: 26.879vw; }
}
@media (max-width: 980px) and (max-height: 760px) {
  .stack-bar .eyebrow { padding-block: 12px 9px; font-size: 15px; }
  .service-title { font-size: 27px; margin-bottom: 8px; }
  .service-desc { font-size: 13px; line-height: 1.15; margin-bottom: 10px; }
  .service-list li { font-size: 14px; padding: 7px 0; }
  .service-icon { margin-bottom: 28px; } /* ~= .service-title line height at this size */
  .service-icon img { max-width: min(170px, 44vw); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
  .stack-panel.service { position: relative; top: auto; height: auto; min-height: 900px; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-code span { opacity: 1; transform: none; animation: none !important; }
  .crt-prompt b { animation: none; }
}