/* /explore/ — style exploration (staging only). Loaded on top of styles.css.
   Direction: path C (tighten: one display face, one accent, fewer grey cards)
   with a path A touch (editorial display type). Accent: mint #B5F2CB.
   Page-colour transitions after dentsucreative.com/about: the whole page background
   fades to the tone of the section in the middle of the screen (explore.js). */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --mint: #B5F2CB;                /* accent; the name stays, the switcher swaps the value */
  --mint-deep: #0E5A3A;           /* mint's dark partner, for small accents on white */
  --bg: #fff; --fg: #111;
  /* Accent roles — light accents only need --mint; dark ones (bordeaux) set the rest */
  --accent-ink: #111;                     /* text on an accent fill */
  --accent-on-dark: var(--mint);          /* accent on black (links, nav button over the hero) */
  --accent-on-dark-ink: #111;
  --tone-fg: #111;                        /* text colour when the page fades to the accent tone */
  --cta-tone-bg: #111; --cta-tone-ink: var(--mint);
  --line: color-mix(in srgb, currentColor 20%, transparent);
  --soft: color-mix(in srgb, currentColor 64%, transparent);
  --tone-ease: cubic-bezier(.65, 0, .35, 1);

  /* Motion system: two easings, three durations — everything on the explore pages uses these */
  --m-ease: cubic-bezier(.16, 1, .3, 1);      /* entrances, hovers: quick start, soft landing */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);  /* transitions between states/pages */
  --m-fast: 150ms;                            /* hover, colour */
  --m-mid: 400ms;                             /* state changes, buttons, nav */
  --m-slow: 800ms;                            /* large entrances, images, page tone */

  /* Type scale — perfect fourth (1.333), base 16: 13 · 16 · 21 · 28 · 38 · 50 · 67 · 89 */
  --fs-display: clamp(72px, 12.5vw, 184px);   /* hero name */
  --fs-h1: clamp(50px, 6.2vw, 89px);          /* section titles, contact */
  --fs-h2: clamp(38px, 4.6vw, 67px);          /* About (narrow column) */
  --fs-h3: clamp(28px, 3.5vw, 50px);          /* intro statement, testimonials title */
  --fs-h4: 28px;                              /* skill titles */
  --fs-lead: 21px;                            /* subs, about text, FAQ questions, quotes, post titles */
  --fs-body: 16px;                            /* descriptions, answers, captions */
  --fs-label: 13px;                           /* mono labels: numbers, dates, counter */
}
/* Bordeaux: a dark accent. Full: the page fades to deep wine with cream text.
   Soft: the page fades to a rosé tint, bordeaux stays for small fills.
   On black, bordeaux itself is too dark, so it is lifted to blush there. */
:root[data-accent="bordeaux"] {
  --mint: #6A1029; --accent-ink: #FBEEE9;
  --accent-on-dark: #F2AEBB; --accent-on-dark-ink: #4A0A1C;
}
:root[data-accent="bordeaux"]      { --tone-fg: #FBEEE9; --cta-tone-bg: #F2AEBB; --cta-tone-ink: #4A0A1C; }
:root[data-tone="mint"] { --bg: var(--tone-bg, var(--mint)); --fg: var(--tone-fg); }
:root[data-tone="ink"]  { --bg: #0d0d0d; --fg: #fff; }

/* Display face */
:root[data-font="schibsted"] { --dfont: "Schibsted Grotesk", system-ui, sans-serif; --dweight: 600; --dtrack: -0.045em; --dlead: 1; }

/* One display face + one body face: Figtree and Instrument Sans go */
.explore { --intro: var(--dfont); --ui: var(--body); }

body.explore {
  background: var(--bg); color: var(--fg);
  transition: background-color var(--m-slow) var(--m-ease-io), color var(--m-slow) var(--m-ease-io);
}

/* ---------- Display type ---------- */
.explore .hero__title,
.explore .section-title,
.explore .testimonials__title,
.explore .contact__title,
.explore .skill__title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: var(--dtrack);
}
.explore .hero__title { font-size: var(--fs-display); line-height: var(--dlead); }

.explore .section-head { max-width: none; }
.explore .section-title { font-size: var(--fs-h1); line-height: var(--dlead); }
.explore .section-sub { margin-top: 20px; max-width: 420px; font-family: var(--body); font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--soft); }

/* ---------- Intro (mint) ---------- */
.explore .intro__text { max-width: 1040px; font-size: var(--fs-h3); line-height: 1.2; font-weight: var(--dweight); letter-spacing: var(--dtrack); }
.explore .word-reveal .w { color: color-mix(in srgb, currentColor 22%, transparent); }
.explore .word-reveal .w.is-lit { color: inherit; }
/* Sequence: the page fades to the accent first; words only light up once that tone is active */
:root:not([data-tone="mint"]) .explore .intro .word-reveal .w.is-lit { color: color-mix(in srgb, currentColor 22%, transparent); }
.explore .marquee__list img { opacity: .7; }

/* ---------- Projects ---------- */
.explore .projects { padding-top: 192px; padding-bottom: 192px; }
.explore .projects .section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.explore .projects .section-sub { margin: 0 0 12px; }
.explore .project__title::before { background: var(--accent); }

