/* ============================================================
   MVELO STUDIO
   Every colour here was sampled from the logo artwork: the cool near-black
   it sits on, the champagne on the lit face of the M, the blue edge light,
   the ivory MVELO and the silver STUDIO.
   Champagne is for actions and warmth. Blue is for systems and data.
   ============================================================ */
:root{
  --void:#03060B;
  --void-2:#0A0E16;
  --void-3:#111723;
  --slate:#3C4652;
  --pewter:#828180;
  --silver:#B5B6B7;
  --ivory:#E9DCCC;
  --peak:#FCF9E9;
  --champagne:#E1C9AB;
  --amber:#AB8D74;
  --blue:#295C85;
  --blue-bright:#72B5D3;
  --line:rgba(233,220,204,.12);
  --line-strong:rgba(233,220,204,.30);

  --display:'Jost',ui-sans-serif,system-ui,sans-serif;
  --body:'Geist',ui-sans-serif,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --swish:cubic-bezier(.76,0,.24,1);
  --gut:clamp(20px,4.6vw,72px);
  --maxw:1320px;
  --sec:clamp(110px,14vw,220px);

  /* the type scale: light display, set big and tight; quiet body */
  --fs-mega:clamp(3.6rem,12.5vw,13.5rem);
  --fs-hero:clamp(2.55rem,5.15vw,5.9rem);
  --fs-h2:clamp(2.3rem,5vw,5.2rem);
  --fs-h3:clamp(1.45rem,2.1vw,2rem);
  --fs-lede:clamp(1.05rem,1.3vw,1.22rem);
  --vel:0;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;background:var(--void);color:var(--ivory);
  font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:4px;border-radius:4px}
::selection{background:var(--champagne);color:var(--void)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--champagne);color:var(--void);padding:10px 16px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none}
.skip:focus{top:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ---- the canvas of light and the grain over everything ---- */
#light{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
#light.on{opacity:1}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer{position:relative;z-index:2}
/* without WebGL: a soft field of the two lights, so no page is ever bare */
.no-webgl body{background:
  radial-gradient(60% 50% at 78% 38%,rgba(41,92,133,.32),transparent 70%),
  radial-gradient(50% 40% at 30% 80%,rgba(171,141,116,.22),transparent 70%),var(--void)}

/* ============================================================
   THE LOGO: the real artwork, its black turned to transparency
   ============================================================ */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo img{height:auto}
.logo .m{width:46px}
.logo .wm{width:150px;margin-top:2px}

/* ============================================================
   BUTTONS AND LINKS
   ============================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:14px 28px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;
  font-family:var(--body);font-size:15.5px;font-weight:500;letter-spacing:.005em;text-decoration:none;
  background:var(--champagne);color:var(--void);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease),color .4s var(--ease);
}
/* a sheen sweeps across on hover: the same light that moves between pages */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(252,249,233,.9) 50%,transparent 70%) -150% 0/250% 100% no-repeat;
  transition:background-position .9s var(--swish);
}
.btn:hover::before{background-position:150% 0}
.btn:hover{box-shadow:0 0 0 6px rgba(225,201,171,.1),0 18px 40px -16px rgba(225,201,171,.55);transform:translateY(-1px)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn-ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost::before{background:linear-gradient(105deg,transparent 30%,rgba(114,181,211,.22) 50%,transparent 70%) -150% 0/250% 100% no-repeat}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ivory)}
@media (pointer:coarse){.btn{min-height:50px}}

