/* ===========================================================================
   Tural Jumshudlu — portfolio
   Shared stylesheet. Every page loads this file and nothing else.

   The design language is lifted from the Final Table case study in Figma
   (file p0LZknUhqieeiJ38nAWx9W): #eeeeee page, white content panel,
   #101014 dark media blocks, #f1efef soft blocks, 8px media radius,
   Aeonik display over 42dot Sans body, 24px page gutters.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TOKENS
--------------------------------------------------------------------------- */
:root {
  /* Surface */
  --page:        #eeeeee;
  --panel:       #ffffff;
  --dark:        #101014;
  --soft:        #f1efef;
  --tile:        #1f1f1f;

  /* Ink */
  --ink:         #000000;
  --ink-58:      rgba(0, 0, 0, 0.58);
  --ink-40:      rgba(0, 0, 0, 0.4);
  --ink-24:      rgba(0, 0, 0, 0.24);
  --on-dark:     #ffffff;
  --on-dark-70:  rgba(255, 255, 255, 0.7);
  --on-dark-45:  rgba(255, 255, 255, 0.45);
  --rule:        #c6c6c6;
  --rule-soft:   rgba(0, 0, 0, 0.1);

  /* Type
     Aeonik is a licensed face. Drop Aeonik-Regular.woff2 / Aeonik-Bold.woff2
     into assets/fonts/ and uncomment the @font-face rules below; until then
     this falls back to 42dot Sans, which is close in feel and free. */
  --font-display: "Aeonik", "42dot Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "42dot Sans", system-ui, -apple-system, sans-serif;

  --t-eyebrow:  13px;
  --t-caption:  12px;
  --t-nav:      14px;
  --t-body:     15px;
  --t-meta:     16px;
  --t-title:    22px;
  --t-lead:     28px;
  --t-section:  40px;

  /* Layout */
  --gutter:     24px;   /* page edge margin, left and right */
  --pad:        8px;    /* component inset, from Figma */
  --r-pill:     2px;
  --r-sm:       4px;
  --r-md:       8px;
  --nav-h:      42px;

  /* This design deliberately commits to one light palette (no dark toggle),
     so pin color-scheme rather than leaving it to the host. */
  color-scheme: light;

  /* Motion — smooth, restrained */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:     0.2s;
  --t-slow:     0.75s;
}

/* Uncomment once the licensed files are in assets/fonts/
@font-face {
  font-family: "Aeonik";
  src: url("assets/fonts/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("assets/fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

/* ---------------------------------------------------------------------------
   BASE
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; font-size: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

::selection { background: var(--ink); color: var(--page); }

.shell {
  width: 100%;
  padding-inline: var(--gutter);
}

.u-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--panel);
  border-radius: var(--r-sm);
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

/* ---------------------------------------------------------------------------
   NAV
--------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-block: var(--pad);
  background: rgba(238, 238, 238, 0.4);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

/* Fixed nav: everything else starts below it. */
body { padding-top: var(--nav-h); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__left { display: flex; align-items: center; gap: 19px; }

.nav__mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 999px;
  background: var(--ink);
  transition: transform var(--t-fast) var(--ease);
}
.nav__mark:hover { transform: scale(1.08); }

.nav__links, .nav__right { display: flex; align-items: center; gap: var(--r-sm); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--panel);
  font-family: var(--font-body);
  font-size: var(--t-nav);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.42px;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.pill:hover { background: var(--ink); color: var(--panel); }
.pill[aria-current="page"] { background: var(--ink); color: var(--panel); }

.pill--ghost { background: transparent; }
.pill--ghost:hover { background: var(--ink); color: var(--panel); }

/* ---------------------------------------------------------------------------
   TYPE PRIMITIVES
--------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
}

.lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.2;
  letter-spacing: -0.28px;
  text-wrap: pretty;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.12;
  letter-spacing: -0.4px;
  text-wrap: pretty;
}

.body {
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.14px;
  text-wrap: pretty;
}

.muted { color: var(--ink-58); }
.faint { color: var(--ink-40); }

/* ---------------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.13px;
  white-space: nowrap;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--ink); color: var(--panel); }
.btn--primary:hover { background: #222; }

.btn--secondary { background: var(--panel); color: var(--ink); }
.btn--secondary:hover { background: #e2e2e2; }

.btn--onDark { background: var(--panel); color: var(--ink); }

.btn__dot {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 999px;
  background: #4cde78;
}

/* Inline link with a quiet underline that wakes up on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-fast) var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* ---------------------------------------------------------------------------
   MEDIA BLOCKS — the case study's core device
--------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--dark);
}

.media img { width: 100%; height: 100%; object-fit: cover; }

.media--soft { background: var(--soft); }

/* Placeholder state for media not yet exported from Figma. Reads as a
   designed tone block rather than a broken image. */
.media[data-placeholder] {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%),
    var(--dark);
}
.media--soft[data-placeholder] {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 60%),
    var(--soft);
}
.media[data-placeholder]::after {
  content: attr(data-placeholder);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--on-dark-45);
  padding: 0 24px;
  text-align: center;
}
.media--soft[data-placeholder]::after { color: var(--ink-24); }

/* ---------------------------------------------------------------------------
   SITE FOOTER
--------------------------------------------------------------------------- */
.foot {
  margin-top: 96px;
  padding-block: 40px 28px;
  border-top: 1px solid var(--rule-soft);
}

.foot__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.foot__say {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.18;
  letter-spacing: -0.28px;
  max-width: 15ch;
}

.foot__cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.foot__col { display: flex; flex-direction: column; gap: 8px; }

.foot__h {
  font-size: var(--t-caption);
  color: var(--ink-40);
  margin-bottom: 2px;
}

.foot__col a, .foot__col span { font-size: 14px; letter-spacing: -0.14px; }

.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  font-size: var(--t-caption);
  color: var(--ink-40);
}

.foot__clock { font-variant-numeric: tabular-nums; }

/* Hidden only between the inline boot script and the split (fonts ready,
   ~100ms). Mirrors SPLIT in site.js — keep them in sync. A 2.5s timeout in
   site.js removes .js-pending regardless, so copy can never stay hidden. */
.js-pending :is(h1, h2, .lead, .section-title, .pane__title, .page-hero__note,
  .cs__lede, .cs-panel__b, .cs-split__b, .cs-block__b, .cs-feat__d,
  .cs-outro__d, .cs-anat li, .svc__lede, .svc-dark__d, .proc__d,
  .bio__prose p, .xp__note, .cta__d, .contact-card__prose p,
  .card__text, .do-card__d, .row__desc, .row__lockD, .gal__note,
  .foot__say, .li__desc, .dl__note) { opacity: 0; }
.js-pending .cpop :is(h1, h2) { opacity: 1; }

/* ---------------------------------------------------------------------------
   LINE REVEAL — the only scroll motion on the site
   site.js splits headings and body copy into lines. Each line starts
   blurred and transparent and resolves over 1s on an expo-out curve,
   staggered 100ms per line. Images and cards do not animate at all.
   Without JS nothing is ever hidden.
--------------------------------------------------------------------------- */
.ln { display: block; }

.js-split .ln__in {
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  will-change: filter, opacity;
  transition:
    filter  1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 100ms),
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 100ms);
}
.js-split .is-in .ln__in,
.js-split .ln__in.is-in {
  filter: blur(0);
  opacity: 1;
}

/* Elements with inline markup (code, links, <br> mixes) get one
   whole-element reveal instead of per-line. */
.js-split .blur-in {
  filter: blur(10px);
  opacity: 0;
  transition:
    filter  1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-split .blur-in.is-in { filter: blur(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js-split .ln__in, .js-split .blur-in {
    filter: none; opacity: 1; transition: none;
  }
}

/* ---------------------------------------------------------------------------
   IMAGE FALLBACK
   Applied by site.js when an image fails to load. The container keeps its
   designed tone and proportions and names what belongs there.
--------------------------------------------------------------------------- */
.has-fallback {
  display: grid;
  place-items: center;
  max-width: 100%;
}

.img-fallback {
  padding: 20px 28px;
  max-width: 46ch;
  text-align: center;
  font-size: var(--t-caption);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--on-dark-45);
}

/* On pale containers the label needs the opposite ink. */
.media--soft .img-fallback,
.cs-full--soft .img-fallback,
.contact-tile--list .img-fallback,
.cs-split__media--chart .img-fallback,
.cs-block--soft .img-fallback { color: var(--ink-40); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE BASE
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --t-section: 28px;
    --t-lead: 22px;
  }
  .foot__cols { gap: 36px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nav__links { display: none; }
  .foot__top { gap: 32px; }
  .foot__say { max-width: none; }
}

/* ===========================================================================
   HOME
   =========================================================================== */
.home-hero { padding-top: 112px; }

.home-hero__eyebrow { color: var(--ink-40); margin-bottom: 18px; }

.home-hero__lead { max-width: 860px; }

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 26px;
  font-size: var(--t-caption);
  color: var(--ink-40);
}
.home-hero__meta li { position: relative; }
.home-hero__meta li + li::before {
  content: "";
  position: absolute;
  left: -15px; top: 50%;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--ink-24);
  transform: translateY(-50%);
}

