/* Greyscale Creative — design tokens and layout
   Monochrome interface. Colour appears only in the hero atmosphere. */

:root{
  --obsidian:#000000;
  --paper:#ffffff;
  --inkstone:#181818;
  --felt:#6d6d6d;
  --ash:#9a9a9a;
  --pewter:#808080;

  --font-primary:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-accent:'Raleway',ui-sans-serif,system-ui,sans-serif;

  --page:1078px;
  --gutter:28px;
  --section-gap:46px;
  --glide:cubic-bezier(0.19,1,0.22,1);
  --radius-pill:75px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--obsidian);
  font-family:var(--font-primary);font-size:18px;line-height:1.21;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;border-radius:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid currentColor;outline-offset:6px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:11px;font-weight:400;line-height:1.36;letter-spacing:.14em;text-transform:uppercase}
.eyebrow--muted{color:var(--felt);margin:0 0 22px}
.eyebrow--pewter{color:var(--pewter);margin:0 0 26px}

/* Grain */
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;height:66px;z-index:1000;display:flex;align-items:center;color:var(--paper);background-color:rgba(128,128,128,0);transition:color .4s ease,background-color .4s ease}
.nav.is-light{color:#ffffff}
.nav.is-scrolled{background-color:rgba(82,78,82,.9)}
.nav__inner{max-width:var(--page);margin:0 auto;padding:0 var(--gutter);width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-size:16px;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.wordmark b{font-weight:500}
.nav__menu{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav__menu a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;transition:opacity .8s var(--glide),letter-spacing .8s var(--glide)}
.nav__menu a:hover{opacity:1;letter-spacing:.2em}

/* Burger */
.burger{display:none;flex:none;width:28px;height:20px;position:relative;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .35s var(--glide),opacity .35s var(--glide)}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:9px}
.burger span:nth-child(3){top:18px}
.burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Mobile drawer */
.nav__overlay{position:fixed;inset:0;z-index:1010;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .4s var(--glide)}
.nav__overlay.is-open{opacity:1;pointer-events:auto}
.nav__drawer{position:fixed;top:0;right:0;bottom:0;z-index:1020;width:78%;max-width:320px;background:var(--obsidian);color:var(--paper);padding:96px 32px 32px;transform:translate3d(100%,0,0);transition:transform .45s var(--glide);overflow-y:auto}
.nav__drawer.is-open{transform:translate3d(0,0,0)}
.nav__drawer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nav__drawer-menu a{display:block;padding:14px 0;font-size:22px;font-weight:300;letter-spacing:-.01em;border-bottom:1px solid rgba(255,255,255,.14)}
body.nav-open{overflow:hidden}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 40px;overflow:hidden;color:var(--paper)}
.hero__bg{position:absolute;inset:-8%;z-index:0;filter:saturate(calc(var(--sat,1) * 1.18));will-change:filter,transform}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;inset:0}
.hero__bg::before{
  background:
    radial-gradient(115% 88% at 6% 2%,#7d4f66 0%,rgba(125,79,102,0) 55%),
    radial-gradient(98% 78% at 94% 4%,#3f7ba6 0%,rgba(63,123,166,0) 58%),
    radial-gradient(125% 112% at 80% 98%,#f4f2f2 0%,rgba(244,242,242,0) 58%),
    radial-gradient(140% 120% at 16% 94%,#b98ea1 0%,rgba(185,142,161,0) 62%),
    linear-gradient(115deg,#8a5f75 0%,#8e7c93 36%,#6f8fa8 66%,#d9d7d7 100%);
  animation:drift 26s ease-in-out infinite alternate;
}
.hero__bg::after{
  background:
    radial-gradient(70% 70% at 30% 70%,rgba(74,127,165,.55) 0%,rgba(74,127,165,0) 60%),
    radial-gradient(60% 60% at 74% 28%,rgba(141,96,118,.5) 0%,rgba(141,96,118,0) 62%);
  animation:drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2.5%,1.5%,0)}}
.hero--has-video .hero__bg::before,.hero--has-video .hero__bg::after{content:none}
.hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.26) 0%,rgba(0,0,0,.02) 32%,rgba(0,0,0,.46) 100%)}
.hero__inner{position:relative;z-index:2;max-width:var(--page);margin:0 auto;padding:0 var(--gutter);width:100%}
.hero__eyebrow{margin:0 0 auto;opacity:.8}
.hero__inner .hero__title{margin-top:26px}
.hero__title{margin:0;font-weight:400;font-size:clamp(50px,12.4vw,166px);line-height:.78;letter-spacing:-.028em}
.hero__title span{display:block}
.hero__foot{position:relative;z-index:2;max-width:var(--page);width:100%;margin:56px auto 0;padding:0 var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hero__note{max-width:34ch;font-size:16px;line-height:1.5;opacity:.86;margin:0}

.badge{width:104px;height:104px;flex:none;opacity:.9}
.badge svg{width:100%;height:100%;animation:spin 26s linear infinite}
.badge text{font-size:9.4px;letter-spacing:.24em;fill:currentColor;text-transform:uppercase}
.badge__dot{fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}

/* Bands */
.band{padding:calc(var(--section-gap) * 2.6) 0}
.band[id],.hero{scroll-margin-top:66px}
.band--dark{background:var(--obsidian);color:var(--paper)}
.band--tight{padding-top:calc(var(--section-gap) * 1.4)}

.whisper{margin:0;font-weight:300;font-size:clamp(32px,5.6vw,78px);line-height:1.1;letter-spacing:-.022em;max-width:17ch}
.whisper--lead{margin-bottom:calc(var(--section-gap) * 1.6)}
.anchor{margin:0;font-weight:400;font-size:clamp(40px,7.4vw,94px);line-height:.78;letter-spacing:-.028em}
.accent-head{font-family:var(--font-accent);font-weight:400;font-size:clamp(30px,4.4vw,54px);line-height:1.2;letter-spacing:-.012em;margin:0}

.prose p{font-size:18px;line-height:1.62;margin:0 0 22px;max-width:58ch}
.prose p:last-child{margin-bottom:0}
.prose--muted p{color:var(--felt)}
.prose--inset{margin-top:24px}
.band--dark .prose--muted p{color:var(--ash)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.split--offset{margin-top:calc(var(--section-gap) * 2.4)}
.split--end{align-items:end}
.split--right>*:first-child{grid-column:2}

/* Capabilities */
.cap{border-top:1px solid rgba(255,255,255,.18)}
.cap:last-of-type{border-bottom:1px solid rgba(255,255,255,.18)}
.cap__btn{width:100%;background:none;border:0;color:inherit;font:inherit;display:grid;grid-template-columns:88px 1fr 34px;gap:24px;align-items:baseline;padding:30px 0;text-align:left;cursor:pointer;position:relative}
.cap__btn::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,#8d6076,#a87d8e 40%,#4a7fa5);transition:width 1.25s var(--glide)}
.cap:hover .cap__btn::after,.cap.is-open .cap__btn::after{width:100%}
.cap__code{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pewter);transition:color .8s var(--glide)}
.cap:hover .cap__code,.cap.is-open .cap__code{color:var(--paper)}
.cap__name{font-size:clamp(24px,3.4vw,45px);font-weight:400;line-height:1.12;letter-spacing:-.02em}
.cap__sign{justify-self:end;font-size:24px;font-weight:300;line-height:1;color:var(--pewter);transition:transform 1.25s var(--glide),color .8s var(--glide)}
.cap.is-open .cap__sign{transform:rotate(45deg);color:var(--paper)}
.cap__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1.25s var(--glide)}
.cap.is-open .cap__panel{grid-template-rows:1fr}
.cap__clip{overflow:hidden}
.cap__body{display:grid;grid-template-columns:88px 1fr 1fr;gap:24px;padding:0 0 42px}
.cap__desc{margin:0;font-size:18px;line-height:1.62;color:var(--ash);max-width:40ch}
.cap__list{list-style:none;margin:0;padding:0}
.cap__list li{font-size:16px;line-height:1.9;color:var(--ash)}
.cap__list .heading{color:var(--paper);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}

