/* ==========================================================================
   JM · Identity layer — v2.1.0 "Canvas"
   Loaded after styles.css. Carries the personality of the v1 Figma portfolio
   (ink outlines, offset shadows, candy stickies, hand notes, the Jess
   character) into the v2 system, light mode first. v2.1 refines it: fine
   1px lines, a book serif for the voice, no olive.
   ========================================================================== */

/* ---------- Type ---------- */
body { font-family: var(--font-sans); font-weight: 420; }
strong, b { font-weight: 600; }
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.04;
}
.display em,
.hl {
  font-style: italic;
  color: inherit;
  background: linear-gradient(transparent 62%, var(--color-accent) 62%, var(--color-accent) 90%, transparent 90%);
  padding: 0 0.06em;
  margin: 0 -0.03em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl { font-style: normal; }
.hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------- Custom cursor: the real pointer, restyled (no fake follower) ---------- */
@media (pointer: fine) {
  html {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 2.5 L20 10.2 L12.6 12.4 L9.4 19.8 Z' fill='%23C9B8FF' stroke='%2316150F' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
  }
  a, button, [role="button"], label, summary, .pin {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 2.5 L20 10.2 L12.6 12.4 L9.4 19.8 Z' fill='%23FFD95A' stroke='%2316150F' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer;
  }
  input, textarea, [contenteditable="true"] { cursor: text; }
}

/* ---------- Scrollbar: the cursor's sibling ----------
   A paper track with a dashed guide line (a ruler in a design tool) and a slim
   lilac thumb outlined in ink, like the pointer. It turns yellow on hover and
   drag, the same way the pointer does over something you can use.
   Chrome ignores the ::-webkit rules once scrollbar-color is set, so the
   standard properties only go to browsers without them (Firefox). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background:
    linear-gradient(to bottom, var(--color-border) 50%, transparent 0) center / 1px 6px repeat-y,
    var(--color-bg);
}
::-webkit-scrollbar-track:horizontal {
  background:
    linear-gradient(to right, var(--color-border) 50%, transparent 0) center / 6px 1px repeat-x,
    var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--sticky-lilac) padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ink-900);
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--sticky-yellow); }
::-webkit-scrollbar-corner { background: var(--color-bg); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--sticky-lilac) var(--color-bg); }
}

/* ---------- Toolbar + wordmark (from the v1 header) ---------- */
.toolbar { border-bottom: 1px solid var(--color-border-strong); background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.005em; color: var(--color-text); }
.wordmark b { color: var(--color-accent-text); font-weight: 500; font-style: italic; }
.brand__mark { width: 22px; height: 22px; border: 0; border-radius: 0; background: none; display: inline-grid; place-items: center; }
.brand__mark::after { display: none; }
.brand__mark svg { width: 22px; height: 22px; fill: var(--sticky-lilac); stroke: var(--ink-900); stroke-width: 1.1; stroke-linejoin: round; transition: transform var(--dur-4) var(--ease-emphasized); }
.brand:hover .brand__mark svg { transform: rotate(90deg) scale(1.08); }
.toolbar__nav a { font-weight: 500; }
.toolbar__nav a[aria-current="true"]::after { background: var(--color-accent-text); height: 2px; border-radius: 2px; }
.tool-btn { border-radius: var(--radius-2); border-color: var(--color-border-strong); color: var(--color-text); }
.tool-btn[aria-pressed="true"] { background: var(--sticky-yellow); color: var(--ink-900); border-color: var(--ink-900); box-shadow: 1.5px 1.5px 0 var(--ink-900); }
.status-pill { background: var(--sticky-mint); color: var(--ink-900); border: 1px solid var(--ink-900); }
.status-pill::before { background: var(--success); }

/* "ready for dev": a quiet easter egg, not a control */
.status-egg {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--color-text-subtle);
  white-space: nowrap; cursor: default; user-select: none;
}
.status-egg::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--success); animation: pulse 2.4s var(--ease-standard) infinite; }
/* in the toolbar only the dot shows; the words fade in when you find it */
.toolbar .status-egg { color: transparent; transition: color var(--dur-3) var(--ease-standard); }
.toolbar .status-egg:hover, .brand:hover + .status-egg { color: var(--color-text-subtle); }
@media (max-width: 1180px) { .toolbar .status-egg { display: none; } }