/* --- showreel + accordion panel --- */
.home-split {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 40px;
}

.reel {
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 1004 / 560;
  max-height: 620px;
}

.panel-stack {
  flex: none;
  width: clamp(340px, 31%, 500px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--panel);
  transition: background-color var(--t-fast) var(--ease);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  line-height: 1.2;
  letter-spacing: -0.16px;
}

/* plus / minus drawn in CSS so there is no icon to expire */
.card__sign {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
}
.card__sign::before, .card__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.card__sign::after { transform: rotate(90deg); }
.card[data-open="true"] .card__sign::after { transform: rotate(0deg); opacity: 0; }

.card__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.38s var(--ease), opacity 0.28s var(--ease);
}
.card[data-open="false"] .card__body { grid-template-rows: 0fr; opacity: 0; }

.card__inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

.card__text {
  font-size: 14px;
  line-height: 1.52;
  letter-spacing: -0.14px;
  color: var(--ink-58);
}

/* --- section heading --- */
.sec-head { max-width: 760px; }
.sec-head .eyebrow { color: var(--ink-40); margin-bottom: 14px; }

.home-work { margin-top: 128px; }




/* --- what I do --- */
.home-do { margin-top: 128px; }

.do-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 36px;
}

.do-card {
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.do-card__n {
  font-size: 11px;
  color: var(--ink-24);
  font-variant-numeric: tabular-nums;
}

.do-card__t {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  line-height: 1.2;
  letter-spacing: -0.16px;
}

.do-card__d {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.14px;
  color: var(--ink-58);
}

.do-more { margin-top: 20px; font-size: 14px; }

/* --- contact --- */
.home-contact {
  margin-top: 128px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.contact-card {
  flex: 635 1 0;
  min-width: 0;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 24px;
  border-radius: var(--r-md);
  background: #d3d3d3;
}

.contact-card__prose {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.12;
  letter-spacing: -0.4px;
  text-wrap: pretty;
}

.contact-card__actions { display: flex; align-items: center; gap: 6px; }

.contact-pair {
  flex: 846 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-tile {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--tile);
}
.contact-tile img { width: 100%; height: 100%; object-fit: cover; }

.contact-tile__stamp {
  position: absolute;
  top: 16px; left: 14px;
  font-size: var(--t-caption);
  color: #fff;
  letter-spacing: -0.12px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

.contact-tile--list {
  background: var(--panel);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.contact-list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.contact-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  letter-spacing: -0.14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list__k { flex: none; width: 76px; color: var(--ink-40); font-size: var(--t-caption); }

/* --- home responsive --- */


@media (max-width: 1000px) {
  .home-hero { padding-top: 72px; }
  .home-split { flex-direction: column; }
  .reel { aspect-ratio: 16 / 10; max-height: 460px; }
  .panel-stack { width: 100%; }
  .do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-contact { flex-direction: column; }
  .contact-card { flex: none; min-height: 0; }
  .contact-pair { flex: none; }
  .contact-tile { min-height: 300px; }
  .home-work, .home-do, .home-contact { margin-top: 88px; }
}

@media (max-width: 720px) {
  
  
  
  .do-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-pair { grid-template-columns: minmax(0, 1fr); }
  .contact-list__k { width: 68px; }
}

/* ===========================================================================
   SHARED PAGE HERO (services, about, case study)
   =========================================================================== */
.page-hero { padding-top: 112px; max-width: 980px; }
.page-hero__eyebrow { color: var(--ink-40); margin-bottom: 18px; }
.page-hero__lead { max-width: 820px; }
.page-hero__note { max-width: 62ch; margin-top: 28px; }

@media (max-width: 1000px) { .page-hero { padding-top: 72px; } }
@media (max-width: 860px)  { .page-hero__lead { max-width: none; } }

/* ===========================================================================
   SERVICES
   =========================================================================== */
.svc { margin-top: 104px; }

.svc__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 32px;
  padding-block: 44px;
  border-top: 1px solid var(--rule-soft);
}
.svc__row:last-child { border-bottom: 1px solid var(--rule-soft); }

.svc__num {
  font-size: var(--t-caption);
  color: var(--ink-24);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}

.svc__body { max-width: 860px; }
.svc__title { margin-bottom: 18px; }
.svc__lede { max-width: 68ch; color: var(--ink-58); }

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}
.svc__tags li {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  font-size: var(--t-caption);
  letter-spacing: -0.12px;
  color: var(--ink-58);
}

/* --- dark accessibility band --- */
.svc-dark { margin-top: 96px; }

.svc-dark__inner {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--r-md);
  padding: 56px 48px;
}

.svc-dark__eyebrow { color: var(--on-dark-45); margin-bottom: 14px; }
.svc-dark__head { max-width: 760px; }

.svc-dark__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.svc-dark__t {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  line-height: 1.2;
  margin-bottom: 8px;
}

.svc-dark__d {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.14px;
  color: var(--on-dark-70);
}

/* --- process --- */
.svc-proc { margin-top: 112px; }

.proc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 36px;
}

.proc__step {
  padding: 28px 24px 32px;
  border-radius: var(--r-md);
  background: var(--panel);
}

.proc__n {
  display: block;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-24);
  margin-bottom: 14px;
}

.proc__t {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

.proc__d {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.14px;
  color: var(--ink-58);
}

/* --- CTA --- */
.svc-cta, .about-contact { margin-top: 112px; }

.cta {
  background: var(--soft);
  border-radius: var(--r-md);
  padding: 64px 48px;
}

.cta__eyebrow { color: var(--ink-40); margin-bottom: 16px; }

.cta__t {
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.12;
  letter-spacing: -0.4px;
  text-wrap: pretty;
}

.cta__d { max-width: 58ch; margin-top: 18px; }

.cta__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .svc { margin-top: 72px; }
  .svc__row { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding-block: 36px; }
  .svc-dark__inner { padding: 40px 28px; }
  .svc-dark__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .proc { grid-template-columns: minmax(0, 1fr); }
  .svc-dark, .svc-proc, .svc-cta, .about-contact { margin-top: 80px; }
  .cta { padding: 44px 28px; }
}

@media (max-width: 640px) {
  .svc__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .svc__num { padding-top: 0; }
}

/* ===========================================================================
   ABOUT
   =========================================================================== */
.bio {
  margin-top: 88px;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.bio__media {
  position: relative;
  aspect-ratio: 420 / 480;
  border-radius: var(--r-md);
}
.bio__media img { width: 100%; height: 100%; object-fit: cover; }

.bio__stamp {
  position: absolute;
  top: 16px; left: 14px;
  font-size: var(--t-caption);
  color: #fff;
  letter-spacing: -0.12px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.bio__prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 64ch;
  font-size: var(--t-meta);
  line-height: 1.6;
  letter-spacing: -0.16px;
  color: var(--ink-58);
  padding-top: 4px;
}
.bio__prose p:first-child { color: var(--ink); }

/* --- experience --- */
.exp { margin-top: 112px; }

.xp { margin-top: 36px; }

.xp__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  padding-block: 28px;
  border-top: 1px solid var(--rule-soft);
}
.xp__row:last-child { border-bottom: 1px solid var(--rule-soft); }

.xp__when {
  font-size: var(--t-caption);
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

.xp__row--now .xp__when {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}
.xp__row--now .xp__when::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #4cde78;
  flex: none;
}

.xp__role {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.xp__org {
  font-size: 14px;
  color: var(--ink-40);
  margin-top: 3px;
}

.xp__note {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.14px;
  color: var(--ink-58);
  max-width: 68ch;
  margin-top: 12px;
}

/* --- credentials --- */
.cred {
  margin-top: 112px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cred__block {
  padding: 28px 24px 32px;
  border-radius: var(--r-md);
  background: var(--panel);
}

.cred__h { color: var(--ink-40); margin-bottom: 20px; }

.cred__list { display: flex; flex-direction: column; gap: 18px; }
.cred__list li { display: flex; flex-direction: column; gap: 3px; }

.cred__t {
  font-size: 14px;
  letter-spacing: -0.14px;
}

.cred__m {
  font-size: var(--t-caption);
  color: var(--ink-40);
  line-height: 1.45;
}

.cta--wide .cta__d { max-width: 64ch; }

@media (max-width: 1000px) {
  .bio { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 56px; }
  .bio__media { aspect-ratio: 16 / 10; }
  .bio__prose { font-size: 15px; }
  .exp, .cred { margin-top: 80px; }
  .cred { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .xp__row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 22px; }
  .xp__when { padding-top: 0; }
}

.work-list { margin-top: 72px; }


/* --- locked entries --- */


@media (max-width: 1000px) {
  .work-list { margin-top: 52px; }
  
}


/* ===========================================================================
   CASE STUDY
   The content sits on a white panel, as in the Figma. Sections inset 8px
   from the panel edge and stack with an 8px gap, matching the source file.
   =========================================================================== */
.cs {
  background: var(--panel);
  border-radius: var(--r-md);
  padding: var(--pad);
  margin-top: var(--pad);
}

/* --- header --- */
.cs__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 16px 0;
}

.cs__title { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.cs__name {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.44px;
}

.cs__visit {
  font-size: var(--t-nav);
  letter-spacing: -0.28px;
  color: var(--ink-58);
}
.cs__visit:hover { color: var(--ink); }

.cs__visitIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 3px;
  background: #d3d3d3;
  font-size: 9px;
  color: var(--ink);
}

.cs__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #d3d3d3;
  font-size: 17px;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease);
}
.cs__close:hover { background: #bdbdbd; }

/* --- meta row --- */
.cs__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: 26px 16px 44px;
  flex-wrap: wrap;
}