/* Work */
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--section-gap)}
.frame{position:relative;margin:0}
.frame--wide{grid-column:span 2}
.frame__slot{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(140deg,#f0eeee 0%,#dcd9d9 46%,#bdbaba 100%)}
.frame--wide .frame__slot{aspect-ratio:16/10}
.frame__slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1.25s var(--glide),transform 1.25s var(--glide)}
.frame:hover .frame__slot img{filter:grayscale(0);transform:scale(1.03)}
.frame__ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;color:var(--pewter);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.frame figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:16px;line-height:1.3}
.frame figcaption span:last-child{color:var(--felt);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* Clients */
.clients{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.14);margin-top:var(--section-gap);padding:0}
.clients li{list-style:none;background:var(--paper);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;font-size:15px;font-weight:500;line-height:1.24;letter-spacing:-.005em;color:var(--inkstone);transition:background 1.25s var(--glide),color 1.25s var(--glide)}
.clients li:hover{color:var(--paper)}
.clients__logo{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);transition:filter 1.25s var(--glide)}
.clients li:hover .clients__logo{filter:grayscale(0)}
.clients__name{max-width:100%}

/* Contact */
.pill{display:inline-block;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.3);color:var(--paper);padding:11px 33px;font-size:16px;font-weight:400;transition:border-color .8s var(--glide),letter-spacing .8s var(--glide),background-color .8s var(--glide)}
.pill:hover{border-color:var(--paper);letter-spacing:.05em}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:var(--section-gap)}
.contact__closing{margin:0 0 34px;font-size:18px;line-height:1.62;color:var(--ash);max-width:52ch}
.sig{margin:34px 0 0;font-size:18px;line-height:1.62;color:var(--ash)}
.sig b{font-weight:400;display:block;margin-top:6px;color:var(--paper)}