/* the grid icon: designer view easter egg */
.grid-egg {
  width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-2); background: transparent; color: var(--color-text-muted);
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-emphasized);
}
.grid-egg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.grid-egg:hover { color: var(--color-text); border-color: var(--color-border-strong); transform: rotate(-6deg); }
.grid-egg[aria-pressed="true"] { background: var(--sticky-lilac); color: var(--ink-900); border-color: var(--ink-900); box-shadow: 1.5px 1.5px 0 var(--ink-900); transform: none; }

/* inspector overlay (designer view) */
.inspect-box, .inspect-tag { position: fixed; left: 0; top: 0; z-index: calc(var(--z-overlay) + 2); pointer-events: none; opacity: 0; transition: opacity var(--dur-1); }
.inspect-box { outline: 1px solid var(--violet-600); background: rgba(100, 69, 214, 0.06); }
.inspect-tag { background: var(--violet-600); color: #fff; font: 400 10px/1 var(--font-mono); letter-spacing: 0.02em; padding: 5px 7px; border-radius: 3px; white-space: nowrap; }
html.is-inspecting[data-grid="on"] .inspect-box, html.is-inspecting[data-grid="on"] .inspect-tag { opacity: 1; }
.inspect-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: calc(var(--z-overlay) + 3); transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--ink-900); color: var(--paper-50); font: 400 12px/1.4 var(--font-mono); padding: 10px 14px; border-radius: var(--radius-2);
  box-shadow: 2px 2px 0 var(--sticky-lilac); transition: opacity var(--dur-3) var(--ease-standard), transform var(--dur-3) var(--ease-emphasized);
}
.inspect-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Buttons: fine outline + offset shadow ---------- */
.btn {
  border-radius: var(--button-radius);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-hard);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: transform var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard), background var(--dur-2);
  --_bg: var(--color-bg-elevated); --_fg: var(--color-text); --_bd: var(--color-border-strong);
}
.btn::after { display: none; }
.btn:hover { transform: translate(-1.5px, -1.5px); box-shadow: 3.5px 3.5px 0 var(--color-border-strong); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-border-strong); }
.btn--primary { --_bg: var(--color-brand); --_fg: var(--color-text-on-brand); --_bd: var(--color-border-strong); box-shadow: 2px 2px 0 var(--sticky-lilac), 2px 2px 0 1px var(--color-border-strong); }
.btn--primary:hover { --_bg: var(--color-brand-hover); box-shadow: 3.5px 3.5px 0 var(--sticky-lilac), 3.5px 3.5px 0 1px var(--color-border-strong); }
.btn--lilac { --_bg: var(--sticky-lilac); --_fg: var(--ink-900); }
.btn--ghost { box-shadow: none; border-color: transparent; }

/* ---------- Tags: candy pills ---------- */
.tag { border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); color: var(--color-text); background: var(--color-bg-elevated); font-weight: 400; padding: 3px 10px; }
.tag--brand  { background: var(--sticky-lilac); color: var(--ink-900); border-color: var(--ink-900); }
.tag--lilac  { background: var(--sticky-lilac); color: var(--ink-900); border-color: var(--ink-900); }
.tag--yellow { background: var(--sticky-yellow); color: var(--ink-900); border-color: var(--ink-900); }
.tag--mint   { background: var(--sticky-mint); color: var(--ink-900); border-color: var(--ink-900); }
.tag--pink   { background: var(--sticky-pink); color: var(--ink-900); border-color: var(--ink-900); }
.tag--coral  { background: var(--sticky-coral); color: var(--ink-900); border-color: var(--ink-900); }
.tag--proto  { background: var(--color-accent-subtle); color: var(--color-accent-text); border-color: currentColor; }

