/* =====================================================================
   COMPONENTS — boxes, image frames, card images, tags and layout.
   Every value comes from tokens.css; loaded last so it wins.
   ===================================================================== */

/* ---------- Tags ---------- */
.tags span {
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: var(--tag-radius);
  padding: var(--tag-padding-y) var(--tag-padding-x);
}

/* ---------- Project card images ---------- */
.card-media {
  aspect-ratio: var(--card-ratio);
  background: var(--card-bg);
  border-radius: var(--card-radius);
}
.card-media > img {
  inset: var(--card-padding);
  width: calc(100% - 2 * var(--card-padding));
  height: calc(100% - 2 * var(--card-padding));
  object-fit: var(--card-fit);
  border-radius: var(--card-img-radius);
}

/* ---------- Image frames on project pages ---------- */
.media, .visual-slot {
  background: var(--frame-bg);
  padding: var(--frame-padding);
  border-radius: var(--frame-radius);
  border: 1px solid var(--frame-border);
}
.gallery {
  background: var(--frame-bg);
  border-radius: var(--frame-radius);
  border: 1px solid var(--frame-border);
}
.media img, .media video, .scroll-shot, .shot img {
  border-radius: var(--frame-img-radius);
}
.scroll-shot img { border-radius: 0; }

/* ---------- Boxes ---------- */
.brief, .stat, .point, .split > div, .demo-box {
  background: var(--box-bg);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
  border: 1px solid var(--box-border);
}
.brief { padding: calc(var(--box-padding) * 1.6); }
.brief-title { margin: 0 0 10px; }
.user {
  border: 1px solid var(--box-outline-border);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--content-width); margin-left: var(--content-offset); margin-right: auto; }
.cs-hero .inner { max-width: var(--content-width); margin-left: var(--content-offset); margin-right: auto; text-align: var(--hero-align); }
.cs-hero .tags { justify-content: var(--hero-align); }
.cs-hero .sub { max-width: none; margin-bottom: 0; }   /* the tags that used to follow it moved to the side column */

.wrap :is(.eyebrow, .cs-title, .act-title, .sub-title, .lead-text, .body-text),
.work > :is(.eyebrow, .section-title),
.ds-head > * {
  text-align: var(--content-align);
}

/* ---------- Home hero ---------- */
.hero-name { margin: 0 0 var(--hero-gap); }
.mix { margin-inline: var(--mix-space); }

/* ---------- Menu (built by js/nav.js) ---------- */
.site-header {
  position: fixed;
  z-index: 60;
  top: calc(var(--nav-top) + env(safe-area-inset-top, 0px));
  left: 0; right: 0;
  margin: 0 auto;
  width: calc(100% - 2 * var(--nav-side));
  max-width: var(--nav-max-width);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 20px)); }
.site-header.is-static { position: relative; top: 0; width: 100%; margin: 0; }

.nav-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav-height);
  padding: 0 calc(var(--nav-padding-x) - 6px) 0 var(--nav-padding-x);
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.4);
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
}
.nav-logo {
  font-family: var(--nav-logo-font);
  font-size: var(--nav-logo-size);
  font-weight: var(--nav-logo-weight);
  letter-spacing: var(--nav-logo-tracking);
  color: var(--nav-logo-color);
  white-space: nowrap;
  flex: 1 1 0;
}
.nav-links {
  display: flex;
  gap: var(--nav-link-gap);
  justify-content: var(--nav-links-align);
  flex: 2 1 auto;
}
.nav-actions { display: flex; align-items: center; gap: 16px; flex: 1 1 0; justify-content: flex-end; }

/* links turn bold on hover without making the others jump */
.nav-link {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--nav-link-font);
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  color: var(--nav-link-color);
  white-space: nowrap;
  text-underline-offset: 5px;
  transition: color 0.2s;
}
.nav-link::after {
  content: attr(data-text);
  font-weight: var(--nav-link-hover-weight);
  height: 0; overflow: hidden; visibility: hidden;
}
.nav-link:hover, .nav-link.active {
  font-weight: var(--nav-link-hover-weight);
  color: var(--nav-link-hover-color);
  text-decoration-line: var(--nav-link-hover-line);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--nav-link-font);
  font-size: var(--nav-cta-size);
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  border-radius: var(--nav-cta-radius);
  padding: var(--nav-cta-padding-y) var(--nav-cta-padding-x);
  transition: opacity 0.2s, transform 0.2s;
}
.nav-cta:hover { opacity: 0.88; }
.nav-cta:active { transform: scale(0.97); }

/* hamburger → X */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer;
  position: relative; padding: 0;
  color: var(--nav-link-color);
}
.nav-toggle span {
  position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.3s, top 0.3s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* mobile dropdown card */
.nav-panel {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);   /* same width as the bar */
  background: var(--nav-panel-bg);
  backdrop-filter: blur(var(--nav-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.4);
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
  padding: 10px 0;
  display: grid;
  animation: navIn 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } }
.nav-panel .nav-link { padding: 10px 24px; }
.nav-panel hr { border: 0; border-top: 1px solid var(--color-line); margin: 8px 0; width: 100%; }
.nav-panel .nav-panel-actions { display: flex; align-items: center; gap: 18px; padding: 8px 24px 6px; }
.nav-panel .nav-panel-actions .nav-link { padding: 0; }

@media (max-width: 760px) {
  .nav-links, .nav-actions .nav-secondary { display: none; }
  .nav-toggle { display: block; }
  .nav-bar { gap: 8px; }
}
@media (min-width: 761px) { .nav-panel { display: none !important; } }

/* ---------- Page width (centered vs coast to coast) ---------- */
.intro {
  max-width: calc(var(--intro-width) + 2 * var(--gutter));
  margin-left: var(--content-offset);
  margin-right: auto;
  text-align: var(--intro-align);
}
.wide, .work, .contact-wrap { margin-left: var(--content-offset); margin-right: auto; }

/* ---------- Project pages: content + sticky side column ---------- */
.cs-layout {
  display: grid;
  grid-template-columns: var(--cs-columns);
  column-gap: var(--aside-gap);
  align-items: start;
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin-left: var(--content-offset);
  margin-right: auto;
}
.cs-main { min-width: 0; }
.cs-main .wrap, .cs-main .wide { padding: 0; margin-left: 0; margin-right: 0; }
.cs-main .wide { max-width: none; }
.cs-main [data-nav] { scroll-margin-top: calc(var(--nav-top) + var(--nav-height) + 28px); }

.cs-aside {
  order: var(--aside-order);
  align-self: stretch;          /* as tall as the content, so the sticky part can travel */
  display: flex;
  flex-direction: column;
  gap: var(--aside-stack-gap);
  margin-bottom: 48px;
}
/* "On this page" + "Next project" follow you while scrolling; "Project" scrolls away */
.aside-sticky {
  position: var(--aside-position);
  top: calc(var(--nav-top) + var(--nav-height) + var(--aside-stack-gap));
  display: grid;
  gap: var(--aside-stack-gap);
}
.aside-card {
  background: var(--aside-bg);
  border: 1px solid var(--aside-border);
  border-radius: var(--box-radius);
  box-shadow: var(--aside-shadow);
  backdrop-filter: blur(var(--aside-blur));
  -webkit-backdrop-filter: blur(var(--aside-blur));
  padding: 18px 20px;
}
.aside-title {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  letter-spacing: var(--caption-tracking);
  text-transform: var(--caption-case);
  color: var(--color-text-muted);
  margin: 0 0 12px;
  display: block;
}

/* On this page */
.toc { display: var(--toc-display); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px;
  font-family: var(--body-font); font-size: 15px; line-height: 1.3;
  color: var(--color-text-muted);
  transition: color .2s, background .2s;
}
.toc a span { font-family: var(--meta-font); font-style: var(--meta-style); font-size: 12px; color: var(--color-text-faint); min-width: 18px; transition: color .2s; }
.toc a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.toc a.active { color: var(--color-text); font-weight: 600; }
.toc a.active span { color: var(--color-accent); }
.toc-progress { height: 2px; background: var(--color-line); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.toc-progress i { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .15s linear; }

/* Project facts */
.specs { margin: 0; display: grid; }
.specs > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--color-line); }
.specs > div:first-child { border-top: 0; padding-top: 0; }
.specs dt { color: var(--color-text-muted); font-size: 14px; }
.specs dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--color-text); }
.cs-aside .tags { gap: 6px; }

/* Next project */
/* Next project: same hover language as the buttons (fills black, the arrow springs in) */
.aside-card.next {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "label label" "name chip";
  column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 16px var(--next-chip-inset) var(--next-chip-inset) 20px;
  transition: background-color .3s, border-color .3s, color .3s;
}
.next-top { grid-area: label; display: flex; align-items: baseline; gap: 10px; }
.next-top .aside-title { margin: 0; transition: color .3s; }
.next-count { font-family: var(--meta-font, var(--font-accent)); font-size: 12px; letter-spacing: .04em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
.aside-card.next b { grid-area: name; padding-bottom: 0; font-family: var(--h4-font); font-weight: var(--h4-weight); letter-spacing: var(--h4-tracking); font-size: 18px; line-height: 1.25; }
.aside-card.next .chip {   /* bottom-right corner, same inset as the chip in the menu button */
  grid-area: chip; width: 40px; height: 40px; border-radius: calc(var(--box-radius) - var(--next-chip-inset)); background: var(--color-text); color: var(--hero-neon); margin: 0;
}
.aside-card.next:hover { background: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-text); }
.aside-card.next:hover :is(.aside-title, .next-count) { color: color-mix(in srgb, var(--btn-secondary-hover-text) 60%, transparent); }
.aside-card.next:hover .chip { background: var(--hero-neon); color: var(--color-text); }