/* ---------- Work grid: one lead project full width, the rest two-up (after oma-nolan) ---------- */
.work-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 24px;
}
.work--lead { grid-column: 1 / -1; }
.work { display: block; text-decoration: none; color: inherit; }
.work__media {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--card);
}
.work--lead .work__media { aspect-ratio: var(--ratio, 1800 / 860); }
.work__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, 50% 50%);
  transition: transform var(--m-slow) var(--m-ease);
}
.work__cta {
  position: absolute; left: 24px; bottom: 24px; z-index: 1;
  display: inline-flex; gap: 8px; padding: 12px 18px; border-radius: 999px;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  background: var(--mint); color: var(--accent-ink);
  opacity: 0; transform: translateY(8px); transition: opacity var(--m-mid) var(--m-ease), transform var(--m-mid) var(--m-ease);
}
a.work:hover .work__media img, a.work:focus-visible .work__media img { transform: scale(1.03); }
.work__cta svg { width: 13px; height: 13px; margin-right: -2px; }
a.work:hover .work__cta, a.work:focus-visible .work__cta { opacity: 1; transform: none; }
/* Title is primary (directly under the image); meta is one quiet line beneath it */
.work__title {
  margin-top: 20px; max-width: 32ch; text-wrap: balance;
  font-family: var(--dfont); font-weight: var(--dweight); font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.02em;
}
.work--lead .work__title { font-size: var(--fs-h4); max-width: 36ch; }
.work__meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px;
  font-family: var(--mono); font-size: var(--fs-label); line-height: 1.4; letter-spacing: 0;
  color: var(--soft);
}
.work__client::after { content: "—"; margin-left: 12px; }

/* ---------- Case pages (/work/<slug>/), after folira-lite + bungee ---------- */
.explore.page-work .dark { background: #111; color: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: 160px; }
.explore.page-work .dark .contact__line { color: rgba(255,255,255,.7); }
.case { max-width: 1376px; margin: 0 auto; padding: 0 32px; box-sizing: content-box; }
.case__head { display: grid; justify-items: start; gap: 24px; max-width: 1000px; padding: 96px 0 72px; }
.case__back { font-family: var(--body); font-size: 15px; color: var(--soft); text-decoration: none; transition: color var(--m-fast); }
.case__back:hover { color: var(--fg); }
.case__client { margin-top: 24px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; color: var(--soft); }
.case__title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: var(--dtrack);
  font-size: var(--fs-h2); line-height: 1.04; text-wrap: balance;
}
.case__lead { max-width: 640px; font-size: var(--fs-lead); line-height: 1.45; color: var(--soft); }
.case__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 48px; border-top: 1px solid var(--line); }
.case__facts > div { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); }
.case__facts dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; color: var(--soft); }
.case__facts dd { margin: 8px 0 0; font-size: var(--fs-body); font-weight: 500; }
.case__hero { border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.case__hero img { width: 100%; aspect-ratio: 1800 / 1005; object-fit: cover; }

.case__body { display: grid; gap: 128px; margin-top: 144px; }
.case__section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.case__label {
  position: sticky; top: 120px; align-self: start;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; color: var(--soft);
}
.case__text { max-width: 720px; }
.case__text h2 {
  margin-bottom: 32px; text-wrap: balance;
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: -0.035em;
  font-size: var(--fs-h3); line-height: 1.1;
}
.case__text p { font-size: 18px; line-height: 1.65; color: color-mix(in srgb, currentColor 78%, transparent); }
.case__text p + p { margin-top: 1.1em; }
.case__pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; height: clamp(360px, 44vw, 640px); }
.case__pair img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius-lg); background: var(--card); }
.case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.case__stats li { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.case__stats strong {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: var(--dtrack);
  font-size: var(--fs-h3); line-height: 1; color: var(--mint);
}
.case__stats span { font-size: var(--fs-body); color: var(--soft); }

/* More work: the other cases as the same tiles as on the homepage */
.case__more { margin-top: 176px; }
.case__more-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.case__more-title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: -0.035em;
  font-size: var(--fs-h3); line-height: 1.1;
}
.case__more-all { font-size: 15px; color: var(--soft); text-decoration: none; transition: color var(--m-fast); }
.case__more-all:hover { color: var(--fg); }

/* ---------- About: original layout; skills as values-list rows instead of grey cards ---------- */
.explore .about .section-title { font-size: var(--fs-h2); white-space: nowrap; }
.explore .about__text { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.6; }
.explore .skills { gap: 0; margin-top: 140px; counter-reset: s; border-bottom: 1px solid var(--line); }
.explore .skill {
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: baseline;
  padding: 32px 0; background: none; border-radius: 0;
  border-top: 1px solid var(--line);
  transition: padding var(--m-mid) var(--m-ease);
}
.explore .skill__num { font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; line-height: 1; letter-spacing: .02em; color: var(--soft); }
.explore .skill__title { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.03em; }
.explore .skill__desc { font-family: var(--body); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; max-width: 440px; color: var(--soft); }
@media (hover: hover) {
  .explore .skill { position: relative; isolation: isolate; }
  .explore .skill::before {
    content: ""; position: absolute; inset: 0 -24px; z-index: -1; border-radius: 4px;
    background: var(--mint); transform: scaleY(0); transform-origin: bottom; transition: transform var(--m-mid) var(--m-ease);
  }
  .explore .skill:hover::before { transform: none; }
  .explore .skill:hover .skill__num, .explore .skill:hover .skill__desc { color: var(--accent-ink); }
  .explore .skill:hover { color: var(--accent-ink); }
}

