* { margin:0; padding:0; box-sizing:border-box; }
  :root { --bg:#FFFFFF; --ink:#181818; --muted:#8A8A8A; --accent:#F7762C; --ease:cubic-bezier(.22,1,.36,1); }
  html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:var(--bg); overscroll-behavior:none;
    scroll-behavior:smooth; }
  body { background:var(--bg); color:var(--ink); font-family:'Rethink Sans',system-ui,sans-serif; }
  a { color:inherit; text-decoration:none; }
  .shell { padding:0 18px; }

  /* ---- top bar (matches site) ---- */
  .topbar { position:sticky; top:0; z-index:100; background:var(--bg); display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    height:48px; font-size:16px; font-weight:500; letter-spacing:-0.02em; gap:12px; }
  .topbar .name, .topbar .loc { white-space:nowrap; }
  /* keep the three cells on one line as the viewport narrows: tighten type and gaps,
     then drop the location (least essential) when there is no longer room for it */
  @media (max-width:600px){
    .topbar { height:44px; font-size:14px; gap:8px; }
    .topbar .nav { gap:22px; }
  }
  @media (max-width:440px){
    .topbar { grid-template-columns:auto 1fr; }
    .topbar .nav { justify-self:end; gap:18px; }
    .topbar .locWrap { display:none; }
  }
  .topbar .name { display:inline-block; }
  .topbar .nav { display:flex; gap:42px; }
  .topbar .nav a { transition:color .2s ease; }
  .topbar .nav a:hover { color:var(--muted); }
  .topbar .locWrap { position:relative; justify-self:end; }
  .bridge { position:absolute; right:calc(100% + 6px); top:50%; transform:translateY(-50%);
    width:22px; height:auto; opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:40; }
  .locWrap:hover .bridge { opacity:1; }
  .nameWrap { position:relative; justify-self:start; }
  /* polaroid disabled on project pages: the name is the back-link, so the reveal would block it */
  .polaroid { display:none; }
  .polaroid::before { content:''; position:absolute; top:-10px; left:0; width:75%; height:10px; }
  .nameWrap:hover .polaroid { visibility:visible; transform:scale(1) translateY(0) rotate(0deg); pointer-events:auto;
    transition:transform .5s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .polaroid img { width:100%; display:block; }

  /* ---- two-column layout (mirrors the About page exactly) ----
     col-left holds the Contents rail (About's Talks column);
     col-main is the write-up (About's Backstory column). */
  .row { display:flex; align-items:flex-start; gap:24px; padding:18px 0 80px; }
  /* stretch the rail column to the full height of the row so the sticky
     Contents stays pinned for the entire read instead of scrolling away */
  .col-left { width:365px; flex:none; align-self:stretch; }
  .col-main { flex:1; min-width:0; max-width:751px; }
  @media (max-width:820px){ .row { flex-direction:column; } .col-left { display:none; } .case-contents { display:none; } }

  /* contents rail: same type metrics as the About Talks column.
     position:fixed (not sticky) so no image load or reflow anywhere on the page
     can ever nudge it: it is pinned to the viewport and only the link colors change. */
  .case-contents { position:fixed; top:66px; left:18px; width:365px;
    animation:riseIn .7s var(--ease) .05s both; }
  .case-contents h2 { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-weight:400;
    font-size:32px; letter-spacing:-1.5px; line-height:1; margin-bottom:12px; color:#000; }
  .case-contents .list { display:flex; flex-direction:column; gap:6px; padding-left:8px; }
  .case-contents .list a { font-size:20px; font-weight:400; letter-spacing:-0.02em; color:var(--muted);
    width:max-content; transition:color .2s ease; }
  .case-contents .list a:hover, .case-contents .list a.active { color:#000; }

  /* ---- hero: one consistent frame for every case study ----
     a column-width rounded band at a fixed height, with the media contained and
     centered on it with even padding. Every top image reads the same size and
     shape regardless of the media's own aspect ratio; the band colour per page
     matches its home card. */
  .hero { margin:18px 0 0; background:var(--band,#EEF0F3); border-radius:15px;
    height:440px; display:flex; align-items:center; justify-content:center; padding:30px; overflow:hidden; }
  .hero img, .hero video { width:auto; height:auto; max-width:100%; max-height:100%;
    object-fit:contain; border-radius:12px; filter:none; }
  /* the band matches each media's own background, so no drop shadow that would
     otherwise frame a same-colour image as a photo-within-a-photo. Device crops
     keep a shadow because they genuinely float above their backdrop. */
  .hero .device { border-radius:34px; filter:drop-shadow(0 20px 44px rgba(0,0,0,.45)); }
  /* daylight composite (frame + inset video) is height-driven so it fits the band */
  .hero .composite { position:relative; height:100%; margin:0; filter:drop-shadow(0 22px 46px rgba(0,0,0,.5)); }
  .hero .composite img { height:100%; width:auto; max-width:none; border-radius:0; filter:none; }
  @media (max-width:600px){ .hero { height:320px; padding:20px; } }

  /* VIDEOS never get a background band, border, or padded frame. A hero whose direct
     child is a video shows the clip itself: full column width, natural aspect, no band.
     (Daylight's composite has the video nested, so it keeps its device backdrop.) */
  .hero:has(> video) { background:transparent; height:auto; padding:0; margin:18px 0 0;
    display:flex; justify-content:center; overflow:visible; }
  .hero:has(> video) video { width:auto; height:auto; max-width:100%; max-height:600px;
    object-fit:contain; border-radius:12px; border:0; filter:none; }
  /* a video hero that keeps a solid backdrop instead of the page (e.g. a phone on black) */
  .hero.onblack:has(> video) { background:#000; padding:26px 0; }
  /* body videos: no border or backing plate either */
  .body video { border:0 !important; background:transparent !important; }
  /* a full-bleed photo hero that needs no band: show the image itself, full width */
  .hero.bare { background:transparent; height:auto; padding:0; display:block; overflow:visible; }
  .hero.bare img { width:100%; height:auto; max-width:100%; max-height:none; object-fit:contain; border-radius:12px; filter:none; }

  /* responsive 16:9 embedded video (YouTube walkthrough) */
  .videowrap { position:relative; width:100%; aspect-ratio:16/9; margin:22px 0 6px;
    border-radius:12px; overflow:hidden; border:1px solid rgba(24,24,24,.08); background:#000; }
  .videowrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

  /* legacy single-column fallback (pages not yet on the row layout) */
  .wrap { max-width:751px; margin:0; }

  .case-head { padding:24px 0 0; }
  .case-title { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-weight:400;
    font-size:32px; letter-spacing:-1.5px; line-height:1; color:#000; }
  .submeta { margin-top:14px; font-family:'Inter',system-ui,sans-serif; font-size:15px; letter-spacing:-0.2px; color:var(--muted); }

  /* body copy matches the About page exactly */
  .lead { padding:20px 0 4px; }
  .lead p { font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:18px; line-height:24px; letter-spacing:-0.75px; color:var(--ink); }
  .lead p + p { margin-top:20px; }

  /* ---- narrative body ---- */
  .body { padding:4px 0 0; }
  .body h2 { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-weight:400;
    font-size:32px; letter-spacing:-1.5px; line-height:1; color:#000; margin:44px 0 12px; scroll-margin-top:72px; }
  .body p { font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:18px; line-height:24px; letter-spacing:-0.75px; color:var(--ink); }
  .body p + p { margin-top:20px; }
  .body ul { list-style:none; margin:12px 0 30px; padding-left:8px; display:flex; flex-direction:column; gap:15px; }
  .body li { position:relative; padding-left:22px; font-family:'Inter',system-ui,sans-serif; font-weight:400;
    font-size:18px; line-height:24px; letter-spacing:-0.75px; color:var(--ink); }
  .body li::before { content:'\2731'; position:absolute; left:0; top:1px; color:#181818; font-size:13px; line-height:24px; }
  .body li strong { font-weight:600; }
  .body a { text-decoration:underline; text-decoration-color:rgba(24,24,24,.38);
    text-decoration-thickness:2px; text-underline-offset:2px; font-weight:500; transition:color .2s ease; }
  .body a:hover { color:var(--muted); }

  /* ---- media: column width, left aligned, carded ---- */
  .figure { margin:28px 0 6px; }
  .figure img, .figure video { width:100%; height:auto; display:block; border-radius:12px;
    border:1px solid rgba(24,24,24,.08); background:#EEF0F3; }
  /* panel figures (e.g. the gesture legend) carry their own subtle grey fill, so
     they need no outline to separate from the page */
  .figure.panel img, .figure.panel video { border:0; }
  .figure.narrow img, .figure.narrow video { max-width:420px; }
  .figure.small img, .figure.small video { max-width:480px; }
  .figure.xsmall img, .figure.xsmall video { max-width:300px; }
  .gallery.compact { max-width:600px; }
  .figure.mobile-gate { max-width:260px; }
  .figure.manor-hero { max-width:360px; }
  /* flow boards: each board packs a different number of phone screens at a
     different export scale, so render them so the SCREENS all come out one
     consistent width (--pw) rather than stretching every board to the same
     box. --k on each figure is the board's width / one screen's width, so
     board width = --pw * --k and every screen lands at --pw. The board runs
     wide toward the right edge but stops short of it (padding), and never
     exceeds the space so the page never scrolls sideways. */
  .figure.flow { margin:28px 0 6px; }
  .figure.flow img { --pw: min(200px, (100vw - 494px) / 7.28);
    width: calc(var(--pw) * var(--k)); height:auto; max-width:none; display:block; border-radius:12px; }
  @media (max-width:820px){
    .figure.flow img { --pw: calc((100vw - 52px) / 7.28); }
  }
  .manor-gallery { max-width:560px; }
  /* manor: exterior on the left, the two interior cutaways stacked on the right */
  .manor-row { display:flex; gap:12px; margin:28px 0 6px; align-items:stretch; }
  .manor-row .mcol { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
  .manor-row .mcol img { width:100%; height:auto; display:block; border-radius:12px;
    border:1px solid rgba(24,24,24,.08); background:#EEF0F3; }
  .manor-row .mcol.heroimg img { height:100%; object-fit:cover; }
  @media (max-width:640px){ .manor-row { display:block; } .manor-row .mcol + .mcol { margin-top:12px; } }
  /* research personas: rebuilt as HTML cards so alignment is exact */
  .personas { display:flex; flex-direction:column; gap:16px; margin:28px 0 6px; }
  .persona { margin:0; display:flex; gap:32px; align-items:center; background:#001324;
    border-radius:16px; padding:40px 44px; }
  .persona > img { width:150px; height:150px; flex:none; border-radius:50%; display:block; }
  .persona .ptext { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
  .persona .ppill { font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:12px;
    letter-spacing:.06em; text-transform:uppercase; color:#C3F53C;
    border:1px solid #C3F53C; border-radius:999px; padding:5px 13px; }
  .persona blockquote { margin:16px 0 0; font-family:'EB Garamond',Georgia,serif; font-weight:400;
    font-size:26px; line-height:1.22; letter-spacing:-0.4px; color:#fff; }
  .persona .pby { align-self:stretch; margin-top:20px; padding-top:16px; border-top:1px solid rgba(195,245,60,.6);
    font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.45; letter-spacing:-0.2px; color:rgba(255,255,255,.72); }
  .persona .pname { display:block; font-weight:600; color:#fff; }
  @media (max-width:600px){
    .persona { flex-direction:column; align-items:flex-start; gap:20px; padding:28px; }
    .persona blockquote { font-size:22px; }
  }

  /* four design-goal illustrations, 2x2, labelled with plain text */
  .goalgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 12px; margin:24px 0 6px; }
  .goalgrid figure { margin:0; }
  .goalgrid img { width:100%; height:auto; display:block; border-radius:8px; }
  .goalgrid figcaption { margin-top:7px; font-family:'Inter',system-ui,sans-serif; font-weight:500;
    font-size:13px; letter-spacing:-0.2px; color:var(--muted); }
  @media (max-width:600px){ .goalgrid { grid-template-columns:repeat(2,1fr); } }

  .channel-grid { grid-template-columns:repeat(3,1fr); }
  .channel-card img { width:100%; height:auto; display:block; border-radius:12px; border:1px solid rgba(24,24,24,.08); background:#EEF0F3; }
  @media (max-width:600px){ .channel-grid { grid-template-columns:repeat(2,1fr); } }

  /* screen-flow grid: starts at the column's left edge and runs toward the right edge of the
     browser, stopping short of the corner (the one sanctioned full-width exception) */
  .screengrid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:28px 0 6px;
    width:calc(100vw - 447px); max-width:none; }
  .screengrid img { width:100%; height:auto; aspect-ratio:702/939; object-fit:cover; display:block; border-radius:12px;
    border:1px solid rgba(24,24,24,.10); background:#ECEDEF; }
  @media (max-width:1300px){ .screengrid { grid-template-columns:repeat(4,1fr); } }
  @media (max-width:980px){ .screengrid { grid-template-columns:repeat(3,1fr); } }
  @media (max-width:820px){ .screengrid { width:calc(100vw - 36px); } }
  @media (max-width:640px){ .screengrid { grid-template-columns:repeat(2,1fr); } }

  /* side-by-side: explanatory text beside a narrow screenshot */
  .split { display:flex; gap:32px; align-items:center; margin:28px 0 6px; }
  .split .txt { flex:1; min-width:0; }
  .split .txt p, .split .txt li { font-family:'Inter',system-ui,sans-serif; }
  .split img { width:300px; flex:none; height:auto; display:block; border-radius:12px;
    border:1px solid rgba(24,24,24,.08); background:#EEF0F3; }
  .split img.compact { width:230px; }
  /* uniform feature screens: same width for every row of a feature list */
  .split img.feature { width:340px; }
  @media (max-width:640px){ .split { display:block; } .split img { width:100%; max-width:340px; margin-top:18px; } }

  /* two-up row for device screens */
  .duo { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:28px 0 6px; }
  .duo img, .duo video { width:100%; height:auto; display:block; border-radius:12px; border:1px solid rgba(24,24,24,.08); background:#EEF0F3; }
  @media (max-width:600px){ .duo { grid-template-columns:1fr; } }
  /* same-row photos to a matched height (crop to a shared aspect so rows are not ragged) */
  .duo.eh img, .duo.eh video { aspect-ratio:2/1; object-fit:cover; height:auto; }
  /* Aurora control + field-notes panels, side by side: fill the column, matched height, no clipping.
     flex-grow is set to each panel's pixel width so the two share the row in proportion (equal height). */
  /* both panels the same height so they end at the same spot (widths differ) */
  .panelpair { display:flex; gap:14px; align-items:flex-start; justify-content:flex-start; margin:24px 0 8px; }
  .panelpair img { height:660px; width:auto; max-width:none; display:block; border-radius:12px;
    border:1px solid rgba(24,24,24,.12); background:#0e0f12; }
  @media (max-width:600px){ .panelpair img { height:auto; width:calc(50% - 7px); } }

  /* Daylight device screens: one consistent size, left-aligned, across the 2-up and 3-up groups */
  .duo.dsz, .gallery.dsz3 { display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start;
    max-width:none; margin-inline:0; }
  .duo.dsz > img, .duo.dsz > video, .gallery.dsz3 > img, .gallery.dsz3 > video {
    width:278px; height:auto; flex:none; }

  .gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:28px 0 6px; }
  /* consecutive image blocks with no text between them read as one grid, so the
     vertical gap between them matches the horizontal gutter within a row (12px) */
  .figure + .figure, .figure + .duo, .figure + .gallery,
  .duo + .duo, .duo + .figure, .duo + .gallery,
  .gallery + .gallery, .gallery + .figure, .gallery + .duo { margin-top:12px; }
  .gallery img { width:100%; height:auto; display:block; border-radius:12px; border:1px solid rgba(24,24,24,.08); background:#EEF0F3; }
  .caption { margin-top:12px; font-family:'Inter',system-ui,sans-serif; font-size:14px; line-height:20px;
    letter-spacing:-0.2px; color:var(--muted); }

  /* ---- slide deck (exported Figma slides in sequence) ---- */
  .deck { max-width:1120px; margin:20px auto 0; display:flex; flex-direction:column; gap:14px; }
  .deck img { width:100%; height:auto; display:block; border-radius:12px;
    border:1px solid rgba(24,24,24,.10); background:#fff; }
  .deck.riseIn { animation:riseIn .7s var(--ease) both; animation-delay:.12s; }
  .deckintro { max-width:1120px; margin:0 auto 26px; font-family:'Inter',system-ui,sans-serif;
    font-weight:400; font-size:18px; line-height:28px; letter-spacing:-0.4px; color:var(--ink); }
  .tweet { margin:36px auto 0; max-width:550px; display:flex; justify-content:center; }
  .tweet .twitter-tweet { margin:0 auto !important; }

  /* ---- deck contents nav (left rail on slide decks) ---- */
  .deckwrap { display:flex; gap:40px; max-width:1270px; margin:0 auto; align-items:flex-start; }
  .deck-nav { position:sticky; top:64px; width:150px; flex:none; }
  .deck-nav h2 { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-weight:400;
    font-size:24px; letter-spacing:-1px; line-height:1; margin-bottom:16px; color:#000; }
  .deck-nav .list { display:flex; flex-direction:column; gap:10px; }
  .deck-nav .list a { font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:400;
    letter-spacing:-0.02em; color:var(--muted); width:max-content; transition:color .2s ease; }
  .deck-nav .list a:hover, .deck-nav .list a.active { color:var(--ink); }
  .deck-col { flex:1; min-width:0; max-width:1080px; }
  .deckwrap .deck { max-width:none; margin:0; }
  .deck img { scroll-margin-top:62px; }
  @media (max-width:920px){
    .deckwrap { display:block; }
    .deck-nav { display:none; }
    .deck-col { max-width:1120px; margin:0 auto; }
  }

  /* lead links + notes (Meta case studies) */
  .lead a { text-decoration:underline; text-decoration-color:rgba(24,24,24,.38);
    text-decoration-thickness:2px; text-underline-offset:2px; font-weight:500; transition:color .2s ease; }
  .lead a:hover { color:var(--muted); }
  .lead .note { font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:23px;
    letter-spacing:-0.3px; color:var(--muted); margin-top:14px; }
  .lead .note a { font-weight:500; }
  /* early-career flag: a slight-stroke card at the very top of the page, black Inter text */
  .notecard { margin:18px 0 0; padding:14px 18px; border-radius:12px; background:#FBFBFC;
    border:1px solid rgba(24,24,24,.14); }
  .notecard strong { font-weight:500; }
  .notecard p { margin:0; font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.5;
    letter-spacing:-0.2px; color:#181818; }
  .lead .try { margin-top:20px; }
  .lead .try a { display:inline-flex; align-items:center; text-decoration:none;
    font-family:'Rethink Sans',system-ui,sans-serif; font-weight:600; font-size:15px; letter-spacing:-0.01em; color:#181818;
    border:1.5px solid rgba(24,24,24,.22); border-radius:999px; padding:9px 18px;
    transition:background .18s ease, color .18s ease, border-color .18s ease; }
  .lead .try a:hover { background:#181818; color:#fff; border-color:#181818; }

  /* newsroom article card (reprints, styled like the GenAI page) */
  .article { border:1px solid rgba(24,24,24,.12); border-radius:16px; padding:30px 30px 34px; background:#fff;
    margin:34px 0 6px; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
  .article .metalogo { width:80px; height:auto; display:block; margin-bottom:18px; }
  .article h2 { font-family:'Inter',sans-serif; font-weight:600; font-size:24px; letter-spacing:-0.02em; line-height:1.15; color:#111; }
  .article .meta { font-size:13.5px; color:var(--muted); margin:10px 0 18px; }
  .article p { font-size:15px; line-height:1.62; color:#2b2b2b; }
  .article p + p { margin-top:14px; }
  .article .upd { color:#3a3a3a; }
  .article ul { margin:12px 0 4px; padding-left:20px; }
  .article li { font-size:15px; line-height:1.6; color:#2b2b2b; margin-bottom:9px; }
  .article h3 { font-size:16px; font-weight:600; color:#111; margin:22px 0 8px; }
  .article .more { display:inline-block; margin-top:22px; font-weight:500; color:#0668E1; }
  .article .more:hover { text-decoration:underline; }

  /* ---- pending-asset placeholder ---- */
  .ph { width:100%; aspect-ratio:16/9; border-radius:14px; border:1px dashed rgba(24,24,24,.22);
    background:rgba(24,24,24,.02); display:grid; place-items:center; text-align:center; padding:28px;
    font-family:'Inter',system-ui,sans-serif; font-size:14px; line-height:1.5; color:var(--muted); }
  .ph .k { display:block; margin-bottom:6px; font-weight:600; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:#9a9a9a; }

  /* ---- pull quote ---- */
  .quote { margin:24px 0; padding-left:22px; border-left:3px solid rgba(24,24,24,.18); }
  .quote p { font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:21px; line-height:30px;
    letter-spacing:-0.5px; color:#111; }
  .quote cite { display:block; margin-top:9px; font-style:normal; font-size:13.5px; letter-spacing:-0.1px; color:var(--muted); }

  /* ---- two-project delineation (legacy) ---- */
  .project { margin-top:56px; padding-top:44px; border-top:1px solid rgba(24,24,24,.14); }
  .project:first-of-type { border-top:none; padding-top:8px; margin-top:30px; }
  .project .kicker { font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:12px;
    letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
  .project .ptitle { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-weight:400;
    font-size:38px; letter-spacing:-1.2px; line-height:1.02; color:#000; }
  .project .psub { margin-top:12px; font-family:'Inter',system-ui,sans-serif; font-size:15px; letter-spacing:-0.2px; color:var(--muted); }

  /* ---- footer ---- */
  .foot { position:relative; display:flex; justify-content:center; align-items:center; gap:42px;
    min-height:48px; margin:76px 0 64px;
    font-family:'Rethink Sans',system-ui,sans-serif; font-weight:500; font-size:16px; letter-spacing:-0.02em; }
  .foot a, .foot .email { transition:color .2s ease; }
  .foot a:hover, .foot .email:hover { color:var(--muted); }
  .foot .backwork { position:absolute; left:0; top:50%; transform:translateY(-50%); }
  .email { cursor:pointer; background:none; border:0; padding:0; margin:0;
    font:inherit; letter-spacing:inherit; color:inherit; transition:color .2s ease; }
  .email:hover { color:var(--muted); }
  .email .txt { display:inline-block; }
  .email .szr { display:none; }
  /* the email swap never moves its neighbors: layout width is pinned to the hidden
     "Email" sizer and the visible text overlays it, fading between states */
  .foot .email { position:relative; display:inline-flex; align-items:center; padding:10px 0; margin:-10px 0; }
  .foot .email .szr { display:inline-block; visibility:hidden; }
  .foot .email .txt { position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center;
    justify-content:flex-start; white-space:nowrap; }
  @keyframes emailPop { from{ clip-path:inset(0 100% 0 0); opacity:.7; } to{ clip-path:inset(0 0 0 0); opacity:1; } }

  /* ---- entrance (columns rise like the About page) ---- */
  @keyframes riseIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  .col-left { animation:riseIn .7s var(--ease) .05s both; }
  .col-main { animation:riseIn .7s var(--ease) .12s both; }
  /* legacy per-block entrance for pages still on .wrap */
  .wrap > .case-head, .wrap > .lead, .wrap > .body { animation:riseIn .7s var(--ease) both; }
  @media (prefers-reduced-motion:reduce){ .col-left,.col-main,.wrap > .case-head,.wrap > .lead,.wrap > .body{ animation:none !important; } }

  /* uniform render grid: crop every tile to one aspect so the grid is not ragged */
  .gallery.uniform img { aspect-ratio:3/4; object-fit:cover; height:auto; }
  .gallery.tiles img { aspect-ratio:4/3; object-fit:cover; height:auto; }

  /* live-project launch: a standalone button with a small hint, spaced to draw a little attention */
  .trylaunch { margin:32px 0 0; }
  .trybtn { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    font-family:'Rethink Sans',system-ui,sans-serif; font-weight:500; font-size:16px; letter-spacing:-0.2px;
    padding:12px 24px; border-radius:999px; background:#181818; color:#fff;
    transition:transform .2s ease, background .2s ease; }
  .trybtn .tc-arrow { font-size:14px; line-height:1; }
  .trybtn:hover { transform:translateY(-1px); background:#000; }
  .trylabel { margin:0 0 14px; font-family:'Inter',system-ui,sans-serif; font-weight:400;
    font-size:18px; line-height:24px; letter-spacing:-0.75px; color:var(--ink); }