@media (max-width: 1000px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-aside { order: -1; }
  .aside-sticky { position: static; }
  .toc { display: none; }
  .aside-card.next { display: none; }   /* "Discover more" at the bottom covers it on phones */
}

/* ---------- Boxes: same height in a row, title on top, text at the bottom ---------- */
.brief > div, .point, .user, .stat, .split > div { display: flex; flex-direction: column; }
.brief-title, .point h3, .user h3 { margin-bottom: var(--box-title-gap); }
.brief > div > p:first-of-type, .point > p, .user > p, .stat .desc { margin-top: var(--box-text-push); }

/* ---------- Project pages: boxes line up with the images ---------- */
.cs-main .wrap { max-width: none; }
.cs-main .wrap > :is(p, h2, h3, .list, .lead-text, .body-text, .statement),
.cs-main .wrap > .note > :is(h3, p) { max-width: var(--content-width); }

/* ---------- Research insights: outlined, no fill ---------- */
.stat { background: var(--stat-bg); border-color: var(--stat-border); }

/* ---------- Primary users: open layout with a rounded-square bullet ---------- */
.users { gap: 28px 40px; }
.user { border: 0; padding: 0; border-radius: 0; background: none; }
.user h3 { display: flex; align-items: baseline; gap: 0.45em; }
.user h3::before {
  content: "";
  flex: none;
  width: var(--bullet-size); height: var(--bullet-size);
  border-radius: var(--bullet-radius);
  background: var(--bullet-color);
  transform: translateY(0.04em);
}
.user > p { margin-top: 0; }

/* ---------- Numbered points: 2 + 2 instead of 3 + 1 ---------- */
.points { grid-template-columns: repeat(var(--points-columns), minmax(0, 1fr)); }
@media (max-width: 640px) { .points { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phones: cover image first, then "On this page" & project facts ---------- */
@media (max-width: 1000px) {
  .cs-main { display: contents; }
  .cs-main > section:first-child { order: -2; margin-bottom: 20px; }
  .toc-progress { display: none; }
  .cs-aside { order: -1; }
  .toc { display: block; }
}

/* Counting numbers keep the same width while they change */
.stat .num { font-variant-numeric: tabular-nums; }

/* ---------- Project title area: a card the width of the menu ---------- */
.cs-hero {
  margin: var(--cs-hero-margin-top) auto var(--cs-hero-after);
  width: calc(100% - 2 * var(--cs-hero-inset));
  max-width: var(--cs-hero-max);
  border-radius: var(--cs-hero-radius);
  padding: calc(var(--cs-hero-top) - var(--cs-hero-optical)) var(--cs-hero-pad-x) var(--cs-hero-bottom);
}
.cs-hero .inner { margin-left: 0; }

/* ---------- Main project image: no frame by default ---------- */
.media.cover { background: var(--cover-bg); padding: var(--cover-padding); border: 0; }
.media.cover img { border-radius: var(--cover-img-radius); }

/* ---------- Menu: clear at the top of the page, glass once you scroll ---------- */
.nav-bar { transition: background-color .35s, border-color .35s, box-shadow .35s; }
.site-header.is-top .nav-bar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Project titles: two lines on purpose (<br>), balanced if a phone needs more */
.cs-hero h1 { text-wrap: balance; }

/* ---------- Galleries: caption under the images, like every other image ---------- */
.gallery { display: flex; flex-direction: column; padding: var(--frame-padding) 0; }
.gallery .track { order: 0; padding: 0 var(--frame-padding); scroll-padding-inline: var(--frame-padding); }   /* snapping keeps the same side margin as other images */
.gallery-cap { order: 1; margin: 14px auto 0; }
.gallery-hint { order: 2; margin: 4px 0 0; }
.gallery .arrow { top: calc(50% - 38px); }   /* centered on the images, not on images + caption */

/* ---------- Gallery images: no shadow halo, gentle zoom inside the image on hover ---------- */
.shot { overflow: hidden; border-radius: var(--frame-img-radius); }
.shot img { box-shadow: none; transform: none; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.shot:hover img { transform: scale(1.04); }

/* Title area background (can be turned off: no box) */
.cs-hero { background: var(--cs-hero-bg); }
.cs-hero > .blobs { display: var(--cs-hero-blobs); }

/* ---------- Two-column table (Why people read and write reviews) ---------- */
.compare.motives td { width: 50%; color: var(--color-text-muted); }
.compare.motives td b { display: block; color: var(--color-text); font-weight: 500; margin-bottom: 4px; }

/* ---------- A second label / title inside the same section ---------- */
.sub-eyebrow { margin-top: var(--sub-block-gap); }

/* ---------- Pain points: title on the left, the points stacked on the right ---------- */
.pains { margin-top: var(--sub-block-gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pains-col-gap); align-items: start; }
.pains-head { display: contents; }
.wrap > .pains:first-child { margin-top: 0; }   /* when it opens its own section (Primary Users) */                       /* label sits above; the title lines up with the first point */
.pains-head .eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 12px; }
.pains-head h2.cs-title { grid-column: 1; grid-row: 2; margin: 0; }
.pains .pains-list { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: var(--pains-item-gap); margin-top: var(--pains-optical); }
@media (max-width: 760px) {
  .pains { grid-template-columns: 1fr; }
  .pains .pains-list { grid-column: 1; grid-row: 3; margin-top: 32px; }
}
h2.cs-title.sub-cs-title { margin-top: var(--sub-block-gap); }

/* ---------- Stacked rows with a line between them (Research takeaways) ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: var(--rows-pad) 0; }
.rows li + li { border-top: 1px solid var(--color-line); }   /* lines only between items */
.rows li:first-child { padding-top: var(--rows-title-gap); }   /* extra space under the "Research takeaways" title */
.rows li:last-child { padding-bottom: 0; }
.rows h3 { margin: 0 0 8px; }
.rows p { margin: 0; max-width: var(--content-width); }

/* ---------- One spacing rhythm on project pages ----------
   Every title starts after the same big gap (--section-gap), and inside each
   block the spacing is always the same, so it's clear where a section starts and ends. */
.cs-main h2.cs-title, .cs-main .act-title { margin-bottom: var(--title-gap); }
.cs-main .sub-title { margin: var(--sub-block-gap) 0 var(--title-gap); }
.cs-main :is(.body-text, .lead-text):not(:has(+ :is(p, .body-text, .lead-text))) { margin-bottom: var(--intro-gap); }
.cs-main .pains-head h2.cs-title { margin: 0; }
/* Images / tables stacked one after another: the same small gap everywhere */
.cs-main .wrap + .wide, .cs-main .media + .gallery { margin-top: var(--stack-gap); }
.cs-main .wrap:has(> :is(.body-text, .lead-text):last-child) + .wide { margin-top: 0; }   /* intro text already gives --intro-gap */

/* ---------- Image pairs: always 2 per row (2+2, never 3+1); one per row on phones ---------- */
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- Home header: gray-white with a neon glow that follows the mouse ---------- */
.hero, .contact { background: var(--hero-surface); }
.contact::after { display: none; }   /* the old spotlight: the neon glow replaces it */
.hero-glows .blob.gray { background: var(--hero-glow-gray); opacity: 0.8; }
.hero-glows .neon {
  position: absolute; left: 0; top: 0;
  width: var(--hero-neon-size); height: var(--hero-neon-size);
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-neon) 0%, color-mix(in srgb, var(--hero-neon) 45%, transparent) 40%, transparent 70%);
  filter: blur(40px);
  opacity: var(--hero-neon-opacity);
  will-change: transform;
}
.contact .hero-glows .neon { width: calc(var(--hero-neon-size) * 0.8); height: calc(var(--hero-neon-size) * 0.8); }
.contact > .blobs { position: absolute; z-index: 0; }   /* glows stay behind the text */

