/* ══ tokens ═══════════════════════════════════════════════
   The page is near-monochrome. All colour comes from the light
   behind the glass.
   ═══════════════════════════════════════════════════════════ */
:root{
  --graphite:#16181d;
  --graphite-2:#464b55;
  --haze:#eef0f4;
  --edge:rgba(255,255,255,.75);
  --edge-dark:rgba(22,24,29,.1);

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --gap:clamp(11px,1.3vw,20px);
  --pad:clamp(14px,2.2vw,34px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--haze);
  color:var(--graphite);
  font:400 clamp(15px,1.02vw,17px)/1.58 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--graphite);color:#fff}
:focus-visible{outline:2px solid var(--graphite);outline-offset:4px}

/* ══ the light ════════════════════════════════════════════ */
.lumen{
  position:fixed;inset:-20%;
  z-index:0;pointer-events:none;
  filter:blur(70px) saturate(150%);
}
.beam{
  position:absolute;
  border-radius:50%;
  mix-blend-mode:normal;
  opacity:.85;
}
.beam--a{
  width:58vw;height:58vw;left:-6%;top:-8%;
  background:radial-gradient(circle,rgba(255,59,92,.85),rgba(255,59,92,0) 68%);
  animation:drift-a 26s ease-in-out infinite;
}
.beam--b{
  width:52vw;height:52vw;right:-8%;top:4%;
  background:radial-gradient(circle,rgba(43,179,255,.85),rgba(43,179,255,0) 68%);
  animation:drift-b 31s ease-in-out infinite;
}
.beam--c{
  width:60vw;height:60vw;left:14%;bottom:-16%;
  background:radial-gradient(circle,rgba(255,211,61,.8),rgba(255,211,61,0) 68%);
  animation:drift-c 37s ease-in-out infinite;
}
.beam--d{
  width:46vw;height:46vw;right:6%;bottom:-6%;
  background:radial-gradient(circle,rgba(138,92,255,.8),rgba(138,92,255,0) 68%);
  animation:drift-d 29s ease-in-out infinite;
}
@keyframes drift-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(16vw,12vh) scale(1.16)}}
@keyframes drift-b{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-14vw,18vh) scale(.92)}}
@keyframes drift-c{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(12vw,-16vh) scale(1.18)}}
@keyframes drift-d{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-18vw,-10vh) scale(.9)}}

/* the lamp travelling behind the glass */
.lamp{
  position:absolute;
  width:min(620px,70vw);aspect-ratio:1;
  left:0;top:0;
  margin:calc(min(620px,70vw) / -2) 0 0 calc(min(620px,70vw) / -2);
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 62%);
  opacity:0;
  transition:opacity .5s ease;
  will-change:transform;
}
.lamp.is-lit{opacity:.85}

/* ══ the wall ═════════════════════════════════════════════ */
.wall{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  max-width:1460px;
  margin:0 auto;
  padding:clamp(16px,2.4vw,34px);
}

.tile{
  position:relative;
  padding:var(--pad);
  border-radius:clamp(14px,1.4vw,22px);
  background:rgba(255,255,255,.52);
  border:1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(22,24,29,.05),
    0 18px 40px -28px rgba(22,24,29,.5);
  backdrop-filter:blur(26px) saturate(165%);
  -webkit-backdrop-filter:blur(26px) saturate(165%);
  overflow:hidden;
  font-size:.95rem;
  transition:background .4s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .tile{background:rgba(255,255,255,.88)}
}
/* a thin spectral edge catches the light along the top */
.tile::before{
  content:"";
  position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,
    rgba(255,59,92,0),rgba(255,59,92,.65),rgba(255,211,61,.65),
    rgba(61,220,132,.65),rgba(43,179,255,.65),rgba(138,92,255,0));
  opacity:.5;
  transition:opacity .45s ease;
}
.tile:hover{
  background:rgba(255,255,255,.4);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(22,24,29,.06),
    0 26px 54px -26px rgba(22,24,29,.55);
}
.tile:hover::before{opacity:1}

/* ── the bento spans ── */
.tile--title  {grid-column:span 8;display:flex;flex-direction:column;justify-content:center;min-height:min(54vh,480px);padding:clamp(22px,3.4vw,52px)}
.tile--prism  {grid-column:span 4;display:grid;place-items:center;padding:clamp(10px,1.4vw,20px)}
.tile--copy   {grid-column:span 7;display:grid;gap:.9em;align-content:center;font-size:1rem}
.tile--p1     {grid-column:span 5}
.tile--p2,
.tile--p3,
.tile--p4     {grid-column:span 4}
.tile--p5,
.tile--p6     {grid-column:span 6}
.tile--motion {grid-column:span 12}
.tile--contact{grid-column:span 8}
.tile--fine   {grid-column:span 4;display:flex;flex-direction:column;justify-content:space-between;gap:18px}

@media (max-width:1040px){
  .wall{grid-template-columns:repeat(6,1fr)}
  .tile--title,.tile--motion,.tile--contact{grid-column:span 6}
  .tile--prism{grid-column:span 6;min-height:260px}
  .tile--copy{grid-column:span 6}
  .tile--p1,.tile--p2,.tile--p3,
  .tile--p4,.tile--p5,.tile--p6{grid-column:span 3}
  .tile--fine{grid-column:span 6}
}
@media (max-width:620px){
  .wall{grid-template-columns:1fr}
  .tile{grid-column:span 1!important}
}

