@font-face{font-family:'Grift';src:url('../fonts/Grift-Variable.woff2') format('woff2-variations'),url('../fonts/Grift-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Grift Static';src:url('../fonts/Grift-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Grift Static';src:url('../fonts/Grift-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Grift Static';src:url('../fonts/Grift-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#0b0b0b;
  --paper:#fff;
  --green:#4dbd28;
  --magenta:#ff2e93;
  --muted:#6c6c6c;
  --hairline:rgba(0,0,0,.15);
  --shadow:rgba(0,0,0,.28);
  --pad:clamp(18px,3.2vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

:root[data-theme="dark"]{--ink:#fff;--paper:#0b0b0b;--hairline:rgba(255,255,255,.24);--shadow:rgba(77,189,40,.4)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Grift','Grift Static',system-ui,sans-serif;font-weight:440;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .6s var(--ease-out),color .6s var(--ease-out)}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--magenta);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Nav */
.nav{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:flex-start;gap:clamp(28px,4vw,72px);padding:18px var(--pad)}
.nav .btn{margin-left:auto}
.nav__logo{display:block;flex:none;text-decoration:none}
.wordmark{display:block;font-size:30px;font-weight:540;line-height:1;letter-spacing:-.05em;transition:font-weight .45s var(--ease-out)}
.wordmark b{font-weight:840}
.wordmark i{font-style:normal;color:var(--green)}
.nav__logo:hover .wordmark,.nav__logo:focus-visible .wordmark{font-weight:840}
.nav__links{display:flex;gap:clamp(18px,2.6vw,44px);list-style:none;margin:0;padding:0;font-size:16px;font-weight:540}
.nav__links a{position:relative;display:block;padding:6px 0;text-decoration:none}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* The way back up, where the page ends */
.to-top{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer;opacity:.7;transition:opacity .3s}
.to-top:hover,.to-top:focus-visible{opacity:1}
.to-top i{position:relative;display:block;width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%}
.to-top i::before{content:"";position:absolute;left:50%;top:52%;width:8px;height:8px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;translate:-50% -50%;rotate:45deg;transition:translate .35s var(--ease-out)}
.to-top:hover i::before{translate:-50% -90%}

/* Phones: the five links live behind a button, in a panel that covers the screen */
.nav__burger{display:none;position:relative;z-index:41;flex:none;width:44px;height:44px;margin-left:14px;padding:0;border:0;background:none;color:inherit}
.nav__burger i{position:absolute;left:11px;top:50%;width:22px;height:2px;background:currentColor;transition:transform .4s var(--ease-out),opacity .3s}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .4s var(--ease-out)}
.nav__burger i::before{top:-7px}
.nav__burger i::after{top:7px}
.nav.is-open .nav__burger i{background:transparent}
.nav.is-open .nav__burger i::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger i::after{transform:translateY(-7px) rotate(-45deg)}
.has-menu{overflow:hidden}

.btn{display:inline-flex;align-items:center;flex:none;background:var(--ink);color:var(--paper);border-radius:999px;padding:14px 26px;font-size:16px;font-weight:560;text-decoration:none;will-change:transform;transition:transform .5s var(--ease-out)}
.btn__label{position:relative;display:block;overflow:hidden;line-height:1.25}
.btn__label span{display:block;transition:transform .5s var(--ease-out)}
.btn__label::after{content:attr(data-text);position:absolute;left:0;top:100%;transition:transform .5s var(--ease-out)}
.btn:hover .btn__label span,.btn:hover .btn__label::after,.btn:focus-visible .btn__label span,.btn:focus-visible .btn__label::after{transform:translateY(-100%)}

/* Hero */
.hero{position:relative;min-height:100svh;overflow:clip;--cw:min(64vw,calc(100svh - 120px));--ts:clamp(48px,min(9.9vw,22.4svh,calc((100vw - var(--pad)*2 - 3vw - var(--cw)*.9)/3.9)),200px)}
.hero__stage{position:absolute;inset:0;z-index:1}

.computer{position:absolute;top:calc(50% + 32px);left:min(calc(var(--pad) + var(--ts)*3.65 + 2.5vw + 80px - var(--cw)*.05),calc(100vw - var(--pad) - var(--cw)*.95));width:var(--cw);translate:0 -50%;transform-origin:60% 50%;aspect-ratio:1;container-type:inline-size;will-change:transform}
.computer__shadow{position:absolute;left:12%;right:12%;bottom:-3%;height:7%;background:radial-gradient(ellipse at center,var(--shadow),transparent 68%);filter:blur(6px);animation:shadow 5.5s ease-in-out infinite alternate}
.computer__float,.computer__pop{position:absolute;inset:0}
.computer__float{animation:float 5.5s ease-in-out infinite alternate}
/* Off screen the endless animations rest (home.js and site.js add is-away) */
.hero.is-away .computer__float,.hero.is-away .computer__shadow,.hero.is-away .hud__play,.hero.is-away .scroll-cue i::after,.live.is-away::after{animation-play-state:paused}
.computer__body{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none}
/* The screen sits behind the body image and shows through the cut-out. Slightly oversized so the rim always covers its edges. */
.computer__screen{position:absolute;left:17.4%;top:11%;width:65.4%;height:32.2%;overflow:hidden;border-radius:5% / 9%;background:#0b0b0b;--seg:var(--green)}
.reel{position:absolute;inset:-3%;will-change:transform}
.reel__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s linear}
.reel__slide.is-on{opacity:1}
.reel__slide img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.reel__slide.is-on img{animation:kenburns 3.4s linear forwards}
.screen__noise{position:absolute;inset:0;opacity:0;pointer-events:none;background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.screen__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.24) 0 1px,transparent 1px 3px)}
.screen__scan::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
.screen__hud{position:absolute;inset:7.8cqw 7.6cqw 7cqw;font:600 2.3cqw/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--seg);text-shadow:0 0 .7cqw currentColor,0 0 .15cqw #000}
.screen__hud span{position:absolute;padding:.55em .7em;background:#0b0b0b;white-space:nowrap}
.hud__ch{left:0;top:0}
.hud__name{right:0;top:0;max-width:64%;overflow:hidden;text-overflow:ellipsis}
.hud__foot{left:0;bottom:0}
.hud__play{right:0;bottom:0}
.hud__play{animation:blink 1.1s steps(2,start) infinite}
.screen__boot{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.computer__screen.is-glitch .reel{animation:glitch .3s steps(3,end)}
.computer__screen.is-glitch .screen__noise{animation:noise .3s steps(3,end)}

.hero__copy{position:absolute;left:var(--pad);bottom:clamp(26px,5.5vh,64px);z-index:2;max-width:calc(100vw - var(--pad)*2);pointer-events:none;will-change:transform,opacity}
.hero__title{margin:0;font-size:var(--ts);line-height:.745;letter-spacing:-.05em;font-weight:760}
.hero__title .line{display:block;overflow:hidden;padding:.1em .08em .26em 0;margin:-.1em 0 -.26em}
.hero__title .line>span{display:block;white-space:nowrap;transform-origin:left top;will-change:transform}
.intro-done .hero__title .line{overflow:visible}
.hero__title .ch{display:inline-block}
.hero__sub{margin-top:calc(var(--ts)*.2 + 8px)}
.hero__services{margin:0;max-width:17.5em;font-size:clamp(19px,2.1vw,36px);font-weight:580;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}

.scroll-cue{position:absolute;right:var(--pad);bottom:clamp(26px,5.5vh,64px);z-index:2;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:560}
.scroll-cue i{position:relative;display:block;width:1.5px;height:44px;overflow:hidden;background:var(--hairline)}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:cue 1.8s var(--ease-out) infinite}

/* Statement with the client tiles passing over it */
.dot{color:var(--dot,var(--green))}
.statement{position:relative;height:250vh}
.statement__pin{position:sticky;top:0;display:flex;align-items:center;height:100svh;padding:0 var(--pad);overflow:clip}
.statement__text{position:relative;margin:0;max-width:17em;font-size:clamp(32px,5.2vw,100px);font-weight:700;line-height:.95;letter-spacing:-.05em}
.js .statement__text .w{opacity:.14;will-change:opacity}
.statement__text .w.is-accent{color:var(--magenta)}
.brands{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.brands__strip{display:flex;align-items:center;margin:0;padding:0 4vw;list-style:none;will-change:transform}
.js .brands__strip{transform:translate3d(100vw,0,0)}
.brand{flex:none;display:grid;place-items:center;width:clamp(150px,17vw,310px);aspect-ratio:1;margin-right:-2.2vw;padding:2.4vw;border-radius:8px;background:var(--c);box-shadow:0 34px 60px -28px rgba(0,0,0,.45);transform:translateY(var(--y)) rotate(var(--r))}
.brand img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
/* Logos delivered as square artwork already carry their own margin */
.brand--full{padding:0;overflow:hidden}
.brand--full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}

/* Work: large project cards in a row that glides from card to card on its own and can be dragged; it never holds the page */
.display{margin:0 0 clamp(28px,4vw,70px);font-size:clamp(56px,9.9vw,200px);font-weight:760;line-height:.8;letter-spacing:-.05em}
.work{padding-top:clamp(40px,6vw,110px)}
.work > .display{margin-bottom:0;padding:0 var(--pad)}
/* The title with the arrows and the "Drag" hint at its right, aligned to the bottom of the title */
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;padding:0 var(--pad)}
.work__head .display{margin:0}
.work__nav{display:flex;align-items:center;gap:12px;padding-bottom:clamp(4px,1vw,14px)}
.work__hint{display:inline-flex;align-items:center;gap:8px;margin-right:clamp(6px,1.2vw,18px);font-size:13px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.work__hint svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.work__arrow{display:grid;place-items:center;width:clamp(48px,4vw,64px);aspect-ratio:1;padding:0;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background-color .3s,color .3s}
.work__arrow svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.work__arrow:hover,.work__arrow:focus-visible{background:var(--ink);color:var(--paper)}
@media (max-width:760px),(max-aspect-ratio:1/1),(prefers-reduced-motion:reduce){.work__nav{display:none}}
.work__scroller{position:relative}
.work__pin{position:relative;display:flex;align-items:center;padding:clamp(28px,3.4vw,56px) 0 clamp(16px,2.4vw,40px);overflow:clip}
.work__track{display:flex;align-items:center;gap:clamp(16px,2vw,32px);width:max-content;padding:0 var(--pad);will-change:transform;cursor:grab;touch-action:pan-y;user-select:none}
.work__track.is-dragging{cursor:grabbing}
.work__track img{-webkit-user-drag:none}
.case{position:relative;flex:none;width:min(calc(100vw - var(--pad)*2),1800px);height:min(80svh,780px);overflow:clip;border-radius:clamp(18px,2vw,32px);background:var(--bg);color:var(--fg)}
.case__link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.case__copy{position:absolute;left:clamp(20px,3vw,56px);bottom:clamp(20px,3vw,52px);max-width:min(40%,640px)}
.case__name{margin:0;font-size:clamp(36px,5vw,96px);font-weight:760;line-height:.86;letter-spacing:-.05em;text-wrap:balance}
.case__desc{margin:clamp(10px,1.2vw,18px) 0 0;font-size:clamp(18px,2vw,34px);font-weight:560;line-height:1.08;letter-spacing:-.03em;opacity:.62}
/* Tilted two-tone panel. Inside, the project scrolls by itself like a screen recording; hover straightens it and shows the real colours. */
.case__media{position:absolute;right:clamp(16px,4vw,80px);top:50%;width:min(48%,calc((80svh - 90px)*1.33),820px);aspect-ratio:4/3;margin:0;overflow:hidden;border-radius:clamp(12px,1.4vw,22px);translate:0 -50%;rotate:var(--tilt,4deg);background:#0b0b0b;box-shadow:0 40px 70px -30px rgba(0,0,0,.55);transition:rotate .9s var(--ease-out),scale .9s var(--ease-out)}
/* The grey look is a blend laid over the panel, never a filter: a filter on the tall moving strip was more than an iPad
   could draw (an empty dark panel), and repainted picture by picture it made the pictures come and go. A strip only
   moves while its card is on screen. */
.case__strip{display:block;animation:strip var(--speed,26s) linear infinite}
.js .case__strip{animation-play-state:paused}
.js .case.is-live .case__strip{animation-play-state:running}
.case__strip img{display:block;width:100%;height:auto}
.case__media::before{content:"";position:absolute;inset:0;z-index:1;background:#808080;mix-blend-mode:saturation;transition:opacity .6s var(--ease-out)}
.case__media::after{content:"";position:absolute;inset:0;z-index:2;background:var(--tone,transparent);mix-blend-mode:multiply;transition:opacity .6s var(--ease-out)}
/* Single-image variant: the picture fills the panel and drifts slowly */
.case__media--still img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);animation:drift 16s ease-in-out infinite alternate;transition:filter .6s var(--ease-out)}
.case:hover .case__media,.case:focus-within .case__media{rotate:0deg;scale:1.03}
.case:hover .case__media--still img,.case:focus-within .case__media--still img{filter:none}
.case:hover .case__media::before,.case:focus-within .case__media::before,.case:hover .case__media::after,.case:focus-within .case__media::after{opacity:0}
.work__all{flex:none;display:grid;place-items:center;width:clamp(220px,24vw,400px)}
@keyframes strip{to{transform:translateY(-50%)}}
@keyframes turn{0%{opacity:0;transform:scale(1.02)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1.09)}100%{opacity:0;transform:scale(1.09)}}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.16) translate(-2.5%,-2%)}}

/* Phones and portrait tablets: the sentence is not pinned to an empty screen. It scrolls by like any section, larger,
   with the client tiles crossing right under it; the words still light up and the tiles still travel with the page. */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .statement{height:auto}
  .statement__pin{position:relative;flex-direction:column;align-items:stretch;height:auto;padding:clamp(64px,13vw,140px) 0 clamp(56px,11vw,120px)}
  .statement__text{padding:0 var(--pad);max-width:none;font-size:clamp(34px,9.2vw,104px)}
  .brands{position:relative;inset:auto;margin-top:clamp(30px,7vw,80px)}
  .brand{width:clamp(150px,40vw,330px);padding:5vw}
}

/* Phones, portrait screens and reduced motion: the row is a normal swipeable strip instead of a pinned one */
@media (max-width:760px),(max-aspect-ratio:1/1),(prefers-reduced-motion:reduce){
  .work__scroller{height:auto !important}
  .work__pin{position:relative;height:auto;overflow:visible;padding:24px 0 0}
  .work__track{width:auto;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:24px;transform:none !important}
  .case{width:min(86vw,560px);height:auto;padding:20px 20px 28px;scroll-snap-align:center}
  .case__link{position:relative;inset:auto}
  .case__media{position:relative;right:auto;top:auto;width:100%;margin:0 0 18px;translate:none;rotate:0deg}
  .case__copy{position:relative;left:auto;bottom:auto;max-width:none}
}
/* Phones and portrait tablets: no tall moving strip inside the cards (on an iPad the pictures came and went). The first
   four pictures take turns in the panel, each one fading in and drifting a little. Without motion, the first one stays. */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .case__strip{position:absolute;inset:0;animation:none}
  .case__strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:turn 12s linear -1s infinite}
  .case__strip img:first-child{opacity:1}
  .case__strip img:nth-child(2){animation-delay:2s}
  .case__strip img:nth-child(3){animation-delay:5s}
  .case__strip img:nth-child(4){animation-delay:8s}
  .case__strip img:nth-child(n+5){display:none}
  .js .case__strip img{animation-play-state:paused}
  .js .case.is-live .case__strip img{animation-play-state:running}
}

/* Brands: photo prints scattered on a table. They start as one pile, spread out when the section arrives, and can be dragged. */
.brandwork{padding:clamp(60px,8vw,140px) var(--pad) clamp(40px,6vw,100px)}
.brandwork__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(20px,3vw,50px)}
.brandwork__lead{margin:0;max-width:14em;font-size:clamp(30px,4.2vw,76px);font-weight:700;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.brandwork__note{margin:0;max-width:20em;font-size:clamp(16px,1.35vw,22px);font-weight:540;line-height:1.2;letter-spacing:-.02em;opacity:.62}
.table{position:relative;height:min(88svh,52vw);margin:0;padding:0;border-radius:clamp(18px,2vw,32px);background:#efefef;list-style:none;container-type:size;--s:1}
/* --x and --y are the centre of each print in % of the table; --dx and --dy hold what the visitor dragged */
.print{position:absolute;left:0;top:0;width:calc(var(--w)*var(--s)*1cqw);margin:0;padding:.55cqw .55cqw 0;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 22px 40px -18px rgba(0,0,0,.45);translate:calc(50cqw - 50%) calc(50cqh - 50%);rotate:calc(var(--r)*.35);transition:translate 1.1s cubic-bezier(.2,1.1,.3,1) calc(var(--i)*45ms),rotate 1.1s cubic-bezier(.2,1.1,.3,1) calc(var(--i)*45ms),scale .35s var(--ease-out),box-shadow .35s;touch-action:pan-y;user-select:none}
.table.is-open .print{translate:calc(var(--x)*1cqw - 50% + var(--dx,0px)) calc(var(--y)*1cqh - 50% + var(--dy,0px));rotate:var(--r)}
.print img{display:block;width:100%;aspect-ratio:1;object-fit:cover;pointer-events:none}
/* A print that comes alive: the film lies exactly over the photo and fades in once it really plays */
.print__film{position:absolute;top:.55cqw;left:.55cqw;width:calc(100% - 1.1cqw);aspect-ratio:1;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-out);pointer-events:none}
.print__film.is-on{opacity:1}
.print figcaption{padding:.7cqw 0 .8cqw;color:#0b0b0b;font:600 max(9px,.72cqw)/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.print:hover{scale:1.04;box-shadow:0 1px 2px rgba(0,0,0,.18),0 34px 54px -18px rgba(0,0,0,.5)}
.print.is-dragging{scale:1.07;rotate:calc(var(--r)*.3);transition:scale .25s var(--ease-out),rotate .25s var(--ease-out);cursor:grabbing}

@media (max-width:760px),(max-aspect-ratio:1/1){
  .table{height:150vw;--s:2}
}

/* Solutions: the three packs as numbered cards that stack like the work cards */
.solutions{padding:clamp(40px,6vw,110px) var(--pad) clamp(80px,10vw,170px)}
.solutions__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,70px)}
.solutions__head .display{margin:0}
.solutions__intro{margin:0;max-width:20em;font-size:clamp(18px,1.7vw,28px);font-weight:560;line-height:1.12;letter-spacing:-.025em}
.packs{display:grid;gap:clamp(16px,2vw,32px)}
.pack{position:sticky;top:calc(24px + var(--n,0)*16px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(24px,5vw,96px);row-gap:clamp(10px,1.4vw,24px);min-height:min(84svh,800px);padding:clamp(22px,3vw,56px);border-radius:clamp(18px,2vw,32px);background:var(--bg);color:var(--fg);transform-origin:50% 0;will-change:transform}
.pack__no{grid-column:1 / -1;font-size:clamp(40px,5vw,92px);font-weight:760;line-height:.8;letter-spacing:-.05em;color:var(--no,var(--magenta))}
.pack__title{grid-column:1 / -1;margin:0;font-size:clamp(52px,10.4vw,200px);font-weight:760;line-height:.82;letter-spacing:-.055em}
.pack__lead{align-self:end;margin:0;max-width:17em;font-size:clamp(19px,2vw,34px);font-weight:580;line-height:1.08;letter-spacing:-.03em}
.pack__for{display:block;margin-top:clamp(12px,1.4vw,22px);max-width:22em;font-size:clamp(15px,1.15vw,19px);font-weight:560;line-height:1.3;letter-spacing:-.01em;opacity:.7}
.pack__label{margin:0 0 -6px;font:600 13px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.plan__for{margin:0;font-size:clamp(14px,1.05vw,17px);font-weight:600;line-height:1.3;opacity:.7}
.pack__details{align-self:end;display:grid;gap:clamp(18px,2.2vw,34px)}
.pack__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:0;padding:0;list-style:none;font-size:clamp(15px,1.15vw,19px);font-weight:540}
.pack__list li{padding:11px 0;border-top:1.5px solid color-mix(in srgb,var(--fg) 24%,transparent)}
.pack__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.pack__price{margin:0;font-size:clamp(24px,2.6vw,44px);font-weight:760;line-height:1;letter-spacing:-.04em}
.pack__price small{display:block;margin-bottom:8px;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.pack .btn{background:var(--fg);color:var(--bg)}
/* The card being covered darkens through this layer's opacity, set by the home script; a layer of its own, so no repaint */
.pack__shade{position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none;will-change:opacity}

@media (max-width:760px){
  .pack{position:relative;top:auto;grid-template-columns:minmax(0,1fr);min-height:0;row-gap:18px}
  .pack__list{grid-template-columns:minmax(0,1fr)}
}
/* Portrait tablets: a pack is as tall as its content, so no empty band opens inside the card */
@media (max-aspect-ratio:1/1){
  .pack{min-height:0}
}

/* Reviews: the rating as a giant number, one quote at a time. Open on the page, with no box, because it follows a stack of cards. */
.reviews{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,120px);align-items:start;padding:clamp(20px,3vw,60px) var(--pad) clamp(60px,8vw,140px)}
.score__num{margin:0;font-size:clamp(110px,19vw,360px);font-weight:760;line-height:.74;letter-spacing:-.06em}
.score__stars{display:flex;gap:6px;margin:clamp(20px,2.4vw,40px) 0 14px;color:var(--green)}
.score__stars svg{width:clamp(18px,1.6vw,28px);height:auto}
.score__meta{margin:0;font-size:clamp(16px,1.35vw,22px);font-weight:560;line-height:1.25;letter-spacing:-.02em}
.score__meta span{display:block;opacity:.6}
.quotes{display:grid}
.quote{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity .45s linear,visibility 0s .45s}
.quote.is-on{opacity:1;visibility:visible;transition:opacity .6s linear .2s}
.quote p{margin:0;font-size:clamp(24px,2.9vw,52px);font-weight:620;line-height:1.08;letter-spacing:-.035em;text-wrap:pretty}
.quote--long p{font-size:clamp(20px,2.05vw,37px);line-height:1.14}
.quote footer{margin-top:clamp(20px,2.4vw,40px);font-size:clamp(15px,1.2vw,20px);font-weight:560;line-height:1.3}
.quote footer span{display:block;opacity:.6}
.quotes__nav{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,3.4vw,56px)}
.round{--hb:var(--ink);--hc:var(--paper);display:grid;place-items:center;width:56px;height:56px;padding:0;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:inherit;transition:background-color .3s,color .3s,border-color .3s}
.round:hover,.round:focus-visible{background:var(--hb);border-color:var(--hb);color:var(--hc)}
.close .round{--hb:#fff;--hc:#0b0b0b}
.round svg{width:20px;height:20px}
.quotes__count{margin-left:6px;font:600 13px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em}
.quotes__bar{flex:1;max-width:220px;height:2px;overflow:hidden;background:var(--hairline)}
.quotes__bar i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(0)}
.quotes__bar.is-running i{animation:bar 7s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}