/* ---------- Home header: your name as a Figma selection you can resize ---------- */
.hero { flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-stage { position: relative; z-index: 1; --hero-scale: 1; }
.hero-stage .hero-name  { font-size: calc(var(--name-size) * var(--hero-scale)); }
.hero-stage .hero-title { font-size: calc(var(--display-size) * var(--hero-scale)); }
.design-layer { position: relative; display: inline-block; }

.design-layer .sel { position: absolute; inset: -14px -20px; border: 1.5px solid var(--hero-select); pointer-events: none; }
.design-layer .sel i {
  position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--hero-select);
  pointer-events: auto; touch-action: none; transition: transform .2s;
}
.design-layer .sel i::after { content: ""; position: absolute; inset: -14px; }   /* bigger grab area */
.design-layer .sel i:hover { transform: scale(1.3); }
.design-layer .sel i[data-h="nw"] { top: -6.5px; left: -6.5px; cursor: nwse-resize; }
.design-layer .sel i[data-h="ne"] { top: -6.5px; right: -6.5px; cursor: nesw-resize; }
.design-layer .sel i[data-h="sw"] { bottom: -6.5px; left: -6.5px; cursor: nesw-resize; }
.design-layer .sel i[data-h="se"] { bottom: -6.5px; right: -6.5px; cursor: nwse-resize; }
.design-layer .sel-label, .design-layer .sel-size { position: absolute; font: 500 11px/1 var(--font-accent); white-space: nowrap; letter-spacing: 0; }
.design-layer .sel-label { bottom: 100%; left: -1.5px; margin-bottom: 9px; color: var(--color-text-muted); }
.design-layer .sel-size { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; padding: 4px 7px; border-radius: 4px; background: var(--hero-select); color: #111; }

/* Dev Mode chip: small, next to the frame */
.inspect {
  position: absolute; left: calc(100% + 40px); top: -14px; margin: 0;
  padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, #fff 70%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--color-line);
  font: 400 12.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--color-text); white-space: pre;
}
.inspect .c-tag { color: var(--color-text); font-weight: 600; }
.inspect .c-attr { color: var(--color-text-muted); }
.inspect .c-str { color: var(--color-text); padding: 1px 3px; margin: 0 -3px; border-radius: 4px; transition: background .25s; }
.inspect .c-str.hot { background: var(--hero-neon); }

/* "Ofir" cursor */
.ghost {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .35s;
}
.ghost.is-on { opacity: 1; }
.ghost svg { display: block; margin: -2px 0 0 -2px; transition: transform .15s; }
.ghost.is-down svg { transform: scale(.85); }
.ghost b {
  position: absolute; left: 14px; top: 16px; padding: 3px 7px; border-radius: 6px 6px 6px 2px;
  background: var(--hero-neon); color: #111; font: 600 11px/1.2 var(--font-accent); white-space: nowrap;
}
@media (max-width: 900px) {
  .inspect { left: -20px; top: calc(100% + 56px); }
}
@media (max-width: 700px) {
  .sel { inset: -10px -10px; }
}

/* ---------- Case Studies page: each project is one unit in a thin gray frame (text left, image right) ---------- */
.case-list {
  display: grid; gap: var(--case-gap);
  padding: 0 var(--gutter); max-width: var(--max-width);
  margin: 0 auto var(--section-gap) var(--content-offset);
}
.case-list .card {
  display: grid; grid-template-columns: var(--case-text-width) minmax(0, 1fr); column-gap: var(--case-inset);
  align-items: start; padding: var(--case-inset);
  border: 1px solid var(--case-border); border-radius: var(--box-radius); background: var(--case-bg);
  transition: border-color .3s;
}
.case-list .card:hover { border-color: var(--color-text-muted); }
.case-list .card-text { padding: 20px 16px 16px 14px; }
.case-list .card-media { aspect-ratio: 16 / 10; margin: 0; border-radius: calc(var(--box-radius) - var(--case-inset)); overflow: hidden; }
.case-list .card h3 { margin: 6px 0 10px; font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); line-height: var(--h3-leading); }
.case-list .card-sub { margin: 0 0 18px; }
@media (max-width: 999px) {
  .case-list .card { grid-template-columns: 1fr; row-gap: 4px; }
  .case-list .card-text { padding: 10px 8px 8px; }
}

/* ---------- About page: same layout as a project page ---------- */
.about { padding: 0 var(--gutter); max-width: var(--max-width); margin: 0 0 0 var(--content-offset); }
.about > section { margin-bottom: var(--section-gap); }
.about-intro { display: grid; grid-template-columns: var(--cs-columns); column-gap: var(--aside-gap); align-items: end; }
.about-story > .body-text { max-width: var(--content-width); }
.about-story .lead-text { max-width: var(--content-width); margin-bottom: var(--title-gap); }
.about-story .body-text:not(:has(+ .body-text)) { margin-bottom: var(--intro-gap); }
.about-photo { margin: 0; border-radius: var(--frame-radius); overflow: hidden; background: var(--color-bg-hero); aspect-ratio: 4 / 5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tags.fun span { font-size: 15px; padding: 8px 14px; }
.about h2.cs-title { margin-bottom: var(--title-gap); }

/* Experience & courses: role · place · years, a line between rows */
.xp { list-style: none; margin: 0; padding: 0; }
.xp li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px; gap: 8px 24px; align-items: baseline; padding: 22px 0; }
.xp li + li { border-top: 1px solid var(--color-line); }
.xp li:first-child { padding-top: 0; }
.xp h3 { margin: 0; font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); letter-spacing: var(--h4-tracking); line-height: 1.25; }
.xp span, .xp time { font-family: var(--body-font); font-size: var(--body-size); color: var(--color-text-muted); }
.xp time { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 999px) {
  .about-intro { grid-template-columns: 1fr; row-gap: 32px; }
  .about-photo { max-width: 360px; order: -1; }
}
@media (max-width: 700px) {
  .xp li { grid-template-columns: 1fr auto; }
  .xp span { grid-column: 1; grid-row: 2; }
  .xp time { grid-row: 1; grid-column: 2; }
}

/* ---------- Menu links land each section just under the menu ---------- */
.work { scroll-margin-top: calc(var(--nav-top) + var(--nav-height) + var(--anchor-gap) - 40px); }   /* 40px = the section's own top padding */
.contact-wrap, .intro { scroll-margin-top: calc(var(--nav-top) + var(--nav-height) + var(--anchor-gap)); }
.cs-main [data-nav] { scroll-margin-top: calc(var(--nav-top) + var(--nav-height) + var(--anchor-gap)); }

/* ---------- Zoom into an image that has a lot of empty background (per image: --z, --ox, --oy) ---------- */
.crop { overflow: hidden; border-radius: var(--frame-img-radius); }
.media.cover .crop { border-radius: var(--cover-img-radius); }
.crop img { display: block; transform: scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); border-radius: 0 !important; }
.crop[style*="--ar"] { aspect-ratio: var(--ar); }   /* optional: a shorter frame, cut from the middle (--py) */
.crop[style*="--ar"] img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--py, 50%); }
/* Pain points / Primary users / What I bring: shorter lines, away from the edge */
.pains-list .user p { max-width: var(--pains-text-width); text-wrap: pretty; }

/* Project number before the category on the cards: 01 · Wix · Mobile App */
.card-meta[data-num]::before { content: attr(data-num) " \00b7  "; }

/* ---------- Buttons: on hover the button grows and an arrow springs in (like filatov.design) ---------- */
.btn, .nav-cta { gap: 0; transition: background-color .3s, color .3s, border-color .3s, transform .2s; }
.btn::before { display: none; }                       /* the old slide-up fill */
.btn > svg, .nav-cta > svg {
  flex: none; width: 0; margin-left: 0; opacity: 0; transform: none;
  transition: width .5s var(--btn-spring), margin-left .5s var(--btn-spring), opacity .2s;
}
.btn:hover > svg { width: 18px; margin-left: 8px; opacity: 1; transform: none; }
.btn:hover { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-text); }
.btn.solid:hover { background: var(--btn-primary-hover-bg); border-color: transparent; }
.nav-cta:hover { opacity: 1; background: var(--btn-primary-hover-bg); }
@media (hover: none) { .btn > svg { width: 18px; margin-left: 8px; opacity: 1; } }

/* ---------- Dark buttons: a neon square with an arrow ("Let's talk", the email button, Next project) ---------- */
.chip {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; margin-left: 12px; border-radius: 8px;
  background: var(--hero-neon); color: var(--color-text);
  transition: transform .45s var(--btn-spring), background-color .3s, color .3s;
}
.chip svg { display: block; transition: transform .45s var(--btn-spring); }
:hover > .chip { transform: scale(1.06); }
:hover > .chip svg { transform: translateX(2px); }
.nav-cta:has(.chip) { padding-top: var(--chip-inset); padding-bottom: var(--chip-inset); padding-right: var(--chip-inset); }
.nav-cta .chip { width: 28px; height: 28px; border-radius: 7px; margin-left: 10px; }
.btn.solid:has(.chip) { padding-top: 7px; padding-bottom: 7px; padding-right: 7px; }
.btn.solid .chip { width: 36px; height: 36px; border-radius: 9px; }

