/* SICC MEDIA · site system · built for WordPress, no dependencies */

:root{
  --void:#050505; --panel:#0C0C0C; --panel2:#141414; --line:#232323;
  --bone:#EBEBEB; --mute:#8F8F8F;
  --lime:#BCFF00; --pink:#FF2ECC; --cyan:#00E0FF; --purple:#B026FF; --orange:#FF6A00;
  --yellow:#FFC400;
  --acc:var(--lime);
  --disp:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --lab:"Anybody","Archivo Narrow",-apple-system,"Segoe UI Condensed",Roboto,sans-serif;
  /* Anybody is a variable font with a width axis. 72% is the condensed
     setting the earlier Sicc Media build used. */
  --lab-wdth:72;
  --pad:clamp(20px,5vw,64px);
  --maxw:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--disp);font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:3px}
::selection{background:var(--lime);color:#050505}

/* ---------- type ---------- */
.lab{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.24em;font-size:clamp(10px,.78vw,12px)}
.h-xl{font-size:clamp(46px,9.4vw,158px);line-height:.86;letter-spacing:-.045em;font-weight:800;margin:0}
.h-l{font-size:clamp(34px,5.6vw,86px);line-height:.94;letter-spacing:-.04em;font-weight:800;margin:0}
.h-m{font-size:clamp(25px,2.8vw,42px);line-height:1.04;letter-spacing:-.03em;font-weight:800;margin:0}
.h-s{font-size:clamp(19px,1.5vw,25px);line-height:1.18;letter-spacing:-.02em;font-weight:800;margin:0}
.lede{font-size:clamp(17px,1.5vw,23px);line-height:1.5;color:var(--mute);max-width:52ch;margin:0}
.mute{color:var(--mute)}
.acc{color:var(--acc)}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}

/* ---------- grain + glow ---------- */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.42;mix-blend-mode:overlay}
.glow{position:fixed;left:0;top:0;z-index:3;width:62vmax;height:62vmax;margin:-31vmax;pointer-events:none;
  border-radius:50%;filter:blur(90px);opacity:var(--glow-op,.26);mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,var(--lime),transparent 62%);
  transform:translate3d(var(--mx,50vw),var(--my,40vh),0);
  transition:opacity .45s var(--ease)}
@media(hover:none){.glow{display:none}}

/* ---------- nav ---------- */
.navwrap{position:sticky;top:0;z-index:50;container-type:scroll-state;container-name:nav}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);
  padding:18px var(--pad);max-width:var(--maxw);margin:0 auto;
  transition:padding .35s var(--ease)}
.nav::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:rgba(5,5,5,.74);
  backdrop-filter:blur(18px);border-bottom:1px solid transparent;opacity:0;z-index:0;
  transition:opacity .35s var(--ease),border-color .35s var(--ease)}
@container nav scroll-state(stuck: top){
  .nav::before{opacity:1;border-bottom-color:var(--line)}
  .nav{padding-block:11px}
}
.nav > *{position:relative;z-index:1}
.brand{font-weight:800;letter-spacing:-.05em;font-size:clamp(19px,1.5vw,23px);line-height:1;
  display:flex;align-items:center;gap:9px;margin-right:auto}
.brand i{width:11px;height:11px;background:var(--lime);border-radius:2px;
  animation:pulse 2.6s var(--ease) infinite;display:block}
@keyframes pulse{0%,100%{transform:scale(1);background:var(--lime)}50%{transform:scale(.62);background:var(--pink)}}
.navlinks{display:flex;gap:clamp(14px,1.8vw,30px)}
.navlinks a{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--mute);transition:color .2s;position:relative}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--c,var(--lime));transition:right .3s var(--ease)}
.navlinks a:nth-child(1){--c:var(--lime)}
.navlinks a:nth-child(2){--c:var(--pink)}
.navlinks a:nth-child(3){--c:var(--cyan)}
.navlinks a:nth-child(4){--c:var(--purple)}
.navlinks a:nth-child(5){--c:var(--orange)}
.navlinks a:hover{color:var(--c,var(--bone))}
.navlinks a:hover::after{right:0}
@media(max-width:860px){.navlinks{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;
  padding:13px 22px;border-radius:999px;border:1px solid var(--line);
  position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s,transform .18s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);
  transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover{color:#050505;border-color:var(--lime)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--lime);color:#050505;border-color:var(--lime)}
.btn.solid::before{background:#050505}
.btn.solid:hover{color:var(--lime)}
.btn.outline{background:#050505;color:var(--lime);border-color:var(--lime);border-width:2px}
.btn.outline::before{background:var(--lime)}
.btn.outline:hover{color:#050505;border-color:var(--lime)}
.btn.big{padding:18px 32px;font-size:13px}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,12vh,150px) 0 40px;position:relative;overflow:clip}
.hero .shell{width:100%}
.hero-eyebrow{display:flex;align-items:center;gap:12px;color:var(--lime);margin-bottom:clamp(18px,3vh,34px)}
.hero-eyebrow span{width:44px;height:1px;background:var(--lime);display:block}
.hero h1{margin-bottom:clamp(20px,3.4vh,38px)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal;
  animation:slamUp 1s var(--ease) both;animation-delay:calc(var(--i,0)*.085s + .1s)}
@keyframes slamUp{from{transform:translateY(105%) skewY(5deg);opacity:0}to{transform:none;opacity:1}}
/* "never": the letters go light blue, the strike stays hot pink and draws
   itself in. No outline, no X. The original gesture, just recoloured. */
.hero .strike{color:#7FD8FF;position:relative;white-space:nowrap}
.hero .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.085em;
  background:var(--pink);transform:scaleX(0);transform-origin:left;
  animation:strike .7s var(--ease) both;animation-delay:1.05s}
@keyframes strike{to{transform:scaleX(1)}}
.hero-sub{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,50px);align-items:flex-end;
  animation:fadeUp .9s var(--ease) both;animation-delay:.75s}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}
@keyframes fadeUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(74px);opacity:.28;pointer-events:none}
.blob.a{width:44vmax;height:44vmax;right:-14vmax;top:-12vmax;
  background:conic-gradient(from 0deg,var(--lime),var(--pink),var(--cyan),var(--lime));
  animation:spin 34s linear infinite}
.blob.b{width:30vmax;height:30vmax;left:-10vmax;bottom:-14vmax;
  background:radial-gradient(circle,var(--purple),transparent 66%)}
@keyframes spin{to{transform:rotate(360deg)}}

