/* home.css — the home page (index.html). Loaded after majd.css; the page does not load quiet.css.
   Behaviour comes from majd.js (headline letter slots, reveals, statement fill) and quiet.js
   (nav on scroll, local time, cursor badge, copy email, cover transition).
   Covers are always the whole asset at 16:9: nothing is cropped or re-grounded. */
:root{
  --bg:#faf7f3;--ink:#111;--cream:#faf7f3;
  --mute:rgba(17,17,17,.58);--hair:rgba(17,17,17,.14);
  --maxw:1200px;--gut:clamp(20px,5.6vw,80px);--gap:clamp(16px,2vw,28px);
  /* the colours already on the site: the headline's letter slots and the star */
  --rose:#ef5da5;--sky:#56c8f2;--navy:#2a2f52;--lime:#8ce32c;--violet:#a855f7;
  --grad:linear-gradient(135deg,#a855f7,#7dd3fc 45%,#f0abfc);
  --e:cubic-bezier(.16,1,.3,1);
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0c3 26 21 44 47 50-26 6-44 24-47 50-3-26-21-44-47-50C29 44 47 26 50 0z'/%3E%3C/svg%3E");
}
body{letter-spacing:-.011em;line-height:1.5}
::selection{background:#111;color:#faf7f3}
.wrap{max-width:calc(var(--maxw) + var(--gut)*2)}
.star{display:inline-block;aspect-ratio:1;background:currentColor;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.star--grad{background:var(--grad)}
@keyframes hvspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.spin{animation:hvspin 18s linear infinite}}

/* ---- cover: the asset, whole, 16:9 ---- */
.cover{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--cr,22px);overflow:hidden;background:#000;
  transform:translateZ(0)}
.cover img,.cover video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--e)}
.cover--zixel{background:linear-gradient(120deg,#9fbdf1,#c6b7ef 38%,#eac6dc 72%,#f4dcc3)}
.cover--zixel img{object-fit:contain;width:88%;height:82%;left:6%;top:9%}
@media (hover:hover){a:hover .cover img,a:hover .cover video{transform:scale(1.025)}}

/* ---- the dotted canvas behind the headline ---- */
.dots{position:absolute;inset:0 0 auto 0;height:min(86svh,760px);pointer-events:none;
  background-image:radial-gradient(rgba(17,17,17,.32) 1px,transparent 1.5px);background-size:28px 28px;
  background-position:50% 0;
  -webkit-mask-image:radial-gradient(75% 82% at 50% 30%,#000 0,transparent 100%);
  mask-image:radial-gradient(75% 82% at 50% 30%,#000 0,transparent 100%)}

/* ---- round arrow ---- */
.rarrow{flex:none;display:grid;place-items:center;width:var(--as,56px);height:var(--as,56px);border-radius:50%;
  box-shadow:inset 0 0 0 1px currentColor;transition:background .3s ease,color .3s ease}
.rarrow svg{width:28%;height:28%}

/* ---- the "View" badge that follows the pointer (quiet.js) ---- */
.qcur{position:fixed;left:0;top:0;z-index:860;pointer-events:none;display:grid;place-items:center;
  width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--cream);color:var(--ink);
  font-size:12.5px;font-weight:600;opacity:0;scale:.82;transform:translate3d(var(--x,0),var(--y,0),0);
  box-shadow:0 0 0 1px rgba(17,17,17,.12);
  transition:opacity .22s ease,scale .4s var(--e)}
.qcur.on{opacity:1;scale:1}

/* ---- nav: one ink pill, centred ---- */
.n1{position:fixed;top:22px;left:50%;translate:-50% 0;z-index:800;display:flex;align-items:center;gap:2px;
  padding:6px;border-radius:18px;background:var(--ink);color:var(--cream);white-space:nowrap;
  box-shadow:0 14px 34px -14px rgba(17,17,17,.5);transition:translate .42s cubic-bezier(.65,0,.35,1)}
html.bar-away .n1:not(:focus-within){translate:-50% -280%}
.n1 a{padding:9px 14px;border-radius:12px;font-size:14.5px;font-weight:500;line-height:1.2;
  color:rgba(250,247,243,.7);transition:color .2s ease,background .2s ease}
.n1 .b{display:inline-flex;align-items:center;gap:8px;color:var(--cream);font-weight:700;letter-spacing:-.02em}
.n1 .b .star{width:13px}
.n1 .r{margin-left:4px;background:var(--cream);color:var(--ink);font-weight:600}
.n1 :focus-visible{outline-color:var(--cream)}
@media (hover:hover){.n1 a:hover{color:var(--cream)}.n1 .r:hover{background:#fff;color:var(--ink)}}
@media (max-width:520px){.n1{top:14px}.n1 a{padding:8px 10px;font-size:13.5px}.n1 .b .star{display:none}}

/* ---- hero: two lines, flush left ---- */
.hero{min-height:100svh;gap:clamp(28px,5vh,56px);padding-block:clamp(104px,14vh,150px) clamp(40px,7vh,76px)}
.heroin{margin-top:auto}
.h1box{font-size:clamp(48px,15.2vw,219px)}
.hero h1{font-size:1em;font-weight:800;line-height:.84;letter-spacing:-.025em;text-align:left;margin-left:-.035em;white-space:nowrap}
.deco-star{width:.5em;left:auto;right:10%;top:-.2em}
.deco-bolt{width:.6em;left:auto;right:-5.2%;top:1.04em}
.herofoot{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap);align-items:end}
.herolead{max-width:19em;font-size:clamp(21px,2.2vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.03em;text-wrap:pretty}
@media (max-width:900px){.herofoot{grid-template-columns:1fr;row-gap:24px}}
@media (max-width:740px){.deco-star{width:.62em;right:4%;top:-.5em}.deco-bolt{width:.7em;right:0;top:1.5em}}

/* ---- the stage ---- */
.stage{position:relative;background:var(--ink);color:var(--cream);margin-inline:clamp(6px,.9vw,14px);
  border-radius:clamp(26px,3.2vw,46px);padding-block:clamp(52px,6.6vw,96px) clamp(40px,5vw,72px)}
.sthead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(34px,4.4vw,62px)}
.sthead h2{font-size:clamp(40px,7vw,100px);font-weight:700;line-height:.92;letter-spacing:-.055em}
.sthead h2 sup{font-size:.14em;font-weight:500;letter-spacing:0;vertical-align:top;position:relative;top:.9em;
  margin-left:.6em;color:rgba(250,247,243,.6)}
.sthead .star{width:clamp(44px,6.2vw,90px)}
.sc{position:sticky;top:calc(22px + var(--i)*15px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--gap);padding:clamp(12px,1.5vw,20px);margin-bottom:clamp(26px,3.2vw,46px);
  border-radius:clamp(20px,2.4vw,34px);background:#1d1d1d;
  box-shadow:inset 0 0 0 1px rgba(250,247,243,.1),0 -22px 44px -26px rgba(0,0,0,.9)}
.sc .cover{--cr:clamp(12px,1.5vw,20px)}
.scinfo{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(6px,1vw,14px)}
.sc h3{margin-top:auto;padding-top:28px;font-size:clamp(32px,4.5vw,64px);font-weight:700;line-height:.94;letter-spacing:-.055em}
@media (hover:hover){.sc:hover .rarrow{background:var(--cream);color:var(--ink)}}
.stall{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:clamp(20px,2.4vw,34px);
  padding:clamp(20px,2.6vw,36px) clamp(18px,2.4vw,34px);border-radius:clamp(20px,2.4vw,34px);
  box-shadow:inset 0 0 0 1px rgba(250,247,243,.28);--as:clamp(44px,4.6vw,64px);
  transition:background .35s ease,color .35s ease}
.stall b{font-size:clamp(36px,6.2vw,90px);font-weight:700;line-height:.9;letter-spacing:-.055em}
.stall sup{font-size:.15em;font-weight:500;letter-spacing:0;vertical-align:top;position:relative;top:.8em;margin-left:.6em}
@media (hover:hover){.stall:hover{background:var(--cream);color:var(--ink)}}
.stage :focus-visible{outline-color:var(--cream)}
@media (max-width:820px){
  .sc{grid-template-columns:1fr;top:calc(14px + var(--i)*11px)}
  .sc .cover{order:-1}
  .sc h3{margin-top:0;padding-top:14px}
}

/* ---- hey ---- */
.say{max-width:none;padding-top:clamp(100px,12vw,180px);font-size:clamp(38px,6.9vw,100px);font-weight:700;
  line-height:.96;letter-spacing:-.055em;text-align:center;text-wrap:balance}

/* ---- footer: ink, the address at full size, the wordmark under it ---- */
.foot{margin-top:clamp(100px,12vw,180px);padding-top:clamp(40px,5vw,72px);
  border-radius:clamp(26px,3.4vw,48px) clamp(26px,3.4vw,48px) 0 0}
.f1top{display:flex;justify-content:space-between;gap:20px}
.f1mail{display:inline-block;margin-top:clamp(56px,8vw,120px);font-size:clamp(25px,6.1vw,88px);font-weight:700;line-height:1;
  letter-spacing:-.055em;overflow-wrap:anywhere;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 .05em no-repeat;padding-bottom:.1em;
  transition:background-size .6s var(--ease)}
.f1bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 40px;
  margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid rgba(250,247,243,.2)}
.f1bot p:first-child{max-width:27em;color:rgba(250,247,243,.72)}
.f1links{display:flex;flex-wrap:wrap;gap:8px 26px}
.f1links a{font-size:14px;font-weight:500;border-bottom:1px solid rgba(250,247,243,.35)}
@media (hover:hover){.f1mail:hover{background-size:100% .05em}.f1links a:hover{border-bottom-color:var(--cream)}}
.foot :focus-visible{outline-color:var(--cream)}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px var(--hair);font-size:13.5px;font-weight:500;line-height:1.25;letter-spacing:-.004em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(140,227,44,.28)}
.chip--tilt{background:var(--c);color:var(--t);font-weight:600;box-shadow:none;rotate:-5deg;transition:rotate .5s var(--e)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
a.chip{transition:background .25s ease,color .25s ease}
@media (hover:hover){a.chip:hover{background:var(--ink);color:var(--cream)}}
/* the pill nav also sits on the ink stage */
.n1{box-shadow:0 0 0 1px rgba(250,247,243,.16),0 14px 34px -14px rgba(17,17,17,.5)}

/* ---- stage, with chips ---- */
.sthr{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.stage .chip{background:none;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(250,247,243,.3)}
.stage .chip--tilt{background:var(--c);color:var(--t);box-shadow:none}
.sc .chips{margin-top:clamp(12px,1.4vw,18px)}
.stage .chip.go{margin-top:clamp(18px,2vw,26px);padding:5px 5px 5px 15px;gap:11px;background:var(--cream);color:var(--ink);
  box-shadow:none;font-weight:600;--as:28px}
.go .rarrow{background:var(--ink);color:var(--cream);box-shadow:none;transition:transform .45s var(--e)}
@media (hover:hover){.sc:hover .chip--tilt{rotate:0deg}.sc:hover .go .rarrow{background:var(--ink);color:var(--cream);transform:rotate(45deg)}}
@media (max-width:820px){.sc .chip--tilt{margin-top:12px}.sthr .chip{display:none}}

/* ---- experience years and footer links as chips ---- */
.f1links{gap:8px}
.f1links a{padding:8px 14px;border-radius:999px;border-bottom:0;box-shadow:inset 0 0 0 1px rgba(250,247,243,.3);
  transition:background .25s ease,color .25s ease}
.foot .chip{background:none;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(250,247,243,.3)}
@media (hover:hover){.f1links a:hover{background:var(--cream);color:var(--ink)}}

/* ---- hero chips (two-line headline) ---- */
.herochips{justify-content:flex-end;align-self:end;padding-bottom:4px}
@media (max-width:900px){.herochips{justify-content:flex-start}}

/* ---- the portrait sits in the headline, beside the first line; the star pins its corner ---- */
.hface{position:absolute;z-index:3;left:4.14em;top:-.43em;width:1.05em;display:block}
.hface span{display:block;aspect-ratio:400/456;border-radius:.1em;overflow:hidden;rotate:5deg;background:#d9c8a6;
  box-shadow:0 .08em .2em -.08em rgba(17,17,17,.35);transition:rotate .5s var(--e)}
.hface img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.hface:hover span{rotate:0deg}}
.deco-star{z-index:4;width:.36em;left:3.9em;right:auto;top:-.56em}
@media (max-width:740px){.deco-star{width:.4em;left:3.86em;right:auto;top:-.6em}}
/* without the "Hey!" block the statement follows the stage, and the link closes the table */
@media (min-width:741px){.deco-bolt{right:-6.3%;top:1.07em}}

/* ---- the first screen fills the window and its content sits in the middle of it:
   on a tall window the spare height is shared above and below, never stacked on one side ---- */
.hero{min-height:100svh;justify-content:center;gap:clamp(26px,5.2vh,68px);
  padding-block:clamp(122px,calc(96px + 7.6vw),212px) clamp(52px,6.4vw,92px)}
.heroin{margin-top:0}
.heromore{margin-top:clamp(14px,1.5vw,20px);max-width:33em;font-size:clamp(16.5px,1.42vw,20.5px);line-height:1.42;
  letter-spacing:-.016em;color:rgba(17,17,17,.74);text-wrap:pretty}

/* ---- experience as five tiles with each organisation's mark; replaces the ruled table ---- */
.xhead{display:flex;justify-content:space-between;gap:12px;margin-top:clamp(84px,10vw,150px)}
.xcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);margin-top:clamp(14px,1.6vw,22px)}
.xc{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,5vw,72px);min-width:0;
  padding:clamp(14px,1.5vw,20px);border-radius:clamp(18px,2vw,26px);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.07)}