/* ---------- CV page: one printable sheet ("Download PDF" = print → Save as PDF) ---------- */
.cv-link { margin-top: var(--intro-gap); }
.cv { padding: calc(var(--nav-top) + var(--nav-height) + 48px) var(--gutter) var(--section-gap); }
.cv-actions { display: flex; justify-content: space-between; gap: 12px; max-width: 860px; margin: 0 auto 24px; }
.cv-actions button { font: inherit; cursor: pointer; }
.cv-sheet { max-width: 860px; margin: 0 auto; padding: 56px 60px; border: 1px solid var(--color-line); border-radius: var(--box-radius); background: #fff; }
.cv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--color-line); margin-bottom: 8px; }
.cv-head h1 { margin: 0; font-family: var(--h2-font); font-size: 44px; font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: 1; }
.cv-role { margin: 8px 0 0; color: var(--color-text-muted); font-size: 17px; }
.cv-contact { margin: 0; text-align: right; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.cv-sheet section { padding-top: 28px; margin: 0; }
.cv-h { margin: 0 0 14px; font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--eyebrow-color); font-weight: 500; }
.cv-text { margin: 0; line-height: 1.6; }
.cv .xp li { padding: 12px 0; }
.cv .xp h3 { font-size: 16px; }
.cv .xp span, .cv .xp time { font-size: 14px; }
@media (max-width: 700px) { .cv-sheet { padding: 28px 20px; } .cv-head { flex-direction: column; align-items: flex-start; } .cv-contact { text-align: left; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .site-header, .cv-actions { display: none !important; }
  .cv { padding: 0; }
  .cv-sheet { border: 0; padding: 0; max-width: none; }
  .cv .xp li { break-inside: avoid; }
}
/* Reviews screens: the frame is as wide as the widest screenshot, so nothing is cut at the sides (only the bottom) */
.media.crop img { aspect-ratio: 7 / 8; object-position: top center; }

/* Dark buttons with the neon square: no lighter black on hover, the arrow's movement is enough */
.nav-cta:has(.chip):hover { background: var(--nav-cta-bg); }
.btn.solid:has(.chip):hover { background: var(--btn-primary-bg); }

/* Home header: "Ofir Tamir." lines up with the "Ot." logo, the selection frame with the menu's edge (--hero-shift is measured in the page) */
.hero-stage { margin-left: var(--hero-shift, 0px); }
.design-layer .sel { left: calc(-1 * var(--hero-shift, 20px)); }

/* ---------- Contact buttons: white, the brand logo on the left in a square,
   the same distance from the edges as the arrow square in the Next project card ---------- */
.btn.has-brand {
  gap: 12px; padding: var(--chip-inset) 22px var(--chip-inset) var(--chip-inset);
  background: #fff; color: var(--color-text); border-color: var(--color-line);
}
.btn.has-brand:hover { background: #fff; color: var(--color-text); border-color: var(--color-text); }
.brand {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: calc(var(--btn-radius) - var(--chip-inset)); overflow: hidden;
  transition: transform .45s var(--btn-spring);
}
.brand svg { display: block; }
.btn.has-brand:hover .brand { transform: scale(1.06); }

/* ---------- Home header on phones: centered, and the CSS card folded like code (tap to open) ---------- */
@media (max-width: 700px) {
  .hero { justify-content: center; padding-top: 0; }
  .inspect { font-size: 11px; padding: 10px 12px 26px; left: -10px; top: calc(100% + 52px); max-height: calc(2 * 1.75em + 36px); overflow: hidden; cursor: pointer; }
  .inspect::after { content: "+ show all"; position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; font: 500 10.5px/1 var(--font-accent); color: var(--color-text-muted); background: linear-gradient(transparent, #f7f7f5 45%); }
  .inspect.open { max-height: 20em; }
  .inspect.open::after { content: none; }
}

/* Home header: the selection can be moved and resized freely */
.hero-stage { translate: var(--hero-x, 0px) var(--hero-y, 0px); }
.hero-stage .design-layer { pointer-events: auto; cursor: grab; white-space: nowrap; touch-action: none; user-select: none; }
.hero-stage.is-dragging .design-layer { cursor: grabbing; }
.inspect.below { left: -20px; top: calc(100% + 56px); }
.hero-stage.is-moved .sel-label::after { content: "  ·  double-click to reset"; color: var(--color-text-muted); }
/* Pain points / Primary users: the list column sits a bit further right */
.pains { grid-template-columns: minmax(0, var(--pains-split)) minmax(0, 1fr); }
@media (max-width: 760px) { .pains { grid-template-columns: 1fr; } }

/* Case Studies page: more room for the text, a smaller panoramic image zoomed in on the device */
.case-list .card-media { aspect-ratio: auto; }
.case-list .card-media .crop { border-radius: inherit; }
/* Contact buttons: hover = only the logo moves, the border stays */
.btn.has-brand:hover { border-color: var(--color-line); }
/* Case Studies page: no darker frame on hover */
.case-list .card:hover { border-color: var(--case-border); }

/* Case Studies page: the image corner is a little rounder than the strict inner radius, so it reads as following the frame */
.case-list .card-media { border-radius: calc(var(--box-radius) - var(--case-inset) + 4px); }

/* ---------- About: three numbers side by side ---------- */
.about-stats { display: flex; gap: clamp(28px, 4vw, 56px); margin: 0 0 var(--intro-gap); }
.about-stats div { margin: 0; }
.about-stats dt { font-family: var(--h2-font); font-size: clamp(36px, 3.6vw, 52px); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: 1; font-variant-numeric: tabular-nums; }
.about-stats dd { margin: 10px 0 0; font-size: var(--caption-size, 14px); color: var(--color-text-muted); }

/* ---------- About: experience list that opens on hover (tap on phones) ---------- */
.roles-wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-width); gap: var(--aside-gap); align-items: start; }
.roles { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-line); }
.role { border-top: 1px solid var(--color-line); padding: 22px 0; cursor: pointer; outline: none; }
.role-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.role h3 { margin: 0; font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); letter-spacing: var(--h4-tracking); line-height: 1.25; color: var(--color-text-muted); transition: color .3s; }
.role time { flex: none; font-size: var(--body-size); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.role-co { margin: 4px 0 0; font-size: var(--body-size); color: var(--color-text-muted); }
.role.open h3, .role:focus-visible h3 { color: var(--color-text); }
.role-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.role-body > div { overflow: hidden; }
.role.open .role-body { grid-template-rows: 1fr; }
.role-body ul { list-style: none; margin: 0; padding: 16px 0 0; display: grid; gap: 10px; max-width: 64ch; }
.role-body li { position: relative; padding-left: 20px; font-size: var(--body-size); line-height: 1.6; color: var(--color-text); }
.role-body li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--color-accent); }

/* The card next to the list: the years of the open role, in a "code" voice */
.role-card {
  position: sticky; top: calc(var(--nav-top) + var(--nav-height) + var(--aside-stack-gap));
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  aspect-ratio: 4 / 5; padding: 24px; border-radius: var(--box-radius);
  background: #111 radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--hero-neon) 28%, transparent), transparent 60%);
  color: #fff; overflow: hidden;
}
.role-card-code { position: absolute; top: 22px; left: 24px; font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #8a8a8a; }
.role-card-code b { color: var(--hero-neon); font-weight: 400; }
.role-card-years { font-family: var(--h2-font); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); font-size: clamp(34px, 3.2vw, 46px); line-height: 1; color: var(--hero-neon); }
.role-card-co { font-size: 15px; color: #cfcfcf; }
@media (max-width: 999px) {
  .roles-wrap { grid-template-columns: 1fr; }
  .role-card { display: none; }
}
@media (max-width: 600px) { .about-stats { gap: 22px; } .about-stats dd { font-size: 12px; } }

/* ---------- Footer: links + moving "code" field with the name on top ---------- */
.site-footer { background: var(--ft-bg); color: var(--ft-ink); margin-top: 0; padding: 0; border: 0; display: block; overflow: hidden; }
.ft-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px;
  padding: clamp(56px, 7vw, 96px) var(--gutter) 24px; max-width: var(--max-width); margin-left: var(--content-offset);
}
.ft-col { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ft-label { margin: 0 0 4px; font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ft-muted); }
.site-footer a { color: var(--ft-ink); text-decoration: none; font-size: 16px; width: fit-content; transition: color .2s; }
.site-footer a:hover { color: var(--ft-accent); }
.ft-mail { font-family: var(--h3-font); font-size: clamp(22px, 2.4vw, 32px) !important; letter-spacing: var(--h3-tracking); }
.ft-meta { font-size: 13px; line-height: 1.6; color: var(--ft-muted); justify-content: flex-end; }
.ft-art { position: relative; height: var(--ft-art-height); }
.ft-code { position: absolute; inset: 0; }
.ft-word {
  position: absolute; left: var(--gutter); right: 0; bottom: -0.2em; margin: 0; pointer-events: none;
  font-family: var(--display-font); font-weight: 700; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap;
  font-size: clamp(80px, 19vw, 330px); color: var(--ft-word);
}
@media (max-width: 800px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-hello { grid-column: 1 / -1; } }
@media print { .site-footer { display: none; } }

/* CV: role bullets */
.cv .xp li.cv-role-item { grid-template-rows: auto auto; }
.cv-bullets { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.cv-bullets li { position: relative; padding: 0 0 0 16px !important; border: 0 !important; display: block !important; font-size: 14px; line-height: 1.55; color: var(--color-text); }
.cv-bullets li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 2px; background: var(--color-text-muted); }

/* ---------- About: calmer ---------- */
.about-story :is(.lead-text, .body-text) { max-width: var(--about-line); }   /* ~14 words a line at most */
.roles-wrap.single { display: block; }
.about-stats { display: grid; }
.about-stats dd { font-family: var(--body-font); font-size: var(--body-size); line-height: 1.45; color: var(--color-text-muted); margin-top: 10px; max-width: 16ch; }
.about-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--about-stats-width); column-gap: 32px; }   /* three equal columns = equal spacing */