/* Footer */
.foot{padding:0 0 68px;background:var(--obsidian);color:var(--paper)}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18)}
.foot address{font-style:normal;font-size:11px;line-height:1.36;color:var(--felt)}
.foot address span{display:block;margin-top:8px}
.foot address a:hover{color:var(--paper)}
.foot__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin:0 0 8px}
.foot__base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px;font-size:11px;color:var(--felt);letter-spacing:.06em}

/* Error pages */
.error-nav{position:fixed;top:0;left:0;right:0;height:66px;z-index:1000;display:flex;align-items:center;padding:0 var(--gutter);color:var(--paper)}
.error-page{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 60px;overflow:hidden;background:var(--obsidian);color:var(--paper)}
.error-page .grain{position:absolute;inset:0;opacity:.4}
.error__inner{position:relative;z-index:2;max-width:var(--page);margin:0 auto;width:100%;padding:0 var(--gutter)}
.error__eyebrow{color:var(--pewter);margin:0 0 18px}
.error__code{margin:0;font-weight:400;font-size:clamp(90px,22vw,280px);line-height:.78;letter-spacing:-.03em;color:var(--paper)}
.error__title{margin:18px 0 0;font-weight:300;font-size:clamp(26px,4vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:20ch}
.error__desc{margin:22px 0 0;font-size:18px;line-height:1.62;color:var(--ash);max-width:52ch}
.error__actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.error__link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color .8s var(--glide),border-color .8s var(--glide)}
.error__link:hover{color:var(--paper);border-color:var(--paper)}

/* Reveal */
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.25s var(--glide),transform 1.25s var(--glide)}
.rv.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:900px){
  .split,.contact__grid{grid-template-columns:1fr;gap:40px}
  .split--right>*:first-child{grid-column:1}
  .split--offset{margin-top:var(--section-gap)}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .clients{grid-template-columns:repeat(2,1fr)}
  .foot__cols{grid-template-columns:1fr 1fr}
  .cap__body{grid-template-columns:1fr;gap:26px}
  .cap__body>span{display:none}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .nav__menu{display:none}
  .burger{display:block}
  .hero{padding-bottom:28px}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:26px;margin-top:38px}
  .badge{width:82px;height:82px}
  .band{padding:calc(var(--section-gap) * 1.6) 0}
  .work__grid{grid-template-columns:1fr}
  .frame--wide{grid-column:span 1}
  .clients{grid-template-columns:1fr}
  .prose p{font-size:16px}
  .cap__btn{grid-template-columns:58px 1fr 24px;gap:14px;padding:22px 0}
  .foot__cols{grid-template-columns:1fr;gap:28px}
  .error-page{padding-top:110px}
  .error__actions{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}