/* Shared stylesheet for the multi-page white site. Base rules lifted verbatim from the
   2026-09-11 single-page build; additions at the bottom. */
  @font-face{font-family:"Endless";src:url("fonts/endless.ttf") format("truetype");font-weight:400;font-display:swap}
  :root{
    --bg:#ffffff; --panel:#fafafa; --ink:#141416; --muted:#5c5f67; --faint:#6f7279;
    --line:#e6e6e9; --dark:#0d0d0f; --maxw:1120px;
    /* derived from the base scale above; every value below was a loose hex literal until 2026-08-26 */
    --on-dark:#ffffff;      /* text and marks sitting on --ink / --dark */
    --body:#33353b;         /* running paragraph copy, one step darker than --muted */
    --line-strong:#c9c9cf;  /* hover borders and UI dots, one step firmer than --line */
    --panel-2:#f3f3f4;      /* the second surface inside device mockups */
    --d-ink:#ececef;        /* the four below are the on-dark scale used by .craft */
    --d-body:#c5c7cd;
    --d-faint:#9a9da5;
    --d-line:#2a2b30;
    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --sans:"Endless","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,"Cascadia Mono","Consolas",monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:72px}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
       font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  img,video{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .serif{font-family:var(--serif)}
  :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
  .skip{position:absolute;left:8px;top:-48px;background:var(--ink);color:var(--on-dark);padding:10px 16px;
        border-radius:0 0 4px 4px;z-index:100;text-decoration:none;font-size:14px;transition:top .15s}
  .skip:focus{top:0}

  .top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:58px}
  .mark{display:flex;align-items:center}
  .clay-mark{height:44px;width:auto;display:block}
  .nav{display:flex;align-items:center}
  .nav a{margin-left:26px;font-size:13.5px;color:var(--muted);text-decoration:none;letter-spacing:.02em;padding:5px 0}
  .nav a:hover{color:var(--ink)}
  @media(max-width:640px){
    .top .wrap{flex-wrap:wrap;row-gap:12px}
    .nav{flex-wrap:wrap;gap:0 18px;width:100%;order:2}
    .nav a{margin-left:0;font-size:13px}
    .nav .lang{margin-left:0}
    .nav .cta{margin-left:auto}
    html{scroll-padding-top:124px}
  }
  @media(max-width:520px){.nav{gap:0 13px}.nav a{font-size:12.5px}}
  .cta{border:1px solid var(--ink);padding:7px 14px;border-radius:2px;color:var(--ink)!important}
  .cta:hover{background:var(--ink);color:var(--on-dark)!important}
  .nav a.cta{padding:7px 14px}
  .lang{display:inline-flex;gap:2px;margin-left:24px}
  .lang a{margin-left:0;font-family:var(--mono);font-size:12px;color:var(--faint);text-decoration:none;
          padding:3px 6px;border-radius:2px;letter-spacing:.05em}
  .lang a:hover{color:var(--ink)}
  .lang a[aria-current="page"]{color:var(--ink);border:1px solid var(--line)}

  .hero{padding:78px 0 64px}
  .hero .wrap{display:grid;grid-template-columns:1.5fr .9fr;gap:52px;align-items:center}
  .eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 20px}
  h1.name{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6vw,68px);line-height:1.02;margin:0;letter-spacing:-.022em}
  .lead{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);line-height:1.3;color:var(--ink);margin:22px 0 0;max-width:20ch;letter-spacing:-.012em}
  .sub{font-size:16.5px;color:var(--muted);margin:22px 0 0;max-width:48ch}
  .proof{font-size:13px;color:var(--muted);margin:20px 0 0;letter-spacing:.01em;max-width:52ch}
  .proof b{color:var(--ink);font-weight:600}
  .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
  .btn{font-size:14px;padding:11px 18px;border-radius:2px;text-decoration:none;border:1px solid var(--ink);letter-spacing:.01em}
  .btn.solid{background:var(--ink);color:var(--on-dark)}
  .btn.ghost{color:var(--ink)}
  .btn:hover{opacity:.82}
  .portrait{position:relative}
  .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(100%) contrast(1.03);border-radius:3px;border:1px solid var(--line)}
  .portrait .loc{position:absolute;left:14px;bottom:14px;background:rgba(13,13,15,.82);color:var(--on-dark);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:2px}
  @media(max-width:820px){.hero .wrap{grid-template-columns:1fr;gap:38px}.portrait{max-width:320px}}

  section{padding:60px 0}
  .shead{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
  .shead .n{font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.1em}
  .shead h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,36px);margin:0;line-height:1.3;letter-spacing:-.017em}
  .casestudy{display:grid;grid-template-columns:1.35fr .9fr;gap:38px;align-items:start;margin-top:6px}
  .casestudy h3{margin:22px 0 8px;font-size:15px;letter-spacing:.01em}
  .casestudy h3:first-child{margin-top:0}
  .casestudy p{margin:0 0 12px;max-width:68ch;color:var(--muted)}
  .casestudy-fig{margin:0}
  .casestudy-fig img{width:100%;height:auto;border:1px solid var(--line)}
  .casestudy-fig figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
  /* NuniBot wiring as a readable vertical flow (replaces the tiny unreadable PNG that left a white gap, 2026-09-10) */
  .nuniflow{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0}
  .nf-title{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em;margin:0 0 14px}
  .nf-node{border:1px solid var(--line);border-radius:9px;padding:13px 15px;background:#fff}
  .nf-node b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.1}
  .nf-node span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
  .nf-guard{border-color:var(--ink)}
  .nf-rules{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
  .nf-rules li{font-family:var(--mono);font-size:12px;letter-spacing:.01em;padding-left:19px;position:relative;color:var(--muted)}
  .nf-rules li::before{position:absolute;left:0;top:0;font-weight:700}
  .nf-rules li.ok{color:var(--ink)} .nf-rules li.ok::before{content:"\2713";color:#1f9a6b}
  .nf-rules li.no::before{content:"\2717";color:#c0392b}
  .nf-arrow{align-self:center;color:var(--line-strong);font-size:20px;line-height:1;margin:8px 0}
  @media(max-width:820px){.casestudy{grid-template-columns:1fr;gap:22px}}
  .sdesc{color:var(--muted);max-width:54ch;margin:0 0 34px;font-size:16px}
  .credit{padding:26px 0;border-top:1px solid var(--line);max-width:74ch}
  .credit:first-of-type{border-top:0;padding-top:6px}
  .credit-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 12px}
  .credit-head h3{margin:0;font-size:21px;letter-spacing:-.01em}
  .credit-head .role{margin:0;color:var(--muted);font-size:14px}
  .credit p{margin:0 0 10px;max-width:70ch}
  .credit .clients{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.7}
  .credit .clients span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink);margin-right:10px}
  @media(max-width:520px){.credit-head{gap:2px}.credit-head .role{flex-basis:100%}}
  .rule{height:1px;background:var(--line);border:0;margin:0}

  .feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:30px 0}
  .feature.flip .media{order:2}
  .feature .media{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
  .feature .media img,.feature .media video{width:100%;display:block}
  .kicker{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em;margin:0 0 12px}
  .feature h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.8vw,32px);margin:0 0 4px;line-height:1.1;letter-spacing:-.014em}
  .feature .role{color:var(--muted);font-size:14.5px;margin:0 0 16px}
  .feature p{color:var(--body);margin:0 0 18px;font-size:16.5px}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
  .tag{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);padding:4px 9px;border-radius:99px;letter-spacing:.02em}
  /* padding-block sized so the tap target clears WCAG 2.5.5's 44px without moving the underline (2026-08-15) */
  .flink{display:inline-block;font-size:14px;text-decoration:none;border-bottom:1px solid var(--ink);padding:12px 0 10px}
  .flink:hover{opacity:.7}
  .covers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
  .covers img{border-radius:3px;border:1px solid var(--line)}
  @media(max-width:820px){.feature{grid-template-columns:1fr;gap:22px}.feature.flip .media{order:0}}

  /* life was purrrfect */
  .lwp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center;margin:6px 0 34px}
  .lwp-hero .media{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--dark)}
  @media(max-width:820px){.lwp-hero{grid-template-columns:1fr;gap:20px}}
  /* Syntheticore (2026-09-11): card cover is now the portrait film poster, so give the poster a narrower
     column and let the synopsis lead; teaser video moved into "How it's built" above the posters. */
  .synth-hero{grid-template-columns:.82fr 1.18fr;align-items:start}
  .synth-hero .media{background:var(--panel);position:relative}
  /* "No AI" corner tag — Syntheticore is hand-sculpted clay + 3D scans, not generated; same chip as the hero's location tag */
  .noai{position:absolute;top:12px;right:12px;background:rgba(13,13,15,.82);color:var(--on-dark);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;border-radius:2px;backdrop-filter:blur(3px)}
  @media(max-width:820px){.synth-hero{grid-template-columns:1fr}.synth-hero .media{max-width:360px}}
  .reveal-video{max-width:760px;margin:2px 0 18px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--dark)}
  .reveal-video video{width:100%;display:block}
  .process-label{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin:4px 0 16px}
  /* Some of these captions are sentences, not labels. Uppercase + wide tracking is for a
     short label; on a 45-character sentence it stops being readable, and the Spanish and
     French pages run longer still (54 chars in FR). Same mono, size and colour so the
     system holds — just cased and tracked like the sentence it is. */
  .process-label.is-sentence{text-transform:none;letter-spacing:.01em;font-size:12.5px}
  .peana-hero .media{max-width:300px;justify-self:center;background:var(--dark);position:relative}
  @media(max-width:820px){.peana-hero .media{max-width:280px}}
  .peana-sig-title{position:absolute;left:0;right:0;top:18px;margin:0;padding:0 18px;z-index:2;pointer-events:none}
  .peana-sig-title img{width:66%;max-width:186px;margin:0 auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
  .img-title{margin:0 0 4px}
  /* project titles are h2 for the outline; keep the size they had as h3 */
  .lwp-hero h2{font-size:1.17em}
  .lwp-hero h2:not(.img-title){margin-block:1em}
  .synth-title{display:block;max-width:280px;height:auto;margin:2px 0 4px}
  .peana-name{display:block;max-width:230px;height:auto;margin:2px 0 6px}

  /* galleries */
  .gallery{columns:3;column-gap:14px}
  .gallery.two{columns:2}
  @media(max-width:820px){.gallery{columns:2}}
  @media(max-width:520px){.gallery{columns:1}}
  figure{margin:0 0 14px;break-inside:avoid;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
  figure img,figure video{width:100%;display:block}
  figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px 10px;letter-spacing:.02em}

  /* storyboard: clean even grid, reads in sequence (frames get their unified style in Flora) */
  .storyboard{column-count:initial;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
  @media(max-width:820px){.storyboard{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.storyboard{grid-template-columns:1fr}}
  .storyboard figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .storyboard figure img{display:block;width:100%}
  .reveal{margin:12px 0 0}
  .reveal>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:10px 0;user-select:none;transition:color .15s}
  /* Three of these toggles are compound phrases ("How it's built · the film, campaign &
     pipeline"), and in FR that runs to 56 characters. Uppercase with .16em tracking is for the
     short ones; the compound ones get sentence case. Same size, weight and colour. */
  .reveal>summary.is-sentence{text-transform:none;letter-spacing:.02em}
  .reveal>summary::-webkit-details-marker{display:none}
  .reveal>summary:hover{color:var(--ink)}
  .reveal>summary .arw{display:inline-block;font-size:9px;transition:transform .2s}
  .reveal[open]>summary{color:var(--ink)}
  .reveal[open]>summary .arw{transform:rotate(90deg)}
  .charkit-embed{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--dark);margin-top:10px}
  .charkit-embed iframe{width:100%;height:600px;border:0;display:block}
  .charkit-hint{font-size:13px;color:var(--faint);margin:8px 2px 0}
  .studio-embed{margin:22px 0 0}
  .studio-embed iframe{width:100%;aspect-ratio:1000/620;height:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel);display:block}
  .studio-sys{margin:34px 0 6px;padding-top:30px;border-top:1px solid var(--line)}
  .studio-sys h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:0 0 8px;line-height:1.15}
  .studio-sys p{color:var(--body);font-size:15.5px;margin:0 0 14px;max-width:68ch}
  .studio-embed figcaption{font-size:13.5px;color:var(--muted);margin:10px 2px 0;max-width:64ch}

  .sitemock{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;margin-top:10px}
  .sitemock .browser{flex:1 1 240px;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);box-shadow:0 10px 34px rgba(0,0,0,.09);text-decoration:none}
  .sitemock .browser .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--panel-2);border-bottom:1px solid var(--line)}
  .sitemock .browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong);display:block}
  .sitemock .browser .bar .url{margin-left:10px;font-size:11px;color:var(--faint);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:3px 14px}
  .sitemock .browser img{width:100%;display:block}
  .sitemock .phone{flex:0 0 152px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg);box-shadow:0 10px 34px rgba(0,0,0,.09);padding:7px}
  .sitemock .phone img{width:100%;display:block;border-radius:15px}
  @media(max-width:640px){.sitemock .phone{flex-basis:130px}}
  .peana-intro{max-width:640px;margin:6px 0 26px}
  .peana-film{max-width:300px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--dark);margin:0 0 6px}
  .peana-film video{width:100%;display:block}

  .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  /* Row cards (non-lead) line up: equal height via stretch, media tops align (fixed 250px live/img),
     and the tag row is anchored to the card foot so both bottoms match (2026-09-11, AgentUp promoted to lead). */
  .card:not(.card-lead){display:flex;flex-direction:column}
  .card:not(.card-lead) .card-body{flex:1;display:flex;flex-direction:column}
  .card:not(.card-lead) .card-body .tags{margin-top:auto}
  .card{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--bg);transition:border-color .2s}
  .card:hover{border-color:var(--line-strong)}
  .card-media{background:var(--dark);border-bottom:1px solid var(--line)}
  .card-media img{width:100%;height:250px;object-fit:cover;object-position:top;display:block}
  .card-media.live{height:250px;display:flex;align-items:center;justify-content:center;background:var(--dark)}
  .card-media.live iframe{width:100%;height:100%;border:0;display:block}
  .card-body{padding:22px 26px 22px}
  /* Lead card — spans both columns so the remaining four sit as a clean 2x2 (2026-08-15).
     Adding a fifth card left one dangling alone at half width, which reads as a mistake; giving the LIVE
     product the full row fixes the geometry and the hierarchy at once. Side-by-side only on wide screens —
     below the .grid breakpoint it stacks like every other card.
     NOTE: do NOT call this ".feature" — that class already exists for the work section and carries
     padding:30px 0 + align-items:center, which silently inset and centred this card (measured 31px). */
  .card-lead{grid-column:1/-1}
  /* Side-by-side only from 1200px. Measured 2026-08-15: below that the body column wraps to more lines, so
     the media box grows TALL while the screenshot is landscape — object-fit:cover then eats the sides
     (35% gone at 890px, 50% at 768px, and the customer's messages were sliced mid-sentence). Stacked layout
     crops nothing, so everything under 1200 stacks. `contain` is the belt-and-braces: even inside the
     side-by-side band the whole screenshot is always visible, letterboxed against the media's own dark
     background, which matches the app's chrome. A UI screenshot has to be readable or it is decoration. */
  @media(min-width:1100px){
    .card-lead{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;align-content:stretch}
    .card-lead > *{align-self:stretch}
    /* position:relative + inset:0 rather than height:100% — the media column is auto-height, so a percentage
       height resolves against the image itself and letterboxes it (measured: 349px media in a 625px card). */
    .card-lead .card-media{border-bottom:0;border-right:1px solid var(--line);overflow:hidden;position:relative}
    .card-lead .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
    /* NuniBot lead sprite — Option B "grounded hero" (2026-09-11). The live panel stretches to the body
       height; the 92px bottom-pinned character was stranded at the foot of a tall black void. height:auto lets
       align-self:stretch fill the whole column (a full dark panel, no light gap), then the sprite is scaled up
       from the floor so she reads as a hero. The canvas is image-rendering:pixelated inside the widget, so the
       upscale stays crisp. Only in the >=1200 side-by-side band; the stacked embed keeps its native 250px. */
    .card-lead .card-media.live{height:auto}
    .card-lead .card-media.live iframe{height:100%;transform:scale(1.95);transform-origin:center bottom;image-rendering:pixelated}
    .card-lead .card-body{display:flex;flex-direction:column;justify-content:center;padding:30px 32px}
  }
  .scalestrip{display:flex;flex-wrap:wrap;gap:16px 40px;margin:0 0 32px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .scalestrip .s{display:flex;flex-direction:column;gap:3px}
  .scalestrip .s b{font-family:var(--serif);font-size:clamp(23px,2.7vw,31px);font-weight:600;line-height:1;color:var(--ink)}
  .scalestrip .s span{font-size:12.5px;color:var(--muted)}
  .sysstat{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.01em;margin:0 0 14px;line-height:1.55}
  .realemily{padding:8px 0 40px}
  .realemily figure{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
  .realemily img{width:min(300px,74vw);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.14)}
  .realemily figcaption{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);line-height:1.4;color:var(--muted);max-width:34ch}
  .card h2{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 8px;line-height:1.14;letter-spacing:-.012em}
  .card p{color:var(--body);font-size:15.5px;margin:0 0 16px}
  .feature .kicker,.card .kicker,.studio-sys .kicker{font-size:12px;color:var(--faint);letter-spacing:.04em}
  .card .sysstat{font-size:12px;color:var(--faint);letter-spacing:.02em;line-height:1.5}
  .credit h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.14;letter-spacing:-.012em;margin:0 0 4px}
  @media(max-width:820px){.grid{grid-template-columns:1fr}}

  .craft{background:var(--dark);color:var(--d-ink);border-radius:6px;padding:46px 42px}
  .craft .n{font-family:var(--mono);font-size:12px;color:var(--d-faint);letter-spacing:.1em}
  .craft h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);margin:10px 0 14px;color:var(--on-dark)}
  .craft p{color:var(--d-body);max-width:64ch;margin:0 0 6px;font-size:16.5px}
  .craft .ct{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .craft .tag{color:var(--d-body);border-color:var(--d-line)}

  .about .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:44px}
  .about p{color:var(--body);font-size:16.5px;margin:0 0 16px}
  /* impeccable-disable-next-line cramped-padding -- verified false positive 2026-08-29:
     the detector measures dt/dd inset from the border and ignores this wrapper's
     padding-left, so the 26px inset it asks for is already here. Adding padding to the
     children would silence it and change nothing on screen. */
  .facts{border-left:1px solid var(--line);padding-left:26px}
  .facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;margin-top:16px}
  .facts dt:first-child{margin-top:0}
  .facts dd{margin:3px 0 0;font-size:15.5px}
  @media(max-width:820px){.about .wrap{grid-template-columns:1fr}.facts{border-left:0;padding-left:0}}

  footer{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:20px}
  footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
  footer .big{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,40px);line-height:1.05;margin:0;letter-spacing:-.02em}
  footer a{display:inline-block;color:var(--muted);text-decoration:none;font-size:15px;margin-left:16px;padding:6px}
  footer a:hover{color:var(--ink)}
  footer .links{display:flex;flex-wrap:wrap}
  footer .links a:first-child{margin-left:0;padding-left:0}
  .copyr{color:var(--faint);font-size:13px;margin-top:26px}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    /* Kill movement, keep feedback. The blanket transition-duration:0 this replaced also erased
       hover and focus response, which is a state change the reader still needs. Only colour and
       opacity survive here, so the two positional transitions on the page (.skip sliding down,
       the reveal marker rotating) land instantly while the card and summary hovers still read. */
    *,*::before,*::after{
      animation-duration:.001ms!important;
      animation-iteration-count:1!important;
      transition-property:color,background-color,border-color,outline-color,opacity!important;
      transition-duration:.12s!important;
    }
    /* Looping video is already handled in JS: the IntersectionObserver checks
       prefers-reduced-motion and never calls play(). No CSS rule can pause media. */
  }

  /* ---- multi-page split (2026-10-07) ---- */
  .nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink)}
  .hero.solo{padding:96px 0 56px}
  .hero.solo .wrap{display:block}
  .hero.solo h1.name{font-size:clamp(46px,8vw,96px)}
  .hero.solo .lead{max-width:none;font-size:clamp(22px,3vw,34px);margin-top:26px}
  .hero.solo .sub{max-width:56ch}
  .clientline{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);line-height:1.9}
  .clientline span{color:var(--faint);text-transform:uppercase;letter-spacing:.14em;margin-right:12px;font-size:11.5px}
  .hhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
  .hhead h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,36px);margin:0;letter-spacing:-.017em}
  .hhead a{font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-strong);padding:8px 0 4px;white-space:nowrap}
  .hhead a:hover{color:var(--ink);border-color:var(--ink)}
  .posters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .poster{display:block;text-decoration:none;color:inherit}
  .poster .thumb{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--dark)}
  .poster .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .poster:hover .thumb img{transform:scale(1.035)}
  .poster h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:14px 0 3px;line-height:1.15;letter-spacing:-.01em}
  .poster p{margin:0;font-size:14px;color:var(--muted);line-height:1.45}
  @media(max-width:820px){.posters{grid-template-columns:repeat(2,1fr);gap:22px 14px}}
  .syslist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .sys{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;padding:22px 22px 18px;text-decoration:none;color:inherit;transition:border-color .2s}
  .sys:hover{border-color:var(--ink)}
  .sys h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 6px;line-height:1.15}
  .sys .sysstat{margin:0 0 12px}
  .sys p{margin:0 0 14px;font-size:15px;color:var(--body)}
  .sys .go{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
  .sys:hover .go{color:var(--ink)}
  @media(max-width:820px){.syslist{grid-template-columns:1fr}}
  .prodline{display:grid;grid-template-columns:1fr auto;gap:8px 30px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
  .prodline:last-of-type{border-bottom:1px solid var(--line)}
  .prodline h3{margin:0;font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em}
  .prodline .role{margin:0;color:var(--muted);font-size:14px}
  .prodline .clients{grid-column:1/-1;margin:2px 0 0;font-size:14px;color:var(--muted)}
  @media(max-width:640px){.prodline{grid-template-columns:1fr}}
  .pagehead{padding:64px 0 8px}
  .pagehead h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5vw,56px);margin:0;line-height:1.05;letter-spacing:-.02em}
  .pagehead p{color:var(--muted);max-width:58ch;margin:16px 0 0;font-size:17px}
  .jump{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
  .jump a{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:8px 13px;letter-spacing:.02em}
  .jump a:hover{color:var(--ink);border-color:var(--ink)}
  .project{scroll-margin-top:80px}
  .next{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:30px 0 0;margin-top:30px;border-top:1px solid var(--line)}
  .next a{font-size:15px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding:8px 0 4px}
  .prodline .desc{grid-column:1/-1;margin:8px 0 0;color:var(--body);font-size:15.5px;max-width:72ch}
  .prodline .clients span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-right:10px}
  .scalestrip{margin:0 0 8px}
  footer .big a{font-size:inherit;margin-left:0;padding:0}
  .about-portrait{width:160px;margin:0 0 26px}
  .about-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(100%);border-radius:3px;border:1px solid var(--line)}

  /* Peana tile: the store itself, as a browser + phone composition on a dot grid (2026-10-07) */
  .thumb.webmock{position:relative;background-color:var(--panel-2);
    background-image:radial-gradient(var(--line-strong) 1px,transparent 1.2px);background-size:14px 14px}
  .webmock .wm-browser{position:absolute;left:9%;top:11%;width:122%;border-radius:6px;overflow:hidden;background:var(--bg);
    border:1px solid var(--line-strong);box-shadow:0 12px 30px rgba(0,0,0,.14)}
  .webmock .wm-bar{display:flex;align-items:center;gap:4px;height:16px;padding:0 7px;background:var(--bg);border-bottom:1px solid var(--line)}
  .webmock .wm-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
  .webmock .wm-bar span{margin-left:8px;font-family:var(--mono);font-size:8.5px;color:var(--faint);letter-spacing:.02em;border:1px solid var(--line);border-radius:9px;padding:0 8px;line-height:11px}
  .webmock .wm-phone{position:absolute;right:8%;bottom:6%;width:36%;border:4px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--ink);
    box-shadow:0 14px 30px rgba(0,0,0,.22);transition:transform .4s ease}
  .webmock img{height:auto!important;transform:none!important}
  .webmock .wm-phone img{border-radius:9px}
  .poster:hover .webmock .wm-phone{transform:translateY(-5px)}
  /* scanned art with a paper edge: zoom just past it */
  .thumb.trim img{transform:scale(1.07)}
  .poster:hover .thumb.trim img{transform:scale(1.1)}
  /* phones: nav + language switch fill row two, so the contact button moves up beside the logo */
  @media(max-width:640px){
    .top .wrap{position:relative}
    .nav .cta{position:absolute;right:28px;top:11px;margin:0}
  }

  /* Short home (2026-10-07, port of hq docs/portfolio-redesign): work grid, systems strip, open-to-work.
     Production record moved to work.html, headshot lives on about.html only. */
  .home-work{padding:16px 0 64px}
  .home-sys{padding:56px 0 64px;background:var(--panel);border-block:1px solid var(--line)}
  .home-sys .sys{padding:0;overflow:hidden;background:var(--bg)}
  .home-sys .sys:hover{border-color:var(--line-strong)}
  .sys-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-bottom:1px solid var(--line)}
  .sys-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .sys-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 16px}
  .opento{padding:64px 0 36px}
  .opento .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
  .opento h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:0 0 12px;letter-spacing:-.017em}
  .opento p{color:var(--body);max-width:46ch;margin:0}
  .opento .actions{margin-top:24px}
  @media(max-width:820px){
    .opento .wrap{grid-template-columns:1fr;gap:28px}
    .sys-body{padding:14px 16px}
  }
  @media(max-width:420px){.posters .poster p{display:none}}