/* ---------- FigJam section tabs ---------- */
.section + .section { border-top: 0; }
.section__num {
  font-family: var(--font-mono); font-weight: 400; color: var(--ink-900);
  background: var(--sticky-yellow); border: 1px solid var(--ink-900); border-radius: var(--radius-1);
  box-shadow: 1.5px 1.5px 0 var(--ink-900);
}
.section:nth-of-type(3n+1) .section__num { background: var(--sticky-lilac); }
.section:nth-of-type(3n+2) .section__num { background: var(--sticky-mint); }
.section__title { max-width: 20ch; }

/* ---------- Frames & cards ---------- */
.frame { border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); }
.frame--dashed { border-style: dashed; border-color: var(--color-border-strong); }
.frame__label { font-family: var(--font-mono); }
.case__frame { overflow: hidden; box-shadow: var(--shadow-hard-lg); background: var(--color-bg-elevated); }
.case:hover .case__frame { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-border-strong); border-color: var(--color-border-strong); }
.case__thumb { border-bottom: 1px solid var(--color-border-strong); background-color: var(--color-bg-sunken); background-image: radial-gradient(var(--grid-dot) 1.1px, transparent 1.3px); background-size: 16px 16px; }
.case__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.case .frame__label { top: auto; bottom: calc(100% + 6px); }
.case { padding-top: 24px; }
.case__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); font-size: var(--fs-14); font-weight: 500; color: var(--color-text); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.case:hover .case__cta .arrow { transform: translateX(3px); }
.case__cta .arrow { transition: transform var(--dur-2) var(--ease-standard); }

/* Crypex thumbnail: the brand's plane of light with the pay flow */
.crypex { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Pins & stickies ---------- */
.pin { box-shadow: 0 0 0 1.5px var(--color-bg-elevated), 1.5px 1.5px 0 1.5px var(--ink-900); }
.pin[data-author="client"] { --pin-bg: var(--sticky-yellow); --pin-fg: var(--ink-900); }
.pin__bubble { border: 1px solid var(--color-border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-hard); }
.sticky {
  background: var(--sticky-yellow); color: var(--ink-900);
  font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.2;
  box-shadow: 0 14px 20px -12px rgba(22, 21, 15, 0.4);
  border-radius: 2px; padding: var(--sp-4);
}
.sticky b { font-family: var(--font-mono); font-size: 10px; }

/* ---------- Marquee: a serif ribbon with sparkle separators ---------- */
.marquee { background: var(--color-bg-elevated); border-block: 1px solid var(--color-border-strong); padding-block: var(--sp-4); }
.marquee__track { gap: var(--sp-6); animation-duration: 52s; }
.marquee__track span {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em; line-height: 1.1; text-transform: none;
  color: var(--color-text); gap: var(--sp-6);
}
.marquee__track span:nth-child(even) { font-style: italic; }
.marquee__track span::after {
  content: ""; width: 18px; height: 18px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--sticky-lilac);
  clip-path: path("M9 0 C10 6.5 11.5 8 18 9 C11.5 10 10 11.5 9 18 C8 11.5 6.5 10 0 9 C6.5 8 8 6.5 9 0 Z");
}
.marquee__track span:nth-child(3n+2)::after { background: var(--sticky-mint); }
.marquee__track span:nth-child(3n+3)::after { background: var(--sticky-yellow); }

/* ---------- Services ---------- */
.services { border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-hard-lg); }
.service { border-right: 1px solid var(--color-border-strong); }
.service h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); letter-spacing: -0.01em; }
.service .idx { display: inline-flex; align-items: center; gap: var(--sp-2); }
.service .idx::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--ink-900); border-radius: 2px; background: var(--sticky-lilac); }
.service:nth-child(2) .idx::before { background: var(--sticky-mint); }
.service:nth-child(3) .idx::before { background: var(--sticky-yellow); }
.service:nth-child(4) .idx::before { background: var(--sticky-coral); }
.service__out { margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--paper-300); display: flex; flex-direction: column; gap: var(--sp-2); }
.service .service__label { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); margin: 0; }
.service__out ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.service__out li { display: flex; gap: var(--sp-2); font-size: var(--fs-14); line-height: 1.5; color: var(--color-text); }
.service__out li::before { content: "→"; color: var(--color-accent-text); flex: none; }
/* side by side, the "You get" rules line up: every list reserves room for three items */
@media (min-width: 961px) { .service__out ul { min-height: calc(3 * 1.5 * var(--fs-14) + 2 * var(--sp-1)); } }
.service::after { background: var(--sticky-lilac); height: 4px; }
.service:nth-child(2)::after { background: var(--sticky-mint); }
.service:nth-child(3)::after { background: var(--sticky-yellow); }
.service:nth-child(4)::after { background: var(--sticky-coral); }
@media (max-width: 960px) { .service:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-strong); } }
@media (max-width: 520px) { .service { border-bottom: 1px solid var(--color-border-strong); } }

