:root {
    --cream: #F4EFE6;
    --surface: #FFFCF7;
    --cream-deep: #E8E2D6;
    --ink: #1C1916;
    --ink-soft: #4A453F;
    --ink-faint: #8A8378;
    --accent: #2B4C7E;
    --accent-strong: #1F3A63; /* hover on accent fills */
    --accent-light: #7FA3D9; /* accent text on charcoal */
    --accent-soft: rgba(43, 76, 126, 0.12);
    --line: rgba(28, 25, 22, 0.14);
    --line-strong: rgba(28, 25, 22, 0.32);
    --border: 1px solid var(--line);
    --border-thick: 1px solid var(--line);
    --radius-lg: 28px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --shadow-soft: 4px 4px 0 0 rgba(28, 25, 22, 0.12);
    --shadow-lift: 6px 6px 0 0 rgba(28, 25, 22, 0.18);
    --font: "Satoshi", system-ui, sans-serif;
    --display: "Tanker", "Satoshi", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --max: 1120px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font);
    background: var(--cream);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font-family: inherit; cursor: pointer; }

  .wrap {
    width: min(100% - 2rem, var(--max));
    margin-inline: auto;
  }

  /* ——— 0 Floating pill nav ——— */
  .nav-shell {
    padding: 1.5rem 1rem 0.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .pill-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0.65rem 0.85rem;
    background: var(--surface);
    border: var(--border-thick);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
  }
  .logo {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    /* Tight, tone-softened crop of the About portrait — legible at nav size */
    background: var(--cream) url("assets/avatar.png?v=3") center / cover no-repeat;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .logo span { display: none; }
  .pill-links {
    display: flex; /* three short links fit on phones, so no hamburger needed */
    align-items: center;
    gap: 1.35rem;
    flex: 1;
    justify-content: center;
  }
  .pill-links a,
  .pill-links button {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }
  .pill-links a:hover,
  .pill-links button:hover { color: var(--accent); }
  .mail-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: var(--ink);
    color: var(--cream);
    border: 0;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .mail-btn:hover { background: var(--accent); }
  .mail-btn svg { width: 1.25rem; height: 1.25rem; }

  @media (max-width: 479px) {
    .pill-links { gap: 1rem; }
    .pill-links a, .pill-links button { font-size: 0.92rem; }
  }

  /* ——— Shared ——— */
  /* Emphasis in headlines: terracotta text, no slab */
  .mark { color: var(--accent); }
  .mark-ink { color: var(--ink); }
  .lede {
    color: var(--ink-soft);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.65;
    max-width: 36rem;
    text-wrap: balance; /* even line lengths, no orphaned last word */
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 1.05rem 1.75rem;
    border-radius: var(--radius-sm);
    border: var(--border-thick);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    min-width: 12rem;
  }
  .btn svg { width: 1.15rem; height: 1.15rem; }
  .btn-solid {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  .btn-solid:hover { background: var(--accent); border-color: var(--accent); }
  .btn-outline {
    background: var(--surface);
    color: var(--ink);
  }
  .btn-outline:hover { background: var(--cream-deep); }
  .section {
    padding: 4.5rem 0;
  }
  @media (min-width: 768px) {
    .section { padding: 6rem 0; }
  }
  .h2 {
    font-family: var(--display);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 400; /* Tanker ships one weight; avoid faux bold */
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0 0 1rem;
  }
  .h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem;
  }
  .paper {
    background: var(--surface);
    border: var(--border);
    border-radius: 6px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .paper:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
  }
  /* Focus cards stay put on hover — no lift or shadow */
  .svc-card:hover {
    transform: none;
    box-shadow: none;
  }
  .mono-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* ——— 1 Hero (full-bleed mask background) ——— */
  .hero {
    position: relative;
    padding: 3rem 0 4.5rem;
    /* 16:9 band matches the mask; floor keeps copy readable on phones */
    min-height: clamp(36rem, 56.25vw, 100vh);
    overflow: hidden;
    overflow: clip; /* clips like hidden but lets the sticky controls track the viewport */
    isolation: isolate;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cream);
    overflow: hidden;
    cursor: default;
  }
  .hero-bg video,
  .hero-bg .mask-still {
    /* Screen-blend underlay: white silhouette at full depth; black dissolves on cream */
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 1; /* 100% — black stays invisible on #F4EFE6; white shows full depth */
  }
  .hero-bg .mask-still { display: none; }
  .hero-bg canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  /* Soft cream wash so copy stays readable over glyphs */
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(
        105deg,
        color-mix(in srgb, var(--cream) 88%, transparent) 0%,
        color-mix(in srgb, var(--cream) 72%, transparent) 38%,
        color-mix(in srgb, var(--cream) 28%, transparent) 68%,
        color-mix(in srgb, var(--cream) 8%, transparent) 100%
      );
  }
  .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    min-height: inherit;
    pointer-events: none; /* let empty areas hit hero-bg for click-to-replay */
  }
  @media (min-width: 900px) {
    .hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
      gap: 3rem;
    }
  }
  .hero-copy {
    position: relative;
    z-index: 1;
    max-width: 36rem;
    pointer-events: auto;
  }
  .hero-copy .lede { max-width: 34rem; }
  /* Right column is an atmospheric gap, no card */
  .hero-spacer {
    display: none;
    min-height: 12rem;
    pointer-events: none;
  }
  @media (min-width: 900px) {
    .hero-spacer { display: block; }
  }
  .hero h1 {
    font-family: var(--display);
    font-size: clamp(2.5rem, 5.5vw, 4.4rem);
    font-weight: 400; /* Tanker ships one weight; avoid faux bold */
    line-height: 1.08;
    letter-spacing: 0;
    margin: 0 0 1.25rem;
  }
  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
  }
  /* Minimal Replay / Stop — pinned to the viewport's bottom-right while the
     hero is on screen; the rail spans the hero so they never scroll past it */
  .hero-mask-rail {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 1rem 1.15rem;
    pointer-events: none;
  }
  .hero-mask-controls {
    position: sticky;
    bottom: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    pointer-events: auto;
  }
  .hero-mask-btn {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .hero-mask-btn:hover {
    background: var(--ink);
    color: var(--cream);
  }
  .hero-mask-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .hero-mask-btn[aria-pressed="true"] {
    background: var(--ink);
    color: var(--cream);
  }
  .hero-mask-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-mask-controls { display: none; }
  }

  /* ——— 2 Marquee ——— */
  .marquee-wrap {
    overflow: visible;
    padding: clamp(4rem, 5vw, 6rem) 0 clamp(5rem, 7vw, 8rem);
  }
  .marquee-belt {
    background: var(--ink);
    color: var(--cream);
    padding: 1rem 0;
    overflow: hidden;
  }
  .marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marquee 56s linear infinite;
    align-items: center;
  }
  .marquee-track span {
    font-family: var(--mono);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0.92;
  }
  .marquee-track .sep {
    color: var(--accent-light); /* belt is charcoal */
    opacity: 1;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
  }

  /* ——— 3 Services grid ——— */
  .services-head {
    text-align: center;
    margin-bottom: 3rem;
  }
  .services-head .lede { margin: 0 auto; }
  .services-grid {
    display: grid;
    gap: 1.25rem;
  }
  @media (min-width: 700px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1000px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .svc-card {
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .svc-illust {
    height: 11rem;
    background: var(--cream-deep);
    border-bottom: 1px solid rgba(28,25,22,0.12);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }
  .svc-illust .svc-art {
    position: absolute;
    inset: 0;
    display: block;
  }
  .svc-body { padding: 1.5rem 1.6rem 1.75rem; flex: 1; }
  .svc-body p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.55;
  }
  .svc-cta {
    background: var(--accent);
    border-color: var(--line-strong);
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.75rem;
    min-height: 22rem;
  }
  .svc-cta:hover { background: var(--accent-strong); }
  /* Glyph-field background behind the CTA copy */
  .svc-cta { position: relative; overflow: hidden; }
  .svc-cta > :not(.svc-art) { position: relative; z-index: 1; }
  .svc-cta .svc-art {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  .svc-cta h3 { color: var(--cream); }
  .svc-cta p { color: rgba(244,239,230,0.85); margin-bottom: 1.5rem; }
  .svc-cta .cta-note { margin: -0.75rem 0 1rem; font-weight: 600; color: var(--cream); }
  .svc-cta .btn {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--line-strong);
    width: 100%;
    max-width: 16rem;
  }
  .svc-cta .btn:hover { background: var(--surface); color: var(--ink); }

  /* ——— 4 About / proof ——— */
  .about-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 900px) {
    .about-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  }
  .portrait {
    width: min(100%, 26rem);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    border: var(--border-thick);
    background:
      radial-gradient(circle at 40% 35%, var(--surface), var(--cream-deep) 55%, #d9d0c0);
    box-shadow: -4px 6px 0 0 rgba(28,25,22,0.12);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }
  .portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .proof-list { display: flex; flex-direction: column; gap: 1.5rem; margin: 2rem 0; }
  .proof-item { display: flex; gap: 1rem; align-items: flex-start; }
  .proof-dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 0.2rem;
  }
  .proof-dot.alt { background: var(--ink); }
  .proof-item h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
  .proof-item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }

  /* ——— 5 Portfolio ——— */
  .port-head { text-align: center; margin-bottom: 2.5rem; }
  .case-stack { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
  .case-card {
    display: grid;
    overflow: hidden;
  }
  @media (min-width: 800px) {
    .case-card { grid-template-columns: 1fr 1fr; }
  }
  .case-copy {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface);
  }
  @media (min-width: 800px) {
    .case-copy { padding: 2.75rem; }
  }
  .case-mark {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--ink-soft);
  }
  .pill {
    display: inline-block;
    background: var(--ink);
    color: var(--cream);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 1rem;
  }
  .case-copy p {
    color: var(--ink-soft);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 1.5rem;
  }
  .case-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    transition: gap 0.2s ease, color 0.2s ease;
  }
  .case-link:hover { gap: 0.7rem; color: var(--accent); }
  .case-link svg { width: 1rem; height: 1rem; }
  .case-media {
    min-height: 16rem;
    background: var(--cream-deep);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  @media (min-width: 800px) {
    .case-media { min-height: 28rem; }
  }
  .case-media .ui-frame {
    width: 78%;
    height: 70%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.45s ease;
  }
  .case-card:hover .ui-frame { transform: scale(1.04); }
  .ui-bar {
    height: 1.5rem;
    background: var(--cream-deep);
    border-bottom: 1px solid rgba(28,25,22,0.12);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.55rem;
  }
  .ui-bar i {
    width: 0.4rem; height: 0.4rem; border-radius: 50%;
    background: var(--ink-faint); display: block;
  }
  .ui-body {
    padding: 0.85rem;
    height: calc(100% - 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .ui-row {
    height: 0.55rem;
    border-radius: 3px;
    background: var(--cream-deep);
  }
  .ui-row.w60 { width: 60%; }
  .ui-row.w40 { width: 40%; }
  .ui-row.hot { background: var(--accent); opacity: 0.55; width: 35%; height: 1.1rem; margin-top: 0.4rem; }
  .ui-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex: 1;
  }
  .ui-tile {
    background: var(--cream-deep);
    border-radius: 6px;
    border: 1px solid rgba(28,25,22,0.08);
  }
  .port-browse { text-align: center; }
  /* Equal space above and below See all work */
  #portfolio .case-stack { margin-bottom: 4rem; }
  #portfolio.section { padding-bottom: 4rem; }

  /* ——— 6 Experience ——— */
  .exp-section {
    background: var(--ink);
    color: var(--cream);
    padding: 4.5rem 0;
  }
  @media (min-width: 768px) {
    .exp-section { padding: 6rem 0; }
  }
  .exp-grid {
    display: grid;
    gap: 2.5rem;
  }
  @media (min-width: 900px) {
    .exp-grid {
      grid-template-columns: 0.9fr 1.1fr;
      gap: 3rem;
      align-items: start;
    }
  }
  .exp-left .h2 { color: var(--cream); }
  .exp-left .mark { color: var(--accent-light); }
  .exp-left .lede { color: rgba(244,239,230,0.65); }
  .exp-left .btn {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
    margin-top: 0.5rem;
  }
  .exp-left .btn:hover { background: var(--accent); color: var(--cream); border-color: var(--accent); }
  /* Pin the intro beside the cards only in the two-column layout; on phones it would float over them */
  @media (min-width: 900px) {
    .exp-sticky { position: sticky; top: 6rem; }
  }
  .exp-cards { display: flex; flex-direction: column; gap: 1.15rem; }
  .exp-grid { position: relative; }
  .exp-dissolve { position: absolute; display: none; pointer-events: none; }
  /* Desktop: cards scroll inside a capped box so the section stays close to the
     height of its neighbours; bottom fade hints there is more below */
  @media (min-width: 900px) {
    .exp-cards {
      max-height: min(40rem, calc(100vh - 9rem));
      overflow-y: auto;
      padding: 0 0.75rem 1.5rem 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(244,239,230,0.25) transparent;
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
    }
    .exp-cards > .exp-card { flex-shrink: 0; } /* scroll, don't squash */
  }
  .exp-card {
    background: var(--surface);
    color: var(--ink);
    border: var(--border-thick);
    border-radius: 6px;
    overflow: hidden;
  }
  .exp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.35rem 1.5rem 1rem;
  }
  .exp-dates {
    font-size: 1.05rem;
    font-weight: 700;
  }
  .exp-logo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--cream-deep);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent);
  }
  .exp-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
  }
  .exp-card-body { padding: 1.15rem 1.5rem 1.5rem; }
  .exp-card-body h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
  .exp-card-body .co {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
    margin-bottom: 0.55rem;
  }
  .exp-card-body p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.55;
  }

  /* ——— 7 Testimonials ——— */
  .testi-head { text-align: center; margin-bottom: 2.5rem; }
  .testi-head .lede { margin: 0 auto; }
  .testi-grid {
    display: grid;
    gap: 1.25rem;
  }
  @media (min-width: 800px) {
    .testi-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .quote-card {
    padding: 2rem;
    position: relative;
  }
  .quote-mark {
    font-family: var(--mono);
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.7;
    margin-bottom: 0.5rem;
  }
  .quote-card blockquote {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .quote-who { font-weight: 700; }
  .quote-role { color: var(--ink-faint); font-size: 0.9rem; margin-top: 0.15rem; }

  /* ——— 8 Articles ——— */
  .art-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }
  .art-grid {
    display: grid;
    gap: 1.25rem;
  }
  @media (min-width: 850px) {
    .art-grid { grid-template-columns: 0.9fr 1.1fr; }
  }
  .art-feature .art-thumb {
    margin: 0.85rem;
    min-height: 14rem;
    border-radius: 16px;
    background: var(--cream-deep);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  @media (min-width: 850px) {
    .art-feature .art-thumb { min-height: 18rem; }
  }
  .art-tag {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--ink);
    color: var(--cream);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    z-index: 1;
  }
  .art-thumb .stub {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
  }
  .art-feature .art-body { padding: 0 1.5rem 1.75rem; }
  .art-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.25rem;
  }
  .art-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--cream-deep);
  }
  .art-meta strong { display: block; font-size: 0.95rem; }
  .art-meta span { font-size: 0.85rem; color: var(--ink-faint); }
  .art-side { display: flex; flex-direction: column; gap: 1.25rem; }
  .art-row {
    display: grid;
    overflow: hidden;
  }
  @media (min-width: 560px) {
    .art-row { grid-template-columns: 11rem 1fr; }
  }
  .art-row .art-thumb {
    margin: 0.75rem;
    min-height: 8.5rem;
    border-radius: 14px;
    background: var(--cream-deep);
    position: relative;
    display: grid;
    place-items: center;
  }
  .art-row .art-body {
    padding: 1.25rem 1.5rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .art-row .art-body p {
    margin: 0.35rem 0 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* ——— 9 Footer ——— */
  .site-footer {
    background: var(--ink);
    color: var(--cream);
    padding: 3.5rem 0 2rem;
  }
  .nl-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 3rem;
  }
  .nl-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid rgba(244,239,230,0.18);
    background: var(--accent);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  .nl-form {
    flex: 1;
    background: var(--surface);
    border: var(--border-thick);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    color: var(--ink);
  }
  .nl-form h3 {
    margin: 0;
    font-size: 1.25rem;
    flex: 1;
    min-width: 10rem;
  }
  .nl-input-wrap {
    position: relative;
    flex: 1.4;
    min-width: 16rem;
  }
  .nl-input-wrap input {
    width: 100%;
    height: 3.25rem;
    border: var(--border-thick);
    border-radius: 12px;
    padding: 0 7.5rem 0 1rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--cream);
    color: var(--ink);
  }
  .nl-input-wrap button {
    position: absolute;
    right: 0.35rem;
    top: 0.35rem;
    bottom: 0.35rem;
    background: var(--ink);
    color: var(--cream);
    border: 0;
    border-radius: 9px;
    padding: 0 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .nl-input-wrap button:hover { background: var(--accent); }
  .foot-cols {
    display: grid;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  @media (min-width: 700px) {
    .foot-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  }
  .foot-brand .name {
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
  }
  .foot-brand .name i {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    /* Same avatar as the nav; url resolves from this stylesheet so it works on every page */
    background: var(--cream) url("assets/avatar.png?v=3") center / cover no-repeat;
    display: inline-block;
    flex: none;
  }
  .foot-brand p {
    color: rgba(244,239,230,0.55);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    max-width: 16rem;
  }
  .socials { display: flex; gap: 0.5rem; }
  .socials a {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
  }
  .socials a:hover { background: var(--cream); color: var(--ink); }
  .foot-col h4 {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
  }
  .foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .foot-col a {
    color: rgba(244,239,230,0.55);
    font-size: 0.88rem;
  }
  .foot-col a:hover { color: var(--cream); }
  .foot-bottom {
    border-top: 1px solid rgba(244,239,230,0.12);
    padding-top: 1.5rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: rgba(244,239,230,0.4);
  }


  /* ——— Case system (work + detail) ——— */
  [hidden] { display: none !important; }
  .case-link.is-disabled,
  .case-link[aria-disabled="true"] {
    pointer-events: none;
    color: var(--ink-faint);
    cursor: default;
    gap: 0.45rem;
  }
  .case-link.is-disabled:hover { color: var(--ink-faint); gap: 0.45rem; }
  .page-sub { padding-top: 2.5rem; }
  .page-kicker {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.85rem;
  }
  .page-kicker a:hover { text-decoration: underline; }
  .work-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
  }
  @media (min-width: 800px) {
    .work-grid { grid-template-columns: 1fr 1fr; }
  }
  .work-card {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
  }
  .work-card .h3 { margin: 0; }
  .work-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; flex: 1; }
  .work-card .co {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
  }
  .pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .case-sheet { max-width: 46rem; }
  .case-sheet .case-mark { margin-bottom: 0.75rem; }
  .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.25rem;
    margin-top: 1.25rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
    line-height: 1.45;
  }
  .meta-row strong { color: var(--ink); font-weight: 600; }
  .case-block { margin-top: 2.25rem; }
  .case-block h2 { font-size: 1.35rem; margin: 0 0 0.65rem; }
  .case-block p, .case-block li { color: var(--ink-soft); line-height: 1.65; font-size: 1.02rem; }
  .case-block p { margin: 0 0 0.85rem; }
  .case-block ul, .case-block ol { margin: 0; padding-left: 1.2rem; }
  .case-block li { margin: 0.55rem 0; }
  .notice {
    margin-top: 1.5rem;
    border: var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    background: var(--accent-soft);
    line-height: 1.55;
  }
  .proto { margin-top: 2rem; }
  @media (min-width: 700px) {
    .foot-cols.foot-cols-3 { grid-template-columns: 1.6fr 1fr 1fr; }
  }

  /* Opening beat: hero only, then one line, then the rest of the site */
  html.intro body > :not(.hero) { display: none; }
  html.intro .hero { min-height: 100vh; }
  html.intro .hero-copy,
  html.intro .hero-mask-controls { opacity: 0; visibility: hidden; }
  html.intro .hero-bg::after { opacity: 0; }
  .hero-intro-line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    margin: 0;
    padding: 0.35em 0.6em;
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #1C1916;
    background: rgba(244, 239, 230, 0.92);
    border-radius: 0.2rem;
    pointer-events: none;
    opacity: 0;
  }
  .hero-intro-line.show { opacity: 1; }

  /* Case study images — real assets only */
  .work-card { overflow: hidden; }
  .work-card .card-cover {
    width: calc(100% + 3.5rem);
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: -1.75rem -1.75rem 0.35rem;
    object-fit: cover;
    object-position: center;
    background: var(--cream-deep);
    border: 0;
  }
  .case-media img.case-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
  .case-gallery {
    margin-top: 2.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
  }
  .case-gallery figure {
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }
  .case-gallery img {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
  }
  .case-gallery figure.is-contained {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .case-gallery figure.is-contained img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--shot-max-h, 30vh);
    object-fit: contain;
  }
  .case-gallery figcaption {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    padding: 0.45rem 0 0;
    border-top: 0;
  }


  /* ——— Case study: editorial story layout (text beside images) ——— */
  .cs-head { max-width: 46rem; }
  .cs-head .lede { font-size: 1.15rem; max-width: 40rem; }
  .cs-chips {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.25rem;
    font-size: 0.95rem;
  }
  .cs-chips span {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.2rem;
  }
  .cs-hero { margin: 2.5rem 0 0; }
  /* One mat for every case image: same padding, 1px line, and radii — so images with
     their own baked-in edges or backgrounds still sit in an identical frame */
  .cs-shot {
    display: block;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .cs-shot img { display: block; width: 100%; height: auto; border-radius: 6px; }
  .cs-shot:hover { border-color: var(--line-strong); }
  .cs-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .cs-chapter { margin-top: 5.5rem; }
  .cs-chapter-head { max-width: 46rem; margin-bottom: 2.75rem; }
  .cs-num {
    display: block;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.5rem;
  }
  .cs-chapter-head .h2 { margin-bottom: 1rem; }
  .cs-chapter-head p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; margin: 0; }

  .cs-step { display: grid; gap: 1.25rem; margin-bottom: 3.5rem; }
  .cs-step-text h3 { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 700; }
  .cs-step-text p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
  .cs-step-media { display: grid; gap: 1rem; }
  .cs-step.is-tall .cs-shot { margin-inline: auto; }

  @media (min-width: 900px) {
    /* Narrow explanation column beside a wide image column */
    .cs-step { grid-template-columns: minmax(14rem, 1fr) 2.6fr; gap: 3rem; align-items: start; }
    .cs-step-text { position: sticky; top: 6.5rem; }
    /* Very wide strips (key steps, wireframes) run full width under their text */
    .cs-step.is-wide { grid-template-columns: 1fr; gap: 1.25rem; }
    .cs-step.is-wide .cs-step-text { position: static; max-width: 40rem; }
  }

  .cs-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
  .cs-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.3rem;
  }
  .cs-highlights p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
  .cs-outcome .proto { margin-top: 2rem; }

  /* Case image viewer */
  .cs-lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .cs-lightbox[open] { display: grid; place-items: center; }
  .cs-lightbox::backdrop { background: rgba(28, 25, 22, 0.88); }
  .cs-lightbox img {
    max-width: min(94vw, 1800px);
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  }
  .cs-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(244, 239, 230, 0.3);
    background: rgba(28, 25, 22, 0.6);
    color: var(--cream);
    display: grid;
    place-items: center;
  }
  .cs-lightbox-close svg { width: 1.25rem; height: 1.25rem; }
  .cs-lightbox-close:hover { background: var(--cream); color: var(--ink); }
  .cs-lightbox-close:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
  .cs-shot { cursor: zoom-in; }

  /* Story layout: text-only steps, outcomes without an image, closing link */
  .cs-step.is-text { grid-template-columns: 1fr; }
  .cs-step.is-text .cs-step-text { position: static; max-width: 42rem; }
  .cs-outcome-grid .cs-step-text { max-width: none; }
  @media (min-width: 700px) {
    .cs-outcome-grid .cs-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; }
  }
  .cs-head .notice { margin-top: 1.75rem; }
  .cs-closing { margin-top: 3rem; }
  .cs-step-media > .cs-shot { justify-self: start; }
  .cs-hero .cs-shot, .cs-step.is-tall .cs-shot { margin-inline: auto; }
  /* Widened mat: image keeps its natural size, centered in the larger frame */
  .cs-shot[style*="--img-max"] img { max-width: var(--img-max); margin-inline: auto; }

  /* Story layout: wide scope chip, pull quote, multi-paragraph chapter intros */
  .cs-chips li.is-wide { flex-basis: 100%; }
  .cs-chapter-head p + p { margin-top: 1rem; }
  .cs-quote {
    margin: 2rem 0 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 3px solid var(--accent);
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.15;
    color: var(--ink);
  }