@font-face{font-family:ElegantIcons;font-display:block;src:url("assets/fonts/eleganticons.woff") format("woff"),url("assets/fonts/eleganticons.ttf") format("truetype")}
@font-face{font-family:"do the thing";font-weight:400;font-display:swap;src:url("assets/fonts/futura-extra-black-font.ttf") format("truetype")}

/* Tokens mirror DESIGN.md */
:root{
  --ink:#000;            /* marker-black */
  --button:#0a0a0a;      /* button-black */
  --page:#fafaf7;        /* inner-page-white */
  --white:#fff;
  --muted:#6b6b66;       /* pencil-grey */
  --line:#e1e1e1;        /* rule-grey */
  --signal:#f23801;      /* signal-orange */
  --card-radius:30px;
  --gutter:clamp(20px,5vw,72px);
  --display:"do the thing","Futura","Arial Black",sans-serif;
  --body:"Open Sans",system-ui,sans-serif;
  --label:"Work Sans",system-ui,sans-serif;
  --field:Cormorant,Georgia,serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--signal);color:var(--white)}

/* Header: mirrors the homepage header in style.css (desktop above 1024px, mobile below) */
#dt-page-header,#dt-page-mobile-header{position:sticky;top:0;z-index:10;background:var(--page)}
#dt-page-header-inner,#dt-page-mobile-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%}
#dt-page-header{height:80px}
#dt-page-header-inner{padding:0 71px 0 47px} /* homepage has an empty 24px widget area after the menu */
.dt-header-logo-link,.dt-mobile-header-logo-link{display:flex;align-items:center;flex-shrink:0;height:39px}
.dt-header-logo-link img,.dt-mobile-header-logo-link img{display:block;width:auto;height:100%}
.dt-header-navigation{height:100%;margin-left:auto}
.dt-header-navigation ul{margin:0;padding:0;list-style:none}
.dt-header-navigation>ul{display:flex;align-items:center;height:100%;white-space:nowrap}
.dt-header-navigation>ul>li{position:relative;height:100%;margin:0 29px}
.dt-header-navigation>ul>li:first-child{margin-left:0}
.dt-header-navigation>ul>li:last-child{margin-right:0}
.dt-header-navigation>ul>li>a,.dt-mobile-header-navigation>ul>li>a{font:600 12px/1.733em var(--label);letter-spacing:.2em;text-transform:uppercase;color:#1d1d1d;text-decoration:none;transition:color .2s ease-out}
.dt-header-navigation>ul>li>a{position:relative;display:flex;align-items:center;height:100%}
/* The bouncing dot: on hover and focus, and resting beside the current page */
.dt-header-navigation>ul>li>a::before{content:"";position:absolute;top:calc(50% - 3px);left:-12px;width:6px;height:6px;border-radius:50%;background:var(--button);
  opacity:0;transform-origin:center;animation:dt-dot-drop .3s ease forwards}
.dt-header-navigation>ul>li>a:hover::before,.dt-header-navigation>ul>li>a:focus-visible::before{animation:dt-dot-bounce .3s linear forwards}
.dt-header-navigation>ul>li>a[aria-current="page"]::before{animation:none;opacity:1}
@keyframes dt-dot-bounce{0%{opacity:0;transform:translateY(-12px) scaleX(.8) scaleY(2)}1%{opacity:1}25%{opacity:1;transform:translateY(-6px) scaleX(1) scaleY(1)}50%{opacity:1;transform:translateY(0) scaleX(2) scaleY(.8)}60%{opacity:1;transform:translateY(0) scaleX(1) scaleY(1)}75%{opacity:1;transform:translateY(-3px) scaleX(1) scaleY(1)}100%{opacity:1;transform:translateY(0) scaleX(1) scaleY(1)}}
@keyframes dt-dot-drop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5px)}}