/* ══ the title tile ═══════════════════════════════════════ */
.kicker{
  display:flex;align-items:center;gap:10px;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-2);
  margin-bottom:clamp(16px,2.4vh,26px);
}
.kicker i{
  width:10px;height:10px;border-radius:50%;
  background:conic-gradient(#ff3b5c,#ffd33d,#3ddc84,#2bb3ff,#8a5cff,#ff3b5c);
  animation:spin 9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.name{
  font-size:clamp(2.6rem,9.2vw,7.2rem);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.045em;
  margin-bottom:clamp(20px,3vh,34px);
}
.lede{
  max-width:46ch;
  font-size:clamp(1rem,1.4vw,1.22rem);
  color:var(--graphite-2);
}
.chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(20px,3vh,32px);
}
.chips li{
  padding:6px 13px;
  border-radius:999px;
  font-size:.79rem;
  color:var(--graphite);
  background:rgba(255,255,255,.6);
  border:1px solid var(--edge-dark);
}

/* ══ the prism ════════════════════════════════════════════ */
.tile--prism svg{width:100%;height:auto;max-height:min(46vh,420px)}
.glass{
  fill:rgba(255,255,255,.4);
  stroke:rgba(22,24,29,.35);
  stroke-width:1.5;
  stroke-linejoin:round;
}
.glass--sheen{
  fill:none;
  stroke:rgba(255,255,255,.95);
  stroke-width:3;
  stroke-dasharray:60 380;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%{stroke-dashoffset:440}70%,100%{stroke-dashoffset:0}}
.ray{
  fill:none;
  stroke:var(--c,rgba(22,24,29,.5));
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:160;
  stroke-dashoffset:160;
  animation:cast 3.4s ease-out forwards;
}
.ray--in{stroke:url(#white);stroke-width:4;animation-delay:.1s}
.fan .ray:nth-child(1){animation-delay:.55s}
.fan .ray:nth-child(2){animation-delay:.7s}
.fan .ray:nth-child(3){animation-delay:.85s}
.fan .ray:nth-child(4){animation-delay:1s}
.fan .ray:nth-child(5){animation-delay:1.15s}
.fan .ray:nth-child(6){animation-delay:1.3s}
.fan .ray:nth-child(7){animation-delay:1.45s}
@keyframes cast{to{stroke-dashoffset:0}}

/* ══ shared ═══════════════════════════════════════════════ */
.label{
  font-size:.74rem;letter-spacing:.1em;
  color:var(--graphite-2);
  margin-bottom:clamp(12px,1.6vh,18px);
}
.h2{
  font-size:clamp(1.3rem,2.3vw,1.95rem);
  font-weight:600;letter-spacing:-.026em;
  line-height:1.12;
  max-width:22ch;
  margin-bottom:.2em;
}
.tile--copy p{color:var(--graphite-2);max-width:56ch}
.tile--copy .accent{
  color:var(--graphite);
  font-weight:500;
  border-left:2px solid rgba(22,24,29,.25);
  padding-left:13px;
}

.tile h3{
  font-size:clamp(1rem,1.3vw,1.14rem);
  font-weight:600;letter-spacing:-.012em;
  margin-bottom:7px;
}
.tile--p1 p,.tile--p2 p,.tile--p3 p,
.tile--p4 p,.tile--p5 p,.tile--p6 p,
.tile--motion p{color:var(--graphite-2)}

/* ══ in motion ════════════════════════════════════════════ */
.row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.2vw,34px);
}
@media (max-width:900px){.row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.row article{
  padding-top:14px;
  border-top:1px solid rgba(22,24,29,.18);
}
.row article:nth-child(1){border-top-color:rgba(255,59,92,.6)}
.row article:nth-child(2){border-top-color:rgba(255,211,61,.75)}
.row article:nth-child(3){border-top-color:rgba(61,220,132,.7)}
.row article:nth-child(4){border-top-color:rgba(43,179,255,.7)}

/* ══ contact ══════════════════════════════════════════════ */
.entity{
  font-size:clamp(1.3rem,2.6vw,2rem);
  font-weight:600;letter-spacing:-.03em;
  margin-bottom:clamp(16px,2.4vh,26px);
}
.facts{display:grid;border-top:1px solid rgba(22,24,29,.14)}
.facts > div{
  display:grid;gap:2px clamp(18px,2.6vw,40px);
  padding-block:clamp(11px,1.6vh,16px);
  border-bottom:1px solid rgba(22,24,29,.14);
}
@media (min-width:700px){.facts > div{grid-template-columns:108px 1fr;align-items:baseline}}
.facts dt{font-size:.72rem;letter-spacing:.1em;color:var(--graphite-2)}
.facts dd{
  margin:0;font-size:clamp(.95rem,1.15vw,1.06rem);font-weight:500;
  overflow-wrap:anywhere;
}

/* ══ colophon ═════════════════════════════════════════════ */
.swatches{display:flex;gap:6px}
.swatches i{
  display:block;width:100%;height:30px;border-radius:5px;
}
.swatches i:nth-child(1){background:#ff3b5c}
.swatches i:nth-child(2){background:#ff8a2b}
.swatches i:nth-child(3){background:#ffd33d}
.swatches i:nth-child(4){background:#3ddc84}
.swatches i:nth-child(5){background:#2bb3ff}
.swatches i:nth-child(6){background:#6a5cff}
.swatches i:nth-child(7){background:#b84cff}
.tile--fine p{font-size:.78rem;color:var(--graphite-2)}

/* ══ reveal + motion prefs ════════════════════════════════ */
.rise{opacity:0;transform:translateY(14px) scale(.995);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .beam,.kicker i,.glass--sheen{animation:none}
  .ray{stroke-dashoffset:0;animation:none}
  .lamp{display:none}
  .rise{opacity:1;transform:none;transition:none}
  .tile{transition:none}
}