.cs__intro { max-width: 460px; }

.cs__lede {
  font-family: var(--font-display);
  font-size: var(--t-nav);
  line-height: 1.5;
  letter-spacing: -0.14px;
  color: var(--ink-58);
}

.cs__stores { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

.store {
  display: inline-flex;
  flex-direction: column;
  padding: 7px 14px;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.store strong { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }

.cs__cols { display: flex; gap: 56px; flex-wrap: wrap; }

.cs__col dt {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 700;
  line-height: 1.5;
}
.cs__col dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink-58);
}
.cs__col-gap { margin-top: 18px; }

/* --- full-bleed media --- */
.cs-hero, .cs-full {
  margin: 0 0 var(--pad);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--dark);
}
.cs-hero img, .cs-full img { width: 100%; height: auto; }
.cs-full--soft { background: var(--soft); }

/* --- challenge / solution pair --- */
.cs-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pad);
  margin-bottom: var(--pad);
}

.cs-panel {
  padding: 48px 40px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
}

.cs-panel--dark { background: var(--dark); color: var(--on-dark); }
.cs-panel--soft { background: var(--soft); color: var(--ink); }

.cs-panel__eyebrow { margin-bottom: 18px; }
.cs-panel--dark .cs-panel__eyebrow { color: var(--on-dark-45); }
.cs-panel--soft .cs-panel__eyebrow { color: var(--ink-40); }

.cs-panel__h { margin-bottom: auto; padding-bottom: 32px; }

.cs-panel__b {
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.15px;
  max-width: 54ch;
}
.cs-panel--dark .cs-panel__b { color: var(--on-dark-70); }
.cs-panel--soft .cs-panel__b { color: var(--ink-58); }

/* --- full-width block with heading above media --- */
.cs-block {
  padding: 56px 40px;
  border-radius: var(--r-md);
  margin-bottom: var(--pad);
}
.cs-block--dark { background: var(--dark); color: var(--on-dark); }
.cs-block--soft { background: var(--soft); color: var(--ink); }

.cs-block__head { max-width: 900px; margin-bottom: 44px; }
.cs-block__head--tight { max-width: 760px; }

.cs-block__eyebrow { margin-bottom: 16px; }
.cs-block--dark .cs-block__eyebrow { color: var(--on-dark-45); }
.cs-block--soft .cs-block__eyebrow { color: var(--ink-40); }

.cs-block__b {
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.15px;
  max-width: 62ch;
  margin-top: 18px;
}
.cs-block--dark .cs-block__b { color: var(--on-dark-70); }
.cs-block--soft .cs-block__b { color: var(--ink-58); }

.cs-block__media { margin: 0; border-radius: var(--r-sm); overflow: hidden; }
.cs-block__media img { width: 100%; height: auto; }

.cs-block__media--inset {
  max-width: 1037px;
  margin-inline: auto;
  background: transparent;
}

.cs-block--center { text-align: center; }
.cs-block__centerH { margin-bottom: 48px; }

/* --- two-column text + media --- */
.cs-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
  padding: 56px 40px;
  border-radius: var(--r-md);
  margin-bottom: var(--pad);
}
.cs-split--dark { background: var(--dark); color: var(--on-dark); }
.cs-split--soft { background: var(--soft); color: var(--ink); }

.cs-split__text { max-width: 58ch; }
.cs-split__text .section-title { margin-bottom: 26px; }

.cs-split__eyebrow { margin-bottom: 16px; }
.cs-split--dark .cs-split__eyebrow { color: var(--on-dark-45); }
.cs-split--soft .cs-split__eyebrow { color: var(--ink-40); }

.cs-split__b {
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: -0.15px;
}
.cs-split__b + .cs-split__b { margin-top: 16px; }
.cs-split--dark .cs-split__b { color: var(--on-dark-70); }
.cs-split--soft .cs-split__b { color: var(--ink-58); }

.cs-split__b--note { font-style: italic; }
.cs-split--dark .cs-split__b--note { color: var(--on-dark-45); }

.cs-split__b code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--on-dark);
}
.cs-split--soft .cs-split__b code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.cs-split__media { margin: 0; border-radius: var(--r-sm); overflow: hidden; }
.cs-split__media img { width: 100%; height: auto; }
.cs-split__media--chart { background: var(--panel); border-radius: var(--r-md); }

/* media on the left, text on the right */
.cs-split--mediaFirst .cs-split__media { order: -1; }

/* --- feature trio under the analysis block --- */
.cs-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cs-feat__t {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 700;
  margin-bottom: 8px;
}

.cs-feat__d {
  font-size: var(--t-nav);
  line-height: 1.55;
  letter-spacing: -0.14px;
  color: var(--ink-58);
}

/* --- sheet anatomy list --- */
.cs-anat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-anat li {
  font-size: var(--t-nav);
  line-height: 1.55;
  letter-spacing: -0.14px;
  color: var(--on-dark-45);
}
.cs-anat__k {
  display: block;
  color: var(--on-dark);
  font-weight: 600;
  margin-bottom: 3px;
}

/* --- outro --- */
.cs-outro {
  padding: 64px 40px 56px;
  border-radius: var(--r-md);
  background: var(--soft);
}
.cs-outro__eyebrow { color: var(--ink-40); margin-bottom: 16px; }
.cs-outro__h { max-width: 18ch; }

.cs-outro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cs-outro__t {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 700;
  margin-bottom: 8px;
}

.cs-outro__d {
  font-size: var(--t-nav);
  line-height: 1.6;
  letter-spacing: -0.14px;
  color: var(--ink-58);
  max-width: 50ch;
}

.cs-outro__actions {
  display: flex;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* --- case study responsive --- */
@media (max-width: 1100px) {
  .cs-panel, .cs-block, .cs-split { padding: 40px 28px; }
  .cs-split { gap: 32px; }
  .cs__cols { gap: 32px; }
}

@media (max-width: 900px) {
  .cs-pair { grid-template-columns: minmax(0, 1fr); }
  .cs-split { grid-template-columns: minmax(0, 1fr); }
  /* keep reading order text-then-media once stacked */
  .cs-split--mediaFirst .cs-split__media { order: 0; }
  .cs-feats { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-outro__cols { grid-template-columns: minmax(0, 1fr); }
  .cs__meta { gap: 32px; padding-bottom: 32px; }
}

@media (max-width: 640px) {
  .cs { padding: 6px; }
  .cs__head { padding: 10px 10px 0; }
  .cs__meta { padding: 20px 10px 28px; }
  .cs-panel, .cs-block, .cs-split, .cs-outro { padding: 32px 20px; }
  .cs__cols { gap: 24px; flex-direction: column; }
  .cs-outro__h { max-width: none; }
}

/* ===========================================================================
   CONTACT POPOVER
   Opens on hover (fine pointers) and on tap or keyboard focus everywhere
   else. Email is a copy button rather than a mailto: link, because mailto
   is unreliable in embedded contexts and a copied address always works.
   =========================================================================== */
.cwrap { position: relative; display: flex; align-items: center; }

.cpop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(336px, calc(100vw - 32px));
  padding: 6px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 12px 32px -8px rgba(0, 0, 0, 0.18);

  opacity: 0;
  visibility: hidden;           /* also removes it from the tab order */
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease),
              transform 0.18s var(--ease),
              visibility 0s linear 0.18s;
}

.cpop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s var(--ease),
              transform 0.18s var(--ease),
              visibility 0s;
}

/* --- book a meeting --- */
.cpop__book {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
  transition: background-color var(--t-fast) var(--ease);
}
.cpop__book:hover { background: #f4f4f4; }

.cpop__mark {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 9px;
  background: var(--ink);
  display: grid;
  place-items: center;
}
.cpop__mark::after {
  content: "";
  width: 17px; height: 17px;
  border-radius: 999px;
  border: 3px solid var(--panel);
}

.cpop__bookText { flex: 1 1 auto; min-width: 0; }

.cpop__bookT {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.15px;
}

.cpop__bookM {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-caption);
  color: var(--ink-40);
  margin-top: 1px;
}

