/* Indy Sarlet — portfolio
   Plain CSS, no build step. Colours and sizes live in the tokens below. */

@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-tight-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#111;
  --bg:#f9f8f6;
  --soft:#efeeea;
  --soft-hover:#e7e7e4;
  --muted:#6b6b6b;
  --body:#4a4a4a;
  --line:#d9d9d4;
  --green:#aaeec4;
  --radius:20px;
  --page-max:1440px;
  --gutter:4vw;
  --gap:11px;
  --header-h:77px;
  --site-max:1500px;
  --container:min(var(--site-max), calc(100vw - 2 * var(--gutter)));
  --row:calc(var(--container) * .0215);
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* motion: yondr's page curve (slow start, fast middle, long soft landing) and two springs like Framer's */
  --ease-page:cubic-bezier(.8,0,.2,1);
  --spring:linear(0,0.034,0.114,0.214,0.319,0.421,0.514,0.597,0.669,0.73,0.781,0.824,0.859,0.887,0.91,0.929,0.944,0.956,0.965,0.973,0.979,0.983,0.987,0.99,0.992,0.994,0.995,0.996,0.997,0.998,0.998,0.999,1);
  --spring-b:linear(0,0.031,0.108,0.21,0.323,0.435,0.542,0.637,0.721,0.792,0.85,0.896,0.933,0.96,0.98,0.995,1.004,1.01,1.014,1.015,1.015,1.014,1.013,1.011,1.009,1.008,1.006,1.005,1.004,1.003,1.002,1.001,1);
  --f-head:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (max-width:767px){
  :root{--gutter:6vw;--header-h:76px;--row:24px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:calc(.12vw + 16px);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-top:var(--header-h)}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--green);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--bg)}