/* ---------- About: breathing room, one idea per block ---------- */
.about { display: block; }
.about__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--sp-7), 7vw, var(--sp-10)); align-items: center; }
.about__portrait { position: relative; aspect-ratio: 643 / 876; max-width: 420px; width: 100%; margin: 12% auto 0; }
/* organic ink blob with dots + grain; the figure overflows it so it belongs to the page, not to a box */
.jess-blob, .jess-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.jess-blob { overflow: visible; }
.about__portrait .jess-art { inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(22, 21, 15, 0.18)); }
.about__portrait .jess-label { inset: auto; left: 42.8%; top: -10.7%; width: 37%; height: auto; object-fit: contain; filter: none; pointer-events: none; }
.about__hello { font-family: var(--font-hand); font-size: 1.5rem; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.about__statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 22ch; }
.about__statement em { font-style: italic; }
.about__intro-text { margin-top: var(--sp-5); max-width: 48ch; color: var(--color-text-muted); font-size: var(--fs-18); line-height: 1.6; }
.about__intro .facts { margin-top: var(--sp-6); max-width: 520px; }

.about__quote {
  margin: clamp(var(--sp-8), 10vw, var(--sp-10)) auto; text-align: center; max-width: 30ch;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -0.015em;
}
.about__quote .hand { display: block; font-size: 1.4rem; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.about__quote em { font-style: italic; background: linear-gradient(transparent 62%, var(--sticky-mint) 62%, var(--sticky-mint) 90%, transparent 90%); }

.about__kicker { position: absolute; top: -13px; left: var(--sp-5); }

.about__cv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); margin-top: clamp(var(--sp-8), 8vw, var(--sp-9)); padding-top: var(--sp-6); border-top: 1px solid var(--color-border); }
.about__cv h3 { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--sp-4); }
.about__cv > div > p { color: var(--color-text-muted); max-width: 48ch; }
.fact { border-top-width: 1px; }
.timeline li::before { border-width: 1px; }
.timeline li:first-child::before { background: var(--sticky-lilac); border-color: var(--ink-900); }
@media (max-width: 860px) {
  .about__intro { grid-template-columns: 1fr; gap: var(--sp-7); }
  .about__portrait { max-width: 340px; }
  .about__cv { grid-template-columns: 1fr; }
}

/* ---------- Sparkles (the 4-point stars of v1) ---------- */
.sparkle { position: absolute; width: 30px; height: 30px; pointer-events: none; z-index: 2; }
.sparkle path { stroke: var(--ink-900); stroke-width: 1.2; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .sparkle { animation: twinkle 3.2s var(--ease-standard) infinite; }
  .sparkle:nth-of-type(2) { animation-delay: 0.8s; }
  .sparkle:nth-of-type(3) { animation-delay: 1.6s; }
}
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.82) rotate(12deg); } }

/* ---------- Contact: Shall we? ---------- */
.shall { position: relative; text-align: center; padding: var(--sp-9) var(--sp-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); background: var(--color-bg-elevated); box-shadow: var(--shadow-hard-lg); overflow: hidden; }
.shall__title {
  font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: -0.03em;
  font-size: clamp(3.4rem, 11vw, 8.5rem); margin-bottom: var(--sp-5);
}
.shall__title .b { font-style: italic; background: linear-gradient(transparent 60%, var(--sticky-lilac) 60%, var(--sticky-lilac) 88%, transparent 88%); padding: 0 0.06em; }
.shall p { max-width: 62ch; margin: 0 auto var(--sp-6); font-size: var(--fs-18); color: var(--color-text-muted); text-wrap: balance; }
.shall .contact__links { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.shall .contact__handles { margin-top: var(--sp-6); display: flex; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-subtle); }
.shall .contact__handles a { text-decoration: none; border-bottom: 1px dashed currentColor; }
.shall .sparkle { width: 38px; height: 38px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--color-border-strong); }