.scrollcue{position:absolute;left:var(--pad);bottom:26px;display:flex;align-items:center;gap:11px;color:var(--mute)}
.scrollcue i{display:block;width:1px;height:42px;background:linear-gradient(var(--lime),transparent);
  animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.ticker{border-block:1px solid var(--line);padding:16px 0;overflow:hidden;
  background:var(--panel);display:flex;gap:0;user-select:none}
.ticker ul{display:flex;gap:34px;margin:0;padding:0 17px;list-style:none;flex:none;
  animation:slide 34s linear infinite}
.ticker li{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(13px,1.5vw,19px);white-space:nowrap;display:flex;align-items:center;gap:34px}
.ticker li::after{content:"";width:7px;height:7px;background:var(--pink);
  transform:rotate(45deg);flex:none}
.ticker li:nth-child(even){color:var(--lime)}
@keyframes slide{to{transform:translateX(-100%)}}
.ticker:hover ul{animation-play-state:paused}

/* ---------- reveal (scroll-driven) ---------- */
.rv{--rv-y:36px}
@supports ((animation-timeline: view()) and (animation-range: 0% 100%)){
  @media (prefers-reduced-motion: no-preference){
    .rv{animation:rvIn 1s linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
    @keyframes rvIn{from{opacity:0;transform:translateY(var(--rv-y)) scale(.985)}to{opacity:1;transform:none}}
  }
}

/* ---------- scrollytelling: the four seconds ---------- */
.story{padding:clamp(80px,13vh,170px) 0}
.story .shell{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px)}
@media(max-width:900px){.story .shell{grid-template-columns:1fr}}
.story-pin{position:sticky;top:26vh;align-self:start}
@media(max-width:900px){.story-pin{position:static;top:auto;margin-bottom:26px}}
.story-num{font-size:clamp(90px,17vw,240px);line-height:.8;font-weight:800;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px var(--line);position:relative}
.story-num b{position:absolute;inset:0;color:var(--lime);-webkit-text-stroke:0;
  clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}
.story-beats{display:grid;gap:clamp(60px,14vh,180px)}
.beat{min-height:44vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.beat p{margin:0;font-size:clamp(19px,2vw,30px);line-height:1.34;letter-spacing:-.018em}
.beat p.small{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--mute)}
.beat .tag{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.24em;
  font-size:11px;color:var(--pink)}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.svc{background:var(--void);padding:clamp(22px,2.4vw,34px);min-height:clamp(180px,20vw,244px);
  display:flex;flex-direction:column;gap:9px;position:relative;isolation:isolate;overflow:hidden;
  transition:color .35s}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c,var(--lime));
  transform:translateY(100%);transition:transform .5s var(--ease)}
.svc:hover,.svc:focus-visible{color:#050505}
.svc:hover::before,.svc:focus-visible::before{transform:translateY(0)}
.svc:hover .svc-n,.svc:hover .svc-d{color:#050505}
.svc-n{font-family:var(--lab);font-weight:700;letter-spacing:.2em;font-size:11px;color:var(--mute);transition:color .35s}
.svc h3{margin:auto 0 0;font-size:clamp(20px,1.85vw,29px);letter-spacing:-.028em;line-height:1.04;font-weight:800}
.svc-d{font-size:14.5px;line-height:1.45;color:var(--mute);margin:0;transition:color .35s}
.svc-go{font-family:var(--lab);font-weight:700;letter-spacing:.18em;font-size:11px;
  display:flex;align-items:center;gap:7px;opacity:0;transform:translateX(-8px);
  transition:opacity .35s,transform .35s var(--ease)}
.svc:hover .svc-go{opacity:1;transform:none}

/* ---------- work rail ---------- */
.rail{display:flex;gap:18px;overflow-x:auto;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  padding:6px max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad))) 26px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-behavior:auto}
.rail.dragging *{pointer-events:none}
.rail::after{content:"";flex:0 0 1px}
.card{flex:0 0 clamp(262px,31vw,400px);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;transition:border-color .3s}
.card:hover{border-color:var(--c,var(--lime));box-shadow:0 0 0 1px var(--c,var(--lime)),0 22px 50px -26px var(--c,var(--lime))}
.card-b{position:relative;isolation:isolate;overflow:hidden;transition:color .4s var(--ease)}
.card-b::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c,var(--lime));
  transform:translateY(100%);transition:transform .5s var(--ease)}
.card:hover .card-b{color:#050505}
.card:hover .card-b::before{transform:translateY(0)}
.card:hover .card-b p,.card:hover .card-b .lab{color:#050505}
/* width:100% matters here. Without it the aspect-ratio resolves off the
   height the card gives it, so the panel came out 198px wide inside a
   400px card and the artwork only filled half the top. */
.card-top{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--c,var(--lime)) -10%,#050505 62%);display:grid;place-items:center}
.card-top b{font-size:clamp(27px,3.1vw,46px);letter-spacing:-.04em;font-weight:800;color:#050505;
  mix-blend-mode:overlay;text-align:center;padding:14px;line-height:.98}
.card-top::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 13px,rgba(0,0,0,.16) 13px 26px)}
.card-b{padding:17px 19px 21px;display:grid;gap:6px}
.card-b .lab{color:var(--c,var(--lime))}
.card-b h4{margin:0;font-size:19px;letter-spacing:-.02em;font-weight:800}
.card-b p{margin:0;font-size:14px;color:var(--mute);line-height:1.45}
@supports ((animation-timeline: view()) and (animation-range: 0% 100%)){
  @media (prefers-reduced-motion: no-preference){
    .rail .card{animation:railIn linear both;animation-timeline:view(inline);
      animation-range:entry 0% entry 86%}
    @keyframes railIn{from{opacity:.25;transform:scale(.9) rotate(-1.4deg)}to{opacity:1;transform:none}}
  }
}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stat{background:var(--void);padding:clamp(26px,3vw,46px) clamp(18px,2vw,30px);
  position:relative;isolation:isolate;overflow:hidden;transition:color .38s var(--ease)}
.stat::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c,var(--lime));
  transform:translateY(100%);transition:transform .5s var(--ease)}
.stat:hover{color:#050505}
.stat:hover::before{transform:translateY(0)}
.stat:hover > span{color:#050505}
.stat b{display:block;font-size:clamp(38px,5vw,74px);line-height:.92;letter-spacing:-.05em;font-weight:800}
.stat b span{display:inline;font:inherit;color:inherit;margin:0;letter-spacing:inherit}
.stat b .u{font-size:.44em;letter-spacing:-.02em;vertical-align:.52em;margin-left:.04em;font-weight:800}
.stat > span{display:block;margin-top:9px;color:var(--mute);font-size:14px;line-height:1.4}

/* ---------- library ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.pl{border:1px solid var(--line);border-radius:15px;padding:16px 15px;position:relative;overflow:hidden;
  isolation:isolate;transition:transform .3s var(--ease),border-color .3s var(--ease),color .38s var(--ease);
  box-shadow:0 0 0 0 rgb(0 0 0 / 0)}
.pl::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);
  transition:width .45s var(--ease)}
.pl::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);
  transform:translateY(100%);transition:transform .45s var(--ease)}
.pl:hover,.pl:focus-visible{transform:translateY(-5px);border-color:var(--c);color:#050505;
  box-shadow:0 0 0 1px var(--c),0 14px 34px -18px var(--c)}
.pl:hover::before,.pl:focus-visible::before{transform:translateY(0)}
.pl:hover::after,.pl:focus-visible::after{width:0}
.pl:hover span,.pl:focus-visible span{color:#050505}
.pl b{display:block;font-size:17px;letter-spacing:-.02em;font-weight:800;margin-bottom:3px;position:relative}
.pl span{font-family:var(--lab);font-weight:700;letter-spacing:.16em;font-size:10.5px;
  text-transform:uppercase;color:var(--mute);position:relative;transition:color .38s var(--ease)}

/* ---------- cta ---------- */
.cta{padding:clamp(80px,15vh,190px) 0;text-align:center;position:relative;overflow:clip}
.cta .h-xl{margin-bottom:clamp(20px,3vh,34px)}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,4vh,42px)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(40px,7vh,80px) 0 34px;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(20px,3vw,44px)}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h5{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--mute);margin:0 0 13px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.fgrid a:hover{color:var(--lime)}
.fbot{margin-top:clamp(30px,5vh,58px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mute);font-size:13px}

