body{margin:0}
.p{--m:color-mix(in srgb,var(--t) 72%,transparent);--l:color-mix(in srgb,var(--t) 55%,transparent);--n:color-mix(in srgb,var(--t) 28%,transparent);--o:#E8590C;position:relative;background:#D9D9D9;color:var(--t);font-family:'Manrope','Helvetica Neue',Arial,sans-serif;font-weight:400;overflow-x:hidden}
.p *{box-sizing:border-box}
.in{position:relative;max-width:var(--pw);margin:0 auto;padding:0 40px}
.cols{position:absolute;inset:0;max-width:var(--pw);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none;padding:0 40px}
.cols i{border-left:1px solid rgba(255,255,255,.55)}
.cols i:last-child{border-right:1px solid rgba(255,255,255,.55)}
.lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--l)}
.d{font-weight:200;letter-spacing:-.02em;line-height:1.02;margin:0}
.hero{position:relative;background:#D9D9D9;color:var(--t);overflow:hidden}
.hbgl,.hbgr{display:none}
.hin{position:relative;max-width:var(--pw);margin:0 auto;height:980px;padding:0 40px}
.hrow{position:absolute;left:40px;right:40px;top:40px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.hl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--l)}
.ghost{position:absolute;left:50%;transform:translateX(-50%);text-align:center;top:90px;font-size:200px;font-weight:200;letter-spacing:-.03em;line-height:.95;color:rgba(0,0,0,.065);white-space:nowrap;user-select:none}
.ring{position:absolute;left:59%;top:180px;width:170px;height:170px;border:14px solid var(--o);border-radius:50%}
.hstage{position:absolute;left:9%;top:110px;width:82%;aspect-ratio:3/2}.hs{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:hsf 45s linear infinite both}@keyframes hsf{0%{opacity:0}3.33%{opacity:1}33.33%{opacity:1}36.67%{opacity:0}100%{opacity:0}}.hfw{flex:1}.hft{position:relative;height:48px;margin-top:12px}.hft .hfa{position:absolute;inset:0;margin:0;font-size:14px;line-height:1.6;color:var(--m);opacity:0;animation:hsf 45s linear infinite both}
.hh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;padding:0;white-space:nowrap}
.hfoot{position:absolute;left:40px;bottom:56px;display:flex;align-items:flex-end;gap:0}
.hcard{border-top:1px solid var(--line);padding:24px 0 0;width:300px;margin-left:40px}
.hcard p,.hfeat p{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--m)}
.hfeat{position:absolute;right:40px;bottom:56px;width:380px;padding:24px 0 0;display:flex;justify-content:space-between;gap:24px;align-items:center;text-decoration:none;color:var(--t);border-top:1px solid var(--line);transition:border-color .6s}
.hfeat:hover{border-top-color:var(--o)}
.harr{flex:none;width:44px;height:44px;border:1px solid #8a8a8a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;transition:color .5s,border-color .5s}
.hfeat:hover .harr{color:var(--o);border-color:var(--o)}
@media (max-width:820px){.hin{height:auto;padding:100px 24px 48px;display:flex;flex-direction:column;gap:32px}.hrow{left:24px;right:24px;display:flex;flex-direction:column;gap:8px}.hstage,.hfoot,.hfeat{position:static;width:100%}.hfoot{flex-direction:column;align-items:stretch}.hcard{margin:16px 0 0;width:100%}.ghost,.ring,.hbgr{display:none}}
.hr{height:1px;background:var(--line);transform-origin:left;animation:draw 1.8s ease both}
.sec{position:relative;padding:140px 0}
.body{font-size:17px;line-height:1.7;color:var(--m);margin:0}
.btn{display:inline-block;background:var(--o);color:#fff;padding:18px 36px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border:1px solid var(--o);transition:background .6s,color .6s}
.btn:hover{background:transparent;color:var(--o)}
.panel{border-left:1px solid var(--line);padding:0 20px 0 20px;display:flex;flex-direction:column;justify-content:space-between;height:520px;transition:border-color .6s;text-decoration:none;color:inherit}
.panel:hover{border-left-color:var(--o)}
.panel:hover .t{color:var(--o)}
.wp{position:relative;display:block;border-left:1px solid var(--line);text-decoration:none;transition:border-color .6s}.ph{display:block;position:relative;overflow:hidden;aspect-ratio:160/502}.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply;transition:transform 1.4s cubic-bezier(.2,.6,.2,1);transform-origin:50% 60%}.fd{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}.wl{display:block;padding:20px 0 0 16px;transition:color .6s}.wp:hover{border-left-color:var(--o)}.wp:hover .ph img{transform:scale(1.07)}.ph .clr{opacity:0;transition:opacity .6s,transform 1.4s cubic-bezier(.2,.6,.2,1)}.wp:hover .ph .clr{opacity:1}.ph:has(.clr) img:not(.clr){transition:opacity .6s,transform 1.4s cubic-bezier(.2,.6,.2,1)}.wp:hover .ph:has(.clr) img:not(.clr){opacity:0}.wp:hover .wl{color:var(--o)}
.img{background:#8f8f8f;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);filter:grayscale(1)}
.cell{padding:28px 20px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--m);transition:color .5s}
.cell:hover{color:var(--o)}
.step{border-left:1px solid var(--line);padding:0 24px 40px;transition:border-color .6s}
.step b{display:block;font-weight:200;font-size:120px;line-height:1;color:var(--n);letter-spacing:-.04em;transition:color .6s;margin-bottom:56px}
.step:hover{border-left-color:var(--o)}
.step:hover b{color:var(--o)}
.lnk{color:var(--t);text-decoration:none;border-bottom:1px solid var(--o)}
.lnk:hover{color:var(--o)}
.rv{animation:rise 1.4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:view()){.sec .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}
@media (prefers-reduced-motion:reduce){.hs,.hfa{animation:none!important}.hs:first-child,.hfa:first-child{opacity:1}.rv,.hr,.sec .rv{animation:none}.btn,.panel,.step,.step b,.cell,.ph img{transition:none}.wp:hover .ph img{transform:none}}
@media (max-width:820px){.g2,.g4,.g3{grid-template-columns:1fr!important}.d{font-size:44px!important}.panel{height:360px}.cols{display:none}}

.hero{background:transparent}.hin{height:760px}
.dual{position:relative}.vline{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform-origin:top;animation:drawv 2.4s ease both;pointer-events:none}
@keyframes drawv{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hsd{0%{opacity:0}5%{opacity:1}50%{opacity:1}55%{opacity:0}100%{opacity:0}}
.hrow{grid-template-columns:1fr 1fr}
.hc{position:absolute;top:0;bottom:0;width:50%}.hcl{left:0}.hcr{right:0}
.hhd{position:absolute;left:40px;right:40px;top:100px}
.hstage{left:40px;right:40px;top:140px;width:auto;aspect-ratio:3/2}
.hs,.hft .hfa{animation:hsd 30s linear infinite both}
.hcap{position:absolute;left:40px;right:40px;top:550px;display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--line);padding-top:20px;text-decoration:none;color:var(--t);transition:border-color .6s}
.hcap:hover{border-top-color:var(--o)}.hcap:hover .harr{color:var(--o);border-color:var(--o)}
.hbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:40px;z-index:2}
.dg{display:grid;grid-template-columns:1fr 1fr}.dgl{padding-right:40px}.dgr{padding-left:40px}
.g3p{display:grid;grid-template-columns:repeat(3,1fr)}.sech{margin-bottom:40px}
.sk{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
@media (max-width:820px){.vline{display:none}.hc,.hhd,.hcap{position:static!important;width:100%!important}.hstage{position:relative!important;width:100%!important}.hbtn{position:static!important;transform:none;align-self:flex-start}.dg{grid-template-columns:1fr}.dgl,.dgr{padding:0 0 48px}}
@media (prefers-reduced-motion:reduce){.vline{animation:none}.hs,.hft .hfa{animation:none!important}.hs:first-child,.hfa:first-child{opacity:1}}
.hone{position:absolute;left:50%;top:150px;width:72%;transform:translateX(-50%)}.hone img{display:block;width:100%;height:auto}
.hcap{top:700px}.hin{height:880px}.hcp{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--m)}
@media (max-width:820px){.hone{position:static;transform:none;width:100%}.hin{height:auto}}
.hone{width:66%;top:150px}.slider{position:relative;aspect-ratio:1600/924}.slider img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.srange{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.shandle{position:absolute;top:0;bottom:0;width:1px;background:var(--t);transform:translateX(-50%);pointer-events:none}
.sknob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid var(--o);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--t)}
.srange:focus-visible ~ .shandle .sknob{outline:2px solid var(--o);outline-offset:3px}
.sends{display:flex;justify-content:space-between;margin-top:20px}
.sbtn{background:none;border:0;padding:12px 0;font-family:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:color .5s}
.sbtn:hover{color:var(--o)!important}
.hcap{top:740px}.hin{height:960px}.vline{transition:opacity .8s ease}.g5 .wp{flex:0 0 20%}
@media (prefers-reduced-motion:reduce){.vline,.sbtn{transition:none}}
@media (max-width:820px){.hone{width:100%}.hin{height:auto}}
.hc{pointer-events:none}.hcap,.hbtn{pointer-events:auto}
.srange{position:static;inset:auto;width:100%;height:44px;margin:28px 0 0;padding:0;opacity:1;cursor:pointer;touch-action:auto;display:block;-webkit-appearance:none;appearance:none;background:transparent}
.srange::-webkit-slider-runnable-track{height:1px;background:var(--t)}
.srange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--o);border:0;margin-top:-10px;cursor:pointer}
.srange::-moz-range-track{height:1px;background:var(--t)}
.srange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--o);border:0;cursor:pointer}
.srange:focus-visible{outline:2px solid var(--o);outline-offset:6px}
.sends{margin-top:4px}
.hcap{top:810px}.hin{height:1030px}
@media (max-width:820px){.hin{height:auto}.hone{width:100%}.hcap{position:static}}
.hone{width:76%}.slider{aspect-ratio:1600/904}.shint{text-align:center;margin-top:4px}
.lyl{animation:revL 2.2s cubic-bezier(.22,.8,.24,1) .5s backwards}.lyr{animation:revR 2.2s cubic-bezier(.22,.8,.24,1) .5s backwards}
.shandle{animation:lineIn 1.4s ease backwards}
@keyframes revL{from{clip-path:inset(0 50% 0 50%);transform:translateX(7%)}to{clip-path:inset(0 50% 0 0);transform:none}}
@keyframes revR{from{clip-path:inset(0 50% 0 50%);transform:translateX(-7%)}to{clip-path:inset(0 0 0 50%);transform:none}}
@keyframes lineIn{from{transform:translateX(-50%) scaleY(0)}to{transform:translateX(-50%) scaleY(1)}}
@media (prefers-reduced-motion:reduce){.lyl,.lyr,.shandle{animation:none}}
@media (max-width:820px){.hone{width:100%}}
.lw{position:absolute;inset:0}
@keyframes revL{from{transform:translateX(52%)}to{transform:none}}
@keyframes revR{from{transform:translateX(-52%)}to{transform:none}}
.lyl{animation:revL 1.5s cubic-bezier(.37,0,.15,1) .2s backwards}.lyr{animation:revR 1.5s cubic-bezier(.37,0,.15,1) .2s backwards}
.shandle{animation:lineIn .8s ease backwards}
@media (prefers-reduced-motion:reduce){.lyl,.lyr,.shandle{animation:none}}
.p{--m:color-mix(in srgb,var(--t) 88%,transparent);--l:color-mix(in srgb,var(--t) 74%,transparent);--n:color-mix(in srgb,var(--t) 36%,transparent)}
.lbl,.hl{font-size:12px}.body{font-size:18px}.hcp,.hcap p{font-size:15px}.cell{font-size:14px}.d{font-weight:300}
.ghost{color:color-mix(in srgb,var(--t) 9%,transparent)}.gacc{color:color-mix(in srgb,var(--o) 42%,transparent)}
.ripples{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.rtog{position:fixed;left:24px;bottom:20px;z-index:6;background:none;border:0;padding:8px 0;font-family:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--l);cursor:pointer;transition:color .5s}
.rtog:hover{color:var(--o)}
.p{isolation:isolate}.ripples{z-index:-1}
.abtimg{display:block;width:100%;max-width:440px;margin-left:auto;aspect-ratio:2/3;object-fit:cover;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.flinks{display:flex;gap:32px}
.lyl,.lyr{position:absolute;inset:0}.hiw{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.37,0,.15,1)}
.slider img.hi{inset:auto;height:auto}
@media (prefers-reduced-motion:reduce){.hiw{transition:none}}
.hiw{transition:transform 1.9s cubic-bezier(.37,0,.15,1)}
.ghost{font-size:240px}.hone{width:68%}
.hcap{top:calc(290px + 0.385 * min(100vw, var(--pw)))}.hin{height:calc(496px + 0.385 * min(100vw, var(--pw)))}
@media (max-width:820px){.hin{height:auto}.hone{width:100%}.hcap{position:static}.ghost{display:none}}
.ttog{position:fixed;right:84px;bottom:28px;z-index:6;background:none;border:0;padding:8px 0;font-family:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--l);cursor:pointer;transition:color .5s}
.ttog:hover{color:var(--o)}.ttog:focus-visible{outline:2px solid var(--o);outline-offset:4px}
.p.dark .ph img{mix-blend-mode:normal}
.ctas{display:flex;flex-wrap:wrap;gap:16px 20px}
.btn.o2{background:transparent;color:var(--o)}.btn.o2:hover{background:var(--o);color:#fff}
button.btn{font-family:inherit;cursor:pointer}.btn[disabled]{opacity:.35;pointer-events:none}
.cmp{max-width:760px;margin-top:40px;display:grid;gap:26px;border:1px solid var(--o);padding:28px}
.cf{display:block}.cf .lbl{display:block;margin-bottom:6px}
.cin{width:100%;background:transparent;color:var(--t);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;font:300 20px 'Manrope',sans-serif;outline:none}
.cin:focus{border-bottom-color:var(--o)}textarea.cin{min-height:160px;resize:vertical;line-height:1.6}
.sbtn2{background:none;border:0;padding:8px 0;font-family:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--l);cursor:pointer}.sbtn2:hover{color:var(--o)}
.cnote{margin:0;font-size:14px;line-height:1.6;color:var(--m);min-height:20px}
.cta2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:72px 0 80px}
.totop{position:fixed;right:24px;bottom:16px;z-index:6;width:44px;height:44px;background:none;border:1px solid var(--line);color:var(--t);font-family:inherit;font-size:20px;line-height:1;cursor:pointer;transition:border-color .5s,color .5s}
.totop:hover{border-color:var(--o);color:var(--o)}.totop:focus-visible{outline:2px solid var(--o);outline-offset:4px}
.live{display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--o);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.uprow{display:grid;grid-template-columns:140px 130px minmax(0,1fr);gap:8px 28px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline}
.uprow:last-child{border-bottom:1px solid var(--line)}
.upst{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--l)}.upst.go{color:var(--o)}
.upt{margin:0 0 6px;font-size:22px;font-weight:300}.upn{margin:0;font-size:16px;line-height:1.6;color:var(--m);max-width:680px}
@media (max-width:760px){.uprow{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.live{animation:none}}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),360px));gap:40px 28px;align-items:start}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:4px;aspect-ratio:4/3;margin-bottom:16px;overflow:hidden}.mosaic img{display:block;width:100%;height:100%;object-fit:cover;min-height:0;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}.wcard:hover .mosaic img{transform:scale(1.04)}
.wcard{display:block;color:inherit;text-decoration:none;border-top:1px solid var(--line);padding-top:18px;transition:border-color .6s}.wcard:hover{border-top-color:var(--o)}
.wimg{overflow:hidden;margin-bottom:16px;background:color-mix(in srgb,var(--t) 6%,transparent)}.wimg.d{aspect-ratio:16/9}.wimg.m{aspect-ratio:9/16;max-height:380px;margin-left:auto;margin-right:auto}
.wimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}.wcard:hover .wimg img{transform:scale(1.05)}
.wmeta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.wprice{font-size:18px;color:var(--o)}
.wnm{margin:8px 0 0;font-size:20px;font-weight:300;transition:color .5s}.wcard:hover .wnm{color:var(--o)}
@media (max-width:1000px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.wgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wimg img{transition:none}.wcard:hover .wimg img{transform:none}}