.cpop__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #27c457;
  flex: none;
}

.cpop__arrow {
  flex: none;
  align-self: flex-start;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-40);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cpop__book:hover .cpop__arrow,
.cpop__person:hover .cpop__arrow { transform: translate(1px, -1px); color: var(--ink); }

/* --- detail rows --- */
.cpop__rows {
  margin-top: 4px;
  padding: 4px;
  border-radius: 8px;
  background: #f4f4f4;
}

.cpop__row { display: flex; align-items: center; }

.cpop__copy {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 5px;
  font-size: var(--t-nav);
  letter-spacing: -0.14px;
  transition: background-color var(--t-fast) var(--ease);
}
.cpop__copy:hover { background: rgba(0, 0, 0, 0.05); }

.cpop__copy svg {
  width: 15px; height: 15px;
  flex: none;
  fill: none;
  stroke: var(--ink-40);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-fast) var(--ease);
}
.cpop__copy:hover svg { stroke: var(--ink); }

.cpop__copy.is-copied svg { stroke: #27c457; }
.cpop__copy.is-copied .cpop__val { color: #1a9c45; }

.cpop__row--split {
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin-top: 2px;
}

.cpop__k { font-size: var(--t-caption); color: var(--ink-40); }
.cpop__time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- person --- */
.cpop__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border-radius: 8px;
  transition: background-color var(--t-fast) var(--ease);
}
.cpop__person:hover { background: #f4f4f4; }

.cpop__face {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-58);
}

.cpop__pText { flex: 1 1 auto; min-width: 0; }

.cpop__pName {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-nav);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.14px;
}

.cpop__pRole {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-40);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cpop { transition: visibility 0s, opacity 0.01ms; transform: none; }
  .cpop.is-open { transform: none; }
}

/* Clipboard refused — the address is selected instead, so say so. */
.cpop__copy.is-hint { background: rgba(0, 0, 0, 0.05); }
.cpop__copy.is-hint .cpop__val { color: var(--ink); }
.cpop__copy.is-hint svg { stroke: var(--ink); }

/* ===========================================================================
   WORK SHOWCASE
   Row pattern from the Figma homepage: a meta column (identity at the top,
   description at the foot) beside three media tiles, rows divided by
   hairlines. The hover affordance is the one addition.
   =========================================================================== */
.showcase { margin-top: 32px; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 335px) minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid var(--rule-soft);
}
.showcase .row:last-child { border-bottom: 1px solid var(--rule-soft); }

.row__meta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
}

.row__id { display: flex; align-items: center; gap: 12px; }

.row__logo {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 9px;
  background: #e8e8e8;
  overflow: hidden;
}
.row__logo img { width: 100%; height: 100%; }
.row__logo--blank { background: rgba(0, 0, 0, 0.06); }

.row__idText { min-width: 0; }

.row__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-meta);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.16px;
}

.row__sector {
  display: block;
  font-size: var(--t-caption);
  color: var(--ink-40);
  margin-top: 2px;
}

.row__desc {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.13px;
  color: var(--ink-40);
  max-width: 40ch;
}

/* --- the hover affordance --- */
.row__open {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  font-size: var(--t-caption);
  letter-spacing: -0.12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(7px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.row--live:hover .row__open,
.row--live:focus-visible .row__open {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* --- tiles --- */
.row__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.row__tile {
  margin: 0;
  aspect-ratio: 372 / 300;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--dark);
  max-width: 100%;
}
.row__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.row--live:hover .row__tile img { transform: scale(1.03); }

/* --- locked projects get one honest block, not three fake tiles --- */
.row__tiles--locked {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1132 / 300;
  padding: 32px 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-soft);
}

.row__lockT {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-40);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
}

.row__lockD {
  font-size: var(--t-nav);
  line-height: 1.55;
  letter-spacing: -0.14px;
  color: var(--ink-40);
  max-width: 62ch;
}

/* --- explore all --- */
.showcase__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.showcase__more .link { font-size: 14px; }

@media (max-width: 1000px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .row__meta { gap: 18px; }
  .row__desc { max-width: none; }
  /* No hover on the way to a tap — show the cue as a static chip instead. */
  .row__open {
    position: static;
    align-self: flex-start;
    opacity: 1;
    transform: none;
    padding: 6px 12px;
    font-size: 11px;
  }
  .row__tiles--locked { aspect-ratio: auto; padding: 24px; }
}

@media (max-width: 560px) {
  .row__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row__tile:nth-child(3) { display: none; }
}

/* ===========================================================================
   WORK SHELL — sticky project list beside a content pane
   The pane shows the gallery; selecting a project loads its case study
   into the same pane while the list stays put. Below 1000px the list
   hides and the gallery becomes a stacked feed.
   =========================================================================== */
.wshell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* --- sidebar --- */
.side {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.allchip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--panel);
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: -0.28px;
}
.allchip svg { width: 12px; height: 12px; }

.li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--panel);
  transition: background-color 0.2s ease;
}
.li--link { cursor: pointer; }
.li--link:hover, .li.is-current { background: #f7f7f7; }
.li--locked { cursor: default; }
.li--locked .li__title, .li--locked .li__desc { color: var(--ink-40); }

.li__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 0;
}

.li__industry {
  font-size: var(--t-caption);
  letter-spacing: -0.02em;
  color: var(--ink-58);
}

/* expand control: two bars; the vertical one rotates flat when current */
.expand {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.expand::before, .expand::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 1.3px;
  margin-top: -0.65px;
  background: currentColor;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.expand::after { transform: rotate(90deg); }
.li.is-current .expand { background: var(--ink); color: var(--panel); }
.li.is-current .expand::after { transform: rotate(0deg); }
.li--locked .expand { opacity: 0.4; }

.li__bottom { display: flex; align-items: flex-start; gap: 12px; }

.li__logo {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 10px;
  background: var(--dark);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.li__logo img { width: 100%; height: 100%; }
.li__logo--blank { background: rgba(0, 0, 0, 0.06); }

.li__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.li__title { font-size: var(--t-nav); font-weight: 500; letter-spacing: -0.14px; }
.li__desc {
  font-size: var(--t-nav);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.14px;
  color: var(--ink-40);
  max-width: 25ch;
}

/* --- content pane --- */
.pane {
  min-width: 0;
  min-height: calc(100vh - var(--nav-h) - 32px);
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--panel);
  transition: opacity 0.25s ease;
}
.pane.is-loading { opacity: 0.45; }

.pane__title {
  font-family: var(--font-display);
  font-size: var(--t-section);
  line-height: 1.1;
  letter-spacing: -0.4px;
  padding: 20px 12px 28px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gal--wide { grid-column: 1 / -1; }

.gal__head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 0; }
.gal__logo {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 7px;
  background: var(--dark);
  overflow: hidden;
}
.gal__logo img { width: 100%; height: 100%; }
.gal__logo--blank { background: rgba(0, 0, 0, 0.06); }
.gal__name { font-size: var(--t-nav); font-weight: 500; letter-spacing: -0.14px; }
.gal__kind { font-size: var(--t-caption); color: var(--ink-40); margin-left: 2px; }

.gal__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--dark);
}
.gal--wide .gal__media { aspect-ratio: 1480 / 825; }
.gal__media img { width: 100%; height: 100%; object-fit: cover; }

.gal__block {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-soft);
}
.gal__status {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-40);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
}
.gal__note {
  font-size: var(--t-nav);
  line-height: 1.5;
  letter-spacing: -0.14px;
  color: var(--ink-40);
  max-width: 52ch;
}

/* case study rendered inside the pane: the pane is already the white card */
.pane .cs { background: transparent; margin: 0; padding: 0; }
.pane .cs__head { padding-top: 12px; }