/* ---------- section head ---------- */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4vh,52px)}
.sh .lab{color:var(--acc)}
.sh h2{margin-top:11px}
.pad{padding:clamp(70px,12vh,150px) 0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- view transitions ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .32s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .42s var(--ease) both}
  @keyframes vtOut{to{opacity:0;transform:translateY(-14px)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(20px)}}
}

/* ---------- reduced motion kill switch ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero h1 .ln i,.hero-sub,.rv{opacity:1!important;transform:none!important}
  .hero .strike::after{transform:scaleX(1)!important}
  .glow,.blob{display:none}
  .ticker ul{animation:none}
}

/* ---------- fallback for browsers without scroll-driven animations ---------- */
.no-sda .rv{opacity:0;transform:translateY(36px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.no-sda .rv.in{opacity:1;transform:none}
.no-sda .rail .card{opacity:.45;transition:opacity .5s var(--ease)}
.no-sda .rail .card.in{opacity:1}

/* ================= SERVICE EXPANDER ================= */
.svc-grid{position:relative}
.svc{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;
  transition:color .35s var(--ease),max-height .55s var(--ease),opacity .35s var(--ease),
             transform .5s var(--ease),padding .5s var(--ease),border-color .35s}
.svc-go{transition:opacity .35s,transform .35s var(--ease)}

/* The grid paints itself grey and shows through a 1px gap, which is how the
   hairlines between tiles are drawn. With a card open that backfires twice:
   the collapsed tiles still hold row tracks, so a dozen 1px gaps stack into
   a visible grey band, and the grey also shows through the tiles while they
   are fading out. Neither hairline is wanted when only one tile is on
   screen, so close the gap and take the grey away. */
.svc-grid.open{gap:0;background:var(--void)}
.svc-grid.open .svc-panel{border-top:1px solid var(--line)}

/* every non-active tile shuts, top to bottom */
.svc-grid.open .svc{max-height:0;opacity:0;padding-block:0;transform:scaleY(.6);
  transform-origin:top;pointer-events:none;min-height:0;overflow:hidden;
  transition-delay:calc(var(--d,0)*38ms)}
.svc-grid.open .svc.active{max-height:none;opacity:1;transform:none;pointer-events:auto;
  padding:clamp(22px,2.4vw,34px);min-height:0;transition-delay:0ms;
  grid-column:1/-1;color:#050505}
.svc-grid.open .svc.active::before{transform:translateY(0)}
.svc-grid.open .svc.active .svc-n,.svc-grid.open .svc.active .svc-d{color:#050505}
.svc-grid.open .svc.active h3{margin-top:0}
.svc-grid.open .svc.active .svc-go{opacity:1;transform:none}

.svc-panel{grid-column:1/-1;background:var(--void);overflow:hidden;
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.svc-panel > div{min-height:0;overflow:hidden}
.svc-panel.show{grid-template-rows:1fr}
.sp{padding:clamp(24px,3vw,44px) clamp(22px,2.4vw,34px) clamp(28px,3.4vw,46px);
  border-top:1px solid var(--line)}
.sp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.sp-head p{margin:0}
.sp-close{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:17px;transition:.25s var(--ease)}
.sp-close:hover{background:var(--c);color:#050505;border-color:var(--c);transform:rotate(90deg)}
.sp-short p{margin:0 0 13px;max-width:62ch;font-size:clamp(16px,1.2vw,19px);line-height:1.55}
.sp-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,46px);margin-top:26px}
@media(max-width:760px){.sp-cols{grid-template-columns:1fr}}
.sp-cols h4{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--c);margin:0 0 14px}
.sp-cols ul,.sp-cols ol{margin:0;padding:0;list-style:none;display:grid;gap:11px;counter-reset:st}
.sp-cols li{font-size:15.5px;line-height:1.5;padding-left:26px;position:relative;color:var(--bone)}
.sp-cols ul li::before{content:"";position:absolute;left:0;top:.56em;width:9px;height:2px;background:var(--c)}
.sp-cols ol li{counter-increment:st}
.sp-cols ol li::before{content:"0" counter(st);position:absolute;left:0;top:.06em;
  font-family:var(--lab);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--c)}
.sp-fit{margin:26px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);font-size:15.5px;line-height:1.5;color:var(--mute);max-width:70ch}
.sp-fit b{color:var(--c);font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;display:block;margin-bottom:5px}
.sp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}

@media (prefers-reduced-motion: reduce){
  .svc-grid.open .svc{transition-delay:0ms!important}
  .svc-panel{transition:none}
}

/* ---------- hero splatter mark ---------- */
/* The mark, tucked into the bottom right and lit by the same flashlight
   that finds the figure. Two stacked copies: a dim one that is always
   faintly there, and a full-colour one revealed only inside the light.
   The artwork has a white background rather than an alpha channel, so
   mix-blend-mode:screen is what drops the white out. Both layers need it. */
/* The hero is taller than most screens, so "bottom right" measured off the
   hero itself would put the mark below the fold and nobody would ever find
   it with the light. Positioned off the viewport height instead, so it sits
   in the lower right of what you can actually see. */
.hero-mark{position:absolute;z-index:-1;right:3%;bottom:calc(100% - 100svh + 172px);
  width:min(34vw,330px);aspect-ratio:1100/876;pointer-events:none;
  transform:rotate(-4deg)}