/* ---------- Canvas background: FigJam dot grid ---------- */
.canvas-bg { background-size: 22px 22px; mask-image: none; opacity: 1; }

/* ---------- Toolbar on small screens: one line, essentials only ---------- */
.wordmark { white-space: nowrap; }
@media (max-width: 640px) {
  .wordmark { font-size: 1rem; }
  .toolbar__tools [data-action="grid"], .toolbar__tools [data-action="annotations"] { display: none; }
  .tool-btn kbd { display: none; }
}

/* ==========================================================================
   v2.2 · Type scale & rhythm
   Smaller, slightly heavier type and one spacing rhythm (8pt: 16 / 24 / 32 /
   48 / 96) so every section breathes. Body 16/1.65 at 420, display at 500.
   ========================================================================== */
.h-xl { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.h-lg { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; }
.h-md { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
.lead { font-size: var(--fs-18); line-height: 1.6; }
p { line-height: 1.65; }

.section { padding-block: clamp(var(--sp-8), 9vw, 7.5rem); }
.section__head { margin-bottom: var(--sp-7); align-items: center; }
.section__num { font-size: 11px; padding: 3px 7px; align-self: center; }

.marquee { padding-block: var(--sp-5); }
.marquee__track span { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 500; }

.case__title { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; }
.case__desc { font-size: var(--fs-16); line-height: 1.6; color: var(--color-text-muted); }
.case__body { gap: var(--sp-5); padding: var(--sp-6); }
.case .tags { margin-top: var(--sp-4); }

.service { padding: var(--sp-6); gap: var(--sp-3); }
.service h3 { font-size: 1.3rem; line-height: 1.25; }
.service p { font-size: var(--fs-15, 0.9375rem); line-height: 1.6; color: var(--color-text-muted); }

.about__hello { font-size: 1.25rem; margin-bottom: var(--sp-4); }
.about__statement { font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.3; max-width: 26ch; }
.about__intro-text { margin-top: var(--sp-6); font-size: var(--fs-16); }
.about__quote { font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; }
.about__quote .hand { font-size: 1.15rem; margin-bottom: var(--sp-4); }
.about__cv { gap: var(--sp-8); }

.shall { padding: clamp(var(--sp-8), 9vw, var(--sp-9)) var(--sp-5); }
.shall__title { font-weight: 500; font-size: clamp(2.8rem, 7vw, 5.5rem); margin-bottom: var(--sp-6); }
.shall p { font-size: var(--fs-16); margin-bottom: var(--sp-6); }

.btn { height: 44px; padding-inline: var(--sp-5); font-size: var(--fs-14); }
.btn--lg { height: 48px; padding-inline: var(--sp-6); font-size: 0.9375rem; }
.tag { font-size: 10.5px; }

/* ---------- Case 00: the portfolio shown as its own system sheet ----------
   Real parts of the site (type, colour, components) instead of a generic
   wireframe. Decorative (aria-hidden); the card's text carries the meaning. */
.case--system .case__thumb { aspect-ratio: auto; padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.6vw, 56px); }
.sys { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); }
.sys__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sys__col + .sys__col { border-left: 1px dashed var(--paper-300); padding-left: clamp(24px, 3vw, 44px); }
.sys__label { font: 400 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); }
.sys__aa { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.6rem, 6.4vw, 6rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink-900); }
.sys__aa i { font-style: italic; background: linear-gradient(transparent 62%, var(--sticky-lilac) 62%, var(--sticky-lilac) 90%, transparent 90%); padding: 0 0.04em; }
.sys__fonts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sys__fonts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid var(--paper-300); }
.sys__f { font-size: 14px; color: var(--ink-900); white-space: nowrap; }
.sys__f--display { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.sys__f--mono { font-family: var(--font-mono); font-size: 12px; }
.sys__f--hand { font-family: var(--font-hand); font-size: 17px; line-height: 1; }
.sys__fonts em { font-style: normal; font: 400 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.sys__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sys__swatches span {
  height: clamp(58px, 6vw, 78px); box-sizing: border-box; padding: 8px 9px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  background: var(--c); color: var(--ink-900); border: 1px solid var(--ink-900); border-radius: var(--radius-2);
  box-shadow: 1.5px 1.5px 0 var(--ink-900);
  font: 400 9.5px/1.25 var(--font-mono); letter-spacing: 0.02em;
}
.sys__swatches span b { font: 500 12px/1.2 var(--font-sans); letter-spacing: 0; }
.sys__swatches .is-dark { color: var(--paper-50); }
.sys__note { font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--color-text-subtle); }
.sys__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sys__btn {
  height: 38px; padding: 0 16px; display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--paper-0); color: var(--ink-900); border: 1px solid var(--ink-900); border-radius: var(--radius-2);
  font-size: 13px; font-weight: 500; box-shadow: 2px 2px 0 var(--ink-900);
}
.sys__btn--primary { background: var(--ink-900); color: var(--paper-0); box-shadow: 2px 2px 0 var(--sticky-lilac), 2px 2px 0 1px var(--ink-900); }
.sys__sticky {
  align-self: flex-start; margin-top: 4px; padding: 12px 16px; transform: rotate(-2deg);
  background: var(--sticky-yellow); color: var(--ink-900); font-family: var(--font-hand); font-size: 1.05rem; line-height: 1.2;
  box-shadow: 0 12px 18px -12px rgba(22, 21, 15, 0.45);
}
.case--system:hover .sys__sticky { transform: rotate(1deg) translateY(-2px); }
.sys__sticky { transition: transform var(--dur-3) var(--ease-standard); }
@media (max-width: 1100px) {
  .sys { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .sys__ui { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; border-left: 0 !important; padding-left: 0 !important; border-top: 1px dashed var(--paper-300); padding-top: 20px; }
  .sys__ui .sys__label { width: 100%; }
  .sys__ui .sys__sticky { margin-top: 0; }
}
@media (max-width: 640px) {
  .sys { grid-template-columns: 1fr; }
  .sys__colour { border-left: 0 !important; padding-left: 0 !important; border-top: 1px dashed var(--paper-300); padding-top: 20px; }
  .sys__aa { font-size: 3.4rem; }
  .sys__swatches { gap: 8px; }
  .sys__swatches span { height: 54px; padding: 6px; }
  .sys__swatches span b { font-size: 11px; }
}

/* the story's progress bar fades out at the end so it doesn't double the marquee's top line */
.story__progress { transition: opacity var(--dur-3) var(--ease-standard); }
.story__progress.is-done { opacity: 0; }

/* ---------- Language switch (EN / PT): quiet, text-only ---------- */
html.i18n-pending body { visibility: hidden; }
.lang-switch { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font: 400 11px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--color-text-subtle); }
.lang-switch a { color: inherit; text-decoration: none; padding: 6px 3px; border-bottom: 1px solid transparent; transition: color var(--dur-2); }
.lang-switch a:hover { color: var(--color-text); }
.lang-switch a[aria-current="true"] { color: var(--color-text); border-bottom-color: var(--color-text); }
.lang-switch span { opacity: 0.5; }