.arrow-link{
  display:inline-flex;align-items:center;gap:12px;font-weight:500;text-decoration:none;color:var(--ivory);
  padding:6px 0;background:linear-gradient(var(--champagne),var(--champagne)) 0 100%/0% 1px no-repeat;
  transition:background-size .6s var(--swish),color .4s var(--ease);
}
.arrow-link:hover{background-size:100% 1px;color:var(--champagne)}
.arrow-link svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.arrow-link:hover svg{transform:translateX(4px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gut);transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.solid{background:rgba(3,6,11,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line);padding-block:10px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px)}
.nav-links a:not(.btn){
  position:relative;font-size:15px;color:var(--silver);text-decoration:none;padding:6px 0;transition:color .3s var(--ease);
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--champagne);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--swish);
}
.nav-links a:not(.btn):hover{color:var(--ivory)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--ivory)}
.nav-links a.btn{color:var(--void);min-height:42px;padding:10px 20px;font-size:14.5px}
.menu-btn{
  display:none;position:relative;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(233,220,204,.06);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.menu-btn i{position:absolute;left:15px;right:15px;height:1.5px;background:var(--ivory);transition:transform .5s var(--swish),top .5s var(--swish)}
.menu-btn i:nth-child(1){top:20px}.menu-btn i:nth-child(2){top:27px}
.menu-open .menu-btn i:nth-child(1){top:23.5px;transform:rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){top:23.5px;transform:rotate(-45deg)}
/* seven links need room: below this width they move into the menu */
@media (max-width:1180px){
  .nav-links a:not(.btn){display:none}
  .menu-btn{display:block}
  .logo .m{width:40px}.logo .wm{width:124px}
  .nav-links a.btn{display:none}
}

/* the phone menu: a full screen of big light type */
.menu{
  position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:flex-end;
  padding:110px var(--gut) 40px;background:rgba(3,6,11,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  clip-path:circle(0% at calc(100% - 44px) 40px);transition:clip-path .8s var(--swish);visibility:hidden;
}
.menu-open .menu{clip-path:circle(150% at calc(100% - 44px) 40px);visibility:visible}
.menu nav a{
  display:block;overflow:hidden;font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,9vw,4rem);
  line-height:1.12;letter-spacing:-.03em;text-decoration:none;color:var(--ivory);
}
.menu nav a span{display:block;transform:translateY(105%);transition:transform .8s var(--swish)}
.menu-open .menu nav a span{transform:none}
.menu nav a:nth-child(2) span{transition-delay:.05s}.menu nav a:nth-child(3) span{transition-delay:.1s}
.menu nav a:nth-child(4) span{transition-delay:.15s}.menu nav a:nth-child(5) span{transition-delay:.2s}
.menu nav a:nth-child(6) span{transition-delay:.25s}.menu nav a:nth-child(7) span{transition-delay:.3s}
.menu nav a[aria-current="page"]{color:var(--champagne)}
.menu .btn{margin-top:34px;align-self:flex-start}
.menu .menu-foot{margin-top:28px;font-size:14px;color:var(--silver)}
.menu-open{overflow:hidden}

/* ============================================================
   MOVING BETWEEN PAGES: A SWEEP OF LIGHT
   The page leaves behind a panel of night with a seam of light on its
   leading edge (warm to cool, like the logo), and the next page arrives
   from under it.
   ============================================================ */
.swish{position:fixed;inset:0;z-index:250;pointer-events:none;overflow:hidden}
.swish .panel{
  position:absolute;top:-5%;bottom:-5%;left:-25%;width:150%;background:var(--void);
  transform:translateX(-120%) skewX(-14deg);
}
.swish .panel::before,.swish .panel::after{
  content:"";position:absolute;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--champagne),var(--peak) 45%,var(--blue-bright));
  box-shadow:0 0 18px 4px rgba(225,201,171,.55),0 0 80px 20px rgba(114,181,211,.25);
}
.swish .panel::before{right:0}.swish .panel::after{left:0}
.leaving .swish .panel{transform:translateX(0) skewX(-14deg);transition:transform .6s var(--swish)}
/* arriving needs no script: the panel starts over the page and sweeps itself away */
.arriving .swish .panel{transform:translateX(0) skewX(-14deg);animation:swishOut .95s var(--swish) .12s forwards}
@keyframes swishOut{to{transform:translateX(120%) skewX(-14deg)}}

/* ============================================================
   REVEALS: THE SWISH
   Blocks open on a diagonal, with a streak of light crossing as they do.
   Lines of type rise out of their own masks. Both happen once.
   ============================================================ */
/* the closed state keeps a hairline of the shape (invisible at opacity 0): a fully clipped
   element never counts as on screen, so its reveal would never fire */
.js [data-reveal]{
  position:relative;opacity:0;
  clip-path:polygon(0 0,3% 0,-27% 100%,-30% 100%);transform:translate3d(0,26px,0);
  transition:clip-path 1.3s var(--swish),transform 1.3s var(--swish),opacity .3s linear;
}
.js [data-reveal].in{opacity:1;clip-path:polygon(0 -10%,130% -10%,100% 110%,-30% 110%);transform:none}
/* the streak travels inside the element (a moving gradient, not a moving box), so it can never widen the page */
.js [data-reveal]::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(252,249,233,.42) 50%,transparent 58%) 100% 0/300% 100% no-repeat;
}
.js [data-reveal].in::after{animation:streak 1.3s var(--swish) forwards}
@keyframes streak{0%{background-position:100% 0;opacity:1}100%{background-position:0 0;opacity:0}}
.js [data-reveal][data-d="1"]{transition-delay:.1s}.js [data-reveal][data-d="1"].in::after{animation-delay:.1s}
.js [data-reveal][data-d="2"]{transition-delay:.2s}.js [data-reveal][data-d="2"].in::after{animation-delay:.2s}
.js [data-reveal][data-d="3"]{transition-delay:.3s}.js [data-reveal][data-d="3"].in::after{animation-delay:.3s}