#dt-page-mobile-header{display:none;height:70px}
#dt-page-mobile-header-inner{padding:0 40px}
.dt-mobile-header-logo-link{margin-right:auto}
/* Two-line opener; hover swaps the line lengths, open state shows an X */
.dt-opener-icon{position:relative;display:inline-block;margin-left:20px;padding:0;border:0;background:none;color:var(--ink);line-height:1;cursor:pointer}
.dt-opener-icon .dt-m-icon{position:relative;display:block}
.dt-opener-icon .dt-m-icon.dt--close{position:absolute;top:0;left:0;visibility:hidden}
.dt-opener-icon .dt-m-lines{position:relative;display:block;width:22px;height:28px}
.dt-opener-icon .dt-m-line{position:absolute;left:0;height:2px;width:100%;background:currentColor;transition:width .4s}
.dt-opener-icon .dt-m-line.dt--1{top:8px}
.dt-opener-icon .dt-m-line.dt--2{top:14px;width:16px}
.dt-opener-icon:hover .dt-m-icon .dt-m-line.dt--1{width:16px}
.dt-opener-icon:hover .dt-m-icon .dt-m-line.dt--2{width:22px}
.dt-opener-icon .dt-m-icon.dt--close .dt-m-lines{transition:transform 1s cubic-bezier(.475,.425,0,.995)}
.dt-opener-icon .dt-m-icon.dt--close .dt-m-line{width:100%;top:13px;transition:none}
.dt-opener-icon .dt-m-icon.dt--close .dt-m-line.dt--1{transform:rotate(45deg)}
.dt-opener-icon .dt-m-icon.dt--close .dt-m-line.dt--2{transform:rotate(-45deg)}
.dt-opener-icon:hover .dt-m-icon.dt--close .dt-m-lines{transform:rotate(180deg)}
.dt-opener-icon.dt--opened .dt-m-icon{visibility:hidden}
.dt-opener-icon.dt--opened .dt-m-icon.dt--close{visibility:visible}
/* Drop-down list under the bar */
.dt-mobile-header-navigation{position:absolute;top:100%;left:0;display:none;width:100%;max-height:calc(100vh - 70px);overflow-y:auto;
  background:var(--page);border-bottom:1px solid var(--line);z-index:10}
.dt-mobile-header-navigation>ul{width:min(768px,86%);margin:0 auto;padding:34px 0;list-style:none}
.dt-mobile-header-navigation>ul>li{margin:0;padding:5px 0}
.dt-mobile-header-navigation>ul>li>a{display:inline-block}
.dt-mobile-header-navigation>ul>li>a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
@media (max-width:1024px){
  #dt-page-header{display:none}
  #dt-page-mobile-header{display:block}
}

/* Hero */
.hero{padding:clamp(64px,11vw,150px) var(--gutter) clamp(48px,8vw,96px)}
.hero h1{margin:0;font:400 clamp(40px,5.6vw,80px)/.92 var(--display);letter-spacing:.005em}
.hero p{max-width:34ch;margin:28px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5}

/* Services: a ticked-off to-do list */
.services{margin:0;padding:0 var(--gutter);list-style:none}
.services li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;
  padding:32px 0;border-top:1px solid var(--line)}