/* ---------- Testimonials (mint): original stacked cards, white on mint ---------- */
.explore .testimonials { padding-top: 192px; padding-bottom: 160px; }
.explore .testimonials__aside { position: sticky; top: 120px; display: grid; gap: 48px; }
.explore .testimonials__title { position: static; top: auto; font-size: var(--fs-h3); line-height: 1.15; }
.explore .quote { background: #fff; color: #111; }
.explore .quote blockquote p { font-size: var(--fs-lead); line-height: 1.55; }

/* Counter: 01 —— 04, the current number rolls as the cards stack (explore.js) */
.t-count { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: var(--fs-label); line-height: 1; letter-spacing: .02em; }
.t-count__now { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.t-count__reel { display: grid; transition: transform var(--m-mid) var(--m-ease); transform: translateY(calc(var(--t-i, 0) * -1em)); }
.t-count__reel span { height: 1em; }
.t-count__track { position: relative; width: 96px; height: 1px; background: var(--line); overflow: hidden; }
.t-count__track::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  transform-origin: left; transform: scaleX(calc((var(--t-i, 0) + 1) / var(--t-n, 4)));
  transition: transform var(--m-mid) var(--m-ease);
}
.t-count__total { color: var(--soft); }

/* ---------- FAQ: hairline rows ---------- */
.explore .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.explore .faq__list { gap: 0; border-bottom: 1px solid var(--line); }
.explore .faq__item { background: none; border-radius: 0; border-top: 1px solid var(--line); }
.explore .faq__item summary { padding: 26px 0; font-family: var(--body); font-size: var(--fs-lead); line-height: 1.4; color: inherit; }
.explore .faq__item summary::after, .explore .faq__item[open] summary::after {
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12h16M12 4v16'/%3E%3C/svg%3E");
          mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12h16M12 4v16'/%3E%3C/svg%3E");
}
.explore .faq__item[open] summary::after { transform: rotate(45deg); }
.explore .faq__item p { padding: 0 0 28px; max-width: 640px; font-family: var(--body); color: var(--soft); }

/* ---------- Blog + contact (ink) ---------- */
.explore .dark { background: none; color: inherit; border-radius: 0; }
.explore .blog__all, .explore .post time, .explore .contact__line { color: var(--soft); }
.explore .blog__all:hover { color: var(--accent-on-dark); }
.explore .post img { filter: grayscale(1) contrast(1.05); transition: transform var(--m-mid) var(--m-ease), filter var(--m-mid) var(--m-ease); }
.explore .post a:hover img { filter: none; }
.explore .post h3 { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.4; margin-top: 10px; }
.explore .post time { font-family: var(--mono); font-size: var(--fs-label); }
.explore .contact { padding-top: 160px; padding-bottom: 120px; }
.explore .contact__title { max-width: 1000px; font-size: clamp(32px, 3.75vw, 54px); line-height: 1.08; }
.explore .contact__title em { color: var(--accent-on-dark); }
.explore .contact__line { font-size: var(--fs-body); }
.explore .contact__line a { color: var(--accent-on-dark); }

/* ---------- Nav: the accent lives in the CTA ---------- */
.explore .glass-nav { --cta-bg: var(--mint); --cta-ink: var(--accent-ink); font-family: var(--body); }
.explore .glass-nav--dark { --cta-bg: var(--accent-on-dark); --cta-ink: var(--accent-on-dark-ink); }
:root[data-tone="mint"] .explore .glass-nav:not(.glass-nav--dark) { --cta-bg: var(--cta-tone-bg); --cta-ink: var(--cta-tone-ink); }
/* ---------- "Currently working on": live status line above the first project ---------- */
.now { margin-bottom: 56px; }
.now-wrap { box-sizing: border-box; max-width: calc(1376px + 64px); margin: 0 auto; padding: 56px 32px 0; }
.now-wrap .now { margin-bottom: 0; }
/* Variant 1: live status line between two rules */
.now-line {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line);
}
.now-line__label, .now-line__status {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; color: var(--soft);
}
.now-line__label { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); }
.now-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.now-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--mint); opacity: 0; animation: announce-ping 2.4s var(--m-ease) infinite; }
.now-line__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.now-line__title { font-family: var(--dfont); font-weight: var(--dweight); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.035em; line-height: 1.1; }
.now-line__client { font-size: 16px; color: var(--soft); }
.now-line__status { display: inline-flex; align-items: center; gap: 10px; }
.now-line__status::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--mint) 40%, var(--line) 40%); background-size: 200% 100%; animation: now-progress 2.8s var(--m-ease-io) infinite; }
@keyframes now-progress { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 767px) {
  .now { margin-bottom: 40px; }
  .now-wrap { padding: 32px 16px 0; }
  .now-line { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .now-line__title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .now-dot::after, .now-line__status::before { animation: none; } }

/* ---------- Work overview (/work/): editorial index + tile grid, switchable ---------- */
.projects__all { display: inline-block; margin-top: 56px; font-size: 16px; font-weight: 500; color: var(--soft); text-decoration: none; transition: color var(--m-fast); }
.projects__all:hover { color: var(--fg); }
.wlist { box-sizing: border-box; max-width: calc(1376px + 64px); margin: 0 auto; padding: 56px 32px 160px; }
.wlist:not(.has-controls) .wlist__bar { display: none; }   /* switch + filters: staging only (explore.js) */
.wlist__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--fg); }
.wview { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); }
.wview__btn, .wchip {
  height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14px/1 var(--body); color: var(--soft); background: transparent;
  transition: background var(--m-fast), color var(--m-fast);
}
.wview__btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.wview__btn:focus-visible, .wchip:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { border: 1px solid var(--line); }
.wchip:hover { color: var(--fg); border-color: var(--fg); }
.wchip[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: var(--accent-ink); }
.wlist[data-view="list"] .wchips { display: none; }
.wlist[data-view="list"] .work-grid, .wlist[data-view="grid"] .windex-list { display: none; }
.wlist[data-view="grid"] .work-grid { padding-top: 48px; }
.wlist.is-filtered .work-grid .work--lead { grid-column: auto; }
.wlist.is-filtered .work-grid .work--lead .work__media { aspect-ratio: 1800 / 1005; }
.work.is-hidden { display: none; }
.wlist__empty { padding: 64px 0; color: var(--soft); }