.site-header .inner{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{font-family:var(--f-head);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.28;text-decoration:none;justify-self:start}
.nav{display:flex;gap:4px}
.nav a{position:relative;display:inline-block;padding:8px 12px;font-size:14px;line-height:20px;letter-spacing:-.02em;text-decoration:none;opacity:.72;transition:opacity .2s ease}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:300px;background:var(--ink);color:#fff;font-family:var(--f-body);font-size:15px;font-weight:500;line-height:1.2;padding:14px 26px;text-decoration:none;cursor:pointer;transition:opacity .2s ease}
.btn:hover{opacity:.85}
.site-header .btn{justify-self:end;padding:10px 18px;font-size:14px}
.burger{display:none;justify-self:end;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:5px;right:5px;height:1px;background:var(--ink);transition:transform .3s ease,top .3s ease}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:26px}
.menu{position:fixed;inset:0;z-index:40;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + 24px) var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.menu nav{display:flex;flex-direction:column;gap:6px}
.menu nav a{font-family:var(--f-head);font-size:40px;font-weight:500;letter-spacing:-.02em;line-height:1.2;text-decoration:none}
.menu .btn{background:#fff;color:var(--ink);align-self:stretch}
.menu-open .menu{opacity:1;visibility:visible}
.menu-open .site-header{background:transparent}
.menu-open .site-header .logo{color:#fff}
.menu-open .burger span{background:#fff}
.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
.menu-open{overflow:hidden}
@media (max-width:767px){
  .site-header .nav,.site-header .btn{display:none}
  .burger{display:block}
  .site-header .inner{grid-template-columns:1fr auto}
}

/* ---------- Typography (text blocks) ---------- */
.txt h1,.txt h2,.txt h3,.txt h4{font-family:var(--f-head);font-weight:500;letter-spacing:-.02em;margin:2rem 0;color:var(--ink)}
.txt h1{font-size:calc(3.6vw + 16px);line-height:1.18}
.txt h2{font-size:calc(2.16vw + 16px);line-height:1.18}
.txt h3{font-size:calc(1.2vw + 16px);line-height:1.18}
.txt h4{font-size:calc(.6vw + 16px);line-height:1.08}
.txt p{margin:1rem 0}
.txt .sqsrte-large{font-size:calc(.36vw + 16px)}
.txt .sqsrte-small{font-size:14px}
.txt>:first-child{margin-top:0}
.txt>:last-child{margin-bottom:0}
.txt a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.txt ul,.txt ol{margin:1rem 0;padding-left:1.4em}
@media (max-width:767px){
  .txt h1{font-size:44px}
  .txt h2{font-size:34px}
  .txt h3{font-size:27px}
  .txt h4{font-size:21px}
  .txt p{font-size:17px}
  .txt .sqsrte-large{font-size:20px}
}
.pill{display:inline-block;margin:0 4px 8px 0;padding:7px 14px;border-radius:999px;background:var(--green);color:var(--ink);font-size:14px;font-weight:400;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}

/* ---------- Sections & the layout grid ----------
   Each section is a 24-column grid (8 on mobile) like the original site.
   Blocks are placed with --gd (desktop) and --gm (mobile) grid-area values. */
.sec{position:relative;padding:var(--pt-m,0) 0 var(--pb-m,0)}
@media (min-width:768px){.sec{padding:var(--pt,0) 0 var(--pb,0)}}
.grid{display:grid;position:relative;column-gap:var(--gap);row-gap:var(--gap);
  grid-template-columns:minmax(calc(var(--gutter) - var(--gap)),1fr) repeat(8,minmax(0,calc((var(--site-max) - var(--gap) * 7) / 8))) minmax(calc(var(--gutter) - var(--gap)),1fr);
  grid-template-rows:repeat(var(--rows-m,1),minmax(var(--row),auto))}
.grid.auto-m{grid-template-rows:none;grid-auto-rows:auto}
@media (min-width:768px){
  .grid{--row:calc(var(--container) * var(--rf,.0215))}
  .grid{grid-template-columns:minmax(calc(var(--gutter) - var(--gap)),1fr) repeat(24,minmax(0,calc((var(--site-max) - var(--gap) * 23) / 24))) minmax(calc(var(--gutter) - var(--gap)),1fr);
    grid-template-rows:repeat(var(--rows-d,1),minmax(var(--row),auto))}
  .grid.auto-m{grid-template-rows:repeat(var(--rows-d,1),minmax(var(--row),auto));grid-auto-rows:auto}
  .grid.auto-d{grid-template-rows:none;grid-auto-rows:auto}
  .sec[style*="--rows-tpl"]>.grid{grid-template-rows:var(--rows-tpl)}
}
.b{grid-area:var(--gm);z-index:var(--z,auto);min-width:0;position:relative}
@media (min-width:768px){.b{grid-area:var(--gd)}}
.b.txt{align-self:start}
.b.media{aspect-ratio:var(--ar-m);border-radius:var(--r,0);overflow:hidden;align-self:start;isolation:isolate}
@media (min-width:768px){.b.media{aspect-ratio:var(--ar-d)}}
.b.media.cover img,.b.media video,.b.media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.b.media.contain{display:grid;place-items:center;container-type:size;overflow:visible;border-radius:0}
.b.media.contain img{width:min(100cqw,calc(100cqh * var(--iar)));height:auto;aspect-ratio:var(--iar);border-radius:var(--r,0);object-fit:cover}
.b.media.has-link a{position:absolute;inset:0;z-index:1}
.b.btnb{align-self:center}
.b.social{align-self:start}
.media-ph{background:var(--soft)}

/* video controls */
.vbtn{position:absolute;right:14px;bottom:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(17,17,17,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vbtn svg{width:16px;height:16px}
.vbtn[hidden]{display:none}

/* ---------- Project hero media ---------- */
.proj-hero{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:8px auto 0;height:min(46vw,720px);border-radius:var(--radius);overflow:hidden;position:relative;background:var(--soft);isolation:isolate}
.proj-hero img,.proj-hero video{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.proj-hero{height:52vw;margin-top:12px}}

/* project intro block (title / subtitle / tags / intro text) */
.intro{text-align:center;padding-bottom:28px}
.intro h1{margin:0!important;font-size:clamp(40px,5vw,72px)!important;letter-spacing:-.02em;text-wrap:balance}
.intro h1+p{margin:14px 0 22px!important;font-size:22px!important;line-height:1.35;color:var(--muted)}
.intro strong{display:inline-block;margin:0 3px 8px;padding:7px 14px;border-radius:999px;background:var(--green);color:var(--ink);font-size:14px;font-weight:400;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}
.intro>p:nth-child(n+4){max-width:680px;margin:18px auto 0!important;text-align:left;font-size:17px!important;line-height:1.65;color:var(--body)}
.intro>p:nth-child(4){margin-top:36px!important}

/* ---------- Galleries ---------- */
.gal{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto}
.gal.full-bleed{width:100%;max-width:none}
.gal.inset{width:calc(100% - 4 * var(--gutter));max-width:calc(var(--page-max) - 2 * var(--gutter))}
.gal-grid{display:grid;grid-template-columns:repeat(var(--cols-m),1fr);gap:var(--g)}
@media (min-width:768px){.gal-grid{grid-template-columns:repeat(var(--cols),1fr)}}
.gal-grid figure{margin:0;aspect-ratio:var(--gar);border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.gal-grid img{width:100%;height:100%;object-fit:cover}
.gal-masonry{columns:var(--cols-m);column-gap:var(--g)}
@media (min-width:768px){.gal-masonry{columns:var(--cols)}}
.gal-masonry figure{margin:0 0 var(--g);break-inside:avoid;border-radius:var(--radius);overflow:hidden}
.gal-masonry img{width:100%;height:auto}
.gal-strips{display:flex;flex-wrap:wrap;gap:var(--g)}
.gal-strips figure{margin:0;flex:var(--iar) 1 calc(var(--iar) * var(--rh));aspect-ratio:var(--iar);border-radius:var(--radius);overflow:hidden}
.gal-strips img{width:100%;height:100%;object-fit:cover}
.gal-strips::after{content:"";flex:999 1 0}
.gal-reel{position:relative}
.gal-reel .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gutter)}
.gal-reel .track::-webkit-scrollbar{display:none}
.gal-reel figure{margin:0;flex:0 0 auto;height:var(--vh);scroll-snap-align:center;border-radius:var(--radius);overflow:hidden}
.gal-reel img{height:100%;width:auto}
@media (max-width:767px){.gal-reel figure{height:min(var(--vh),60vw)}}
.gal-ctrl{display:flex;justify-content:center;gap:10px;margin-top:18px}
.gal-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.gal-ctrl button:hover{background:var(--soft)}
.gal-ctrl svg{width:18px;height:18px}
.gal-slides{position:relative;aspect-ratio:var(--sar,16/9);max-height:82vh;margin:0 auto}
.gal-slides figure{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .8s ease}
.gal-slides figure.on{opacity:1}
.gal-slides img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:16px}
.gal-slides .gal-ctrl{position:absolute;left:0;right:0;bottom:-8px;margin:0}


/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--spring),transform 1.1s var(--spring)}
  .js .reveal.in{opacity:1;transform:none}
}