/* FAQs: question cards that flip over to show the answer */
.faqs{padding:clamp(20px,3vw,60px) var(--pad) clamp(40px,6vw,100px)}
.faqs__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(24px,3vw,56px)}
.faqs__head .display{margin:0}
.faqs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);margin:0;padding:0;list-style:none}
.flip{position:relative;aspect-ratio:5/4;perspective:1400px}
.flip__btn{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;transform-style:preserve-3d;transition:transform .9s var(--ease-out)}
/* With a mouse the card turns over as soon as the pointer is on it; a click or a tap keeps it turned */
.flip.is-open .flip__btn{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){.flip:hover .flip__btn,.flip:focus-within .flip__btn{transform:rotateY(180deg)}}
.flip__face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(18px,2vw,34px);border-radius:clamp(14px,1.6vw,26px);background:var(--bg);color:var(--fg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip__face--back{background:var(--fg);color:var(--bg);transform:rotateY(180deg)}
.flip__no,.flip__hint{font:600 12px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.flip__q{font-size:clamp(22px,2.5vw,46px);font-weight:760;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.flip__a{font-size:clamp(15px,1.22vw,21px);font-weight:540;line-height:1.3;letter-spacing:-.01em}
.flip__hint{display:flex;align-items:center;gap:10px}
.flip__hint::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}

@media (max-width:1000px){
  .faqs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .faqs__grid{grid-template-columns:minmax(0,1fr)}
  .flip{aspect-ratio:auto;min-height:300px}
}

/* Ideas: a plain list of posts that inverts on hover */
.ideas{padding:clamp(60px,8vw,140px) var(--pad)}
.ideas__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(24px,3vw,56px)}
.ideas__head .display{margin:0}
.posts{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.post a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,32px);padding:clamp(18px,2.2vw,36px) 0;border-bottom:1.5px solid var(--ink);color:inherit;text-decoration:none;transition:background-color .35s,color .35s,padding .5s var(--ease-out)}
.post__title{font-size:clamp(22px,3vw,54px);font-weight:700;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.post__arrow{display:grid;place-items:center;width:clamp(40px,4vw,64px);aspect-ratio:1;border:1.5px solid currentColor;border-radius:50%;transition:transform .5s var(--ease-out),background-color .35s,border-color .35s,color .35s}
.post__arrow svg{width:38%;height:auto}
.post a:hover,.post a:focus-visible{padding-left:clamp(14px,2vw,36px);padding-right:clamp(14px,2vw,36px);background:var(--ink);color:var(--paper)}
.post a:hover .post__arrow,.post a:focus-visible .post__arrow{transform:rotate(-45deg);border-color:var(--green);background:var(--green);color:#0b0b0b}

/* The image of the hovered post follows the pointer. Touch screens show it inside the row instead. */
.ideas__float{position:fixed;left:0;top:0;z-index:40;width:clamp(240px,24vw,440px);aspect-ratio:4/3;pointer-events:none;will-change:transform}
.ideas__float div{width:100%;height:100%;overflow:hidden;border-radius:clamp(10px,1.2vw,18px);background:#0b0b0b;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);opacity:0;scale:.7;transition:opacity .3s linear,scale .5s var(--ease-out)}
.ideas__float.is-on div{opacity:1;scale:1}
.ideas__float img{display:block;width:100%;height:100%;object-fit:cover}
.post__thumb{display:none}
@media (hover:none),(max-width:760px){
  .ideas__float{display:none}
  .post a{grid-template-columns:minmax(0,1fr) auto}
  .post__thumb{display:block;grid-column:1 / -1;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
}

/* Close: the giant call, contact details, the project form and the footer */
.close{padding:clamp(60px,8vw,140px) var(--pad) clamp(24px,3vw,40px);background:#0b0b0b;color:#fff}
.close__title{display:block;width:fit-content;margin:0;color:inherit;font-size:clamp(72px,17.5vw,340px);font-weight:700;line-height:.78;letter-spacing:-.06em;text-decoration:none;transition:font-weight .6s var(--ease-out)}
.close__title:hover,.close__title:focus-visible{font-weight:900}
.close__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,120px);margin-top:clamp(40px,6vw,100px)}
.contact{display:grid;gap:clamp(22px,2.6vw,40px);align-content:start}
.contact__big{display:block;width:fit-content;color:inherit;font-size:clamp(24px,2.6vw,46px);font-weight:700;line-height:1.05;letter-spacing:-.04em;text-decoration:none}
.contact__big:hover,.contact__big:focus-visible{color:var(--green)}
.contact address{font-style:normal;font-size:clamp(15px,1.2vw,19px);line-height:1.4;opacity:.7}
.socials{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;font-size:clamp(15px,1.2vw,19px);font-weight:560}
.socials a{color:inherit;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.3)}
.socials a:hover,.socials a:focus-visible{border-color:var(--green)}
.field{display:grid;gap:8px}
.field label{font-family:inherit;font-weight:600;font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.field input{width:100%;padding:12px 0;border:0;border-bottom:1.5px solid rgba(255,255,255,.35);border-radius:0;background:transparent;color:#fff;font:inherit;font-size:clamp(17px,1.4vw,22px)}
.field input:focus-visible{outline:none;border-radius:0;border-bottom-color:var(--green)}
/* The browser's autofill paints a light box over the field: keep the dark underline look. */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #0b0b0b inset;caret-color:#fff;transition:background-color 9999s ease-out 0s}
.field input:autofill{box-shadow:0 0 0 1000px #0b0b0b inset;-webkit-text-fill-color:#fff}
.close .btn{background:#fff;color:#0b0b0b}
.note{margin:0;font-size:14px;opacity:.6}
.reach{display:grid;gap:clamp(30px,4vw,64px);align-content:start}
.chat{display:grid;gap:20px;justify-items:start;margin-top:clamp(28px,3.4vw,56px)}
.chat__lead{margin:0;font-size:clamp(30px,3.4vw,62px);font-weight:700;line-height:1.05;letter-spacing:-.04em}
.btn--chat{gap:14px;padding:18px 32px;border:0;font-family:inherit;font-size:clamp(16px,1.2vw,19px)}
.live{position:relative;width:12px;height:12px;border-radius:50%;background:var(--green)}
/* The pulse is a ring that grows and fades: scale and opacity run on the graphics card (a growing shadow repainted every frame) */
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:live 1.6s ease-out infinite;will-change:transform,opacity}
@keyframes live{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
.news{display:grid;gap:10px;align-content:start}
.news__row{display:flex;gap:10px;align-items:flex-end}
.news__gift{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.news__hook{font-size:clamp(26px,2.6vw,44px);font-weight:750;line-height:1;letter-spacing:-.03em}
.news__text{font-size:clamp(15px,1.1vw,17px);line-height:1.5;opacity:.75;max-width:34em;margin-bottom:8px}
.news__go{flex:none;padding:16px 26px;border:0;font-family:inherit;font-size:15px;cursor:pointer}
.news--done .btn{align-self:start;margin-top:6px}
@media (max-width:560px){.news__row{flex-wrap:wrap}.news__go{width:100%;justify-content:center}}
.news__row .field{flex:1}
.close__tools{display:flex;justify-content:flex-start;margin-top:clamp(50px,7vw,120px)}
.bg-switch{display:flex;gap:2px;padding:3px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;font:600 12px/1 'Grift','Grift Static',system-ui,sans-serif}
.bg-switch button{appearance:none;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;letter-spacing:.05em}
.bg-switch button[aria-pressed="true"]{background:#fff;color:#0b0b0b}
.close__tools + .foot{margin-top:20px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 40px;margin-top:clamp(50px,7vw,120px);padding-top:24px;border-top:1.5px solid rgba(255,255,255,.2);font-size:15px}
.foot ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.foot a{color:inherit;text-decoration:none;opacity:.75}
.foot a:hover,.foot a:focus-visible{opacity:1}
.foot p{margin:0;opacity:.6}
/* The studio's signature, as on every Planet Media site */
.foot .foot__credit{display:inline-flex;align-items:center;gap:.4em;opacity:.75}
.foot__credit svg{flex:none;width:1em;height:1em;fill:var(--magenta)}

@media (max-width:760px){
  .reviews,.close__grid{grid-template-columns:minmax(0,1fr)}
}

/* Cursor: a small dot that follows the pointer. Over a link it opens into the four corners of a viewfinder, and
   over a project or a film it grows into the black circle that says what a click does. It is drawn in white and
   inverted against whatever is under it, so it reads black on the light pages and white on the black ones. */
.cursor{position:fixed;left:0;top:0;z-index:100;display:none;align-items:center;justify-content:center;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;will-change:transform;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),border-radius .35s var(--ease-out),background-color .3s}
.has-cursor .cursor{display:flex}
.has-cursor,.has-cursor *{cursor:none !important}
/* Over a link the dot grows into a ring: it inverts against any colour, so what is under it always reads */
.cursor.is-link{width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
/* Over a project or a film: the circle that says what a click does. She likes this one as a circle. */
.cursor.is-view{width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;background:var(--ink);mix-blend-mode:normal}
.cursor__label{color:var(--paper);font-size:13px;font-weight:600;letter-spacing:.02em;opacity:0;transition:opacity .2s}
.cursor.is-view .cursor__label{opacity:1}

/* Intro */
.js .nav,.js .hero__sub,.js .scroll-cue{opacity:0}
.js .hero__title{font-weight:180}
.js .hero__title .line>span{transform:translateY(112%) rotate(5deg)}
.js .computer__pop{opacity:0;transform:translateY(40%) scale(.2) rotate(-16deg)}
.js .reel,.js .screen__hud{opacity:0;transition:opacity .25s linear 1.7s}
/* Once the page is ready these are visible, with or without their entrance: a browser that skips the
   animation, or a tab opened in the background, used to leave the header and the menu invisible. */
.is-ready .nav,.is-ready .hero__sub,.is-ready .scroll-cue{opacity:1}
.is-ready .nav{animation:fade-down .8s .1s var(--ease-out) forwards}
.is-ready .hero__title{animation:inflate 1.5s .25s cubic-bezier(.3,.9,.3,1) forwards}
.is-ready .hero__title .line>span{animation:line-in 1s calc(var(--i)*95ms + .2s) var(--ease-out) forwards}
.is-ready .hero__sub{animation:fade-up .9s .75s var(--ease-out) forwards}
.is-ready .scroll-cue{animation:fade-up .9s 1.1s var(--ease-out) forwards}
.is-ready .computer__pop{animation:pop 1.3s .3s cubic-bezier(.2,.8,.2,1) forwards}
.is-ready .screen__boot{animation:boot .9s 1.05s var(--ease-out) forwards}
.is-ready .reel,.is-ready .screen__hud{opacity:1}

@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes line-in{to{transform:none}}
@keyframes inflate{0%{font-weight:180}62%{font-weight:880}100%{font-weight:760}}
@keyframes pop{0%{opacity:0;transform:translateY(40%) scale(.2) rotate(-16deg)}25%{opacity:1}58%{transform:translateY(-2%) scale(1.06,.96) rotate(2deg)}80%{transform:translateY(0) scale(.985,1.015) rotate(-.6deg)}100%{opacity:1;transform:none}}
@keyframes boot{0%{opacity:1;transform:scale(.2,.004)}35%{opacity:1;transform:scale(1,.004)}70%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes float{from{transform:translateY(-1.4%) rotate(-1.1deg)}to{transform:translateY(1.4%) rotate(1.1deg)}}
@keyframes shadow{from{opacity:.7;transform:scale(.9)}to{opacity:1;transform:scale(1.04)}}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}}
@keyframes glitch{0%{transform:translateX(-3%) skewX(-8deg);filter:hue-rotate(90deg) saturate(3)}40%{transform:translateX(2.5%) skewX(6deg);filter:hue-rotate(-60deg) contrast(1.6)}75%{transform:translateX(-1%);filter:saturate(2)}100%{transform:none;filter:none}}
@keyframes noise{0%{opacity:.75;background-position:0 0}50%{opacity:.5;background-position:60px -40px}100%{opacity:0;background-position:-30px 50px}}
@keyframes blink{to{visibility:hidden}}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:none}100%{transform:translateY(100%)}}

@media (max-width:1300px){
  .scroll-cue{display:none}
}

@media (max-width:760px){
  .wordmark{font-size:26px}
  .btn{padding:12px 20px;font-size:15px}
  .nav{gap:0}
  .nav__burger{display:block}
  .nav__menu{position:fixed;z-index:40;inset:0;display:grid;align-content:center;padding:0 var(--pad);background:#0b0b0b;color:#fff;opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility .45s}
  .nav.is-open .nav__menu{opacity:1;visibility:visible}
  .nav__links{flex-direction:column;gap:clamp(6px,1.6vh,18px);font-size:clamp(34px,11vw,54px);font-weight:760;line-height:1;letter-spacing:-.05em}
  .nav__links a{padding:10px 0}
  .nav__links a::after{display:none}
  .nav.is-open .nav__burger{color:#fff}
  /* The panel hangs off the header, so an opening animation that has not finished must never hide it */
  /* The header is its own stacking context, so the open panel rises with it, over every section of the page */
  .js .nav.is-open,.nav.is-open{opacity:1;animation:none;z-index:95}
}

@media (max-width:760px),(max-aspect-ratio:1/1){
  .hero{display:flex;flex-direction:column;min-height:0;padding-bottom:40px;--ts:19vw;--cw:min(94vw,560px,calc(100svh - 234px - var(--ts)*2.3))}
  .hero__stage{position:relative;inset:auto;padding:118px 0 0}
  .computer{position:relative;top:auto;left:auto;margin:0 auto;translate:none;transform-origin:50% 50%}
  .hero__copy{position:relative;left:auto;bottom:auto;padding:0 var(--pad)}
  .scroll-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .nav,.js .hero__sub,.js .scroll-cue,.js .computer__pop,.js .reel,.js .screen__hud,.js .statement__text .w{opacity:1}
  .js .hero__title{font-weight:760}
  .js .hero__title .line>span,.js .computer__pop{transform:none}
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.nav--on-dark{color:#fff}
.nav--on-dark .btn{background:#fff;color:#0b0b0b}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.section-label{display:flex;align-items:center;gap:10px;margin:0 0 clamp(18px,2.2vw,34px);font:600 13px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.section-label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--magenta)}

/* Scroll effects driven by site.js */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out) calc(var(--d,0)*90ms),transform .9s var(--ease-out) calc(var(--d,0)*90ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-words] .w{opacity:.14;will-change:opacity}

/* Page hero: a black band with the giant title */
.phero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(86svh,860px);padding:clamp(120px,16vh,200px) var(--pad) clamp(36px,6vh,72px);overflow:clip;background:#0b0b0b;color:#fff}
.phero__title{margin:0;font-size:clamp(64px,min(15vw,30svh),300px);font-weight:760;line-height:.78;letter-spacing:-.055em}
.phero__title .line{display:block;overflow:hidden;padding:.1em .08em .26em 0;margin:-.1em 0 -.26em}
.phero__title .line>span{display:block;white-space:nowrap;transform-origin:left top}
.intro-done .phero__title .line{overflow:visible}
.phero__title .ch{display:inline-block}
.phero__lead{margin:clamp(24px,4vh,48px) 0 0;max-width:24em;font-size:clamp(19px,2.1vw,36px);font-weight:580;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.js .phero__title{font-weight:180}
.js .phero__title .line>span{transform:translateY(112%) rotate(5deg)}
/* A transition, not an animation fill, so the sentence can never get stuck invisible */
.js .phero__lead{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out) .7s,transform .9s var(--ease-out) .7s}
.is-ready .phero__title{animation:inflate 1.5s .2s cubic-bezier(.3,.9,.3,1) forwards}
.is-ready .phero__title .line>span{animation:line-in 1s calc(var(--i,0)*95ms + .15s) var(--ease-out) forwards}
.is-ready .phero__lead{opacity:1;transform:none}

.intro{padding:clamp(60px,9vw,160px) var(--pad) clamp(30px,5vw,80px)}
.intro__text{margin:0;max-width:19em;font-size:clamp(28px,4.4vw,84px);font-weight:700;line-height:.98;letter-spacing:-.045em}

/* Packs side by side as rounded cards, like the rest of the site. The hovered card inverts. */
.compare{padding:clamp(60px,8vw,140px) var(--pad)}
.compare__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,24px)}
.plan{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:clamp(14px,1.8vw,26px);padding:clamp(22px,2.6vw,44px);border-radius:clamp(14px,1.6vw,26px);background:#efefef;color:#0b0b0b}
.plan{transition:background-color .4s,color .4s,opacity .8s var(--ease-out) calc(var(--d,0)*90ms),transform .9s var(--ease-out) calc(var(--d,0)*90ms)}
.plan:hover,.plan:focus-within{background:#0b0b0b;color:#fff}
.plan__no{color:var(--magenta);font-size:clamp(28px,3vw,54px);font-weight:760;line-height:.8;letter-spacing:-.05em}
.plan__name{margin:0;font-size:clamp(34px,4.6vw,84px);font-weight:760;line-height:.85;letter-spacing:-.055em}
.plan__lead{margin:0;font-size:clamp(17px,1.5vw,25px);font-weight:580;line-height:1.12;letter-spacing:-.025em}
.plan__list{margin:0;padding:0;list-style:none;font-size:clamp(15px,1.15vw,19px);font-weight:540}
.plan__list li{padding:11px 0;border-top:1.5px solid color-mix(in srgb,currentColor 24%,transparent)}
.plan__foot{display:grid;gap:18px;justify-items:start}
.plan:hover .btn,.plan:focus-within .btn{background:#fff;color:#0b0b0b}

@media (max-width:760px){
  .compare__grid{grid-template-columns:minmax(0,1fr)}
}

/* Services: footage block. It only peeks at the bottom of the first screen, a tenth of the viewport over the end of the black hero. */
.media{position:relative;z-index:2;margin:-10svh var(--pad) 0;overflow:hidden;border-radius:clamp(14px,1.6vw,26px);aspect-ratio:16/7;background:#0b0b0b}
.media__video{display:block;width:100%;height:100%;object-fit:cover;filter:hue-rotate(215deg) saturate(1.7) contrast(1.08);transition:filter 1.2s var(--ease-out)}
.media:hover .media__video{filter:none}
.page--services .phero{min-height:100svh;padding-bottom:calc(10svh + clamp(36px,7vh,80px))}

/* Services overview: two cards per row. The active card opens sideways and shows its detail; its neighbour folds into a spine. */
.svcgrid{padding:clamp(40px,6vw,100px) var(--pad)}
.svcgrid__rows{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,24px)}
.svcrow{display:flex;gap:clamp(12px,1.4vw,24px)}
.tile{position:relative;flex:1 1 0;display:flex;gap:clamp(24px,3vw,56px);min-width:0;height:clamp(320px,31vw,500px);padding:clamp(20px,2.4vw,42px);overflow:hidden;border-radius:clamp(14px,1.6vw,26px);background:#efefef;color:#0b0b0b;transition:flex-grow .75s var(--ease-out),flex-basis .75s var(--ease-out),background-color .45s,color .45s}
/* Fixed width, so the text of a card never reflows while the card changes size */
.tile__main{position:relative;flex:none;display:flex;flex-direction:column;width:clamp(240px,33vw,520px);transition:opacity .35s}
.tile__title{margin:0;max-width:9.5em;font-size:clamp(26px,3.3vw,60px);font-weight:760;line-height:.94;letter-spacing:-.05em;text-wrap:balance;transition:font-weight .5s var(--ease-out)}
.tile__line{margin:auto 0 0;max-width:24em;font-size:clamp(16px,1.3vw,22px);font-weight:560;line-height:1.2;letter-spacing:-.02em}
.tile__tools{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.3vw,22px);margin:clamp(12px,1.2vw,20px) 0 0;padding:0;list-style:none}
.tile__tools li{display:flex}
.tile__tools svg{display:block;width:clamp(20px,1.7vw,30px);height:auto;opacity:.75;transition:opacity .3s,transform .5s var(--ease-out)}
.tile__tools li:hover svg{transform:translateY(-3px) scale(1.14)}
.tile__tool-text{font:600 12px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.tile__more{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateX(24px);transition:opacity .3s,transform .6s var(--ease-out)}
.tile__more p{margin:0 0 .9em;font-size:clamp(15px,1.15vw,19px);font-weight:520;line-height:1.3}
.tile__more p:first-child{font-size:clamp(18px,1.55vw,26px);font-weight:620;line-height:1.14;letter-spacing:-.025em}
.tile__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:.4em 0 0;padding:0;list-style:none;font-size:clamp(14px,1.05vw,17px);font-weight:540}
.tile__list li{padding:9px 0;border-top:1.5px solid rgba(255,255,255,.22)}
.tile__spine{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(20px,2.4vw,42px) 0;font-size:clamp(16px,1.35vw,22px);font-weight:700;letter-spacing:-.02em;white-space:nowrap;writing-mode:vertical-rl;opacity:0;pointer-events:none;transition:opacity .3s}
.tile.is-open{flex-grow:1;background:#0b0b0b;color:#fff}
.tile.is-open .tile__title{font-weight:900}
.tile.is-open .tile__tools svg{opacity:1}
.tile.is-open .tile__more{opacity:1;transform:none;transition:opacity .5s .3s,transform .7s var(--ease-out) .2s}
/* Each card leads to its own service page */
.tile__go{align-self:flex-start;margin-top:clamp(16px,1.6vw,26px);background:#fff;color:#0b0b0b}
.svcrow.has-open .tile:not(.is-open){flex:0 0 clamp(64px,6.4vw,110px)}
.svcrow.has-open .tile:not(.is-open) .tile__main{opacity:0}
.svcrow.has-open .tile:not(.is-open) .tile__spine{opacity:1;transition:opacity .4s .3s}

/* AI and automation: black band with the footage blended into it */
.aiband{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,80px);align-items:center;margin:clamp(40px,6vw,100px) 0 0;padding:clamp(60px,8vw,140px) var(--pad);background:#0b0b0b;color:#fff}
.aiband__title{margin:0;font-size:clamp(44px,7vw,130px);font-weight:760;line-height:.84;letter-spacing:-.055em}
.aiband__lead{margin:clamp(20px,2.4vw,40px) 0 0;max-width:20em;font-size:clamp(20px,2.1vw,36px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.aiband__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(24px,3vw,56px);margin-top:clamp(28px,3.4vw,56px)}
.aiband__label{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:600 13px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.aiband__label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
.aiband__cols div:nth-child(2) .aiband__label::before{background:var(--magenta)}
.aiband__list{margin:0;padding:0;list-style:none;font-size:clamp(15px,1.2vw,20px);font-weight:540}
.aiband__list li{padding:11px 0;border-bottom:1.5px solid rgba(255,255,255,.2)}
.aiband__video{display:block;width:100%;height:auto;filter:hue-rotate(-92deg) saturate(1.3);mix-blend-mode:screen}

@media (max-width:760px){
  .media{aspect-ratio:4/3}
  .aiband,.aiband__cols{grid-template-columns:minmax(0,1fr)}
  .svcrow{flex-direction:column}
  .tile,.svcrow.has-open .tile:not(.is-open){flex:none;flex-direction:column;height:auto}
  .tile__main{width:auto}
  .tile__more{display:none;opacity:1;transform:none}
  .tile.is-open .tile__more{display:flex}
  .svcrow.has-open .tile:not(.is-open) .tile__main{opacity:1}
  .tile__spine{display:none}
}

/* Work page: one wall of equal cards and one layout for every project. A click grows the card into the project. */
:root:has(.page--work){scrollbar-gutter:stable}
:root.has-story{overflow:hidden}
.page--work,.page--project{--wr:clamp(18px,2vw,34px);--wgap:clamp(12px,1.4vw,24px);--win:clamp(20px,2.4vw,44px)}
/* A project at its own address: the same layout as the one that opens over the Work page, drawn on the server */
.project{padding:clamp(24px,3vw,50px) var(--pad) 0}
.page--project .phero--legal .story__cat{margin-bottom:clamp(10px,1.2vw,18px)}
.page--work .phero{min-height:min(74svh,760px)}

/* A frame always has the same shape. A picture that is already 16:9 fills it; any other one sits whole inside it, never cropped. */
.frame{position:relative;display:block;margin:0;overflow:hidden;border-radius:var(--wr);aspect-ratio:var(--ar,4/3);background:rgba(127,127,127,.14)}
.frame img,.frame video,.frame canvas{position:absolute;inset:0;width:100%;height:100%}
.frame img{object-fit:cover;transition:scale 1.4s var(--ease-out)}
.frame video{object-fit:cover}

.wact,.wnext{position:relative;height:min(88svh,54vw);min-height:440px;margin:var(--wgap) var(--pad) 0;overflow:clip;border-radius:var(--wr);background:#0b0b0b;color:#fff}
.wact video,.wnext video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wact::after,.wnext::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.08) 62%,rgba(0,0,0,.4))}
/* The footage is redrawn as dots of one colour on black. Hovering the card shows the real film. */
.wact__dither{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;transition:opacity .7s var(--ease-out)}
.wact:hover .wact__dither,.wnext:hover .wact__dither{opacity:0}
.wact__kicker{position:absolute;z-index:1;left:var(--win);top:var(--win);margin:0;font:600 13px/1 Grift,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.wact__copy{position:absolute;z-index:1;left:var(--win);right:var(--win);bottom:var(--win)}
.wact__line{margin:0 0 clamp(14px,1.8vw,30px);max-width:15em;font-size:clamp(18px,2vw,34px);font-weight:600;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.wact__word{margin:0;padding-bottom:.12em;font-size:clamp(60px,13.4vw,270px);font-weight:760;line-height:.74;letter-spacing:-.06em}
.js .wact__word{font-weight:180;transition:font-weight 1.5s cubic-bezier(.3,.9,.3,1) .1s}
.js .wact.is-live .wact__word{font-weight:760}
/* The weight moves in steps of 4: each frame reuses a weight the browser already built instead of making a new one */
@property --wact-w{syntax:'<number>';inherits:false;initial-value:760}
@supports (font-weight:round(760,4)){
  .js .wact__word{--wact-w:180;font-weight:round(var(--wact-w),4);transition:--wact-w 1.5s cubic-bezier(.3,.9,.3,1) .1s}
  .js .wact.is-live .wact__word{--wact-w:760;font-weight:round(var(--wact-w),4)}
}
.wnext{height:min(44svh,27vw);min-height:260px;margin-bottom:var(--wgap)}
.wnext .wact__copy{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.wnext__title{margin:0;font-size:clamp(34px,5.2vw,104px);font-weight:760;line-height:.84;letter-spacing:-.055em;text-wrap:balance}
.wnext__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-bottom:.6em}
.wnext .btn{background:#fff;color:#0b0b0b}

/* More work: stacking cards, the mechanic of the reference Eliana sent. The block stays on screen with the title on top, never covered.
   Every card comes up whole from under the bottom edge at the speed of the scroll, one after another, and stops beside the previous one.
   They never overlap. When the places on screen are taken, the row moves one place to the left for every new card, and the card that
   leaves fades before the edge can cut it. Without the sequence (small or portrait screens, reduced motion, no script) the row scrolls
   sideways, like the row of "Our work." on the home. */
.wmore{position:relative;margin:var(--wgap) var(--pad) 0;border-radius:var(--wr);background:#0b0b0b;color:#fff}
.wmore__pin{display:flex;flex-direction:column;overflow:clip;border-radius:var(--wr);padding:clamp(36px,5vw,90px) 0 clamp(28px,3vw,50px)}
.wmore__head{display:flex;flex:none;flex-direction:column-reverse;align-items:flex-start;gap:clamp(14px,1.8vw,30px);padding:0 var(--win)}
.wmore__title{margin:0;font-size:clamp(60px,14vw,290px);font-weight:760;line-height:.78;letter-spacing:-.06em}
.wmore__lead{margin:0;max-width:22em;font-size:clamp(17px,1.6vw,28px);font-weight:600;line-height:1.1;letter-spacing:-.02em;opacity:.75}
.wmore__row{display:flex;align-items:flex-start;gap:var(--wgap);margin-top:clamp(22px,3vw,52px);padding:16px var(--win);overflow:auto hidden;scrollbar-width:none}
.wmore__row::-webkit-scrollbar{display:none}
.wmore.is-pinned .wmore__pin{position:sticky;top:0;height:100svh;padding:clamp(84px,11svh,130px) 0 clamp(20px,2.4svh,32px)}
.wmore.is-pinned .wmore__title{font-size:clamp(60px,min(12vw,19svh),250px)}
.wmore.is-pinned .wmore__row{flex:1 1 0;min-height:0;align-items:center;margin-top:0;overflow:visible;will-change:transform}
.mcard{flex:none;width:var(--mw,clamp(230px,21vw,380px));border-radius:var(--wr);background:#ede8df;color:#0b0b0b;translate:var(--x,0px) var(--y,0px);rotate:calc(var(--tilt)*(1 + var(--lift,0)*1.5));will-change:translate,rotate}
.mcard:nth-child(even){background:#fff}
.mcard a{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,22px);height:100%;padding:clamp(18px,1.8vw,32px);color:inherit;text-decoration:none;-webkit-user-drag:none}
.mcard__name{margin:0;min-height:1.9em;font-size:clamp(22px,2.1vw,38px);font-weight:760;line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.mcard .dot{color:#0b0b0b}
.mcard__media{flex:none;aspect-ratio:1;margin:0;overflow:hidden;border-radius:calc(var(--wr)*.6);background:rgba(0,0,0,.08)}
.mcard__media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease-out);pointer-events:none}
.mcard a:hover .mcard__media img,.mcard a:focus-visible .mcard__media img{scale:1.06}
.mcard--bw img{filter:grayscale(1)}
.mcard__line{margin:0;min-height:3.75em;font-size:clamp(14px,1.05vw,17px);font-weight:600;line-height:1.25}

/* The wall: every project is the same card. One colour, the name, one line and one picture frame, always the same size and in the same place. */
.pwall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wgap);padding:var(--wgap) var(--pad) 0}
.pcard{position:relative;overflow:clip;border-radius:var(--wr);background:var(--bg);color:var(--fg)}
.pcard .dot{color:var(--dot,currentColor)}
.pcard__link{display:flex;flex-direction:column;height:100%;padding:var(--win);color:inherit;text-decoration:none}
/* No ring around a card. Keyboard focus shows on the round button, which turns and grows exactly as it does under the pointer. */
.pcard__link:focus-visible,.mcard a:focus-visible{outline:none}
.pcard__head{padding-right:clamp(60px,6vw,100px);padding-bottom:clamp(20px,2.6vw,44px)}
.pcard__name{margin:0;font-size:clamp(24px,2.5vw,46px);font-weight:760;line-height:.94;letter-spacing:-.045em;text-wrap:balance}
.pcard__line{margin:clamp(8px,.9vw,14px) 0 0;max-width:24em;font-size:clamp(15px,1.2vw,20px);font-weight:560;line-height:1.2;letter-spacing:-.01em;opacity:.64;text-wrap:balance}
.pcard__open{position:absolute;z-index:2;right:var(--win);top:var(--win);width:clamp(42px,3.6vw,60px);aspect-ratio:1;border-radius:50%;background:var(--fg);color:var(--bg);transition:rotate .7s var(--ease-out),scale .7s var(--ease-out)}
.pcard__open::before,.pcard__open::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:2.5px;border-radius:2px;background:currentColor;translate:-50% -50%}
.pcard__open::after{rotate:90deg}
.pcard__link:hover .pcard__open,.pcard__link:focus-visible .pcard__open{rotate:90deg;scale:1.1}
.pcard__cover{margin-top:auto;background:#fff}
/* The pile: four photos, always the same box for every project, pushed to the bottom of the card so it never reaches the text */
.pcard__stage{display:flex;flex:1 1 auto;align-items:flex-end;justify-content:center;padding-top:clamp(10px,1.4vw,24px)}
.pcard__pile{position:relative;width:71%;aspect-ratio:1}
.pcard__pile--square{overflow:hidden;border-radius:clamp(8px,1vw,18px);box-shadow:0 22px 60px rgba(0,0,0,.28);rotate:-3deg;transition:rotate 1s var(--ease-out),scale 1s var(--ease-out)}
@media (hover:hover){.pcard__link:hover .pcard__pile--square{rotate:0deg;scale:1.04}}
.pcard__pile--square img,.pcard__pile canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Every print of a pile is the same square. A photo that is not square sits whole inside it, over a soft copy of itself. */
.pcard__print{position:absolute;inset:0;overflow:hidden;border-radius:clamp(8px,1vw,18px);background:rgba(127,127,127,.2);box-shadow:0 22px 60px rgba(0,0,0,.28);z-index:calc(10 - var(--o));transform-origin:50% 100%;transform:translate(calc(var(--o)*3% + var(--dx,0px)),calc(var(--o)*-2.5%)) rotate(calc(var(--o)*2.5deg - 2deg + var(--turn,0deg))) scale(calc(1 - var(--o)*.05));transition:transform 1s var(--ease-out),opacity .5s;touch-action:pan-y}
.pcard__print img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard__print--fit img{object-fit:contain}
.pcard__print--fit .pcard__back{object-fit:cover;filter:blur(22px);scale:1.45}
@media (hover:hover){.pcard__link:hover .pcard__print{transform:translate(calc(var(--o)*6.5% - 9% + var(--dx,0px)),calc(var(--o)*-2%)) rotate(calc(var(--o)*4deg - 5deg + var(--turn,0deg))) scale(calc(1 - var(--o)*.04))}}
.pcard__print.is-held,.pcard__link:hover .pcard__print.is-held{transition:none}
.pcard__print.is-out,.pcard__link:hover .pcard__print.is-out{transform:translate(58%,-3%) rotate(12deg);opacity:0}
.wnoise canvas{opacity:0}
.wnoise.is-gl canvas{opacity:1}
.pcard--bw .pcard__pile--square img,.pcard--bw .pcard__print{filter:grayscale(1)}
.pcard--invite .pcard__cover{background:#0b0b0b}
.pcard__link:hover .pcard__cover .wact__dither{opacity:0}
.pcard__link:hover .frame img,.pcard__link:focus-visible .frame img{scale:1.045}
.pcard--bw .frame img,.pcard--bw .pcard__art img{filter:grayscale(1)}
/* The one large card: text on the left, three tilted columns of pictures that rise and fall on the right */
.pcard--big{grid-column:1 / -1;height:min(86svh,52vw);min-height:460px}
.pcard--big .pcard__name{max-width:9em;font-size:clamp(30px,3.6vw,68px)}
.pcard--big .pcard__head{position:relative;z-index:2}
.pcard__art{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;--g:clamp(10px,1.1vw,20px);transition:scale 1.4s var(--ease-out)}
@media (hover:hover){.pcard__link:hover .pcard__art{scale:1.035}}
.pcard--columns .pcard__art::after{content:"";position:absolute;inset:0;background:linear-gradient(97deg,var(--bg) 0 42%,transparent 66%)}
/* One strip of photos that drifts sideways across the lower part of a large card */
.wstrip{position:absolute;left:0;right:0;bottom:calc(var(--win) + 1.5%);height:54%;rotate:-2.5deg;scale:1.04}
.wstrip__track{display:flex;gap:var(--g);width:max-content;height:100%;animation:wdrift 70s linear infinite paused}
.wstrip__track img{flex:none;width:auto;height:100%}
.is-live .wstrip__track{animation-play-state:running}
@media (hover:hover){.pcard__link:hover .wstrip__track{animation-play-state:paused}}
@keyframes wdrift{to{transform:translateX(calc(-50% - var(--g)/2))}}
.pcard__art img{display:block;border-radius:clamp(8px,1vw,18px);background:rgba(127,127,127,.2)}
.wcol img{width:100%;height:auto}
.wcols{position:absolute;top:50%;right:-7%;width:58%;height:136%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);align-items:start;translate:0 -50%;rotate:-9deg}
.wcol{display:flex;flex-direction:column;gap:var(--g);animation:wrise 44s linear infinite paused}
.wcol:nth-child(2){animation-direction:reverse;animation-duration:54s}
.is-live .wcol{animation-play-state:running}
@media (hover:hover){.pcard__link:hover .wcol{animation-play-state:paused}}
@keyframes wrise{to{transform:translateY(calc(-50% - var(--g)/2))}}

/* Project dock, after the macOS one: icons swell under the pointer. Hidden on touch screens and small windows. */
.wdock{position:fixed;left:50%;bottom:18px;z-index:60;display:none;align-items:flex-end;gap:8px;padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:24px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 18px 50px rgba(0,0,0,.2);translate:-50% 140%;opacity:0;transition:translate .8s var(--ease-out),opacity .5s;--base:46px}
.wdock.is-on{translate:-50% 0;opacity:1}
.wdock a{position:relative;flex:none;width:calc(var(--base)*var(--k,1));height:calc(var(--base)*var(--k,1));text-decoration:none}
.wdock i{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:28%;background:#0b0b0b;color:#fff;font-size:calc(var(--base)*var(--k,1)*.46);font-style:normal;font-weight:760;letter-spacing:-.04em}
/* A logo paints its own tile: the black of a letter tile never shows as a dark ring around the rounded edge of a picture */
.wdock i:has(img){background:none}
.wdock img{display:block;width:100%;height:100%;padding:13%;background:#fff;object-fit:contain}
.wdock img.is-cover,.wdock img.is-left,.wdock img.is-zoom{padding:0;object-fit:cover}
.wdock img.is-left{object-position:0 50%}
.wdock img.is-zoom{scale:1.7}
.wdock b{position:absolute;left:50%;bottom:calc(100% + 12px);padding:8px 12px;border-radius:10px;background:#0b0b0b;color:#fff;font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;opacity:0;translate:-50% 6px;pointer-events:none;transition:opacity .2s,translate .3s var(--ease-out)}
.wdock a:hover b,.wdock a:focus-visible b{opacity:1;translate:-50% 0}
@media (hover:hover) and (pointer:fine) and (min-width:900px){.wdock{display:flex}}

/* The project: title and opening line, a large picture with a smaller one beside the facts, the three texts, and the gallery */
.story{position:fixed;inset:0;z-index:90;background:var(--bg,#fff);color:var(--fg,#0b0b0b);clip-path:inset(var(--t,40%) var(--r,40%) var(--b,40%) var(--l,40%) round var(--wr));transition:clip-path .85s var(--ease-out)}
.story[hidden]{display:none}
.story.is-open{clip-path:inset(0px 0px 0px 0px round 0px)}
.story.is-dark{--bg:#0b0b0b;--fg:#fff}
.story.is-dark .frame{background:#191919}
.story.is-dark img{filter:grayscale(1)}
.story .dot{color:var(--dot,var(--green))}
.story__scroll{height:100%;overflow:hidden auto;overscroll-behavior:contain;padding:clamp(90px,9vw,150px) var(--pad) 0;scrollbar-width:none;outline:0}
.story__scroll::-webkit-scrollbar{display:none}
.story__close{position:absolute;z-index:2;top:clamp(16px,1.8vw,30px);right:var(--pad);width:clamp(48px,4.4vw,72px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--fg,#0b0b0b);color:var(--bg,#fff);transition:rotate .7s var(--ease-out),scale .7s var(--ease-out)}
.story__close::before,.story__close::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:2.5px;border-radius:2px;background:currentColor;translate:-50% -50%;rotate:45deg}
.story__close::after{rotate:-45deg}
.story__close:hover,.story__close:focus-visible{rotate:90deg;scale:1.1}
.story__cat,.story__label-sm,.story__next-label,.story__quote cite{font:600 13px/1.2 Grift,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;font-style:normal}
.story__cat{margin:0 0 clamp(14px,1.6vw,26px);opacity:.65}
.story__title{margin:0;max-width:11em;font-size:clamp(46px,8.6vw,176px);font-weight:760;line-height:.84;letter-spacing:-.055em;text-wrap:balance}
.story__title{padding-bottom:.1em}
.story__intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,100px);align-items:start;margin:clamp(30px,4.5vw,80px) 0 clamp(36px,5vw,90px)}
.story__lead{margin:0;font-size:clamp(24px,2.9vw,52px);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.story__lead--long{font-size:clamp(24px,2.9vw,52px)}
/* Two photos fill the whole width like a hero: both as tall as each other, each one as wide as its own shape asks, nothing cropped */
.story__row{display:flex;justify-content:center;gap:var(--wgap);margin:0 0 var(--wgap)}
.story__row .frame{flex:1 1 0;min-width:0}
.story__row .frame:only-child{flex:0 1 auto;width:min(100%,calc(84vh*var(--ar,1.333)))}
.js .story__row .frame:nth-child(2){transition-delay:.14s}
.story__label-sm{margin:0 0 14px;opacity:.65}
.story__did{margin:0;padding:0;list-style:none;columns:2;column-gap:24px;font-size:clamp(15px,1.15vw,19px);font-weight:560;line-height:1.45}
.story__did li{break-inside:avoid;padding-bottom:4px}
.story__visit{display:inline-block;margin-top:clamp(16px,1.8vw,28px)}
.story .textlink:hover,.story .textlink:focus-visible{color:inherit;border-color:transparent}
.story__chapter{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,5vw,100px);padding:clamp(44px,6vw,110px) 0}
.story__label{margin:0;font-size:clamp(30px,4vw,72px);font-weight:760;line-height:.9;letter-spacing:-.05em}
.story__text p{margin:0 0 1em;max-width:34em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.36}
.story__text p:last-child{margin-bottom:0}
.story__goals{margin:0;padding:0;list-style:none}
.story__goals li{position:relative;padding:0 0 clamp(12px,1.4vw,22px) 1.1em;font-size:clamp(18px,1.9vw,32px);font-weight:640;line-height:1.1;letter-spacing:-.03em}
.story__goals li::before{content:"";position:absolute;left:0;top:.42em;width:.34em;height:.34em;border-radius:50%;background:var(--dot,var(--green))}
.story__quote{margin:clamp(20px,2.4vw,40px) 0 0;padding:0}
.story__quote p{max-width:none;font-size:clamp(22px,2.5vw,42px);font-weight:640;line-height:1.1;letter-spacing:-.035em}
.story__quote cite{display:block;margin-top:1em;opacity:.65}
/* The gallery of a project: one slider of whole photos that drifts sideways and stops under the pointer */
.story__strip{height:clamp(240px,46vh,540px);margin:0 calc(var(--pad)*-1);overflow:hidden;--g:var(--wgap)}
.story__strip img{border-radius:var(--wr)}
.story .wstrip__track,.page--project .wstrip__track{animation-play-state:running}
@media (hover:hover){.story__strip:hover .wstrip__track{animation-play-state:paused}}
.js .story__strip{opacity:0;translate:0 28px;transition:opacity .7s var(--ease-out),translate .9s var(--ease-out)}
.js .story__strip.is-in{opacity:1;translate:0 0}
.story__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(60px,8vw,150px) 0 clamp(44px,6vw,110px)}
.story__cta p{margin:0;font-size:clamp(34px,5vw,96px);font-weight:760;line-height:.9;letter-spacing:-.05em}
.story .btn{background:var(--fg,#0b0b0b);color:var(--bg,#fff)}
.story__next{display:block;width:calc(100% + var(--pad)*2);margin:0 calc(var(--pad)*-1);padding:clamp(34px,4.6vw,84px) var(--pad) clamp(44px,6vw,110px);border:0;border-radius:var(--wr) var(--wr) 0 0;background:var(--fg,#0b0b0b);color:var(--bg,#fff);font:inherit;text-align:left}
.story__next-label{display:block;margin-bottom:clamp(14px,1.6vw,26px);opacity:.7}
.story__next-name{display:block;font-size:clamp(44px,8vw,160px);font-weight:760;line-height:.86;letter-spacing:-.055em;transition:translate .7s var(--ease-out)}
.story__next:hover .story__next-name,.story__next:focus-visible .story__next-name{translate:clamp(10px,2vw,40px) 0}
/* Everything in a project arrives as the reader reaches it */
.js .story__head>*{opacity:0;translate:0 44px;transition:opacity .6s var(--ease-out),translate .9s var(--ease-out)}
.js .story.is-open:not(.is-swapping) .story__head>*{opacity:1;translate:0 0;transition-delay:calc(.34s + var(--i,3)*.09s)}
.js .story__title{font-weight:200}
.js .story.is-open:not(.is-swapping) .story__title{font-weight:760;transition:opacity .6s var(--ease-out) .43s,translate .9s var(--ease-out) .43s,font-weight 1.3s cubic-bezier(.3,.9,.3,1) .4s}
.js .story__body{transition:opacity .4s}
.js .story.is-swapping .story__body{opacity:0}
.js .story .frame{clip-path:inset(0 0 100% 0 round var(--wr));transition:clip-path 1.1s var(--ease-out) calc(var(--k,0)*90ms)}
.js .story .frame img{scale:1.12;transition:scale 1.6s var(--ease-out) calc(var(--k,0)*90ms)}
.js .story .frame.is-in{clip-path:inset(0 0 0 0 round var(--wr))}
.js .story .frame.is-in img{scale:1}
.js .story__text>*,.js .story__goals li,.js .story__cta>*{opacity:0;translate:0 28px;transition:opacity .7s var(--ease-out) calc(var(--k,0)*70ms),translate .9s var(--ease-out) calc(var(--k,0)*70ms)}
.js .is-in>.story__text>*,.js .is-in .story__goals li,.js .story__cta.is-in>*{opacity:1;translate:0 0}
.js .story__label,.js .story__next-name{font-weight:200;transition:font-weight 1.2s cubic-bezier(.3,.9,.3,1),translate .7s var(--ease-out)}
.js .is-in .story__label,.js .story__next.is-in .story__next-name{font-weight:760}

@media (max-width:900px){
}
@media (max-width:760px){
  .pwall,.story__intro,.story__chapter{grid-template-columns:minmax(0,1fr)}
  .story__row{flex-direction:column}
  .story__row .frame{flex:none;width:100%}
  .wact,.wnext,.pcard--big{height:min(80svh,150vw)}
  .wnext{height:min(40svh,75vw)}
  .wcols{top:64%;right:-14%;width:128%;height:120%}
  .pcard--columns .pcard__art::after{background:linear-gradient(to bottom,var(--bg) 0 26%,transparent 52%)}
  .wstrip{height:48%}
  /* A strip card fits its content on a phone: the words, then the photos right under them, no empty band */
  .pcard--strip{height:auto;min-height:0}
  .pcard--strip .pcard__art{position:relative;inset:auto;order:2;height:68vw;margin:clamp(14px,3.4vw,24px) calc(var(--win)*-1) calc(var(--win)*-1)}
  .pcard--strip .wstrip{top:0;bottom:0;height:auto}
  .pcard__pile{width:84%}
}
@media (prefers-reduced-motion:reduce){
  .wcol,.wstrip__track{animation:none}
  .story{transition:none}
}

/* About page */
.years{padding:clamp(30px,5vw,80px) var(--pad)}
.years__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,44px);margin:0;padding:0;list-style:none}
.years__no{display:block;font-size:clamp(36px,5.6vw,108px);font-weight:760;line-height:.85;letter-spacing:-.055em}
.years__list li:nth-child(odd) .years__no{color:var(--green)}
.years__list li:nth-child(even) .years__no{color:var(--magenta)}
.js .years__no{font-weight:200;transition:font-weight 1.3s var(--ease-out) calc(var(--d,0)*90ms + .1s)}
.js .is-in .years__no{font-weight:760}
.years__list p{margin:clamp(12px,1.4vw,22px) 0 0;max-width:16em;font-size:clamp(15px,1.25vw,21px);font-weight:560;line-height:1.22;letter-spacing:-.015em}

.origin{padding:clamp(60px,8vw,140px) var(--pad)}
.origin__cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,100px);align-items:start}
.origin__lead{margin:0;font-size:clamp(24px,2.9vw,52px);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.origin__cols div p{margin:0 0 1em;font-size:clamp(17px,1.5vw,25px);font-weight:520;line-height:1.3;letter-spacing:-.015em}

/* Founder: the words carry the weight. The portrait stays small and two-tone, with the real colours on hover. */
.founder{padding:clamp(60px,8vw,140px) var(--pad);background:#0b0b0b;color:#fff}
/* The quote leads, its author signs below it, and the text column ends level with the bottom of the photo */
.founder__meta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,5vw,100px);margin-top:clamp(30px,4vw,70px)}
/* One portrait size for everybody: the founder photo is exactly as wide as a team column */
.page--about{--tgap:clamp(12px,1.6vw,28px);--member-w:calc((100vw - var(--pad)*2 - var(--tgap)*3)/4)}
.founder__id{display:block}
.founder__title{grid-column:1 / -1;margin-bottom:clamp(10px,2vw,40px)}
.founder__photo{position:relative;width:var(--member-w);margin:0;overflow:hidden;border-radius:clamp(12px,1.4vw,22px);aspect-ratio:4/5;background:#0b0b0b}
.founder__photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s var(--ease-out)}
.founder__photo::after{content:"";position:absolute;inset:0;background:var(--tone);mix-blend-mode:multiply;transition:opacity .6s var(--ease-out)}
.founder__photo:hover img{filter:none}
.founder__photo:hover::after{opacity:0}
.founder__name{margin:0;font-size:clamp(28px,3.4vw,62px);font-weight:760;line-height:.84;letter-spacing:-.055em}
.founder__role{margin:10px 0 0;font:600 13px/1 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.founder__bio{margin:0;max-width:30em;font-size:clamp(17px,1.5vw,25px);font-weight:520;line-height:1.3}
.founder__quote{margin:0;padding:0;max-width:17em;font-size:clamp(32px,5vw,96px);font-weight:660;line-height:1.08;letter-spacing:-.035em}
.founder__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(18px,2vw,32px)}
.founder .btn{background:#fff;color:#0b0b0b}
.founder__quote::before{content:"\201C"}
.founder__quote::after{content:"\201D"}

.values{padding:clamp(60px,8vw,140px) var(--pad) clamp(30px,4vw,70px)}
.values__title{margin:0 0 clamp(28px,4vw,70px);max-width:12em;font-size:clamp(36px,5.4vw,104px);font-weight:760;line-height:.9;letter-spacing:-.05em;text-wrap:balance}
.values__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);margin:0;padding:0;list-style:none}
.value{padding:clamp(22px,2.6vw,44px);border-radius:clamp(14px,1.6vw,26px);background:#efefef;color:#0b0b0b}
.value{transition:background-color .45s,color .45s,opacity .8s var(--ease-out) calc(var(--d,0)*90ms),transform .9s var(--ease-out) calc(var(--d,0)*90ms)}
.value:hover{background:#0b0b0b;color:#fff}
.value h3{margin:0 0 clamp(40px,6vw,110px);font-size:clamp(26px,3vw,54px);font-weight:760;line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.value p{margin:0;max-width:34em;font-size:clamp(16px,1.3vw,22px);font-weight:520;line-height:1.3}

@media (max-width:760px){
  .years__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .origin__cols,.founder,.founder__meta,.values__grid{grid-template-columns:minmax(0,1fr)}
}

/* Conversion blocks shared by the inner pages */
.phero__title .phero__lead{display:block;font-weight:580}
.phero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(20px,3.4vh,40px)}
.phero .btn{background:#fff;color:#0b0b0b}
.textlink{padding-bottom:3px;border-bottom:1.5px solid currentColor;color:inherit;font-size:clamp(15px,1.15vw,19px);font-weight:600;text-decoration:none;transition:color .3s,border-color .3s}
.textlink:hover,.textlink:focus-visible{color:var(--green);border-color:var(--green)}
.pack .textlink:hover,.pack .textlink:focus-visible{color:inherit;border-color:currentColor;opacity:.62}
.js .phero__actions{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out) .9s,transform .9s var(--ease-out) .9s}
.is-ready .phero__actions{opacity:1;transform:none}

.proof{padding:clamp(40px,6vw,100px) var(--pad) 0}
.proof__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,44px);margin:0;padding:0;list-style:none}
.proof__no{display:block;font-size:clamp(44px,7vw,136px);font-weight:760;line-height:.82;letter-spacing:-.06em}
.proof__list p{margin:clamp(10px,1.2vw,20px) 0 0;max-width:14em;font-size:clamp(15px,1.25vw,21px);font-weight:560;line-height:1.22;letter-spacing:-.015em}

/* Full width, with no rounded box, so it never reads as one more card after a block of cards */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin:clamp(40px,6vw,100px) 0;padding:clamp(40px,6vw,100px) var(--pad);background:var(--green);color:#0b0b0b}
.cta-band__title{margin:0;font-size:clamp(40px,6.4vw,124px);font-weight:760;line-height:.86;letter-spacing:-.055em}
.cta-band__title .dot{color:#0b0b0b}
.cta-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.cta-band .textlink:hover,.cta-band .textlink:focus-visible{color:#fff;border-color:#fff}

/* Team as a row of portraits: two-tone at rest, real colours on hover, every second one a little lower */
.team{padding:clamp(60px,8vw,140px) var(--pad) clamp(30px,4vw,70px)}
.team__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--tgap);margin:0;padding:0;list-style:none}
.member:nth-child(even){margin-top:clamp(24px,4vw,70px)}
.member__photo{position:relative;margin:0;overflow:hidden;border-radius:clamp(12px,1.4vw,22px);aspect-ratio:4/5;background:#0b0b0b}
.member__photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s var(--ease-out),transform 1.2s var(--ease-out)}
.member__photo::after{content:"";position:absolute;inset:0;background:var(--tone);mix-blend-mode:multiply;transition:opacity .6s var(--ease-out)}
.member:hover .member__photo img{filter:none;transform:scale(1.05)}
.member:hover .member__photo::after{opacity:0}
.member__name{margin:clamp(12px,1.4vw,22px) 0 0;font-size:clamp(20px,2vw,36px);font-weight:760;line-height:1;letter-spacing:-.04em}
.member__role{margin:8px 0 0;font:600 12px/1.3 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.member__line{margin:10px 0 0;font-size:clamp(14px,1.1vw,18px);font-weight:520;line-height:1.3}

@media (max-width:760px){
  .proof__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page--about{--member-w:calc((100vw - var(--pad)*2 - var(--tgap))/2)}
}

/* Blog pages: index and article. Start */
.page--blog,.page--post{--br:clamp(18px,2vw,34px);--bgap:clamp(12px,1.4vw,24px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page--blog .phero{min-height:min(70svh,720px)}
.bmeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.bfeature{padding:var(--bgap) var(--pad) 0}
.bfeat{overflow:clip;border-radius:var(--br);background:#0b0b0b;color:#fff}
.bfeat__link{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-height:min(72svh,640px);color:inherit;text-decoration:none}
.bfeat__media{position:relative;margin:0;overflow:hidden}
.bfeat__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.bfeat__link:hover .bfeat__media img,.bfeat__link:focus-visible .bfeat__media img{transform:scale(1.05)}
.bfeat__copy{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(14px,1.6vw,26px);padding:clamp(24px,3.4vw,64px)}
.bfeat__title{margin:0;font-size:clamp(32px,4.2vw,80px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.bfeat__excerpt{margin:0;max-width:30em;font-size:clamp(16px,1.35vw,22px);font-weight:520;line-height:1.35;opacity:.8}
.blist{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,9.7fr);gap:clamp(24px,4vw,80px);padding:clamp(44px,6vw,110px) var(--pad) 0}
.btopics{position:sticky;top:clamp(80px,12vh,120px);align-self:start}
.btopics__title{margin:0 0 clamp(14px,1.6vw,24px);font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.btopics ul{display:grid;gap:clamp(8px,.9vw,14px);margin:0 0 clamp(22px,2.4vw,40px);padding:0;list-style:none}
.btopics li a{position:relative;display:inline-block;color:inherit;font-size:clamp(18px,1.55vw,26px);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-decoration:none;transition:translate .5s var(--ease-out)}
.btopics li a::before{content:"";position:absolute;left:-.75em;top:.42em;width:.36em;height:.36em;border-radius:50%;background:var(--green);scale:0;transition:scale .4s var(--ease-out)}
.btopics li a:hover,.btopics li a:focus-visible{translate:.75em 0}
.btopics li a:hover::before,.btopics li a:focus-visible::before{scale:1}
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.6vw,84px) var(--bgap)}
.bcard a{display:block;color:inherit;text-decoration:none}
.bcard__media{margin:0 0 clamp(14px,1.5vw,24px);overflow:hidden;border-radius:var(--br);aspect-ratio:4/3;background:#efefef}
.bcard__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.bcard a:hover .bcard__media img,.bcard a:focus-visible .bcard__media img{transform:scale(1.06)}
.bcard__title{margin:clamp(8px,.9vw,14px) 0 0;font-size:clamp(24px,2.3vw,42px);font-weight:760;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.bcard__excerpt{display:-webkit-box;margin:clamp(8px,.9vw,14px) 0 0;max-width:34em;overflow:hidden;font-size:clamp(15px,1.15vw,19px);font-weight:520;line-height:1.4;opacity:.72;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.bcard--wide{grid-column:1 / -1}
.bcard--wide a{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,56px);align-items:end}
.bcard--wide .bcard__media{margin:0;aspect-ratio:16/10}
.bcard--wide .bcard__title{font-size:clamp(28px,3.2vw,60px)}
.bpager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:clamp(50px,7vw,120px) var(--pad) clamp(20px,3vw,50px)}
.bpager ol{display:flex;align-items:baseline;gap:clamp(14px,1.8vw,30px);margin:0;padding:0;list-style:none;font-size:clamp(26px,3vw,54px);font-weight:760;letter-spacing:-.04em}
/* WordPress prints the current page and the dots as spans, so both tags are styled */
.bpager ol a,.bpager ol span{color:inherit;text-decoration:none;opacity:.28;transition:opacity .3s}
.bpager ol a:hover,.bpager ol a:focus-visible,.bpager ol [aria-current]{opacity:1}
.bpager ol li[aria-hidden]{opacity:.28}
.page--blog .cta-band,.page--project .cta-band{margin-bottom:0}

/* Article */
.progress{position:fixed;inset:0 0 auto 0;z-index:80;height:4px;pointer-events:none}
.progress span{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(var(--read,0));transform-origin:0 50%}
.ahero{padding:clamp(130px,19vh,230px) var(--pad) clamp(60px,8vw,130px);background:#0b0b0b;color:#fff}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 0;margin:0 0 clamp(36px,5vw,84px);padding:0;list-style:none;font-family:inherit;font-weight:600;font-size:12px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase}
.crumbs li+li::before{content:"/";margin:0 .8em;opacity:.4}
.crumbs a{color:inherit;text-decoration:none;opacity:.7;transition:opacity .3s}
.crumbs a:hover,.crumbs a:focus-visible{opacity:1}
.ahero__grid{display:block}
.ahero__copy{max-width:1500px}
.ahero__title{margin:0;font-size:clamp(38px,5.6vw,108px);font-weight:760;line-height:.9;letter-spacing:-.055em;text-wrap:balance}
.ahero__lead{margin:clamp(20px,2.4vw,40px) 0 0;max-width:30em;font-size:clamp(19px,1.9vw,32px);font-weight:600;line-height:1.14;letter-spacing:-.025em;text-wrap:pretty}
.byline{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,48px)}
.byline p{margin:0;font-size:clamp(15px,1.1vw,18px);font-weight:700;line-height:1.35}
.byline p span{font-weight:520;opacity:.7}
.byline a{color:inherit}
.byline__mark,.authorbox__mark{position:relative;flex:none;width:clamp(44px,3.4vw,58px);aspect-ratio:1;border-radius:50%;background:#fff url(../img/favicon-180.png) center/64% no-repeat}
.byline__mark::after,.authorbox__mark::after{content:none}
.authorbox__mark{background:#0b0b0b;width:clamp(56px,4.6vw,84px)}
.afeatured{margin:0 0 var(--bgap);overflow:hidden;border-radius:var(--br);aspect-ratio:16/9;background:#efefef}
.afeatured img{display:block;width:100%;height:100%;border-radius:0;object-fit:cover}
.abody{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,6.4fr) minmax(0,3fr);gap:clamp(24px,4vw,80px);align-items:start;padding:clamp(44px,6vw,110px) var(--pad) clamp(30px,4vw,70px)}
.toc,.sidecta{position:sticky;top:clamp(70px,10vh,110px)}
.toc__title{margin:0 0 clamp(12px,1.4vw,22px);font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.toc ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.toc a{display:block;padding-left:14px;border-left:2px solid transparent;color:inherit;font-size:clamp(14px,1.05vw,17px);font-weight:600;line-height:1.25;text-decoration:none;opacity:.5;transition:opacity .3s,border-color .3s}
.toc a:hover,.toc a:focus-visible,.toc a.is-on{opacity:1}
.toc a.is-on{border-left-color:var(--green)}
.prose{min-width:0;font-size:clamp(18px,1.3vw,22px);font-weight:480;line-height:1.62}
.prose>p,.prose>ul,.prose>ol{margin:0 0 1.15em;max-width:38em}
.prose>h2{margin:clamp(40px,4.6vw,80px) 0 clamp(12px,1.4vw,22px);font-size:clamp(28px,3vw,54px);font-weight:760;line-height:.98;letter-spacing:-.045em;text-wrap:balance;scroll-margin-top:clamp(70px,10vh,110px)}
.prose>h3{margin:1.8em 0 .5em;font-size:clamp(22px,1.9vw,32px);font-weight:760;line-height:1.05;letter-spacing:-.035em}
.prose a:not(.btn):not(.textlink){color:inherit;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
.prose>ul,.prose>ol{padding-left:1.2em}
.prose>ul li::marker{color:var(--green)}
.prose img{max-width:100%;height:auto;border-radius:var(--br)}
.prose blockquote{margin:1.6em 0;padding:0 0 0 1em;border-left:4px solid var(--green);font-size:1.25em;font-weight:640;line-height:1.25;letter-spacing:-.02em}
.takeaways{margin:0 0 clamp(30px,3.4vw,60px);padding:clamp(22px,2.6vw,44px);border-radius:var(--br);background:#efefef}
.takeaways h2{margin:0 0 clamp(12px,1.4vw,22px);font-size:clamp(22px,2vw,34px);font-weight:760;line-height:1;letter-spacing:-.04em}
.takeaways ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.takeaways li{position:relative;padding-left:1.3em;font-weight:600;line-height:1.35}
.takeaways li::before{content:"";position:absolute;left:0;top:.5em;width:.5em;height:.5em;border-radius:50%;background:var(--green)}
.pcta{display:grid;justify-items:start;gap:clamp(12px,1.4vw,22px);margin:clamp(36px,4vw,70px) 0;padding:clamp(24px,3vw,54px);border-radius:var(--br);background:#0b0b0b;color:#fff}
.pcta p{margin:0;max-width:30em;opacity:.8}
.pcta .pcta__title{font-size:clamp(28px,3vw,54px);font-weight:760;line-height:.95;letter-spacing:-.045em;opacity:1;text-wrap:balance}
.pcta .btn,.sidecta .btn{background:#fff;color:#0b0b0b}
.tablewrap{margin:0 0 1.4em;overflow-x:auto;border-radius:var(--br);background:#efefef}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:.88em;line-height:1.35}
.prose thead th{padding:16px clamp(16px,1.8vw,28px);background:#0b0b0b;color:#fff;font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-align:left;text-transform:uppercase}
.prose tbody th,.prose tbody td{padding:14px clamp(16px,1.8vw,28px);border-top:1.5px solid rgba(0,0,0,.08);text-align:left;vertical-align:top}
.prose tbody th{width:38%;font-weight:700}
.prose .acc{margin:0 0 1.2em;padding:0}
.prose .acc__btn{font-size:clamp(18px,1.6vw,27px)}
.afoot{display:grid;gap:clamp(24px,3vw,50px);margin-top:clamp(40px,5vw,90px)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.share__title{margin:0;font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.share ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.share a,.share button{padding:0 0 3px;border:0;border-bottom:1.5px solid currentColor;background:none;color:inherit;font:inherit;font-size:clamp(15px,1.15vw,19px);font-weight:600;text-decoration:none;cursor:pointer;transition:color .3s,border-color .3s}
.share a:hover,.share a:focus-visible,.share button:hover,.share button:focus-visible{color:var(--green);border-color:var(--green)}
.authorbox{display:flex;gap:clamp(16px,2vw,32px);align-items:flex-start;padding:clamp(22px,2.6vw,44px);border-radius:var(--br);background:#efefef}
.authorbox p{margin:0}
.authorbox__label{font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.authorbox__name{margin:6px 0 10px!important;font-size:clamp(24px,2.2vw,40px);font-weight:760;line-height:1;letter-spacing:-.04em}
.authorbox__bio{margin-bottom:14px!important;max-width:34em;font-size:.92em;line-height:1.45}
.sidecta{display:grid;justify-items:start;gap:clamp(12px,1.3vw,20px);padding:clamp(20px,2.2vw,36px);border-radius:var(--br);background:#0b0b0b;color:#fff}
.sidecta p{margin:0;font-size:clamp(15px,1.1vw,18px);line-height:1.4;opacity:.8}
.sidecta .sidecta__title{font-size:clamp(24px,2.1vw,38px);font-weight:760;line-height:.98;letter-spacing:-.04em;opacity:1}
.related{padding:clamp(40px,6vw,110px) var(--pad) 0}
.related__title{margin:0 0 clamp(24px,3vw,56px);font-size:clamp(44px,7vw,140px);font-weight:760;line-height:.84;letter-spacing:-.055em}
.rlist{display:grid;gap:clamp(8px,.8vw,14px);margin:0;padding:0;list-style:none}
.rlist a{display:grid;grid-template-columns:clamp(72px,7vw,128px) minmax(0,1fr) auto;gap:clamp(16px,2.4vw,44px);align-items:center;padding:clamp(12px,1.3vw,22px);border-radius:var(--br);background:#efefef;color:inherit;text-decoration:none;transition:background-color .45s,color .45s}
.rlist a:hover,.rlist a:focus-visible{background:#0b0b0b;color:#fff}
.rlist__thumb{display:block;overflow:hidden;border-radius:calc(var(--br)*.6);aspect-ratio:1;background:#ddd}
.rlist__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.rlist__copy{display:grid;gap:10px}
.rlist__title{margin:0;font-size:clamp(22px,2.6vw,48px);font-weight:760;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.rlist__arrow{position:relative;width:clamp(40px,3.6vw,60px);aspect-ratio:1;margin-right:clamp(4px,1vw,18px);border:1.5px solid currentColor;border-radius:50%;transition:background-color .3s,border-color .3s,rotate .6s var(--ease-out)}
.rlist__arrow::before{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;border-top:2px solid currentColor;border-right:2px solid currentColor;translate:-65% -50%;rotate:45deg}
.rlist a:hover .rlist__arrow,.rlist a:focus-visible .rlist__arrow{border-color:var(--green);background:var(--green);color:#0b0b0b;rotate:-45deg}
.apager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bgap);padding:clamp(44px,6vw,110px) var(--pad)}
.apager a{display:grid;gap:12px;padding:clamp(22px,2.6vw,44px);border-radius:var(--br);background:#efefef;color:inherit;text-decoration:none;transition:background-color .45s,color .45s}
.apager a[rel="next"]{text-align:right}
.apager a:hover,.apager a:focus-visible{background:#0b0b0b;color:#fff}
.apager span{font:600 12px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.apager b{font-size:clamp(20px,2vw,36px);font-weight:760;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}

@media (max-width:1100px){
  .abody{grid-template-columns:minmax(0,3fr) minmax(0,8fr)}
  .sidecta{position:static;grid-column:2}
}
@media (max-width:760px){
  .bfeat__link,.blist,.bcard--wide a,.abody,.apager{grid-template-columns:minmax(0,1fr)}
  .bfeat__media{aspect-ratio:4/3}
  .btopics{position:static}
  .btopics ul{display:flex;flex-wrap:wrap;gap:8px 18px}
  .bgrid{grid-template-columns:minmax(0,1fr)}
  .toc,.sidecta{position:static;grid-column:auto}
  .apager a[rel="next"]{text-align:left}
}
/* Blog pages. End */

/* Contact page: the black of the title runs on through a form written as a sentence, then the steps and the two offices with their local time */
.phero--contact{min-height:0;padding-bottom:clamp(20px,3vw,50px)}
.talk{padding:clamp(24px,3.4vw,60px) var(--pad) clamp(60px,8vw,140px);background:#0b0b0b;color:#fff}
.talk__line{margin:0 0 .35em;font-size:clamp(28px,4.6vw,88px);font-weight:700;line-height:1.14;letter-spacing:-.045em}
.blank{display:inline-block;max-width:100%;vertical-align:baseline}
.keep{white-space:nowrap}
.blank input,.blank select{min-width:3em;max-width:100%;padding:0 .08em .02em;border:0;border-bottom:.06em solid rgba(255,255,255,.35);border-radius:0;background-color:transparent;color:var(--green);font:inherit;letter-spacing:inherit;field-sizing:content;transition:border-color .3s}
.blank input::placeholder{color:rgba(255,255,255,.3)}
.blank input:focus-visible,.blank select:focus-visible{outline:none;border-bottom-color:var(--green)}
.blank select{appearance:none;padding-right:.75em;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(-45deg,transparent 50%,currentColor 50%);background-position:right .3em top 58%,right .1em top 58%;background-size:.2em .2em;background-repeat:no-repeat;cursor:pointer}
.blank select option{background:#0b0b0b;color:#fff;font-size:18px;letter-spacing:0}
.talk__more{display:block;max-width:60em;margin-top:clamp(24px,3vw,50px)}
.talk__more span{display:block;margin-bottom:12px;font:600 13px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.talk__more textarea{display:block;width:100%;min-height:120px;padding:clamp(16px,1.6vw,26px);border:0;border-radius:clamp(14px,1.6vw,26px);background:#1c1c1c;color:#fff;font:inherit;font-size:clamp(17px,1.4vw,22px);line-height:1.4;resize:vertical}
.talk__more textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.talk__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.talk__send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(24px,3vw,44px)}
.talk .btn{border:0;background:#fff;color:#0b0b0b;font-family:inherit;cursor:pointer}
.talk__legal{margin:0;font-size:14px;opacity:.6}
.talk__legal a{color:inherit}
.talk .note{margin:18px 0 0;color:var(--green);font-weight:600}
.next{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,100px);padding:clamp(60px,8vw,150px) var(--pad) clamp(44px,6vw,110px)}
.next__title{margin:0;font-size:clamp(40px,5.6vw,108px);font-weight:760;line-height:.86;letter-spacing:-.055em;text-wrap:balance}
.next__steps{display:grid;gap:clamp(22px,2.6vw,44px);margin:0;padding:0;list-style:none}
.next__steps li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:10px 30px;align-items:baseline}
.next__steps h3{margin:0;font-size:clamp(26px,2.8vw,50px);font-weight:760;line-height:1;letter-spacing:-.045em}
.next__steps h3::after{content:".";color:var(--green)}
.next__steps li:nth-child(2) h3::after{color:var(--magenta)}
.next__steps p{margin:0;font-size:clamp(18px,1.6vw,27px);font-weight:560;line-height:1.2;letter-spacing:-.02em}
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);padding:0 var(--pad) clamp(60px,8vw,140px)}
.office{display:grid;align-content:start;justify-items:start;gap:clamp(10px,1.2vw,18px);padding:clamp(24px,3vw,54px);border-radius:clamp(18px,2vw,34px);background:#efefef}
.office--dark{background:#0b0b0b;color:#fff}
.office__clock{margin:0 0 clamp(20px,4vw,70px);font-size:clamp(64px,9vw,180px);font-weight:760;line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.office__city{margin:0;font-size:clamp(26px,2.8vw,50px);font-weight:760;line-height:1;letter-spacing:-.045em}
.office address{font-style:normal;font-size:clamp(16px,1.3vw,21px);line-height:1.4;opacity:.75}
.office p{margin:0}
@media (max-width:760px){
  .next,.next__steps li,.offices{grid-template-columns:minmax(0,1fr)}
}

/* Onboarding page. Start. A long client form split into seven sections: the list stays on the left, one section shows at a time. */
.onboard{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,5vw,100px);padding:clamp(44px,6vw,110px) var(--pad) clamp(70px,9vw,160px)}
.onboard__steps{position:sticky;top:clamp(80px,12vh,120px);align-self:start}
.onboard__steps ol{display:grid;gap:clamp(8px,.9vw,14px);margin:0;padding:0;list-style:none;counter-reset:step}
.onboard__steps button{position:relative;padding:0 0 0 1.1em;border:0;background:none;color:inherit;font:inherit;font-size:clamp(17px,1.45vw,24px);font-weight:700;line-height:1.15;letter-spacing:-.03em;text-align:left;opacity:.35;cursor:pointer;transition:opacity .3s}
.onboard__steps button::before{content:"";position:absolute;left:0;top:.42em;width:.4em;height:.4em;border-radius:50%;background:var(--green);scale:0;transition:scale .4s var(--ease-out)}
.onboard__steps button:hover,.onboard__steps button:focus-visible,.onboard__steps button[aria-current]{opacity:1}
.onboard__steps button[aria-current]::before{scale:1}
.ostep{min-width:0;margin:0;padding:0;border:0}
.ostep__title{padding:0;font-size:clamp(40px,5.6vw,108px);font-weight:760;line-height:.86;letter-spacing:-.055em}
.ostep__intro{margin:clamp(18px,2vw,34px) 0 0;max-width:34em;font-size:clamp(18px,1.5vw,26px);font-weight:560;line-height:1.25;letter-spacing:-.015em}
.ostep__note{margin:clamp(16px,1.8vw,28px) 0 0;max-width:40em;padding:clamp(14px,1.4vw,22px) clamp(16px,1.8vw,28px);border-radius:clamp(12px,1.4vw,22px);background:#0b0b0b;color:#fff;font-size:clamp(15px,1.15vw,19px);font-weight:600;line-height:1.35}
.ostep__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,36px) clamp(16px,2vw,32px);margin-top:clamp(30px,3.6vw,64px)}
.ofield{display:grid;align-content:start;gap:8px;min-width:0;margin:0;padding:0;border:0}
.ofield--wide{grid-column:1 / -1}
.ofield label,.ofield legend{padding:0;font:600 12px/1.3 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.ofield input:not([type="checkbox"]):not([type="file"]),.ofield textarea{width:100%;padding:12px 0;border:0;border-bottom:1.5px solid rgba(0,0,0,.3);border-radius:0;background:transparent;color:#0b0b0b;font:inherit;font-size:clamp(17px,1.35vw,22px);transition:border-color .3s}
.ofield textarea{resize:vertical}
.ofield input:focus-visible,.ofield textarea:focus-visible{outline:none;border-bottom-color:var(--green)}
.ofile{padding:clamp(16px,1.8vw,28px);border:1.5px dashed rgba(0,0,0,.3);border-radius:clamp(12px,1.4vw,22px);font:inherit;font-size:15px}
.ochoice{display:flex;flex-wrap:wrap;gap:10px}
.ochoice legend{margin-bottom:10px}
.ochoice label{opacity:1;font:inherit;letter-spacing:0;text-transform:none;cursor:pointer}
.ochoice input{position:absolute;opacity:0}
.ochoice span{display:block;padding:12px 18px;border-radius:clamp(10px,1vw,16px);background:#efefef;font-size:clamp(15px,1.15vw,19px);font-weight:600;transition:background-color .3s,color .3s}
.ochoice input:checked+span{background:#0b0b0b;color:#fff}
.ochoice input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.ostep__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(36px,4.4vw,80px)}
.ostep__nav .textlink{border-top:0;border-left:0;border-right:0;background:none;font-family:inherit;cursor:pointer}
.ostep__nav .btn{border:0;font-family:inherit;cursor:pointer}
.onboard .note{margin:18px 0 0;font-weight:600}
@media (max-width:760px){
  .onboard,.ostep__fields{grid-template-columns:minmax(0,1fr)}
  .onboard__steps{position:static}
  .onboard__steps ol{display:flex;flex-wrap:wrap;gap:8px 18px}
}
/* Onboarding page. End */

/* Legal pages. Start */
.phero--legal{min-height:0;padding-bottom:clamp(40px,5vw,80px)}
.phero__title--long{font-size:clamp(44px,8vw,160px);line-height:.84}
.phero__title--long .line>span{white-space:normal}
.legal__date{margin:clamp(20px,2.4vw,40px) 0 0;font:600 13px/1.2 'Grift','Grift Static',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.legal{padding:clamp(44px,6vw,110px) var(--pad) clamp(70px,9vw,160px)}
.legal .prose{max-width:46em}
/* Legal pages. End */

/* FAQ page: groups with a sticky title and rounded accordion rows */
.faqpage{padding:clamp(20px,3vw,50px) var(--pad) clamp(60px,8vw,140px)}
.faqgroup{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,80px);padding:clamp(30px,4vw,70px) 0}
.faqgroup__title{position:sticky;top:clamp(80px,12vh,130px);align-self:start;margin:0;font-size:clamp(30px,3.8vw,70px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.acc{display:grid;gap:clamp(8px,.8vw,14px);margin:0;padding:0;list-style:none}
.acc__item{border-radius:clamp(12px,1.4vw,22px);background:#efefef;color:#0b0b0b;transition:background-color .45s,color .45s}
.acc__item.is-open{background:#0b0b0b;color:#fff}
.acc__q{margin:0}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:clamp(18px,2vw,32px);border:0;background:none;color:inherit;font:inherit;font-size:clamp(20px,2vw,36px);font-weight:700;line-height:1.05;letter-spacing:-.035em;text-align:left}
.acc__icon{position:relative;flex:none;width:clamp(30px,2.6vw,44px);aspect-ratio:1;border:1.5px solid currentColor;border-radius:50%;transition:transform .5s var(--ease-out),background-color .3s,border-color .3s,color .3s}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;left:50%;top:50%;width:42%;height:2px;background:currentColor;translate:-50% -50%}
.acc__icon::after{rotate:90deg}
.acc__item.is-open .acc__icon{transform:rotate(45deg);border-color:var(--green);background:var(--green);color:#0b0b0b}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{margin:0;padding:0 clamp(18px,2vw,32px) clamp(20px,2.2vw,36px);max-width:46em;font-size:clamp(16px,1.35vw,22px);font-weight:520;line-height:1.38}

@media (max-width:760px){
  .contact-page,.faqgroup,.cform{grid-template-columns:minmax(0,1fr)}
  .contact-side,.faqgroup__title{position:static}
}

/* Phones and portrait tablets: the black hero of an inner page is as tall as its words need. A tall screen with the title
   at the bottom of 860 px showed a wide band of empty black above it. */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .phero:not(.phero--contact):not(.phero--legal){min-height:min(60svh,860px)}
}

/* Service pages. Start */
/* Four pages, one per service people search for. The question answered first, an example drawn in HTML, what is
   included, the topics in depth with real pictures, a client's words, the steps, a call with Kurt, the questions and
   the other services. Written by tools/make-services.js from tools/services.css: edit there, not here. */
.svc-trust{margin:clamp(18px,2.6vh,32px) 0 0;font-size:14px;font-weight:600;line-height:1.4;opacity:.6}
.js .svc-trust{opacity:0;transition:opacity .9s var(--ease-out) 1.1s}
.is-ready .svc-trust{opacity:.6}
.svc-answer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,100px);align-items:start;padding:clamp(60px,8vw,150px) var(--pad) clamp(44px,6vw,110px)}
.svc-answer__q{margin:0;font-size:clamp(34px,4.2vw,80px);font-weight:760;line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.svc-answer__a p{margin:0 0 1em;max-width:36em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.38}
.svc-answer__a p:first-child{max-width:22em;font-size:clamp(22px,2.2vw,38px);font-weight:640;line-height:1.14;letter-spacing:-.025em}
.svc-answer__a p:last-child{margin-bottom:0}
.svc-answer__a p.svc-made{margin-top:clamp(20px,2.4vw,36px);max-width:40em;font-size:clamp(15px,1.15vw,18px);font-weight:540;line-height:1.5;opacity:.75}
.svc-made b{margin-right:.5em;font-weight:760}

/* The example: a drawing of the work, on the cream of the studio */
.svc-demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,80px);align-items:center;margin:0 var(--pad) clamp(12px,1.4vw,24px);padding:clamp(28px,4vw,72px);overflow:hidden;border-radius:clamp(18px,2vw,32px);background:#ede8df;color:#0b0b0b}
.svc-demo__text h2{margin:0 0 clamp(14px,1.6vw,24px);font-size:clamp(34px,4.2vw,80px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-demo__text p{margin:0;max-width:30em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.38;opacity:.8}
.svc-demo__art{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(360px,40vw,580px)}
.mk-phone{position:relative;z-index:1;width:clamp(230px,21vw,290px);aspect-ratio:9/18.5;padding:10px;border-radius:42px;background:#0b0b0b;box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.mk-phone__screen{display:flex;flex-direction:column;gap:10px;height:100%;padding:20px 14px;overflow:hidden;border-radius:33px;background:#fff;color:#0b0b0b;font-size:12px;line-height:1.3}
.mk-search{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:#f1f1f1;font-weight:600}
.mk-search i{flex:none;width:11px;height:11px;border:2px solid #0b0b0b;border-radius:50%}
.mk-map{position:relative;flex:none;height:30%;border-radius:14px;background:linear-gradient(90deg,transparent 47%,#fff 47% 51%,transparent 51%),linear-gradient(0deg,transparent 57%,#fff 57% 61%,transparent 61%),linear-gradient(32deg,transparent 30%,#fff 30% 33%,transparent 33%),#dde8d3}
.mk-pin{position:absolute;left:62%;top:26%;width:13px;height:13px;border-radius:50% 50% 50% 0;background:#8f8f8f;rotate:-45deg}
.mk-pin:nth-child(3){left:24%;top:62%}
.mk-pin--you{left:40%;top:34%;width:20px;height:20px;background:var(--green);box-shadow:0 0 0 0 rgba(77,189,40,.5);animation:mkpulse 2.4s ease-out infinite}
@keyframes mkpulse{70%{box-shadow:0 0 0 14px rgba(77,189,40,0)}100%{box-shadow:0 0 0 0 rgba(77,189,40,0)}}
.mk-results{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-results li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#f5f5f5}
.mk-results li.is-you{background:#0b0b0b;color:#fff}
.mk-results b{font-size:13px}
.mk-acts{display:flex;gap:6px;margin-top:6px}
.mk-acts em{padding:4px 9px;border-radius:6px;background:var(--green);color:#0b0b0b;font-size:11px;font-style:normal;font-weight:700}
.mk-acts em+em{background:#fff}
.mk-stars{color:#f2b100;letter-spacing:.04em}
.mk-results span:not(.mk-stars):not(.mk-acts){opacity:.6}
.mk-answer{position:absolute;right:0;bottom:6%;z-index:2;width:min(58%,300px);margin:0;padding:16px 18px;border-radius:18px;background:#0b0b0b;color:#fff;font-size:14px;line-height:1.38;box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.mk-answer p{margin:0}
.mk-answer__label{margin-bottom:6px!important;color:var(--green);font-size:13px;font-weight:600;line-height:1}
.svc-demo--search .mk-phone{margin-right:28%}
.mk-phone__screen--msgs{gap:12px;background:#fafafa}
.mk-msgs__from{margin:0 0 4px;font-weight:700;text-align:center}
.mk-bubble{align-self:flex-start;max-width:90%;margin:0;padding:10px 12px;border-radius:16px 16px 16px 4px;background:#ececec}
.mk-loyal{display:grid;gap:4px;padding:14px;border-radius:16px;background:#0b0b0b;color:#fff}
.mk-loyal span{color:var(--green);font-size:12px;font-weight:600;line-height:1}
.mk-loyal b{font-size:22px;letter-spacing:-.03em}
.mk-loyal i,.mk-card__bar{display:block;height:6px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.18)}
.mk-loyal s,.mk-card__bar s{display:block;height:100%;border-radius:3px;background:var(--green)}
.mk-loyal small{opacity:.7}
.mk-stars--big{margin:0;font-size:22px;text-align:center}
/* A design file open in Figma: two frames, a comment and two people at work */
.mk-figma{position:relative;width:100%;max-width:660px;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background-color:#1e1e1e;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:16px 16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.mk-figma__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#2c2c2c;color:#b3b3b3;font-size:12px}
.mk-figma__bar span{width:10px;height:10px;border-radius:50%;background:#555}
.mk-figma__bar em{margin-left:14px;font-style:normal}
.mk-frame{position:absolute;color:#9d9d9d;font-size:11px}
.mk-frame p{margin:0 0 6px}
.mk-frame__body{display:flex;flex-direction:column;gap:6%;height:calc(100% - 20px);padding:7%;border-radius:6px;background:#fff}
.mk-frame--desk{left:6%;top:17%;width:56%;height:64%}
.mk-frame--phone{right:8%;top:23%;width:21%;height:62%}
.mk-frame.is-selected .mk-frame__body{outline:2px solid #0d99ff;outline-offset:3px}
.mk-b{display:block;flex:none;height:7%;border-radius:4px;background:#e8e8e8}
.mk-b--nav{height:5%}
.mk-b--hero{height:34%;background:#0b0b0b}
.mk-b--cta{width:42%;background:var(--green)}
.mk-row{display:grid;flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8%}
.mk-row i{border-radius:4px;background:#efefef}
.mk-cursor{position:absolute;padding:4px 9px;border-radius:2px 10px 10px 10px;font-size:12px;font-weight:700;animation:mkfloat 7s ease-in-out infinite}
.mk-cursor--you{left:34%;top:56%;background:var(--magenta);color:#fff}
.mk-cursor--us{right:12%;top:12%;background:var(--green);color:#0b0b0b;animation-delay:-3s}
@keyframes mkfloat{50%{translate:18px -12px}}
.mk-note{position:absolute;left:7%;bottom:7%;max-width:46%;margin:0;padding:10px 12px;border-radius:12px 12px 12px 2px;background:#fff;color:#0b0b0b;font-size:12px;font-weight:600;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
/* Branding: real work, from the logo to the shelf */
/* Branding: the logo wall. Each tile hands over to the next logo, the new one dropping in from above as the old one
   slides out below, one tile after another */
.svc-demo--logos{grid-template-columns:minmax(0,1fr)}
.svc-demo--logos .svc-demo__art{display:block;min-height:0}
.mk-logos__wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.mk-logos__cell{position:relative;aspect-ratio:1;overflow:hidden;border-radius:clamp(14px,1.6vw,24px);background:#fff;transform:translateZ(0)}
.mk-logos__item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;transition:transform 1s cubic-bezier(.86,0,.07,1),opacity 1s cubic-bezier(.86,0,.07,1)}
.mk-logos__item img{display:block;width:var(--lw,44%);height:auto;transition:scale .8s var(--ease-out)}
.mk-logos__item figcaption{position:absolute;left:clamp(14px,1.4vw,22px);bottom:clamp(12px,1.3vw,20px);font-size:14px;font-weight:600;line-height:1.3;opacity:.6}
.mk-logos__item.is-above{transform:translateY(-100%);transition:none}
.mk-logos__item.is-below{transform:translateY(100%);opacity:0}
@media (hover:hover){
  .mk-logos__cell:hover img{scale:1.08}
}

.svc-included{margin:clamp(60px,8vw,150px) var(--pad) 0;color:#0b0b0b}
.svc-included__title,.svc-steps__title{margin:0 0 clamp(26px,3.4vw,60px);font-size:clamp(40px,6vw,120px);font-weight:760;line-height:.86;letter-spacing:-.055em}
.svc-included__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,56px) clamp(20px,3vw,48px);margin:0;padding:0;list-style:none}
.svc-included__list h3,.svc-steps__list h3{margin:0 0 10px;font-size:clamp(20px,1.7vw,30px);font-weight:720;line-height:1.02;letter-spacing:-.035em}
.svc-included__list p,.svc-steps__list p{margin:0;max-width:26em;font-size:clamp(16px,1.2vw,19px);font-weight:520;line-height:1.38;opacity:.75}

/* The topics in depth: words on one side, a real picture or a drawing on the other, alternating */
.svc-topic{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,100px);align-items:center;padding:clamp(60px,8vw,140px) var(--pad) 0}
.svc-topic--flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.svc-topic--flip .svc-topic__art{order:-1}
.svc-topic--text{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.svc-topic--text > h2{margin:0;font-size:clamp(32px,3.8vw,72px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-topic__text h2{margin:0 0 clamp(16px,2vw,28px);font-size:clamp(32px,3.8vw,72px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-topic__text p{margin:0 0 1em;max-width:34em;font-size:clamp(17px,1.35vw,22px);font-weight:520;line-height:1.42}
.svc-topic__text ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:clamp(20px,2.4vw,36px) 0 0;padding:0;list-style:none}
.svc-topic__text li{position:relative;padding-left:22px;font-size:clamp(15px,1.1vw,18px);font-weight:600;line-height:1.3}
.svc-topic__text li::before{content:"";position:absolute;left:0;top:.38em;width:9px;height:9px;border-radius:50%;background:var(--green)}
.svc-topic__art{margin:0}
/* A photo does not sit flat: it rises into its frame as it arrives, settles from a zoom, drifts a little with the
   scroll and comes closer under the pointer */
.svc-topic__frame{overflow:hidden;border-radius:clamp(18px,2vw,32px);transform:translateZ(0)}
.svc-topic__art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;scale:1.06}
.js .svc-topic__frame[data-reveal]{opacity:1;transform:translateZ(0)}
.js .svc-topic__frame[data-reveal] img{clip-path:inset(100% 0 0 0);scale:1.3;transition:clip-path 1.3s var(--ease-out),scale 2.2s var(--ease-out)}
.js .svc-topic__frame[data-reveal].is-in img{clip-path:inset(0 0 0 0);scale:1.06}
@media (hover:hover){
  .js .svc-topic__frame[data-reveal].is-in:hover img{scale:1.14;transition:clip-path 1.3s var(--ease-out),scale 1.2s var(--ease-out)}
}
.svc-topic__art figcaption{margin-top:12px;font-size:14px;font-weight:600;line-height:1.35;opacity:.8}
.svc-topic__art--mock{display:flex;align-items:center;justify-content:center;min-height:clamp(320px,34vw,520px);padding:clamp(20px,3vw,48px);border-radius:clamp(18px,2vw,32px);background:#efefef;color:#0b0b0b}
.mk-vitals{display:grid;gap:16px;width:100%;max-width:440px}
.mk-score{display:grid;justify-self:center;place-content:center;width:clamp(150px,14vw,200px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#efefef 80%,transparent 81% 100%),conic-gradient(var(--green) 100%,rgba(0,0,0,.08) 0);text-align:center}
.mk-score b{font-size:clamp(44px,4vw,64px);font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-score span{margin-top:4px;font-size:12px;font-weight:600;line-height:1.2;opacity:.6}
.mk-vitals ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-vitals li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.mk-vitals li span{opacity:.7}
.mk-vitals li em{color:#1f7a0c;font-style:normal;font-weight:700}
.mk-vitals p{margin:0;font-size:12px;text-align:center;opacity:.6}
.mk-chat,.mk-inbox{display:grid;gap:10px;width:100%;max-width:440px}
.mk-chat p,.mk-inbox p{margin:0}
.mk-chat__q{justify-self:end;max-width:82%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#0b0b0b;color:#fff;font-weight:600}
.mk-chat__a{padding:16px 18px;border-radius:18px 18px 18px 4px;background:#fff;line-height:1.45}
.mk-chat__a span{display:block;margin-top:10px;font-size:13px;font-weight:600;line-height:1;opacity:.55}
.mk-inbox__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 16px;border-radius:14px;background:#fff}
.mk-inbox__row span{grid-column:1;opacity:.7}
.mk-inbox__row em{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:12px;font-style:normal;opacity:.5}
.mk-inbox__row.is-new{box-shadow:inset 4px 0 0 var(--green)}
.mk-card{display:grid;gap:8px;width:min(100%,360px);padding:24px;border-radius:22px;background:#0b0b0b;color:#fff;box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.mk-card p{margin:0}
.mk-card__brand{display:flex;justify-content:space-between;font-weight:700}
.mk-card__brand span{color:var(--green);font-size:13px;font-weight:600;line-height:1.6}
.mk-card__pts{margin-top:10px;font-size:48px;font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-card__label,.mk-card__next{opacity:.65}
.mk-card .mk-stars--big{margin-top:6px;text-align:left}
.mk-own{display:grid;gap:10px;width:100%;max-width:400px}
.mk-own__file{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border-radius:14px;background:#fff;font-weight:600}
.mk-own__file i{flex:none;width:26px;height:32px;background:#0b0b0b;clip-path:polygon(0 0,68% 0,100% 26%,100% 100%,0 100%)}
.mk-own__stamp{justify-self:center;margin:14px 0 0;padding:10px 18px;border:2.5px solid var(--green);border-radius:12px;color:#1f7a0c;font-size:22px;font-weight:760;rotate:-6deg}

.svc-why{margin:clamp(60px,8vw,150px) var(--pad) 0;color:#0b0b0b}
.svc-why__title{margin:0;max-width:15em;font-size:clamp(34px,5vw,96px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-why__text{margin:clamp(20px,2.4vw,40px) 0 0;max-width:34em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.38;opacity:.8}
/* A client, in their own words */
.svc-quote{padding:clamp(60px,8vw,150px) var(--pad) 0}
.svc-quote blockquote{margin:0;color:#0b0b0b}
.svc-quote blockquote p{margin:0;max-width:32em;font-size:clamp(22px,2.3vw,40px);font-weight:640;line-height:1.16;letter-spacing:-.03em;text-wrap:pretty}
.svc-quote footer{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:clamp(20px,2.4vw,36px);font-size:clamp(15px,1.1vw,18px)}
.svc-quote footer b{font-weight:760}
.svc-quote footer span{opacity:.65}
.svc-steps{padding:clamp(60px,8vw,150px) var(--pad) 0}
.svc-steps__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,56px);margin:0;padding:0;list-style:none}
.svc-steps__list h3::before{content:"";display:block;width:12px;height:12px;margin-bottom:18px;border-radius:50%;background:var(--green)}
/* A checklist people can use on their own business today */
.svc-check{padding:clamp(60px,8vw,150px) var(--pad) 0}
.svc-check__title{margin:0 0 clamp(26px,3.4vw,60px);max-width:14em;font-size:clamp(40px,5vw,100px);font-weight:760;line-height:.88;letter-spacing:-.055em;text-wrap:balance}
.svc-check__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,28px) clamp(24px,4vw,72px);margin:0;padding:0;list-style:none}
.svc-check__list li{position:relative;padding-left:44px;font-size:clamp(17px,1.4vw,24px);font-weight:560;line-height:1.3;letter-spacing:-.01em}
.svc-check__list li::before{content:"";position:absolute;left:0;top:.1em;width:26px;height:26px;border-radius:50%;background:var(--green)}
.svc-check__list li::after{content:"";position:absolute;left:9px;top:calc(.1em + 6px);width:6px;height:11px;border-right:2.5px solid #0b0b0b;border-bottom:2.5px solid #0b0b0b;rotate:45deg}
/* The call with Kurt */
.svc-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,80px);padding:clamp(60px,8vw,150px) var(--pad) clamp(80px,9vw,170px)}
.svc-faq__title{position:sticky;top:clamp(80px,12vh,130px);align-self:start;margin:0;font-size:clamp(34px,4.2vw,80px);font-weight:760;line-height:.9;letter-spacing:-.05em}
@media (max-width:1000px){
  .svc-included__list,.svc-steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-topic__text ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .svc-answer,.svc-faq,.svc-demo,.svc-topic,.svc-topic--flip,.svc-topic--text{grid-template-columns:minmax(0,1fr)}
  .svc-faq__title{position:static}
  .svc-included__list,.svc-steps__list,.svc-check__list{grid-template-columns:minmax(0,1fr)}
  .svc-topic--flip .svc-topic__art{order:0}
  .svc-demo__art{min-height:0}
  .svc-demo--search .mk-phone{margin-right:0}
  .mk-answer{position:relative;right:auto;bottom:auto;width:100%;margin-top:-40px}
  .svc-demo--search .svc-demo__art{flex-direction:column}
  .mk-logos__wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .mk-pin--you,.mk-cursor,.mk-brand__swatches em{animation:none}
  .js .svc-topic__frame[data-reveal] img{clip-path:none;scale:1.06;transition:none}
  .js .svc-shot[data-reveal] img{clip-path:none;scale:1;transition:none}
}
/* The demo store of the ecommerce page: filters, strengths, a cart and an add to cart that flies */
/* Half the page for the store, half for its words; real photos, no brands */
.svc-demo--shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shop__title{margin:0;font-size:clamp(20px,1.6vw,26px);font-weight:760;letter-spacing:-.03em}
.prod:has(.prod__art img)::before{top:auto;bottom:-74%;opacity:.16;transition:bottom .7s var(--ease-out),transform .7s var(--ease-out),opacity .7s}
.prod:has(.prod__art img).is-spot::before{bottom:-56%;transform:skewY(10deg);opacity:.24}
.prod__art:has(img){aspect-ratio:4/5;margin:calc(clamp(14px,1.4vw,22px) * -1) calc(clamp(14px,1.4vw,22px) * -1) 14px;overflow:hidden}
.prod__art img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease-out),translate .9s var(--ease-out)}
.prod.is-spot .prod__art img{scale:1.07;translate:0 -2%}
img.shop__fly{object-fit:cover;border-radius:14px}
@media (max-width:1000px){
  .svc-demo--shop{grid-template-columns:minmax(0,1fr)}
}
.svc-demo--shop .svc-demo__art{display:block;min-height:0}
.shop{position:relative;overflow:hidden;padding:clamp(14px,2vw,28px);border-radius:clamp(14px,1.6vw,24px);background:#fff}
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.6vw,24px)}
.shop__filters{display:flex;flex-wrap:wrap;gap:6px}
.shop__filters button{padding:10px 16px;border:0;border-radius:10px;background:#f1f1f1;color:#0b0b0b;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .3s,color .3s}
.shop__filters button.is-on{background:#0b0b0b;color:#fff}
.shop__cart{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#0b0b0b;color:#fff;cursor:pointer}
.shop__cart i{position:relative;display:block;width:18px;height:15px;margin-top:5px;border:2px solid currentColor;border-radius:2px 2px 5px 5px}
.shop__cart i::before{content:"";position:absolute;left:50%;top:-8px;width:8px;height:7px;border:2px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0;translate:-50% 0}
.shop__cart span{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--green);color:#0b0b0b;font-size:12px;font-weight:760;line-height:22px;text-align:center;transition:scale .3s var(--ease-out)}
.shop__cart.is-bump span{scale:1.4}
.shop__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.prod{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:clamp(14px,1.4vw,22px);border-radius:clamp(14px,1.6vw,22px);background:#f5f4f1;transition:translate .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.prod::before{content:"";position:absolute;left:-10%;right:-10%;top:-62%;height:100%;background:var(--tone);opacity:.14;transform:skewY(-10deg);transition:top .7s var(--ease-out),transform .7s var(--ease-out),opacity .7s}
.prod.is-hidden{display:none}
.prod.is-spot{translate:0 -6px;box-shadow:0 26px 44px -26px rgba(0,0,0,.4)}
.prod__art{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:1.15}
.prod__art svg{width:74%;height:auto;transition:translate .7s var(--ease-out),rotate .7s var(--ease-out)}
.prod.is-spot .prod__art svg{translate:0 -6px;rotate:-3deg}
.prod__name{position:relative;z-index:1;margin:6px 0 4px;font-size:clamp(17px,1.35vw,22px);font-weight:760;line-height:1.05;letter-spacing:-.03em}
.prod__meta{position:relative;z-index:1;margin:0;font-size:13px;opacity:.6}
.prod__sizes{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.prod__sizes button{padding:7px 10px;border:1.5px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;color:#0b0b0b;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.prod__sizes button.is-on{border-color:#0b0b0b;background:#0b0b0b;color:#fff}
.prod__foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.prod__price{font-size:clamp(20px,1.6vw,26px);font-weight:760;letter-spacing:-.03em}
.prod__add{padding:11px 16px;border:0;border-radius:10px;background:#0b0b0b;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .3s,color .3s}
.prod__add.is-added{background:var(--green);color:#0b0b0b}
@media (hover:hover){
  .prod:hover{translate:0 -6px;box-shadow:0 26px 44px -26px rgba(0,0,0,.4)}
  .prod:hover::before{top:-50%;transform:skewY(10deg);opacity:.22}
  .prod:hover .prod__art svg{translate:0 -8px;rotate:-4deg}
  .prod:has(.prod__art img):hover::before{bottom:-56%;transform:skewY(10deg);opacity:.24}
  .prod:hover .prod__art img{scale:1.08;translate:0 -2%}
  .prod__add:hover{background:var(--green);color:#0b0b0b}
}
.shop__fly{position:fixed;z-index:130;pointer-events:none;transition:transform .8s cubic-bezier(.5,-.25,.3,1),opacity .8s}
.shop__drawer{position:absolute;top:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;width:min(360px,100%);padding:24px;background:#0b0b0b;color:#fff;translate:101% 0;transition:translate .6s var(--ease-out)}
.shop.is-open .shop__drawer{translate:0 0}
.shop__drawer h3{margin:0 0 16px;font-size:24px;letter-spacing:-.03em}
.shop__close{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;background:none;color:#fff;cursor:pointer}
.shop__close::before,.shop__close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.shop__close::after{rotate:-45deg}
.shop__empty{margin:0;opacity:.6}
.shop__lines{flex:1;overflow:auto;margin:0;padding:0;list-style:none}
.shop__lines li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
.shop__lines em{display:block;font-style:normal;opacity:.6}
.shop__total{display:flex;justify-content:space-between;margin:16px 0;font-size:18px;font-weight:760}
.shop__checkout{padding:15px;border:0;border-radius:12px;background:var(--green);color:#0b0b0b;font:inherit;font-weight:760;cursor:pointer}
.shop__note{margin:10px 0 0;font-size:12px;opacity:.6}
/* AI: a website with its assistant open */
.mk-site{position:relative;width:100%;max-width:640px;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.35)}
.mk-site__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;background:#f1f1f1}
.mk-site__bar span{width:9px;height:9px;border-radius:50%;background:#d5d5d5}
.mk-site__page{display:flex;flex-direction:column;gap:14px;height:calc(100% - 30px);padding:6%}
.mk-site__page .mk-b--hero{height:36%}
.mk-site__page .mk-row{flex:none;height:22%}
.mk-bot{position:absolute;right:4%;bottom:5%;display:flex;flex-direction:column;gap:8px;width:min(62%,310px);padding:14px;border-radius:18px;background:#0b0b0b;color:#fff;font-size:12.5px;line-height:1.35;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.mk-bot p{margin:0}
.mk-bot__head{display:flex;justify-content:space-between;gap:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.mk-bot__head span{color:var(--green);font-size:11px}
.mk-bot__me{align-self:flex-end;max-width:85%;padding:8px 10px;border-radius:12px 12px 4px 12px;background:var(--green);color:#0b0b0b;font-weight:600}
.mk-bot__ai{max-width:92%;padding:8px 10px;border-radius:12px 12px 12px 4px;background:#262626}
.mk-bot__type{display:flex;align-self:flex-start;gap:4px;padding:10px 12px;border-radius:12px;background:#262626}
.mk-bot__type i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.4;animation:mktype 1.2s infinite}
.mk-bot__type i:nth-child(2){animation-delay:.2s}
.mk-bot__type i:nth-child(3){animation-delay:.4s}
@keyframes mktype{50%{opacity:1;translate:0 -3px}}
/* Strategy: the plan on one page */
.mk-doc{width:100%;max-width:520px;padding:clamp(20px,2.4vw,32px);border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.3)}
.mk-doc__title{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px;font-size:24px;font-weight:760;letter-spacing:-.03em}
.mk-doc__title span{font-size:12px;font-weight:600;opacity:.5}
.mk-doc ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-doc li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:12px;background:#f5f4f1;font-size:14px}
.mk-doc li b{font-weight:760}
/* Ecommerce, AI and strategy: small screens drawn beside a topic */
.mk-co,.mk-menu,.mk-mail,.mk-cal{display:grid;gap:8px;width:100%;max-width:420px;padding:20px;border-radius:18px;background:#fff}
.mk-co p,.mk-menu p,.mk-mail p,.mk-pdp p,.mk-age p,.mk-find p{margin:0}
.mk-co__steps{display:flex;gap:6px;margin-bottom:8px!important}
.mk-co__steps span{flex:1;padding:8px 0;border-radius:8px;background:#f1f1f1;font-size:12px;font-weight:600;text-align:center;opacity:.6}
.mk-co__steps .is-on{background:#0b0b0b;color:#fff;opacity:1}
.mk-co__line{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.mk-co__line--total{padding-top:10px;border-top:1.5px solid #eee;font-size:17px;font-weight:760}
.mk-co__pay{margin-top:8px!important;padding:14px;border-radius:12px;background:var(--green);font-weight:760;text-align:center}
.mk-co__note{font-size:12px;text-align:center;opacity:.55}
.mk-menu__tabs,.mk-menu__mode{display:flex;flex-wrap:wrap;gap:6px}
.mk-menu__tabs span,.mk-menu__mode span{padding:8px 12px;border-radius:8px;background:#f1f1f1;font-size:13px;font-weight:600}
.mk-menu__tabs .is-on{background:#0b0b0b;color:#fff}
.mk-menu__mode .is-on{background:var(--green)}
.mk-menu__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#f5f4f1;font-size:13px}
.mk-menu__row span{display:grid}
.mk-menu__row b{font-size:15px}
.mk-menu__row em{font-style:normal;font-weight:760}
.mk-menu__row i{padding:7px 12px;border-radius:8px;background:#0b0b0b;color:#fff;font-size:12px;font-style:normal;font-weight:700}
.mk-menu__sync{font-size:12px;text-align:center;opacity:.55}
.mk-pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:center;width:100%;max-width:460px;padding:18px;border-radius:18px;background:#fff}
.mk-pdp__art{display:grid;place-items:center;aspect-ratio:.9;border-radius:14px;background:#f5f4f1}
.mk-pdp__art svg{width:80%;height:auto}
.mk-pdp__info{display:grid;gap:8px}
.mk-pdp__name{font-size:18px;font-weight:760;line-height:1.05;letter-spacing:-.03em}
.mk-pdp__sizes{display:flex;flex-wrap:wrap;gap:4px}
.mk-pdp__sizes span{padding:5px 8px;border:1.5px solid rgba(0,0,0,.14);border-radius:7px;font-size:11px;font-weight:600}
.mk-pdp__sizes .is-on{border-color:#0b0b0b;background:#0b0b0b;color:#fff}
.mk-pdp__price{font-size:22px;font-weight:760}
.mk-pdp__add{padding:11px;border-radius:10px;background:#0b0b0b;color:#fff;font-size:13px;font-weight:700;text-align:center}
.mk-pdp__coa{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mk-age{display:grid;justify-items:center;gap:10px;width:100%;max-width:380px;padding:32px 26px;border-radius:22px;background:#0b0b0b;color:#fff;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.mk-age__logo{font-size:20px;font-weight:760;letter-spacing:-.03em}
.mk-age__logo .dot{color:var(--green)}
.mk-age__q{margin-top:10px!important;font-size:26px;font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-age__text{font-size:13px;opacity:.65}
.mk-age__btns{display:flex;gap:8px;margin-top:10px!important}
.mk-age__btns span{padding:12px 20px;border:1.5px solid rgba(255,255,255,.35);border-radius:10px;font-size:14px;font-weight:700}
.mk-age__btns .is-yes{border-color:var(--green);background:var(--green);color:#0b0b0b}
.mk-mail__from{display:flex;align-items:baseline;gap:8px;font-size:14px}
.mk-mail__from span{font-size:12px;opacity:.5}
.mk-mail__subject{font-size:19px;font-weight:760;letter-spacing:-.03em}
.mk-mail__item{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:14px;padding:12px;border-radius:14px;background:#f5f4f1}
.mk-mail__item svg{display:block;width:100%;height:auto}
.mk-mail__item p{display:grid;gap:2px;font-size:13px}
.mk-mail__btn{padding:13px;border-radius:12px;background:#0b0b0b;color:#fff;font-weight:700;text-align:center}
.mk-find{display:grid;gap:8px;width:100%;max-width:440px}
.mk-find__box{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:#fff;font-weight:600;box-shadow:inset 0 0 0 2px var(--green)}
.mk-find__box i{flex:none;width:12px;height:12px;border:2px solid #0b0b0b;border-radius:50%}
.mk-find__row{display:grid;gap:2px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.mk-find__row span{opacity:.65}
.mk-flow{display:grid;width:100%;max-width:420px;margin:0;padding:0;list-style:none}
.mk-flow li{position:relative;display:grid;gap:2px;margin-left:20px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.mk-flow li+li{margin-top:14px}
.mk-flow li::before{content:"";position:absolute;left:-20px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--green)}
.mk-flow li+li::after{content:"";position:absolute;left:-15px;top:-28px;width:2px;height:46px;background:rgba(0,0,0,.15)}
.mk-flow span{opacity:.65}
.mk-kpi{display:grid;gap:10px;width:100%;max-width:420px;margin:0;padding:0;list-style:none}
.mk-kpi li{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:#fff;font-size:14px;font-weight:600}
.mk-kpi i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--green) calc(var(--v) * 100%),#eee 0)}
.mk-cal__title{margin:0 0 6px!important;font-size:20px;font-weight:760;letter-spacing:-.03em}
.mk-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding-bottom:18px}
.mk-cal__grid span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:8px;background:#f5f4f1;font-size:12px;font-weight:600}
.mk-cal__grid .is-tag{background:#0b0b0b;color:#fff}
.mk-cal__grid .is-tag::after{content:attr(data-tag);position:absolute;left:50%;top:calc(100% + 3px);z-index:1;padding:3px 6px;border-radius:6px;background:var(--green);color:#0b0b0b;font-size:9px;font-weight:760;white-space:nowrap;translate:-50% 0}
.mk-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:440px}
.mk-split div{display:grid;align-content:start;gap:8px;padding:18px;border-radius:16px;background:#fff}
.mk-split div:last-child{background:#0b0b0b;color:#fff}
.mk-split p{margin:0 0 4px;font-size:18px;font-weight:760;letter-spacing:-.03em}
.mk-split span{padding:9px 12px;border-radius:10px;background:rgba(127,127,127,.12);font-size:13px;font-weight:600}
@media (max-width:1000px){
  .shop__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* On a phone the shelf scrolls sideways and the assistant sits under the page it belongs to */
@media (max-width:560px){
  .shop__grid{grid-auto-columns:78%;grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .prod{scroll-snap-align:start}
  .mk-site{aspect-ratio:auto}
  .mk-site__page{height:180px}
  .mk-bot{position:relative;right:auto;bottom:auto;width:auto;margin:0 12px 12px}
}
@media (prefers-reduced-motion:reduce){
  .mk-bot__type i{animation:none}
}
/* Branding: the visual system, delivered as a web page */
.mk-brand{width:100%;max-width:560px;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.35);color:#0b0b0b}
.mk-brand__body{display:grid;grid-template-columns:32% minmax(0,1fr)}
.mk-brand__nav{margin:0;padding:clamp(14px,1.6vw,22px);list-style:none;background:#0b0b0b;color:#fff;font-size:13px;font-weight:600;line-height:2.1}
.mk-brand__nav li{opacity:.45}
.mk-brand__nav li.is-on{opacity:1}
.mk-brand__nav li.is-on::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--green);vertical-align:.1em}
.mk-brand__main{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,1.8vw,24px)}
.mk-brand__h{margin:0;font-size:clamp(22px,2vw,30px);font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-brand__swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.mk-brand__swatches li{position:relative;display:grid;gap:2px;font-size:12px;line-height:1.3}
.mk-brand__swatches i{display:block;aspect-ratio:16/9;margin-bottom:6px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mk-brand__swatches span{opacity:.6}
.mk-brand__swatches em{position:absolute;top:8px;right:8px;padding:4px 8px;border-radius:6px;background:#0b0b0b;color:#fff;font-size:11px;font-style:normal;font-weight:600;animation:mk-copied 4.2s var(--ease-out) infinite}
@keyframes mk-copied{0%,24%{opacity:0;transform:translateY(4px)}32%,72%{opacity:1;transform:none}82%,100%{opacity:0;transform:none}}
.mk-brand__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.mk-brand__type{margin:0;font-size:clamp(44px,4vw,64px);font-weight:760;line-height:.8;letter-spacing:-.05em}
.mk-brand__type small{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:0;opacity:.6}
.mk-brand__dl{margin:0;padding:10px 14px;border-radius:10px;background:#0b0b0b;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
@media (max-width:560px){
  .mk-brand__body{grid-template-columns:minmax(0,1fr)}
  .mk-brand__nav{display:flex;flex-wrap:wrap;gap:0 14px;line-height:1.9}
}
/* Web design: the real Figma file, shown whole. It rises into view like the photos, without cutting its edges */
.svc-shot{margin:0;width:100%;overflow:hidden;border-radius:clamp(12px,1.4vw,20px);box-shadow:0 40px 80px -30px rgba(0,0,0,.45);transform:translateZ(0)}
/* A screen of ours inside a topic sits whole in the same grey card the drawings used */
.svc-shot--bare{border-radius:0;box-shadow:none;overflow:visible}
.svc-topic__card{display:flex;align-items:center;justify-content:center;min-height:clamp(320px,34vw,520px);padding:clamp(20px,3vw,48px);border-radius:clamp(18px,2vw,32px);background:#efefef}
.svc-shot img,.svc-topic__art .svc-shot img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill}
.js .svc-shot[data-reveal]{opacity:1;transform:translateZ(0)}
.js .svc-shot[data-reveal] img{clip-path:inset(100% 0 0 0);scale:1.12;transition:clip-path 1.3s var(--ease-out),scale 2s var(--ease-out)}
.js .svc-shot[data-reveal].is-in img{clip-path:inset(0 0 0 0);scale:1}
@media (hover:hover){
  .js .svc-shot[data-reveal].is-in:hover img{scale:1.03;transition:clip-path 1.3s var(--ease-out),scale 1.2s var(--ease-out)}
}
/* AI content: a draft in the WordPress editor that fills its card, the review buttons below the text */
.svc-topic__art--mock:has(.mk-wp){padding:clamp(14px,1.6vw,24px)}
.mk-wp{display:flex;flex-direction:column;align-self:stretch;width:100%;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.3);color:#1e1e1e;font-size:clamp(14px,1.05vw,16px)}
.mk-wp p{margin:0}
.mk-wp__bar{display:flex;align-items:center;gap:12px;height:52px;padding-right:14px;border-bottom:1px solid #e0e0e0;font-size:13px}
.mk-wp__logo{display:grid;place-items:center;flex:none;width:52px;height:52px;background:#1e1e1e;color:#fff;font-size:22px;font-weight:700}
.mk-wp__state{opacity:.6}
.mk-wp__spacer{flex:1}
.mk-wp__link{font-weight:600}
.mk-wp__publish{padding:8px 14px;border-radius:4px;background:#3858e9;color:#fff;font-weight:600}
.mk-wp__body{display:grid;flex:1;grid-template-columns:minmax(0,1fr) 34%}
.mk-wp__doc{display:grid;align-content:start;gap:14px;padding:clamp(18px,2.4vw,36px)}
.mk-wp__title{font-size:clamp(24px,2.3vw,36px);font-weight:760;line-height:1.05;letter-spacing:-.03em}
.mk-wp__doc p:not([class]){line-height:1.55}
.mk-wp__h2{font-size:clamp(17px,1.4vw,21px);font-weight:760;line-height:1.2}
.mk-wp__side{display:grid;align-content:start;gap:12px;padding:18px;border-left:1px solid #e0e0e0;font-size:13px}
.mk-wp__side-title{font-weight:760}
.mk-wp__side p:not(.mk-wp__side-title){display:grid;gap:2px}
.mk-wp__side span{opacity:.6}
.mk-wp__side .is-ok{color:#1f7a0c}
.mk-wp__review{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px clamp(18px,2.4vw,36px);border-top:1px solid #e0e0e0;background:#f6f7f7}
.mk-wp__review p{flex:1 1 200px;font-size:13px;font-weight:600;opacity:.7}
.mk-wp__review span{padding:12px 18px;border:1.5px solid rgba(0,0,0,.16);border-radius:10px;font-size:14px;font-weight:700}
.mk-wp__review .is-yes{border-color:#0b0b0b;background:#0b0b0b;color:#fff}
@media (max-width:1100px){
  .mk-wp__body{grid-template-columns:minmax(0,1fr)}
  .mk-wp__side{display:none}
}
/* Dispensary marketing: an example newsletter, open in the inbox, scrolling slowly to the end and back */
.svc-demo--newsletter .svc-demo__art{min-height:0}
.mk-news{width:100%;max-width:600px;margin:0;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.35);color:#0b0b0b}
.mk-news__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:14px 18px;border-bottom:1px solid #e6e6e6;font-size:13px;line-height:1.3}
.mk-news__avatar{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0b0b0b;color:#4dbd28;font-size:15px;font-weight:760}
.mk-news__from{font-weight:760}
.mk-news__time{opacity:.55}
.mk-news__subject{grid-column:2 / 4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.75}
.mk-news__body{--h:clamp(420px,40vw,600px);height:var(--h);overflow:hidden;background:#f4f5f2}
.mk-news__body img{display:block;width:100%;height:auto;animation:mk-news 30s ease-in-out infinite alternate}
@keyframes mk-news{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + var(--h)))}}
@media (hover:hover){
  .mk-news:hover .mk-news__body img{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .mk-news__body{overflow-y:auto}
  .mk-news__body img{animation:none}
}
/* A column of dots on the right, one per service page: the current one is green with its name, the others show
   their names when the column is hovered. Only with a mouse and a wide screen; the script moves it to the body */
.svc-dots{display:none}
@media (hover:hover) and (min-width:1001px){
  .svc-dots{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;z-index:60;display:block;translate:0 -50%;opacity:0;visibility:hidden;transition:opacity .5s var(--ease-out),visibility 0s linear .5s}
  .svc-dots.is-shown{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out)}
  .svc-dots ul{display:grid;justify-items:end;gap:18px;margin:0;padding:6px 0;list-style:none}
  .svc-dots a{display:flex;align-items:center;gap:12px;color:#0b0b0b;text-decoration:none}
  .svc-dots i{display:block;flex:none;width:13px;height:13px;border-radius:50%;background:#0b0b0b;opacity:.28;transition:opacity .3s,scale .3s var(--ease-out),background-color .3s}
  .svc-dots span{padding:8px 14px;border-radius:10px;background:#fff;box-shadow:0 8px 24px -12px rgba(0,0,0,.35);font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;translate:6px 0;pointer-events:none;transition:opacity .3s,translate .4s var(--ease-out)}
  .svc-dots a.is-current i{background:var(--green);opacity:1;scale:1.3}
  .svc-dots:hover span,.svc-dots a:focus-visible span,.svc-dots a.is-current span{opacity:1;translate:0 0}
  .svc-dots:hover span{pointer-events:auto}
  .svc-dots a:hover i{opacity:.8;scale:1.2}
}
/* Service pages. End */

/* Service pages. Start */
/* Four pages, one per service people search for. The question answered first, an example drawn in HTML, what is
   included, the topics in depth with real pictures, a client's words, the steps, a call with Kurt, the questions and
   the other services. Written by tools/make-services.js from tools/services.css: edit there, not here. */
.svc-trust{margin:clamp(18px,2.6vh,32px) 0 0;font-size:14px;font-weight:600;line-height:1.4;opacity:.6}
.js .svc-trust{opacity:0;transition:opacity .9s var(--ease-out) 1.1s}
.is-ready .svc-trust{opacity:.6}
.svc-answer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,100px);align-items:start;padding:clamp(60px,8vw,150px) var(--pad) clamp(44px,6vw,110px)}
.svc-answer__q{margin:0;font-size:clamp(34px,4.2vw,80px);font-weight:760;line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.svc-answer__a p{margin:0 0 1em;max-width:36em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.38}
.svc-answer__a p:first-child{max-width:22em;font-size:clamp(22px,2.2vw,38px);font-weight:640;line-height:1.14;letter-spacing:-.025em}
.svc-answer__a p:last-child{margin-bottom:0}
.svc-answer__a p.svc-made{margin-top:clamp(20px,2.4vw,36px);max-width:40em;font-size:clamp(15px,1.15vw,18px);font-weight:540;line-height:1.5;opacity:.75}
.svc-made b{margin-right:.5em;font-weight:760}

/* The example: a drawing of the work, on the cream of the studio */
.svc-demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,80px);align-items:center;margin:0 var(--pad) clamp(12px,1.4vw,24px);padding:clamp(28px,4vw,72px);overflow:hidden;border-radius:clamp(18px,2vw,32px);background:#ede8df;color:#0b0b0b}
.svc-demo__text h2{margin:0 0 clamp(14px,1.6vw,24px);font-size:clamp(34px,4.2vw,80px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-demo__text p{margin:0;max-width:30em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.38;opacity:.8}
.svc-demo__art{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(360px,40vw,580px)}
.mk-phone{position:relative;z-index:1;width:clamp(230px,21vw,290px);aspect-ratio:9/18.5;padding:10px;border-radius:42px;background:#0b0b0b;box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.mk-phone__screen{display:flex;flex-direction:column;gap:10px;height:100%;padding:20px 14px;overflow:hidden;border-radius:33px;background:#fff;color:#0b0b0b;font-size:12px;line-height:1.3}
.mk-search{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:#f1f1f1;font-weight:600}
.mk-search i{flex:none;width:11px;height:11px;border:2px solid #0b0b0b;border-radius:50%}
.mk-map{position:relative;flex:none;height:30%;border-radius:14px;background:linear-gradient(90deg,transparent 47%,#fff 47% 51%,transparent 51%),linear-gradient(0deg,transparent 57%,#fff 57% 61%,transparent 61%),linear-gradient(32deg,transparent 30%,#fff 30% 33%,transparent 33%),#dde8d3}
.mk-pin{position:absolute;left:62%;top:26%;width:13px;height:13px;border-radius:50% 50% 50% 0;background:#8f8f8f;rotate:-45deg}
.mk-pin:nth-child(3){left:24%;top:62%}
.mk-pin--you{left:40%;top:34%;width:20px;height:20px;background:var(--green);box-shadow:0 0 0 0 rgba(77,189,40,.5);animation:mkpulse 2.4s ease-out infinite}
@keyframes mkpulse{70%{box-shadow:0 0 0 14px rgba(77,189,40,0)}100%{box-shadow:0 0 0 0 rgba(77,189,40,0)}}
.mk-results{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-results li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#f5f5f5}
.mk-results li.is-you{background:#0b0b0b;color:#fff}
.mk-results b{font-size:13px}
.mk-acts{display:flex;gap:6px;margin-top:6px}
.mk-acts em{padding:4px 9px;border-radius:6px;background:var(--green);color:#0b0b0b;font-size:11px;font-style:normal;font-weight:700}
.mk-acts em+em{background:#fff}
.mk-stars{color:#f2b100;letter-spacing:.04em}
.mk-results span:not(.mk-stars):not(.mk-acts){opacity:.6}
.mk-answer{position:absolute;right:0;bottom:6%;z-index:2;width:min(58%,300px);margin:0;padding:16px 18px;border-radius:18px;background:#0b0b0b;color:#fff;font-size:14px;line-height:1.38;box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.mk-answer p{margin:0}
.mk-answer__label{margin-bottom:6px!important;color:var(--green);font-size:13px;font-weight:600;line-height:1}
.svc-demo--search .mk-phone{margin-right:28%}
.mk-phone__screen--msgs{gap:12px;background:#fafafa}
.mk-msgs__from{margin:0 0 4px;font-weight:700;text-align:center}
.mk-bubble{align-self:flex-start;max-width:90%;margin:0;padding:10px 12px;border-radius:16px 16px 16px 4px;background:#ececec}
.mk-loyal{display:grid;gap:4px;padding:14px;border-radius:16px;background:#0b0b0b;color:#fff}
.mk-loyal span{color:var(--green);font-size:12px;font-weight:600;line-height:1}
.mk-loyal b{font-size:22px;letter-spacing:-.03em}
.mk-loyal i,.mk-card__bar{display:block;height:6px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.18)}
.mk-loyal s,.mk-card__bar s{display:block;height:100%;border-radius:3px;background:var(--green)}
.mk-loyal small{opacity:.7}
.mk-stars--big{margin:0;font-size:22px;text-align:center}
/* A design file open in Figma: two frames, a comment and two people at work */
.mk-figma{position:relative;width:100%;max-width:660px;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background-color:#1e1e1e;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:16px 16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.mk-figma__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#2c2c2c;color:#b3b3b3;font-size:12px}
.mk-figma__bar span{width:10px;height:10px;border-radius:50%;background:#555}
.mk-figma__bar em{margin-left:14px;font-style:normal}
.mk-frame{position:absolute;color:#9d9d9d;font-size:11px}
.mk-frame p{margin:0 0 6px}
.mk-frame__body{display:flex;flex-direction:column;gap:6%;height:calc(100% - 20px);padding:7%;border-radius:6px;background:#fff}
.mk-frame--desk{left:6%;top:17%;width:56%;height:64%}
.mk-frame--phone{right:8%;top:23%;width:21%;height:62%}
.mk-frame.is-selected .mk-frame__body{outline:2px solid #0d99ff;outline-offset:3px}
.mk-b{display:block;flex:none;height:7%;border-radius:4px;background:#e8e8e8}
.mk-b--nav{height:5%}
.mk-b--hero{height:34%;background:#0b0b0b}
.mk-b--cta{width:42%;background:var(--green)}
.mk-row{display:grid;flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8%}
.mk-row i{border-radius:4px;background:#efefef}
.mk-cursor{position:absolute;padding:4px 9px;border-radius:2px 10px 10px 10px;font-size:12px;font-weight:700;animation:mkfloat 7s ease-in-out infinite}
.mk-cursor--you{left:34%;top:56%;background:var(--magenta);color:#fff}
.mk-cursor--us{right:12%;top:12%;background:var(--green);color:#0b0b0b;animation-delay:-3s}
@keyframes mkfloat{50%{translate:18px -12px}}
.mk-note{position:absolute;left:7%;bottom:7%;max-width:46%;margin:0;padding:10px 12px;border-radius:12px 12px 12px 2px;background:#fff;color:#0b0b0b;font-size:12px;font-weight:600;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
/* Branding: real work, from the logo to the shelf */
/* Branding: the logo wall. Each tile hands over to the next logo, the new one dropping in from above as the old one
   slides out below, one tile after another */
.svc-demo--logos{grid-template-columns:minmax(0,1fr)}
.svc-demo--logos .svc-demo__art{display:block;min-height:0}
.mk-logos__wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.mk-logos__cell{position:relative;aspect-ratio:1;overflow:hidden;border-radius:clamp(14px,1.6vw,24px);background:#fff;transform:translateZ(0)}
.mk-logos__item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;transition:transform 1s cubic-bezier(.86,0,.07,1),opacity 1s cubic-bezier(.86,0,.07,1)}
.mk-logos__item img{display:block;width:var(--lw,44%);height:auto;transition:scale .8s var(--ease-out)}
.mk-logos__item figcaption{position:absolute;left:clamp(14px,1.4vw,22px);bottom:clamp(12px,1.3vw,20px);font-size:14px;font-weight:600;line-height:1.3;opacity:.6}
.mk-logos__item.is-above{transform:translateY(-100%);transition:none}
.mk-logos__item.is-below{transform:translateY(100%);opacity:0}
@media (hover:hover){
  .mk-logos__cell:hover img{scale:1.08}
}

.svc-included{margin:clamp(60px,8vw,150px) var(--pad) 0;color:#0b0b0b}
.svc-included__title,.svc-steps__title{margin:0 0 clamp(26px,3.4vw,60px);font-size:clamp(40px,6vw,120px);font-weight:760;line-height:.86;letter-spacing:-.055em}
.svc-included__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,56px) clamp(20px,3vw,48px);margin:0;padding:0;list-style:none}
.svc-included__list h3,.svc-steps__list h3{margin:0 0 10px;font-size:clamp(20px,1.7vw,30px);font-weight:720;line-height:1.02;letter-spacing:-.035em}
.svc-included__list p,.svc-steps__list p{margin:0;max-width:26em;font-size:clamp(16px,1.2vw,19px);font-weight:520;line-height:1.38;opacity:.75}

/* The topics in depth: words on one side, a real picture or a drawing on the other, alternating */
.svc-topic{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,100px);align-items:center;padding:clamp(60px,8vw,140px) var(--pad) 0}
.svc-topic--flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.svc-topic--flip .svc-topic__art{order:-1}
.svc-topic--text{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.svc-topic--text > h2{margin:0;font-size:clamp(32px,3.8vw,72px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-topic__text h2{margin:0 0 clamp(16px,2vw,28px);font-size:clamp(32px,3.8vw,72px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-topic__text p{margin:0 0 1em;max-width:34em;font-size:clamp(17px,1.35vw,22px);font-weight:520;line-height:1.42}
.svc-topic__text ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:clamp(20px,2.4vw,36px) 0 0;padding:0;list-style:none}
.svc-topic__text li{position:relative;padding-left:22px;font-size:clamp(15px,1.1vw,18px);font-weight:600;line-height:1.3}
.svc-topic__text li::before{content:"";position:absolute;left:0;top:.38em;width:9px;height:9px;border-radius:50%;background:var(--green)}
.svc-topic__art{margin:0}
/* A photo does not sit flat: it rises into its frame as it arrives, settles from a zoom, drifts a little with the
   scroll and comes closer under the pointer */
.svc-topic__frame{overflow:hidden;border-radius:clamp(18px,2vw,32px);transform:translateZ(0)}
.svc-topic__art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;scale:1.06}
.js .svc-topic__frame[data-reveal]{opacity:1;transform:translateZ(0)}
.js .svc-topic__frame[data-reveal] img{clip-path:inset(100% 0 0 0);scale:1.3;transition:clip-path 1.3s var(--ease-out),scale 2.2s var(--ease-out)}
.js .svc-topic__frame[data-reveal].is-in img{clip-path:inset(0 0 0 0);scale:1.06}
@media (hover:hover){
  .js .svc-topic__frame[data-reveal].is-in:hover img{scale:1.14;transition:clip-path 1.3s var(--ease-out),scale 1.2s var(--ease-out)}
}
.svc-topic__art figcaption{margin-top:12px;font-size:14px;font-weight:600;line-height:1.35;opacity:.8}
.svc-topic__art--mock{display:flex;align-items:center;justify-content:center;min-height:clamp(320px,34vw,520px);padding:clamp(20px,3vw,48px);border-radius:clamp(18px,2vw,32px);background:#efefef;color:#0b0b0b}
.mk-vitals{display:grid;gap:16px;width:100%;max-width:440px}
.mk-score{display:grid;justify-self:center;place-content:center;width:clamp(150px,14vw,200px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#efefef 80%,transparent 81% 100%),conic-gradient(var(--green) 100%,rgba(0,0,0,.08) 0);text-align:center}
.mk-score b{font-size:clamp(44px,4vw,64px);font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-score span{margin-top:4px;font-size:12px;font-weight:600;line-height:1.2;opacity:.6}
.mk-vitals ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-vitals li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.mk-vitals li span{opacity:.7}
.mk-vitals li em{color:#1f7a0c;font-style:normal;font-weight:700}
.mk-vitals p{margin:0;font-size:12px;text-align:center;opacity:.6}
.mk-chat,.mk-inbox{display:grid;gap:10px;width:100%;max-width:440px}
.mk-chat p,.mk-inbox p{margin:0}
.mk-chat__q{justify-self:end;max-width:82%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#0b0b0b;color:#fff;font-weight:600}
.mk-chat__a{padding:16px 18px;border-radius:18px 18px 18px 4px;background:#fff;line-height:1.45}
.mk-chat__a span{display:block;margin-top:10px;font-size:13px;font-weight:600;line-height:1;opacity:.55}
.mk-inbox__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 16px;border-radius:14px;background:#fff}
.mk-inbox__row span{grid-column:1;opacity:.7}
.mk-inbox__row em{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:12px;font-style:normal;opacity:.5}
.mk-inbox__row.is-new{box-shadow:inset 4px 0 0 var(--green)}
.mk-card{display:grid;gap:8px;width:min(100%,360px);padding:24px;border-radius:22px;background:#0b0b0b;color:#fff;box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.mk-card p{margin:0}
.mk-card__brand{display:flex;justify-content:space-between;font-weight:700}
.mk-card__brand span{color:var(--green);font-size:13px;font-weight:600;line-height:1.6}
.mk-card__pts{margin-top:10px;font-size:48px;font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-card__label,.mk-card__next{opacity:.65}
.mk-card .mk-stars--big{margin-top:6px;text-align:left}
.mk-own{display:grid;gap:10px;width:100%;max-width:400px}
.mk-own__file{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border-radius:14px;background:#fff;font-weight:600}
.mk-own__file i{flex:none;width:26px;height:32px;background:#0b0b0b;clip-path:polygon(0 0,68% 0,100% 26%,100% 100%,0 100%)}
.mk-own__stamp{justify-self:center;margin:14px 0 0;padding:10px 18px;border:2.5px solid var(--green);border-radius:12px;color:#1f7a0c;font-size:22px;font-weight:760;rotate:-6deg}

.svc-why{margin:clamp(60px,8vw,150px) var(--pad) 0;color:#0b0b0b}
.svc-why__title{margin:0;max-width:15em;font-size:clamp(34px,5vw,96px);font-weight:760;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.svc-why__text{margin:clamp(20px,2.4vw,40px) 0 0;max-width:34em;font-size:clamp(17px,1.4vw,24px);font-weight:520;line-height:1.38;opacity:.8}
/* A client, in their own words */
.svc-quote{padding:clamp(60px,8vw,150px) var(--pad) 0}
.svc-quote blockquote{margin:0;color:#0b0b0b}
.svc-quote blockquote p{margin:0;max-width:32em;font-size:clamp(22px,2.3vw,40px);font-weight:640;line-height:1.16;letter-spacing:-.03em;text-wrap:pretty}
.svc-quote footer{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:clamp(20px,2.4vw,36px);font-size:clamp(15px,1.1vw,18px)}
.svc-quote footer b{font-weight:760}
.svc-quote footer span{opacity:.65}
.svc-steps{padding:clamp(60px,8vw,150px) var(--pad) 0}
.svc-steps__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,56px);margin:0;padding:0;list-style:none}
.svc-steps__list h3::before{content:"";display:block;width:12px;height:12px;margin-bottom:18px;border-radius:50%;background:var(--green)}
/* A checklist people can use on their own business today */
.svc-check{padding:clamp(60px,8vw,150px) var(--pad) 0}
.svc-check__title{margin:0 0 clamp(26px,3.4vw,60px);max-width:14em;font-size:clamp(40px,5vw,100px);font-weight:760;line-height:.88;letter-spacing:-.055em;text-wrap:balance}
.svc-check__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,28px) clamp(24px,4vw,72px);margin:0;padding:0;list-style:none}
.svc-check__list li{position:relative;padding-left:44px;font-size:clamp(17px,1.4vw,24px);font-weight:560;line-height:1.3;letter-spacing:-.01em}
.svc-check__list li::before{content:"";position:absolute;left:0;top:.1em;width:26px;height:26px;border-radius:50%;background:var(--green)}
.svc-check__list li::after{content:"";position:absolute;left:9px;top:calc(.1em + 6px);width:6px;height:11px;border-right:2.5px solid #0b0b0b;border-bottom:2.5px solid #0b0b0b;rotate:45deg}
/* The call with Kurt */
.svc-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,80px);padding:clamp(60px,8vw,150px) var(--pad) clamp(80px,9vw,170px)}
.svc-faq__title{position:sticky;top:clamp(80px,12vh,130px);align-self:start;margin:0;font-size:clamp(34px,4.2vw,80px);font-weight:760;line-height:.9;letter-spacing:-.05em}
@media (max-width:1000px){
  .svc-included__list,.svc-steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-topic__text ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .svc-answer,.svc-faq,.svc-demo,.svc-topic,.svc-topic--flip,.svc-topic--text{grid-template-columns:minmax(0,1fr)}
  .svc-faq__title{position:static}
  .svc-included__list,.svc-steps__list,.svc-check__list{grid-template-columns:minmax(0,1fr)}
  .svc-topic--flip .svc-topic__art{order:0}
  .svc-demo__art{min-height:0}
  .svc-demo--search .mk-phone{margin-right:0}
  .mk-answer{position:relative;right:auto;bottom:auto;width:100%;margin-top:-40px}
  .svc-demo--search .svc-demo__art{flex-direction:column}
  .mk-logos__wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .mk-pin--you,.mk-cursor,.mk-brand__swatches em{animation:none}
  .js .svc-topic__frame[data-reveal] img{clip-path:none;scale:1.06;transition:none}
  .js .svc-shot[data-reveal] img{clip-path:none;scale:1;transition:none}
}
/* The demo store of the ecommerce page: filters, strengths, a cart and an add to cart that flies */
/* Half the page for the store, half for its words; real photos, no brands */
.svc-demo--shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shop__title{margin:0;font-size:clamp(20px,1.6vw,26px);font-weight:760;letter-spacing:-.03em}
.prod:has(.prod__art img)::before{top:auto;bottom:-74%;opacity:.16;transition:bottom .7s var(--ease-out),transform .7s var(--ease-out),opacity .7s}
.prod:has(.prod__art img).is-spot::before{bottom:-56%;transform:skewY(10deg);opacity:.24}
.prod__art:has(img){aspect-ratio:4/5;margin:calc(clamp(14px,1.4vw,22px) * -1) calc(clamp(14px,1.4vw,22px) * -1) 14px;overflow:hidden}
.prod__art img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease-out),translate .9s var(--ease-out)}
.prod.is-spot .prod__art img{scale:1.07;translate:0 -2%}
img.shop__fly{object-fit:cover;border-radius:14px}
@media (max-width:1000px){
  .svc-demo--shop{grid-template-columns:minmax(0,1fr)}
}
.svc-demo--shop .svc-demo__art{display:block;min-height:0}
.shop{position:relative;overflow:hidden;padding:clamp(14px,2vw,28px);border-radius:clamp(14px,1.6vw,24px);background:#fff}
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.6vw,24px)}
.shop__filters{display:flex;flex-wrap:wrap;gap:6px}
.shop__filters button{padding:10px 16px;border:0;border-radius:10px;background:#f1f1f1;color:#0b0b0b;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .3s,color .3s}
.shop__filters button.is-on{background:#0b0b0b;color:#fff}
.shop__cart{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#0b0b0b;color:#fff;cursor:pointer}
.shop__cart i{position:relative;display:block;width:18px;height:15px;margin-top:5px;border:2px solid currentColor;border-radius:2px 2px 5px 5px}
.shop__cart i::before{content:"";position:absolute;left:50%;top:-8px;width:8px;height:7px;border:2px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0;translate:-50% 0}
.shop__cart span{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--green);color:#0b0b0b;font-size:12px;font-weight:760;line-height:22px;text-align:center;transition:scale .3s var(--ease-out)}
.shop__cart.is-bump span{scale:1.4}
.shop__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.prod{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:clamp(14px,1.4vw,22px);border-radius:clamp(14px,1.6vw,22px);background:#f5f4f1;transition:translate .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.prod::before{content:"";position:absolute;left:-10%;right:-10%;top:-62%;height:100%;background:var(--tone);opacity:.14;transform:skewY(-10deg);transition:top .7s var(--ease-out),transform .7s var(--ease-out),opacity .7s}
.prod.is-hidden{display:none}
.prod.is-spot{translate:0 -6px;box-shadow:0 26px 44px -26px rgba(0,0,0,.4)}
.prod__art{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:1.15}
.prod__art svg{width:74%;height:auto;transition:translate .7s var(--ease-out),rotate .7s var(--ease-out)}
.prod.is-spot .prod__art svg{translate:0 -6px;rotate:-3deg}
.prod__name{position:relative;z-index:1;margin:6px 0 4px;font-size:clamp(17px,1.35vw,22px);font-weight:760;line-height:1.05;letter-spacing:-.03em}
.prod__meta{position:relative;z-index:1;margin:0;font-size:13px;opacity:.6}
.prod__sizes{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.prod__sizes button{padding:7px 10px;border:1.5px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;color:#0b0b0b;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.prod__sizes button.is-on{border-color:#0b0b0b;background:#0b0b0b;color:#fff}
.prod__foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.prod__price{font-size:clamp(20px,1.6vw,26px);font-weight:760;letter-spacing:-.03em}
.prod__add{padding:11px 16px;border:0;border-radius:10px;background:#0b0b0b;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .3s,color .3s}
.prod__add.is-added{background:var(--green);color:#0b0b0b}
@media (hover:hover){
  .prod:hover{translate:0 -6px;box-shadow:0 26px 44px -26px rgba(0,0,0,.4)}
  .prod:hover::before{top:-50%;transform:skewY(10deg);opacity:.22}
  .prod:hover .prod__art svg{translate:0 -8px;rotate:-4deg}
  .prod:has(.prod__art img):hover::before{bottom:-56%;transform:skewY(10deg);opacity:.24}
  .prod:hover .prod__art img{scale:1.08;translate:0 -2%}
  .prod__add:hover{background:var(--green);color:#0b0b0b}
}
.shop__fly{position:fixed;z-index:130;pointer-events:none;transition:transform .8s cubic-bezier(.5,-.25,.3,1),opacity .8s}
.shop__drawer{position:absolute;top:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;width:min(360px,100%);padding:24px;background:#0b0b0b;color:#fff;translate:101% 0;transition:translate .6s var(--ease-out)}
.shop.is-open .shop__drawer{translate:0 0}
.shop__drawer h3{margin:0 0 16px;font-size:24px;letter-spacing:-.03em}
.shop__close{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;background:none;color:#fff;cursor:pointer}
.shop__close::before,.shop__close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.shop__close::after{rotate:-45deg}
.shop__empty{margin:0;opacity:.6}
.shop__lines{flex:1;overflow:auto;margin:0;padding:0;list-style:none}
.shop__lines li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
.shop__lines em{display:block;font-style:normal;opacity:.6}
.shop__total{display:flex;justify-content:space-between;margin:16px 0;font-size:18px;font-weight:760}
.shop__checkout{padding:15px;border:0;border-radius:12px;background:var(--green);color:#0b0b0b;font:inherit;font-weight:760;cursor:pointer}
.shop__note{margin:10px 0 0;font-size:12px;opacity:.6}
/* AI: a website with its assistant open */
.mk-site{position:relative;width:100%;max-width:640px;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.35)}
.mk-site__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;background:#f1f1f1}
.mk-site__bar span{width:9px;height:9px;border-radius:50%;background:#d5d5d5}
.mk-site__page{display:flex;flex-direction:column;gap:14px;height:calc(100% - 30px);padding:6%}
.mk-site__page .mk-b--hero{height:36%}
.mk-site__page .mk-row{flex:none;height:22%}
.mk-bot{position:absolute;right:4%;bottom:5%;display:flex;flex-direction:column;gap:8px;width:min(62%,310px);padding:14px;border-radius:18px;background:#0b0b0b;color:#fff;font-size:12.5px;line-height:1.35;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.mk-bot p{margin:0}
.mk-bot__head{display:flex;justify-content:space-between;gap:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.mk-bot__head span{color:var(--green);font-size:11px}
.mk-bot__me{align-self:flex-end;max-width:85%;padding:8px 10px;border-radius:12px 12px 4px 12px;background:var(--green);color:#0b0b0b;font-weight:600}
.mk-bot__ai{max-width:92%;padding:8px 10px;border-radius:12px 12px 12px 4px;background:#262626}
.mk-bot__type{display:flex;align-self:flex-start;gap:4px;padding:10px 12px;border-radius:12px;background:#262626}
.mk-bot__type i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.4;animation:mktype 1.2s infinite}
.mk-bot__type i:nth-child(2){animation-delay:.2s}
.mk-bot__type i:nth-child(3){animation-delay:.4s}
@keyframes mktype{50%{opacity:1;translate:0 -3px}}
/* Strategy: the plan on one page */
.mk-doc{width:100%;max-width:520px;padding:clamp(20px,2.4vw,32px);border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.3)}
.mk-doc__title{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px;font-size:24px;font-weight:760;letter-spacing:-.03em}
.mk-doc__title span{font-size:12px;font-weight:600;opacity:.5}
.mk-doc ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-doc li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:12px;background:#f5f4f1;font-size:14px}
.mk-doc li b{font-weight:760}
/* Ecommerce, AI and strategy: small screens drawn beside a topic */
.mk-co,.mk-menu,.mk-mail,.mk-cal{display:grid;gap:8px;width:100%;max-width:420px;padding:20px;border-radius:18px;background:#fff}
.mk-co p,.mk-menu p,.mk-mail p,.mk-pdp p,.mk-age p,.mk-find p{margin:0}
.mk-co__steps{display:flex;gap:6px;margin-bottom:8px!important}
.mk-co__steps span{flex:1;padding:8px 0;border-radius:8px;background:#f1f1f1;font-size:12px;font-weight:600;text-align:center;opacity:.6}
.mk-co__steps .is-on{background:#0b0b0b;color:#fff;opacity:1}
.mk-co__line{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.mk-co__line--total{padding-top:10px;border-top:1.5px solid #eee;font-size:17px;font-weight:760}
.mk-co__pay{margin-top:8px!important;padding:14px;border-radius:12px;background:var(--green);font-weight:760;text-align:center}
.mk-co__note{font-size:12px;text-align:center;opacity:.55}
.mk-menu__tabs,.mk-menu__mode{display:flex;flex-wrap:wrap;gap:6px}
.mk-menu__tabs span,.mk-menu__mode span{padding:8px 12px;border-radius:8px;background:#f1f1f1;font-size:13px;font-weight:600}
.mk-menu__tabs .is-on{background:#0b0b0b;color:#fff}
.mk-menu__mode .is-on{background:var(--green)}
.mk-menu__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#f5f4f1;font-size:13px}
.mk-menu__row span{display:grid}
.mk-menu__row b{font-size:15px}
.mk-menu__row em{font-style:normal;font-weight:760}
.mk-menu__row i{padding:7px 12px;border-radius:8px;background:#0b0b0b;color:#fff;font-size:12px;font-style:normal;font-weight:700}
.mk-menu__sync{font-size:12px;text-align:center;opacity:.55}
.mk-pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:center;width:100%;max-width:460px;padding:18px;border-radius:18px;background:#fff}
.mk-pdp__art{display:grid;place-items:center;aspect-ratio:.9;border-radius:14px;background:#f5f4f1}
.mk-pdp__art svg{width:80%;height:auto}
.mk-pdp__info{display:grid;gap:8px}
.mk-pdp__name{font-size:18px;font-weight:760;line-height:1.05;letter-spacing:-.03em}
.mk-pdp__sizes{display:flex;flex-wrap:wrap;gap:4px}
.mk-pdp__sizes span{padding:5px 8px;border:1.5px solid rgba(0,0,0,.14);border-radius:7px;font-size:11px;font-weight:600}
.mk-pdp__sizes .is-on{border-color:#0b0b0b;background:#0b0b0b;color:#fff}
.mk-pdp__price{font-size:22px;font-weight:760}
.mk-pdp__add{padding:11px;border-radius:10px;background:#0b0b0b;color:#fff;font-size:13px;font-weight:700;text-align:center}
.mk-pdp__coa{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mk-age{display:grid;justify-items:center;gap:10px;width:100%;max-width:380px;padding:32px 26px;border-radius:22px;background:#0b0b0b;color:#fff;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.mk-age__logo{font-size:20px;font-weight:760;letter-spacing:-.03em}
.mk-age__logo .dot{color:var(--green)}
.mk-age__q{margin-top:10px!important;font-size:26px;font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-age__text{font-size:13px;opacity:.65}
.mk-age__btns{display:flex;gap:8px;margin-top:10px!important}
.mk-age__btns span{padding:12px 20px;border:1.5px solid rgba(255,255,255,.35);border-radius:10px;font-size:14px;font-weight:700}
.mk-age__btns .is-yes{border-color:var(--green);background:var(--green);color:#0b0b0b}
.mk-mail__from{display:flex;align-items:baseline;gap:8px;font-size:14px}
.mk-mail__from span{font-size:12px;opacity:.5}
.mk-mail__subject{font-size:19px;font-weight:760;letter-spacing:-.03em}
.mk-mail__item{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:14px;padding:12px;border-radius:14px;background:#f5f4f1}
.mk-mail__item svg{display:block;width:100%;height:auto}
.mk-mail__item p{display:grid;gap:2px;font-size:13px}
.mk-mail__btn{padding:13px;border-radius:12px;background:#0b0b0b;color:#fff;font-weight:700;text-align:center}
.mk-find{display:grid;gap:8px;width:100%;max-width:440px}
.mk-find__box{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:#fff;font-weight:600;box-shadow:inset 0 0 0 2px var(--green)}
.mk-find__box i{flex:none;width:12px;height:12px;border:2px solid #0b0b0b;border-radius:50%}
.mk-find__row{display:grid;gap:2px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.mk-find__row span{opacity:.65}
.mk-flow{display:grid;width:100%;max-width:420px;margin:0;padding:0;list-style:none}
.mk-flow li{position:relative;display:grid;gap:2px;margin-left:20px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.mk-flow li+li{margin-top:14px}
.mk-flow li::before{content:"";position:absolute;left:-20px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--green)}
.mk-flow li+li::after{content:"";position:absolute;left:-15px;top:-28px;width:2px;height:46px;background:rgba(0,0,0,.15)}
.mk-flow span{opacity:.65}
.mk-kpi{display:grid;gap:10px;width:100%;max-width:420px;margin:0;padding:0;list-style:none}
.mk-kpi li{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:#fff;font-size:14px;font-weight:600}
.mk-kpi i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--green) calc(var(--v) * 100%),#eee 0)}
.mk-cal__title{margin:0 0 6px!important;font-size:20px;font-weight:760;letter-spacing:-.03em}
.mk-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding-bottom:18px}
.mk-cal__grid span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:8px;background:#f5f4f1;font-size:12px;font-weight:600}
.mk-cal__grid .is-tag{background:#0b0b0b;color:#fff}
.mk-cal__grid .is-tag::after{content:attr(data-tag);position:absolute;left:50%;top:calc(100% + 3px);z-index:1;padding:3px 6px;border-radius:6px;background:var(--green);color:#0b0b0b;font-size:9px;font-weight:760;white-space:nowrap;translate:-50% 0}
.mk-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:440px}
.mk-split div{display:grid;align-content:start;gap:8px;padding:18px;border-radius:16px;background:#fff}
.mk-split div:last-child{background:#0b0b0b;color:#fff}
.mk-split p{margin:0 0 4px;font-size:18px;font-weight:760;letter-spacing:-.03em}
.mk-split span{padding:9px 12px;border-radius:10px;background:rgba(127,127,127,.12);font-size:13px;font-weight:600}
@media (max-width:1000px){
  .shop__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* On a phone the shelf scrolls sideways and the assistant sits under the page it belongs to */
@media (max-width:560px){
  .shop__grid{grid-auto-columns:78%;grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .prod{scroll-snap-align:start}
  .mk-site{aspect-ratio:auto}
  .mk-site__page{height:180px}
  .mk-bot{position:relative;right:auto;bottom:auto;width:auto;margin:0 12px 12px}
}
@media (prefers-reduced-motion:reduce){
  .mk-bot__type i{animation:none}
}
/* Branding: the visual system, delivered as a web page */
.mk-brand{width:100%;max-width:560px;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.35);color:#0b0b0b}
.mk-brand__body{display:grid;grid-template-columns:32% minmax(0,1fr)}
.mk-brand__nav{margin:0;padding:clamp(14px,1.6vw,22px);list-style:none;background:#0b0b0b;color:#fff;font-size:13px;font-weight:600;line-height:2.1}
.mk-brand__nav li{opacity:.45}
.mk-brand__nav li.is-on{opacity:1}
.mk-brand__nav li.is-on::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--green);vertical-align:.1em}
.mk-brand__main{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,1.8vw,24px)}
.mk-brand__h{margin:0;font-size:clamp(22px,2vw,30px);font-weight:760;line-height:1;letter-spacing:-.04em}
.mk-brand__swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.mk-brand__swatches li{position:relative;display:grid;gap:2px;font-size:12px;line-height:1.3}
.mk-brand__swatches i{display:block;aspect-ratio:16/9;margin-bottom:6px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mk-brand__swatches span{opacity:.6}
.mk-brand__swatches em{position:absolute;top:8px;right:8px;padding:4px 8px;border-radius:6px;background:#0b0b0b;color:#fff;font-size:11px;font-style:normal;font-weight:600;animation:mk-copied 4.2s var(--ease-out) infinite}
@keyframes mk-copied{0%,24%{opacity:0;transform:translateY(4px)}32%,72%{opacity:1;transform:none}82%,100%{opacity:0;transform:none}}
.mk-brand__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.mk-brand__type{margin:0;font-size:clamp(44px,4vw,64px);font-weight:760;line-height:.8;letter-spacing:-.05em}
.mk-brand__type small{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:0;opacity:.6}
.mk-brand__dl{margin:0;padding:10px 14px;border-radius:10px;background:#0b0b0b;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
@media (max-width:560px){
  .mk-brand__body{grid-template-columns:minmax(0,1fr)}
  .mk-brand__nav{display:flex;flex-wrap:wrap;gap:0 14px;line-height:1.9}
}
/* Web design: the real Figma file, shown whole. It rises into view like the photos, without cutting its edges */
.svc-shot{margin:0;width:100%;overflow:hidden;border-radius:clamp(12px,1.4vw,20px);box-shadow:0 40px 80px -30px rgba(0,0,0,.45);transform:translateZ(0)}
/* A screen of ours inside a topic sits whole in the same grey card the drawings used */
.svc-shot--bare{border-radius:0;box-shadow:none;overflow:visible}
.svc-topic__card{display:flex;align-items:center;justify-content:center;min-height:clamp(320px,34vw,520px);padding:clamp(20px,3vw,48px);border-radius:clamp(18px,2vw,32px);background:#efefef}
.svc-shot img,.svc-topic__art .svc-shot img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill}
.js .svc-shot[data-reveal]{opacity:1;transform:translateZ(0)}
.js .svc-shot[data-reveal] img{clip-path:inset(100% 0 0 0);scale:1.12;transition:clip-path 1.3s var(--ease-out),scale 2s var(--ease-out)}
.js .svc-shot[data-reveal].is-in img{clip-path:inset(0 0 0 0);scale:1}
@media (hover:hover){
  .js .svc-shot[data-reveal].is-in:hover img{scale:1.03;transition:clip-path 1.3s var(--ease-out),scale 1.2s var(--ease-out)}
}
/* AI content: a draft in the WordPress editor that fills its card, the review buttons below the text */
.svc-topic__art--mock:has(.mk-wp){padding:clamp(14px,1.6vw,24px)}
.mk-wp{display:flex;flex-direction:column;align-self:stretch;width:100%;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.3);color:#1e1e1e;font-size:clamp(14px,1.05vw,16px)}
.mk-wp p{margin:0}
.mk-wp__bar{display:flex;align-items:center;gap:12px;height:52px;padding-right:14px;border-bottom:1px solid #e0e0e0;font-size:13px}
.mk-wp__logo{display:grid;place-items:center;flex:none;width:52px;height:52px;background:#1e1e1e;color:#fff;font-size:22px;font-weight:700}
.mk-wp__state{opacity:.6}
.mk-wp__spacer{flex:1}
.mk-wp__link{font-weight:600}
.mk-wp__publish{padding:8px 14px;border-radius:4px;background:#3858e9;color:#fff;font-weight:600}
.mk-wp__body{display:grid;flex:1;grid-template-columns:minmax(0,1fr) 34%}
.mk-wp__doc{display:grid;align-content:start;gap:14px;padding:clamp(18px,2.4vw,36px)}
.mk-wp__title{font-size:clamp(24px,2.3vw,36px);font-weight:760;line-height:1.05;letter-spacing:-.03em}
.mk-wp__doc p:not([class]){line-height:1.55}
.mk-wp__h2{font-size:clamp(17px,1.4vw,21px);font-weight:760;line-height:1.2}
.mk-wp__side{display:grid;align-content:start;gap:12px;padding:18px;border-left:1px solid #e0e0e0;font-size:13px}
.mk-wp__side-title{font-weight:760}
.mk-wp__side p:not(.mk-wp__side-title){display:grid;gap:2px}
.mk-wp__side span{opacity:.6}
.mk-wp__side .is-ok{color:#1f7a0c}
.mk-wp__review{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px clamp(18px,2.4vw,36px);border-top:1px solid #e0e0e0;background:#f6f7f7}
.mk-wp__review p{flex:1 1 200px;font-size:13px;font-weight:600;opacity:.7}
.mk-wp__review span{padding:12px 18px;border:1.5px solid rgba(0,0,0,.16);border-radius:10px;font-size:14px;font-weight:700}
.mk-wp__review .is-yes{border-color:#0b0b0b;background:#0b0b0b;color:#fff}
@media (max-width:1100px){
  .mk-wp__body{grid-template-columns:minmax(0,1fr)}
  .mk-wp__side{display:none}
}
/* Dispensary marketing: an example newsletter, open in the inbox, scrolling slowly to the end and back */
.svc-demo--newsletter .svc-demo__art{min-height:0}
.mk-news{width:100%;max-width:600px;margin:0;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.35);color:#0b0b0b}
.mk-news__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:14px 18px;border-bottom:1px solid #e6e6e6;font-size:13px;line-height:1.3}
.mk-news__avatar{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0b0b0b;color:#4dbd28;font-size:15px;font-weight:760}
.mk-news__from{font-weight:760}
.mk-news__time{opacity:.55}
.mk-news__subject{grid-column:2 / 4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.75}
.mk-news__body{--h:clamp(420px,40vw,600px);height:var(--h);overflow:hidden;background:#f4f5f2}
.mk-news__body img{display:block;width:100%;height:auto;animation:mk-news 30s ease-in-out infinite alternate}
@keyframes mk-news{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + var(--h)))}}
@media (hover:hover){
  .mk-news:hover .mk-news__body img{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .mk-news__body{overflow-y:auto}
  .mk-news__body img{animation:none}
}
/* A column of dots on the right, one per service page: the current one is green with its name, the others show
   their names when the column is hovered. Only with a mouse and a wide screen; the script moves it to the body */
.svc-dots{display:none}
@media (hover:hover) and (min-width:1001px){
  .svc-dots{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;z-index:60;display:block;translate:0 -50%;opacity:0;visibility:hidden;transition:opacity .5s var(--ease-out),visibility 0s linear .5s}
  .svc-dots.is-shown{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out)}
  .svc-dots ul{display:grid;justify-items:end;gap:18px;margin:0;padding:6px 0;list-style:none}
  .svc-dots a{display:flex;align-items:center;gap:12px;color:#0b0b0b;text-decoration:none}
  .svc-dots i{display:block;flex:none;width:13px;height:13px;border-radius:50%;background:#0b0b0b;opacity:.28;transition:opacity .3s,scale .3s var(--ease-out),background-color .3s}
  .svc-dots span{padding:8px 14px;border-radius:10px;background:#fff;box-shadow:0 8px 24px -12px rgba(0,0,0,.35);font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;translate:6px 0;pointer-events:none;transition:opacity .3s,translate .4s var(--ease-out)}
  .svc-dots a.is-current i{background:var(--green);opacity:1;scale:1.3}
  .svc-dots:hover span,.svc-dots a:focus-visible span,.svc-dots a.is-current span{opacity:1;translate:0 0}
  .svc-dots:hover span{pointer-events:auto}
  .svc-dots a:hover i{opacity:.8;scale:1.2}
}
/* Service pages. End */

/* The same cards as a band inside another page (home, Cannabis Web Design) */
.designs--band{padding-bottom:clamp(50px,7vw,110px)}
.designs__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,70px)}
.designs__head .display{margin:0}
.designs__intro{margin:0;max-width:20em;font-size:clamp(18px,1.7vw,28px);font-weight:560;line-height:1.12;letter-spacing:-.025em}
/* what kind of business the design is for, next to its name */
.dcard__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.dcard__tag{flex:none;padding:6px 12px;border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:620;letter-spacing:.14em;text-transform:uppercase;opacity:.75}

/* Website designs page: big squares, three to a row */
.designs{padding:clamp(40px,6vw,110px) var(--pad) clamp(20px,3vw,50px)}
.designs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);align-items:start}
.dcard{display:flex;flex-direction:column}
.dcard__frame{display:block;aspect-ratio:1;border-radius:28px;overflow:hidden;background:#0b0b0b;text-decoration:none}
.dcard__frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.dcard__frame:hover img,.dcard__frame:focus-visible img{transform:scale(1.04)}
.dcard__body{display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px) 4px 0}
.dcard__type{margin:0;font-size:14px;font-weight:560;opacity:.6}
.dcard__row{margin:8px 0 0}
.dcard__name{margin:0;font-size:clamp(34px,3.2vw,56px);font-weight:760;line-height:.9;letter-spacing:-.05em}
.dcard__desc{margin:14px 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.55}
.dcard__fit{margin:10px 0 0;font-size:clamp(15px,1.05vw,16px);font-weight:620}
.dcard__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(18px,2vw,26px)}
.designs__note{margin:clamp(26px,3vw,44px) 0 0;font-size:14px;opacity:.6}
.built{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,100px);align-items:start;padding:clamp(60px,8vw,140px) var(--pad)}
.built__title{margin:0;font-size:clamp(44px,6.4vw,124px);font-weight:760;line-height:.86;letter-spacing:-.05em}
.built__text{margin:clamp(18px,2vw,28px) 0 0;max-width:34em;font-size:clamp(17px,1.35vw,21px);line-height:1.5}
.built__h{margin:0;font-size:clamp(22px,1.8vw,28px);font-weight:700;letter-spacing:-.02em}
.built__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.built__list li{position:relative;padding-left:24px;font-size:clamp(16px,1.2vw,18px);line-height:1.45}
.built__list li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;background:#4dbd28}
@media (max-width:1000px){.designs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.built{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.designs__grid{grid-template-columns:minmax(0,1fr)}}

/* Gift page: the landing of the gift (today the cannabis marketing calendar), the offer with its form over a fan of the gift's pages */
.phero--gift{justify-content:center;min-height:min(100svh,1040px);padding-bottom:clamp(40px,7vh,90px)}
.gift{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,90px);align-items:center}
.gift__label{margin:0 0 clamp(16px,2.4vh,28px);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.phero__title--gift{font-size:clamp(52px,min(7.6vw,13svh),156px);line-height:.84}
.phero__title--gift .line>span{white-space:normal}
.gift__lead{max-width:24em;font-size:clamp(18px,1.6vw,28px)}
.gift__form{display:grid;gap:12px;max-width:660px;margin-top:clamp(26px,4.4vh,52px)}
.gift__row{display:flex;gap:12px;align-items:flex-end}
.gift__row .field{flex:1}
.gift__go{flex:none;padding:17px 30px;border:0;font-family:inherit;font-size:16px;cursor:pointer}
.gift__go:disabled{cursor:progress}
/* while the form is sending: the label says so and three dots pulse; the hover roll stays put */
.gift__go.is-sending .btn__label span,.gift__go.is-sending .btn__label::after{transform:none}
.gift__dots{display:inline-flex;font-style:normal}
.gift__dots i{font-style:normal;animation:gift-dot 1.2s infinite both}
.gift__dots i:nth-child(2){animation-delay:.2s}
.gift__dots i:nth-child(3){animation-delay:.4s}
@keyframes gift-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.gift__fine{margin:4px 0 0;max-width:38em;font-size:14px;line-height:1.5;opacity:.6}
.gift__fine a{color:inherit}
.gift__form--done .gift__hook{margin:0;font-size:clamp(30px,3vw,52px);font-weight:750;line-height:1;letter-spacing:-.03em}
.gift__form--done .gift__text{margin:0;max-width:32em;font-size:clamp(16px,1.2vw,19px);line-height:1.5;opacity:.8}
.gift__form--done .gift__to{margin:0;font-size:14px;color:rgba(255,255,255,.6)}
.gift__email{font-weight:600;color:#fff}
.gift__form--done .textlink{justify-self:start;margin-top:10px}
.gift__pages{position:relative;aspect-ratio:1/1.12;translate:clamp(-100px,-7vw,-40px) 0}
.gift__page{position:absolute;width:64%;height:auto;border-radius:14px;box-shadow:0 40px 80px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.16);transition:transform 1s var(--ease-out)}
.gift__page--back{left:0;top:9%;transform:rotate(-9deg)}
.gift__page--mid{left:17%;top:2%;transform:rotate(-2deg)}
.gift__page--front{left:35%;top:11%;transform:rotate(6deg)}
@media (hover:hover) and (pointer:fine){
  .gift__pages:hover .gift__page--back{transform:translate(-7%,3%) rotate(-14deg)}
  .gift__pages:hover .gift__page--mid{transform:translateY(-3%) rotate(-3deg)}
  .gift__pages:hover .gift__page--front{transform:translate(7%,3%) rotate(11deg)}
}
.gift__inside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(20px,3vw,56px);margin:clamp(44px,8vh,100px) 0 0;padding:0;list-style:none}
.gift__inside li{display:grid;align-content:start;gap:10px;font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:rgba(255,255,255,.72)}
.gift__inside b{font-size:clamp(22px,2vw,34px);font-weight:720;line-height:1;letter-spacing:-.03em;color:#fff}
.js .gift__label,.js .gift__form,.js .gift__inside{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out) .9s,transform .9s var(--ease-out) .9s}
.js .gift__label{transition-delay:.1s}
.js .gift__inside{transition-delay:1.1s}
.is-ready .gift__label,.is-ready .gift__form,.is-ready .gift__inside{opacity:1;transform:none}
.js .gift__page{opacity:0;translate:0 70px}
.is-ready .gift__page{opacity:1;translate:0 0;transition:opacity .9s var(--ease-out) var(--k,.5s),translate 1.3s var(--ease-out) var(--k,.5s),transform 1s var(--ease-out)}
.is-ready .gift__page--mid{--k:.62s}
.is-ready .gift__page--front{--k:.74s}
@media (prefers-reduced-motion:reduce){.gift__page,.is-ready .gift__page{transition:none}}
@media (max-width:900px){
  .phero--gift{min-height:0}
  .gift{grid-template-columns:minmax(0,1fr)}
  .gift__pages{width:min(100%,520px);aspect-ratio:1/1.02;margin:10px auto 0;translate:none}
  .gift__inside{grid-template-columns:minmax(0,1fr);margin-top:clamp(36px,6vh,60px)}
}
@media (max-width:560px){.gift__row{flex-wrap:wrap}.gift__go{width:100%;justify-content:center}}
/* Gift page. End */

/* Links inside running copy (service pages, the packs and the brand table of the home): the words keep their
   color and carry a thin underline. */
.svc-answer__a a,.svc-topic__text a,.svc-topic figcaption a,.pack__list a,.brandwork__note a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.svc-answer__a a:hover,.svc-topic__text a:hover,.svc-topic figcaption a:hover,.pack__list a:hover,.brandwork__note a:hover{text-decoration-thickness:2px}