/* --- responsive --- */
@media (max-width: 1100px) {
  .wshell { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .wshell { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .side { display: none; }
  .pane { min-height: 0; }
  .pane__title { padding: 16px 8px 20px; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gal { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
  .gal:first-child { border-top: 0; }
  .gal--wide { grid-column: auto; }
  .gal--wide .gal__media { aspect-ratio: 16 / 10; }
  .gal__head { padding: 0 8px 4px; }
  .gal__logo { width: 44px; height: 44px; border-radius: 9px; }
  .gal__name { font-size: 16px; }
}

/* ===========================================================================
   ZUNIDESIGN ADDITIONS
   =========================================================================== */
.nav__brand { display: inline-flex; align-items: center; gap: 8px; }
.nav__brand:hover .nav__mark { transform: scale(1.08); }
.nav__word {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
}
.foot--slim { padding-top: 0; margin-top: 0; }
.foot--slim .foot__base { padding-top: 24px; }

/* Free-files band — used on the homepage and the download page */
.home-free { padding-top: 24px; }
.free-band {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--dark);
  color: var(--on-dark);
  transition: background-color var(--t-fast) var(--ease);
}
.free-band:hover { background: #1c1c22; }
.free-band__k { font-size: var(--t-caption); color: var(--on-dark-45); }
.free-band__t { font-family: var(--font-display); font-size: var(--t-title); line-height: 1.2; letter-spacing: -0.3px; text-wrap: pretty; }
.free-band__go {
  font-size: 13px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink); white-space: nowrap;
  transition: transform var(--t-fast) var(--ease);
}
.free-band:hover .free-band__go { transform: translateX(3px); }
.free-band--light { background: var(--panel); color: var(--ink); }
.free-band--light:hover { background: #f7f7f7; }
.free-band--light .free-band__k { color: var(--ink-40); }
.free-band--light .free-band__go { background: var(--ink); color: var(--panel); }
@media (max-width: 760px) {
  .free-band { grid-template-columns: 1fr; gap: 10px; }
  .free-band__go { justify-self: start; }
}

/* Download page */
.dl { max-width: 880px; margin-inline: auto; padding-bottom: 64px; }
.dl__hero { padding-top: 96px; padding-bottom: 32px; }
.dl__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-58); margin-bottom: 18px; }
.dl__title { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -0.6px; max-width: 18ch; }
.dl__note { margin-top: 18px; max-width: 52ch; font-size: var(--t-body); line-height: 1.5; color: var(--ink-58); }

.dl__panel { background: var(--panel); border-radius: var(--r-md); padding: 8px; }
.dl__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 16px; }
.dl__h { font-family: var(--font-display); font-size: var(--t-title); letter-spacing: -0.3px; }
.dl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dl__item {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px; border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease);
}
.dl__item:hover, .dl__item:focus-visible { background: #f7f7f7; }
.dl__type {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--soft); font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink-58);
}
.dl__text { display: grid; gap: 3px; min-width: 0; }
.dl__name { font-size: var(--t-meta); font-weight: 500; letter-spacing: -0.2px; overflow-wrap: anywhere; }
.dl__meta { font-size: 13px; color: var(--ink-40); }
.dl__go {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: var(--ink); color: var(--panel); font-size: 15px;
  transition: transform var(--t-fast) var(--ease);
}
.dl__item:hover .dl__go { transform: translateY(2px); }
.dl__after { display: grid; gap: 8px; margin-top: 24px; }
@media (max-width: 560px) {
  .dl__hero { padding-top: 56px; }
  .dl__head { flex-direction: column; align-items: stretch; }
  .dl__head .btn { justify-content: center; }
}
.foot--slim .foot__base { margin-top: 0; }

/* ===========================================================================
   HOME — 2026-11 redesign (Figma PORTFOLIO_2026, frame 361:6126)
   Measurements are taken from the 1512px frame: a 1272px column with an
   18px inset, so content runs 1236px wide. Everything here is scoped to
   body.zh so free.html keeps the original look.
   =========================================================================== */
body.zh {
  --zh-col:    1272px;
  --zh-inset:  18px;
  --zh-page:   #fcfcfc;
  --zh-ink:    #1e1e1e;
  --zh-rule:   #c6c6c6;
  --zh-grid:   #e2e2e2;
  --zh-dash:   rgba(153, 159, 173, 0.5);
  position: relative;
  background: var(--zh-page);
  overflow-x: clip;
}

/* Column guides: solid at the column edges, dashed every 300px between. */
body.zh::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: min(var(--zh-col), 100% - 2 * var(--gutter));
  transform: translateX(-50%);
  /* Only the two outer column edges; the inner 300px guides were dropped
     site-wide (Figma 404:9060). */
  border-inline: 1px solid var(--zh-grid);
  pointer-events: none;
  z-index: 0;
}

.zh-frame, .zh-foot { position: relative; z-index: 1; }

/* --- nav ---------------------------------------------------------------- */
.zh .zh-nav {
  padding: 0;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.zh-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--zh-col), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 8px var(--zh-inset);
}

.zh-nav__left { display: flex; align-items: center; gap: 19px; }

.zh-nav__brand {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.54px;
  color: #000;
  white-space: nowrap;
}

.zh-nav__links { display: flex; align-items: center; gap: 4px; }

.zh .pill { font-weight: 524; }
.zh .zh-nav__links .pill { line-height: 1.25; }