.xctop{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.xctop img{height:30px;width:auto;max-width:min(100%,128px);object-fit:contain;object-position:0 50%}
.xcb{display:flex;flex-direction:column;gap:4px}
.xcb b{font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.xcb span{font-size:14.5px;line-height:1.3;color:var(--mute)}
.xc .chip{padding:6px 11px;font-size:12.5px;background:var(--bg)}
@media (max-width:1100px){.xcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.xcards{grid-template-columns:repeat(2,minmax(0,1fr))}.xc:first-child{grid-column:1 / -1}.xc{gap:28px}}
/* footer: closer to the tiles, and the address can be copied */
.foot{margin-top:clamp(72px,8.6vw,128px)}
button.chip{appearance:none;border:0;font-family:inherit;cursor:pointer}
.f1links button.chip{background:var(--cream);color:var(--ink);box-shadow:none;font-weight:600}
.f1links button.chip[hidden]{display:none}

/* ---- page transitions: a short cross-fade; the clicked cover grows into the case-study cover
   (quiet.js names the clicked cover, quiet.css names the cover on the case page) ---- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;
  animation-timing-function:cubic-bezier(.33,1,.68,1)}
.n1{view-transition-name:topbar}
::view-transition-group(cover){animation-duration:.55s;animation-timing-function:cubic-bezier(.65,0,.35,1);
  border-radius:22px;overflow:clip}
::view-transition-old(cover),::view-transition-new(cover){height:100%;object-fit:cover;animation-duration:.28s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}