.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln > span{display:block}
.js [data-lines] .ln > span{transform:translate3d(0,108%,0) rotate(2.5deg);transform-origin:0 100%;transition:transform 1.15s var(--swish)}
.js [data-lines].in .ln > span{transform:none}
.js [data-lines].in .ln:nth-child(2) > span{transition-delay:.08s}
.js [data-lines].in .ln:nth-child(3) > span{transition-delay:.16s}
.js [data-lines].in .ln:nth-child(4) > span{transition-delay:.24s}
.js [data-fade]{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-fade].in{opacity:1;transform:none}
.js [data-fade][data-d="1"]{transition-delay:.15s}.js [data-fade][data-d="2"]{transition-delay:.3s}.js [data-fade][data-d="3"]{transition-delay:.45s}

/* big type leans with the speed of your scroll, then settles */
[data-skew]{transform:skewY(calc(var(--vel) * .9deg));transform-origin:0 50%;will-change:transform}

/* ============================================================
   SECTIONS AND TYPE
   ============================================================ */
.sec{position:relative;padding-block:var(--sec)}
.mega{
  font-family:var(--display);font-weight:300;font-size:var(--fs-mega);line-height:.86;letter-spacing:-.055em;color:var(--ivory);
}
.h2{font-family:var(--display);font-weight:300;font-size:var(--fs-h2);line-height:.98;letter-spacing:-.04em}
.h3{font-family:var(--display);font-weight:400;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em}
.lede{font-size:var(--fs-lede);line-height:1.62;color:var(--silver);max-width:46ch}
.body{color:var(--silver);max-width:60ch}
.tag{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--champagne);
  padding:6px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(225,201,171,.35);
}
.tag i{width:5px;height:5px;border-radius:50%;background:var(--champagne);box-shadow:0 0 8px 1px rgba(225,201,171,.8)}
.meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--silver)}
.meta span + span{position:relative}
.meta span + span::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--slate);transform:translateY(-50%)}
.rule{height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{position:relative;overflow:hidden;overflow:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut) 0}
.hero-copy{position:relative;width:100%;max-width:var(--maxw);margin:0 auto}
.hero-copy::before{
  content:"";position:absolute;left:-18%;top:-30%;width:78%;height:160%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,6,11,.82),rgba(3,6,11,.5) 55%,rgba(3,6,11,0));
}
.hero h1{font-family:var(--display);font-weight:300;font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.035em}
.hero h1 .ln > span{white-space:nowrap}
.hero .sub{margin-top:30px;max-width:36ch;font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.6;color:var(--silver)}
.hero .cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
.hero-foot{
  position:relative;width:100%;max-width:var(--maxw);margin:auto auto 0;padding:56px 0 30px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.offer{display:flex;flex-wrap:wrap;align-items:center}
.offer li{display:flex;align-items:center}
.offer li + li::before{content:"";width:1px;height:16px;background:var(--line-strong);margin:0 22px}
.offer a{font-family:var(--display);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);text-decoration:none;transition:color .3s var(--ease)}
.offer a:hover{color:var(--champagne)}
.place{font-size:14px;color:var(--silver);display:flex;align-items:center;gap:10px}
.place i{width:6px;height:6px;border-radius:50%;background:var(--champagne);box-shadow:0 0 12px 2px rgba(225,201,171,.7)}
.js .hero h1 .ln > span{transform:translateY(105%);transition:transform 1.3s var(--ease)}
.js .hero .sub,.js .hero .cta,.js .hero-foot{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js.ready .hero h1 .ln > span{transform:none}
.js.ready .hero h1 .ln:nth-child(2) > span{transition-delay:.12s}
.js.ready .hero .sub{opacity:1;transform:none;transition-delay:.5s}
.js.ready .hero .cta{opacity:1;transform:none;transition-delay:.66s}
.js.ready .hero-foot{opacity:1;transform:none;transition-delay:.9s}
@media (max-width:900px){
  .hero{justify-content:flex-start;padding-top:128px}
  .hero h1 .ln > span{white-space:normal}
  .hero-copy::before{left:-30%;width:140%;top:-20%;height:150%}
  .hero-foot{flex-direction:column;align-items:flex-start;padding-bottom:26px}
  /* four services: a tidy two-by-two, dividers only between the pair on each row */
  .offer{display:grid;grid-template-columns:max-content max-content;row-gap:12px}
  .offer li + li::before{margin:0 12px}
  .offer li:nth-child(odd)::before{display:none}
  .offer a{font-size:12px;letter-spacing:.1em}
}

/* ============================================================
   PAGE HEROES (the other pages): one giant word, the scene behind it
   ============================================================ */
.page-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 0 clamp(48px,7vw,96px);overflow:hidden;overflow:clip}
.page-hero .wrap{position:relative}
.page-hero .mega{margin-left:-.06em}
.page-hero .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(28px,4vw,56px)}
.page-hero .intro .h3{max-width:20ch}
.page-hero .intro > .lede{justify-self:end}
/* the words beside the light get a soft pool of dark behind them, so the scene never
   fights them. Measured on the real pixels: the brightest 0.5% under every line clears 4.5:1 */
