@font-face{
    font-family:'PP Neue Montreal';
    src:url('../fonts/PPNeueMontreal-Regular.otf') format('opentype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  :root{
    --bg:#F9F6F6;
    --bg-about:#EEECE8;
    --ink:#141414;
    --body:#4F4F4F;
    --accent:#FF4C37;
    --line:#CECECE;
    --card:#F9F6F6;
    --footer:#141414;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{background:var(--bg); color:var(--ink); font-family:'PP Neue Montreal',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  .wrap{max-width:1440px; margin:0 auto; padding:0 58px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .star{color:var(--accent);}

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100; padding:40px 0;
    background:rgba(249,246,246,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
    transition:background .35s ease, backdrop-filter .35s ease, padding .35s ease;
    contain:layout style; /* fixed + its own stacking context already isolate it;
      this tells the browser the padding transition can never affect layout
      outside nav, so the scroll-driven shrink only costs this one element */
  }
  nav.scrolled{
    padding:16px 0; background:rgba(249,246,246,0.85);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  nav .wrap{display:flex; align-items:center; gap:32px;}
  .logo{display:flex; align-items:center; flex-shrink:0;}
  .logo svg{width:43px; height:auto; display:block;}
  /* rule doubles as a scroll-progress bar — fill driven by nav's --scroll var (set in main.js) */
  .nav-rule{
    flex:1; height:1px; align-self:center;
    background:linear-gradient(to right,
      var(--accent) 0 var(--scroll,0%),
      var(--line) var(--scroll,0%) 100%);
  }
  .navlinks{display:flex; align-items:center; gap:32px; font-size:16px; letter-spacing:0.01em; white-space:nowrap;}
  .navlinks a:hover{color:var(--accent);}

  /* ---------- MOBILE NAV (hamburger) ---------- */
  /* hidden on desktop; the ≤760px block below switches this on and .navlinks off */
  .nav-burger{
    display:none; margin-left:auto; padding:6px; border:0; background:none;
    color:var(--ink); cursor:pointer; position:relative; z-index:260;
  }
  .nav-burger__icon{width:26px; height:26px; display:block;}
  .nav-burger__line{transform-box:fill-box; transform-origin:center; transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .15s ease;}
  .nav-burger.is-open .nav-burger__line--top{transform:translateY(6px) rotate(45deg);}
  .nav-burger.is-open .nav-burger__line--mid{opacity:0;}
  .nav-burger.is-open .nav-burger__line--bot{transform:translateY(-6px) rotate(-45deg);}

  .mobile-nav{position:fixed; inset:0; z-index:250; background:var(--bg); opacity:0; transition:opacity .3s ease;}
  .mobile-nav.is-open{opacity:1;}
  .mobile-nav__panel{
    height:100%; width:100%; display:flex; align-items:center; justify-content:center;
    transform:translateY(-16px); transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .mobile-nav.is-open .mobile-nav__panel{transform:translateY(0);}
  .mobile-nav__links.navlinks{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(24px,7vw,36px);
  }
  .mobile-nav__links a{font-size:clamp(28px,7vw,34px);}
  body.mobile-nav-open{overflow:hidden;}
  /* the overlay (z-index 250) would otherwise sit above nav (100) and bury the
     close button — nav's own z-index only has to beat the overlay while open,
     since the burger's z-index:260 is scoped to nav's stacking context, not the page's */
  body.mobile-nav-open nav{z-index:260;}

  @media (prefers-reduced-motion: reduce){
    .nav-burger__line{transition:none;}
    .mobile-nav, .mobile-nav__panel{transition:none;}
  }

  /* ---------- CTA / LINK MOTION ---------- */
  .arrow{display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .case-link,
  .about-links a,
  .footer-email__addr,
  .footer-linkedin,
  .navlinks a,
  .resume-modal__download,
  .rz-links a,
  .cs-back,
  .cs-cta,
  .cs-metarow a{
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat; background-position:left 100%;
    background-size:0% 1px; padding-bottom:2px;
    transition:background-size .45s cubic-bezier(.2,.8,.2,1), color .2s ease;
  }
  .case:hover .case-link,
  .about-links a:hover,
  .footer-email__addr:hover,
  .footer-linkedin:hover,
  .navlinks a:hover,
  .resume-modal__download:hover,
  .rz-links a:hover,
  .cs-back:hover,
  .cs-cta:hover,
  .cs-metarow a:hover{background-size:100% 1px;}
  .case:hover .case-link .arrow,
  .navlinks a:hover .arrow,
  .about-links a:hover .arrow,
  .footer-linkedin:hover .arrow{transform:translate(3px,-3px);}
  /* case-study links: colour shift on hover, no arrow nudge */
  .cs-back:hover{color:var(--accent);}

  /* ---------- CUSTOM "VIEW" CURSOR (work thumbnails) ---------- */
  .view-cursor{position:fixed; top:0; left:0; z-index:1000; pointer-events:none;}
  .view-cursor__inner{
    width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; letter-spacing:0.01em;
    transform:scale(0); transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .view-cursor.is-active .view-cursor__inner{transform:scale(1);}
  .has-view-cursor .project-tile,
  .has-view-cursor .featured .case{cursor:none;}
  @media (hover:none), (pointer:coarse){ .view-cursor{display:none;} }

  /* ---------- HERO ---------- */
  /* Positioned to match the Figma canvas (1440x857) exactly: every left/top/width
     below is that element's Figma coordinate expressed as a % of 1440 or 857. */
  /* Same sticky/overlap technique as the case-study hero: the hero pins in
     place while the marquee (its higher z-index sibling inside .hero-screen)
     scrolls up and rides over it. Desktop only, same as the case studies. */
  .hero-screen{position:relative;}
  .hero{
    position:relative;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    aspect-ratio:1440/857;
  }
  @media (min-width:761px) and (prefers-reduced-motion:no-preference){
    .hero{position:sticky; top:0; z-index:1;}
  }
  .marquee-bar{position:relative; z-index:2;}
  .hero-intro{
    position:absolute;
    left:4.028%;                 /* 58/1440 */
    top:17.503%;                 /* 150/857 */
    width:38.096%;               /* 548.573/1440 */
    display:flex; align-items:center; gap:1.458vw; /* 21/1440 */
  }
  .hero-intro img{
    width:7.193vw; height:7.193vw;   /* 103.573/1440 */
    min-width:52px; min-height:52px;
    max-width:104px; max-height:104px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
  }
  .hero-intro p{font-size:clamp(14px, 1.389vw, 20px); line-height:1.4;}
  .hero-intro .accent{color:var(--accent);}

  h1.headline{
    position:absolute;
    left:4.028%;                 /* 58/1440 */
    bottom:14.936%;              /* (857-729)/857 */
    width:92.083%;               /* 1326/1440 */
    font-weight:400;
    font-size:clamp(28px, 4.444vw, 64px);  /* 64/1440 */
    line-height:1.12;
    letter-spacing:-0.01em;
  }

  .meta-row{
    position:absolute;
    left:4.028%;                 /* 58/1440 */
    top:92.649%;                 /* 794/857 */
    width:92.014%;               /* 1325/1440 */
    display:flex; align-items:center; gap:1.667vw; /* 24/1440 */
  }
  .meta-item{font-size:14px; letter-spacing:0.05em; text-transform:uppercase; color:#333; white-space:nowrap;}
  .meta-rule{flex:1; height:1px; background:var(--line);}
  .available{display:flex; align-items:center; gap:8px; color:#13a333; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap;}
  .available .dot{color:#13a333;}

  /* Faint dot-grid texture behind the hero (Figma: ~20px grid, near-invisible ink).
     A canvas replaces ::before on fine pointers so the cursor can drag through it. */
  .hero::before{
    content:"";
    position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    z-index:0; pointer-events:none;
    background-image:radial-gradient(circle at center, rgba(20,20,20,0.08) 1px, transparent 1.6px);
    background-size:20px 20px;
  }
  .hero.dots-live::before, .cs-hero.dots-live::before{opacity:0;}
  .hero-dots{
    position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    z-index:0; pointer-events:none;
  }
  /* on the case-study hero, fade the interactive grid out toward the cover image */
  .cs-hero .hero-dots{
    -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 82%);
            mask-image:linear-gradient(to bottom,#000 45%,transparent 82%);
  }
  .hero-intro, h1.headline, .meta-row{z-index:1;}

  @media (max-width:760px){
    .wrap{padding:0 20px;}
    nav{padding:20px 0;}
    nav .wrap{gap:16px;}
    .logo svg{width:32px;}
    .nav-rule{display:none;}
    .navlinks{display:none;}
    .nav-burger{display:block;}
    /* hero fills the screen minus the ticker's own height (46px), so hero +
       ticker together equal exactly one viewport — .hero can't use flex:1
       in a wrapper here since its sticky containing block on desktop needs
       to stay .hero-screen (which also spans the featured section below).
       Three zones: intro sits at the top (clear of the fixed nav), the
       headline centers in the remaining middle space (.hero-main's own
       flex:1 + justify-content:center guarantees equal space above/below
       it with no extra math needed), meta row stays pinned at the bottom. */
    .hero{
      aspect-ratio:auto; min-height:calc(100vh - 46px); min-height:calc(100svh - 46px);
      padding:148px 20px 32px; display:flex; flex-direction:column;
    }
    .hero-main{flex:1; display:flex; flex-direction:column; justify-content:center;}
    .hero-intro{position:static; width:auto; margin-bottom:0;}
    .hero-intro img{width:64px; height:64px; min-width:0; max-width:64px;}
    h1.headline{position:static; width:auto; font-size:clamp(28px,7vw,40px);}
    .meta-row{position:static; width:auto; flex-wrap:wrap; gap:12px;}
    .meta-rule{display:none;}
  }
  /* NOTE: rules below that override .featured/.projects/.section-head/.case+.case/
     .about/footer at mobile widths live further down the file, AFTER those
     selectors' base (unconditional) rules — same-specificity ties resolve by
     source order regardless of media-query nesting, so a mobile override placed
     before its base rule loses even when its condition matches. Don't move
     those overrides back up here. */

  /* ---------- MARQUEE ---------- */
  .marquee-bar{background:var(--footer); color:#fff; padding:14px 0; overflow:hidden;}
  .marquee-track{
    display:flex; width:max-content;
    animation:marquee 92s linear infinite;
  }
  /* two identical groups; each self-contained (incl. trailing space) so
     translateX(-50%) tiles seamlessly with no jump on repeat */
  .marquee-group{
    display:flex; align-items:center; gap:80px;
    padding-right:80px; flex-shrink:0;
  }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }
  .marquee-track span{
    font-size:15px; letter-spacing:0.05em;
    text-transform:uppercase; white-space:nowrap;
    opacity:0.75;
  }
  .marquee-track .sep{display:flex; align-items:center; color:var(--accent); flex-shrink:0;}
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- SECTION HEAD ---------- */
  .section-head{font-size:clamp(28px,3.4vw,40px); font-weight:400; margin-bottom:64px;}

  /* ---------- FEATURED WORK ---------- */
  .featured{background:var(--bg-about); padding:120px 0; scroll-margin-top:100px; position:relative; z-index:2;}
  .case{display:block; padding:0;}
  .case + .case{border-top:1px solid var(--line); margin-top:64px; padding-top:64px;}
  .case-head{display:flex; flex-direction:column; gap:18px;}
  .case-visual{overflow:hidden; aspect-ratio:2652/1190; background:#e4e1db; margin-top:24px;}
  .case-visual img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .case:hover .case-visual img{transform:scale(1.03);}
  .case-meta{display:flex; align-items:center; justify-content:space-between; gap:18px;}
  .case-title{font-size:24px; font-weight:400;}
  .case-link{font-size:16px; color:var(--accent); white-space:nowrap;}
  .case-desc{font-size:18px; color:var(--body); line-height:1.5;}
  .case-tags{display:flex; gap:11px; flex-wrap:wrap;}
  .case-tags span{border:1px solid var(--body); border-radius:100px; padding:4px 8px; font-size:14px; color:var(--body);}

  @media (max-width:760px){
    /* CTA moves below the image: flatten .case-head/.case-meta with display:contents
       so title/link/desc/tags/visual all become direct flex children of .case,
       then reorder them explicitly. */
    .case{display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
    .case-head, .case-meta{display:contents;}
    .case-title{order:1;}
    .case-desc{order:2;}
    .case-tags{order:3;}
    .case-visual{order:4; align-self:stretch; margin-top:0;}
    .case-link{order:5;}
  }

  /* ---------- PROJECT GRID ---------- */
  .projects{background:var(--bg); padding:120px 0;}
  .project-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px 63px;}
  .project-tile{display:block;}
  .project-tile-img{aspect-ratio:3/2; overflow:hidden; background:#e4e1db; margin-bottom:24px;}
  .project-tile-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .project-tile:hover .project-tile-img img{transform:scale(1.03);}
  .project-title{font-size:24px; font-weight:400; margin-bottom:18px;}
  .project-desc{font-size:16px; color:var(--body); line-height:1.5; margin-bottom:18px;}
  .project-tags{display:flex; gap:11px; flex-wrap:wrap;}
  .project-tags span{border:1px solid var(--body); border-radius:100px; padding:4px 8px; font-size:14px; color:var(--body);}

  @media (max-width:820px){ .project-grid{grid-template-columns:1fr; gap:48px;} }

  /* ---------- ABOUT ---------- */
  .about{position:relative; background:var(--bg-about); padding:200px 0; overflow:hidden;}
  .about-signature{position:absolute; left:46.8%; top:23%; width:32.6%; max-width:470px; pointer-events:none;}
  .about-signature img,
  .about-signature svg{width:100%; height:auto; display:block;}
  .about-inner{position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:0 58px;}
  .about-block{max-width:889px; margin:0 auto 184px;}
  .about-head{font-size:clamp(28px,3.4vw,40px); font-weight:400; margin-bottom:14px;}
  .about-top{display:flex; gap:32px; align-items:flex-start;}
  .about-text{width:557px; max-width:100%;}
  .about-text .lede{font-size:24px; line-height:1.4; margin-bottom:32px;}
  .about-text .body-copy p{font-size:18px; line-height:1.6; color:var(--body); margin-bottom:18px;}
  .about-text .body-copy p:last-child{margin-bottom:0;}
  .about-links{display:flex; gap:32px; margin-top:32px; font-size:16px; letter-spacing:0.01em; color:var(--accent);}
  .about-photo{flex-shrink:0; width:300px; height:300px; box-shadow:0 4px 50px rgba(0,0,0,0.08);}
  .about-photo img{width:100%; height:100%; object-fit:cover;}

  .philosophy{text-align:center; margin-bottom:184px;}
  .philosophy h3{font-size:clamp(24px,3vw,40px); font-weight:400; margin-bottom:24px;}
  .philosophy p{font-size:clamp(28px,5vw,64px); font-weight:400; line-height:1.2;}
  .philosophy-quote .ph-word{
    display:inline-block; opacity:0.15; filter:blur(6px); will-change:opacity, filter;
  }
  @media (prefers-reduced-motion: reduce){
    .philosophy-quote .ph-word{opacity:1; filter:none;}
  }

  .process-list{max-width:889px; margin:0 auto; display:flex; flex-direction:column;}
  .process-rule{height:1px; background:var(--line); transform-origin:left; will-change:transform;}
  .process-step{
    display:grid; grid-template-columns:96px 1fr; column-gap:48px;
    padding:44px 0;
  }
  .process-step__num{
    font-size:clamp(40px,4vw,60px); line-height:1; color:var(--line);
    font-feature-settings:"tnum"; align-self:start;
  }
  .process-step__body{max-width:745px;}
  .process-step__title{
    display:flex; align-items:center; gap:10px;
    font-size:24px; font-weight:400; color:var(--ink); margin-bottom:16px;
  }
  .process-step__icon{display:inline-flex; color:var(--accent); flex-shrink:0;}
  .process-step__icon svg{width:20px; height:20px; display:block;}
  .process-step__body p{font-size:18px; color:var(--body); line-height:1.6;}

  @media (max-width:900px){
    .about-inner{padding:0 20px;}
    .about-block{margin-bottom:56px;}
    .about-top{flex-direction:column; align-items:flex-start;}
    .about-text{width:100%;}
    .about-photo{width:100%; max-width:300px;}
    .philosophy{margin-bottom:56px;}
    .process-step{grid-template-columns:1fr; row-gap:14px; padding:28px 0;}
    .process-step__num{font-size:34px;}
    .about-signature{display:none;}
  }

  /* ---------- FOOTER ---------- */
  footer{background:var(--footer); color:var(--accent); padding:120px 0; text-align:center;}
  footer h2{font-size:clamp(48px,11vw,140px); font-weight:400; line-height:0.95; margin-bottom:56px;}
  .footer-contact{display:flex; flex-direction:column; align-items:center; gap:22px;}
  .footer-email{display:inline-flex; align-items:center; gap:16px;}
  .footer-email__addr{font-size:clamp(18px,2.8vw,32px); color:var(--accent); line-height:1;}
  .footer-copy{
    position:relative; display:flex; width:34px; height:34px; padding:0;
    border:0; background:none; color:var(--accent); cursor:pointer; transition:opacity .2s ease;
  }
  .footer-copy:hover{opacity:.65;}
  .footer-copy svg{width:24px; height:24px; margin:auto; display:block;}
  .footer-copy .footer-copy__check{display:none;}
  .footer-copy.is-copied .footer-copy__copy{display:none;}
  .footer-copy.is-copied .footer-copy__check{display:block; color:#fff;}
  .footer-copy__toast{
    position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%);
    font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#fff;
    white-space:nowrap; opacity:0; transition:opacity .2s ease; pointer-events:none;
  }
  .footer-copy.is-copied .footer-copy__toast{opacity:1;}
  .footer-linkedin{font-size:clamp(18px,2.8vw,32px); color:var(--accent); line-height:1;}
  .footer-bottom{
    margin-top:104px; display:flex; justify-content:space-between; gap:16px;
    font-size:12px; color:rgba(255,255,255,0.5); letter-spacing:0.05em;
  }

  /* placed here (after the base rules above) so these actually win at mobile
     widths — see the note near the nav/hero mobile block for why */
  @media (max-width:760px){
    .featured, .projects{padding:72px 0;}
    .section-head{margin-bottom:40px;}
    .case + .case{margin-top:48px; padding-top:48px;}
    .about{padding:56px 0;}
    footer{padding:72px 0;}
    footer h2{margin-bottom:40px;}
    .footer-bottom{margin-top:64px;}
  }

  .reveal{opacity:0; transform:translateY(24px);}

  /* Page entrance: nav + hero elements start hidden, a load-time timeline blurs them in */
  .nav-load, .hero-load{opacity:0;}
  h1.headline .hl-word{display:inline-block;}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none;}
    .nav-load, .hero-load{opacity:1;}
    h1.headline .hl-word{opacity:1; filter:none; transform:none;}
    .arrow{transition:none;}
    .view-cursor__inner{transition:opacity .2s ease;}
    ::view-transition-old(root), ::view-transition-new(root){animation:none;}
  }

  /* ---------- PAGE TRANSITIONS ---------- */
  /* Native cross-document View Transitions: every internal link (homepage ↔ case
     study, case study ↔ case study) gets a quick blur/fade exit on the outgoing
     page; the incoming page then fades in fast and hands off to the load-in
     timeline above. Unsupported browsers (Firefox, older Safari) just navigate
     normally — no JS, no fallback needed. No transform here: the whole page
     (nav included) is one flattened snapshot, so any scale drags the fixed nav
     out of place with it — opacity + blur only, so nothing shifts position. */
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:page-out .42s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root){ animation:page-in .32s cubic-bezier(.16,1,.3,1) .14s both; }
  @keyframes page-out{ to{ opacity:0; filter:blur(10px); } }
  @keyframes page-in{ from{ opacity:0; } to{ opacity:1; } }

  /* ---------- RESUME MODAL ---------- */
  body.resume-open{overflow:hidden;}
  .resume-modal{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:42px 24px;
  }
  .resume-modal[hidden]{display:none;}
  .resume-modal__scrim{
    position:absolute; inset:0; background:rgba(0,0,0,0.5);
    opacity:0; transition:opacity .3s ease;
  }
  .resume-modal.is-open .resume-modal__scrim{opacity:1;}
  .resume-modal__dialog{
    position:relative; display:flex; flex-direction:column;
    width:min(1150px, 100%);
    max-height:min(1112px, calc(100vh - 84px));
    background:var(--bg); border-radius:24px; overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,0.28);
    opacity:0; transform:translateY(14px) scale(.985);
    transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .resume-modal.is-open .resume-modal__dialog{opacity:1; transform:none;}
  .resume-modal__handle{display:none;}

  .resume-modal__bar{
    flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:16px 24px; background:var(--bg); border-bottom:1px solid #d6d1cf;
  }
  .resume-modal__eyebrow{font-size:14px; letter-spacing:0.22em; text-transform:uppercase; color:var(--body);}
  .resume-modal__actions{display:flex; align-items:center; gap:32px;}
  .resume-modal__download{
    display:inline-flex; align-items:center; gap:6px; font-size:16px; color:var(--accent);
  }
  .resume-modal__download svg{width:16px; height:16px;}
  .resume-modal__close{
    display:flex; width:24px; height:24px; padding:0; border:0; background:none;
    color:var(--ink); cursor:pointer; transition:color .2s ease;
  }
  .resume-modal__close:hover{color:var(--accent);}
  .resume-modal__close svg{width:24px; height:24px;}

  .resume-modal__body{
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--bg-about); padding:52px;
    display:flex; flex-direction:column; gap:40px;
  }

  /* resume content */
  .rz-block{display:flex; flex-direction:column; gap:16px;}
  .rz-divider{height:1px; background:#d6d1cf; width:100%;}
  .rz-eyebrow{font-size:14px; letter-spacing:0.22em; text-transform:uppercase; color:var(--body);}
  .rz-name{font-size:26px; font-weight:600; color:var(--ink); line-height:1.1;}
  .rz-role{font-size:16px; color:var(--ink);}
  .rz-role .rz-star{color:#ada9a8;}
  .rz-summary{font-size:16px; line-height:1.35; color:var(--body);}
  .rz-links{display:flex; flex-wrap:wrap; gap:14px 50px; font-size:16px;}
  .rz-links a{color:var(--accent);}
  .rz-links .rz-email{color:var(--ink);}
  .rz-job{display:flex; flex-direction:column; gap:16px;}
  .rz-job__head{display:flex; align-items:center; gap:12px;}
  .rz-chip{
    width:24px; height:24px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .rz-chip--honeybook{background:#fffa56;}
  .rz-chip--honeybook svg{width:15px; height:15px; display:block;}
  .rz-chip--endeavor{background:#020403;}
  .rz-chip--endeavor img{width:78%; height:78%; object-fit:contain; display:block;}
  .rz-job__co{font-size:24px; color:var(--ink);}
  .rz-job__meta{display:flex; align-items:baseline; justify-content:space-between; gap:24px;}
  .rz-job__role{font-size:18px; color:var(--ink);}
  .rz-job__dates{font-size:14px; letter-spacing:0.05em; text-transform:uppercase; color:var(--body); white-space:nowrap; flex-shrink:0;}
  .rz-bullets{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:12px;}
  .rz-bullets li{font-size:16px; line-height:1.3; color:var(--body);}
  .rz-bullets b{font-weight:600;}
  .rz-list{margin:0; padding-left:20px;}
  .rz-list li{font-size:16px; line-height:1.8; color:var(--body);}
  .rz-earlier{font-size:16px; font-style:italic; line-height:1.3; color:var(--body);}
  .rz-edu{font-size:16px; line-height:1.4; color:var(--body);}
  .rz-edu strong{display:block; color:var(--ink); font-weight:600;}

  @media (max-width:640px){
    .resume-modal{align-items:flex-end; padding:0;}
    .resume-modal__dialog{
      width:100%; max-width:none; max-height:92vh;
      border-radius:20px 20px 0 0;
      transform:translateY(100%); transition:transform .38s cubic-bezier(.2,.85,.25,1), opacity .2s ease;
    }
    .resume-modal.is-open .resume-modal__dialog{transform:none;}
    .resume-modal__handle{
      display:block; width:36px; height:4px; border-radius:2px;
      background:#c9c2bb; margin:8px auto 0;
    }
    .resume-modal__bar{padding:12px 20px 14px;}
    .resume-modal__actions{gap:20px;}
    .resume-modal__body{padding:28px 22px 40px; gap:32px;}
    .rz-name{font-size:24px;}
    .rz-job__meta{flex-direction:column; gap:4px;}
    .rz-links{gap:10px 28px;}
  }
  @media (prefers-reduced-motion: reduce){
    .resume-modal__scrim, .resume-modal__dialog{transition:opacity .15s ease;}
    .resume-modal__dialog{transform:none;}
    .resume-modal.is-open .resume-modal__dialog{transform:none;}
  }

  /* ============ CASE STUDY (work/*.html) ============
     Reusable case-study template, translated from the Figma master
     (Website Portfolio › Case study template). One voice — PP Neue Montreal,
     the site palette — and essentially two working sizes: a ~40px heading
     and an ~18px body. The pull-quote and the footer are the only places
     type gets loud. Warm #EEECE8 story bands alternate with #F9F6F6
     interstitials; the work runs large and frameless, and whitespace,
     not rules, does the structuring. */
  .cs{background:var(--bg);}
  .cs-main{width:100%;}

  /* one shared inner column — tracks the site .wrap (1440 cap, ~58px gutter) */
  .cs-in{max-width:1440px; margin:0 auto; padding:0 clamp(20px,4vw,58px);}

  /* ---------------- bands ---------------- */
  /* Figma: px-57 py-98, and a flat gap-98 between every block. */
  .cs-band{padding:clamp(60px,9vw,98px) 0;}
  .cs-band--warm{background:var(--bg-about);}
  .cs-band--plain{background:var(--bg);}
  .cs-band > .cs-in > * + *{margin-top:clamp(60px,9vw,98px);}
  /* a heading and the media / block it introduces read as one beat — close the gap */
  .cs-band > .cs-in > .cs-block + .cs-figure,
  .cs-band > .cs-in > .cs-block + .cs-grid2,
  .cs-band > .cs-in > .cs-block + .cs-grid3,
  .cs-band > .cs-in > .cs-block + .cs-grid4{margin-top:clamp(34px,4.5vw,52px);}
  .cs-band > .cs-in > .cs-figure + .cs-figure{margin-top:clamp(20px,2.6vw,32px);}
  .cs-band > .cs-in > .cs-figure + .cs-block--cont,
  .cs-band > .cs-in > .cs-block + .cs-block--cont{margin-top:clamp(28px,3.6vw,42px);}

  /* ---------------- hero ----------------
     The hero is exactly as designed. On desktop it sticks to the top while
     the cover image (which follows it inside .cs-herostack) scrolls up and
     rides over it — native position:sticky, so there's no scroll jank.
     The top padding also clears the fixed site nav. */
  .cs-herostack{position:relative;}
  .cs-hero{
    position:relative; z-index:1;
    background:var(--bg); overflow:hidden;
    padding:calc(clamp(68px,11vh,120px) + 60px) 0 clamp(44px,6vw,72px);
  }
  @media (min-width:700px) and (prefers-reduced-motion:no-preference){
    .cs-hero{position:sticky; top:0;}
  }
  .cs-hero::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle at center, rgba(20,20,20,0.07) 1px, transparent 1.7px);
    background-size:22px 22px;
    -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent);
            mask-image:linear-gradient(to bottom,#000 52%,transparent);
  }
  .cs-hero > .cs-in{position:relative; z-index:1;}
  .cs-back{display:inline-block; font-size:15px; letter-spacing:0.01em; color:var(--ink);}
  .cs-hero__row{
    margin-top:clamp(52px,9vw,100px);
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(32px,6vw,80px); align-items:start;
  }
  /* small tracked label — hero eyebrow and section labels share it */
  .cs-label{
    display:block; font-size:13px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--body);
  }
  .cs-label + .cs-title{margin-top:clamp(14px,1.8vw,20px);}
  .cs-title{
    font-size:clamp(29px,4.2vw,46px); font-weight:400; line-height:1.13;
    letter-spacing:-0.016em; color:var(--ink); max-width:24ch; text-wrap:balance;
  }
  .cs-spec{display:grid; gap:clamp(18px,2vw,24px);}
  .cs-spec div{display:flex; flex-direction:column; gap:7px;}
  .cs-spec dt{font-size:13px; letter-spacing:0.055em; text-transform:uppercase; color:#333;}
  .cs-spec dd{font-size:16px; line-height:1.3; color:var(--ink);}
  .cs-hero__tags{
    margin-top:clamp(46px,8vw,92px);
    display:flex; align-items:center; gap:24px;
  }
  .cs-hero__tags ul{display:flex; gap:11px; list-style:none; flex-wrap:wrap;}
  .cs-hero__tags li{
    border:1px solid var(--body); border-radius:100px; padding:4px 10px;
    font-size:13.5px; color:var(--body); white-space:nowrap;
  }
  .cs-hero__tags .cs-rule{flex:1; height:1px; background:var(--line);}

  /* the one full-bleed image on the page — scrolls up and over the pinned hero */
  .cs-hero-media{
    position:relative; z-index:2;
    width:100vw; margin-left:calc(50% - 50vw);
    background:#e4e1db; aspect-ratio:2652/1190; overflow:hidden;
  }
  .cs-hero-media img{width:100%; height:100%; object-fit:cover; display:block;}

  /* ---------------- the reading column ----------------
     Every run of text — headings, 24px subtitle, body, the stacked
     "Overview / The problem" pair, and the 2-up stat grid — funnels
     down one centred 800px column. Only images break to full width. */
  .cs-block, .cs-pair, .cs-note, .cs-stats{max-width:800px; margin-inline:auto;}

  .cs-block > * + *{margin-top:clamp(14px,1.7vw,18px);}
  .cs-block > .cs-label + .cs-block__h{margin-top:clamp(10px,1.4vw,14px);}
  .cs-block__h{
    font-size:clamp(27px,3.4vw,40px); font-weight:400; line-height:1.1;
    letter-spacing:-0.014em; color:var(--ink);
  }
  /* the lead paragraph reads as body copy — no separate subtitle treatment */
  .cs-block__sub{font-size:clamp(16px,1.35vw,18px); line-height:1.58; color:var(--body);}
  .cs-block__sub + .cs-block__body{margin-top:0.9em;}
  .cs-block__body{font-size:clamp(16px,1.35vw,18px); line-height:1.58; color:var(--body);}
  .cs-block__body + .cs-block__body{margin-top:0.9em;}
  .cs-block__body b, .cs-block__body strong{color:var(--ink); font-weight:400;}
  /* .cs-point — a label-led body line; a touch more air than a plain paragraph */
  .cs-block > * + .cs-point{margin-top:clamp(20px,2.6vw,30px);}
  .cs-point + .cs-point{margin-top:clamp(16px,2vw,24px);}
  .cs-block > * + .cs-stats{margin-top:clamp(28px,3.4vw,40px);}
  .cs-block > .cs-stats + .cs-note{margin-top:clamp(20px,2.4vw,28px);}
  .cs-note{font-size:clamp(14px,1.15vw,15.5px); line-height:1.55; color:var(--body);}

  /* stacked "Overview / The problem" — two heading+body units, 64px apart */
  .cs-pair{display:flex; flex-direction:column; gap:clamp(40px,5vw,64px);}
  .cs-pair > * > * + *{margin-top:clamp(14px,1.7vw,18px);}
  .cs-pair__h{
    font-size:clamp(27px,3.4vw,40px); font-weight:400; line-height:1.1;
    letter-spacing:-0.014em; color:var(--ink);
  }
  .cs-pair__b{font-size:clamp(16px,1.35vw,18px); line-height:1.58; color:var(--body);}
  .cs-pair__b b, .cs-pair__b strong{color:var(--ink); font-weight:400;}

  /* ---------------- figure : full-width media, full-width caption ---------------- */
  .cs-figure{margin:0;}
  .cs-figure__media{
    background:#e4e1db; overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(20,20,20,0.06);
  }
  .cs-figure__media img{width:100%; height:auto; display:block;}
  .cs-figure figcaption{
    width:100%; margin-top:clamp(16px,1.8vw,22px);
    font-size:clamp(14px,1.25vw,16px); line-height:1.45; color:var(--body);
  }
  .cs-figure figcaption b{color:var(--ink); font-weight:400;}

  /* image already carries its own transparency + drop shadow — skip the fill/border */
  .cs-figure__media--plain{background:none; box-shadow:none;}

  /* ---------------- two-frame duo : a smaller "before" shot staggered behind and
     overlapping a larger "after" one, connected by a hand-drawn arrow. One-off
     composite, used only where a single figure or grid doesn't tell the
     before/after story. The back shot (--a) is a transparent PNG with its own
     baked-in drop shadow, so it stays unclipped; the front shot (--b) gets the
     real border-radius + shadow treatment and defines the row's height. */
  .cs-duo__row{position:relative;}
  .cs-duo__item img, .cs-duo__item video{width:100%; height:auto; display:block;}
  .cs-duo__item--a{position:absolute; left:0; top:20%; width:38%; z-index:1;}
  .cs-duo__item--b{
    position:relative; z-index:2; width:60%; margin-left:33%;
    border-radius:10px; overflow:hidden;
    box-shadow:0 24px 48px -16px rgba(20,20,20,0.32), inset 0 0 0 1px rgba(20,20,20,0.08);
  }
  .cs-duo__arrow{position:absolute; left:calc(23% - 30px); top:6px; width:clamp(72px,7vw,108px); height:auto; z-index:3; pointer-events:none;}
  @media (max-width:860px){
    .cs-duo__item--a, .cs-duo__arrow{display:none;}
    .cs-duo__item--b{width:100%; margin-left:0;}
  }

  /* supporting shots — a row of smaller frames, each caption spanning its own frame */
  .cs-grid2, .cs-grid3, .cs-grid4{display:grid; gap:clamp(14px,1.6vw,22px); align-items:start;}
  .cs-grid2{grid-template-columns:repeat(2,1fr);}
  .cs-grid3{grid-template-columns:repeat(3,1fr);}
  .cs-grid4{grid-template-columns:repeat(4,1fr);}
  .cs-grid2 .cs-figure figcaption, .cs-grid3 .cs-figure figcaption, .cs-grid4 .cs-figure figcaption{margin-top:12px; font-size:13px;}

  /* ---------------- media placeholders ----------------
     Each slot is a labelled box holding its own identifier. To drop in the
     real asset, replace the placeholder element with a plain media element:
       image  →  <div class="cs-figure__media"><img src="…" alt="…"></div>
       video  →  <div class="cs-figure__media"><video class="cs-video" autoplay muted
                    loop playsinline poster="…"><source src="…" type="video/mp4"></video></div>
     (for the hero, the wrapper class is .cs-hero-media). Then delete the
     --ph modifier and the inline aspect-ratio. */
  .cs-figure__media--ph, .cs-hero-media--ph{
    display:flex; align-items:center; justify-content:center;
    background:#e7e3dd; box-shadow:inset 0 0 0 1px rgba(20,20,20,0.16);
  }
  .cs-ph-label{
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--body); text-align:center; line-height:2.1; padding:1em;
  }
  .cs-ph-label b{color:var(--ink); font-weight:400;}
  .cs-ph-label small{
    display:block; margin-top:0.4em; font-size:11px; letter-spacing:0.03em;
    text-transform:none; opacity:0.75;
  }
  .cs-video{width:100%; height:auto; display:block;}

  /* ---------------- stat grid : 2-up inside the reading column ---------------- */
  .cs-stats{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(16px,2vw,24px); row-gap:clamp(30px,4vw,40px);
  }
  /* --rows : a single stacked column, for findings that carry a sentence each */
  .cs-stats--rows{grid-template-columns:1fr; row-gap:clamp(32px,4.5vw,44px);}
  .cs-stats--rows .cs-stat dd{max-width:62ch;}
  .cs-stat dt{
    font-size:clamp(30px,3.4vw,40px); font-weight:400; line-height:1;
    letter-spacing:-0.02em; color:var(--ink); font-feature-settings:"tnum";
  }
  .cs-stat dd{
    margin-top:clamp(14px,1.6vw,18px);
    font-size:clamp(15px,1.35vw,18px); line-height:1.5; color:var(--body);
  }
  .cs-stat dd b{color:var(--ink); font-weight:400;}

  /* ---------------- pull quote : the one loud break ---------------- */
  .cs-quote{background:var(--bg); padding:clamp(84px,12vw,150px) 0;}
  .cs-quote .cs-in{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:clamp(38px,6vw,72px);
  }
  .cs-quote__mark{display:block; line-height:0;}
  .cs-quote__mark svg{width:clamp(60px,7vw,88px); height:auto; display:block;}
  .cs-quote blockquote{
    font-size:clamp(28px,5vw,64px); font-weight:400; line-height:1.13;
    letter-spacing:-0.02em; color:var(--ink); max-width:26ch; text-wrap:balance;
  }
  .cs-quote cite{font-style:normal; font-size:17px; color:var(--body);}

  /* ---------------- close / CTA ---------------- */
  .cs-cta{display:inline-block; font-size:clamp(17px,1.6vw,20px); color:var(--accent);}
  .cs-block > .cs-cta{margin-top:clamp(22px,2.8vw,32px) !important;}

  /* ---------------- meta row : prev / next ---------------- */
  .cs-metarow{
    position:static; z-index:auto;
    background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:clamp(28px,4vw,44px) 0;
  }
  .cs-metarow .cs-in{display:flex; justify-content:space-between; gap:20px;}
  .cs-metarow a{font-size:16px; color:var(--ink);}
  .cs-metarow a:hover{color:var(--accent);}

  /* ---------------- responsive ---------------- */
  @media (max-width:860px){
    .cs-hero__row{grid-template-columns:1fr; gap:clamp(30px,7vw,44px);}
    .cs-spec{grid-template-columns:1fr 1fr; gap:22px 28px;}
    .cs-title{max-width:none;}
    .cs-grid2, .cs-grid3{grid-template-columns:1fr; gap:24px;}
    .cs-grid4{grid-template-columns:repeat(2,1fr); gap:20px;}
  }
  @media (max-width:540px){
    .cs-stats{grid-template-columns:1fr; row-gap:clamp(26px,7vw,34px);}
    .cs-spec{grid-template-columns:1fr;}
    .cs-hero__tags{flex-wrap:wrap; gap:16px;}
    .cs-grid4{grid-template-columns:1fr; gap:24px;}
    .cs-hero__tags .cs-rule{display:none;}
  }