/* Index rows */
.windex-list { list-style: none; margin: 0; padding: 0; }
.windex {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 220px 64px; align-items: center; gap: 24px;
  padding: 32px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.windex::before {   /* bordeaux wash that slides in from the left on hover */
  content: ""; position: absolute; inset: 0 -32px; z-index: -1; background: var(--mint);
  transform: scaleX(0); transform-origin: left; transition: transform var(--m-mid) var(--m-ease);
}
.windex__num { font-family: var(--mono); font-size: var(--fs-label); color: var(--soft); }
.windex__media { display: none; }
.windex__main { display: grid; gap: 10px; }
.windex__title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: -0.035em; line-height: 1.08;
  font-size: clamp(22px, 2vw, 30px); text-wrap: balance; max-width: 40ch;
  transition: transform var(--m-mid) var(--m-ease);
}
.windex__scope, .windex__client { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; color: var(--soft); }
.windex__go { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-size: 22px; transition: transform var(--m-mid) var(--m-ease); }
.windex:not(.is-locked) .windex__lock { display: none; }
.windex__lock svg { width: 13px; height: 13px; display: block; color: var(--soft); }
@media (hover: hover) {
  .windex:hover { color: var(--accent-ink); }
  .windex:hover::before { transform: scaleX(1); }
  .windex:hover .windex__num, .windex:hover .windex__scope, .windex:hover .windex__client, .windex:hover .windex__lock svg { color: inherit; opacity: .8; }
  .windex:hover .windex__title { transform: translateX(12px); }
  .windex:hover .windex__go { transform: translateX(-12px); }
}
.windex:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
/* Floating preview that follows the cursor over the list (desktop) */
.windex-preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: 340px; aspect-ratio: 4 / 3; pointer-events: none;
  border-radius: var(--radius-lg); overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.85);
  transition: opacity var(--m-fast), transform var(--m-mid) var(--m-ease);
  box-shadow: 0 30px 60px -20px rgba(40,6,16,.45);
}
.windex-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.windex-preview img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }

@media (max-width: 1023px) { .windex { grid-template-columns: 48px minmax(0, 1fr) 40px; } .windex__client { display: none; } }
@media (max-width: 767px) {
  .wlist { padding: 40px 16px 96px; }
  .windex { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 20px 0; align-items: start; }
  .windex__num, .windex__go { display: none; }
  .windex__media { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--card); }
  .windex__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
  .windex__title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.15; }
  .windex__scope { font-size: 11px; }
  .windex-preview { display: none; }
}
@media (prefers-reduced-motion: reduce) { .windex::before, .windex__title, .windex__go, .windex-preview { transition: none; } }