.zh-pill--dark { background: #2c2c2c; color: #ffffff; }
.zh-pill--dark:hover { background: #000000; }

/* Booking icon in the contact popover (Figma 395:18135: 212x209 frame,
   #121212, 30px radius, 140px phone glyph at 36/35), scaled to 40px. */
.zh-book-mark {
  position: relative;
  overflow: hidden;
  border-radius: 14.15%;
  background: #121212;
}
.zh-book-mark::after { content: none; }
.zh-book-mark img {
  position: absolute;
  left: 16.98%;
  top: 16.75%;
  width: 66.04%;
  height: auto;
  max-width: none;
}

/* Instagram row avatar */
.zh-face { overflow: hidden; }
.zh-face img { width: 100%; height: 100%; object-fit: cover; }

/* --- column ------------------------------------------------------------- */
.zh-frame main {
  width: min(var(--zh-col), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* --- hero --------------------------------------------------------------- */
.zh-hero {
  display: flex;
  align-items: flex-start;
  gap: 110px;
  padding: 77px var(--zh-inset) 0;
  color: #000;
  line-height: 1.22;
}

.zh-hero__title {
  flex: 0 1 641px;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1.14px;
}

.zh-hero__aside {
  flex: 0 1 485px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
}

/* --- work rows ---------------------------------------------------------- */
.zh-work {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 125px;
}

.zh-row {
  display: flex;
  gap: 9px;
  padding: 24px var(--zh-inset) 0;
  border-top: 1px solid var(--zh-rule);
}

.zh-row--link { color: inherit; }
.zh-row--link .zh-tile { transition: transform var(--t-fast) var(--ease); }
.zh-row--link:hover .zh-tile { transform: translateY(-2px); }
.zh-row--link:hover .zh-row__name { text-decoration: underline; text-underline-offset: 3px; }

.zh-row__meta {
  flex: 0 0 291px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.zh-row__id { display: flex; align-items: center; gap: 12px; }

.zh-row__logo {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 7.273px;
  background: #0c0c0c;
  overflow: hidden;
}

.zh-row__logo--agent { position: relative; background: #1fa9ee; }
.zh-row__logo--agent img { position: absolute; left: 3px; top: 3.5px; }

.zh-row__idText { line-height: normal; }

.zh-row__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--zh-ink);
}

.zh-row__type {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

.zh-row__desc {
  max-width: 247px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -0.12px;
  color: rgba(0, 0, 0, 0.4);
}

.zh-row__tiles {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 8px;
}

.zh-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
}

/* Images inside tiles are placed from the tile's centre, as in Figma. */
.zh-tile > img {
  position: absolute;
  left: 50%; top: 50%;
  max-width: none;
}

.zh-tile__logo { width: 106px; height: 106px; transform: translate(calc(-50% + 0.17px), -50%); }
.zh-tile--ft-logo .zh-tile__logo { border-radius: 24.091px; background: #0c0c0c; }

.zh-tile--ft-logo  { background: #191919; }
.zh-tile--ft-hand  { background: transparent; }
.zh-tile--ft-hand > img {
  width: 495px; height: 371px;
  object-fit: cover;
  transform: translate(calc(-50% + 17.17px), calc(-50% + 20.5px));
}
.zh-tile--ft-phone { background: #161719; }
.zh-tile--ft-phone > img {
  width: 473.455px; height: 651px;
  object-fit: cover;
  transform: translate(calc(-50% - 0.27px), calc(-50% + 105.5px));
}

.zh-tile--pp-logo   { background: #2b72de; }
.zh-tile--pp-screen { background: #161719; }
.zh-tile__shot {
  width: 175px;
  object-fit: cover;
}
.zh-tile__shot--a {
  height: 380.473px;
  border-radius: 24.725px;
  transform: translate(calc(-50% + 0.83px), calc(-50% + 69.24px));
}
.zh-tile__shot--b {
  height: 380px;
  border-radius: 24px;
  transform: translate(calc(-50% + 0.5px), calc(-50% + 70px));
}

.zh-tile--agent-a { background: #1f1f1f; }
.zh-tile--agent-b { background: #1a1a1a; }
.zh-tile--agent-c {
  background: radial-gradient(50% 50% at 50% 50%, #535353 0%, #363636 50%, #282828 75%, #1a1a1a 100%);
}
.zh-tile--agent-c > img {
  top: -10px;
  left: calc(50% - 312.33px);
  width: 688.057px; height: 319px;
  object-fit: cover;
}

/* --- studio band -------------------------------------------------------- */
.zh-studio {
  margin-top: 124px;
  padding-inline: var(--zh-inset);
}

.zh-studio__card {
  display: flex;
  align-items: center;
  gap: 55px;
  padding: 60px 64px;
  border-radius: 6px;
  background: #1e1e1e;
}

.zh-studio__copy, .zh-studio__media { flex: 1 1 0; min-width: 0; }

.zh-studio__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 157px;
}

.zh-studio__text {
  max-width: 373px;
  font-family: "Inter", var(--font-body);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: #f1efef;
}
.zh-studio__text p + p { margin-top: 18px; }

.zh-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #ffffff;
  color: #0f0f0f;
  font-size: 14px;
  font-weight: 524;
  line-height: 1.22;
  letter-spacing: -0.42px;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.zh-btn-light:hover { transform: translateY(-1px); background: #ececec; }

.zh-studio__media {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.zh-studio__photo {
  position: relative;
  height: 316px;
  overflow: hidden;
  border-radius: 6px;
  background: #dbdbdb;
  container-type: inline-size;
}

/* Figma frame: 526.5px wide box, image 553.5px wide sitting 238px up. */
.zh-studio__photo img {
  position: absolute;
  left: 0;
  top: calc(-238 / 526.5 * 100cqw);
  width: calc(553.5 / 526.5 * 100cqw);
  height: auto;
  max-width: none;
}

.zh-studio__person { display: flex; align-items: flex-start; gap: 13px; }

.zh-studio__yt {
  display: flex;
  align-items: center;
  padding: 6px 26px;
  border-radius: 10px;
  background: #f74545;
}

.zh-studio__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 141px;
  line-height: normal;
  white-space: nowrap;
}

.zh-studio__name { font-size: 16px; font-weight: 600; letter-spacing: -0.32px; color: #ffffff; }
.zh-studio__role { font-size: 14px; color: #a8a8a8; }

/* --- index -------------------------------------------------------------- */
.zh-index {
  margin-top: 28px;
  padding-inline: var(--zh-inset);
}

.zh-index__card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px var(--zh-inset);
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  background: #ffffff;
}

.zh-index__col--work     { flex: 0 0 281px; }
.zh-index__col--services { flex: 0 0 276px; }
.zh-index__col--products { flex: 0 0 280px; }
.zh-index__col--posts    { flex: 1 1 0; min-width: 0; }

.zh-index__h {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -1.02px;
  color: var(--zh-ink);
}

.zh-index__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 23px;
}

.zh-index__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: var(--ink-58);
  transition: color var(--t-fast) var(--ease);
}
a.zh-index__item:hover { color: #000; }

.zh-index__ic {
  position: relative;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 6.364px;
  background: #0c0c0c;
  overflow: hidden;
}
img.zh-index__ic[src*="pp-logo"] { border-radius: 6.125px; background: #1a1a1a; }

.zh-index__ic--agent { background: #1fa9ee; }
.zh-index__ic--agent img { position: absolute; left: 2.63px; top: 3.06px; }

.zh-index__ic--svc { background: #181818; }
.zh-index__ic--svc img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 0.44px));
}

/* --- footer ------------------------------------------------------------- */
.zh-foot {
  margin-top: 47px;
  padding-bottom: 44px;
}

.zh-foot__mark {
  width: min(var(--zh-col), 100% - 2 * var(--gutter));
  margin-inline: auto;
  border-bottom: 0;
}
.zh-foot__mark img { width: 100%; height: auto; }

/* Full-bleed rule under the wordmark */
.zh-foot__mark::after {
  content: "";
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid #000;
}

.zh-foot__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: min(1236px, 100% - 2 * var(--gutter) - 2 * var(--zh-inset));
  margin: 55px auto 0;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: #000;
}

.zh-foot__say {
  flex: 0 1 582px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-58);
}

.zh-foot__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-inline: 24px;
}
.zh-foot__col--contact { flex: 0 0 300px; }
.zh-foot__col--links   { flex: 1 1 0; min-width: 0; }
.zh-foot__col a:not(.pill) { transition: color var(--t-fast) var(--ease); }
.zh-foot__col a:not(.pill):hover { color: var(--ink-58); }
.zh-foot .zh-pill--dark { line-height: 1.22; }

/* --- responsive --------------------------------------------------------- */
/* The dashed guides sit on a fixed 300px rhythm; drop them once the
   column is narrower than the design. */
@media (max-width: 1319px) {
  body.zh::before { background: none; }
}

@media (max-width: 1100px) {
  .zh-hero { gap: 48px; }
  .zh-hero__title { font-size: 32px; letter-spacing: -0.96px; }
  .zh-row { flex-direction: column; gap: 20px; }
  .zh-row__tiles { flex: none; }
  .zh-foot__say { flex: 1 1 0; min-width: 0; }
  .zh-row__meta { flex-basis: auto; }
  .zh-row__desc { max-width: 520px; }
  .zh-index__card { flex-wrap: wrap; row-gap: 40px; }
  .zh-index__col--work, .zh-index__col--services,
  .zh-index__col--products, .zh-index__col--posts { flex: 1 1 calc(50% - 12px); }
  .zh-studio__card { gap: 40px; padding: 48px; }
  .zh-studio__copy { gap: 64px; }
}

@media (max-width: 800px) {
  .zh-hero { flex-direction: column; gap: 20px; padding-top: 48px; }
  .zh-hero__title, .zh-hero__aside { flex: none; width: 100%; }
  .zh-work { margin-top: 64px; }
  .zh-row__tiles {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--zh-inset));
    padding-inline: var(--zh-inset);
    scroll-padding-inline: var(--zh-inset); /* snap to the text edge, not the rule */
    scrollbar-width: none;
  }
  .zh-row__tiles::-webkit-scrollbar { display: none; }
  .zh-tile { flex: 0 0 min(306px, 78%); scroll-snap-align: start; }
  .zh-studio { margin-top: 72px; }
  .zh-studio__card { flex-direction: column; align-items: stretch; padding: 32px 24px; }
  .zh-studio__copy { gap: 32px; }
  .zh-foot__row { flex-direction: column; gap: 28px; }
  .zh-foot__say { flex: none; }
  .zh-foot__col { padding-inline: 0; flex: none !important; }
}

@media (max-width: 640px) {
  /* keep Work / Services / About on phones: tighten the bar instead of hiding them */
  .zh-nav__inner { gap: 8px; padding-inline: 0; }
  .zh-nav__left { gap: 10px; min-width: 0; }
  .zh-nav__brand { font-size: 16px; letter-spacing: -0.48px; }
  .zh-nav__links { gap: 2px; }
  .zh .zh-nav .pill { padding: 4px 8px; font-size: 13px; letter-spacing: -0.3px; }
  .zh-hero__title { font-size: 28px; letter-spacing: -0.84px; }
  .zh-hero__aside { font-size: 16px; letter-spacing: -0.4px; }
  .zh-index__card { flex-direction: column; }
  .zh-index__col--work, .zh-index__col--services,
  .zh-index__col--products, .zh-index__col--posts { flex: none; width: 100%; }
  .zh-index__h { font-size: 28px; }
}

@media (max-width: 370px) {
  .zh-nav__left { gap: 8px; }
  .zh-nav__brand { font-size: 15px; letter-spacing: -0.45px; }
  .zh .zh-nav .pill { padding: 4px 6px; font-size: 12.5px; letter-spacing: -0.25px; }
}
@media (max-width: 340px) {
  .zh-nav__inner { width: calc(100% - 16px); }
  .zh-nav__left { gap: 6px; }
}

/* ===========================================================================
   CASE STUDY — Final Table (Figma PORTFOLIO_2026, frame 386:12398)
   Shares the body.zh column, nav, guides and footer with the homepage.
   Media tiles are 2x exports of the Figma frames; copy is live text.
   =========================================================================== */
.zc { font-family: "Asta Sans", var(--font-body); }

/* --- header ------------------------------------------------------------- */
.zc-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px var(--zh-inset) 0;
  font-family: var(--font-display);
}

.zc-head__top { display: flex; align-items: center; justify-content: space-between; }
.zc-head__titleRow { display: flex; align-items: center; gap: 28px; }

.zc-head__title {
  width: 247px;
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.44px;
  color: #000;
}

.zc-head__visit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  letter-spacing: -0.28px;
  color: var(--ink-58);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.zc-head__visit:hover { color: #000; }
.zc-head__visitIc { display: flex; padding: 2.137px; border-radius: 2.137px; background: #d3d3d3; }

.zc-head__close {
  display: flex;
  padding: 4.275px;
  border-radius: 999px;
  background: #d3d3d3;
  transition: background-color var(--t-fast) var(--ease);
}
.zc-head__close:hover { background: #c2c2c2; }

.zc-head__body { display: flex; align-items: flex-start; gap: 281px; }

.zc-head__intro { flex: 0 0 444px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.zc-head__desc {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.14px;
  color: var(--ink-58);
}

.zc-head__stores img { width: 238.64px; height: 38px; }

.zc-head__meta { flex: 1 1 0; display: flex; align-items: flex-start; gap: 24px; margin: 0; }
.zc-meta-stack { display: flex; flex-direction: column; gap: 8px; }
.zc-meta {
  display: flex;
  flex-direction: column;
  width: 155px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: #000;
}
.zc-meta dt { font-weight: 700; margin-bottom: 4px; }
.zc-meta dd { margin: 0; }

/* --- body column ---------------------------------------------------------- */
.zc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px var(--zh-inset) 0;
}

.zc-row { display: grid; gap: 8px; }
.zc-row--2        { grid-template-columns: 1fr 1fr; }
.zc-row--site     { grid-template-columns: 764fr 464fr; }
.zc-row--gesture  { grid-template-columns: 604fr 632fr; gap: 0; }
.zc-row--snap     { grid-template-columns: 606fr 622fr; }
.zc-row--opp      { grid-template-columns: 488fr 740fr; }
.zc-row--settings { grid-template-columns: 337fr 892fr; gap: 6.876px; }
.zc-row--impl     { grid-template-columns: 420fr 809fr; gap: 6.881px; }
.zc-row--sheets   { grid-template-columns: 508fr 721fr; gap: 6.881px; }
.zc-col { display: flex; flex-direction: column; gap: 8px; }
.zc-h-486 { min-height: 486px; }
.zc-h-467 { min-height: 467px; }
.zc-h-827 { min-height: 827px; }

.zc-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}
.zc-tile > img { width: 100%; height: auto; }
.zc-tile > video { display: block; width: 100%; height: auto; }
.zc-tile--eee { background: #eeeeee; }
/* Looping screen recording (was a GIF), re-rendered on white. Keeps the old still's 1228x1924 tile shape;
   white fills the side bars. */
.zc-tile--video { aspect-ratio: 1228 / 1924; background: #fff; }
.zc-tile--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* --- cards ---------------------------------------------------------------- */
.zc-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.zc-card--dark { background: linear-gradient(180deg, #2e2e2e 0%, #000000 100%); color: #fff; }
.zc-card--soft { background: #f1efef; color: #000; }
.zc-card--center { display: flex; flex-direction: column; justify-content: center; }
.zc-card--p32 { padding: 32px; }

.zc-txt { display: flex; flex-direction: column; }
.zc-txt--cs   { padding: 24px 64px; }
.zc-txt--px32 { padding-inline: 32px; }
.zc-txt--abs  { position: absolute; }

.zc-label {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.13px;
  color: #fff;
}
.zc-card--soft .zc-label, .zc-label--ink { color: #000; }

.zc-h {
  margin-top: var(--g1, 8px);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.24px;
}
.zc-h--soft { color: #f1efef; }
.zc-h--ink  { color: #000; }
.zc-h--tight { margin-top: 0; letter-spacing: -1.03px; }

.zc-body-copy {
  margin-top: var(--g2, 16px);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.15px;
  color: rgba(255, 255, 255, 0.7);
}
.zc-body-copy--140   { line-height: 1.4; }
.zc-body-copy--white { color: #fff; }
.zc-body-copy--ink   { color: rgba(41, 41, 41, 0.7); }

.zc-small {
  margin-top: var(--g2, 10px);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.13px;
  color: rgba(255, 255, 255, 0.78);
}
.zc-small--tight { line-height: 1.2; color: rgba(0, 0, 0, 0.78); }

/* --- 6 user flow ---------------------------------------------------------- */
.zc-flow {
  display: flex;
  align-items: center;
  gap: 49px;
  padding: 24px 32px;
}
.zc-flow__txt { flex: 0 0 478px; display: flex; flex-direction: column; padding: 24px 32px; }
.zc-flow__img { flex: 0 1 645px; min-width: 0; width: 645px; height: auto; }

/* --- 7 explore ------------------------------------------------------------ */
.zc-explore { padding: 47px 32px 167px; }
.zc-explore__h {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.2px;
}
.zc-explore__img { width: min(1037px, 100%); height: auto; margin: 24px auto 0; }

/* --- 9 bottom nav --------------------------------------------------------- */
.zc-nav {
  display: flex;
  align-items: center;
  gap: 45px;
  padding: 8px 22px 8px 21px;
  border-radius: 0;
}
.zc-nav__txt { flex: 0 0 502px; display: flex; flex-direction: column; gap: 35px; padding-inline: 32px; }
.zc-nav__txt .zc-txt { position: relative; z-index: 1; }
.zc-nav__bar { width: 380px; height: 66px; }
.zc-nav__bar img { width: 539px; max-width: none; height: auto; margin: -39px 0 0 -49px; }
.zc-nav__img { flex: 0 1 646px; min-width: 0; width: 646px; height: auto; }

/* --- 10 gesture ----------------------------------------------------------- */
.zc-gesture__card {
  align-self: center;
  min-height: 794px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 222px 64px;
}

/* --- 14 analysis ---------------------------------------------------------- */
.zc-analysis { display: flex; flex-direction: column; gap: 80px; padding: 43px 32px; }
.zc-analysis__top { display: flex; flex-direction: column; gap: 21px; margin-inline: -5px; }
.zc-analysis__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.876px;
  padding: 20.627px 27.503px;
  text-align: center;
  line-height: 1.2;
}
.zc-analysis__kicker { font-size: 11.173px; letter-spacing: -0.11px; }
.zc-analysis__h { font-size: 24px; font-weight: 400; letter-spacing: -0.24px; }
.zc-analysis__d { max-width: 471px; font-size: 15px; letter-spacing: -0.15px; }
.zc-analysis__phones { position: relative; aspect-ratio: 1183 / 493; }
.zc-analysis__phones img {
  position: absolute;
  left: calc(-24 / 1183 * 100%);
  top: calc(-8 / 1183 * 100%);
  width: calc(1231 / 1183 * 100%);
  max-width: none;
  height: auto;
}

.zc-features { display: flex; gap: 39px; }
.zc-features p {
  flex: 1 1 0;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.15px;
}
.zc-features strong { font-weight: 700; }

/* --- 15 settings ---------------------------------------------------------- */
.zc-settings { border-radius: 6.876px; }
.zc-settings > img { width: 100%; height: 100%; object-fit: cover; }

/* --- 16 implementation ---------------------------------------------------- */
.zc-impl__card { padding: 56px 32px 32px; border-radius: 6.881px; }
.zc-row--impl .zc-tile, .zc-row--sheets .zc-card { border-radius: 6.881px; }

/* --- 18 sheets ------------------------------------------------------------ */
.zc-sheet__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 56px 32px;
}
.zc-sheet__intro { display: flex; flex-direction: column; gap: 15.482px; }
.zc-sheet__lede { font-size: 15px; line-height: 1.6; }

.zc-notes { margin: 0; }
.zc-note { display: flex; align-items: flex-start; padding-block: 13.762px; }
.zc-note:first-child { padding-top: 0; }
.zc-note dt {
  flex: 0 0 120.419px;
  font-size: 10px;
  font-weight: 500;
  line-height: 18.923px;
  letter-spacing: -0.05px;
}
.zc-note dd {
  flex: 1 1 0;
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 18.063px;
  color: rgba(255, 255, 255, 0.6);
}

.zc-sheet__panel { padding: 31px 21px 0; }
.zc-sheet__head { display: flex; flex-direction: column; gap: 6.881px; max-width: 446px; }
.zc-sheet__h { font-size: 24px; font-weight: 400; line-height: 25.8px; letter-spacing: -1px; }
.zc-sheet__sub { font-size: 13px; line-height: 1.2; }
.zc-sheet__img { width: 700px; max-width: 100%; height: auto; margin-top: 49px; }
video.zc-sheet__img { display: block; }

/* --- footer spacing ------------------------------------------------------- */
.zc ~ .zh-foot, .zh-frame:has(.zc) + .zh-foot { margin-top: 68px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .zc-head__body { flex-direction: column; gap: 28px; }
  .zc-head__intro { flex: none; max-width: 520px; }
  .zc-head__meta { flex-wrap: wrap; }
  .zc-flow, .zc-nav { flex-direction: column; align-items: stretch; }
  .zc-flow__txt, .zc-nav__txt { flex: none; }
  .zc-flow__img, .zc-nav__img { width: 100%; flex: none; }
  .zc-nav { padding: 32px 21px; }
  .zc-nav__img { max-width: 646px; margin-inline: auto; }
  .zc-txt--abs { position: static; width: auto !important; padding: 48px 40px; }
  .zc-gesture__card { padding: 64px 40px; min-height: 0; }
  .zc-row--gesture { gap: 8px; }
}

@media (max-width: 800px) {
  .zc-row--2, .zc-row--site, .zc-row--gesture, .zc-row--snap, .zc-row--opp,
  .zc-row--settings, .zc-row--impl, .zc-row--sheets { grid-template-columns: 1fr; }
  .zc-h-486, .zc-h-467, .zc-h-827 { min-height: 0; }
  .zc-head__title { width: auto; }
  .zc-head__titleRow { gap: 16px; }
  .zc-txt--cs { padding: 40px 24px; }
  .zc-txt--px32 { padding-inline: 0; }
  .zc-card--p32 { padding: 40px 24px; }
  .zc-txt--abs { padding: 40px 24px; }
  .zc-gesture__card { padding: 40px 24px; }
  .zc-flow { padding: 24px 0; }
  .zc-flow__txt { padding: 16px 24px; }
  .zc-explore { padding: 40px 16px 48px; }
  .zc-explore__h { font-size: 30px; letter-spacing: -0.9px; }
  .zc-nav__txt { padding-inline: 8px; }
  .zc-nav__bar { transform: scale(0.8); transform-origin: left top; }
  .zc-impl__card { padding: 40px 24px; }
  .zc-analysis { padding: 32px 16px; gap: 40px; }
  .zc-features { flex-direction: column; gap: 24px; }
  .zc-sheet__card { padding: 40px 24px; }
  .zc-note { flex-direction: column; gap: 4px; }
  .zc-note dt { flex: none; }
  .zc-sheet__panel { padding: 24px 16px 16px; }
  .zc-sheet__img { margin-top: 24px; }
}

/* ===========================================================================
   ABOUT — modelled on oimachi.co/posts/about, in the homepage's language:
   a posts sidebar in the first 300px column, the article in the rest, and
   the reading column starting on the 600px guide.
   =========================================================================== */
.za {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
}

/* --- sidebar -------------------------------------------------------------- */
.za-side {
  position: sticky;
  top: 50px;
  padding: 26px 18px 26px 8px;
}
.za-posts { display: flex; flex-direction: column; gap: 6px; }
.za-post {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background-color var(--t-fast) var(--ease);
}
a.za-post:hover { background: #f3f3f3; }
.za-post.is-current { background: #ffffff; border-color: #dfdfdf; }
.za-post__k { font-size: 11px; line-height: 1.3; color: rgba(0, 0, 0, 0.4); }
.za-post__t { font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -0.14px; color: var(--zh-ink); }
.za-post__d { font-size: 12px; line-height: 1.3; letter-spacing: -0.12px; color: var(--ink-58); }
.za-post__img {
  display: block;
  margin-top: 6px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
}
.za-post__img img { width: 100%; height: 100%; object-fit: cover; }
.za-post.is-soon .za-post__t { color: var(--ink-58); }

/* --- hero ----------------------------------------------------------------- */
.za-main { min-width: 0; padding-bottom: 8px; }
.za-hero { padding: 26px var(--zh-inset) 0; }
.za-hero__t {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.44px;
  color: #000;
}
.za-hero__lead {
  max-width: 860px;
  margin-top: 56px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -1.14px;
  color: #000;
}
.za-hero__date { margin-top: 40px; font-size: 12px; color: rgba(0, 0, 0, 0.4); }
.za-hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  height: 560px;
}
.za-hero__img { margin: 0; overflow: hidden; border-radius: 8px; background: #191919; }
.za-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.za-hero__img--portrait img { object-position: 50% 35%; }

/* --- reading column ------------------------------------------------------- */
.za-body {
  width: min(618px, 100% - 195px);
  margin: 64px 0 0 177px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--ink-58);
}
.za-body p + p { margin-top: 1em; }
.za-body h2 {
  margin: 72px 0 16px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.78px;
  color: #000;
}
.za-quote {
  margin: 48px 0 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -1.02px;
  color: #000;
  text-wrap: balance;
}
.za-link { color: #000; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.za-link:hover { color: var(--ink-58); }

.za-list { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }
.za-list li::marker { color: rgba(0, 0, 0, 0.3); }
.za-list + p { margin-top: 24px; }

.za-faq details { border-top: 1px solid #dfdfdf; }
.za-faq details:last-child { border-bottom: 1px solid #dfdfdf; }
.za-faq summary {
  position: relative;
  padding: 16px 0 16px 32px;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #000;
}
.za-faq summary::-webkit-details-marker { display: none; }
.za-faq summary::before, .za-faq summary::after {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 12px; height: 1.5px;
  background: #000;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.za-faq summary::after { transform: rotate(90deg); }
.za-faq details[open] summary::after { transform: rotate(0deg); }
.za-faq details p { padding: 0 0 18px 32px; }

/* --- CTA ------------------------------------------------------------------ */
.za-cta { margin-top: 120px; padding-inline: var(--zh-inset); }
.za-cta__k { font-size: 16px; font-weight: 500; letter-spacing: -0.16px; color: #000; margin-bottom: 12px; }
.za-cta__card {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 60px 64px;
  border-radius: 6px;
  background: #1e1e1e;
}
.za-cta__face { flex: 0 0 87px; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 10px; }
.za-cta__face img { width: 100%; height: 100%; object-fit: cover; }
.za-cta__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.za-cta__t { font-size: 33px; font-weight: 600; line-height: 1.22; letter-spacing: -1.14px; color: #fff; }
.za-cta__d { max-width: 420px; font-size: 16px; line-height: 1.3; letter-spacing: -0.36px; color: rgba(241, 239, 239, 0.7); }
.za-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 8px; }
.za-cta__mail {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  background: #5f5f5f;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.42px;
  line-height: 1.22;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.za-cta__mail:hover { transform: translateY(-1px); background: #6c6c6c; }
/* The same card closes the homepage and case study, across the full column. */
.za-cta--page { position: relative; z-index: 1; width: min(var(--zh-col), 100% - 2 * var(--gutter)); margin-inline: auto; }

.zh-frame:has(.za-cta) .zh-foot { margin-top: 64px; }
.za-hero__media--single { grid-template-columns: 1fr; }
.za-hero__media--single .za-hero__img img { object-position: 50% 0; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .za { grid-template-columns: minmax(0, 1fr); }
  .za-side { display: none; }
  .za-body { width: auto; max-width: 680px; margin-left: var(--zh-inset); margin-right: var(--zh-inset); }
  .za-hero__media { height: 460px; }
  .za-cta__card { padding: 40px; }
}

@media (max-width: 700px) {
  .za-hero__lead { margin-top: 32px; font-size: 28px; letter-spacing: -0.84px; }
  .za-hero__date { margin-top: 24px; }
  .za-hero__media { grid-template-columns: 1fr; height: auto; }
  .za-hero__img { aspect-ratio: 4 / 5; }
  .za-hero__media--single .za-hero__img { aspect-ratio: 3 / 2; }
  .za-body { margin-top: 40px; }
  .za-body h2 { margin-top: 56px; font-size: 24px; }
  .za-quote { font-size: 27px; letter-spacing: -0.8px; margin-top: 36px; }
  .za-cta { margin-top: 80px; }
  .za-cta__card { flex-direction: column; align-items: flex-start; padding: 24px; }
  .za-cta__face { flex: none; width: 72px; }
  .za-cta__t { font-size: 28px; letter-spacing: -0.84px; }
}

/* ==========================================================================
   SERVICES (services/*.html) — reuses the About .za-* layout
   ========================================================================== */
.zs-group {
  padding: 18px 10px 8px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.4);
}
.zs-group:first-child { padding-top: 0; }
.zs-svc { flex-direction: row; align-items: flex-start; gap: 10px; }
.zs-svc__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #181818;
}
.zs-svc__ic img { width: 17.5px; height: 17.5px; }
.zs-svc__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.zs-hero__t {
  max-width: 860px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -1.02px;
}
.zs-hero__lead {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--ink-58);
}
.zs-crumb { margin-top: 28px; font-weight: 300; }
.zs-crumb span[aria-hidden] { margin: 0 4px; }
.zs-hero__img {
  margin: 12px 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #191919;
}
.zs-hero__img img { width: 100%; height: 100%; object-fit: cover; }

.zs-steps { counter-reset: zs; display: grid; gap: 14px; }
.zs-steps li { counter-increment: zs; position: relative; padding-left: 36px; }
.zs-steps li::before {
  content: counter(zs, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
}
.zs-steps strong { font-weight: 600; color: #000; }
.zs-steps + p { margin-top: 24px; }

@media (max-width: 1100px) {
  /* keep the services switcher on smaller screens, as a scrolling row */
  .zs .zs-side {
    display: flex;
    gap: 6px;
    position: static;
    padding: 18px var(--zh-inset) 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .zs .zs-side::-webkit-scrollbar { display: none; }
  .zs-side .zs-group { display: none; }
  .zs-side .za-posts { flex: none; flex-direction: row; gap: 6px; }
  .zs .zs-side { scroll-padding-inline: var(--zh-inset); }
  .zs .zs-side::after { content: ""; flex: 0 0 calc(var(--zh-inset) - 6px); }
  .zs-side .za-posts li { flex: none; }
  .zs-side .za-post__d { display: none; }
  .zs-svc { align-items: center; padding: 6px 12px 6px 6px; border-color: #e6e6e6; }
  .zs-svc.is-current { border-color: #000; }
}
@media (max-width: 700px) {
  .zs-hero__t { font-size: 28px; letter-spacing: -0.84px; }
  .zs-hero__lead { font-size: 18px; }
  .zs-crumb { margin-top: 20px; }
}