/* Footer = the contact section: big invitation on the left, links on the right */
.ft-top { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ft-title { margin: 6px 0 14px; font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: var(--h2-leading); color: var(--ft-ink); }
.ft-text { margin: 0 0 28px; max-width: 42ch; font-size: var(--body-size); line-height: 1.6; color: var(--ft-muted); }
.ft-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer .ft-actions a { font-size: var(--btn-font-size); color: var(--color-text); }
.site-footer .ft-actions a:hover { color: var(--color-text); }
.ft-meta { justify-content: flex-start; padding-top: 0; }
@media (max-width: 800px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-hello { grid-column: 1 / -1; } }

/* Research takeaways: a number before each title */
.rows { counter-reset: takeaway; }
.rows li { counter-increment: takeaway; }
.rows h3::before { content: counter(takeaway, decimal-leading-zero); display: inline-block; min-width: 2.4em; font-family: var(--meta-font, var(--font-accent)); font-size: 0.55em; font-weight: 500; letter-spacing: .02em; color: var(--color-accent); vertical-align: 0.35em; }

/* ---------- Case Studies page: a list like wix.com ---------- */
.case-rows { padding: 0 var(--gutter); max-width: var(--max-width); margin: 0 0 var(--section-gap) var(--content-offset); border-bottom: 1px solid var(--color-line); }
.case-row {
  display: grid; grid-template-columns: 56px minmax(0, 1.25fr) minmax(0, 1fr) var(--case-thumb-width);
  column-gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid var(--color-line);
  color: var(--color-text); text-decoration: none;
}
.case-num { align-self: start; padding-top: .6em; font-family: var(--meta-font, var(--font-accent)); font-size: 14px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.case-name { margin: 0; font-family: var(--h2-font); font-size: var(--case-title-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: 1.02; color: var(--color-text-muted); transition: color .35s; }
.case-info { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.case-meta { margin: 0 0 8px; font-family: var(--meta-font, var(--font-accent)); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.case-sub { margin: 0 0 14px; font-size: var(--body-size); line-height: 1.5; color: var(--color-text); max-width: 34ch; }
.case-thumb { border-radius: var(--frame-radius); overflow: hidden; filter: grayscale(1); opacity: .55; transition: filter .45s, opacity .45s, transform .45s; }
.case-thumb .crop { border-radius: inherit; }
.case-row.is-active .case-name { color: var(--color-text); }
.case-row.is-active .case-info { opacity: 1; transform: none; }
.case-row.is-active .case-thumb { filter: none; opacity: 1; }
@media (max-width: 999px) {
  .case-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 14px; }
  .case-thumb { grid-column: 1 / -1; grid-row: 1; filter: none; opacity: 1; }
  .case-info { grid-column: 2; opacity: 1; transform: none; }
  .case-name { color: var(--color-text); }
}

/* Footer: neon title, dark buttons that belong on black, an italic kicker */
.ft-kicker { margin: 0 0 6px; font-family: var(--body-font); font-style: italic; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--ft-muted); }
.ft-title { color: var(--ft-word); }
.site-footer .btn.has-brand { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--ft-ink); }
.site-footer .btn.has-brand:hover { background: rgba(255,255,255,.1); border-color: color-mix(in srgb, var(--ft-word) 60%, transparent); color: var(--ft-ink); }
.site-footer .btn.has-brand .brand { background: #fff; }
.site-footer .ft-actions a, .site-footer .ft-actions a:hover { color: var(--ft-ink); }

/* Research takeaways: numbers in light gray */
.rows h3::before { color: var(--color-text-faint); }

/* Case Studies list: no numbers, a gentler crop, much lighter gray when not active */
.case-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) var(--case-thumb-width); }
.case-name { color: var(--case-idle); }
.case-thumb { opacity: .4; }
@media (max-width: 999px) { .case-row { grid-template-columns: 1fr; } .case-info { grid-column: 1; } }
@media (max-width: 999px) { .case-name { color: var(--color-text); } .case-thumb { opacity: 1; filter: none; } }
/* Footer: white title; labels use the Design System's eyebrow style */
.ft-title { color: var(--ft-ink); }
.ft-kicker, .ft-label {
  font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking); line-height: var(--eyebrow-leading); text-transform: var(--eyebrow-case);
  font-style: var(--eyebrow-style); color: var(--ft-muted);
}
/* Experience points: small green rounded squares, like the bullets on project pages */
.role-body li { padding-left: 18px; }
.role-body li::before { top: .62em; width: 6px; height: 6px; border-radius: 1.5px; background: var(--color-accent); }
/* Footer buttons: like "Let's talk" — the logo in black on a neon square, no white frame */
.site-footer .btn.has-brand .brand.mono { background: var(--hero-neon); color: #111; }
/* Footer buttons: the logo itself in neon, no square, both the same size */
.site-footer .btn.has-brand .brand.mono { background: none; color: var(--hero-neon); width: 32px; height: 32px; }
.site-footer .btn.has-brand { padding-left: 14px; }

/* ---------- Case Studies page: one featured project, two side by side, all in color ---------- */
.case-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--aside-gap);
  padding: 0 var(--gutter); max-width: var(--max-width); margin: 0 0 var(--section-gap) var(--content-offset);
}
.case-card { display: block; color: var(--color-text); text-decoration: none; }
.case-card .card-media { aspect-ratio: 16 / 10; border-radius: var(--frame-radius); overflow: hidden; margin: 0 0 18px; }
.case-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.case-card:hover .card-media img { transform: scale(1.03); }
.case-card h3 { margin: 6px 0 6px; font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); line-height: var(--h3-leading); }
.case-card .card-sub { margin: 0 0 14px; }
.case-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--aside-gap); align-items: end; }
.case-card.featured .card-media { aspect-ratio: 16 / 9; margin: 0; }
@media (max-width: 800px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-card.featured { display: block; }
  .case-card.featured .card-media { margin-bottom: 18px; }
}

/* ---------- Home header, calmer: one weight, a line about you, a button, the code field behind ---------- */
.hero-sub { position: relative; z-index: 1; margin: 28px 0 32px; max-width: 46ch; font-size: var(--lead-size, 20px); line-height: 1.5; color: var(--color-text-muted); }
.hero-cta { position: relative; z-index: 1; }
.hero-stage .hero-text { pointer-events: none; }
.hero-stage .hero-name { margin-bottom: 0; }

/* ---------- Footer, light option: the same language as the home header ---------- */
.site-footer.ft-light {
  --ft-bg: var(--hero-surface); --ft-ink: var(--color-text); --ft-muted: var(--color-text-muted);
  --ft-ascii: #b9bdb3; --ft-ascii-hot: var(--green-500); --ft-word: var(--color-text); --ft-accent: var(--green-500);
  border-top: 1px solid var(--color-line);
}
.site-footer.ft-light .btn.has-brand { background: #fff; border-color: var(--color-line); color: var(--color-text); }
.site-footer.ft-light .btn.has-brand:hover { border-color: var(--color-text); }
.site-footer.ft-light .ft-actions a, .site-footer.ft-light .ft-actions a:hover { color: var(--color-text); }
.site-footer.ft-light .btn.has-brand .brand.mono { color: var(--green-500); }

/* Footer: the same neon glow as the home header, following the mouse */
.site-footer { position: relative; isolation: isolate; }
.site-footer > .ft-glows { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.site-footer > :not(.ft-glows) { position: relative; z-index: 1; }

/* Long titles: balanced lines, never one word alone on the last line; body text not too wide */
.cs-main :is(h2.cs-title, .act-title, .sub-title) { text-wrap: balance; max-width: var(--title-measure); }
.cs-main .wrap > :is(.body-text, .lead-text) { max-width: var(--text-measure); text-wrap: pretty; }

/* Footer glow: a wide, soft (feathered) light across the whole footer, not a ball;
   it dims while the mouse is on the text or a button, so the content stays clear */
.site-footer .ft-glows .neon {
  width: calc(var(--hero-neon-size) * 2.2); height: calc(var(--hero-neon-size) * 1.3);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hero-neon) 70%, transparent) 0%, color-mix(in srgb, var(--hero-neon) 30%, transparent) 45%, transparent 100%);
  filter: blur(70px);
  opacity: var(--ft-glow-opacity);
  transition: opacity .5s;
}
.site-footer.ft-light { --ft-glow-opacity: 0.75; }

/* ---------- Case Studies page: compact rows, one under the other, all in color ---------- */
.case-lines { padding: 0 var(--gutter); max-width: var(--max-width); margin: 0 0 var(--section-gap) var(--content-offset); border-bottom: 1px solid var(--color-line); }
.case-line {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--case-line-img); gap: 32px; align-items: center;
  padding: var(--case-line-pad) 0; border-top: 1px solid var(--color-line); color: var(--color-text); text-decoration: none;
}
.case-line-name { margin: 6px 0 8px; font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); line-height: var(--h3-leading); transition: transform .4s var(--btn-spring); }
.case-line .case-sub { margin: 0 0 14px; color: var(--color-text-muted); max-width: 48ch; }
.case-line-img { aspect-ratio: 16 / 10; border-radius: var(--frame-radius); overflow: hidden; }
.case-line-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.case-line:hover .case-line-img img { transform: scale(1.04); }
.case-line:hover .case-line-name { transform: translateX(4px); }
@media (max-width: 760px) { .case-line { grid-template-columns: 1fr; } .case-line-img { order: -1; } }

/* ---------- One title style for every section title on project pages ----------
   "Wireframes", "Final design" etc. now use the H2 style like "What's next" and "Key insights" */
.act-title {
  font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking); line-height: var(--h2-leading); text-transform: var(--h2-case);
  font-style: var(--h2-style); color: var(--h2-color);
}
/* Footer logos, optically equal: the Gmail M is wide and low, LinkedIn "in" is narrow and tall,
   so each gets its own size to look the same height and weight */