/* ==========================================================================
   v2.4 · Heuristic pass
   Real product on the cards, cards that line up, a pause for everything that
   loops (WCAG 2.2.2), bigger EN / PT targets, "how we start" and an honest
   availability line in contact.
   ========================================================================== */

/* ---------- Language switch: 24 × 24 minimum targets (WCAG 2.5.8) ---------- */
.lang-switch { gap: 0; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px; padding: 4px; border-bottom: 0; border-radius: var(--radius-1);
  text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.lang-switch a[aria-current="true"] { text-decoration-line: underline; }
.lang-switch a:focus-visible { outline: 2px solid var(--color-text); outline-offset: 1px; }
@media (pointer: coarse) { .lang-switch a { min-width: 40px; min-height: 40px; } }

/* ---------- Work cards: same height, CTA on one line ---------- */
.case { display: flex; flex-direction: column; }
.case__frame { flex: 1; display: flex; flex-direction: column; }
.case__body { flex: 1; }
.case__body > div:first-child { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.case .tags { margin-bottom: var(--sp-5); }
.case__cta { margin-top: auto; }
.case__meta span + span::before { content: none; }

/* ---------- Services: how we start ---------- */
/* title on top, three steps in a row joined by a dashed line (a column with the line running down on small screens) */
.start { margin-top: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-6); }
.start__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-32); letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.start__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start__steps li { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding-right: var(--sp-7); }
.start__steps li:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 48px; right: 0; border-top: 1px dashed var(--ink-900); }
.start__steps b { display: block; font-weight: 600; font-size: var(--fs-18); line-height: 1.4; }
.start__steps p { margin: 6px 0 0; font-size: var(--fs-15, 0.9375rem); line-height: 1.6; color: var(--color-text-muted); max-width: 34ch; }
.start__n {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  font: 400 13px/1 var(--font-mono); color: var(--ink-900);
  background: var(--sticky-lilac); border: 1px solid var(--ink-900); border-radius: 50%; box-shadow: 1.5px 1.5px 0 var(--ink-900);
}
.start__steps li:nth-child(2) .start__n { background: var(--sticky-mint); }
.start__steps li:nth-child(3) .start__n { background: var(--sticky-yellow); }
@media (max-width: 860px) {
  .start { margin-top: var(--sp-8); gap: var(--sp-5); }
  .start__title { font-size: var(--fs-24); }
  .start__steps { grid-template-columns: 1fr; }
  .start__steps li { flex-direction: row; gap: var(--sp-4); padding: 0 0 var(--sp-6); }
  .start__steps li:last-child { padding-bottom: 0; }
  .start__steps li:not(:last-child)::after { top: 42px; bottom: 4px; left: 18px; right: auto; border-top: 0; border-left: 1px dashed var(--ink-900); }
  .start__steps li > div { padding-top: 6px; }
  .start__steps p { max-width: none; }
}