.hero-mark img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;mix-blend-mode:screen}
.hero-mark .hm-dark{opacity:.17;filter:grayscale(.7) brightness(.8)}
.hero-mark .hm-lit{opacity:0;filter:saturate(1.25);
  -webkit-mask-image:radial-gradient(circle var(--hr,300px) at var(--hx,-999px) var(--hy,-999px),
    #000 0%,rgba(0,0,0,.72) 46%,transparent 74%);
  mask-image:radial-gradient(circle var(--hr,300px) at var(--hx,-999px) var(--hy,-999px),
    #000 0%,rgba(0,0,0,.72) 46%,transparent 74%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:mask-position;
  transition:opacity .25s var(--ease)}
html.x-live .hero-mark .hm-lit{opacity:.17}
@media(max-width:900px){.hero-mark{right:4%;bottom:calc(100% - 100svh + 140px);width:46vw}}
@supports ((animation-timeline: view()) and (animation-range: 0% 100%)){
  @media (prefers-reduced-motion: no-preference){
    .hero-mark{animation:markDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes markDrift{
      from{transform:translateY(16px) rotate(-7deg) scale(1.04)}
      to{transform:translateY(-14px) rotate(0deg) scale(.97)}
    }
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-mark .hm-dark{opacity:.12}
  .hero-mark .hm-lit{display:none}
}

/* =========================================================
   THE BLOG SECTION: scroll-driven inversion to light
   Every brand accent fails as TEXT on a light background
   (lime measures 1.07:1), so on light they are only ever
   used as fills behind black text, or swapped for an ink
   variant that passes. Numbers in README-motion.md.
   ========================================================= */
@property --fbg{syntax:"<color>";inherits:true;initial-value:#050505}
@property --ffg{syntax:"<color>";inherits:true;initial-value:#EBEBEB}
@property --fmute{syntax:"<color>";inherits:true;initial-value:#8F8F8F}
@property --fline{syntax:"<color>";inherits:true;initial-value:#232323}
@property --fpanel{syntax:"<color>";inherits:true;initial-value:#0C0C0C}
@property --lime-ink{syntax:"<color>";inherits:true;initial-value:#BCFF00}
@property --purple-fill{syntax:"<color>";inherits:true;initial-value:#B026FF}

.flip{background:var(--fbg);color:var(--ffg)}
.flip .lede,.flip .mute,.flip .sh .lab+*{color:var(--fmute)}
.flip .pl{background:#050505;border:2px solid var(--c);color:var(--c);border-radius:11px;
  padding:17px 18px;display:flex;flex-direction:column;justify-content:center;
  min-height:82px;gap:4px}
.flip .pl b{color:var(--c);margin:0;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.022em}
.flip .pl span{color:var(--c);opacity:.7;font-size:11px;letter-spacing:.18em;height:auto;overflow:visible;
  transition:color .38s var(--ease),opacity .38s var(--ease)}
.flip .pl::after{display:none}
.flip .pl:hover,.flip .pl:focus-visible{color:#050505;transform:translateY(-5px)}
.flip .pl:hover b,.flip .pl:focus-visible b{color:#050505}
.flip .pl:hover span,.flip .pl:focus-visible span{color:#050505;opacity:.78}
.flip .btn{border-color:var(--fline)}
.flip .rule{background:var(--fline)}
.flip .post{border-color:rgba(10,10,10,.14);background:var(--fpanel);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.6)}
.flip .post p{color:var(--fmute)}
.flip .posts{--fpanel:#F7F5EF}

/* the light palette, reached either by scroll or by the .lit fallback */
@keyframes flipLight{
  to{--fbg:#F4F1E9;--ffg:#0A0A0A;--fmute:#575248;--fline:#D9D4C6;--fpanel:#EAE6DA;
     --lime-ink:#546F00;--purple-fill:#BC49FF}
}
@supports ((animation-timeline: view()) and (animation-range: 0% 100%)){
  @media (prefers-reduced-motion: no-preference){
    .flip{animation:flipLight linear both;animation-timeline:view();
      animation-range:entry 18% entry 88%}
  }
}
.flip{transition:--fbg .55s linear,--ffg .55s linear,--fmute .55s linear,
  --fline .55s linear,--lime-ink .55s linear,--purple-fill .55s linear}
.flip.lit{--fbg:#F4F1E9;--ffg:#0A0A0A;--fmute:#575248;--fline:#D9D4C6;--fpanel:#EAE6DA;
  --lime-ink:#546F00;--purple-fill:#BC49FF}
.flip .sh .lab{color:var(--lime-ink)}
.flip .pl[style*="--purple"]{--c:var(--purple-fill)}


/* the blog section: artwork background, grey until the pointer arrives */
.flip{position:relative;overflow:clip}
.flip-art{position:absolute;inset:0;z-index:0;overflow:hidden}
.flip > .shell{position:relative;z-index:1}
.flip-art img{width:100%;height:100%;object-fit:cover;object-position:52% 34%;
  opacity:.88;transform:scale(1.05);
  filter:grayscale(1) contrast(1.15) brightness(.98);
  transition:filter 1.1s var(--ease),transform 1.6s var(--ease),opacity .9s var(--ease)}
.flip-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,241,233,.34) 0%,rgba(244,241,233,.06) 26%,
             rgba(244,241,233,.10) 72%,rgba(244,241,233,.46) 100%)}
.flip.warm .flip-art img{filter:grayscale(0) contrast(1.02) saturate(1.12) brightness(1);
  transform:scale(1);opacity:1}
@media (prefers-reduced-motion: reduce){ .flip-art img{transition:filter .3s linear} }

/* text sits in solid chips so it is legible on any part of the artwork */
.box{background:#050505;color:#fff;padding:.03em .22em .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.chip-lab{display:inline-flex;align-items:center;gap:9px;background:#050505;color:#fff;
  padding:8px 13px;border-radius:7px;font-family:var(--lab);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:11px}
.chip-lab em{font-style:normal;color:var(--lime)}
.flip .sh{align-items:flex-start}
.flip .sh h2{margin-top:0;line-height:1.24}
.flip .sh h2 .box{display:inline-block;margin-bottom:6px}

/* latest posts strip, so the section reads as a blog on sight */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px;margin-top:22px}
.post{border:1px solid var(--fline);border-radius:15px;padding:16px 17px;display:grid;gap:7px;
  position:relative;isolation:isolate;overflow:hidden;transition:color .38s var(--ease),border-color .3s}
.post::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);
  transform:translateY(100%);transition:transform .45s var(--ease)}
.post:hover,.post:focus-visible{color:#050505;border-color:var(--c);
  box-shadow:0 0 0 1px var(--c),0 16px 36px -22px var(--c)}
.post:hover::before,.post:focus-visible::before{transform:translateY(0)}
.post:hover p,.post:focus-visible p{color:#050505}
.post .kicker{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:10px;display:flex;align-items:center;gap:8px}
.post .kicker i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.post h4{margin:0;font-size:17px;line-height:1.2;letter-spacing:-.022em;font-weight:800}
.post p{margin:0;font-size:13.5px;line-height:1.45;color:var(--fmute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .38s var(--ease)}

@media (prefers-reduced-motion: reduce){ .flip{animation:none} }

/* ---------- cursor tooltip ---------- */
#tip{position:fixed;z-index:60;left:0;top:0;pointer-events:none;max-width:min(360px,72vw);
  background:#050505;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:13px;
  padding:13px 15px;font-size:14px;line-height:1.48;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.9);
  opacity:0;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.96);
  transform-origin:0 0;transition:opacity .2s var(--ease),scale .2s var(--ease)}
#tip.on{opacity:1;scale:1}
#tip b{display:block;font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:10px;color:var(--lime);margin-bottom:6px}
@media(hover:none){#tip{display:none}}

/* ---------- the four seconds, as a cycling deck ---------- */
.deck-wrap{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,5vw,72px);align-items:center}
@media(max-width:940px){.deck-wrap{grid-template-columns:1fr}}
.deck{position:relative;height:clamp(390px,46vw,470px);perspective:1400px}
.deck .card{position:absolute;inset:0;width:100%;flex:none;
  transition:transform .72s var(--ease),opacity .55s var(--ease),filter .6s var(--ease);
  will-change:transform,opacity}
.deck .card{--off:0}
.deck .card[data-s="0"]{transform:translate3d(0,0,0) rotate(0deg);opacity:1;z-index:4;filter:none}
.deck .card[data-s="1"]{transform:translate3d(4%,18px,-70px) rotate(2.2deg);opacity:.62;z-index:3;filter:saturate(.7)}
.deck .card[data-s="2"]{transform:translate3d(8%,34px,-140px) rotate(4.2deg);opacity:.34;z-index:2;filter:saturate(.45)}
.deck .card[data-s="3"]{transform:translate3d(12%,48px,-210px) rotate(6deg);opacity:.16;z-index:1;filter:saturate(.3)}
.deck .card[data-s="out"]{transform:translate3d(-46%,-8px,60px) rotate(-7deg);opacity:0;z-index:5}
.deck .card-top{aspect-ratio:auto;height:52%}
.deck .card-top b{font-size:clamp(66px,8vw,116px);letter-spacing:-.06em}
.deck .card-b{padding:20px 22px 24px;gap:9px}
.deck .card-b h4{font-size:clamp(18px,1.6vw,23px);line-height:1.16}
.deck .card-b p{font-size:14.5px;line-height:1.5}

.deck-ui{display:flex;align-items:center;gap:14px;margin-top:22px}
.dots{display:flex;gap:7px;margin-right:auto}
.dots button{width:30px;height:4px;border-radius:99px;background:var(--line);
  transition:background .3s,width .35s var(--ease)}
.dots button[aria-current="true"]{background:var(--c-active,var(--lime));width:46px}
.deck-arrow{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:16px;transition:.25s var(--ease)}
.deck-arrow:hover{background:var(--lime);color:#050505;border-color:var(--lime)}
.deck-copy .lede{margin-bottom:18px}
@media (prefers-reduced-motion: reduce){ .deck .card{transition:opacity .2s linear} }

/* buttons and loose text need a solid backing over the artwork */
.flip .btn{background:#050505;color:#fff;border-color:#050505}
.flip .btn.outline{color:var(--lime);border-color:var(--lime)}
.flip .btn::before{background:var(--lime)}
.flip .btn:hover{color:#050505;border-color:var(--lime)}
.flip .btn.solid{background:var(--lime);color:#050505;border-color:var(--lime)}
.flip .btn.solid::before{background:#050505}
.flip .btn.solid:hover{color:var(--lime)}
.flip .chip-note{background:rgba(5,5,5,.82);color:#fff;padding:7px 12px;border-radius:7px;font-size:13px}

/* ---------- pillar artwork: the background follows what you hover ---------- */
.flip-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 34%;opacity:0;transition:opacity .55s var(--ease),
  filter 1.1s var(--ease),transform 1.6s var(--ease)}
.flip-art .art-base{opacity:.88}
.flip.warm .flip-art .art-base{opacity:1}
.flip[data-art] .flip-art .art-base{opacity:0}
.flip[data-art="start-here"] .art-p[data-p="start-here"],
.flip[data-art="get-found"] .art-p[data-p="get-found"],
.flip[data-art="get-booked"] .art-p[data-p="get-booked"],
.flip[data-art="get-paid"] .art-p[data-p="get-paid"],
.flip[data-art="keep-clients"] .art-p[data-p="keep-clients"],
.flip[data-art="scale-and-automate"] .art-p[data-p="scale-and-automate"]{
  opacity:1;filter:none;transform:scale(1)}
.flip-art .art-p{filter:saturate(1.05);transform:scale(1.04)}

/* ================= CROSSHAIR CURSOR =================
   Only switched on by JS (html.x-on), so if the script
   never runs the person still has a normal pointer. */
html.x-on,html.x-on *{cursor:none}
html.x-on input,html.x-on textarea,html.x-on select{cursor:auto}

.xhair,.xring{position:fixed;left:0;top:0;z-index:70;pointer-events:none;
  opacity:0;transition:opacity .25s var(--ease)}
html.x-live .xhair,html.x-live .xring{opacity:1}

.xhair{transform:translate3d(var(--cx,-200px),var(--cy,-200px),0)}
.xhair i{position:absolute;display:block;background:var(--xc,#BCFF00);
  transition:transform .3s var(--ease),opacity .25s var(--ease),background .3s var(--ease)}
.xh-n{width:1.6px;height:11px;left:-.8px;top:-18px}
.xh-s{width:1.6px;height:11px;left:-.8px;top:7px}
.xh-w{width:11px;height:1.6px;top:-.8px;left:-18px}
.xh-e{width:11px;height:1.6px;top:-.8px;left:7px}
.xh-dot{width:4px;height:4px;border-radius:50%;left:-2px;top:-2px}

.xring{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid var(--xc,#BCFF00);opacity:0;
  transform:translate3d(var(--rx,-200px),var(--ry,-200px),0) scale(var(--rs,1));
  transition:border-color .3s var(--ease),opacity .25s var(--ease)}
html.x-live .xring{opacity:.42}

/* over anything clickable: ring opens, ticks swing out and turn 45 degrees */
html.x-hot .xh-n{transform:translateY(-7px) rotate(45deg)}
html.x-hot .xh-s{transform:translateY(7px) rotate(45deg)}
html.x-hot .xh-w{transform:translateX(-7px) rotate(45deg)}
html.x-hot .xh-e{transform:translateX(7px) rotate(45deg)}
html.x-hot .xh-dot{transform:scale(.5);opacity:.5}
html.x-hot .xring{--rs:1.5;opacity:.85}
html.x-down .xring{--rs:.72;opacity:1}
html.x-down .xh-dot{transform:scale(1.6)}

/* over the blog artwork the lime disappears, so the reticle goes black */
html.x-dark{--xc:#050505}
html.x-dark .xring{border-color:#050505}
html.x-dark .xhair i{background:#050505}

@media (prefers-reduced-motion: reduce){
  .xhair i,.xring{transition:opacity .2s linear}
}
@media (hover:none),(pointer:coarse){
  .xhair,.xring{display:none}
  html.x-on,html.x-on *{cursor:auto}
}

/* ---------- hero: the figure, and the flashlight that finds her ---------- */
.hero-fig{position:absolute;right:-4%;top:0;bottom:0;width:min(58vw,760px);
  z-index:-1;pointer-events:none;overflow:hidden}
/* framed on her head and face: in the source those sit at roughly 62%
   across, so that is where the crop is centred */
.hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 26%}
.hero-fig .hf-dark{filter:grayscale(1) brightness(.34) contrast(1.15);opacity:.62}
.hero-fig .hf-lit{filter:saturate(1.15) contrast(1.04);opacity:0;
  -webkit-mask-image:radial-gradient(circle var(--hr,300px) at var(--hx,-999px) var(--hy,-999px),
    #000 0%,rgba(0,0,0,.72) 46%,transparent 74%);
  mask-image:radial-gradient(circle var(--hr,300px) at var(--hx,-999px) var(--hy,-999px),
    #000 0%,rgba(0,0,0,.72) 46%,transparent 74%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:mask-position}
html.x-live .hero-fig .hf-lit{opacity:1}
.hero-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--void) 0%,rgba(5,5,5,.72) 26%,transparent 62%)}
@media(max-width:900px){.hero-fig{width:100%;right:0;opacity:.5}
  .hero-fig::after{background:linear-gradient(180deg,rgba(5,5,5,.5),var(--void) 78%)}}
@media (prefers-reduced-motion: reduce){.hero-fig .hf-lit{display:none}}

/* ---------- featured post cards expand in place, like the services ---------- */
.posts{position:relative}
.post{text-align:left;width:100%;font:inherit;cursor:pointer;
  transition:color .38s var(--ease),border-color .3s,max-height .55s var(--ease),
             opacity .35s var(--ease),transform .5s var(--ease),padding .5s var(--ease)}
.posts.open .post{max-height:0;opacity:0;padding-block:0;transform:scaleY(.6);
  transform-origin:top;pointer-events:none;overflow:hidden;
  transition-delay:calc(var(--d,0)*38ms)}
.posts.open .post.active{max-height:none;opacity:1;transform:none;pointer-events:auto;
  padding:16px 17px;grid-column:1/-1;color:#050505;transition-delay:0ms}
.posts.open .post.active::before{transform:translateY(0)}
.posts.open .post.active p,.posts.open .post.active .kicker{color:#050505}

.post-panel{grid-column:1/-1;background:#050505;border:1px solid var(--c);border-radius:15px;
  overflow:hidden;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease)}
.post-panel > div{min-height:0;overflow:hidden}
.post-panel.show{grid-template-rows:1fr}
.pp{padding:clamp(22px,3vw,34px);color:var(--bone)}
.pp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.pp-head .lab{color:var(--c)}
.pp h3{margin:8px 0 0;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.026em;
  line-height:1.1;font-weight:800;color:#fff}
.pp-close{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:17px;color:var(--bone);transition:.25s var(--ease)}
.pp-close:hover{background:var(--c);color:#050505;border-color:var(--c);transform:rotate(90deg)}
.pp .tldr{margin:16px 0;background:#0C0C0C;border:1px solid var(--line);border-left:4px solid var(--c);
  border-radius:0 12px 12px 0;padding:14px 16px;font-size:15.5px;line-height:1.55;color:var(--bone)}
.pp .tldr b{display:block;font-family:var(--lab);letter-spacing:.2em;font-size:11px;
  color:var(--c);text-transform:uppercase;margin-bottom:5px}
.pp-body p{margin:0 0 13px;font-size:15.5px;line-height:1.6;color:var(--bone);max-width:68ch}
.pp-body h4{margin:20px 0 7px;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.018em}
.pp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
@media (prefers-reduced-motion: reduce){
  .posts.open .post{transition-delay:0ms!important}
  .post-panel{transition:none}
}

/* ---------- Proof rail: cards expand in place ---------- */
.card{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;padding:0;
  transition:border-color .3s,box-shadow .3s,opacity .35s var(--ease),
             transform .5s var(--ease),max-width .55s var(--ease)}
.rail.open .card{max-width:0;opacity:0;flex-basis:0;margin:0;border-width:0;
  pointer-events:none;overflow:hidden;transition-delay:calc(var(--d,0)*38ms)}
.rail.open .card.active{max-width:100%;opacity:1;flex:1 1 100%;pointer-events:auto;
  border-width:1px;transition-delay:0ms;border-color:var(--c)}
.rail.open{scroll-snap-type:none;cursor:default}
.card-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.card-top b{position:relative;z-index:0}

.work-panel{flex:0 0 100%;max-width:100%;border:1px solid var(--c);border-radius:20px;
  background:var(--panel);overflow:hidden;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease)}
.work-panel > div{min-height:0;overflow:hidden}
.work-panel.show{grid-template-rows:1fr}
.wp{padding:clamp(22px,3vw,36px)}
.wp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.wp-head .lab{color:var(--c)}
.wp h3{margin:8px 0 0;font-size:clamp(24px,3vw,40px);letter-spacing:-.035em;line-height:1;font-weight:800}
.wp-close{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:17px;transition:.25s var(--ease)}
.wp-close:hover{background:var(--c);color:#050505;border-color:var(--c);transform:rotate(90deg)}
.wp > .wp-body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,44px);margin-top:18px}
@media(max-width:760px){.wp > .wp-body{grid-template-columns:1fr}}
.wp-body p{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--mute);max-width:56ch}
.wp-body h4{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--c);margin:0 0 12px}
.wp-body ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.wp-body li{font-size:15px;line-height:1.45;padding-left:24px;position:relative}
.wp-body li::before{content:"";position:absolute;left:0;top:.56em;width:9px;height:2px;background:var(--c)}
.wp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
@media (prefers-reduced-motion: reduce){
  .rail.open .card{transition-delay:0ms!important}.work-panel{transition:none}
}

/* == viewport clip, html as well as body == */
/* site.css already clipped the BODY, but body's overflow only propagates to
   the viewport when html is visible, and in practice it did not: the page
   could still be dragged 64px sideways by the hero figure and the ticker
   belt. Putting it on html as well is what actually stops it.
   clip, not hidden: hidden makes a scroll container and kills position:sticky. */
html{overflow-x:clip}

/* ---------- selected work inside a service panel ---------- */
.sp-work{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sp-work h4{font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;color:var(--c,var(--lime));margin:0 0 14px}
.sp-wgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.sp-w{display:flex;flex-direction:column;gap:5px;padding:15px 16px;position:relative;
  background:var(--panel);border:1px solid var(--line);color:inherit;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
a.sp-w:hover{border-color:var(--c,var(--lime));transform:translateY(-3px);background:var(--panel2)}
.sp-w b{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sp-w span{font-size:13px;line-height:1.5;color:var(--mute)}
.sp-w i{position:absolute;right:14px;top:13px;font-style:normal;color:var(--c,var(--lime));
  opacity:0;transform:translateX(-4px);transition:.3s var(--ease)}
a.sp-w:hover i{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){a.sp-w:hover{transform:none}}

/* ---------- about: the timeline ---------- */
.tl{position:relative;margin:44px 0 0;padding-left:34px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--lime),var(--pink),var(--cyan),var(--purple),var(--orange))}
.tl-item{position:relative;padding:0 0 38px}
.tl-item::before{content:"";position:absolute;left:-30px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--c,var(--lime));
  box-shadow:0 0 0 4px var(--void),0 0 16px var(--c,var(--lime))}
.tl-when{font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;color:var(--c,var(--lime));display:block;margin-bottom:6px}
.tl-what{font-size:clamp(19px,2vw,27px);font-weight:800;letter-spacing:-.022em;
  line-height:1.14;margin:0 0 4px}
.tl-where{font-size:14px;color:var(--mute);margin:0 0 9px}
.tl-item p.tl-body{font-size:15.5px;line-height:1.62;color:#C9C9C9;margin:0;max-width:62ch}
.tl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tl-tags span{font-family:var(--lab);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:4px 9px}

/* ---------- contact ---------- */
.ct-grid{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:1.15fr .85fr;
  margin-top:40px;align-items:start}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr}}
.ct-box{background:var(--panel);border:1px solid var(--line);padding:clamp(20px,2.4vw,32px)}
.ct-box h3{font-size:clamp(18px,1.7vw,23px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.ct-box > p{color:var(--mute);font-size:14.5px;line-height:1.55;margin:0 0 18px}
.ct-rows{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.ct-row{display:flex;align-items:baseline;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.ct-row:first-child{border-top:0}
.ct-row b{font-family:var(--lab);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:10px;color:var(--mute);min-width:84px;flex:none}
.ct-row a,.ct-row span{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ct-row a:hover{color:var(--acc)}
.ct-note{margin-top:18px;padding:14px 16px;border-left:2px solid var(--lime);
  background:var(--panel2);font-size:13.5px;line-height:1.55;color:var(--mute)}

/* =========================================================
   THREE GREY GHOSTS, ALL THE SAME FAMILY
   Each one is something that is supposed to be invisible
   still taking up space and letting a background show.
   ========================================================= */

/* 1. The thin coloured lines under the blog posts.
   A closed panel collapses its content with grid-template-rows:0fr, but the
   1px border survives that, so each closed panel left a 2px coloured line
   lying across the page. Three panels, three lines. */
.post-panel:not(.show){border-width:0}

/* 2. The empty rectangles with coloured rims in Proof.
   Same closed panel, but in the rail it is a flex item at flex:0 0 100%,
   so instead of collapsing it stretched to the rail's full height and read
   as an empty box with a neon outline. Take it out of the flow entirely. */
.work-panel:not(.show){border-width:0;flex-basis:0;max-width:0;margin:0;min-width:0}

/* 3. The wide grey blocks in the service grid.
   The grid paints itself grey and shows through 1px gaps to draw the
   hairlines. That works until the last row is short: ten services in four
   columns leaves two empty cells, and an empty cell is just a grey block.
   So the grid goes black and each tile draws its own hairline instead. An
   empty cell now shows nothing, because there is nothing behind it. */
.svc-grid{background:var(--void)}
.svc{box-shadow:0 0 0 1px var(--line)}
.svc:hover,.svc:focus-visible{box-shadow:0 0 0 1px var(--c,var(--lime))}

/* =========================================================
   HAMBURGER NAV, mobile and desktop
   The menu was desktop-only links before, which meant a phone
   had no navigation at all. Now everything lives behind one
   button, and the audit CTA floats so it is always reachable.
   ========================================================= */
.burger{
  margin-left:auto;width:52px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:14px;background:rgba(5,5,5,.5);
  cursor:pointer;transition:border-color .3s var(--ease),transform .2s var(--ease),
             background .3s var(--ease);
}
.burger svg{width:30px;height:24px;overflow:visible}
.burger .bun-top{fill:var(--orange)}
.burger .salad{fill:var(--lime)}
.burger .patty{fill:var(--pink)}
.burger .bun-bot{fill:var(--orange)}
.burger svg > *{transition:transform .32s var(--ease),fill .32s var(--ease)}
.burger:hover{border-color:var(--lime);background:rgba(5,5,5,.8)}
/* on hover the burger comes apart, because of course it does */
.burger:hover .bun-top{transform:translateY(-3px)}
.burger:hover .bun-bot{transform:translateY(3px)}
.burger:hover .salad{fill:var(--cyan)}
.burger[aria-expanded="true"]{border-color:var(--pink)}

/* the panel */
.menu-veil{position:fixed;inset:0;z-index:90;background:rgba(5,2,12,.62);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .35s var(--ease)}
.menu-veil.on{opacity:1}
.menu{
  position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(86vw,360px);
  display:flex;flex-direction:column;gap:10px;padding:76px 22px 28px;
  background:linear-gradient(200deg,rgba(38,8,58,.93),rgba(8,4,16,.96));
  backdrop-filter:blur(22px);border-left:1px solid rgba(176,38,255,.35);
  transform:translateX(102%);transition:transform .42s var(--ease);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);
}
.menu.on{transform:none}
.menu[hidden],.menu-veil[hidden]{display:none}

.menu-x{position:absolute;top:18px;right:20px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:none;color:var(--bone);
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:.25s var(--ease)}
.menu-x:hover{background:var(--pink);color:#050505;border-color:var(--pink);transform:rotate(90deg)}

.menu-list{display:flex;flex-direction:column;gap:4px}
.menu-list a{
  --c:var(--lime);
  display:flex;align-items:center;gap:15px;padding:15px 16px;border-radius:14px;
  color:var(--bone);border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),transform .25s var(--ease);
}
.menu-list a:hover,.menu-list a:focus-visible,.menu-list a.tapped{
  background:rgba(255,255,255,.05);border-color:var(--c);color:var(--c);transform:translateX(-4px)}
.mi{flex:none;width:30px;height:30px;display:grid;place-items:center}
.mi svg{width:26px;height:26px;fill:none;stroke:var(--c);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s var(--ease)}
.menu-list a b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.menu-audit{margin-top:auto;width:100%}

/* On a phone the labels stay out of the way until you touch one. Hold to
   read it without navigating, tap to go. */
@media (hover:none){
  .menu{width:min(78vw,300px)}
  .menu-list a b{
    max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
    transition:max-width .3s var(--ease),opacity .3s var(--ease);
  }
  .menu-list a.tapped b{max-width:220px;opacity:1}
}

/* the floating audit button */
.audit-float{
  position:fixed;right:clamp(14px,2.4vw,26px);top:66%;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 20px;border-radius:999px;
  background:var(--lime);color:#050505;border:2px solid #050505;
  font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;
  box-shadow:0 10px 34px -10px rgba(188,255,0,.65);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.audit-float:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 44px -12px rgba(188,255,0,.85)}
.audit-float span{font-size:14px;line-height:1}
@media(max-width:640px){
  .audit-float{padding:12px 16px;font-size:11px;top:auto;bottom:18px}
}
@media (prefers-reduced-motion: reduce){
  .menu,.menu-veil,.burger svg > *,.audit-float{transition:none}
}

/* == Anybody condensed width == */
/* Anybody carries its condensed look on a width axis rather than in a
   separate family name, so declaring the family is not enough: anything
   set in it also has to ask for the narrow width. */
.lab,.sx-kicker,.sx-strip-lab,.sx-chip,.sx-rt,.tl-when,.tl-tags span,.ct-row b,
.sp-work h4,.wp-body h4,.pp .tldr b,.audit-float,.menu-list a b,.btn,
.svc-n,.svc-go,.lcard-meta,.hero-eyebrow,.scrollcue,.ticker li,
.wp-block-post-date,.wp-block-post-terms,.sx-pillar-n,.sx-pillar-go,
.sx-bar .sx-nav a,.sx-foot,.wp-block-query-pagination{
  font-stretch:72%;
  font-variation-settings:"wdth" var(--lab-wdth,72);
}

/* ---------- nav: words on desktop, burger on mobile ----------
   The burger was on both for a while. It only belongs where the words
   cannot fit. The floating audit button likewise: on desktop the one in
   the bar is enough, so the floater only appears on small screens. */
.burger{display:none}
.navlinks{display:flex}
.nav-audit{display:inline-flex}
@media(max-width:900px){
  .navlinks{display:none}
  .nav-audit{display:none}
  .burger{display:grid}
}
@media(min-width:901px){
  .audit-float{display:none}
}

/* =========================================================
   SERVICE GRID: colour at rest, not only on hover
   Every tile already carried its own --c, but nothing showed it
   until you hovered, which on a phone is never. So the colour is
   now always on: a bar across the top and a tinted hairline.
   ========================================================= */
.svc{
  border-top:3px solid var(--c,var(--lime));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c,var(--lime)) 26%,var(--line));
}
.svc-n{color:var(--c,var(--lime));opacity:.9}
.svc:hover,.svc:focus-visible{box-shadow:0 0 0 1px var(--c,var(--lime))}
.svc:hover .svc-n{color:#050505;opacity:1}

/* ---------- phones: alternate the alignment so it is not one long
     column of identical black boxes, and drop the subtext so each
     card is a name and a colour rather than a paragraph ---------- */
@media(max-width:720px){
  .svc-grid{grid-template-columns:1fr;gap:10px;border:0;background:none}
  .svc{
    min-height:0;padding:20px 20px 22px;
    border:1px solid color-mix(in srgb,var(--c,var(--lime)) 34%,var(--line));
    border-top:3px solid var(--c,var(--lime));
    border-radius:14px;box-shadow:none;
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--c,var(--lime)) 11%,var(--panel)) 0%,
      var(--panel) 62%);
  }
  .svc .svc-d{display:none}
  .svc h3{font-size:clamp(21px,6.2vw,27px);margin:6px 0 0}
  /* The checkerboard: odd cards sit left, even cards step right. Width has
     to come down with the offset, otherwise a margin just shoves a full
     width card off the edge of the screen. */
  .svc:nth-child(odd){width:86%;margin-right:auto;text-align:left}
  .svc:nth-child(even){width:86%;margin-left:auto;text-align:right}
  .svc:nth-child(even) .svc-go{align-self:flex-end}
  .svc-grid.open .svc.active{width:100%}
  .svc-go{opacity:1;transform:none;color:var(--c,var(--lime))}
  /* an open card goes full width so nothing is cramped while reading */
  .svc-grid.open .svc.active{margin:0;text-align:left;border-radius:14px 14px 0 0}
  .svc-grid.open .svc-panel{border-radius:0 0 14px 14px}
}

/* ---------- the close button, obvious rather than polite ----------
   On a phone the only way out used to be the browser back button, which
   leaves the site entirely. This one is hard to miss. */
.sp-close{
  width:46px;height:46px;border:2px solid var(--c,var(--lime));
  background:var(--c,var(--lime));color:#050505;font-size:22px;font-weight:800;
}
.sp-close:hover{background:#050505;color:var(--c,var(--lime))}
@media(max-width:720px){
  .sp-close{
    position:sticky;top:10px;z-index:5;
    width:100%;height:auto;border-radius:12px;padding:13px 0;
    font-family:var(--lab);font-size:13px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
  }
  .sp-close::after{content:" Close"}
  .sp-close:hover{transform:none}
  .sp-head{flex-direction:column-reverse;align-items:stretch;gap:14px}
}

/* ---------- the audit, in a modal ---------- */
.aud{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(10px,2.5vw,32px)}
/* An author rule beats the browser's own [hidden]{display:none}, so without
   this the closed modal stays laid out at z-index 120 across the whole
   viewport and silently swallows every click on the page. */
.aud[hidden]{display:none}
.aud-veil{position:absolute;inset:0;background:rgba(3,1,8,.78);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease)}
.aud.on .aud-veil{opacity:1}
.aud-box{position:relative;width:min(1100px,100%);height:min(88vh,900px);
  display:flex;flex-direction:column;background:var(--void);
  border:2px solid var(--lime);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(188,255,0,.35);
  transform:translateY(14px) scale(.985);opacity:0;
  transition:transform .38s var(--ease),opacity .32s var(--ease)}
.aud.on .aud-box{transform:none;opacity:1}
.aud-bar{flex:none;display:flex;align-items:center;gap:14px;padding:11px 12px 11px 18px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.aud-tag{font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;color:var(--lime);margin-right:auto;
  font-stretch:72%;font-variation-settings:"wdth" var(--lab-wdth,72)}
.aud-new{font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--mute);
  font-stretch:72%;font-variation-settings:"wdth" var(--lab-wdth,72)}
.aud-new:hover{color:var(--lime)}
.aud-x{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:10px;
  color:var(--bone);font-size:21px;line-height:1;display:grid;place-items:center;
  transition:.22s var(--ease)}
.aud-x:hover{background:var(--pink);color:#050505;border-color:var(--pink);transform:rotate(90deg)}
.aud-load{position:absolute;inset:52px 0 0 0;display:grid;place-items:center;
  font-family:var(--lab);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-size:11px;color:var(--mute);pointer-events:none;
  font-stretch:72%;font-variation-settings:"wdth" var(--lab-wdth,72)}
.aud.ready .aud-load{display:none}
.aud-frame{flex:1;width:100%;border:0;background:var(--void);opacity:0;transition:opacity .35s}
.aud.ready .aud-frame{opacity:1}
@media(max-width:640px){
  .aud{padding:0}
  .aud-box{width:100%;height:100%;border-radius:0;border-width:0;border-top:2px solid var(--lime)}
}
@media (prefers-reduced-motion: reduce){
  .aud-veil,.aud-box,.aud-frame{transition:none}
}

/* =========================================================
   THE BLOG SECTION, three fixes
   ========================================================= */

/* 1. The eyebrows vanished into the artwork. Size alone did not fix it:
      the section animates from dark to light, so any single text colour is
      illegible in one of the two states. They carry their own black plate
      now, which reads against anything behind them, with neon type on top
      and a slight angle so they look like signage rather than small print. */
.flip .chip-lab{
  font-size:clamp(12px,1.3vw,17px);
  letter-spacing:.14em;
  color:var(--lime);
  background:#050505;
  padding:9px 15px 8px;
  border-radius:4px;
  border-left:3px solid var(--lime);
  transform:rotate(-1.4deg);transform-origin:left center;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(188,255,0,.28),
             0 0 26px -4px rgba(188,255,0,.55),
             6px 6px 0 rgba(0,0,0,.45);
  text-shadow:0 0 14px rgba(188,255,0,.5);
}
/* the second one leans the other way, so they do not read as a mistake */
.flip .posts-lab.chip-lab,.flip .chip-lab + * .chip-lab{transform:rotate(1.2deg)}

/* 2. Three articles in an auto-fit grid: the browser made as many 248px
      columns as would fit, so three posts scattered across four or five
      slots and left holes. Three posts want three columns. */
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.posts{grid-template-columns:1fr}}

/* 3. Phones: the whole section used to invert to light, animate artwork and
      run a scroll-driven colour flip all at once, which is what made it jump
      and stutter while scrolling. On a small screen it holds still: black and
      white artwork, the words, and one obvious way in.

      The switch is on WIDTH, not on hover. A touch laptop reports hover:none
      at 1400px wide, and using that to pick a layout handed a full-size
      screen the phone version. */
.flip-cta{display:none}
@media(max-width:720px){
  .flip-art{position:absolute;inset:0;opacity:.28}
  .flip .posts{display:none}
  .flip .pl{margin-bottom:6px}
  .flip-cta{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:22px;padding:17px 20px;border-radius:14px;
    background:var(--lime);color:#050505;
    font-family:var(--lab);font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;font-size:13px;
    font-stretch:72%;font-variation-settings:"wdth" var(--lab-wdth,72);
  }
  .flip-cta b{font-size:15px;letter-spacing:.06em}
}
/* Motion is a separate question from layout: calm it wherever there is no
   real pointer, whatever the screen size. */
@media(hover:none){
  .flip{animation:none !important}
  .flip-art img{filter:grayscale(1) contrast(1.06) brightness(.6);
    transition:filter .5s var(--ease)}
  .flip.lit .flip-art img{filter:grayscale(0) contrast(1.02) brightness(.85)}
}
}

/* =========================================================
   STORE CARDS: the shop scrolls inside the card
   A logo sitting in a box tells you nothing about whether the
   store is any good. A page that scrolls does. The tall capture
   travels upward on hover, and on touch it loops by itself so
   the card is not dead on a phone.
   ========================================================= */
.card.is-store .card-top{background:#0a0a0a}
.ui-scroll{position:absolute;inset:0;overflow:hidden;display:block}
.ui-shot{
  position:absolute;top:0;left:0;width:100%;height:auto;
  transform:translateY(0);
  transition:transform 6s linear;   /* a page scrolls at a steady rate */
}
/* travel far enough to show the page, never past its own end */
.card.is-store:hover .ui-shot,
.card.is-store:focus-visible .ui-shot{
  transform:translateY(calc(-100% + 100px));
  transition-duration:9s;
}
.ui-hint{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--lab);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:9.5px;color:#050505;
  background:var(--c,var(--lime));padding:5px 9px;border-radius:3px;
  font-stretch:72%;font-variation-settings:"wdth" var(--lab-wdth,72);
  opacity:.92;transition:opacity .3s var(--ease);
}
.card.is-store:hover .ui-hint{opacity:0}
/* the brand mark, down in the dark half where it belongs */
.card-mark{
  height:26px;width:auto;max-width:150px;object-fit:contain;
  margin-bottom:9px;opacity:.95;
}
/* Touch has no hover, so the page walks by itself, slowly, and pauses
   at each end rather than snapping back. */
@media (hover:none){
  .ui-shot{animation:uiWalk 22s ease-in-out infinite alternate;transition:none}
  @keyframes uiWalk{
    0%,8%{transform:translateY(0)}
    92%,100%{transform:translateY(calc(-100% + 100px))}
  }
  .ui-hint{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .ui-shot{animation:none;transition:none;transform:none}
  .ui-hint{opacity:.92}
}