.cmp[hidden]{display:none}
.hhd a.hsvc{color:inherit;text-decoration:none;pointer-events:auto;transition:color .5s}.hhd a.hsvc:hover{color:var(--o)}
.foot{display:flex;justify-content:space-between;gap:20px 32px;padding:32px 0 48px}

/* ---- Phones and small tablets. This block comes last on purpose: it settles the earlier
        layered hero rules, and the !important lines beat inline styles set in index.html or by
        setPos() in js/home.js (split columns, Featured work alignment). ---- */
@media (max-width:820px){
  .in,.cols{padding:0 22px}
  .sec{padding:72px 0}
  .sec .in>.rv:first-child{margin-bottom:36px!important}

  /* Hero: labels, then a full-width slider, then the two captions and the button */
  .hin{padding:72px 22px 48px;gap:28px}
  .hrow{gap:6px}.hrow .hl{text-align:left!important}
  .hone{margin:0 -22px;width:auto!important}
  .slider{aspect-ratio:4/3;overflow:hidden}
  /* each 1600x904 hero image is centred in the taller frame and zoomed a little, so the product
     reads at phone size; scale (not transform) leaves the stepping in showStack() untouched */
  .lyl,.lyr{inset:auto 0;top:50%;height:auto;aspect-ratio:1600/904;margin-top:-28.25%}
  .hiw{scale:1.32}
  .hone .srange,.hone .shint{margin-left:22px;margin-right:22px;width:calc(100% - 44px)}
  .hone .srange{margin-top:20px}
  .hc+.hc{margin-top:-4px}
  .hcap{padding-top:16px}
  .hbtn{display:block;text-align:center;align-self:stretch}

  /* Featured work: a row you swipe through, two and a bit cards wide */
  #work .in>.rv:first-child{flex-wrap:wrap;gap:16px 24px;align-items:flex-end}
  .g5{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -22px;padding:0 22px;scroll-padding-left:22px;justify-content:flex-start!important}
  .g5::-webkit-scrollbar{display:none}
  .g5 .wp{flex:0 0 44%;scroll-snap-align:start}
  .g5 .ph{aspect-ratio:3/5}
  .wl{padding:16px 12px 0 12px}

  /* Skills: one group under the other at full width */
  .dg{grid-template-columns:1fr!important;gap:48px}
  .dgl,.dgr{padding:0!important}
  .cell{padding:20px 14px;font-size:12px;letter-spacing:.14em}

  /* How I work */
  .step{padding:0 0 28px 20px}
  .step b{font-size:48px;margin-bottom:12px}

  /* About, contact and footer */
  .g2{gap:40px!important}.g2 h2.d{margin-bottom:28px!important}
  #contact h2.d{margin:24px 0 36px!important}
  .ctas .btn{flex:1 1 auto;text-align:center}
  .cmp{padding:20px}
  .cta2{flex-direction:column;align-items:stretch;padding:48px 0 56px}.cta2 .btn{text-align:center}
  .foot{flex-direction:column;padding:28px 0 32px}
  .flinks{flex-wrap:wrap;gap:16px 28px}
}