.services li:last-child{border-bottom:1px solid var(--line)}
.services h2,.services h3{margin:0;font:400 clamp(22px,2.4vw,32px)/1 var(--display)}
.services p{margin:0;color:var(--muted);max-width:44ch}
.tick{width:42px;height:42px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tick-mark{stroke-dasharray:32;stroke-dashoffset:0}

/* CTA */
.cta{margin:clamp(72px,10vw,140px) var(--gutter) var(--gutter);padding:clamp(48px,7vw,96px) clamp(28px,5vw,72px);
  border-radius:var(--card-radius);background:var(--ink);color:var(--white);
  display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;justify-content:space-between}
.cta h2{margin:0;font:400 clamp(32px,4.4vw,62px)/.95 var(--display)}

/* Square arrow button (DESIGN.md "Primary Button") */
.btn-arrow{position:relative;display:inline-block;margin:0 48px 0 0;padding:15px 36px;border:1px solid transparent;border-radius:0;
  background:var(--button);color:var(--white);font:600 11px/22px var(--label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn-arrow::before{content:"E";position:absolute;top:50%;right:-26px;transform:translateY(-50%);font:11px/1 ElegantIcons;color:var(--ink);transition:right .2s ease-in-out}
.btn-arrow::after{content:"";position:absolute;top:50%;right:-18px;width:34px;height:2px;transform:translateY(-50%);transform-origin:left center;
  background:linear-gradient(90deg,var(--white) 50%,var(--ink) 50%);transition:transform .2s ease-in-out}
.btn-arrow:hover::before,.btn-arrow:focus-visible::before{right:-36px}
.btn-arrow:hover::after,.btn-arrow:focus-visible::after{transform:translateY(-50%) scaleX(1.3)}
.btn-arrow:active{transform:translateY(1px)}
.btn-arrow:disabled{cursor:progress;opacity:.7}
.btn-arrow--light{background:var(--white);color:var(--ink)}
.btn-arrow--light::before{color:var(--white)}
.btn-arrow--light::after{background:linear-gradient(90deg,var(--ink) 50%,var(--white) 50%)}
.cta :focus-visible{outline-color:var(--white)}


/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:clamp(40px,7vw,120px);padding:0 var(--gutter) var(--gutter)}
.contact dl{margin:0}
/* Desktop: the details start where the nav menu starts (the menu is 569px wide and sits 71px from the right edge) */
@media (min-width:1025px){.contact dl{justify-self:end;width:min(569px,100%);margin-right:calc(71px - var(--gutter))}}
.contact dt{margin:0 0 6px;font:600 11px/1.6 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.contact dd{margin:-8px 0 28px;font-size:clamp(18px,1.6vw,21px)} /* links carry 8px of tap padding */
.contact dd a{display:inline-block;padding:8px 0;text-decoration-thickness:1px;text-underline-offset:4px}
.contact dd a:hover{text-decoration-thickness:2px}
.socials{display:flex;flex-wrap:wrap;gap:4px 20px}
.socials a{display:inline-block;padding:8px 0}

/* Contact form (mirrors the homepage form) */
.contact-form{display:flex;flex-direction:column;align-items:flex-start}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin:0 0 35px;padding:5px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);font:italic 500 17px/20px var(--field);outline:0;appearance:none;transition:border-color .2s ease-out}
.contact-form ::placeholder{color:inherit;opacity:1}
.contact-form select{width:auto;height:30px;padding-right:6px;cursor:pointer;appearance:auto}
.contact-form textarea{padding:10px;border:1px solid var(--ink);resize:vertical}
.contact-form input:focus-visible,.contact-form select:focus-visible{border-bottom-width:2px;padding-bottom:4px}
.contact-form textarea:focus-visible{border-width:2px;padding:9px}
.contact-form [aria-invalid="true"]{border-color:var(--signal)}
.form-note{min-height:1.6em;margin:16px 0 0;font-size:15px;color:var(--ink)}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding:20px var(--gutter);
  font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.site-footer a{display:inline-block;padding:8px 0;text-decoration:none}
.site-footer a:hover{color:var(--ink)}

/* Text link with the same arrow (DESIGN.md "Textual variant") */
.btn-text{position:relative;display:inline-block;margin-right:60px;padding:12px 0;font:600 11px/22px var(--label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.btn-text::before{content:"E";position:absolute;top:50%;right:-49px;transform:translateY(-50%);font:11px/1 ElegantIcons;transition:right .2s ease-in-out}
.btn-text::after{content:"";position:absolute;top:50%;right:-41px;width:30px;height:2px;transform:translateY(-50%);transform-origin:left center;
  background:currentColor;transition:transform .2s ease-in-out}
.btn-text:hover::before,.btn-text:focus-visible::before{right:-58px}
.btn-text:hover::after,.btn-text:focus-visible::after{transform:translateY(-50%) scaleX(1.3)}

/* ===== Portfolio item pages (work-*.html) ===== */
.case{--section:clamp(88px,11vw,160px)}
.case-back{display:inline-block;margin:clamp(28px,4vw,48px) var(--gutter) 0;padding:8px 0;font:600 12px/22px var(--label);letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s ease-out}
.case-back:hover,.case-back:focus-visible{color:var(--ink)}
.case-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;
  padding:clamp(20px,3vw,40px) var(--gutter) clamp(40px,6vw,72px)}
.case-hero h1{margin:0;font:400 clamp(40px,5.6vw,80px)/.92 var(--display);letter-spacing:.005em}
.case-hero .lede{max-width:38ch;margin:24px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.case-shipped{max-width:40ch;margin:16px 0 0;color:var(--muted)}
.case-facts{margin:0}
.case-facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.case-facts div:last-of-type{border-bottom:1px solid var(--line)}
.case-facts dt{font:600 12px/26px var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.case-facts dd{margin:0}
.case-facts + .btn-arrow{margin-top:32px}
.case-cover{display:grid;place-items:center;max-width:880px;margin:0 var(--gutter);aspect-ratio:16/8;overflow:hidden;border-radius:var(--card-radius);background:var(--bg,#eee)}
.case-cover img{width:100%;height:100%;object-fit:cover}
.case-cover:not(.case-cover--contain){aspect-ratio:auto}
.case-cover:not(.case-cover--contain) img{height:auto}
.case-cover--contain img{width:auto;height:auto;max-width:78%;max-height:78%;object-fit:contain}
.case-section{padding:var(--section) var(--gutter) 0}
.case-section > h2{margin:0 0 clamp(28px,3.4vw,48px);font:400 clamp(32px,4.4vw,62px)/.95 var(--display)}
.case-section .services{padding:0}
/* On case pages the list is supporting detail: smaller names, description right beside them */
.case .services li{grid-template-columns:48px minmax(0,15em) minmax(0,1fr);gap:24px;padding:26px 0}
.case .services h3{font-size:clamp(18px,1.7vw,24px)}
.case .services p{max-width:56ch}
.case .services .tick{width:34px;height:34px}

/* Screens: flat browser frames for desktop shots, a row of phones for mobile ones */
.case-browsers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,5vw,64px) clamp(24px,3vw,40px);align-items:start}
.case-shot{margin:0}
.case-shot--lead{max-width:880px;margin:0 var(--gutter)}
.case-browser{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.case-shot--lead .case-browser{border-radius:16px}
.case-browser-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-bottom:1px solid var(--line)}
.case-browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.case-browser-bar span{margin-left:10px;font:600 11px/1 var(--label);letter-spacing:.12em;color:var(--muted)}
.case-shot figcaption,.case-phone figcaption{max-width:52ch;margin-top:14px;font-size:15px;line-height:1.5;color:var(--muted)}
/* Screenshots open full size in a lightbox (pages.js) */
.case-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.case-zoom img{width:100%;height:auto}
.case-browser .case-zoom:focus-visible{outline-offset:-4px}
.case-lightbox{max-width:min(96vw,1600px);max-height:94vh;padding:0;border:0;background:transparent;overflow:visible}
.case-lightbox::backdrop{background:rgba(0,0,0,.88)}
.case-lightbox img{display:block;width:auto;max-width:100%;max-height:90vh;margin:0 auto;border-radius:10px;cursor:zoom-out}
.case-lightbox-close{position:fixed;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:50%;background:var(--white);color:var(--ink);font:400 26px/1 var(--body);cursor:pointer}
.case-phones{display:flex;gap:clamp(16px,2.5vw,32px);margin:clamp(20px,3vw,40px) calc(var(--gutter)*-1) 0;padding:0 var(--gutter) 8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
.case-phones::-webkit-scrollbar{display:none}
.case-phone{flex:none;margin:0;scroll-snap-align:start}
.case-phone .case-zoom{width:auto}
.case-phone img{width:auto;height:clamp(360px,34vw,480px);border-radius:24px}
.case-phone figcaption{max-width:24ch;font-size:15px}
.case-phones--framed img{border:1px solid var(--line)}
.case-browsers + .case-phones{margin-top:clamp(40px,6vw,80px)}

/* Next project */
.case-next{display:block;margin:var(--section) var(--gutter) 0;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.case-next span{display:block;font:600 12px/22px var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.case-next strong{display:inline-block;margin-top:10px;font:400 clamp(28px,3.6vw,48px)/.95 var(--display);transition:transform .3s var(--ease-out)}
.case-next strong::after{content:"E";display:inline-block;margin-left:.35em;font:.4em/1 ElegantIcons;vertical-align:middle;transition:transform .3s var(--ease-out)}
.case-next:hover strong::after,.case-next:focus-visible strong::after{transform:translateX(12px)}
.case .cta{margin-top:var(--section)}
.case .case-next + .cta{margin-top:clamp(56px,8vw,112px)}

@media (max-width:800px){
  .case-cover{aspect-ratio:4/3;border-radius:20px}
  .case-phone img{height:400px;border-radius:22px}
  .case .services li{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .case-shot figcaption{font-size:15px}
}
/* Stack the hero before the title can run into the facts column */
@media (max-width:1100px){
  .case-hero{grid-template-columns:1fr;align-items:start}
  .case-hero > div:last-child{max-width:560px}
}

/* ===== Alternate homepage (home-alt.html) ===== */
.home-alt{--section:clamp(96px,12vw,176px);--peach:#f7e4d6}
.ha-heading{margin:0;font:400 clamp(32px,4.4vw,62px)/.95 var(--display)}
.ha-hero,.ha-thing,.ha-do,.ha-work,.ha-doers,.ha-contact{padding-left:var(--gutter);padding-right:var(--gutter)}

/* Hero */
.ha-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;
  min-height:calc(100svh - 80px);padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(48px,6vw,96px);
  overflow:clip} /* the enlarged video must not widen the page */
.ha-rotator{display:grid;margin:0;margin-bottom:.25em;font:400 clamp(40px,5.6vw,80px)/.92 var(--display)}
.ha-rotator-word{grid-area:1/1;opacity:0;transform:translateY(.25em) rotateX(-60deg);transform-origin:50% 100%;
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.ha-rotator-word.is-active{opacity:1;transform:none;transition-delay:.18s}
.ha-rotator-word.is-leaving{opacity:0;transform:translateY(-.2em) rotateX(60deg);transition-duration:.18s;transition-delay:0s}
.ha-hero-copy p{max-width:30ch;margin:24px 0 36px;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.ha-hero-video{display:block;width:135%;max-width:none;height:auto;margin:-6% 0 -6% -17.5%;mix-blend-mode:multiply} /* the loop has wide white margins */

/* What is the thing */
.ha-thing{padding-top:var(--section);display:grid;justify-items:center;gap:40px;text-align:center}
.ha-thing-card{width:min(100%,860px);padding:clamp(40px,6vw,72px) clamp(24px,6vw,80px);border-radius:var(--card-radius);background:var(--ink);color:var(--white)}
.ha-thing-ask{margin:0 0 28px;font:600 11px/1.6 var(--label);letter-spacing:.2em;text-transform:uppercase}
.ha-todo{display:inline-grid;gap:14px;margin:0 0 36px;padding:0;list-style:none;text-align:left}
.ha-todo li{display:flex;align-items:center;gap:16px;font-size:clamp(17px,1.6vw,20px);line-height:1.3}
.ha-todo .tick{flex:none;width:30px;height:30px;stroke:var(--white)}
.ha-thing-why{max-width:46ch;margin:0 auto;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:#d9d9d6}
.ha-thing-why strong{color:var(--white)}
.ha-thing-so{margin:36px 0 0;font-size:16px}
.ha-thing-so span{display:block;margin-top:10px;font:400 clamp(28px,3.4vw,42px)/1 var(--display)}
/* ticks draw in one after another */
.ha-todo li:nth-child(2) .tick-mark{transition-delay:.45s}
.ha-todo li:nth-child(3) .tick-mark{transition-delay:.6s}
.ha-todo li:nth-child(4) .tick-mark{transition-delay:.75s}
.ha-todo li:nth-child(5) .tick-mark{transition-delay:.9s}

/* What we do */
.ha-do{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:var(--section)}
.ha-do-intro img{width:min(240px,60%);margin-top:28px;mix-blend-mode:multiply}
.ha-do-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px clamp(32px,4vw,64px)}
.ha-do-group h3{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line);font:400 clamp(18px,1.5vw,21px)/1 var(--display);white-space:nowrap}
.ha-do-group ul{margin:0 0 20px;padding:0;list-style:none}
.ha-do-group li{padding:6px 0}

/* Things we did */
.ha-work{padding-top:var(--section)}
.ha-work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.ha-filter{display:flex;flex-wrap:wrap;gap:4px 28px}
.ha-filter button{position:relative;padding:10px 0;border:0;background:none;color:var(--muted);cursor:pointer;
  font:600 11px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;transition:color .2s ease-out}
.ha-filter button:hover,.ha-filter button[aria-pressed="true"]{color:var(--ink)}
.ha-filter button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.ha-filter button[aria-pressed="true"]::after{transform:scaleX(1)}
.ha-work-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 20px;margin:0;padding:0;list-style:none}
.ha-work-grid li[hidden]{display:none}
.ha-work-grid a{display:grid;gap:10px;text-decoration:none}
.ha-cover{display:block;aspect-ratio:4/3;margin-bottom:4px;overflow:hidden;border-radius:4px;background:var(--bg,#eee)}
.ha-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.ha-cover--contain img{object-fit:contain}
.ha-work-grid a:hover .ha-cover img,.ha-work-grid a:focus-visible .ha-cover img{transform:scale(1.04)}
.ha-work-title{font:400 clamp(16px,1.3vw,19px)/1.1 var(--display);text-transform:uppercase}
.ha-work-tag{font:600 11px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1200px){.ha-work-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* The doers */
.ha-doers{padding-top:var(--section);display:grid;justify-items:center;text-align:center}
.ha-doers-people{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,4vw,64px);margin:48px 0 40px}
.ha-doers-people figure{margin:0;width:min(320px,80vw)}
.ha-doers-people img{width:100%;height:auto;mix-blend-mode:multiply}
.ha-doers-story{max-width:60ch;margin:0;font-size:clamp(16px,1.4vw,18px);line-height:1.7}

/* Contact */
.ha-contact{padding-top:var(--section)}
.ha-contact-card{display:grid;justify-items:center;padding:clamp(56px,8vw,110px) clamp(24px,5vw,72px);border-radius:var(--card-radius) var(--card-radius) 0 0;background:var(--peach)}
.ha-contact-card h2{margin:0 0 40px;font:700 clamp(24px,2.4vw,32px)/1.15 var(--body);text-align:center}
.ha-contact-card .contact-form{width:min(100%,500px)}


/* Entrance: content is visible by default; motion only enhances it */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .reveal .tick-mark{stroke-dashoffset:32;transition:stroke-dashoffset .45s var(--ease-out) .3s}
  .js .reveal.is-in .tick-mark{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media (max-width:1024px){
  .ha-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:800px){
  .ha-hero-video{width:100%;margin:0}
  /* Swipeable row on phones: the next card peeks in, cards snap, row bleeds to the screen edges */
  .ha-work-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;
    margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .ha-work-grid::-webkit-scrollbar{display:none}
  .ha-work-grid li{scroll-snap-align:start}
  .ha-hero{grid-template-columns:1fr;min-height:0;padding-top:64px;text-align:center}
  .ha-hero-copy{display:contents} /* phone order: headline, video, button */
  .ha-hero .btn-arrow{order:1;justify-self:center;margin-right:0} /* centre the body; the arrow hangs off it */
  .ha-do{grid-template-columns:1fr}
  .services li{grid-template-columns:40px minmax(0,1fr);row-gap:10px;align-items:start}
  .services .tick{width:28px;height:28px;margin-top:2px}
  .services p{grid-column:2}
  .contact{grid-template-columns:1fr}
}