.site-footer .brand-gm svg { width: 22px; height: 22px; }
.site-footer .brand-li svg { width: 25px; height: 25px; transform: translateY(-1px); }

/* ---------- Home header: the living canvas ---------- */
.hero-pieces { position: absolute; z-index: 1; right: var(--gutter); top: 50%; transform: translateY(-46%); width: min(46%, 640px); height: 470px; }
.piece { position: absolute; background: #fff; border: 1px solid var(--color-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(20,20,20,.08); padding: 16px 18px; transition: transform .25s ease-out; will-change: transform; }
.piece small { display: block; margin-bottom: 10px; font-family: var(--eyebrow-font); font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.stars { display: flex; gap: 4px; }
.stars button { border: 0; background: none; padding: 0; font-size: 26px; line-height: 1; color: #d6d6d2; cursor: pointer; transition: color .15s, transform .2s var(--btn-spring); }
.stars button.lit { color: var(--color-text); }
.stars button:hover { transform: scale(1.15); }
.stars-msg { margin-top: 8px; font-size: 13px; color: var(--color-text-muted); min-height: 1.2em; }
.order { border: 0; border-radius: 12px; padding: 7px 7px 7px 16px; background: var(--color-text); color: #fff; font: 500 15px/1 var(--font-body); cursor: pointer; display: inline-flex; gap: 12px; align-items: center; transition: background-color .3s, color .3s; }
.order .chip { margin: 0; width: 30px; height: 30px; border-radius: 8px; }
.order.done { background: var(--hero-neon); color: var(--color-text); }
.order.done .chip { background: var(--color-text); color: var(--hero-neon); }
.ring { width: 96px; height: 96px; cursor: pointer; display: block; }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: #eee; }
.ring .fg { stroke: var(--green-500); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.ring text { font: 600 22px var(--font-body); fill: var(--color-text); }
.hero-pieces-note { position: absolute; right: 0; bottom: -34px; margin: 0; font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 1000px) {
  .hero-pieces { position: relative; right: auto; top: auto; transform: none; width: 100%; height: 360px; margin-top: 48px; }
  .hero-pieces-note { position: static; margin-top: 8px; }
}

/* Serif accent: only the second line of the big statements (home title, footer title) */
.ft-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.06em; }
/* Living canvas: the order button is light, so the black "See my work" stays the main button */
.order { background: #f1f1ee; color: var(--color-text); }
.order:hover { background: #e9e9e5; }
.order .chip { background: var(--hero-neon); color: var(--color-text); }
.order.done { background: var(--hero-neon); }
.order.done .chip { background: var(--color-text); color: var(--hero-neon); }
/* Footer: compact, so the whole footer fits on screen under the menu */
.ft-top { padding-top: clamp(48px, 5vw, 72px); padding-bottom: 8px; gap: 24px 32px; }
.ft-title { margin-bottom: 12px; }
.ft-text { margin-bottom: 22px; }

/* ---------- Type rules ----------
   1. Long titles: the essence in black, the rest of the sentence in gray (same weight).
   2. The serif appears only in the second line of the big statements: home title, About title, footer title. */
.tone { color: var(--tone-color); }
.cs-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.06em; }
.about-stats dd { white-space: nowrap; max-width: none; }   /* every label on one line */

.tone-off .tone { color: inherit; }   /* one-line titles stay fully black */
.site-footer > .ft-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.piece:has(.ring) { cursor: pointer; }
.piece { transition: transform .25s ease-out, box-shadow .3s; }
.piece:hover { box-shadow: 0 24px 60px rgba(20,20,20,.12); }   /* every piece reacts on hover */

/* ---------- Home header on phones: everything starts below the menu, the pieces small and overlapping ---------- */
@media (max-width: 700px) {
  .hero { justify-content: flex-start; min-height: auto; padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-top) + var(--nav-height) + 48px); padding-bottom: 48px; }
  .hero-sub { font-size: 17px; margin: 20px 0 24px; }
  .hero-pieces { height: 250px; margin-top: 36px; }
  .hero-pieces .piece { scale: .7; transform-origin: top left; }
  .hero-pieces .piece[style*="right:0"] { transform-origin: top right; }
}
/* Project cards stacked on phones: clear space between projects, so each text belongs to its image */
.cards, .cards.three { row-gap: var(--cards-row-gap); }

/* ---------- Footer on phones: compact (fits under the menu) and the code field clearly visible ---------- */
@media (max-width: 700px) {
  .ft-top { grid-template-columns: 1fr; gap: 20px; padding-top: 36px; padding-bottom: 0; }
  .ft-title { font-size: 30px; margin: 4px 0 10px; }
  .ft-text { font-size: 15px; margin-bottom: 18px; }
  .ft-actions { gap: 8px; }
  .site-footer .btn.has-brand { padding: 4px 14px 4px 4px; font-size: 14px; }
  nav.ft-col { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  nav.ft-col .ft-label { width: 100%; }
  .ft-meta { font-size: 12px; }
  .ft-meta { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .ft-meta span + span::before { content: " · "; white-space: pre; }
  .ft-art { height: 190px; }
}

/* Footer contact buttons: one hover for both (the Gmail look), and no "stuck" hover after a tap on phones */
.site-footer .ft-actions .btn.has-brand:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.site-footer .ft-actions .btn.has-brand:hover .brand { transform: none; }
@media (hover: hover) {
  .site-footer .ft-actions .btn.has-brand:hover { background: rgba(255,255,255,.1); border-color: color-mix(in srgb, var(--ft-word) 60%, transparent); }
  .site-footer .ft-actions .btn.has-brand:hover .brand { transform: scale(1.06); }
}
/* Both logos slide a little to the right on hover (no growing) */
@media (hover: hover) { .site-footer .ft-actions .btn.has-brand:hover .brand { transform: translateX(3px); } }
/* Fade-in on scroll: a much smaller rise, so spacing never looks uneven while things appear */
.reveal { transform: translateY(10px); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
/* Phones: "On this page" sits between the cover and Overview — the same section gap above Overview as below it */
@media (max-width: 999px) { .cs-aside { margin-bottom: var(--section-gap); } }
/* Text that ends a section adds no extra space: the section gap alone separates sections
   (on phones the sections sit in a grid, where margins don't merge, so the text's own margin was adding ~50px) */
.cs-main section > :is(.body-text, .lead-text, p):last-child,
.cs-main section > .wrap:last-child > :is(.body-text, .lead-text, p):last-child { margin-bottom: 0; }
/* About: the photo 50% bigger, and 15px further left */
@media (min-width: 1000px) {
  .about-intro { grid-template-columns: minmax(0, 1fr) calc(var(--aside-width) * 1.5); }
  .about-photo { translate: -15px 0; }
}

/* About: the photo floats gently, the fun tags bob one after the other */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-1.5deg); } 75% { transform: translateY(2px) rotate(1deg); } }
.about-photo { animation: float-y 6s ease-in-out infinite; }
.tags.fun span { display: inline-block; animation: bob 4.5s ease-in-out infinite; }
.tags.fun span:nth-child(2) { animation-delay: -1.1s; }
.tags.fun span:nth-child(3) { animation-delay: -2.2s; }
.tags.fun span:nth-child(4) { animation-delay: -3.3s; }
.tags.fun span:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .about-photo, .tags.fun span { animation: none; } }

/* About photo: a feathered halo of code behind it, plus a very soft neon glow; the whole thing floats */
.photo-wrap { position: relative; align-self: end; animation: float-y 6s ease-in-out infinite; }
.photo-wrap .about-photo { position: relative; z-index: 1; animation: none; translate: none;
  box-shadow: 0 0 60px color-mix(in srgb, var(--hero-neon) 22%, transparent); }
.photo-code { position: absolute; z-index: 0; left: -90px; top: -90px; pointer-events: none; }
@media (min-width: 1000px) { .photo-wrap { translate: -115px 0; } }
@media (max-width: 999px) { .photo-wrap { max-width: 360px; order: -1; } }
@media (prefers-reduced-motion: reduce) { .photo-wrap { animation: none; } }

/* The photo halo can extend past the screen edge; it must not create horizontal scroll */
html, body { overflow-x: clip; }

/* About: one subtitle under the title; the story starts at the top of the photo instead of sinking to its bottom */
.cs-hero .sub.about-sub { max-width: 62ch; text-wrap: balance; }
.about-intro { align-items: start; }
.about-story > .body-text:first-child { margin-top: 0; }

/* About: everything up to the tags fits above the fold on a laptop screen (wide screens only; narrower ones keep the photo in its own column) */
@media (min-width: 1280px) {
  .cs-hero.about-hero { padding-top: 60px; margin-bottom: 56px; }   /* the whole block sits 60px lower; inner gaps unchanged */
  .about-story .body-text { max-width: 620px; }   /* stops before the photo */
  .about-stats { margin-top: 32px; margin-bottom: 32px; }
  /* the photo rises beside the title: its bottom lines up with the tags, so the row stays as short as the text */
  .about-intro { position: relative; }
  /* never closer to the text than 64px (the text column is max 620px), otherwise in its usual spot */
  .photo-wrap { position: absolute; left: max(684px, calc(100% - 641px)); bottom: 87px; width: calc(var(--aside-width) * 1.44); translate: none; }
}

/* "Things I bring" lists: hovering an item (title or text) lights its square bullet in neon */
.pains-list .user h3::before { transition: background-color .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .pains-list .user:hover h3::before {
    background: var(--bullet-neon);
    box-shadow: 0 0 10px color-mix(in srgb, var(--hero-neon) 70%, transparent);
  }
}

/* About: the photo flips to the avatar, and each fun tag flips to its icon */
  /* photo flips to the avatar */
  .photo-wrap .about-photo.flip-card { overflow: visible; background: none; box-shadow: none; perspective: 1400px; cursor: pointer; outline: none; }
  .flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.34, 1.35, .5, 1); }
  .photo-wrap.is-flipped .flip-inner { transform: rotateY(180deg); }   /* a click (or tap) flips it; the next one flips it back */
  @media (hover: hover) {   /* hover only hints that it turns */
    .photo-wrap:not(.is-flipped):hover .flip-inner { transform: rotateY(12deg); }
    .photo-wrap.is-flipped:hover .flip-inner { transform: rotateY(168deg); }
  }
  .flip-card .face { position: absolute; inset: 0; border-radius: var(--frame-radius); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 0 60px color-mix(in srgb, var(--hero-neon) 22%, transparent); }
  .flip-card .face.back { transform: rotateY(180deg); display: grid; place-items: center;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--hero-neon) 45%, #fff) 0%, #f4f6ee 70%); }
  .flip-card .face.back img { width: 112%; height: auto; object-fit: contain; }
  .flip-card .face.back span { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 26px; }

  /* tags: same size as today; on hover each one flips and its icon is on the back */
  .tags.flip-tags span { background: none; border: 0; padding: 0; perspective: 500px; cursor: default; }
  .tags.flip-tags b { font-weight: inherit; }
  .tg-in { display: grid; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.34, 1.45, .5, 1); }
  .tags.flip-tags span:hover .tg-in { transform: rotateY(180deg); }
  .tg-f, .tg-b { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .tg-f { background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: var(--tag-radius); padding: 8px 14px; }
  .tg-b { transform: rotateY(180deg); display: grid; place-items: center; font-size: 52px; line-height: 1; }   /* bigger than the tag itself */
  @media (prefers-reduced-motion: reduce) { .flip-inner, .tg-in { transition: none; } }

/* One neon-green for bullets: the hover on "Things I bring" and the experience points share it.
   A touch deeper than the neon, so it holds on white */
:root { --bullet-neon: color-mix(in srgb, var(--hero-neon) 65%, var(--green-500)); }
.role-body li::before { background: var(--bullet-neon); }
@media (min-width: 1000px) and (max-width: 1279px) { .photo-wrap { translate: none; } }
/* the big icon on the back of a tag must not stretch the tag: it floats over it, centered */
.tg-in { position: relative; }
.tg-b { position: absolute; left: 50%; top: 50%; grid-area: auto; transform: translate(-50%, -50%) rotateY(180deg); }

/* ---------- Home header: colorful widgets, in the spirit of the agent-dashboard references ---------- */
.hero-pieces .piece { background: #f7f7f5; border: 0; border-radius: 22px; padding: 18px 20px;
  box-shadow: 0 20px 60px rgba(20,20,20,.10), 0 1px 0 rgba(255,255,255,.9) inset; }
.hero-pieces .piece small { font-family: var(--font-serif); font-size: 16px; letter-spacing: 0; text-transform: none; color: #333; margin-bottom: 6px; }
.p-big { display: block; font: 500 26px/1.1 var(--font-body); letter-spacing: -.03em; color: #111; }
/* what I do: colored chips */
.p-skills { width: 330px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.p-chips span { padding: 8px 12px; border-radius: 999px; background: #fff; color: var(--c); font: 500 14px/1 var(--font-body); }
/* reviews: warm orange stars */
.hero-pieces .stars button { color: #e4e4df; }
.hero-pieces .stars button.lit { color: #f97316; }
/* usability: blue ring + pink status pill */
.p-ring { width: 300px; display: grid; grid-template-columns: 86px 1fr; gap: 16px; align-items: center; }
.p-ring .ring { width: 86px; height: 86px; }
.p-ring .ring .fg { stroke: #3b74e8; }
.p-ring .ring .bg { stroke: #e9e9e6; }
.p-status { display: inline-block; padding: 5px 9px; border-radius: 8px; background: #fbe3f4; font: 15px/1 var(--font-serif); margin-bottom: 8px; }
.p-ring b { display: block; font: 500 18px/1.2 var(--font-body); letter-spacing: -.02em; color: #111; }
/* order up: colored progress bar */
.p-order { width: 250px; }
.p-seg { display: flex; gap: 5px; margin: 6px 0 14px; }
.p-seg i { height: 9px; border-radius: 6px; background: var(--c); }
.hero-pieces .order { background: #fff; }
.hero-pieces .order:hover { background: #fff; box-shadow: 0 0 0 1px #e6e6e2 inset; }
@media (max-width: 999px) {
  .hero-pieces { height: 330px; }
  .hero-pieces .piece { scale: .62; transform-origin: top left; }
  .hero-pieces .piece[style*="right"] { transform-origin: top right; }
  .hero-pieces .piece[style*="bottom"] { transform-origin: bottom left; }
  .hero-pieces .piece[style*="right"][style*="bottom"] { transform-origin: bottom right; }
}
@media (max-width: 760px) { .hero-pieces { height: 250px; } }

/* Home header, 5 widgets that overlap like a stack of real UI */
.hero-pieces { width: 640px; max-width: 100%; height: 490px; }
.p-insight { width: 320px; }
.p-spark { color: #8b5cf6; background: linear-gradient(135deg, #3b74e8, #ff7fd1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p-title { display: block; font: 500 20px/1.15 var(--font-body); letter-spacing: -.02em; color: #111; }
.p-chart { display: block; width: 100%; height: 72px; margin: 10px 0 12px; }
.p-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0s; }
.p-insight:hover .p-line { animation: p-draw 1.2s cubic-bezier(.3,.7,.3,1); }
@keyframes p-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.p-ask { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 14px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .18) inset; font: 14px/1 var(--font-body); color: #8a8a86; }
.p-ask span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; background: linear-gradient(135deg, #3b74e8, #ff7fd1); }
.hero-pieces .piece:hover { z-index: 7 !important; }   /* the card you point at comes to the front */
@media (max-width: 999px) {
  .hero-pieces { width: 640px; max-width: none; height: 490px; }
  .hero-pieces .piece { scale: 1; }
}
@media (max-width: 760px) {
  .hero-pieces { zoom: .53; height: 490px; }
}

/* Home header, round 2: the middle card lifts off the stack, two cards take a soft color, tags become color blocks */
.hero-pieces .p-insight { background: #fff; box-shadow: 0 34px 80px rgba(20,20,20,.20), 0 4px 14px rgba(20,20,20,.08); }
.hero-pieces .p-reviews { background: #e3e6f8; }   /* soft lavender */
.hero-pieces .p-order { background: #e8f3d2; }     /* soft green */
.p-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; border-radius: 10px;
  background: var(--bg); color: #1b1b1b; font: 400 14px/1 var(--font-body); }
.p-chips svg { flex: none; }

/* Home header, round 2: the middle card lifts off the stack, two cards take a soft color, tags become color blocks */
.hero-pieces .p-insight { background: #fff; box-shadow: 0 34px 80px rgba(20,20,20,.20), 0 4px 14px rgba(20,20,20,.08); }
.hero-pieces .p-reviews { background: #e3e6f8; }   /* soft lavender */
.hero-pieces .p-order { background: #e8f3d2; }     /* soft green */
.p-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; border-radius: 10px;
  background: var(--bg); color: #1b1b1b; font: 400 14px/1 var(--font-body); }
.p-chips svg { flex: none; }

/* Home header: the three project cards say which project they come from, with a small arrow to its case study */
.p-go { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: #555; background: rgba(255,255,255,.7); transition: background-color .2s, color .2s, transform .25s var(--btn-spring); }
.piece:hover .p-go { background: #111; color: var(--hero-neon); }
.p-go:hover { transform: translate(2px, -2px); }
.p-reviews small, .p-order small { padding-right: 34px; }
.p-ring { padding-right: 46px; width: 330px; }
.p-reviews { min-width: 262px; }
.p-ring .p-go { top: auto; bottom: 12px; }   /* its top corner sits under the AI card */
.hero-pieces .p-reviews .stars button:not(.lit) { color: #bcc2ea; }   /* muted periwinkle: reads on the lavender card without pulling focus */

/* Phones: a smaller glow and smaller widgets, so the header stays calm */
@media (max-width: 760px) {
  .hero { --hero-neon-size: 360px; --hero-neon-opacity: .6; }
  .hero-pieces { zoom: .44; margin-inline: auto; }
}

/* AI mark: a small living orb (blue to pink, like the send button) instead of the usual sparkle */
.p-orb { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; vertical-align: -1px;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), conic-gradient(from 200deg, #3b74e8, #8b5cf6, #ff7fd1, #3b74e8);
  box-shadow: 0 0 8px rgba(139, 92, 246, .45); animation: p-orb 3.2s ease-in-out infinite; }
@keyframes p-orb { 0%, 100% { scale: 1; filter: hue-rotate(0deg); } 50% { scale: 1.12; filter: hue-rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { .p-orb { animation: none; } }
/* AI mark, in the site's own language: a line-icon prompt (like the code characters around it) with a blinking caret */
.p-prompt { flex: none; vertical-align: -2px; }
.p-caret { animation: p-blink 1.1s steps(1) infinite; }
@keyframes p-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .p-caret { animation: none; } }

/* Prizma card: 25 simulated users as small rounded squares (the site's bullet shape) that light up as the test runs */
.p-ring { grid-template-columns: auto 1fr; }
.p-ring small { margin-bottom: 6px; }
.p-users { display: grid; grid-template-columns: repeat(5, 11px); gap: 4px; cursor: pointer; outline: none; }
.p-users i { width: 11px; height: 11px; border-radius: 3px; background: #e4e4df; transition: background-color .2s; }
.p-users i.on { background: #3b74e8; }
.p-score { display: block; margin-top: 8px; font: 13px/1 var(--font-body); color: #777; }
.p-score span { color: #111; font-weight: 500; }
.p-ring b { text-wrap: balance; }
/* each tag: light background, its icon in a deep tone of its own color (text stays near-black) */
.p-chips svg { color: var(--ic, currentColor); }
.p-ring b { white-space: nowrap; }
.p-ring { width: auto; min-width: 300px; }
/* the word takes its tag color too, a touch bolder so it holds */
.p-chips span { color: var(--ic, #1b1b1b); font-weight: 500; }
/* a card raised to the front by hover: the usual soft shadow, plus a small tight one toward the bottom right, where it meets the card below */
.hero-pieces .piece:hover { box-shadow: 0 20px 60px rgba(20,20,20,.10), 3px 4px 8px rgba(20,20,20,.06); }
/* reviews card: a fine white highlight on its left edge (like the one on top), so it separates from the card beside it */
.hero-pieces .p-reviews { box-shadow: 0 20px 60px rgba(20,20,20,.10), 0 1px 0 rgba(255,255,255,.9) inset, 1px 0 0 rgba(255,255,255,.9) inset; }
.hero-pieces .p-reviews:hover { box-shadow: 0 20px 60px rgba(20,20,20,.10), 3px 4px 8px rgba(20,20,20,.06), 0 1px 0 rgba(255,255,255,.9) inset, 1px 0 0 rgba(255,255,255,.9) inset; }

/* fun tags: a clear gap between the icon and the word */
.tags.fun .fun-ic { font-style: normal; margin-right: 7px; }
.tags.fun { gap: 10px; }   /* 2px more between the fun tags (base is 8px) */
/* stats: columns as wide as their content, with the same space between each pair */
.about-stats { grid-template-columns: repeat(3, auto); justify-content: space-between; }

/* ---------- Home header layout (set by a small script): the widgets never cover the text ---------- */
.hero-pieces { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-46%); width: 640px; max-width: none; height: 490px; margin: 0; zoom: var(--pz, 1); }
.hero-pieces .piece { scale: 1; }
.hero.is-stacked { justify-content: flex-start; min-height: auto; padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-top) + var(--nav-height) + 48px); padding-bottom: 56px; }
.hero.is-stacked .hero-pieces { position: relative; right: auto; top: auto; transform: none; margin: 44px auto 0; align-self: center; }
/* the logo only shows a focus ring for keyboard users */
.nav-logo:focus:not(:focus-visible) { outline: none; }
/* About on phones: the three stats share the width and their labels may wrap, so nothing runs off the screen */
.about-story { min-width: 0; }
@media (max-width: 600px) {
  .about-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; column-gap: 16px; }
  .about-stats dt { font-size: 30px; }
  .about-stats dd { white-space: normal; }
}
/* Menu: switch to the compact menu below 900px, before the links run out of room */
@media (max-width: 900px) {
  .nav-links, .nav-actions .nav-secondary { display: none; }
  .nav-toggle { display: block; }
  .nav-bar { gap: 8px; }
}
@media (min-width: 901px) { .nav-panel { display: none !important; } }
@media (min-width: 761px) and (max-width: 900px) { .nav-panel:not([hidden]) { display: grid !important; } }
.hero-sub { text-wrap: pretty; max-width: 50ch; }   /* no single word left alone on the last line */
/* Home header beside-layout: text and cards are centered in the space below the menu, not the whole screen, so they read as centered */
.hero:not(.is-stacked) { padding-top: calc(var(--nav-top) + var(--nav-height)); }
.hero:not(.is-stacked) .hero-pieces { top: calc(50% + (var(--nav-top) + var(--nav-height)) / 2); transform: translateY(-50%); }

/* any enlargeable image shows the zoom cursor */
.can-zoom, .can-zoom img { cursor: zoom-in; }

/* TRIAL: every image label sits above its image (delete these 2 lines to go back) */
.media { display: flex; flex-direction: column; }
.media figcaption { order: -1; margin: 0 0 14px; }
.gallery-cap { order: -1; margin: 0 auto 14px; }   /* trial: gallery labels above too */
/* labels centered in the gray band above the image: same space above and below (frame padding 10 + 8 = 18) */
.media figcaption, .gallery-cap { margin: 8px auto 18px; }
/* Prizma: the users not yet tested in a light cyan, a step lighter than the "AI & code" tag (#cdf3f8) */
.p-users i:not(.on) { background: #c7e7ec; }   /* the "AI & code" cyan with a touch of gray, so they read on the white card */

/* Home header: subtitle, spacing and button shrink together with the title (--hk is set by the header script) */
@media (min-width: 701px) {
  .hero-stage .hero-sub { font-size: max(16px, calc(21px * var(--hk, 1))); margin: calc(28px * var(--hk, 1)) 0 calc(32px * var(--hk, 1)); }
  .hero-stage .hero-cta { zoom: max(0.82, var(--hk, 1)); }
}

/* ---------- Preloader (js/preloader.js): gray-white screen, "Ot." and a neon line that fills ---------- */
html.is-preloading::before, html.is-preloading::after { position: fixed; z-index: 9999; pointer-events: none; transition: opacity .5s ease; }
html.is-preloading::before {
  content: ""; inset: 0;
  background:
    linear-gradient(var(--hero-neon), var(--hero-neon)) center calc(50% + 46px) / 0 3px no-repeat,
    linear-gradient(180deg, #f7f7f5 0%, #ececea 100%);
  animation: pl-line 2.8s cubic-bezier(.6, 0, .2, 1) forwards;   /* the line fills over the ~3s the preloader shows */
}
html.is-preloading::after {
  content: "Ot."; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 600 56px/1 var(--font-body, "Archivo", sans-serif); letter-spacing: -0.04em; color: #121212;
  animation: pl-in .5s ease both;
}
html.preload-out::before, html.preload-out::after { opacity: 0; }
@keyframes pl-line { to { background-size: 72px 3px, auto; } }
@keyframes pl-in { from { opacity: 0; transform: translate(-50%, -40%); } }
@media (prefers-reduced-motion: reduce) { html.is-preloading::before, html.is-preloading::after { animation: none; } }

/* ---------- About: recommendations, a horizontal row of quote cards (the third one runs off the edge, inviting a scroll) ---------- */
.recs { display: var(--recs-display, none); margin-top: var(--section-gap); }
.recs-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-top: 40px; padding: 4px var(--gutter) 8px; }
.recs-track::-webkit-scrollbar { display: none; }
.rec-card { flex: 0 0 min(560px, 78vw); scroll-snap-align: start; margin: 0; background: #f6f6f3; border-radius: 22px; padding: 32px 36px;
  display: flex; flex-direction: column; gap: 18px; }
.rec-quote { font-family: var(--font-serif); font-size: 44px; line-height: .6; color: var(--color-text); }
.rec-card blockquote { margin: 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); flex: 1; }
.rec-card figcaption { display: flex; align-items: center; gap: 12px; }
.rec-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e2e2dd; flex: none; }
.rec-card b { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 18px; }
.rec-card small { display: block; font-size: 14px; color: var(--color-text-muted); }

/* Menu: once it turns to glass on scroll, the bar grows 20px wider on each side; the logo and links stay exactly where they were */
@media (min-width: 761px) {
  .nav-bar { transition: background-color .35s, border-color .35s, box-shadow .35s, margin .35s, padding .35s; }
  .site-header:not(.is-top) .nav-bar {
    margin-inline: -20px;
    padding-left: calc(var(--nav-padding-x) + 20px);
    padding-right: calc(var(--nav-padding-x) - 6px + 20px);
  }
}

/* Home header: every card floats gently, each on its own rhythm (translate, so the mouse parallax on transform stays) */
@keyframes piece-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hero-pieces .piece { animation: piece-float 6s ease-in-out infinite; }
.hero-pieces .p-skills  { animation-duration: 6.4s; animation-delay: -1.2s; }
.hero-pieces .p-reviews { animation-duration: 5.6s; animation-delay: -3.1s; }
.hero-pieces .p-insight { animation-duration: 7s;   animation-delay: -0.4s; }
.hero-pieces .p-ring    { animation-duration: 5.8s; animation-delay: -2.4s; }
.hero-pieces .p-order   { animation-duration: 6.8s; animation-delay: -4.2s; }
@media (prefers-reduced-motion: reduce) { .hero-pieces .piece { animation: none; } }