/* ==========================================================================
   Moazzami — the Workshop Table design.

   Ported from the approved Lovable build (project a984075b…, "alvand-vision-
   studio"), class for class where it can be, in plain CSS: a whiteboard with a
   dotted grid, sticky notes, a marker underline, and diagrams that draw
   themselves in.

   Motion rules, in one place:
   - Every hidden or undrawn starting state is behind html[data-motion="on"].
     The head script sets that only when the visitor has not asked for reduced
     motion (or has switched animations on in the footer). With JavaScript off
     the attribute never appears, so every page renders finished.
   - html[data-motion="off"] is the finished state with nothing moving.

   Two text colours are a shade darker than the design's accent swatches, and
   only where they are used as text: --green-text (4.7:1 on the page) and
   --red-text (5.05:1 on white). The swatches measured 3.84:1 and 4.39:1, which
   is below AA for text under 24px. Lines, dots and borders keep the originals.
   ========================================================================== */

:root {
  --bg: #f7f8f5;
  --ink: #1e2a44;
  --card: #fff;
  --on-ink: #fff;
  --blue: #2456c7;
  --green: #1e8f5a;
  --green-text: #1a7f50;
  --red: #d8433a;
  --red-text: #c93b32;
  --sticky: #ffe27a;
  --mint: #cfe9db;
  --border: #d9ddd3;
  --dot: #dfe2db;

  --font-sans: Figtree, system-ui, sans-serif;
  --font-heading: 'Bricolage Grotesque', Figtree, system-ui, sans-serif;
  --font-hand: Caveat, 'Segoe Print', cursive;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-motion='on'] { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding-inline-start: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--sticky); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.on-ink :focus-visible { outline-color: var(--sticky); }

.shell { margin-inline: auto; width: min(100% - 3rem, 72.5rem); }
.hand { font-family: var(--font-hand); font-weight: 700; }
.eyebrow {
  display: inline-block;
  transform: rotate(-2deg);
  color: var(--blue);
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}
.soft-card { border: 2px solid var(--border); border-radius: 20px; background: var(--card); }

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  z-index: 50;
  transform: translateY(-200%);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: transform 0.25s;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn--sticky { background: var(--sticky); color: var(--ink); }

/* --------------------------------------------------------------------------
   The mark and the wordmark
   -------------------------------------------------------------------------- */

.brand { display: flex; align-items: center; gap: 0.75rem; color: currentColor; }
.brand-link { display: inline-flex; }
.mark { width: 2.75rem; height: 2rem; fill: none; stroke: currentColor; }
.mark path { stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }

.wordmark {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6em;
  margin-inline-end: -0.6em;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-motion='on'] .logo-draw,