.page-hero .intro > *,.page-hero .index,.scroll-cue{position:relative;text-shadow:0 1px 14px rgba(3,6,11,.9)}
.page-hero .intro > *::before,.page-hero .index::before,.scroll-cue::before{
  content:"";position:absolute;inset:-34px -48px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,6,11,.92),rgba(3,6,11,.7) 55%,rgba(3,6,11,0));
}
.page-hero .index{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,36px);font-size:14px;color:var(--silver)}
.page-hero .index b{font-weight:500;color:var(--champagne)}
.page-hero .index i{width:44px;height:1px;background:var(--line-strong)}
.scroll-cue{position:absolute;right:var(--gut);bottom:clamp(48px,7vw,96px);display:flex;align-items:center;gap:10px;font-size:13px;color:var(--silver)}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(var(--champagne),transparent);animation:cue 2.4s var(--ease-io) -1s infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:820px){
  .page-hero{justify-content:flex-end}
  .page-hero .intro{grid-template-columns:minmax(0,1fr)}
  .page-hero .intro > .lede{justify-self:start}
  .scroll-cue{display:none}
}

/* ============================================================
   THE MARQUEE: services in huge type, moving with your scroll
   ============================================================ */
.marquee{position:relative;padding-block:clamp(40px,6vw,90px);overflow:hidden;border-block:1px solid var(--line)}
.marquee-track{display:flex;width:max-content;will-change:transform;transform:translate3d(var(--mx,0px),0,0)}
.marquee-track span{
  display:flex;align-items:center;gap:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px);
  font-family:var(--display);font-weight:300;font-size:clamp(3rem,9vw,9rem);line-height:1;letter-spacing:-.04em;white-space:nowrap;
}
.marquee-track span em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(233,220,204,.45)}
.marquee-track img{width:clamp(38px,5vw,80px);height:auto;opacity:.95}

/* ============================================================
   SELECTED WORK (home)
   ============================================================ */
.work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 60px;margin-bottom:clamp(48px,6vw,90px)}
.work-head .lede{max-width:38ch}
.projects{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.projects .project:nth-child(2){margin-top:clamp(80px,14vw,220px)}
.project{display:block;text-decoration:none;color:inherit}
.project .media{
  position:relative;overflow:hidden;border-radius:18px;background:var(--void-2);
  box-shadow:0 0 0 1px var(--line),0 40px 90px -40px rgba(0,0,0,.9);
}
.project .media img{width:100%;height:auto;aspect-ratio:var(--ar,16/10);object-fit:cover;transition:transform 1.4s var(--ease),filter .8s var(--ease);filter:saturate(.9)}
.project:hover .media img{transform:scale(1.045);filter:saturate(1.05)}
.project .media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(252,249,233,.16) 50%,transparent 65%) -120% 0/200% 100% no-repeat;
  transition:background-position 1.2s var(--swish);
}
.project:hover .media::after{background-position:120% 0}
.project .row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:24px}
.project h3{font-family:var(--display);font-weight:300;font-size:clamp(2rem,3.4vw,3.2rem);letter-spacing:-.035em;line-height:1}
.project p{margin-top:12px;color:var(--silver);max-width:44ch}
.project .go{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;font-weight:500;color:var(--ivory)}
.project .go svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.project:hover .go{color:var(--champagne)}
.project:hover .go svg{transform:translateX(5px)}
@media (max-width:820px){
  .projects{grid-template-columns:minmax(0,1fr)}
  .projects .project:nth-child(2){margin-top:0}
}

/* ============================================================
   WHAT WE MAKE (home): three huge rows, a preview follows the pointer
   ============================================================ */