/* ---------- Home ---------- */
.hero{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:39px 0 64px}
.hero .hi{margin:0 0 10px;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--muted)}
.hero h1{margin:0 0 28px;font-family:var(--f-head);font-weight:500;font-size:calc(3.6vw + 16px);line-height:1.18;letter-spacing:-.015em;max-width:21ch;text-wrap:balance;word-spacing:-.22em}
.hero h1 span{display:inline-block;margin-right:.22em}
.hero .tags{margin:0}
@media (max-width:767px){.hero{padding:28px 0 40px}.hero h1{font-size:44px}.hero .hi{font-size:19px}}
@media (prefers-reduced-motion:no-preference){
  .hero .hi{animation:is-fade-blur .8s ease .05s both}
  .hero h1 span{animation:is-word 1s var(--spring) both;animation-delay:calc(.25s + var(--i) * .07s)}
  .hero .pill{animation:is-pop .75s var(--spring-b) both;animation-delay:calc(.75s + var(--i) * .06s)}
}
@keyframes is-fade-blur{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes is-word{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes is-pop{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:none}}

.reel{position:relative;overflow-x:clip;margin-bottom:7px}
.reel::before{content:"Watch my reel  ·  Watch my reel  ·  Watch my reel  ·  Watch my reel  ·  ";position:absolute;top:50%;left:0;z-index:0;width:max-content;white-space:pre;font-family:var(--f-head);font-weight:500;font-size:clamp(56px,8vw,150px);line-height:1;letter-spacing:-.02em;color:#e2e2de;transform:translate(0,-50%);animation:is-marquee 60s linear infinite;pointer-events:none}
@keyframes is-marquee{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}
.reel .frame{position:relative;z-index:1;width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;aspect-ratio:2/1;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.reel video{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .reel .frame{animation:is-settle linear both;animation-timeline:scroll(root);animation-range:0px 500px}
  }
}
@media (prefers-reduced-motion:reduce){.reel::before{animation:none}}
@keyframes is-settle{from{transform:scale(1);border-radius:20px}to{transform:scale(.82);border-radius:56px}}

.work{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:105px 0 120px;display:grid;grid-template-columns:1fr 1fr;column-gap:25px;row-gap:56px}
@media (max-width:767px){.work{grid-template-columns:1fr;row-gap:44px;padding:56px 0 72px}}
.card{display:block;text-decoration:none;color:inherit}
.card .thumb{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:var(--soft)}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card h3{margin:16px 0 0;font-family:var(--f-head);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.card .sub{margin:2px 0 10px;font-size:15px;line-height:1.4;letter-spacing:-.01em;color:#666}
.card .tags{display:flex;flex-wrap:wrap;gap:6px}
.card .tags span{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;background:var(--green);font-size:12px;line-height:1.3;letter-spacing:-.01em;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .card .thumb img{transition:transform 1s var(--spring)}
  .card:hover .thumb img{transform:scale(1.06)}
  .card .thumb{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M50 5C67 4 86 15 90 35C94 55 85 77 65 87C47 95 23 90 12 72C2 55 5 30 19 16C27 9 38 6 50 5Z' fill='%23111111' fill-opacity='0.72'/%3E%3Ctext x='49' y='46' font-family='Inter,Helvetica Neue,Arial,sans-serif' font-size='12.5' font-weight='500' fill='%23ffffff' text-anchor='middle'%3EOpen%3C/text%3E%3Ctext x='49' y='61' font-family='Inter,Helvetica Neue,Arial,sans-serif' font-size='12.5' font-weight='500' fill='%23ffffff' text-anchor='middle'%3EProject%3C/text%3E%3C/svg%3E") 48 48,pointer}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .card{animation:is-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes is-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ---------- About ---------- */
.about{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:48px 0;display:grid;grid-template-columns:repeat(24,1fr);column-gap:var(--gap)}
.about .photo{grid-column:4/12;grid-row:1/3;border-radius:30px;overflow:hidden;aspect-ratio:429/685;align-self:start}
.about .photo img{width:100%;height:100%;object-fit:cover}
.about .intro-txt{grid-column:13/21;grid-row:1}
.about .intro-txt h1{margin:0 0 18px;font-family:var(--f-head);font-weight:500;font-size:2.8rem;line-height:1.1;letter-spacing:-.02em}
.about .intro-txt p{margin:0 0 16px;font-size:17px;line-height:1.65;color:var(--body)}
.about .intro-txt p.lead{font-size:22px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.about .intro-txt .btn{margin-top:14px}
.about .cv{grid-column:4/15;grid-row:3;padding-top:48px}
.about .cv h4{margin:28px 0 10px;font-family:var(--f-head);font-size:20px;font-weight:500;letter-spacing:-.02em}
.about .cv h4:first-child{margin-top:0}
.about .cv p{margin:0 0 6px;font-size:16px;line-height:1.6;color:var(--muted)}
.about .cv a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.about .cv a:hover{border-bottom-color:var(--ink)}
.skills{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:24px 0 64px;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.skills h2{margin:0 0 18px;font-family:var(--f-head);font-weight:500;font-size:28px;letter-spacing:-.02em;line-height:1.18}
.skills .pills{display:flex;flex-wrap:wrap;gap:8px}
.skills .pill{margin:0}
@media (max-width:767px){
  .about{grid-template-columns:1fr;row-gap:28px;padding:28px 0}
  .about .photo,.about .intro-txt,.about .cv{grid-column:1;grid-row:auto}
  .about .photo{aspect-ratio:4/5}
  .about .cv{padding-top:0}
  .skills{grid-template-columns:1fr;row-gap:36px}
}

/* ---------- Contact ---------- */
.contact{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:48px 0 120px;display:grid;grid-template-columns:repeat(24,1fr);column-gap:var(--gap)}
.contact .lhs{grid-column:1/12}
.contact h1{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(36px,4vw,56px);line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.contact .lede{margin:20px 0 0;max-width:34ch;font-size:17px;line-height:1.65;color:var(--body)}
.contact .alt{margin-top:48px}
.contact .alt p{margin:0 0 6px;font-size:15px;color:var(--muted)}
.contact .alt p.mail{margin-bottom:14px;font-size:24px;letter-spacing:-.01em}
.contact .alt a{color:var(--ink);text-decoration:none;border-bottom:1px solid #cfcfca;transition:border-color .2s ease}
.contact .alt a:hover{border-bottom-color:var(--ink)}
.form-card{grid-column:14/25;align-self:start;position:relative;overflow:hidden;isolation:isolate;padding:40px;border-radius:var(--radius);background:var(--soft)}
.form-card::before{content:"";position:absolute;z-index:-1;top:-180px;right:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(170,238,196,.9) 0%,rgba(170,238,196,0) 65%);animation:is-drift 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes is-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,70px) scale(1.15)}100%{transform:translate(-30px,160px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.form-card::before{animation:none}}
.form-card fieldset{border:0;margin:0 0 18px;padding:0}
.form-card legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:500}
.form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card label{display:block;margin-bottom:18px;font-size:14px;font-weight:500}
.form-card fieldset label{margin-bottom:0;font-weight:400;font-size:13px;color:var(--muted)}
.form-card input,.form-card textarea{display:block;width:100%;margin-top:6px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink);transition:border-color .2s ease}
.form-card textarea{min-height:140px;resize:vertical}
.form-card input:focus,.form-card textarea:focus{border-color:var(--ink);outline:none}
.form-card .hp{position:absolute;left:-5000px}
.form-status{margin:14px 0 0;font-size:15px}
@media (max-width:767px){
  .contact{grid-template-columns:1fr;row-gap:32px;padding:28px 0 72px}
  .contact .lhs,.form-card{grid-column:1}
  .form-card{padding:24px}
}

/* ---------- Project pagination ---------- */
.pager{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:48px 0 32px;display:flex;justify-content:space-between;gap:24px}
.pager a{display:flex;align-items:center;gap:16px;text-decoration:none;max-width:48%}
.pager .next{margin-left:auto;text-align:right}
.pager small{display:block;font-size:14px;color:var(--muted)}
.pager strong{display:block;font-family:var(--f-head);font-weight:500;font-size:calc(1.44vw + 16px);line-height:1.18;letter-spacing:-.02em}
.pager svg{flex:0 0 auto;width:28px;height:28px;transition:transform .25s ease}
.pager .prev:hover svg{transform:translateX(-4px)}
.pager .next:hover svg{transform:translateX(4px)}
@media (max-width:767px){.pager strong{font-size:22px}.pager svg{width:22px;height:22px}}

/* ---------- Footer ---------- */
.site-footer{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:24px auto 40px;padding:56px 48px;border-radius:var(--radius);background:var(--soft);display:grid;grid-template-columns:repeat(24,1fr);column-gap:var(--gap);align-items:start}
.site-footer .say{grid-column:1/9}
.site-footer h3{margin:0;font-family:var(--f-head);font-weight:500;font-size:calc(1.2vw + 16px);line-height:1.18;letter-spacing:-.02em}
@media (min-width:1024px){.site-footer h3{white-space:nowrap}}
.site-footer .mail{margin:24px 0 0;font-size:calc(.36vw + 16px)}
.site-footer .mail a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.site-footer .fcta{grid-column:17/25;justify-self:end;align-self:end}
.site-footer .fbar{grid-column:1/-1;margin-top:48px;padding-top:20px;border-top:1px solid #dcdbd6;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.site-footer .fbar a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.site-footer .fbar a:hover{border-bottom-color:currentColor}
.social a{display:inline-grid;place-items:center;width:32px;height:32px;color:var(--ink)}
.social svg{width:24px;height:24px}
@media (max-width:767px){
  .site-footer{grid-template-columns:1fr;row-gap:24px;padding:40px 24px}
  .site-footer .say,.site-footer .fcta{grid-column:1}
  .site-footer .fcta{justify-self:start}
  .site-footer .fbar{margin-top:16px}
  .site-footer h3{font-size:27px}
}

/* 404 */
.notfound{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:12vh 0}
.notfound h1{font-family:var(--f-head);font-weight:500;font-size:clamp(40px,6vw,88px);letter-spacing:-.02em;line-height:1.1;margin:0 0 20px}
.notfound p{color:var(--muted);margin:0 0 28px}

/* contain-mode videos keep their own aspect ratio inside the block */
.b.media.contain video{position:static;width:min(100cqw,calc(100cqh * var(--iar)));height:auto;aspect-ratio:var(--iar);border-radius:var(--r,0);object-fit:cover}
.b.media.contain .vbtn{right:auto;left:14px}

/* Project pages on phones: blocks stack in one column, like the original site */
@media (max-width:767px){
  .sec:has(.stack-m){padding:28px 0}
  .grid.stack-m{display:flex;flex-direction:column;gap:20px;padding:0 6vw}
  .grid.stack-m>.b{order:var(--o,999);width:100%;grid-area:auto}
  .grid.stack-m>.b.media{aspect-ratio:4/3;border-radius:var(--r,0);overflow:hidden;container-type:normal;display:block}
  .grid.stack-m>.b.media img,.grid.stack-m>.b.media video,.grid.stack-m>.b.media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
  .grid.stack-m>.b.media:has(video),.grid.stack-m>.b.media:has(iframe){aspect-ratio:16/9}
}

/* ---------- Project pages: header (title, subtitle, tags) above the hero ---------- */
.proj-head{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:56px 0 40px}
.proj-head h1{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(40px,4.4vw,64px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.proj-sub{margin:14px 0 0;max-width:46ch;font-family:var(--f-head);font-size:clamp(19px,1.5vw,24px);line-height:1.4;letter-spacing:-.01em;color:#2b2b2b}
.proj-sub a{color:inherit;text-underline-offset:3px}
.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.proj-tags .pill{margin:0}
.proj .proj-hero{margin-top:0;margin-bottom:clamp(32px,3.2vw,48px)}
@media (max-width:767px){
  .proj-head{padding:28px 0 28px}
  .proj .proj-hero{margin-bottom:32px}
}

/* ---------- You might also like ---------- */
.more{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto;padding:clamp(64px,8vw,120px) 0 clamp(48px,6vw,96px)}
.more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.5vw,48px)}
.more-head h2{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(34px,3.6vw,56px);line-height:1.08;letter-spacing:-.025em}
.more-all{flex:0 0 auto;display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(17,17,17,.06);font-size:14px;text-decoration:none;color:var(--ink);transition:background .2s ease,border-color .2s ease}
.more-all:hover{background:var(--soft);border-color:#cfcfca}
.more-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:25px;row-gap:44px}
.more .card .thumb{aspect-ratio:5/4}
@media (max-width:767px){
  .more-head{flex-direction:column;align-items:flex-start;gap:16px}
  .more-grid{grid-template-columns:1fr}
  .more .card .thumb{aspect-ratio:4/3}
}
#work{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ---------- Project pages: one consistent flow ---------- */
.flow{--bgap:clamp(72px,7.5vw,120px);--mgap:12px;width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto}
.band+.band{margin-top:var(--bgap)}
.band>*+*{margin-top:32px}
.chap{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(30px,3vw,44px);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.bh{margin:0;font-family:var(--f-head);font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.band>.chap+*{margin-top:28px}
.band>.bh+*{margin-top:20px}
.band>.chap+.bh{margin-top:12px}

/* text */
.tx{max-width:720px}
.tx h3{margin:0 0 12px;font-family:var(--f-head);font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.tx h3+h3{margin-top:-4px;font-size:18px;color:#2b2b2b}
.tx p,.tx li{margin:0 0 1em;font-size:16px;line-height:1.7;color:#4f4f4f}
.tx>:last-child{margin-bottom:0}
.tx p+h3,.tx ul+h3,.tx ol+h3{margin-top:28px}
.tx.lead p{font-size:17px}
.tx ul,.tx ol{margin:0 0 1em;padding-left:1.3em}
.tx a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tx strong{font-weight:600;color:#2b2b2b}
.tcols{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.tcols.n3{--n:3}
.tcols .tx{max-width:none}
.quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mgap)}
.quotes blockquote{margin:0;padding:22px 22px 26px;border-radius:16px;background:var(--soft)}
.quotes p{margin:0;font-family:var(--f-head);font-size:17px;line-height:1.45;letter-spacing:-.01em;color:#2b2b2b}
.quotes p+p{margin-top:.6em}

/* media rows: every image in a row shares one height, nothing is cropped */
.mrows{display:flex;flex-direction:column;gap:var(--mgap)}
.mrows+.mrows{margin-top:var(--mgap)}
.jrow{display:flex;gap:var(--mgap);width:100%;max-width:calc(86vh * var(--sar));margin:0 auto}
.mi{flex:var(--g) 1 0;min-width:0;margin:0}
.mbox{position:relative;aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;background:var(--soft);isolation:isolate}
.mbox>img,.mbox>video,.mbox>iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.mi.alpha .mbox{background:none;border-radius:0}
.mi.alpha .mbox>img{object-fit:contain}
.mbox>.lnk{position:absolute;inset:0;z-index:1}
.mi figcaption{margin-top:10px;font-size:14px;line-height:1.4;color:var(--muted)}
.mi.yt .mbox{background:#111}
.mi.yt .mbox>a{position:absolute;inset:0;display:block}
.mi.yt .mbox img{width:100%;height:100%;object-fit:cover}
.mi.yt .play{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);transition:transform .25s ease}
.mi.yt .play svg{width:100%;height:100%}
.mi.yt a:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.mi.yt .mbox>button.vplay{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer}
.mi.yt button.vplay:hover .play,.mi.yt button.vplay:focus-visible .play{transform:translate(-50%,-50%) scale(1.07)}
.mi.yt .mbox>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}

/* text next to media */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.split.tr{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.tr .s-txt{order:2}
.split.pt{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.tr.pt{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.s-txt{display:flex;flex-direction:column;gap:40px}
.s-txt .tx{max-width:620px}

/* image cards (image with its own text underneath) */
.cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(24px,2.5vw,40px)}
.cards.n2{--n:2}.cards.n4{--n:4}
.crd .mi{margin-bottom:20px}
.crd .tx h3{font-size:19px}

/* galleries use the same container, gap and radius */
.flow .gal{width:100%;max-width:none}
.flow .gal-reel .track{padding:0;gap:var(--mgap)}
.flow .gal-grid figure,.flow .gal-masonry figure,.flow .gal-strips figure,.flow .gal-reel figure{border-radius:16px}

@media (max-width:767px){
  .flow{--bgap:64px;--mgap:10px}
  .band>*+*{margin-top:24px}
  .chap{font-size:30px}
  .bh,.tx h3{font-size:20px}
  .split,.split.tr,.split.pt,.split.tr.pt{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .split.tr .s-txt{order:0}
  .s-txt{gap:32px}
  .tcols{grid-template-columns:1fr;gap:32px}
  .quotes{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:40px}
  .jrow{max-width:none}
  .jrow.wide{flex-direction:column}
  .jrow.wide .mi{flex:none}
  .jrow:is(.n3,.n4,.n5,.n6){display:grid;grid-template-columns:1fr 1fr}
  .jrow:is(.n3,.n4,.n5,.n6) .mbox{aspect-ratio:4/3}
  .jrow.port:is(.n3,.n4,.n5,.n6) .mbox{aspect-ratio:3/4}
  .jrow:is(.n3,.n5) .mi:first-child{grid-column:span 2}
  .jrow:is(.n3,.n5) .mi:first-child .mbox{aspect-ratio:16/9}
  .jrow.port:is(.n3,.n5) .mi:first-child .mbox{aspect-ratio:4/3}
  .jrow .mi.alpha .mbox{aspect-ratio:var(--ar)!important}
}
@media (min-width:768px) and (max-width:1100px){
  .split,.split.tr,.split.pt,.split.tr.pt{grid-template-columns:minmax(0,1fr);gap:32px}
  .split.tr .s-txt{order:0}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.n4{--n:2}
}

/* sliders: one widescreen image at a time, same width as everything else */
.flow .gal-reel figure{flex:0 0 100%;height:auto;aspect-ratio:16/9;scroll-snap-align:start;background:var(--soft)}
.flow .gal-reel img{width:100%;height:100%;object-fit:cover}

/* slider arrows: solid black, green on hover */
.gal-ctrl{gap:12px;margin-top:20px}
.gal-ctrl button{width:48px;height:48px;border:0;background:var(--ink);color:#fff;transition:background .2s ease,color .2s ease,transform .2s ease}
.gal-ctrl button:hover{background:var(--green);color:var(--ink);transform:scale(1.06)}
.gal-ctrl button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gal-ctrl svg{width:20px;height:20px;stroke-width:2}

/* home intro: calmer headline, same scale as the project titles */
.hero h1{font-size:clamp(40px,3.8vw,64px);line-height:1.12;max-width:24ch;margin-bottom:24px}
.hero .hi{font-size:20px}
@media (max-width:767px){.hero h1{font-size:38px}.hero .hi{font-size:18px}}

/* organic "Open project" cursor */
.blob-cursor{position:fixed;left:0;top:0;z-index:60;width:104px;height:104px;margin:-52px 0 0 -52px;pointer-events:none;visibility:hidden;transform:translate3d(-200px,-200px,0) scale(0);will-change:transform}
.blob-shape{position:absolute;inset:0;border-radius:50%;background:rgba(17,17,17,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);will-change:transform,border-radius}
.blob-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;font-family:var(--f-body);font-size:13px;font-weight:500;line-height:1.15;letter-spacing:-.01em;opacity:0;transition:opacity .25s ease .05s}
.blob-cursor.on .blob-label{opacity:1}
.has-blob .card .thumb{cursor:none}

/* ---------- Motion extras ---------- */
/* line-by-line text reveal (only active when JavaScript runs) */
.lr{opacity:0}
.lr.lr-on{opacity:1}
.lr-on .lw{display:inline-block;opacity:0;transform:translateY(.6em);transition:opacity .9s var(--spring),transform 1s var(--spring)}
.lr-go .lw{opacity:1;transform:none}
/* page morph between a project card and the project header */
@view-transition{navigation:auto}
.proj-hero{view-transition-name:proj-hero}
.site-header{view-transition-name:site-header}
::view-transition-group(proj-hero){animation-duration:1s;animation-timing-function:var(--ease-page)}
::view-transition-old(proj-hero),::view-transition-new(proj-hero){height:100%;width:100%;object-fit:cover;overflow:clip}
/* page change, same as yondr: the old page shrinks back and fades upward, the new page rises from below
   while a wipe reveals it bottom-to-top; 1s on a slow-fast-slow curve (menu bar stays put) */
@property --wipe{syntax:'<number>';initial-value:1;inherits:false}
::view-transition-old(*),::view-transition-new(*){mix-blend-mode:normal;backface-visibility:hidden}
::view-transition-old(root){animation:vt-out 1s var(--ease-page) both}
::view-transition-new(root){animation:vt-in 1s var(--ease-page) .01s both;
  -webkit-mask-image:linear-gradient(0deg,#000 calc(100% * var(--wipe)),transparent calc(100% * var(--wipe)));mask-image:linear-gradient(0deg,#000 calc(100% * var(--wipe)),transparent calc(100% * var(--wipe)))}
@keyframes vt-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10%) scale(.9)}}
@keyframes vt-in{from{opacity:0;transform:translateY(30%);--wipe:0}to{opacity:1;transform:none;--wipe:1}}
/* same feel in browsers without page transitions (e.g. Firefox) */
@keyframes page-in{from{opacity:0;transform:translateY(30vh);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.enter main,.enter .site-footer{animation:page-in 1s var(--ease-page) both}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* magnetic buttons */
.btn,.more-all{transition:opacity .2s ease,background .2s ease,border-color .2s ease,transform .7s var(--spring-b)}
.btn.mag-on,.more-all.mag-on{transition:opacity .2s ease,background .2s ease,border-color .2s ease,transform .18s ease-out}
/* parallax media */
.plx{will-change:transform;transform:scale(1.12)}

/* hover preview clips on project cards */
.card .thumb{position:relative}
.card .thumb .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease,transform 1s var(--spring);pointer-events:none}
.card .thumb.pv-on .pv{opacity:1}
@media (hover:hover) and (pointer:fine){.card:hover .thumb .pv{transform:scale(1.06)}}


/* ---------- yondr-inspired details ---------- */
/* nav dot: rises into place on hover, stays under the current page */
.nav a::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink);opacity:0;transform:translateY(7px);transition:opacity .3s ease,transform .5s var(--spring-b)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{opacity:1;transform:none}
/* soft layered shadow under buttons */
.btn{box-shadow:0 1px 1px rgba(0,0,0,.12),0 1.5px 3px rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.2),0 12px 24px -6px rgba(0,0,0,.3)}
.menu .btn{box-shadow:none}
.gal-ctrl button,.more-all{box-shadow:0 1px 1px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.1),0 8px 16px -6px rgba(0,0,0,.2)}
.more-all{background:var(--bg)}
/* numbered sections with a divider line */
.band.numbered{border-top:1px solid #e3e2de;padding-top:clamp(36px,4.5vw,64px)}
.nhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.num{font-family:var(--f-head);font-weight:600;font-size:clamp(52px,5.4vw,84px);line-height:.85;letter-spacing:-.04em;color:#dedcd7;font-variant-numeric:tabular-nums}
.ntitle{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.nmain .tx{margin-top:22px}
.nbody{margin-top:clamp(28px,3.5vw,48px)}
.nbody>*+*{margin-top:32px}
@media (max-width:767px){
  .nhead{grid-template-columns:1fr;gap:10px}
  .num{font-size:44px}
  .ntitle{font-size:28px}
  .nbody>*+*{margin-top:24px}
}

/* brands strip: three slow rows drifting in alternate directions, faded at the edges (after yondr's ticker) */
.clients{padding:clamp(28px,3vw,48px) 0 0;overflow:hidden}
.clients .ch{width:calc(100% - 2 * var(--gutter));max-width:var(--page-max);margin:0 auto}
.clients h2{margin:0;font-family:var(--f-head);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.ltick{--speed:34s;container-type:inline-size;width:100%;max-width:var(--page-max);margin:clamp(28px,3.5vw,52px) auto 0;display:flex;flex-direction:column;gap:0;
  -webkit-mask-image:radial-gradient(50% 95% at 50% 50%,#000 18%,rgba(0,0,0,.5) 52%,transparent 98%);mask-image:radial-gradient(50% 95% at 50% 50%,#000 18%,rgba(0,0,0,.5) 52%,transparent 98%)}
.lrow{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:lt-l var(--speed) linear infinite}
.lrow.rev{animation-name:lt-r}
.lrow:nth-child(3){animation-duration:calc(var(--speed) * 1.12)}
.lrow{--cw:max(28cqw, calc(112cqw / var(--n, 4)))}
.lrow li{flex:0 0 28vw;flex-basis:var(--cw);height:84px;display:flex;align-items:center;justify-content:center}
.lrow img{display:block;max-width:none;opacity:.9}
@keyframes lt-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lt-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:767px){
  .ltick .lrow{animation-duration:calc(var(--n, 4) * 7.5s)}
  .ltick{-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.5) 22%,#000 50%,rgba(0,0,0,.5) 78%,transparent);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.5) 22%,#000 50%,rgba(0,0,0,.5) 78%,transparent)}
  .lrow{--cw:max(46cqw, calc(112cqw / var(--n, 4)))}
  .lrow li{flex-basis:46vw;flex-basis:var(--cw);height:64px}
  .lrow img{transform:scale(.8)}
}
@media (prefers-reduced-motion:reduce){.lrow{animation:none}}
.clients + .work{padding-top:clamp(56px,6vw,88px)}

/* video player in the site's style: a frosted pill with play, time, a green progress line, sound and full screen */
.vp-box{--p:0%;--b:0%}
.vp-box .vp-video{cursor:pointer}
.vp{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:999px;
  background:rgba(17,17,17,.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.18),0 12px 24px -6px rgba(0,0,0,.3);
  color:#fff;font-family:var(--f-body);font-size:13px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transition:opacity .35s ease,transform .6s var(--spring)}
.vp-hide .vp{opacity:0;transform:translateY(10px);pointer-events:none}
.vp-hide .vp-video{cursor:none}
.vp button{flex:0 0 auto;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,transform .5s var(--spring-b)}
.vp button svg{width:18px;height:18px}
.vp button:hover{background:rgba(255,255,255,.14)}
.vp button:active{transform:scale(.9)}
.vp .vp-play{background:#fff;color:var(--ink)}
.vp .vp-play:hover{background:var(--green)}
.vp-time{padding:0 6px;white-space:nowrap;opacity:.9}
.vp-bar{position:relative;flex:1 1 auto;height:24px;margin:0 6px;cursor:pointer;touch-action:none;outline:none}
.vp-bar::before,.vp-buf,.vp-fill{content:"";position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:4px}
.vp-bar::before{right:0;background:rgba(255,255,255,.22)}
.vp-buf{width:var(--b);background:rgba(255,255,255,.3)}
.vp-fill{width:var(--p);background:var(--green)}
.vp-knob{position:absolute;top:50%;left:var(--p);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:scale(0);transition:transform .45s var(--spring-b)}
.vp-bar:hover .vp-knob,.vp-bar:focus-visible .vp-knob,.vp-drag .vp-knob{transform:scale(1)}
.vp-bar:hover::before,.vp-drag .vp-bar::before{background:rgba(255,255,255,.3)}
.vp-big{position:absolute;z-index:2;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;padding:0;border:0;border-radius:50%;
  background:rgba(17,17,17,.62);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.85);pointer-events:none;
  transition:opacity .3s ease,transform .6s var(--spring-b)}
.vp-big svg{width:30px;height:30px;margin-left:3px}
.vp-paused .vp-big{opacity:1;transform:none;pointer-events:auto}
.vp-big:hover{transform:scale(1.07)}
.vp-box:fullscreen{border-radius:0;background:#000}
.vp-box:fullscreen .vp-video{object-fit:contain}
@media (max-width:767px){
  .vp{left:10px;right:10px;bottom:10px;gap:2px;font-size:12px}
  .vp button{width:30px;height:30px}
}
@media (max-width:420px){.vp-time .vp-dur,.vp-time{display:none}}
@media (prefers-reduced-motion:reduce){.vp,.vp-knob,.vp-big,.vp button{transition:none}}