/* ---------- Contact: availability ---------- */
.shall p.availability {
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  margin: calc(-1 * var(--sp-2)) auto var(--sp-6); padding: 6px 14px;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.04em; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  text-wrap: pretty;
}
.availability i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1F9D6B; }
.availability i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #1F9D6B; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .availability i::after { animation: ping 2.4s var(--ease-standard) infinite; }
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- About · one story: statement → the rule → two paths → facts ----------
   The two paths hang from the bridge line like a FigJam connector: thin ink
   elbows land on numbered nodes; no card fill, so they sit in the page. */
.about__quote { margin-bottom: var(--sp-5); }
.about__bridge { text-align: center; margin: 0 auto; font-size: var(--fs-16); color: var(--color-text-muted); }
.about__paths {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6%;
  padding-top: calc(64px + var(--sp-3)); margin-top: var(--sp-3);
}
.about__fork { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 64px; overflow: visible; }
.about__fork path {
  fill: none; stroke: var(--ink-900); stroke-opacity: 0.45; stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
@supports selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .about__fork path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-standard); }
    html.js .about__paths:has(.about__path.is-in) .about__fork path { stroke-dashoffset: 0; }
  }
}
.about__path { position: relative; border-top: 1px dashed rgba(22, 21, 15, 0.3); padding-top: var(--sp-7); }
.about__node {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  font: 400 11px/1 var(--font-mono); color: var(--ink-900);
  background: var(--color-bg); border: 1px solid var(--ink-900); box-shadow: 1.5px 1.5px 0 var(--ink-900);
  transition: background-color var(--dur-3) var(--ease-standard), transform var(--dur-3) var(--ease-bounce);
}
.about__path--eye { --path-tint: var(--sticky-lilac); --path-em: var(--violet-600); }
.about__path--mind { --path-tint: var(--sticky-mint); --path-em: var(--teal-700); }
.about__path:hover .about__node { background: var(--path-tint); transform: translate(-50%, -50%) scale(1.08); }
.about__kicker {
  position: static; margin: 0 0 var(--sp-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle);
}
.about__path h3 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.12;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: 0 0 var(--sp-4);
}
/* the key word gets a highlighter pass on hover, in the path's colour */
.about__path h3 em {
  font-style: italic; color: var(--path-em); padding: 0 0.06em;
  background: linear-gradient(transparent 62%, var(--path-tint) 62%, var(--path-tint) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size var(--dur-4) var(--ease-emphasized);
}
.about__path:hover h3 em, .about__path:focus-within h3 em { background-size: 100% 100%; }
.about__path > p:not([class]) { color: var(--color-text); font-size: var(--fs-16); line-height: 1.7; max-width: 54ch; margin: 0; }
.about__practice {
  margin: var(--sp-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-text-muted);
}
.about__practice span { color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-right: 4px; }
.about__practice i {
  display: inline-block; width: 9px; height: 9px; background: var(--path-tint);
  clip-path: path("M4.5 0 C5 3.2 5.8 4 9 4.5 C5.8 5 5 5.8 4.5 9 C4 5.8 3.2 5 0 4.5 C3.2 4 4 3.2 4.5 0 Z");
  filter: drop-shadow(0 0 0.5px var(--ink-900));
}
@media (max-width: 860px) {
  .about__fork { display: none; }
  .about__paths { grid-template-columns: 1fr; row-gap: var(--sp-8); padding-top: var(--sp-7); }
  .about__node { left: 0; transform: translate(0, -50%); }
  .about__path:hover .about__node { transform: translate(0, -50%) scale(1.08); }
}

/* ---------- Designer view: a visible easter egg ----------
   A named pill in the toolbar (dashed like a Figma selection) plus a one-time
   hand-written nudge when the reader reaches the work. */
.grid-egg {
  width: auto; height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 8px 0 10px;
  font: 400 11px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--color-text);
  border: 1px dashed var(--ink-900); border-radius: var(--radius-full); background: transparent; cursor: pointer;
}
.grid-egg svg { width: 15px; height: 15px; transition: transform var(--dur-3) var(--ease-bounce); }
.grid-egg kbd {
  font: inherit; font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text-muted);
}
.grid-egg:hover { transform: none; border-style: solid; background: var(--color-bg-elevated); box-shadow: 1.5px 1.5px 0 var(--ink-900); }
.grid-egg:hover svg { transform: rotate(-12deg) scale(1.1); }
.grid-egg:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.grid-egg[aria-pressed="true"] { border-style: solid; background: var(--sticky-lilac); }
.grid-egg[aria-pressed="true"] kbd { background: var(--ink-900); color: var(--paper-50); border-color: var(--ink-900); }
@media (max-width: 1100px) { .grid-egg__label, .grid-egg kbd { display: none; } .grid-egg { padding: 0 8px; } }

.egg-hint {
  position: fixed; z-index: calc(var(--z-overlay) + 3); width: 210px; pointer-events: auto; cursor: pointer;
  font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.2; color: var(--ink-900);
  background: var(--sticky-yellow); padding: 12px 14px 14px; border-radius: 2px;
  box-shadow: 0 14px 20px -12px rgba(22, 21, 15, 0.4); transform: rotate(-2deg) translateY(-6px); opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard), transform var(--dur-4) var(--ease-bounce);
}
.egg-hint.is-on { opacity: 1; transform: rotate(-2deg) translateY(0); }
.egg-hint b { display: block; font: 400 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; margin-bottom: 6px; }
.egg-hint svg { position: absolute; right: 18px; top: -30px; width: 34px; height: 34px; fill: none; stroke: var(--ink-900); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .egg-hint { transition: opacity var(--dur-2); } }

/* At a glance stands alone: four facts in one row */
.about__cv--glance { grid-template-columns: 1fr; }
.about__cv--glance .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 860px) { .about__cv--glance .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .about__cv--glance .facts { grid-template-columns: 1fr; } }