.services{border-top:1px solid var(--line)}
.svc{
  position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:20px 40px;align-items:center;
  padding:clamp(28px,3.4vw,48px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.svc h3{
  font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,6.4vw,6.4rem);line-height:.95;letter-spacing:-.045em;
  transition:letter-spacing .9s var(--swish),color .5s var(--ease),transform .9s var(--swish);
}
.svc:hover h3{letter-spacing:-.02em;color:var(--peak);transform:translateX(14px)}
.svc p{color:var(--silver);max-width:34ch}
.svc .price{font-family:var(--display);font-size:17px;color:var(--champagne);white-space:nowrap;display:flex;align-items:center;gap:14px}
.svc .price svg{width:18px;height:18px;transition:transform .6s var(--swish)}
.svc:hover .price svg{transform:translateX(6px)}
.svc::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--champagne),var(--blue-bright));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--swish);
}
.svc:hover::before{transform:scaleX(1)}
@media (max-width:900px){
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc .price{order:3}
}
/* the lens: a little window onto each service's own world */
.lens{
  position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;pointer-events:none;
  box-shadow:0 0 0 1px var(--line-strong),0 30px 60px -20px rgba(0,0,0,.9);
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.6);transition:opacity .4s var(--ease),transform .5s var(--swish);
}
.lens.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.lens img.on{opacity:1}
@media (hover:none),(max-width:900px){.lens{display:none}}

/* ============================================================
   THE STUDIO (home)
   ============================================================ */
.studio-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.statement{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,4.6vw,4.6rem);line-height:1.04;letter-spacing:-.038em}
.statement .dim{color:var(--pewter)}
.principles{display:grid;gap:34px;padding-top:12px}
.principles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.principles i{width:9px;height:9px;margin-top:9px;border-radius:50%;background:var(--champagne);box-shadow:0 0 14px 2px rgba(225,201,171,.6)}
.principles li:nth-child(2) i{background:var(--blue-bright);box-shadow:0 0 14px 2px rgba(114,181,211,.6)}
.principles h3{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.01em}
.principles p{margin-top:6px;color:var(--silver)}
@media (max-width:900px){.studio-grid{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   PROCESS: giant outlined numerals that fill as you pass
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(56px,7vw,100px);counter-reset:s}
.step{position:relative;padding-top:20px;border-top:1px solid var(--line)}
.step .num{
  position:relative;display:block;font-family:var(--display);font-weight:300;font-size:clamp(4.6rem,9vw,9rem);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(233,220,204,.35);
}
.step .num::after{
  content:attr(data-n);position:absolute;inset:0;color:var(--champagne);-webkit-text-stroke:0;
  clip-path:inset(calc((1 - var(--fill,0)) * 100%) 0 0 0);
}
.step h3{margin-top:28px;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.01em}
.step p{margin-top:10px;color:var(--silver);font-size:16px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   QUESTIONS
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,100px);align-items:start}
.faq-grid .sticky{position:sticky;top:120px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;min-height:44px;
  font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.01em;transition:color .4s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--champagne)}
.qa .pm{position:relative;width:18px;height:18px;flex:none}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--champagne);transition:transform .5s var(--swish)}
.qa .pm::after{transform:rotate(90deg)}
.qa[open] .pm::after{transform:rotate(0)}
.qa .a{padding:0 0 28px;color:var(--silver);max-width:58ch}
.qa[open] .a{animation:open .7s var(--swish)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-grid .sticky{position:static}}

/* ============================================================
   THE FINALE (home) and the CTA band (other pages)
   ============================================================ */
