/* Isa on a Trip - public site */
@font-face { font-family: "Nohemi"; src: url("/assets/fonts/Nohemi-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("/assets/fonts/Nohemi-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("/assets/fonts/Nohemi-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("/assets/fonts/Nohemi-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
:root {
  --bg: #000;                     /* dark mode: black page */
  --fg: #F0F2D7;                  /* Isa cream: all text */
  --muted: rgba(240,242,215,.6);  /* cream, softened */
  --line: rgba(240,242,215,.25);  /* cream hairline */
  --rule: 2px solid var(--fg);   /* bold section dividers */
  --r: 6px;                       /* subtle corner radius */
  --hover: rgba(240,242,215,.08);
  --shade: #111;                  /* empty image background */
  --pink: #F0F2D7;                /* accent = cream (name kept so the layout is unchanged) */
  --green: #F0F2D7;               /* available dot = cream */
  --g: 15px;               /* page gutter */
  --header: 56px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --sans: "Nohemi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Nohemi", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--pink); color: var(--bg); }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--g);
  background: var(--bg);
  border-bottom: var(--rule);
}
.logo { font: 700 19px/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.logo sup { font-size: .5em; vertical-align: super; margin-left: 1px; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 13px; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* ---------- shared ---------- */
main { position: relative; z-index: 2; background: var(--bg); }
.section { padding: 0 var(--g); }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  /* the rule runs the full screen width; the content keeps the page gutter */
  margin: 120px calc(var(--g) * -1) 0; padding: 18px var(--g) 28px; border-top: var(--rule);
}
.h2 { font: 400 clamp(40px, 5vw, 72px)/1 var(--display); letter-spacing: -0.035em; }
.count { color: var(--muted); font-size: 13px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
a.pill:hover, button.pill:hover, .pill.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pill.sm { height: 24px; padding: 0 10px; font-size: 11px; }
/* square buttons: the geometric counterpart of tag pills */
.sq {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border: 1px solid var(--fg); border-radius: var(--r);
  font-size: 13px; white-space: nowrap; transition: background .2s, color .2s;
}
.sq:hover, .sq.is-on { background: var(--fg); color: var(--bg); }
/* main call to action: bigger, pink */
.sq.sq-cta { height: 56px; padding: 0 28px; font-size: 18px; background: var(--pink); border-color: var(--pink); color: var(--bg); }
.sq.sq-cta:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.is-ready .line-mask > span { transform: none; }

/* ---------- hero ---------- */
/* headline + marquee fill exactly one screen; the next section starts below the fold */
.hero-screen { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; border-bottom: var(--rule); }
/* photo: from the header line down to the bottom of the marquee, with a 2px white line on its left edge */
.hero-photo { position: absolute; top: var(--header); bottom: 0; right: 0; width: 30vw; z-index: 1; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-photo::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: #fff; }
.hero {
  position: relative; flex: 1; display: flex; align-items: flex-start;
  padding: calc(var(--header) + var(--hero-gap)) var(--g) var(--hero-gap); --hero-gap: clamp(32px, 5svh, 72px);
}
.hero h1 {
  position: relative; z-index: 2;
  /* follows width and height, so the four lines always fit the screen */
  font: 400 clamp(28px, min(5.2vw, 9svh), 92px)/1.24 var(--display);
  letter-spacing: -0.045em;
  max-width: 68vw;
}
.hero h1 .line-mask { display: inline-block; vertical-align: top; padding: .08em 0 .1em; margin: -.08em 0 -.1em; }
/* the marked words look selected: cream block with black text, no underline */
.hero h1 a {
  text-decoration: none; background: var(--fg); color: var(--bg);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .06em; transition: background .3s, color .3s;
}
@keyframes nudge { 50% { transform: translateY(4px); } }

/* ---------- marquee ---------- */
/* tilted a little: the right end lifts over the base of the photo, the left end sits on the section line */
.marquee { position: relative; z-index: 3; background: var(--bg); transform: rotate(-5.1deg); transform-origin: 0 100%; border-top: var(--rule); border-bottom: var(--rule); overflow: hidden; padding: 14px 0; }
@media (max-width: 760px) {
  .hero-photo { display: none; }
  .hero h1 { max-width: none; }
}
.marquee-track { display: flex; width: max-content; animation: marquee var(--speed, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; font: 400 clamp(28px, 3.2vw, 52px)/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; }
.marquee-item a:hover { color: var(--pink); }
.marquee-item .star { color: var(--pink); font-size: .6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- showcases: stacked sticky cards ---------- */
.showcases { padding: 0 var(--g); }
.stack { position: relative; }
.card {
  position: sticky; top: calc(var(--header) + 24px);
  display: flex; flex-direction: column;
  margin-bottom: 64px; background: var(--bg); border-top: var(--rule);
  transform-origin: 50% 0; will-change: transform, filter;
}
.card:last-child { margin-bottom: 0; }
.card-head { display: flex; align-items: center; gap: 14px; height: 72px; flex: none; }
.card-title { font: 400 clamp(30px, 3.4vw, 50px)/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; transition: color .3s; }
.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover .card-title { color: var(--pink); }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-index { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 16:9 cover box: as wide as the column but never taller than the screen allows; images that are not 16:9 are cropped to fill it */
.card-img { position: relative; display: block; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border: 1px solid var(--fg); border-radius: var(--r); background: var(--shade); }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.4s var(--ease); }
.card-img-link:hover .card-img img { transform: scale(1.03); }
/* only the title and the photo are links; the image box keeps the 16:9 size */
.card-img-link { display: block; color: inherit; text-decoration: none; }
.card-media { position: relative; display: block; width: min(100%, calc((100svh - var(--header) - 150px) * 16 / 9)); }
@media (max-width: 760px) { .card-media { width: 100%; } }
.card-shade { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.stack-end { display: flex; justify-content: center; padding: 40px 0 0; }

/* ---------- index table ---------- */
/* ---------- clients logo strip ---------- */
.clients { margin: 120px 0 0; padding: 0 var(--g); border-top: var(--rule); border-bottom: var(--rule); }
.clients-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.clients-sub { margin-top: 12px; font-size: 17px; color: var(--muted); }
.logo-strip { overflow: hidden; padding: 44px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; animation: marquee var(--speed, 40s) linear infinite; }
.logo-item { flex: none; display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 44px; } /* fixed 88px gap between logos */
.logo-item img { height: 38px; width: auto; max-width: 200px; object-fit: contain; transition: opacity .3s; }
a.logo-item:hover img { opacity: 1; }
.logo-item img.is-icon { height: 64px; max-width: 64px; }

/* story: about block, same section head as Index/Services; text uses the .about-text size, marks use the hero's cream highlight */
/* text on the left, the whole photo on the right: nothing is cropped, the photo keeps its own 2:3 height */
/* the section's top rule runs full width; under it, the text (left) and the photo (right) share one row.
   The photo touches the rule above it and the rule of the Services section below it, like the hero photo. */
.story { margin-top: 120px; border-top: var(--rule); --story-gap: clamp(40px, 4.5vw, 96px); }
.story + .help { margin-top: 0; }
/* same space between text and photo as between the last line and the rule below */
.story-body { display: flex; align-items: stretch; gap: var(--story-gap); }
/* text column is as tall as the photo: title stays at the top, the paragraphs sit at the bottom, var(--story-gap) above the rule */
.story-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 18px 0 var(--story-gap); }
.story .section-head { margin: 0; padding: 0 0 28px; border-top: 0; }
/* Education: small label + school logos, sitting in the free space under the text */
.story-edu { margin-top: auto; padding-top: 16px; }
.edu-logos { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(24px, 2.2vw, 48px); }
.edu-logos img { display: block; height: calc(clamp(32px, 2.2vw, 48px) * var(--h, 1)); width: auto; }
.story-text { min-width: 0; }
.story-photo { position: relative; flex: 0 0 auto; align-self: flex-start; height: auto; aspect-ratio: 3 / 4; margin: 0 calc(var(--g) * -1) 0 0; background: var(--shade); }
.story-photo::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: #fff; }
/* below 1100px two columns squeeze the text: stack the photo under it (same breakpoint in home.js) */
@media (max-width: 1100px) {
  .story-body { flex-direction: column; gap: 28px; }
  .story-main { padding-bottom: 0; }
  .story-photo { width: 100%; max-width: 420px; margin: 0; }
  .story-photo::before { display: none; }
}
.story-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.story-text p { font: 400 clamp(18px, 1.55vw, 32px)/1.22 var(--display); letter-spacing: -0.02em; margin-bottom: .9em; }
.story-text p:last-child { margin-bottom: 0; }
.story-text .hl { background: var(--fg); color: var(--bg); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .06em; }

/* index: boxed sidebar + card grid (geometric, every element outlined) */
.idx { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.idx-side { position: sticky; top: calc(var(--header) + var(--g)); border: 1px solid var(--fg); border-radius: var(--r); overflow: hidden; }
.box-row { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--fg); font-size: 14px; text-align: left; transition: background .2s, color .2s; }
#filters .box-row:hover { background: var(--hover); }
#filters .box-row.is-on { background: var(--fg); color: var(--bg); }
#filters .box-row.is-on .t-muted { color: var(--bg); }
.box-head { color: var(--muted); font-size: 13px; }
.view-toggle { border-bottom: 0; padding: 0; gap: 0; }
.view-toggle .sq { flex: 1; height: 100%; border: 0; border-radius: 0; }
.view-toggle .sq + .sq { border-left: 1px solid var(--fg); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--fg); border-radius: var(--r); overflow: hidden; background: var(--bg); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--fg); }
.pcard-img { display: block; aspect-ratio: 16 / 9; background: var(--shade); overflow: hidden; border-bottom: 1px solid var(--fg); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pcard-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-bottom: 1px solid var(--fg); flex: 1; }
.pcard-title { font: 400 22px/1.05 var(--display); letter-spacing: -0.025em; }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 12px; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 400; font-size: 12px; color: var(--muted); padding: 10px var(--g) 10px 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
.table th button { color: inherit; display: inline-flex; gap: 6px; }
.table th button:hover, .table th.sorted button { color: var(--fg); }
.table th .arrow { width: 10px; display: inline-block; }
.table td { padding: 13px var(--g) 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.table td:last-child, .table th:last-child { text-align: right; padding-right: 0; }
.table tbody tr { cursor: pointer; transition: background .2s; }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr:hover td:first-child { border-radius: var(--r) 0 0 var(--r); }
.table tbody tr:hover td:last-child { border-radius: 0 var(--r) var(--r) 0; }
.table tbody tr:hover td:first-child { color: var(--pink); }
.table td.t-title { font-size: 17px; letter-spacing: -0.01em; }
.table .t-muted { color: var(--muted); }
.preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: 300px; aspect-ratio: 16 / 10;
  pointer-events: none; overflow: hidden; border-radius: 4px;
  opacity: 0; transform: translate(-50%, -50%) scale(.85);
  transition: opacity .25s, transform .35s var(--ease);
}
.preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- services: how we can help ---------- */
.help { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin: 120px 0 0; padding: 18px var(--g) 0; border-top: var(--rule); }
.help-side { --help-size: clamp(40px, 5vw, 76px); position: sticky; top: calc(var(--header) + 40px); align-self: start; }
/* design system rules for this section:
   1. the label, the emoji and every other element here share one left edge (x = 0)
   2. a space always sits between the emoji and the text
   3. no single word alone on the last line: "show up." is kept together with   in the markup, and text-wrap: pretty keeps the rest even */
.help-label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.help-title { font: 400 var(--help-size)/0.98 var(--display); letter-spacing: -0.04em; max-width: 9em; margin-bottom: 32px; text-wrap: pretty; }
.help-emoji { display: inline-block; margin-right: 0.2em; }
.help-scroll { position: relative; }
.help-stage { padding-bottom: 120px; }
.help-list { list-style: none; border-top: 1px solid var(--fg); }
.help-item { border-bottom: 1px solid var(--fg); }
.help-item + .help-item { margin-top: 28px; }
.help-head { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 12px 0 10px; text-align: left; transition: color .3s, padding-left .5s var(--ease); }
.help-head sup { font-size: 11px; color: var(--muted); transform: translateY(-1.6em); }
.help-name { flex: 1; font: 400 clamp(30px, 3.4vw, 54px)/1 var(--display); letter-spacing: -0.035em; }
/* arrow: points down when the list is closed, up when open */
.help-plus { position: relative; width: 40px; height: 40px; align-self: center; flex: none; margin-left: auto; }
.help-plus::before { content: ""; position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform .4s var(--ease); }
.help-item.is-open .help-plus::before { transform: translateY(4px) rotate(-135deg); }
.help-head[disabled] { cursor: default; }
.help-desc { font-size: 17px; line-height: 1.45; max-width: 34em; padding: 4px 0 0; margin-bottom: 16px; }
.help-item:not(.is-open) .help-head:hover { padding-left: 16px; color: var(--pink); }
.help-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.help-item.is-open .help-body { grid-template-rows: 1fr; }
.help-inner { overflow: hidden; min-height: 0; }
.help-includes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-bottom: 14px; opacity: 0; transition: opacity .5s; }
.help-includes li { font-size: 14px; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.help-includes li::before { content: "✱"; color: var(--pink); margin-right: 8px; font-size: 11px; }
.help-item.is-open .help-includes { opacity: 1; transition-delay: .2s; }

/* ---------- about ---------- */
.about { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin: 120px 0 0; padding: 18px var(--g) 180px; border-top: var(--rule); }
.about h3 { font: 500 22px/1.2 var(--display); letter-spacing: -0.02em; }
.about-text p { font: 400 clamp(20px, 1.9vw, 28px)/1.22 var(--display); letter-spacing: -0.02em; margin-bottom: .9em; max-width: 24em; }
.about-text p:last-child { margin-bottom: 0; }

/* ---------- footer curtain ---------- */
.curtain-end { height: 24px; background: var(--bg); border-radius: 0 0 24px 24px; position: relative; z-index: 2; }
.footer {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--fg); color: var(--bg);
  padding: 72px var(--g) var(--g);
  margin-top: -24px; padding-top: calc(72px + 24px);
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-bottom: 9vw; }
.footer-cta { font: 400 clamp(28px, 3.4vw, 54px)/1.02 var(--display); letter-spacing: -0.035em; max-width: 12em; }
.footer-cta a { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
.footer-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 17px; }
.footer-links a:hover { text-decoration: underline; }
.footer .pill { border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.footer a.pill:hover { background: var(--bg); color: var(--fg); border-color: var(--bg); }
/* wordmark: the SVG is used as a mask so it takes the text color of its place (black on the site, light in admin) */
.wm { display: inline-block; height: 1em; aspect-ratio: 4660 / 511; background: currentColor; -webkit-mask: url(/assets/wordmark.svg) center / contain no-repeat; mask: url(/assets/wordmark.svg) center / contain no-repeat; vertical-align: -0.12em; }
.logo .wm { height: 22px; }
/* Brazil flag, small and quiet in the footer (black on the cream footer) */
/* Sized to the "Got a project in mind?" line and pinned to its top-right corner (footer padding-top 96px, cap top ≈ .16em) */
.flag { position: absolute; right: var(--g); top: calc(96px + clamp(28px, 3.4vw, 54px) * .16); height: calc(clamp(28px, 3.4vw, 54px) * .72); aspect-ratio: 1744 / 1252; background: currentColor; -webkit-mask: url(/assets/flag.svg) center / contain no-repeat; mask: url(/assets/flag.svg) center / contain no-repeat; }
.wordmark { display: block; width: 100%; }
.wordmark .wm { display: block; width: 100%; height: auto; }
.wordmark sup { font-size: .16em; vertical-align: top; letter-spacing: 0; position: relative; top: .25em; }
.footer-base { display: flex; justify-content: space-between; font-size: 12px; padding-top: 14px; margin-top: 2vw; border-top: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); }

/* ---------- project page ---------- */
.project { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: var(--g); padding: calc(var(--header) + var(--g)) var(--g) 0; }
.slides { display: flex; flex-direction: column; gap: 0; }
.slides img, .slides video { width: 100%; height: auto; background: var(--shade); }
.slides img { opacity: 0; transition: opacity .7s var(--ease); }
.slides img.loaded { opacity: 1; }
.info { position: sticky; top: calc(var(--header) + var(--g)); align-self: start; max-height: calc(100svh - var(--header) - 2 * var(--g)); overflow: auto; scrollbar-width: none; }
.info::-webkit-scrollbar { display: none; }
.back { display: inline-flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 26px; transition: color .2s; }
.back:hover { color: var(--fg); }
.info h1 { font: 400 clamp(44px, 5vw, 76px)/0.96 var(--display); letter-spacing: -0.04em; margin-bottom: 26px; }
.specs { border-top: 1px solid var(--line); margin-bottom: 26px; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs dt { color: var(--muted); }
.specs dd { text-align: right; }
.desc p { font-size: 16px; line-height: 1.5; margin-bottom: 1em; max-width: 34em; }
.info-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.slide-counter { font-size: 12px; color: var(--muted); margin-top: 22px; font-variant-numeric: tabular-nums; }
.next {
  display: block; position: relative; overflow: hidden;
  margin: 120px 0 0; padding: 18px var(--g) 40px; border-top: var(--rule);
}
.next small { font-size: 13px; color: var(--muted); }
.next strong { display: block; font: 400 clamp(56px, 11vw, 190px)/0.9 var(--display); letter-spacing: -0.05em; margin-top: 18px; transition: transform .7s var(--ease), color .3s; }
.next:hover strong { transform: translateX(2vw); color: var(--pink); }
.empty { padding: 30vh var(--g); text-align: center; color: var(--muted); }

/* ---------- contact panel ---------- */
.no-scroll, .no-scroll body { overflow: hidden; }
.contact { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s .5s; }
.contact.open { visibility: visible; transition: none; }
.contact-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); opacity: 0; transition: opacity .4s; }
.contact.open .contact-backdrop { opacity: 1; }
.contact-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); border-radius: var(--r) 0 0 var(--r);
  background: var(--bg); border-left: var(--rule); overflow-y: auto;
  transform: translateX(100%); transition: transform .5s var(--ease);
}
.contact.open .contact-panel { transform: none; }
.contact-top { display: flex; justify-content: space-between; align-items: center; height: var(--header); padding: 0 var(--g); border-bottom: var(--rule); font-size: 13px; }
.contact-x { width: 36px; padding: 0; }
.contact-form, .contact-done { padding: 28px var(--g) 40px; }
.contact-h { font: 400 clamp(34px, 4vw, 52px)/1 var(--display); letter-spacing: -0.035em; margin-bottom: 28px; }
.field { display: block; border: 0; margin-bottom: 18px; }
.field > span, .field legend { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.field i { font-style: normal; opacity: .7; }
.field input, .field textarea {
  width: 100%; background: transparent; color: var(--fg); font: inherit; font-size: 16px;
  border: 1px solid var(--fg); border-radius: var(--r); padding: 12px 14px; outline: none; resize: vertical;
}
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px var(--fg); }
.needs { display: flex; flex-wrap: wrap; gap: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.contact-send:disabled { opacity: .5; pointer-events: none; }
.contact-msg { font-size: 13px; color: var(--muted); }
.contact-done p { font-size: 17px; margin-bottom: 24px; }

/* page transition */
.veil { position: fixed; inset: 0; z-index: 100; background: var(--bg); pointer-events: none; opacity: 1; transition: opacity .55s var(--ease); }
.is-ready .veil { opacity: 0; }
.is-leaving .veil { opacity: 1; }
/* arriving from a featured project card: the project slides in from the right; no veil, so the home page never shows */
@keyframes slide-in-right { from { transform: translateX(100%); } to { transform: none; } }
.slide-in { overflow-x: clip; }
.slide-in .veil { display: none; }
.slide-in #page { animation: slide-in-right .8s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .slide-in #page { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .help, .about, .story-body, .footer-grid { grid-template-columns: 1fr; }
  .help-side, .help-stage { position: static; }
  .help-side { padding-bottom: 28px; }
  .help-includes { grid-template-columns: 1fr; }
    .about { padding-bottom: 120px; }
  .slide-counter { display: none; }
  .table .hide-sm { display: none; }
  .idx { grid-template-columns: 1fr; }
  .idx-side { position: static; }
  .card-img { width: 100%; }
  .card-head { height: auto; padding: 14px 0; flex-wrap: wrap; gap: 8px 10px; }
  .card-title { font-size: 30px; }
  .card-index { display: none; }
  #filters { display: grid; grid-template-columns: 1fr 1fr; }
  #filters .box-row:nth-child(odd) { border-right: 1px solid var(--fg); }
  .project { grid-template-columns: 1fr; }
  .info { position: static; max-height: none; order: -1; padding-bottom: 20px; }
  .preview { display: none; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 13.2vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .slides img { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
}