/* ---------- Speaking & writing: talks above the blog posts ---------- */
.talks { margin: 40px 0 72px; border-top: 1px solid var(--line); }
.talk, .talk > a {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.4fr) 24px; align-items: baseline; gap: 24px;
}
.talk { padding: 22px 0; border-bottom: 1px solid var(--line); }
.talk > a { grid-column: 1 / -1; color: inherit; text-decoration: none; }
.talk__tag { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; color: var(--soft); }
.talk__event { font-family: var(--dfont); font-weight: var(--dweight); font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; line-height: 1.15; }
.talk__topic { font-size: 16px; line-height: 1.45; color: var(--soft); }
.talk__arrow { width: 20px; height: 20px; align-self: center; transition: transform var(--m-fast) var(--m-ease); }
.talk__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.talk--next .talk__tag { color: var(--accent-on-dark); }
.talk--next a:hover .talk__event { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.talk--next a:hover .talk__arrow { transform: translate(3px, -3px); }
.talk--next a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 4px; }
@media (max-width: 767px) {
  .talk, .talk > a { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 16px; }
  .talk__tag, .talk__event, .talk__topic { grid-column: 1; }
  .talk__arrow { grid-column: 2; grid-row: 1 / span 3; }
  .talks { margin: 28px 0 48px; }
  .explore #speaking .blog__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Announcement bar ----------
   A thin bordeaux line above everything. It scrolls away with the page; the fixed menu bar
   sits right below it and moves up as it disappears (explore.js sets --announce-off). */
.announce {
  --announce-h: 40px;
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--announce-h); padding: 0 16px;
  background: #6A1029; color: #FBEEE9; text-decoration: none;
  font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0;
  white-space: nowrap;
}
.announce__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #FBEEE9; flex: none; }
.announce__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #FBEEE9;
  opacity: 0; animation: announce-ping 2.4s var(--m-ease) infinite;
}
@keyframes announce-ping { 0% { transform: scale(.4); opacity: .8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.announce__text { overflow: hidden; text-overflow: ellipsis; }
.announce__short { display: none; }
.announce__cta {
  display: inline-flex; align-items: center; gap: 4px; padding-left: 12px; margin-left: 2px;
  border-left: 1px solid rgba(251,238,233,.3);
  text-decoration: underline; text-decoration-color: rgba(251,238,233,.4); text-underline-offset: 4px;
  transition: text-decoration-color var(--m-fast);
}
.announce__cta svg { width: 14px; height: 14px; transition: transform var(--m-fast) var(--m-ease); }
.announce:hover .announce__cta { text-decoration-color: currentColor; }
.announce:hover .announce__cta svg { transform: translate(2px, -2px); }
.announce:focus-visible { outline: 2px solid #FBEEE9; outline-offset: -4px; }
.announce__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.explore:has(.announce) .glass-nav { top: var(--announce-off, 40px); }
@media (max-width: 767px) {
  .announce { font-size: 11px; gap: 10px; }
  .announce__long { display: none; }
  .announce__short { display: inline; }
  .announce__cta { padding-left: 10px; text-decoration: none; }
  .announce__cta-text { display: none; }
  .announce__cta svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .announce__dot::after { animation: none; } }

/* ---------- Flat bar (replaces the glass pill on explore pages) ----------
   Logo left, links + CTA right, no glass. Transparent at the top of the page; once you
   scroll it hides on the way down and returns, with a solid page-coloured background,
   on the way up (explore.js sets .is-solid / .is-hidden). */
.explore .glass-nav {
  --bar-pad: 32px;
  --bar-h: calc(var(--nav-inset) * 2 + var(--nav-h));
  --bar-bg: var(--bg);
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--bar-h); padding: 0 var(--bar-pad);
  border-bottom: 1px solid transparent;
  transition: transform var(--m-mid) var(--m-ease), height var(--m-mid) var(--m-ease), background-color var(--m-mid), border-color var(--m-mid);
}
.explore:has(.hero) .glass-nav { --bar-pad: calc(var(--gutter) * 2); }  /* homepage: logo inside the hero card */
.explore .glass-nav--dark { --bar-bg: #111; }
.explore .glass-nav:not(.glass-nav--dark) { --glass-ink: var(--fg); }   /* follow the page tone (also the black ending) */
:root[data-tone="ink"] .explore .glass-nav { --cta-bg: var(--accent-on-dark); --cta-ink: var(--accent-on-dark-ink); }
.explore .glass-nav.is-solid { --bar-h: 72px; }   /* no bar behind logo + menu: they float over the page */
.explore .glass-nav.is-hidden { transform: translateY(-100%); }
.glass-nav__mark { display: block; height: 26px; width: auto; transition: height var(--m-mid) var(--m-ease); }
.explore .glass-nav.is-solid .glass-nav__mark { height: 22px; }
@media (max-width: 767px) { .glass-nav__mark, .explore .glass-nav.is-solid .glass-nav__mark { height: 22px; } }
.glass-nav__logo { display: inline-flex; align-items: center;
  font-family: var(--body); font-size: 13px; font-weight: 500; line-height: 26px; letter-spacing: -0.015em;
  color: var(--glass-ink); text-decoration: none; transition: color var(--m-mid);
}
.explore .glass-nav__menu, .explore .glass-nav__toggle {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.explore .glass-nav__menu { padding: 0; gap: 28px; border-radius: 0; }
.explore .glass-nav__cta { box-shadow: none; }
.explore .page-bar__logo, .explore .hero__logo { visibility: hidden; }  /* the bar carries the logo */
@media (max-width: 767px) {
  .explore .glass-nav { --bar-pad: 16px; --bar-h: calc(var(--nav-inset) + var(--nav-h)); }
  .explore:has(.hero) .glass-nav { --bar-pad: 32px; }
  .explore:has(.hero) .glass-nav:not(.is-solid) { --bar-h: 96px; }  /* logo + menu sit inside the hero card, not on its edge */
  .explore .glass-nav.is-solid { --bar-h: 60px; }
  .explore .glass-nav__toggle { margin-right: -13px; }  /* icon (not the 46px hit area) on the 16px edge */
  .explore .glass-nav__menu {
    top: calc(100% + 4px); right: var(--bar-pad);
    background: #fff; color: #111; border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14); padding: 20px 16px;
  }
  .explore .glass-nav__menu .glass-nav__link span::before, .explore .glass-nav__menu .glass-nav__link span::after { color: #111; }
}

/* ---------- Hero tagline: a running sentence in the display face, in proportion to the name ---------- */
.explore .hero__role {
  max-width: 21em; margin: 28px auto 0; text-wrap: balance;
  font-family: var(--dfont); font-weight: 500; font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.18; letter-spacing: -0.025em; text-align: center;
  color: rgba(251,238,233,.72); text-shadow: 0 1px 18px rgba(0,0,0,.5);
}
.explore .hero__role strong { font-weight: 600; color: #fff; }
@media (max-width: 767px) {
  .explore .hero__role { max-width: 15em; margin: 14px 0 0; font-size: 20px; text-align: left; }
}

/* ---------- Menu button + full-screen menu overlay ---------- */
.explore .glass-nav__menu, .explore .glass-nav__toggle { display: none; }   /* old link row / dropdown */
.menu-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -7px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--glass-ink); transition: color var(--m-mid);
}
/* three rounded bars, staggered like the reference: short right / full / short left */
.menu-btn__icon { position: relative; width: 30px; height: 20px; }
.menu-btn__icon i {
  position: absolute; height: 4px; border-radius: 4px; background: currentColor;
  transition: transform var(--m-mid) var(--m-ease), width var(--m-mid) var(--m-ease), left var(--m-mid) var(--m-ease), top var(--m-mid) var(--m-ease), opacity var(--m-fast);
}
.menu-btn__icon i:nth-child(1) { top: 0; left: 12px; width: 18px; }
.menu-btn__icon i:nth-child(2) { top: 8px; left: 0; width: 30px; }
.menu-btn__icon i:nth-child(3) { top: 16px; left: 0; width: 18px; }
html:not(.menu-open) .menu-btn:hover .menu-btn__icon i:nth-child(1),
html:not(.menu-open) .menu-btn:hover .menu-btn__icon i:nth-child(3) { left: 0; width: 30px; }
.menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 10px; }
html.menu-open { overflow: hidden; }
html.menu-open .explore .glass-nav[class] { --glass-ink: #FBEEE9 !important; z-index: 70; background: transparent; border-bottom-color: transparent; transform: none; }
html.menu-open .menu-btn__icon i:nth-child(1) { top: 8px; left: 1px; width: 28px; transform: rotate(45deg); }
html.menu-open .menu-btn__icon i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
html.menu-open .menu-btn__icon i:nth-child(3) { top: 8px; left: 1px; width: 28px; transform: rotate(-45deg); }

.site-menu {
  position: fixed; inset: 0; z-index: 65; overflow-y: auto;
  background: #6A1029; color: #FBEEE9;
  clip-path: inset(0 0 100% 0); transition: clip-path 560ms var(--m-ease);
}
.site-menu.is-open { clip-path: inset(0 0 0 0); }
.site-menu__inner {
  box-sizing: border-box; min-height: 100%; max-width: calc(1376px + 64px); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: 48px;
  padding: 140px 32px 48px;
}
.site-menu__links { list-style: none; margin: 0; padding: 0; }
.site-menu__link { display: flex; align-items: baseline; gap: 20px; color: inherit; text-decoration: none; transition: opacity var(--m-mid) var(--m-ease); }
.site-menu__num { width: 32px; flex: none; font-family: var(--mono); font-size: var(--fs-label); opacity: .6; }
.site-menu__line { display: block; overflow: hidden; padding-bottom: .06em; }
.site-menu__txt {
  display: block; font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: -0.05em;
  font-size: clamp(56px, 8.5vw, 128px); line-height: .98;
  transform: translateY(105%); transition: transform 720ms var(--m-ease) calc(140ms + var(--i, 0) * 70ms);
}
.site-menu.is-open .site-menu__txt { transform: none; }
.site-menu__links:hover .site-menu__link { opacity: .4; }
.site-menu__links .site-menu__link:hover, .site-menu__links .site-menu__link:focus-visible { opacity: 1; }
.site-menu__link[aria-current="page"] .site-menu__txt { color: #F2AEBB; }
.site-menu__link:focus-visible { outline: none; }
.site-menu__link:focus-visible .site-menu__txt { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }
.site-menu__aside { display: grid; gap: 36px; padding-bottom: 14px; opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--m-ease) 380ms, transform 500ms var(--m-ease) 380ms; }
.site-menu.is-open .site-menu__aside { opacity: 1; transform: none; }
.site-menu__group { display: grid; gap: 8px; justify-items: start; }
.site-menu__label { font-family: var(--mono); font-size: var(--fs-label); opacity: .65; }
.site-menu__group a { color: inherit; font-size: 18px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--m-mid) var(--m-ease); }
.site-menu__group a:hover, .site-menu__group a:focus-visible { background-size: 100% 1px; outline: none; }
.site-menu__now { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; }
.site-menu .now-dot { background: #F2AEBB; }
.site-menu .now-dot::after { border-color: #F2AEBB; }
@media (max-width: 767px) {
  .site-menu__inner { grid-template-columns: 1fr; align-content: space-between; gap: 40px; padding: 112px 20px 32px; }
  .site-menu__num { width: 24px; }
  .site-menu__link { gap: 12px; }
  .site-menu__txt { font-size: clamp(48px, 15vw, 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu__txt, .site-menu__aside { transition: none; }
  .site-menu__txt, .site-menu__aside { transform: none; }
}

/* Over a full bordeaux section the nav switches to dark glass, like over the hero */
:root[data-accent="bordeaux"][data-tone="mint"] .explore .glass-nav {
  --glass-bg: rgba(28,28,30,.42); --glass-edge: rgba(255,255,255,.16); --glass-hi: rgba(255,255,255,.22);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.35); --glass-ink: #fff;
}
/* Client logos are dark grey; on full bordeaux they turn light */
:root[data-accent="bordeaux"][data-tone="mint"] .explore .marquee__list img { filter: grayscale(1) invert(1); }
.explore .hero__logo { font-family: var(--body); }

/* ---------- Blog pages: new type and accent, white throughout (no background fade) ---------- */
.explore.page-blog .dark { background: #111; color: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.explore.page-blog .dark .contact__line { color: rgba(255,255,255,.7); }
.explore .page-bar { font-family: var(--body); }

.explore .blog-hero {
  box-sizing: border-box;
  max-width: calc(1376px + 64px); margin: 0 auto; padding: 96px 32px 0;
  display: grid; justify-items: start; gap: 24px; text-align: left;
}
.explore .blog-hero__title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: var(--dtrack);
  font-size: var(--fs-display); line-height: .95;
}
.explore .blog-hero__sub { max-width: 420px; font-family: var(--body); font-size: var(--fs-lead); line-height: 1.4; color: var(--soft); }
.explore .post-grid--featured { padding-top: 96px; }
.explore .post-card__media img { filter: grayscale(1) contrast(1.05); transition: transform var(--m-slow) var(--m-ease), filter var(--m-mid) var(--m-ease); }
.explore .post-card a:hover .post-card__media img { filter: none; }
.explore .post-card time { font-size: var(--fs-label); }
.explore .post-card h2 { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.35; }

.explore .article__head { padding-top: 120px; padding-bottom: 64px; gap: 24px; }
.explore .article__head time { font-size: var(--fs-label); color: var(--soft); }
.explore .article__title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: var(--dtrack);
  font-size: var(--fs-h1); line-height: 1.02; color: inherit;
}
.explore .article__intro {
  max-width: 760px; margin-top: 8px; font-family: var(--body); color: inherit;
  font-size: clamp(20px, 1.75vw, 25px); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty;
}
.explore .article__hero { background: transparent; }
/* Body text in the page's ink tones */
.explore .article__body { font-family: var(--body); color: var(--soft); }
.explore .article__body h2, .explore .article__body h3, .explore .article__body strong,
.explore .article__body a, .explore .article__body blockquote { color: var(--fg); transition: color var(--m-slow) var(--m-ease-io); }
.explore .article__body blockquote { border-left-color: currentColor; }
.explore .article__figure { margin: 40px 0; }
.explore .article__figure a { display: block; border-radius: var(--radius-lg); background: var(--card); padding: 20px; transition: background var(--m-fast); }
.explore .article__figure a:hover { background: color-mix(in srgb, var(--card) 85%, var(--fg)); }
.explore .article__figure img { display: block; width: 100%; height: auto; }
.explore .article__figure--narrow img { max-width: 520px; margin: 0 auto; }
.explore .article__figure figcaption { margin-top: 12px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--soft); }
@media (max-width: 767px) { .explore .article__figure a { padding: 10px; border-radius: 14px; } }
.explore .article__source { font-size: var(--fs-label); color: var(--soft); }

/* Reading progress: a thin accent line along the top edge of the screen */
.read-progress {
  position: fixed; inset: 0 0 auto; z-index: 60; height: 3px;
  background: var(--mint); transform-origin: left; transform: scaleX(var(--read, 0));
}
:root[data-tone="mint"] .read-progress { background: var(--accent-on-dark); }

@media (max-width: 767px) {
  .explore .blog-hero { padding: 64px 16px 0; }
  .explore .post-grid--featured { padding-top: 48px; }
  .explore .article__head { padding-top: 88px; padding-bottom: 40px; }
}

/* ---------- Case lock popup ----------
   An 8px-inset rounded project image, the title below it, then the form.
   The image is the shared element of the view transitions (tile -> poster -> case hero). */
.lock {
  --lock-pad: 24px;
  width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px);
  margin: auto; padding: 8px; border: 0; border-radius: var(--radius-lg); overflow: hidden auto;
  background: #fff; color: #111;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  box-shadow: 0 40px 100px -20px rgba(40,6,16,.55), 0 0 0 1px rgba(255,255,255,.06);
  view-transition-name: lock-card;
  animation: lock-in var(--m-mid) var(--m-ease) both;
}
.lock:not([open]) { display: none; }
.lock.is-morph { animation: none; }
.lock::backdrop { background: rgba(20,4,9,.72); animation: lock-fade var(--m-mid) var(--m-ease) both; }
.lock.is-closing { animation: lock-out 250ms var(--m-ease-io) forwards; }
.lock.is-closing::backdrop { animation: lock-fade 250ms var(--m-ease-io) reverse both; }
@keyframes lock-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes lock-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes lock-fade { from { opacity: 0; } }
html.lock-open { overflow: hidden; }

.lock__media { position: relative; aspect-ratio: 16 / 10; background: var(--card); border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; }
.lock__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.lock__poster { display: grid; gap: 12px; padding: 24px calc(var(--lock-pad) - 8px) 0; }
.lock__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0;
  color: var(--mint);
}
.lock__eyebrow svg { width: 12px; height: 12px; flex: none; }
.lock__title {
  font-family: var(--dfont); font-weight: var(--dweight); letter-spacing: -0.04em;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.08; text-wrap: balance; max-width: 20ch; color: #111;
}
.lock__close {
  position: absolute; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(20,4,9,.42); color: #fff; transition: background var(--m-fast), transform var(--m-fast) var(--m-ease);
}
.lock__close:hover { background: rgba(20,4,9,.7); transform: rotate(90deg); }
.lock__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lock__close svg { width: 22px; height: 22px; }

/* Form strip */
.lock__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px calc(var(--lock-pad) - 8px) 8px; }
.lock__text { font-size: 15px; line-height: 1.5; color: #5a5a5a; }
.lock__text a { color: var(--mint); font-weight: 500; text-underline-offset: 3px; }
.lock__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lock__field {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 16px;
  background: #f3f1ef; border: 1px solid transparent;
  transition: border-color var(--m-fast), background var(--m-fast), box-shadow var(--m-fast);
}
.lock__field:focus-within { background: #fff; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(106,16,41,.12); }
.lock__field input {
  flex: 1; min-width: 0; width: 100%; height: 44px; border: 0; outline: 0; background: none;
  font: 500 17px/1 var(--body); color: #111; letter-spacing: .06em;
}
.lock__field input::placeholder { color: #8a8580; letter-spacing: 0; font-weight: 400; }
.lock__go {
  position: relative; flex: none; width: 52px; height: 52px; border: 0; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--mint); color: var(--accent-ink);
  transition: background var(--m-fast), transform 100ms var(--m-ease);
}
.lock__go:hover { background: #540c20; }
.lock__go:active { transform: scale(.96); }
.lock__go:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.lock__go svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform var(--m-mid) var(--m-ease), opacity var(--m-fast); }
.lock__go:hover .lock__go-arrow { transform: translateX(3px); }
.lock__go-check { opacity: 0; transform: scale(.5); }
.lock.is-busy .lock__go { cursor: progress; }
.lock.is-busy .lock__go-arrow { animation: lock-nudge 700ms var(--m-ease-io) infinite; }
@keyframes lock-nudge { 50% { transform: translateX(5px); opacity: .45; } }
.lock.is-ok .lock__go { background: #1f6b46; }
.lock.is-ok .lock__go-arrow { opacity: 0; transform: translateX(8px); }
.lock.is-ok .lock__go-check { opacity: 1; transform: none; }
.lock__error { min-height: 1.3em; margin-top: -6px; font-size: 14px; color: #b3261e; }
.lock.is-error .lock__field { border-color: #b3261e; background: #fff; animation: lock-shake 300ms var(--m-ease-io); }
@keyframes lock-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* Same-document morph (tile <-> poster): the page fades under the backdrop, the card chrome
   rises in around the image, and the image itself travels (the shared 'case-hero' group). */
html.vt-lock::view-transition-old(root) { animation: lock-fade var(--m-mid) var(--m-ease) reverse both; }
html.vt-lock::view-transition-new(root) { animation: lock-fade var(--m-mid) var(--m-ease) both; }   /* page stays put: only the backdrop fades */
html.vt-lock-open::view-transition-new(lock-card) { animation: lock-in var(--m-slow) var(--m-ease) both; }
html.vt-lock-close::view-transition-old(lock-card) { animation: lock-out 300ms var(--m-ease-io) both; }
html.vt-lock::view-transition-group(case-hero) { animation-duration: 600ms; animation-timing-function: var(--m-ease); }
/* Layering: card chrome at the bottom, the travelling image above it, title + close on top */
html.vt-lock .lock__poster { view-transition-name: lock-poster; }
html.vt-lock .lock__close { view-transition-name: lock-close; }
html.vt-lock::view-transition-group(case-hero) { z-index: 2; }
html.vt-lock::view-transition-image-pair(case-hero) { border-radius: calc(var(--radius-lg) - 8px); }
html.vt-lock::view-transition-group(lock-poster), html.vt-lock::view-transition-group(lock-close) { z-index: 3; }
html.vt-lock-open::view-transition-new(lock-poster) { animation: lock-rise 500ms var(--m-ease) 320ms both; }
html.vt-lock-open::view-transition-new(lock-close) { animation: lock-fade 300ms var(--m-ease) 450ms both; }
html.vt-lock-close::view-transition-old(lock-poster), html.vt-lock-close::view-transition-old(lock-close) { animation: lock-fade 150ms var(--m-ease-io) reverse both; }
@keyframes lock-rise { from { opacity: 0; transform: translateY(14px); } }
html.vt-lock-close::view-transition-group(case-hero) { animation-duration: 450ms; animation-timing-function: var(--m-ease-io); }

@media (max-width: 767px) {
  .lock { --lock-pad: 20px; width: calc(100vw - 24px); max-height: calc(100svh - 24px); margin: auto auto 12px; }
  .lock__media { aspect-ratio: 4 / 3; }
  .lock__poster { padding-top: 20px; gap: 10px; }
  .lock__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .lock, .lock::backdrop, .lock.is-closing { animation: none; }
  .lock.is-error .lock__field, .lock.is-busy .lock__go-arrow { animation: none; }
}

/* ---------- Motion ---------- */
.explore .reveal { transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); }

/* Headings rise into view line by line (explore.js wraps each rendered line).
   The small bottom padding keeps descenders (g, j, y) from being clipped by the mask. */
.lines .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lines .ln__in {
  display: block; transform: translateY(110%);
  transition: transform var(--m-slow) var(--m-ease); transition-delay: calc(var(--i, 0) * 90ms);
}
.lines.is-in .ln__in { transform: none; }

/* Page transitions: the clicked project image grows into the case hero (and back).
   Browsers without cross-document view transitions simply navigate. */
@view-transition { navigation: auto; }
.explore .glass-nav { view-transition-name: site-bar; }
.case__hero { view-transition-name: case-hero; }
::view-transition-group(case-hero) { animation-duration: var(--m-slow); animation-timing-function: var(--m-ease-io); }
::view-transition-image-pair(case-hero) { overflow: hidden; border-radius: var(--radius-lg); }
::view-transition-old(case-hero), ::view-transition-new(case-hero) { height: 100%; object-fit: cover; }
::view-transition-old(root) { animation: vt-out 300ms var(--m-ease-io) both; }
::view-transition-new(root) { animation: vt-in var(--m-mid) var(--m-ease) 100ms both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .lines .ln__in { transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .case__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__section { grid-template-columns: 1fr; gap: 20px; }
  .case__label { position: static; }
  .explore .faq { grid-template-columns: 1fr; gap: 40px; }
  .explore .testimonials__aside { position: static; }
}
@media (max-width: 767px) {
  .work-grid { grid-template-columns: 1fr; gap: 56px; }
  .work--lead .work__media, .work__media { aspect-ratio: 4 / 3; }
  .work--lead .work__title { font-size: var(--fs-lead); }
  .work__cta { opacity: 1; transform: none; left: 16px; bottom: 16px; padding: 10px 14px; font-size: 14px; }
  .case { padding: 0 16px; }
  .case__head { padding: 64px 0 48px; gap: 16px; }
  .case__body { gap: 88px; margin-top: 88px; }
  .case__text h2 { margin-bottom: 20px; }
  .case__text p { font-size: 16px; }
  .case__pair { grid-template-columns: 1fr; height: auto; }
  .case__pair img { height: auto; aspect-ratio: 4 / 3; }
  .case__pair img + img { aspect-ratio: 3 / 4; }
  .case__stats { grid-template-columns: 1fr; gap: 0; }
  .case__stats li { grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; padding: 16px 0; }
  .case__more { margin-top: 112px; }
  .explore.page-work .dark { margin-top: 112px; }
  .explore .projects, .explore .testimonials { padding-top: 128px; }
  .explore .projects { padding-bottom: 128px; }
  .explore .testimonials { padding-bottom: 96px; }
  .explore .testimonials__aside { position: static; gap: 24px; }
  .explore .skill { grid-template-columns: 40px 1fr; gap: 8px 16px; padding: 28px 0; }
  .explore .skill__num { display: block; padding-top: .6em; }
  .explore .skill__title { font-size: 21px; }
  .explore .skill__desc { grid-column: 2; }
  .explore .contact { padding-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  body.explore { transition: none; }
}