.finale{min-height:110vh;display:flex;align-items:center}
.finale .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.finale .copy{position:relative}
.finale .copy::before{content:"";position:absolute;left:-20%;top:-30%;width:120%;height:160%;z-index:-1;background:radial-gradient(closest-side,rgba(3,6,11,.85),rgba(3,6,11,0))}
.finale h2{font-family:var(--display);font-weight:300;font-size:clamp(3rem,8vw,8.4rem);line-height:.9;letter-spacing:-.05em}
.finale .lede{margin-top:28px}
.finale .cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
@media (orientation:portrait){
  .finale{align-items:flex-end;min-height:120vh;padding-bottom:clamp(60px,10vw,120px)}
  .finale .wrap{grid-template-columns:minmax(0,1fr)}
}
.cta-band{padding-block:clamp(120px,16vw,240px);text-align:left}
.cta-band h2{font-family:var(--display);font-weight:300;font-size:clamp(3rem,9vw,9rem);line-height:.9;letter-spacing:-.05em}
.cta-band .row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:clamp(28px,4vw,48px)}
.cta-band .cta{display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   FRAMES: a browser window and a phone, for showing work
   ============================================================ */
.browser{border-radius:14px;overflow:hidden;background:#141a26;box-shadow:0 0 0 1px var(--line-strong),0 50px 100px -40px rgba(0,0,0,.95)}
.browser .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#141a26}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:rgba(233,220,204,.2)}
.browser .bar span{margin-left:12px;flex:1;max-width:320px;height:21px;border-radius:6px;background:rgba(233,220,204,.07);font-size:12px;line-height:21px;padding:0 10px;color:var(--silver);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone{border-radius:30px;overflow:hidden;padding:8px;background:#141a26;box-shadow:0 0 0 1px var(--line-strong),0 40px 80px -30px rgba(0,0,0,.95)}
.phone > *{border-radius:23px;overflow:hidden}
.phone video,.phone img{width:100%;height:auto;aspect-ratio:540/908;object-fit:cover}

/* ============================================================
   CASE STUDIES (work)
   ============================================================ */
.case{padding-block:var(--sec);border-top:1px solid var(--line)}
.case-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.case-head .mega{font-size:clamp(3.4rem,10vw,10.5rem)}
.case-media{position:relative;margin-top:clamp(48px,6vw,90px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.32fr);gap:clamp(18px,3vw,44px);align-items:end}
.case-media .phone{margin-bottom:-6%}
.case-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(64px,8vw,120px)}
.case-body h3{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.01em;color:var(--champagne)}
.case-body p{margin-top:12px;color:var(--silver)}
.facts{display:flex;flex-wrap:wrap;gap:24px 56px;margin-top:clamp(48px,6vw,80px)}
.facts b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.9;letter-spacing:-.04em;color:var(--peak)}
.facts span{display:block;margin-top:10px;font-size:14px;color:var(--silver);max-width:16ch}
.case-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(40px,5vw,64px)}
@media (max-width:900px){
  .case-head{grid-template-columns:minmax(0,1fr)}
  .case-media{grid-template-columns:minmax(0,1fr) minmax(0,.42fr)}
  .case-body{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.pillar{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px) clamp(28px,3vw,44px) 0;border-right:1px solid var(--line)}
.pillar + .pillar{padding-left:clamp(20px,2.4vw,40px)}
.pillar:last-child{border-right:0}
.pillar .k{font-family:var(--display);font-size:15px;color:var(--champagne);letter-spacing:.02em}
.pillar h3{margin-top:clamp(40px,6vw,90px);font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.02;letter-spacing:-.03em}
.pillar p{margin-top:16px;color:var(--silver)}
@media (max-width:900px){
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pillar,.pillar + .pillar{padding-inline:0;border-right:0;border-bottom:1px solid var(--line)}
}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.checks li{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:clamp(1.05rem,1.3vw,1.2rem)}
.checks li:first-child{border-top:1px solid var(--line)}
.checks li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--champagne);box-shadow:0 0 10px 1px rgba(225,201,171,.6);transform:translateY(-3px)}
.big-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--line);
}
.big-list li:first-child{border-top:1px solid var(--line)}
.big-list b{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.6vw,3.4rem);letter-spacing:-.035em;line-height:1}
.big-list span{color:var(--silver);max-width:34ch;text-align:right}
@media (max-width:700px){.big-list li{flex-direction:column;gap:8px}.big-list span{text-align:left}}