html[data-motion='on'] .marker-underline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-draw 1.6s 0.2s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
@keyframes line-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header { background: var(--bg); }
.site-header .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
  padding-block: 0.5rem;
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  padding: 0;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; grid-column: 1 / -1; }
.site-nav a { border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.site-nav a[aria-current='page'] { color: var(--blue); }
.site-nav a.nav-cta {
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  padding-inline: 1.25rem;
  font-weight: 600;
  transition: transform 0.25s;
}
.site-nav a.nav-cta:hover { transform: translateY(-2px) rotate(-1deg); }

/* The collapsed menu exists only once assets/js/motion.js has wired the
   button, so a visitor whose script fails still sees every link. */
@media (max-width: 767px) {
  .js-nav .nav-toggle { display: grid; }
  .js-nav .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 2px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    padding: 0.75rem;
  }
  .js-nav .site-nav.is-open { display: flex; }
  .js-nav .site-nav a.nav-cta { text-align: center; }
}
@media (min-width: 768px) {
  .site-nav { grid-column: auto; flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer .shell {
  display: grid;
  gap: 2rem;
  border-block-start: 1px solid var(--border);
  padding-block: 2.25rem;
}
.site-footer p { font-size: 0.875rem; }
.site-footer .brand + p { margin-block-start: 1rem; }
.site-footer p + p { margin-block-start: 0.25rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.875rem; }
.footer-links a { display: inline-block; padding-block: 0.25rem; font-weight: 500; }
.footer-links a:hover { text-decoration: underline; }
.motion-toggle {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: transform 0.25s;
}
.motion-toggle:hover { transform: translateY(-2px) rotate(-1deg); }
.motion-toggle[hidden] { display: none; }

@media (min-width: 768px) {
  .site-footer .shell { grid-template-columns: 1fr auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   Sticky notes, the marker, the page intro
   -------------------------------------------------------------------------- */

.hero-note {
  max-width: 21.25rem;
  justify-self: center;
  transform: rotate(2deg);
  border-radius: 4px;
  background: var(--sticky);
  padding: 1.375rem 1.375rem 1.625rem;
  box-shadow: 0 12px 24px -12px rgb(30 42 68 / 0.35);
}
.hero-note .hand { font-size: 1.5rem; line-height: 1.25; }
.hero-note small { display: block; margin-block-start: 1rem; font-size: 0.875rem; font-weight: 500; }
.note-end { margin-block-end: 3rem; margin-inline: auto 0.75rem; }
.note-start { margin-block-end: 3rem; margin-inline-end: 0.75rem; }
.note-wide { max-width: none; }

/* nowrap only where there is room: on a 320px screen with enlarged text
   spacing (WCAG 1.4.12) the phrase must be free to wrap. */
.marker-word { position: relative; display: inline-block; max-width: 100%; }
@media (min-width: 400px) { .marker-word { white-space: nowrap; } }
.marker-word svg {
  position: absolute;
  inset-inline: -4%;
  inset-block-end: -0.55rem;
  width: 108%;
  max-width: none;
  height: 1.125rem;
}
.marker-word path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; }

.page-intro { padding-block: clamp(4rem, 9vw, 7rem); }
.page-intro h1 { margin-block-start: 0.75rem; max-width: 56rem; font-size: 2.25rem; line-height: 1.04; }
.page-intro .lede { margin-block-start: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 2rem; }

.section { padding-block: 3.5rem; }
.section-title { font-size: 1.875rem; line-height: 1.1; }
.section-lede { margin-block: 0.5rem 2rem; max-width: 56ch; }

@media (min-width: 640px) {
  .page-intro h1 { font-size: 3.75rem; }
  .section-title { font-size: 3rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .section { padding-block: 5rem; }
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.hero { display: grid; align-items: center; gap: 3rem; padding-block: 3rem; }
.hero-hi { display: inline-block; transform: rotate(-2deg); color: var(--blue); font-size: 1.875rem; line-height: 2.25rem; }
.hero h1 { margin-block-start: 0.25rem; max-width: 48rem; font-size: 2.5rem; line-height: 1.02; }
.hero-bio { margin-block-start: 1.5rem; max-width: 34ch; font-size: 1.125rem; line-height: 2rem; }
.hero-offer { margin-block-start: 1rem; max-width: 40ch; font-weight: 600; }
.hero .btn { margin-block-start: 1.75rem; }
.hire-link { margin-block-start: 1.5rem; }
.hire-link a { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.hire-link svg { width: 1rem; height: 1rem; }

.services-list { display: grid; gap: 1.25rem; }
.service-card { padding: 1.75rem; }
.service-card h2 { margin-block-start: 0.25rem; font-size: 1.75rem; line-height: 1.2; }
.service-parts { display: grid; gap: 1.25rem; margin-block-start: 1.25rem; }
.service-parts dt { color: var(--blue); font-size: 1.375rem; line-height: 1.2; }
.service-parts dd { margin-block-start: 0.25rem; }
.proof-links { display: grid; gap: 0.25rem; }
.proof-links a { display: inline-block; padding-block: 0.25rem; color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.together-note { transform: rotate(-0.5deg); }
.together-note > .hand { color: var(--blue); font-size: 1.5rem; }
.together-note h2 { margin-block-start: 0.25rem; max-width: 40rem; font-size: 1.75rem; line-height: 1.15; }
ul.together { display: grid; gap: 0.75rem; margin-block-start: 1.25rem; max-width: 46rem; padding-inline-start: 1.25rem; list-style: disc; font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 640px) { .together-note { padding: 2rem 2.25rem 2.25rem; } .together-note h2 { font-size: 2.25rem; } }
.closing-note .actions { margin-block-start: 1.75rem; }
.closing-note .actions .btn { margin-block-start: 0; }

@media (min-width: 640px) {
  .service-card { padding: 2.25rem; }
}
@media (min-width: 900px) {
  .service-parts { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}

@media (min-width: 640px) {
  .hero h1 { font-size: 3.75rem; }
  .hero-bio { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-block: 5rem; }
  .hero h1 { font-size: 4.625rem; }
}

.steps { display: grid; gap: 1.25rem; margin-block-start: 2.25rem; }
.step-card {
  border: 2px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  padding: 1.5rem;
  transition: transform 0.25s, border-color 0.25s;
}
.step-card:hover { transform: translateY(-4px) rotate(-0.5deg); border-color: var(--blue); }
.step-number { display: block; color: var(--blue); font-family: var(--font-hand); font-size: 2.125rem; font-weight: 700; line-height: 1; }
.step-card h3 { margin-block-start: 0.25rem; font-size: 1.5rem; line-height: 1.25; }
.step-card p { margin-block-start: 0.5rem; font-size: 1rem; line-height: 1.5rem; }

.proof { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-block: 2.5rem; }
.proof-chip {
  border: 2px dashed var(--ink);
  border-radius: 999px;
  background: var(--card);
  padding: 0.625rem 1.125rem;
  font-weight: 600;
}

.talk { padding-block: 2.5rem; }
.talk-card {
  display: grid;
  align-items: center;
  gap: 2rem;
  border-radius: 28px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 1.75rem;
}
.talk-card .hand { color: var(--sticky); font-size: 1.875rem; line-height: 2.25rem; }
.talk-card h2 { margin-block-start: 0.25rem; font-size: 1.875rem; line-height: 1.1; }
.talk-card p:not(.hand) { margin-block-start: 1rem; max-width: 42rem; }

@media (min-width: 640px) {
  .talk-card { padding: 3rem; }
  .talk-card h2 { font-size: 3rem; line-height: 1; }
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .talk-card { grid-template-columns: 1.2fr 0.8fr; }
  .talk-card .talk-action { justify-self: end; }
}
@media (min-width: 1024px) {
  .talk { padding-block: 4rem; }
}

/* --------------------------------------------------------------------------
   Case cards
   -------------------------------------------------------------------------- */

.cases { display: grid; gap: 1.25rem; }
.case-card { border: 2px solid var(--border); border-radius: 18px; background: var(--card); transition: transform 0.25s; }
.case-card:hover { transform: translateY(-4px); }
.case-card > a { display: block; height: 100%; padding: 1.5rem; border-radius: 16px; }
.case-tag { color: var(--green-text); font-family: var(--font-hand); font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.case-card h2, .case-card h3 { margin-block-start: 0.25rem; font-size: 1.5rem; line-height: 1.25; }
.case-summary { margin-block-start: 0.75rem; font-size: 1rem; line-height: 1.75rem; }
.case-metric { margin-block-start: 1.25rem; color: var(--blue); font-family: var(--font-heading); font-size: 1.875rem; font-weight: 800; line-height: 1; }
.case-metric small { display: block; margin-block-start: 0.25rem; color: var(--ink); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.case-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 1.25rem; font-size: 0.875rem; font-weight: 600; }
.case-more svg { width: 1rem; height: 1rem; transition: transform 0.25s; }
.case-card:hover .case-more svg { transform: translateX(4px); }

/* The sixth homepage cell: a sticky note that leads to the full list. */
.case-card--all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-height: 12rem;
  border-color: var(--sticky);
  background: var(--sticky);
  padding: 1.5rem;
  transform: rotate(1deg);
}
.case-card--all:hover { transform: rotate(1deg) translateY(-4px); }
.case-card--all .hand { color: var(--blue); font-size: 1.5rem; line-height: 1.2; }
.case-card--all .all-title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.case-card--all .all-title svg { width: 1.5rem; height: 1.5rem; transition: transform 0.25s; }
.case-card--all:hover .all-title svg { transform: translateX(4px); }
.case-card--all .all-count { font-size: 0.9375rem; font-weight: 500; }

@media (min-width: 768px) {
  .cases, .cases--all { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cases, .cases--all { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   The whiteboard flow (home) and the case diagram
   -------------------------------------------------------------------------- */

.whiteboard-flow { position: relative; border: 2px solid var(--border); border-radius: 22px; background: var(--card); padding: 1.125rem; }
.flow, .diagram { width: 100%; height: auto; }
.flow-mobile, .diagram-mobile { display: none; }

.flow-edge { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.flow text { fill: var(--ink); font-family: var(--font-hand); font-size: 23px; font-weight: 700; }
.flow .core text { fill: var(--on-ink); font-family: var(--font-heading); font-size: 21px; }
.flow-caption {
  position: absolute;
  inset-inline-end: 1.625rem;
  inset-block-end: 0.875rem;
  transform: rotate(-3deg);
  color: var(--red-text);
  font-size: 1.5rem;
}

.fill-sticky { fill: var(--sticky); }
.fill-mint { fill: var(--mint); }
.fill-ink { fill: var(--ink); }
.fill-blue { fill: var(--blue); }
.fill-green { fill: var(--green); }
.fill-red { fill: var(--red); }

/* Each note keeps its tilt in both states; only the scale and opacity move. */
.flow-note, .diagram-note { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r, 0deg)); }
.flow-wide .s1 { --r: -3deg; } .flow-wide .s2 { --r: 2deg; } .flow-wide .s3 { --r: -1deg; }
.flow-wide .o1 { --r: 2deg; } .flow-wide .o2 { --r: -2deg; } .flow-wide .o3 { --r: 1deg; }
.flow-mobile .s1, .flow-mobile .s3, .flow-mobile .o2 { --r: -1deg; }
.flow-mobile .s2, .flow-mobile .o1, .flow-mobile .o3 { --r: 1deg; }
.diagram-wide .n1 { --r: -2deg; } .diagram-wide .n2 { --r: 2deg; } .diagram-wide .n3 { --r: -1deg; } .diagram-wide .n4 { --r: 2deg; }
.diagram-mobile .n1, .diagram-mobile .n3 { --r: -1deg; } .diagram-mobile .n2, .diagram-mobile .n4 { --r: 1deg; }

.diagram-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.diagram-note text { fill: var(--ink); font-family: var(--font-hand); font-size: 24px; font-weight: 700; }
.diagram-note.n2 text { fill: var(--on-ink); }

/* Dots only ever travel when motion is on and the drawing is in view. */
.flow-dot, .diagram-dot { display: none; }

html[data-motion='on'] .flow-edge { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease; }
html[data-motion='on'] .flow.is-visible .flow-edge { stroke-dashoffset: 0; }
html[data-motion='on'] .flow .flow-edge:nth-of-type(2) { transition-delay: 0.15s; }
html[data-motion='on'] .flow .flow-edge:nth-of-type(3) { transition-delay: 0.3s; }
html[data-motion='on'] .flow .flow-edge:nth-of-type(4) { transition-delay: 0.9s; }
html[data-motion='on'] .flow .flow-edge:nth-of-type(5) { transition-delay: 1.05s; }
html[data-motion='on'] .flow .flow-edge:nth-of-type(6) { transition-delay: 1.2s; }

html[data-motion='on'] .flow-note {
  opacity: 0;
  transform: scale(0.8) rotate(var(--r, 0deg));
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
html[data-motion='on'] .flow.is-visible .flow-note { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }
html[data-motion='on'] .flow.is-visible .s2 { transition-delay: 0.1s; }
html[data-motion='on'] .flow.is-visible .s3 { transition-delay: 0.2s; }
html[data-motion='on'] .flow.is-visible .core { transition-delay: 0.6s; }
html[data-motion='on'] .flow.is-visible .o1 { transition-delay: 1.5s; }
html[data-motion='on'] .flow.is-visible .o2 { transition-delay: 1.6s; }
html[data-motion='on'] .flow.is-visible .o3 { transition-delay: 1.7s; }
html[data-motion='on'] .flow.is-visible .flow-dot { display: inline; animation: dot-in 0.4s 1.8s both; }

html[data-motion='on'] .diagram-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html[data-motion='on'] .diagram.is-visible .diagram-line { animation: line-draw 1.4s ease forwards; }
html[data-motion='on'] .diagram-note {
  opacity: 0;
  transform: scale(0.82) rotate(var(--r, 0deg));
  transition: opacity 0.35s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
html[data-motion='on'] .diagram.is-visible .diagram-note { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }
html[data-motion='on'] .diagram.is-visible .n2 { transition-delay: 0.2s; }
html[data-motion='on'] .diagram.is-visible .n3 { transition-delay: 0.4s; }
html[data-motion='on'] .diagram.is-visible .n4 { transition-delay: 0.6s; }
html[data-motion='on'] .diagram.is-visible .diagram-dot { display: inline; }

@keyframes dot-in { from { opacity: 0; } to { opacity: 1; } }

/* Below 640px the horizontal drawings shrink their labels to ~6px, so each
   switches to a vertical flow with full-width notes. */
@media (max-width: 639px) {
  .flow-wide, .diagram-wide { display: none; }
  .flow-mobile, .diagram-mobile { display: block; }
  .flow-mobile text { font-size: 24px; }
  .flow-mobile .core text { font-size: 22px; }
  /* Below the drawing rather than over the last note. */
  .flow-caption { position: static; display: block; margin-block-start: 0.25rem; padding-inline-end: 0.75rem; text-align: end; font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Case study page
   -------------------------------------------------------------------------- */

.case-head { padding-block: 3rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.25rem; font-size: 0.875rem; font-weight: 600; }
.back-link svg { width: 1rem; height: 1rem; }
.case-head .case-client { display: inline-block; margin-block-start: 3rem; transform: rotate(-2deg); color: var(--green-text); font-size: 1.5rem; }
.case-head h1 { margin-block-start: 0.75rem; max-width: 56rem; font-size: 2.25rem; line-height: 1.04; }
.diagram-card { overflow: hidden; padding: 0.5rem; }

.case-body { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
.case-body > aside { height: fit-content; }
.case-facts { display: grid; gap: 1.5rem; padding: 1.5rem; }
.case-facts dt { color: var(--blue); font-size: 1.25rem; line-height: 1.75rem; }
.case-facts dd { margin-block-start: 0.25rem; font-size: 0.875rem; line-height: 1.5rem; }
.case-sections { display: grid; gap: 1.25rem; align-content: start; }
.case-section { padding: 1.5rem; }
.case-section h2 { font-size: 1.5rem; }
.case-section > p { margin-block-start: 0.75rem; font-size: 1.125rem; line-height: 2rem; }
.measured { display: grid; gap: 0.75rem; margin-block-start: 1rem; }
.measured li { border-inline-start: 4px solid var(--green); padding-inline-start: 1rem; }
.case-status .hand { color: var(--blue); font-size: 1.5rem; }
.case-status .status-text { margin-block-start: 0.5rem; font-size: 1.25rem; font-weight: 600; }
.case-status .btn { margin-block-start: 1.5rem; }
.case-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; }
.case-next a:not(.btn) { display: inline-flex; flex-direction: column; padding-block: 0.25rem; }
.case-next .hand { color: var(--blue); font-size: 1.375rem; line-height: 1.2; }
.case-next strong { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.3; }
.case-next a:not(.btn):hover strong { text-decoration: underline; }

@media (min-width: 640px) {
  .case-head h1 { font-size: 3.75rem; }
  .diagram-card { padding: 1.5rem; }
  .case-facts { grid-template-columns: repeat(3, 1fr); }
  .case-section { padding: 2rem; }
}
@media (min-width: 1024px) {
  .case-head { padding-block: 5rem; }
  .case-body { grid-template-columns: 15rem 1fr; padding-block: 5rem; }
  .case-facts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   About, CV, Contact
   -------------------------------------------------------------------------- */

.page-body { padding-block-end: 5rem; }
.two-up { display: grid; gap: 1.25rem; }
.big-card { padding: 1.75rem; }
.big-card h2 { font-size: 1.875rem; }
.big-card > p { margin-block-start: 1rem; font-size: 1.125rem; line-height: 2rem; }

.ink-band { background: var(--ink); color: var(--on-ink); }
.ink-band .shell { padding-block: 4rem; }
.ink-band .hand { color: var(--sticky); font-size: 1.875rem; line-height: 2.25rem; }
.ink-band h2 { margin-block-start: 0.25rem; max-width: 48rem; font-size: 1.875rem; line-height: 1.1; }
.ink-band p:not(.hand) { margin-block-start: 1.25rem; max-width: 42rem; font-size: 1.125rem; line-height: 2rem; }

.closing-note h2 { max-width: 48rem; font-size: 1.875rem; line-height: 1.15; }
.closing-note .btn { margin-block-start: 1.75rem; }

.cv-heading { margin-block-end: 1.5rem; font-size: 1.875rem; }
.cv-list + .cv-heading { margin-block-start: 4rem; }
.cv-list { display: grid; gap: 1rem; }
.cv-item { display: grid; gap: 0.75rem; padding: 1.5rem; transition: transform 0.25s; }
.cv-item--role:hover { transform: translateY(-4px); }
.cv-item .hand { color: var(--blue); font-size: 1.5rem; line-height: 2rem; }
.cv-item h3 { font-size: 1.25rem; }
.cv-item .org { margin-block-start: 0.25rem; font-size: 0.875rem; font-weight: 600; }
.cv-item .detail { margin-block-start: 0.75rem; max-width: 42rem; }
.cv-item .detail p + p { margin-block-start: 0.5rem; }

.contact-card { min-width: 0; padding: 1.75rem; }
.contact-card .hand { color: var(--blue); font-size: 1.5rem; }
.contact-card h2 { margin-block-start: 0.5rem; font-size: 1.5rem; }
.contact-card .address { margin-block-start: 0.5rem; overflow-wrap: anywhere; font-size: 0.875rem; }
.contact-card .btn { margin-block-start: 1.5rem; }
.contact-after { margin-block-start: 2rem; max-width: 42rem; }

.contact-layout { display: grid; gap: 1.25rem; align-items: start; }
.contact-side { display: grid; gap: 1.25rem; }
.contact-form { display: grid; gap: 1.25rem; min-width: 0; padding: 1.75rem; }
.contact-form > .hand { color: var(--blue); font-size: 1.5rem; }
.contact-form h2 { margin-block-start: -0.75rem; font-size: 1.5rem; }
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 600; }
.field-optional { font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 2px solid #8a9180;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  padding: 0.625rem 0.875rem;
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--blue); outline-offset: 1px; }
.field [aria-invalid='true'] { border-color: var(--red-text); border-inline-start-width: 6px; }
.field-error { color: var(--red-text); font-size: 0.9375rem; font-weight: 600; }
.field-error:empty { display: none; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { justify-self: start; }
.contact-form .btn:disabled { opacity: 0.7; cursor: progress; }
.form-status:empty { display: none; }
.form-status { border-radius: 12px; padding: 0.75rem 1rem; font-weight: 600; }
.form-status[data-state='ok'] { background: var(--mint); }
.form-status[data-state='error'] { border: 2px solid var(--red-text); }
.form-note { font-size: 0.875rem; }
.form-note a { display: inline-block; padding-block: 0.25rem; color: var(--blue); text-decoration: underline; }

@media (min-width: 640px) {
  .contact-form { padding: 2.25rem; }
}
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 640px) {
  .big-card { padding: 2.25rem; }
  .ink-band h2 { font-size: 3rem; line-height: 1; }
  .closing-note h2 { font-size: 2.25rem; line-height: 1.1; }
  .cv-heading { font-size: 2.25rem; }
  .cv-item { grid-template-columns: 10rem 1fr; padding: 1.75rem; }
  .contact-card { padding: 2.25rem; }
}
@media (min-width: 768px) {
  .two-up:not(.contact-grid) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .page-body--about { padding-block-end: 6rem; }
  .ink-band .shell { padding-block: 5rem; }
}

/* --------------------------------------------------------------------------
   Prose: Privacy, writing, and any page written in the editor
   -------------------------------------------------------------------------- */

.prose { max-width: 42rem; font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-block-start: 1em; }
.prose > :first-child { margin-block-start: 0; }
.prose h2 { margin-block-start: 2em; font-size: 1.5rem; }
.prose h3 { margin-block-start: 1.5em; font-size: 1.25rem; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.15em; }
.prose-card { padding: 1.75rem; }

.post-list { display: grid; gap: 1rem; }
.post-list .soft-card { padding: 1.5rem; }
.post-list time { color: var(--blue); font-family: var(--font-hand); font-size: 1.25rem; font-weight: 700; }
.post-list h2 { font-size: 1.5rem; }
.post-list a:hover { text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2rem; }
.btn--ghost { border: 2px solid var(--ink); background: var(--card); color: var(--ink); }

@media (min-width: 640px) {
  .prose-card { padding: 2.25rem; }
}

/* --------------------------------------------------------------------------
   Narrow phones
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .shell { width: min(100% - 2rem, 72.5rem); }
  .brand { gap: 0.5rem; }
  .wordmark { font-size: 0.62rem; letter-spacing: 0.4em; margin-inline-end: -0.4em; }
  .whiteboard-flow { padding: 0.35rem; }
}
@media (max-width: 359px) {
  .mark { width: 2.25rem; height: 1.65rem; }
  .wordmark { letter-spacing: 0.3em; margin-inline-end: -0.3em; }
}

/* --------------------------------------------------------------------------
   Motion off, and reduced motion without an explicit "on"
   -------------------------------------------------------------------------- */

html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='on']) *,
  html:not([data-motion='on']) *::before,
  html:not([data-motion='on']) *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  body { background: #fff; }
  .site-header nav, .nav-toggle, .motion-toggle, .skip-link { display: none !important; }
  .flow-note, .diagram-note { opacity: 1 !important; transform: rotate(var(--r, 0deg)) !important; transition: none !important; }
  .flow-edge, .diagram-line { stroke-dashoffset: 0 !important; transition: none !important; animation: none !important; }
}