/* the price: a large figure, the plan underneath */
.price-card{
  position:relative;padding:clamp(32px,4vw,56px);border-radius:24px;overflow:hidden;
  background:linear-gradient(145deg,rgba(225,201,171,.08),rgba(41,92,133,.10));box-shadow:inset 0 0 0 1px var(--line-strong);
}
.price-card::before{content:"";position:absolute;right:-20%;top:-50%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(225,201,171,.18),transparent);pointer-events:none}
.price-card .from{font-size:15px;color:var(--silver)}
.price-card .fig small{font-size:.3em;letter-spacing:-.01em;color:var(--silver)}
.price-card .fig{display:block;margin-top:8px;font-family:var(--display);font-weight:300;font-size:clamp(3.6rem,8vw,7.4rem);line-height:.9;letter-spacing:-.05em;color:var(--peak)}
.price-card .plan{margin-top:20px;color:var(--silver);max-width:40ch}
.price-card .btn{margin-top:32px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:start}
.direct{display:grid;gap:22px;margin-top:40px}
.direct a,.direct p{display:flex;align-items:center;gap:14px;font-size:17px;text-decoration:none;color:var(--ivory)}
.direct svg{width:20px;height:20px;color:var(--champagne);flex:none}
.direct a:hover{color:var(--champagne)}
.form{position:relative;padding:clamp(26px,3.6vw,48px);border-radius:24px;background:rgba(10,14,22,.78);box-shadow:inset 0 0 0 1px var(--line-strong),0 40px 90px -40px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.form .f{margin-bottom:22px}
.form label,.form legend{display:block;font-size:14.5px;font-weight:500;margin-bottom:10px;color:var(--ivory)}
.form fieldset{border:0;margin:0 0 22px;padding:0}
.form input[type=text],.form input[type=email],.form textarea{
  width:100%;min-height:52px;padding:13px 16px;border-radius:12px;font:inherit;font-size:16px;color:var(--ivory);
  background:rgba(233,220,204,.04);border:1px solid var(--line-strong);transition:border-color .4s var(--ease),background .4s var(--ease);
}
.form textarea{min-height:130px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(181,182,183,.55)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--champagne);background:rgba(233,220,204,.07)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{margin:0;position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;cursor:pointer;font-size:14.5px;font-weight:400;
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--silver);transition:all .4s var(--ease);
}
.chips input:checked + span{background:var(--champagne);color:var(--void);box-shadow:none}
.chips input:focus-visible + span{outline:2px solid var(--champagne);outline-offset:3px}
.form .btn{width:100%;margin-top:6px}
.form-note{margin-top:14px;font-size:14px;color:var(--silver)}
.form-msg{margin-top:14px;min-height:1.6em;font-weight:500}
.form-msg.ok{color:var(--champagne)}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:clamp(80px,10vw,140px) 0 36px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(3,6,11,0),rgba(3,6,11,.9) 30%)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.6fr));gap:40px}
.foot .lockup{width:150px;height:auto}
.foot .tagline{margin-top:20px;color:var(--silver);max-width:30ch}
.foot h4{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--pewter);margin-bottom:18px}
.foot nav a,.foot address a,.foot address p{display:block;padding:6px 0;color:var(--silver);text-decoration:none;font-style:normal;transition:color .3s var(--ease)}
.foot nav a:hover,.foot address a:hover{color:var(--ivory)}
.foot-word{margin-top:clamp(60px,8vw,110px);font-family:var(--display);font-weight:300;font-size:clamp(3.4rem,15.5vw,16rem);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(233,220,204,.16);white-space:nowrap;overflow:hidden}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--pewter)}
@media (max-width:900px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-top > :first-child{grid-column:1 / -1}}

/* ============================================================
   REDUCED MOTION, HONOURED COMPLETELY
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal]{clip-path:none!important;transform:none!important;opacity:1!important}
  .js [data-reveal]::after{display:none}
  .js [data-lines] .ln > span,.js [data-fade]{transform:none!important;opacity:1!important}
  [data-skew]{transform:none!important}
  .swish{display:none}
  .step .num::after{clip-path:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============================================================
   THE SILK: the living material behind the words (assets/silk.js)
   ============================================================ */
#silk{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
#silk.on{opacity:1}
.no-webgl #silk{display:none}

/* ============================================================
   THE OPENING (home, once a visit): the banner, played
   ============================================================ */
.intro{display:none}
.intro-on .intro,.intro-leaving .intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:260;padding:24px;
}
.intro-on body{overflow:hidden}
main,footer{transition:opacity 1.1s var(--ease)}
.intro-on main,.intro-on footer{opacity:0}
.intro-leaving main,.intro-leaving footer{transition-delay:.55s}
.intro-on #light{opacity:0!important}
/* the nav's own logo hides while the opening's copy flies onto it, then swaps in on the same frame */
.intro-on .nav .logo,.intro-leaving .nav .logo{opacity:0;transition:none}
.nav-links{transition:opacity .9s var(--ease) .25s}
.intro-on .nav-links{opacity:0}

.i-lockup{display:flex;flex-direction:column;align-items:center;text-align:center}
.i-m{position:relative;display:block;width:clamp(118px,15vw,210px)}
.i-mark{display:block;width:100%;height:auto}
/* a glow behind the M, and a sheen that crosses only the M itself */
.i-m::before{
  content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(225,201,171,.28),rgba(114,181,211,.12) 55%,transparent);
}
.i-m::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(252,249,233,.95) 50%,transparent 62%) 160% 0/260% 100% no-repeat;
  -webkit-mask:url(mark.webp) center/100% 100% no-repeat;mask:url(mark.webp) center/100% 100% no-repeat;
}
.i-word{display:block;width:clamp(220px,30vw,420px);height:auto;margin-top:clamp(16px,2.2vw,28px)}
.i-rule{display:block;width:clamp(64px,7vw,100px);height:1px;margin:clamp(22px,3vw,38px) 0;background:linear-gradient(90deg,transparent,var(--champagne),transparent)}
.i-svc{display:grid;grid-template-columns:repeat(4,auto);align-items:start}
.i-svc li{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 clamp(14px,2.8vw,44px);
  font-family:var(--display);font-weight:400;font-size:clamp(11px,1.02vw,15px);letter-spacing:.22em;text-transform:uppercase;color:var(--ivory)}
.i-svc li + li{border-left:1px solid rgba(225,201,171,.32)}
.i-svc svg{width:clamp(22px,2vw,28px);height:auto;fill:none;stroke:var(--ivory);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.i-skip{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);min-height:44px;padding:10px 18px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--silver);font:500 14px var(--body);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:color .3s var(--ease),box-shadow .3s var(--ease),opacity .5s var(--ease);
}
.i-skip:hover{color:var(--ivory);box-shadow:inset 0 0 0 1px var(--ivory)}
@media (max-width:620px){
  .i-svc{grid-template-columns:repeat(2,auto);row-gap:22px}
  .i-svc li:nth-child(3){border-left:0}
  .i-m{width:34vw}
  .i-word{width:62vw}
  .i-svc li{padding:0 12px;font-size:10.5px;letter-spacing:.16em;gap:12px;max-width:34vw}
  .i-svc li span{line-height:1.5}
}

/* the choreography: start states, then .play runs it */
.intro .i-m,.intro .i-word,.intro .i-rule,.intro .i-svc li,.intro .i-skip{opacity:0}
.intro .i-svc path{stroke-dasharray:1;stroke-dashoffset:1}
.intro.play .i-m{animation:iMark 1.5s var(--swish) .3s forwards}
.intro.play .i-m::before{animation:iGlow 3.2s var(--ease-io) .5s forwards}
.intro.play .i-m::after{animation:iSheen 1.5s var(--ease-io) 1.15s forwards}
.intro.play .i-word{animation:iWord 1.15s var(--swish) 1.05s forwards}
.intro.play .i-rule{animation:iRule .8s var(--swish) 1.8s forwards}
.intro.play .i-svc li{animation:iUp .9s var(--swish) forwards}
.intro.play .i-svc li:nth-child(1){animation-delay:2s}
.intro.play .i-svc li:nth-child(2){animation-delay:2.14s}
.intro.play .i-svc li:nth-child(3){animation-delay:2.28s}
.intro.play .i-svc li:nth-child(4){animation-delay:2.42s}
.intro.play .i-svc li path{animation:iDraw 1.1s var(--ease-io) forwards}
.intro.play .i-svc li:nth-child(1) path{animation-delay:2.05s}
.intro.play .i-svc li:nth-child(2) path{animation-delay:2.2s}
.intro.play .i-svc li:nth-child(3) path{animation-delay:2.35s}
.intro.play .i-svc li:nth-child(4) path{animation-delay:2.5s}
.intro.play .i-skip{animation:iFade .6s var(--ease) .9s forwards}
@keyframes iMark{0%{opacity:0;transform:scale(.88);filter:brightness(2.6) blur(14px)}40%{opacity:1}100%{opacity:1;transform:none;filter:brightness(1) blur(0)}}
@keyframes iGlow{0%{opacity:0}35%{opacity:1}100%{opacity:.55}}
@keyframes iSheen{0%{background-position:160% 0}100%{background-position:-60% 0}}
@keyframes iWord{0%{opacity:0;clip-path:inset(0 50% 0 50%);filter:blur(6px)}30%{opacity:1}100%{opacity:1;clip-path:inset(0 -4% 0 -4%);filter:blur(0)}}
@keyframes iRule{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
@keyframes iUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes iDraw{to{stroke-dashoffset:0}}
@keyframes iFade{to{opacity:1}}

/* the hand-off: the logo is held at its finished state and flies to the nav */
.intro.out .i-m,.intro.out .i-word{animation:none;opacity:1;clip-path:none;filter:none;transition:transform 1.05s var(--swish)}
.intro.out .i-m::before,.intro.out .i-m::after{animation:none;opacity:0;transition:opacity .4s var(--ease)}
.intro.out .i-rule,.intro.out .i-svc,.intro.out .i-skip{animation:none;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .6s var(--swish)}
.intro.out.fast .i-m,.intro.out.fast .i-word{transition-duration:.6s}
@media (prefers-reduced-motion: reduce){.intro{display:none!important}}


/* two pillars, for pages with two offers */
.pillars.pillars-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.pillars.pillars-2{grid-template-columns:minmax(0,1fr)}}