/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root{
  /* ORGATEC 2026 palette — taken from the stand art direction */
  --blue:#1926C4;          /* electric cobalt — the signature */
  --blue-deep:#0E1682;
  --blue-soft:#3A46DA;
  --terra:#B44E2C;         /* terracotta / burnt orange */
  --terra-lt:#C9663F;
  --brown:#4C2A20;         /* deep felt brown */
  --off:#FFFFFF;           /* white — the page ground */
  --cream:#FFFFFF;
  --paper:#F4F4F7;         /* faintest neutral, for empty frames only */
  --ink:#141110;           /* deep charcoal */
  --ink-60:rgba(20,17,16,.62);
  --ink-35:rgba(20,17,16,.38);
  --line:rgba(20,17,16,.16);
  --line-lt:rgba(255,255,255,.22);

  /* the client's own ivory PET felt, used wherever an object has to read
     as the material rather than as a render */
  --felt-ivory:url("/assets/img/felt-ivory.webp");
  --ff:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --fs-mega:clamp(2.3rem,7.15vw,7.7rem);
  --fs-display:clamp(2.3rem,6.4vw,6.4rem);
  --fs-h2:clamp(1.75rem,3.7vw,3.6rem);
  --fs-body:clamp(.95rem,1.02vw,1.0625rem);
  --fs-label:.6875rem;

  --gutter:clamp(18px,4.4vw,72px);
  --maxw:1720px;
  --sec:clamp(88px,12vw,200px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--ff);font-size:var(--fs-body);font-weight:300;line-height:1.72;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
[id]{scroll-margin-top:clamp(72px,8vw,110px)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:var(--sec)}

.label{font-size:var(--fs-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.4}
.mega{font-size:var(--fs-mega);font-weight:300;line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.display{font-size:var(--fs-display);font-weight:300;line-height:.92;letter-spacing:-.04em;text-transform:uppercase}
.h2{font-size:var(--fs-h2);font-weight:300;line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.lead{font-size:clamp(1.02rem,1.35vw,1.4rem);font-weight:300;line-height:1.58;letter-spacing:-.008em}
.measure{max-width:54ch}
.dim{opacity:.62}

/* ---- buttons ---- */
.btn{
  --bg:var(--blue);--fg:#fff;--bd:var(--blue);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:1.15em 2.2em;background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  cursor:pointer;font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  line-height:1;overflow:hidden;-webkit-appearance:none;appearance:none;border-radius:0;
  transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
  will-change:transform;
}
.btn > *{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--terra);z-index:1;
  transform:translateY(101%);transition:transform .6s var(--ease-io)
}
.btn:hover::before{transform:translateY(0)}
.btn--ink{--bg:var(--ink);--bd:var(--ink)}
.btn--out{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--out:hover{--fg:#fff;--bd:var(--terra)}
.btn--onblue{--bg:#fff;--fg:var(--blue);--bd:#fff}
.btn--onblue:hover{--fg:#fff}
.btn--sm{padding:.95em 1.55em;font-size:.625rem;letter-spacing:.17em}
.btn--block{width:100%}

.tlink{display:inline-flex;align-items:center;gap:.7em;font-size:var(--fs-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:.5em;border-bottom:1px solid currentColor;
  opacity:.75;transition:opacity .4s var(--ease)}
.tlink:hover{opacity:1}
.tlink svg{transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
/* word-by-word headline reveal */
.tw{display:inline-block;overflow:hidden;vertical-align:top}
.tw > span{display:inline-block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.in .tw > span,.tw.in > span{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .tw > span{transform:none;transition:none}
}

/* ==========================================================================
   3 · CHROME — progress, rail, cursor, nav
   ========================================================================== */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:95;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue),var(--terra));pointer-events:none}

/* the information band: a seamless marquee that runs downward for ever.
   The track holds two identical halves, so translating it from -50% to 0
   returns to an identical frame and the loop never shows a seam. */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail-w,34px);z-index:60;overflow:hidden;
  background:var(--blue);color:#fff;transition:background .7s var(--ease)
}
.rail__track{position:absolute;top:0;left:0;width:100%;
  display:flex;flex-direction:column;align-items:center;
  animation:railScroll 38s linear infinite;will-change:transform}
.rail__track span{
  writing-mode:vertical-rl;font-size:.5625rem;font-weight:500;letter-spacing:.42em;
  text-transform:uppercase;padding:1.35em 0;white-space:nowrap;line-height:1}
@keyframes railScroll{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.rail__track{animation-duration:80s}}
body.has-rail .nav__in,body.has-rail .wrap{padding-left:calc(var(--gutter) + var(--rail-w,34px))}
@media (max-width:900px){
  :root{--rail-w:22px}
  .rail__track span{font-size:.5rem;letter-spacing:.3em;padding:1.15em 0}
}

/* THE POINTER LIGHT.  It is a light, so it rides above everything the page
   draws, pictures and the world included.  At rest it is a warm pool; the
   moment the pointer travels it draws out along its own heading and reads
   as a shaft of light sweeping the page. */
.blob{position:fixed;top:0;left:0;width:290px;height:290px;margin:-145px 0 0 -145px;z-index:1500;
  pointer-events:none;opacity:0;transition:opacity .55s var(--ease);
  border-radius:50%;
  /* a warm lamp rather than a wash: a hot orange core easing out through
     terracotta to nothing, so it throws light instead of tinting the page */
  background:radial-gradient(circle at 50% 50%,
    rgba(255,163,72,.62) 0%,
    rgba(238,120,46,.42) 26%,
    rgba(196,86,44,.18) 52%,
    rgba(180,78,44,0) 76%);
  filter:blur(16px);will-change:transform,opacity;
  transition:opacity .55s var(--ease)}
body.pointer-fine .blob{opacity:.58}
/* while the pointer is actually travelling the lamp burns brighter, and it
   settles back down a moment after it stops */
body.pointer-fine .blob.blob--move{opacity:.90}
/* IT IS GATED ON THE POINTER, NOT ON THE WIDTH.  A window under 1000px on a
   desktop is still a mouse, and hiding the light there is why it could go
   missing on a half-screen browser or at 150% display scaling. */
@media (hover:none),(pointer:coarse){.blob{display:none}}

.nav{position:fixed;inset:0 0 auto;z-index:80;transition:background .6s var(--ease),backdrop-filter .6s var(--ease),border-color .6s var(--ease);
  border-bottom:1px solid transparent}
.nav__in{display:flex;align-items:center;gap:clamp(14px,2.6vw,48px);height:clamp(62px,6.6vw,86px);
  width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:var(--line)}
.nav.on-dark{color:#fff}
.nav.on-dark.solid{background:rgba(14,22,130,.82);border-bottom-color:var(--line-lt)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand__mark{font-size:clamp(.95rem,1.25vw,1.15rem);font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.brand__logo{display:block;height:clamp(13px,1.45vw,17px);width:auto;
  /* the wordmark is white with its own alpha — nothing else to tint */}
.brand__logo--ft{height:20px;margin-bottom:.2em}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2vw,34px);margin-left:auto}
.nav__link{position:relative;font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  opacity:.72;transition:opacity .35s var(--ease);white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .5s var(--ease)}
.nav__link:hover{opacity:1}
.nav__link:hover::after{right:0}
.nav__right{display:flex;align-items:center;gap:clamp(10px,1.3vw,20px);margin-left:clamp(8px,1.8vw,26px)}
/* four bars that stand still when the sound is off and move when it is on */
.snd{display:inline-flex;align-items:center;gap:.6em;background:none;
  border:1px solid rgba(255,255,255,.28);padding:.6em .85em;margin:0;
  cursor:pointer;color:inherit;font:inherit;
  font-size:.5rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  opacity:.75;transition:opacity .35s var(--ease),border-color .35s var(--ease),
    background .35s var(--ease)}
.snd:hover{opacity:1;border-color:rgba(255,255,255,.6)}
.snd.on{opacity:1;border-color:#fff;background:rgba(255,255,255,.12)}
.snd em{font-style:normal;opacity:.6;letter-spacing:.14em}
.snd.on em{opacity:1}
[data-theme="light"] .snd{border-color:rgba(25,38,196,.3)}
[data-theme="light"] .snd:hover{border-color:rgba(25,38,196,.7)}
[data-theme="light"] .snd.on{border-color:var(--blue);background:rgba(25,38,196,.1)}
.snd:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.snd i{display:flex;align-items:flex-end;gap:2px;height:11px}
.snd b{display:block;width:1.5px;height:3px;background:currentColor;
  transition:height .3s var(--ease)}
.snd.on b{animation:sndBar 1.15s var(--ease-io) infinite}
.snd.on b:nth-child(2){animation-duration:.82s;animation-delay:-.3s}
.snd.on b:nth-child(3){animation-duration:1.4s;animation-delay:-.6s}
.snd.on b:nth-child(4){animation-duration:.96s;animation-delay:-.15s}
@keyframes sndBar{0%,100%{height:3px}50%{height:11px}}
@media (prefers-reduced-motion:reduce){
  .snd.on b{animation:none;height:7px}}
@media (max-width:900px){.snd span{display:none}}
@media (max-width:620px){.snd{padding:.55em .6em}.snd em{display:none}}

.lang{display:flex;align-items:center;gap:.4em;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.lang button{background:none;border:0;padding:2px 1px;cursor:pointer;color:inherit;font:inherit;font-weight:500;opacity:.55;transition:opacity .3s}
.lang button.on{opacity:1;text-decoration:underline;text-underline-offset:4px}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;margin-right:-8px}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
body.menu-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:75;background:var(--blue);color:#fff;
  padding:calc(clamp(62px,6.6vw,86px) + 30px) var(--gutter) 34px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
body.menu-open .menu{opacity:1;visibility:visible}
.menu a.mlink{display:block;padding:.5em 0;font-size:clamp(1.7rem,8vw,2.6rem);font-weight:300;letter-spacing:-.03em;
  text-transform:uppercase;border-bottom:1px solid var(--line-lt)}
.menu__foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:16px}
@media (max-width:1080px){.nav__links{display:none}.nav__cta{display:none}.burger{display:block}.nav__right{margin-left:auto}}

/* ==========================================================================
   4 · RIBBONS (the graphic signature)
   ========================================================================== */
.ribbons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ribbons svg{position:absolute;left:50%;top:0;width:180%;height:100%;transform:translateX(-50%)}
.ribbon-fixed{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ==========================================================================
   4b · MATERIAL RIBBON (canvas)
   ========================================================================== */
.rbn{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:block;
  /* a hair of softness on the silhouette: a canvas polygon meets the ground
     on a hard stair, and a hard stair is what makes felt read as a cut-out.
     Well under a pixel, so the fibre itself stays sharp. */
  filter:blur(.4px)}
.rbn--back{z-index:1}
.rbn--front{z-index:3}

/* every section's content sits above the back ribbon, below the front one */
.intro__grid,.sj__in,.prods .wrap,.why .wrap,
.cta__in,.inv__grid,.ft .wrap{position:relative;z-index:2}
.hero__in{position:relative;z-index:7}

/* ==========================================================================
   5 · HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:#16205c;color:#fff;overflow:hidden;
  padding-top:clamp(78px,8.5vw,120px);padding-bottom:clamp(24px,3.4vw,56px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.9}
.hero__media .fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 74% 10%, rgba(146,168,214,.42) 0%, rgba(146,168,214,0) 58%),
    radial-gradient(110% 95% at 14% 86%, rgba(25,38,196,.55) 0%, rgba(25,38,196,0) 64%),
    linear-gradient(168deg,#44548d 0%,#2b3a7c 34%,#16205c 66%,#0b1038 100%);
}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,44,.42) 0%,rgba(8,12,44,.04) 40%,rgba(6,9,34,.66) 100%)}
.hero__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.45;mix-blend-mode:overlay;pointer-events:none}
.hero__in{position:relative;z-index:7;width:100%;flex:1 1 auto;display:flex;flex-direction:column}
.hero__mid{flex:0 0 auto;padding-block:clamp(8px,1vw,16px) 0}
.hero__title-w{max-width:min(100%,62ch)}
.hero__top{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:baseline}
.hero__top .label{opacity:.82}
.hero h1{position:relative;font-family:var(--ff);font-size:var(--fs-mega);font-weight:300;
  line-height:.80;letter-spacing:-.048em;text-transform:uppercase;max-width:15ch}
.hero h1 .l2{display:block;padding-left:.09em}
.hero h1 em{font-style:normal;font-weight:300;opacity:.62}
.hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;
  margin-top:clamp(56px,15.6vh,178px);padding-top:0;position:relative;z-index:7}
.hero__foot-l{max-width:52ch}
.hero__event{opacity:.82}
.hero__lead{margin-top:clamp(12px,1.4vw,20px);max-width:44ch;opacity:.82}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.2vw,32px)}
.hero__scroll{display:flex;align-items:center;gap:.85em;font-size:.5625rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;opacity:.75;white-space:nowrap}
.hero__scroll b{font-size:.75rem;font-weight:400;letter-spacing:0;line-height:1;
  animation:nudge 2.6s var(--ease-io) infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__scroll b{animation:none}}
.hero__scroll i{position:relative;display:block;width:1px;height:42px;background:rgba(255,255,255,.28);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:0;width:1px;height:42px;background:#fff;
  transform:translateY(-100%);animation:sniff 2.6s var(--ease-io) infinite}
@keyframes sniff{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero__scroll i{animation:none}}
@media (max-width:760px){.hero__foot{flex-direction:column;align-items:flex-start}.hero__scroll{display:none}}

/* ==========================================================================
   6 · INTRO (quiet, off-white)
   ========================================================================== */
/* ---- the sound space behind the opening ------------------------------
   A clean, light room with objects suspended in it.  Depth does the work:
   how far away a thing is sets its size, how much of the room's haze sits
   in front of it, how soft its edge is and where it sits in the stack —
   so some pass behind the type and some come forward past it.  The type
   itself never moves and never loses contrast. */
/* THE SOUND SPACE IS SPACE.  The panels travel through a real field of
   stars and nebula, so the section carries a night ground and light type
   over it — the copy sits in a well of shadow that the drift never lifts. */
.intro{background:#04060f;color:#fff;border-top:0;
  position:relative;overflow:hidden;isolation:isolate}
.intro .label{color:rgba(255,255,255,.62)}
.intro .lead{color:rgba(255,255,255,.78)}
.intro .display,.intro .h2{color:#fff}
.intro__facts{list-style:none;border-top-color:rgba(255,255,255,.22)}
.intro__facts li{color:#fff}
.intro .tlink{color:#fff}
.intro .tlink::after{background:rgba(255,255,255,.6)}
/* the copy keeps its own pool of dark, so a panel passing in front of it
   never takes the contrast away */
.intro .wrap::before{content:"";position:absolute;inset:-6% -8% -10% -6%;z-index:-1;
  pointer-events:none;border-radius:50%/28%;
  background:radial-gradient(60% 54% at 34% 44%,rgba(4,6,18,.80),rgba(4,6,18,.42) 56%,
    rgba(4,6,18,0) 78%);filter:blur(24px)}
.intro .wrap{position:relative;z-index:3}
.drsky{position:absolute;inset:0;z-index:2;pointer-events:none;display:block;
  width:100%;height:100%}
.drift{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  perspective:1200px}
/* the room the objects hang in: light, with the Feltouch blue only as a
   breath of atmosphere at the edges */
/* the sky the panels travel through: a pale gradient with soft cloud, kept
   light enough that the typography over it never loses contrast */
.drift::before{content:"";position:absolute;inset:-14%;pointer-events:none;
  background-image:url("/assets/img/drift-sky.webp");
  background-size:cover;background-position:50% 50%;
  animation:skyDrift 168s linear infinite}
/* the deep of it, and a little breath of the house blue at the edges */
.drift::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 44%,rgba(4,6,16,0) 34%,
      rgba(4,6,16,.55) 74%,rgba(3,4,12,.86) 100%),
    linear-gradient(180deg,rgba(3,4,12,.72),rgba(3,4,12,0) 22%,
      rgba(3,4,12,0) 76%,rgba(3,4,12,.72))}
@keyframes skyDrift{
  0%  {transform:translate3d(0,0,0) scale(1.04)}
  50% {transform:translate3d(-2.2%,0.9%,0) scale(1.09)}
  100%{transform:translate3d(0,0,0) scale(1.04)}
}
@media (prefers-reduced-motion:reduce){.drift::before{animation-duration:260s}}
.drift__o{position:absolute;left:0;top:0;will-change:transform,opacity;
  transform-origin:50% 50%}
.drift__o img{display:block;width:100%;height:auto;position:relative;z-index:2}
/* A LIT PANEL LIGHTS FROM ITS OWN FACE.  The aperture itself is the lamp,
   so there is no glow sitting behind the render: the light is in the disc. */
/* a few objects ride in front of the copy, far enough back in tone that
   the text still reads through them */
.drift__o--near{z-index:4}
.intro__logo{display:block;width:clamp(58px,5.2vw,80px);height:auto;
  margin:clamp(20px,2.4vw,32px) 0 0;border-radius:2px;
  /* it sits on a night ground, so it is given a little room of its own */
  box-shadow:0 6px 22px rgba(3,6,44,.45)}
.intro__facts,.intro__b,.intro__k{position:relative}
@media (max-width:760px){.drift{opacity:.9}}

.intro__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,2.6vw,48px);align-items:start}
.intro__k{grid-column:1/span 4;grid-row:1}
.intro__b{grid-column:6/span 6;grid-row:1}
/* the facts sit in the left column and hang from the foot of the statement
   opposite, so the two columns finish on the same line */
.intro__facts{grid-column:1/span 4;grid-row:1;align-self:end;margin:0;padding:0;
  border-top:1px solid rgba(255,255,255,.22)}
.intro__facts li{padding:13px 0;text-align:left;font-size:.9375rem;font-weight:400;
  line-height:1.45;border-bottom:1px solid rgba(255,255,255,.16)}
/* the hall and the stand belong together, so they sit tight and share a rule */
.intro__facts li.intro__facts--pair{padding:9px 0;border-bottom:0;
  display:flex;align-items:baseline;gap:.8em}
.intro__facts li.intro__facts--pair:first-of-type{padding-top:15px}
.intro__facts li.intro__facts--pair i{font-style:normal;font-size:.5rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  /* the key leads, so it gets a column of its own and the two values align */
  flex:0 0 auto;min-width:5.4em}
/* the closing line of the statement: the same size as the rest, set solid
   white and given air, so it lands as a sign-off rather than a paragraph */
.intro__end{color:#fff !important;margin-top:1.5em !important}
.intro__b .h2{margin-bottom:clamp(20px,2.4vw,34px)}
.intro__b .lead + .lead{margin-top:1.05em}
@media (max-width:960px){.intro__k,.intro__b,.intro__facts{grid-column:1/span 12}
  .intro__facts{grid-row:auto;align-self:auto;margin-top:clamp(30px,3.4vw,48px)}
  .intro__k{margin-bottom:20px}}

/* ==========================================================================
   7 · SOUND JOURNEY — the orbit
   The objects travel a tilted ellipse on their own, for ever.  Depth is
   read from cos(angle): front objects are lower, larger and opaque; the
   far side rides higher, smaller and quieter.  The cursor only leans the
   ring and picks a focus — it never drives the motion.
   ========================================================================== */
.sj{background:var(--blue-deep);color:#fff;position:relative;overflow:hidden}
.sj::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 44%,rgba(58,70,218,.42),transparent 62%)}
.sj::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;
  background-image:radial-gradient(rgba(255,255,255,.5) .6px,transparent .7px);
  background-size:5px 5px;mix-blend-mode:overlay}
.sj__in{position:relative;z-index:3;padding-block:clamp(74px,9vw,140px) clamp(56px,7vw,110px)}
.sj__k{opacity:.5;text-align:center}
.sj__ttl{margin-top:clamp(18px,2.2vw,34px);text-align:center;
  font-size:clamp(1.9rem,5.6vw,5.4rem);font-weight:300;line-height:.98;
  letter-spacing:-.04em;text-transform:uppercase}
.sj__ttl b{display:block;font-weight:500}
.sj__lead{margin:clamp(20px,2.4vw,34px) auto 0;max-width:44ch;text-align:center;
  color:rgba(255,255,255,.66)}

/* the stage */
.sjsky{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  pointer-events:none}
.sj__in{position:relative;z-index:2}
.orb{position:relative;z-index:2;margin-top:clamp(4px,1vw,18px);
  height:clamp(430px,54vw,760px);touch-action:pan-y;cursor:grab}
.orb.dragging{cursor:grabbing}
.orb.dragging .orb__it{cursor:grabbing}
.orb__it{cursor:grab}
.orb__it--held{z-index:1400!important;filter:drop-shadow(0 22px 34px rgba(3,6,44,.5))}
.orb__ring{display:none;position:absolute;left:50%;top:52%;translate:-50% -50%;pointer-events:none;
  border-radius:50%;border:1px solid rgba(255,255,255,.13)}
/* ---- the globe ---------------------------------------------------------
   Deep blue ground, thin white graticule, nothing else.  It sits at the
   centre of the ring, so objects on the far side pass behind it and objects
   on the near side pass in front. */
.glb{position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:600;
  display:block;pointer-events:none}
.glb__hit{position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:601;
  border-radius:50%;cursor:grab;touch-action:none}
.glb__hit.turning{cursor:grabbing}
.glb__hit:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:6px}
.glb__tags{position:absolute;inset:0;z-index:900;pointer-events:none}
/* a fair is a thing you can press: the label takes the pointer, the leader
   and the marker stay as drawing */
.glb__tag{pointer-events:auto;cursor:pointer}
.glb__tag:hover b{color:#fff}
.glb__tag:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:4px}
/* the card itself: small, square-cornered, in the stage's own corner */
/* it opens outside the ring the products travel on, and above it, so it
   never lands on a product; the side it takes is the far one from the label
   it came from */
.glb__pop{position:absolute;right:calc(-1 * clamp(10px,4vw,58px));top:-8%;
  z-index:1300;width:clamp(198px,17.5vw,242px);
  background:rgba(6,10,52,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.24);padding:clamp(14px,1.5vw,20px);
  animation:popIn .38s var(--ease) both}
.glb__pop[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}}
.glb__popx{position:absolute;right:8px;top:8px;background:none;border:0;padding:6px;
  color:rgba(255,255,255,.55);cursor:pointer;line-height:0}
.glb__popx:hover{color:#fff}
.glb__popk{margin:0;font-size:.4375rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.glb__popt{margin:.6em 0 0;font-size:.9375rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;line-height:1.2;padding-right:1.4em}
.glb__popd{margin:1em 0 0;border-top:1px solid rgba(255,255,255,.18)}
.glb__popd div{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.glb__popd div:last-child{border-bottom:0}
.glb__popd dt{font-size:.4375rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.glb__popd dd{margin:.35em 0 0;font-size:.75rem;color:#fff;line-height:1.45}
.glb__pop--left{right:auto;left:calc(-1 * clamp(10px,4vw,58px))}
.glb__popa{margin:1em 0 0;font-size:.6875rem;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.72)}
.glb__pops{display:inline-block;margin-top:1em;font-size:.5rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.28);text-decoration:none}
.glb__pops:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:620px){.glb__pop{right:auto;left:0;width:min(280px,86vw)}}
.glb__tag{position:absolute;left:0;top:0;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);white-space:nowrap;
  will-change:transform,opacity}
.glb__tag b{display:block;font-size:.5625rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
.glb__tag i{display:block;margin-top:.42em;font-style:normal;font-size:.5rem;
  font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.42)}
/* the fair this page is for reads first; the rest of the tour follows it */
.glb__tag--key b{font-size:.6875rem;color:#fff}
.glb__tag--key i{color:rgba(255,255,255,.6)}
/* THE LABEL TAKES THE POINTER.  The block above sets pointer-events:none on
   the whole tag box so it never blocks a drag of the globe, which also left
   nothing to click; the text itself is the target. */
.glb__tag b,.glb__tag i{pointer-events:auto;cursor:pointer}
.glb__tag--l{text-align:right;translate:-100% 0}
@media (max-width:820px){.glb__tag i{display:none}}
@media (max-width:620px){.glb__tags{display:none}}
/* the same tour, written out — the globe is the picture of it, not the
   only way to read it */
.glb__list{position:absolute;left:0;right:0;bottom:-2px;margin:0;padding:0;
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:.5em clamp(18px,2.4vw,40px);z-index:4;pointer-events:none}
.glb__list li{font-size:.5rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.glb__list li b{font-weight:500;color:rgba(255,255,255,.72)}
.glb__list li.is-key b{color:#fff}
.glb__list li.is-key{color:rgba(255,255,255,.62)}
@media (max-width:620px){.glb__list{position:static;margin-top:18px}}

.orb__it{position:absolute;left:0;top:0;width:var(--w,104px);aspect-ratio:3/4;
  margin:calc(var(--w,104px)*-.667) 0 0 calc(var(--w,104px)*-.5);
  border:0;padding:0;background:none;cursor:pointer;
  transition:filter .6s var(--ease);will-change:transform,opacity}
.orb__it img{width:100%;height:100%;object-fit:contain;display:block;
  position:relative;z-index:2;
  box-shadow:0 18px 40px rgba(6,10,60,.42)}
.orb__it--cut{aspect-ratio:1}
.orb__it--cut img{object-fit:contain;box-shadow:none;
  filter:saturate(var(--sat,1)) brightness(var(--br,1)) blur(var(--haze,0px))}
/* one light for the whole scene: it comes from the upper left, the same side
   the sphere is lit from, so everything throws the same way */
.orb__it--cut{filter:drop-shadow(calc(var(--w,104px)*.07) calc(var(--w,104px)*.10)
                     calc(var(--w,104px)*.16) rgba(3,6,44,var(--sh,.5)))}
.orb__it--cut::after{display:none}
/* a luminaire in orbit is lit: a warm core that comes up and goes down on
   its own rhythm, screened over the object so it reads as light */
/* THE LIGHT SITS WHERE THE LIGHT IS.  One generic oval in the middle of the
   box was wrong on every object: a wall strip lights along its length, a
   pendant lights from under its shade, and a cloud lights at its bulb.  Each
   carries its own emitter, measured on its own render and mapped through the
   letterboxing that object-fit:contain puts the picture in. */
.orb__lit{position:absolute;z-index:var(--lz,3);left:var(--lx,50%);top:var(--ly,56%);translate:-50% -50%;
  width:var(--lw,60%);height:var(--lh,34%);pointer-events:none;border-radius:50%;
  rotate:var(--lr,0deg);
  mix-blend-mode:screen;opacity:0;
  background:radial-gradient(closest-side,
    rgba(255,214,150,.98) 0%, rgba(255,182,92,.46) 44%, rgba(255,170,70,0) 100%);
  filter:blur(5px)}
/* SOME LIGHT DOES NOT COME OUT OF A POINT.  A lit ceiling panel throws its
   glow out behind its own plate, so it reads as a rectangle of ambience
   around the object rather than a spot on its face. */
.orb__lit--rect{--lz:1;border-radius:16%;filter:blur(11px);
  background:radial-gradient(closest-side,
    rgba(255,206,140,.72) 0%, rgba(255,176,86,.34) 52%, rgba(255,170,70,0) 100%)}
@media (prefers-reduced-motion:reduce){.orb__lit{opacity:.5!important}}
/* the scene's ambient blue, laid on the object through its own shape */
/* THE OBJECTS ARE FELT.  Every cut-out has been re-dyed in the client's own
   ivory PET felt — the render's own light and shadow kept, its colour
   replaced, and the real fibre laid over it — so nothing has to be
   composited over the object at run time. */
.orb__amb{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--amb,rgba(26,44,178,0));
  -webkit-mask:var(--src) center/contain no-repeat;
          mask:var(--src) center/contain no-repeat}
.orb__it::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.orb__it:focus-visible{outline:2px solid #fff;outline-offset:4px}
.orb__name{position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:1200;
  pointer-events:none;text-align:center;opacity:0;transition:opacity .5s var(--ease)}
.orb__name.on{opacity:1}
.orb__name span{display:block;font-size:clamp(.95rem,1.5vw,1.35rem);font-weight:400;
  letter-spacing:.22em;text-transform:uppercase}
.orb__name i{display:block;margin-top:.7em;font-style:normal;font-size:.5625rem;
  font-weight:500;letter-spacing:.2em;opacity:.5;text-transform:uppercase}
.sj__follow{display:flex;justify-content:center;align-items:center;gap:1em;
  margin-top:clamp(20px,2.6vw,40px);opacity:.6;position:relative;z-index:3}
.sj__follow i{position:relative;display:block;width:1px;height:38px;
  background:rgba(255,255,255,.25);overflow:hidden}
.sj__follow i::after{content:"";position:absolute;left:0;top:0;width:1px;height:38px;
  background:#fff;transform:translateY(-100%);animation:sniff 2.6s var(--ease-io) infinite}
@media (max-width:900px){
  .orb{height:clamp(280px,64vw,430px)}
  .orb__ring{width:96%;aspect-ratio:2.6/1}
}
@media (prefers-reduced-motion:reduce){.sj__follow i::after{animation:none}}

/* ==========================================================================
   8 · PRODUCTS
   ========================================================================== */
.prods{background:var(--cream);position:relative;border-top:1px solid var(--line)}
.prods__head{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,44px);align-items:end;
  padding-bottom:clamp(26px,3vw,48px);border-bottom:1px solid var(--ink)}
.prods__head h2{grid-column:1/span 8}
.prods__head .sub{grid-column:9/span 4;padding-bottom:.5em;font-size:.875rem;max-width:38ch;opacity:.72}
@media (max-width:960px){.prods__head h2,.prods__head .sub{grid-column:1/span 12}.prods__head .sub{padding-top:14px}}

.pcard{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:block}
.pcard[hidden]{display:none}
.pcard__fr{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.pcard__fr.alt{background:#EEEFF4}
.pcard__fr img{width:100%;height:100%;object-fit:contain;transition:transform 1.1s var(--ease)}
.pcard__fr img.contain{object-fit:contain;padding:8%}
.pcard:hover .pcard__fr img,.pcard:focus-visible .pcard__fr img{transform:scale(1.035)}
.pcard__fr .ph{position:absolute;inset:0;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard__fr .ph{transform:scale(1.03)}
.pcard__go{position:absolute;left:0;bottom:0;padding:.85em 1.1em;background:var(--blue);color:#fff;
  font-size:.5rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pcard:hover .pcard__go,.pcard:focus-visible .pcard__go{opacity:1;transform:none}
.pcard__b{display:block;padding-top:13px}
.pcard__n{display:inline-block;position:relative;font-size:.9375rem;font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.2}
.pcard__n::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:var(--terra);transition:right .5s var(--ease)}
.pcard:hover .pcard__n::after{right:0}
.pcard__m{display:block;margin-top:.42em;font-size:.6875rem;font-weight:300;color:var(--ink-60);line-height:1.5}
.pcard__c{display:block;margin-top:.28em;font-size:.5875rem;letter-spacing:.14em;color:var(--ink-35)}
@media (max-width:420px){.pcard__n{font-size:.875rem}}

/* felt placeholder — deliberately quiet until the photographs arrive */
.ph{display:flex;align-items:flex-end;background-color:var(--paper);position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(20,17,16,.10) .9px,transparent 1px);background-size:6px 6px}
.ph__t{position:relative;padding:clamp(12px,1.5vw,20px);font-size:.5rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(20,17,16,.34)}
.ph--blue{background-color:#2331cf}.ph--blue .ph__t{color:rgba(255,255,255,.6)}
.ph--terra{background-color:#b95333}.ph--terra .ph__t{color:rgba(255,255,255,.66)}
.ph--brown{background-color:#4c2a20}.ph--brown .ph__t{color:rgba(255,255,255,.55)}
.ph--ink{background-color:#171412}.ph--ink .ph__t{color:rgba(255,255,255,.5)}
.ph--off{background-color:#EEEFF4}
.ph--cream{background-color:#F7F7FA}

/* ==========================================================================
   9 · PRODUCT OVERLAY
   ========================================================================== */
.ov{position:fixed;inset:0;z-index:120;display:none}
.ov.open{display:block}
.ov__bg{position:absolute;inset:0;background:rgba(14,22,130,.5);backdrop-filter:blur(4px);opacity:0;transition:opacity .55s var(--ease)}
.ov.in .ov__bg{opacity:1}
.ov__panel{position:absolute;inset:0 0 0 auto;width:min(1120px,100%);background:var(--cream);overflow-y:auto;
  transform:translateX(4%);opacity:0;transition:transform .7s var(--ease-io),opacity .5s var(--ease)}
.ov.in .ov__panel{transform:none;opacity:1}
.ov__close{position:sticky;top:0;z-index:3;width:100%;display:flex;justify-content:flex-end;align-items:center;gap:.7em;
  padding:16px clamp(18px,3vw,44px);background:var(--cream);border:0;border-bottom:1px solid var(--line);cursor:pointer;
  font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.ov__in{padding:clamp(18px,3vw,44px) clamp(18px,3vw,44px) clamp(48px,6vw,92px)}
.ov__fr{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper);margin-bottom:clamp(24px,3vw,44px)}
.ov__fr img{width:100%;height:100%;object-fit:contain;background:var(--paper)}
.ov__fr .ph{position:absolute;inset:0}
.ov__fr::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:5px;background:var(--terra)}
.ov__t{font-size:clamp(1.9rem,4vw,3.4rem);font-weight:300;letter-spacing:-.035em;text-transform:uppercase;line-height:.98}
.ov__specs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(24px,3vw,42px);border-top:1px solid var(--ink)}
.ov__specs div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.ov__specs div:nth-child(3n){border-right:0}
.ov__specs dt{margin-bottom:.65em;opacity:.5}
.ov__specs dd{font-size:.9375rem;font-weight:400}
.ov__cta{margin-top:clamp(28px,3.4vw,48px);display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:640px){.ov__specs{grid-template-columns:1fr}.ov__specs div{border-right:0}}

/* ==========================================================================
   10 · VISIT
   ========================================================================== */
.why{background:var(--off);border-top:1px solid var(--line)}
.why__head{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(22px,2.6vw,44px);align-items:end}
.why__intro{grid-column:1/span 6}
.why__facts{grid-column:8/span 5;margin:0}
.why__facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.why__facts div:first-child{border-top:1px solid var(--line)}
.why__facts dt{font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.45}
.why__facts dd{font-size:.875rem;font-weight:400;text-align:right}
.why__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,44px);
  margin-top:clamp(40px,4.6vw,78px);border-top:1px solid var(--line)}
.why__list li{display:flex;gap:1.1em;padding-top:clamp(20px,2.2vw,32px)}
.why__list .n{font-size:.5875rem;font-weight:500;letter-spacing:.16em;color:var(--ink-35);flex:0 0 auto}
.why__list h3{font-size:clamp(1rem,1.3vw,1.25rem);font-weight:400;letter-spacing:-.01em;
  text-transform:uppercase;margin-bottom:.5em}
.why__list p{font-size:.875rem;font-weight:300;line-height:1.6;color:var(--ink-60)}
@media (max-width:960px){
  .why__head > div:first-child,.why__facts{grid-column:1}
  .why__facts{margin-top:28px}
  .why__list{grid-template-columns:1fr;gap:0}
  .why__list li{border-bottom:1px solid var(--line);padding-bottom:clamp(18px,4vw,26px)}
  .why__list li:last-child{border-bottom:0}
}

/* ==========================================================================
   11 · CTA BAND
   ========================================================================== */
.cta{position:relative;background:var(--blue);color:#fff;min-height:92svh;display:flex;align-items:center;overflow:hidden}
.cta__in{position:relative;z-index:3;text-align:center;width:100%}
.cta__k{opacity:.66;margin-bottom:clamp(20px,2.6vw,38px)}
.cta h2{font-size:var(--fs-display);font-weight:300;line-height:.92;letter-spacing:-.04em;text-transform:uppercase}
.cta__d{margin-top:clamp(18px,2.2vw,32px);font-size:.9375rem;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.cta__q{margin:clamp(24px,3vw,44px) auto 0;max-width:44ch;color:rgba(255,255,255,.78)}
.cta__b{margin-top:clamp(28px,3.4vw,48px)}

/* ==========================================================================
   12 · INVITATION FORM
   ========================================================================== */
.inv{background:var(--off);position:relative;overflow:hidden}
.inv__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(26px,3vw,64px)}
.inv__l{grid-column:1/span 4}
.inv__r{grid-column:6/span 7}
@media (max-width:1000px){.inv__l,.inv__r{grid-column:1/span 12}}
.inv__l .h2{margin:.35em 0 .55em}
.inv__pts{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line)}
.inv__pts li{padding:13px 0;border-bottom:1px solid var(--line);font-size:.875rem;color:var(--ink-60);display:flex;gap:.9em}
.inv__pts li::before{content:"";width:6px;height:6px;margin-top:.6em;background:var(--terra);border-radius:50%;flex:0 0 auto}

.form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.9vw,28px)}
.fld{display:flex;flex-direction:column;gap:.5em}
.fld--full{grid-column:1/-1}
.fld label{font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35)}
.fld label .rq{color:var(--terra)}
.fld input,.fld select,.fld textarea{width:100%;padding:.9em 0;background:transparent;border:0;border-bottom:1px solid var(--line);
  font-size:1rem;font-weight:300;border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .4s var(--ease)}
.fld textarea{resize:vertical;min-height:104px;line-height:1.6}
.fld select{cursor:pointer;padding-right:1.6em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23141110' stroke-width='1'/></svg>");
  background-repeat:no-repeat;background-position:right .2em center}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--blue)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(20,17,16,.26)}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-bottom-color:var(--terra)}
.fld .msg{display:none;font-size:.6875rem;color:var(--terra)}
.fld.bad .msg{display:block}
.cons{grid-column:1/-1;display:flex;flex-direction:column;gap:13px;margin-top:6px}
.chk{display:flex;gap:.9em;align-items:flex-start;cursor:pointer;font-size:.8125rem;line-height:1.6;color:var(--ink-60)}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .bx{width:17px;height:17px;margin-top:.26em;flex:0 0 auto;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.chk .bx svg{opacity:0;transition:opacity .25s}
.chk input:checked + .bx{background:var(--blue);border-color:var(--blue)}
.chk input:checked + .bx svg{opacity:1}
.chk input:focus-visible + .bx{outline:2px solid var(--blue);outline-offset:2px}
.chk a{text-decoration:underline;text-underline-offset:3px}
.chk.bad .bx{border-color:var(--terra)}
.fsub{grid-column:1/-1;margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.fnote{font-size:.6875rem;color:var(--ink-35)}
@media (max-width:620px){.form{grid-template-columns:1fr}.fld--full,.cons,.fsub{grid-column:1}}
.ok{display:none;background:var(--blue);color:#fff;padding:clamp(28px,4.2vw,62px)}
.ok.on{display:block;animation:okIn .8s var(--ease) both}
@keyframes okIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* the honeypot: taken out of the layout without display:none, which some bots
   check for, and left unreachable by pointer or keyboard */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* the address and the re-open button belong to the mail-programme ending only;
   when the request was delivered on its own there is nothing left to press */
.ok__mailonly{display:none}
.ok--mail p.ok__mailonly{display:block}
.ok--mail a.ok__mailonly{display:inline-flex}
.ok__to{margin-top:1.4em;font-size:.75rem;letter-spacing:.02em;color:rgba(255,255,255,.7)}
.ok__to a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:2px;margin-left:.4em}
.ok__to a:hover{border-bottom-color:#fff}
.ok .tick{width:42px;height:42px;border:1px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.form.gone{display:none}

/* ==========================================================================
   13 · FOOTER + STICKY CTA
   ========================================================================== */
.ft{background:var(--ink);color:#fff;padding-block:clamp(54px,6.4vw,104px) clamp(26px,3vw,44px)}
.ft__top{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,2.6vw,44px)}
.ft__b{grid-column:1/span 4}
.ft__b .brand__mark{font-size:1.05rem}
.ft__ad{margin-top:20px;font-size:.8125rem;line-height:1.85;color:rgba(255,255,255,.62);font-style:normal}
.ft__ad a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.soc{display:flex;gap:9px;margin-top:24px}
.soc a{width:36px;height:36px;border:1px solid var(--line-lt);display:flex;align-items:center;justify-content:center;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.soc a:hover{background:var(--blue);border-color:var(--blue)}
.soc svg path{fill:#fff}
.ft__cols{grid-column:6/span 7;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,36px)}
.ft__col h4{margin-bottom:15px;opacity:.5}
.ft__col li{margin-bottom:9px}
.ft__col a{font-size:.8125rem;color:rgba(255,255,255,.68);transition:color .3s}
.ft__col a:hover{color:#fff}
.ft__bt{margin-top:clamp(40px,5vw,78px);padding-top:20px;border-top:1px solid var(--line-lt);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
.ft__lg{display:flex;flex-wrap:wrap;gap:22px}
.ft__lg a,.ft__cp{font-size:.6875rem;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.ft__lg a:hover{color:#fff}
@media (max-width:960px){.ft__b,.ft__cols{grid-column:1/span 12}.ft__cols{margin-top:34px}}
@media (max-width:560px){.ft__cols{grid-template-columns:repeat(2,1fr)}}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform .55s var(--ease)}
.sticky.show{transform:none}
@media (max-width:1080px){.sticky{display:block}body{padding-bottom:76px}}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 18px;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:0}
/* the conceptual statement — editorial type, the ribbon moves beneath it */
/* THE STAND, HALF SEEN.  It runs the full width of the copy above it and
   dissolves into the dark at its edges, so it reads as something surfacing
   out of the blue rather than a picture placed on it. */
.hero__sketch{display:block;margin:clamp(16px,2vw,28px) 0 0;
  width:100%;height:auto;opacity:.26;
  /* it takes the pointer so it can answer it: pass the light over the stand
     and the drawing comes up out of the dark */
  cursor:crosshair;
  transition:opacity .5s var(--ease),filter .5s var(--ease);
  filter:blur(.35px);
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 15%,#000 66%,transparent 100%),
          linear-gradient(90deg,transparent 0%,#000 9%,#000 74%,transparent 100%);
          mask:linear-gradient(180deg,transparent 0%,#000 15%,#000 66%,transparent 100%),
          linear-gradient(90deg,transparent 0%,#000 9%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:sketchBreath 21s ease-in-out infinite}
@keyframes sketchBreath{0%,100%{opacity:.20}50%{opacity:.34}}
.hero__sketch:hover{animation:none;opacity:.92;filter:blur(0)}
@media (prefers-reduced-motion:reduce){.hero__sketch{animation:none;opacity:.26}}
@media (max-width:760px){.hero__sketch{opacity:.22;margin-top:14px}}
.hero__stmt{position:relative;padding-top:clamp(18px,2.4vw,34px);
  border-top:1px solid rgba(255,255,255,.24)}
.hero__stmt-t{font-family:var(--ff);font-size:clamp(1.45rem,3.95vw,4.5rem);font-weight:500;
  line-height:1.06;letter-spacing:.045em;text-transform:uppercase;color:#fff;text-wrap:balance}
.hero__stmt-t span{display:inline-block;opacity:0;transform:translateY(22px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.hero__stmt-t span:nth-child(2){transition-delay:.13s}
.hero__stmt-t span:nth-child(3){transition-delay:.26s}
.hero.lit .hero__stmt-t span{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero__stmt-t span{opacity:1;transform:none;transition:none}}
/* ==========================================================================
   HERO ARTWORK — supplied felt lamella composition
   Geometry mirrors the reference frame (1672 x 941): the artwork's bounding
   box sat at x 53, y 447, 1555 wide. Percentages keep that relationship at
   any viewport, and the date line is positioned inside the artwork's own box
   so it always lands on the band.
   ========================================================================== */
/* The client's own three-layer ribbon, re-dyed to the supplied felt and
   given its fibre.  It sits on the right, entering above the top edge and
   leaving through the bottom, clear of the headline. */
.hero__art{display:none;position:absolute;right:-7%;top:-9%;height:126%;
  aspect-ratio:893/928;z-index:2;pointer-events:none}
.hero__art img{display:block;width:100%;height:100%;object-fit:contain}
/* THE RIBBON HAS TO SIT ON THE PAGE, NOT IN IT.  Its blue lamella is a deep
   navy felt and the page behind it is cobalt: close enough in hue that where
   the band runs thin the two dissolve into one another and the felt reads as
   a stain rather than as a layer that continues.  A shadow of its own gives
   every band an edge to end on, so the blue stays blue the whole way. */
.hero__art img,.hero__art canvas{
  filter:drop-shadow(0 16px 30px rgba(2,5,34,.52))
         drop-shadow(0 0 6px rgba(2,5,34,.55))
         drop-shadow(0 1px 2px rgba(2,5,34,.62))}
/* the ribbon is the client's own artwork; the wave is a displacement of it,
   not a redrawing of it — the canvas carries the same pixels, shifted */
.hero__art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__art.wv img{visibility:hidden}
.hero__art-date{position:absolute;left:5.4%;top:6.3%;margin:0;white-space:nowrap;
  color:#fff;opacity:.94;font-size:clamp(.5rem,.68vw,.72rem);letter-spacing:.2em}
/* the date used to ride the still artwork; with the ribbon animated it
   belongs with the copy, at every width */
.hero__event--flow{display:block;opacity:.85;margin-bottom:1.1em}

.hero__follow{position:absolute;right:var(--gutter);top:28%;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:.85em;width:12.5ch;
  font-size:.5625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  opacity:.8;text-align:center;line-height:1.7}
.hero__follow b{font-size:.8rem;font-weight:400;letter-spacing:0;line-height:1;
  animation:nudge 2.6s var(--ease-io) infinite}
.hero__follow i{display:block;width:1px;height:clamp(60px,7vw,104px);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
@media (prefers-reduced-motion:reduce){.hero__follow b{animation:none}}

/* the artwork breathes very slightly so the hero is never quite static */
@keyframes artDrift{
  0%   {transform:translate3d(0,0,0) scale(1)}
  50%  {transform:translate3d(-0.35%,0.7%,0) scale(1.008)}
  100% {transform:translate3d(0,0,0) scale(1)}
}
.hero__art{animation:artDrift 19s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero__art{animation-duration:34s}}

@media (max-width:900px){
  /* anchor right so the turn — the most characterful part — stays in frame */
  .hero__art{left:auto;right:-24%;top:auto;bottom:-2%;width:auto;height:42%;
    animation-duration:24s}
  .hero__art-date{display:none}
  .hero__event--flow{display:block;opacity:.85}
  .hero__follow{display:none}
  .hero__foot{margin-top:clamp(28px,6vh,64px)}
}
/* ==========================================================================
   DESIGN HIGHLIGHTS — one gallery, sketch revealed as the real product
   ========================================================================== */
/* a strict index: identical containers, aligned rows, aligned columns */
/* EVERY ROW LINES UP.  The descriptions are different lengths, so left to
   themselves the designer credits sat at four different heights across a row.
   The cards stretch to the row instead, and the credit is pushed to the foot
   of the card — so the credits read as one line across the grid. */
.gal{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(46px,5vw,92px) clamp(26px,2.8vw,56px);
  align-items:stretch;margin-top:clamp(44px,5vw,88px);
  max-width:none}
.gi{display:flex;flex-direction:column}
.gi__b{flex:1 1 auto}
.gi__m{margin-top:auto;padding-top:1.4em}
@media (max-width:1240px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:940px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.gal{grid-template-columns:1fr;
  gap:clamp(38px,9vw,60px);max-width:none}}

.gi__fr{position:relative;display:block;width:100%;aspect-ratio:3/4;
  overflow:hidden;padding:0;border:0;cursor:pointer;background:#fff}
/* no frame: the artwork fills the rectangle edge to edge.  Sketch and
   render are cropped to the same 3:4 box, so the crossfade never moves
   or rescales the product. */
/* NO PRODUCT IS EVER CROPPED OR STRETCHED.  The drawings are the client's
   own artwork: each one is shown whole, in its own proportions, inside its
   frame — filling the frame would crop the object, and forcing the frame
   would distort it. */
.gi__fr img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block}
/* ---- luminaires only ---------------------------------------------------
   The drawing never changes.  What changes is the light: one warm source
   per fixture, exactly where that fixture sits on the plate, coming up
   slowly and warming the sheet a little as it does. */
/* the source takes the shape of its fixture: --w/--h are the fitting's own
   footprint, and the blur turns it into light.  A slot therefore lights
   along its whole length rather than blooming from one point. */
.gi__lamp{position:absolute;left:var(--x);top:var(--y);
  width:var(--w);height:var(--h);translate:-50% -50%;rotate:var(--r,0deg);
  pointer-events:none;opacity:0;border-radius:50%;
  /* THE LIGHT COMES FROM BEHIND THE DRAWING.  It multiplies rather than
     sitting on top, so every pencil line in front of it stays where it is
     and the warmth reads as light coming through the felt — the way the
     supplied renders show it — instead of a coloured shape laid over the
     plate.  The falloff is a gradient, so it is ambience with an edge
     nowhere. */
  mix-blend-mode:multiply;
  background:radial-gradient(closest-side,
    rgba(255,160,50,calc(1.00 * var(--i,1)))  0%,
    rgba(255,180,86,calc(.74 * var(--i,1)))  38%,
    rgba(255,201,128,calc(.38 * var(--i,1))) 68%,
    rgba(255,220,170,0) 100%);
  filter:blur(var(--b,clamp(4px,.6vw,10px)));
  transition:opacity .95s cubic-bezier(.33,0,.2,1)}
.gi--light.lit .gi__lamp{opacity:1;transition:opacity .8s cubic-bezier(.33,0,.2,1)}
.gi--light .gi__d{transition:filter 1.1s cubic-bezier(.33,0,.2,1)}
/* THE PAPER MUST STAY PAPER.  Lifting brightness and contrast pushed the
   drawing's own cream sheet to pure white, and against a white frame that
   read as the background vanishing the moment a card lit up.  The warmth now
   comes only from the lamps multiplying through it. */
.gi--light.lit .gi__d{filter:saturate(1.10)}
.gi__fr--ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(25,38,196,.12)}
.gi__ab{margin:.8em 0 0;font-size:.6875rem;line-height:1.6;
  color:rgba(20,17,16,.62);max-width:40ch}
[data-theme="dark"] .gi__ab{color:rgba(255,255,255,.56)}
.gi__fr{position:relative;display:block}
.gi__fr--flat{cursor:default}
/* the mark sits in the top left of the object's own frame, in the page's
   own label type — never a sticker, never a badge over the object */
.gi__soon{position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  display:inline-block;padding:.62em .85em;
  font-size:.4688rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);border:1px solid var(--line);
  background:rgba(255,255,255,.86);backdrop-filter:blur(3px)}
[data-theme="dark"] .gi__soon{color:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.24);background:rgba(10,14,60,.5)}
@media (max-width:620px){.gi__soon{letter-spacing:.14em;padding:.5em .6em}}

.gi__fr:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* arriving from the journey: the drawing says here I am, then lets go */
.gi--found .gi__fr{outline:2px solid var(--blue);outline-offset:6px;
  transition:outline-color .8s var(--ease)}
@media (prefers-reduced-motion:reduce){.gi--found .gi__fr{transition:none}}
.gi__fr .ph{position:absolute;inset:0;background:#fff;
  align-items:center;justify-content:center}
.gi__fr .ph::before{opacity:.32;background-image:radial-gradient(rgba(25,38,196,.14) .9px,transparent 1px)}
.gi__fr .ph .ph__t{color:rgba(25,38,196,.42);letter-spacing:.24em}

/* A COLUMN, NOT A WRAPPED ROW.  As a wrapping row the spare height in a
   short card was shared out between the wrapped lines, so every description
   in a row began at a different height.  The lines stack from the top now
   and only the credit is pushed to the foot. */
.gi__b{display:flex;flex-direction:column;align-items:flex-start;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
.gi__hd{display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;width:100%}
.gi__no{font-size:.5875rem;font-weight:500;letter-spacing:.2em;color:var(--blue)}
.gi__t{font-size:clamp(.95rem,1.2vw,1.15rem);font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.2;margin:0}
.gi__sz{margin-top:.7em;font-size:.5875rem;letter-spacing:.16em;color:var(--ink-35);text-transform:uppercase}
.gi__m{width:100%;font-size:.6875rem;font-weight:300;color:var(--ink-60);line-height:1.5}
.gi__v{align-self:flex-end;margin-top:1em;font-size:.5625rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);opacity:0;transform:translateX(-4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  text-decoration:none;position:relative}
.gi__v::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:currentColor;transition:right .45s var(--ease)}
.gi__v:hover::after,.gi__v:focus-visible::after{right:0}
.gi__v:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.gi:hover .gi__v,.gi:focus-within .gi__v{opacity:1;transform:none}
@media (max-width:620px){.gi__v{opacity:1;transform:none;margin-left:0}}

@media (prefers-reduced-motion:reduce){
  .gi__lamp,.gi--light .gi__d{transition-duration:.01ms}
  .gi__v{transition:none}
}

/* ==========================================================================
   12 · MAKE YOUR ACOUSTIC ROOM — an isometric configurator
   The room is drawn in SVG on a true 2:1 isometric grid; products are
   placed as skewed plates on whichever surface they belong to.
   ========================================================================== */
.room{background:var(--blue-deep);color:#fff;position:relative;overflow:hidden}
.room::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 70% at 50% 20%,rgba(58,70,218,.34),transparent 62%)}
.room__head{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,44px);align-items:end;
  padding-bottom:clamp(24px,3vw,44px);border-bottom:1px solid rgba(255,255,255,.16)}
.room__head h2{grid-column:1/span 8;font-size:var(--fs-h2);font-weight:300;
  line-height:1.02;letter-spacing:-.03em;text-transform:uppercase}
.room__head p{grid-column:9/span 4;font-size:.875rem;color:rgba(255,255,255,.6);
  padding-bottom:.4em}
@media (max-width:960px){.room__head h2,.room__head p{grid-column:1/span 12}
  .room__head p{padding-top:12px}}

.room__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,26vw,400px);
  gap:clamp(22px,3vw,54px);margin-top:clamp(30px,4vw,60px);align-items:start}
@media (max-width:1000px){.room__grid{grid-template-columns:1fr}}

/* ---- the board -------------------------------------------------------- */
.pl__msg{font-size:.6875rem;letter-spacing:.02em;color:rgba(255,255,255,.72);margin:0;
  flex:1 1 240px;min-width:0}
.pl__read{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,40px);
  margin-top:clamp(14px,1.8vw,22px)}
@media (max-width:620px){.pl__read{grid-template-columns:1fr;gap:14px}}
.pl__r span{display:block;font-size:.5rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.pl__r em{font-style:normal;float:right;font-size:.5rem;font-weight:500;
  letter-spacing:.14em;color:#fff}
.pl__r i{display:block;height:2px;margin-top:9px;background:rgba(255,255,255,.16);
  position:relative;clear:both}
.pl__r i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,0%);
  background:#fff;transition:width .6s var(--ease)}
#plDone{margin-top:clamp(20px,2.6vw,34px)}
.chipp--lt figure::after{content:"";position:absolute;right:7px;top:7px;width:5px;height:5px;
  border-radius:50%;background:rgba(255,196,110,.9)}

.stage{position:relative;aspect-ratio:16/11;cursor:default;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.13);overflow:hidden;touch-action:manipulation}
.stage.arming{cursor:copy}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none}
.stage__hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;
  font-size:.5625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);pointer-events:none;text-align:center;
  transition:opacity .5s var(--ease)}
.stage.busy .stage__hint{opacity:0}
/* surface picker, sitting inside the room */
.surf{position:absolute;left:16px;bottom:16px;display:flex;border:1px solid rgba(255,255,255,.22)}
.surf button{background:none;border:0;border-right:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.6);font:inherit;font-size:.4688rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;padding:.85em 1.1em;cursor:pointer;
  transition:color .3s var(--ease),background .3s var(--ease)}
.surf button:last-child{border-right:0}
.surf button:hover{color:#fff}
.surf button.on{background:rgba(255,255,255,.13);color:#fff}
@media (max-width:620px){.surf{left:10px;bottom:10px}
  .surf button{padding:.7em .8em;letter-spacing:.12em}}
.zone{fill:rgba(255,255,255,0);stroke:none;cursor:copy;transition:fill .3s var(--ease)}
.stage.arming .zone--ok{fill:rgba(120,150,255,.14)}
.stage.arming .zone--ok.zone--hot{fill:rgba(150,180,255,.30)}
.stage.arming .zone:not(.zone--ok){cursor:not-allowed}
/* while an object is armed the room is a set of surfaces, so what is
   already in it never stands in the way of putting the next thing down */
.stage.arming .ro{pointer-events:none}
.lamplight{opacity:0;transition:opacity 1.6s cubic-bezier(.33,0,.2,1)}
.lamplight.on{opacity:1}

/* ---- the panel of steps, in the language of the Cloud configurator:
   a numbered step, a rule under it, the control, then the note that says
   what the control does.  Nothing is a card. --------------------------- */
.cfg__step{border-top:1px solid rgba(255,255,255,.16);padding:clamp(14px,1.6vw,20px) 0}
.cfg__step:first-child{border-top:0;padding-top:0}
.cfg__ttl{display:flex;align-items:center;gap:.75em;margin:0 0 .95em;
  font-size:.5625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.cfg__ttl i{flex:none;width:20px;height:20px;border:1px solid rgba(255,255,255,.28);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:.5rem;letter-spacing:0;color:rgba(255,255,255,.7)}
.cfg__help{font-size:.6875rem;line-height:1.6;color:rgba(255,255,255,.45);margin:.85em 0 0}
.cfg__hint{font-size:.5rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}
.cfg__fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cfg__f{position:relative;display:block}
.cfg__f input{width:100%;background:transparent;border:1px solid rgba(255,255,255,.22);
  color:#fff;font:inherit;font-size:.8125rem;padding:.75em 2.6em .75em .8em;border-radius:0;
  -moz-appearance:textfield;transition:border-color .3s var(--ease)}
.cfg__f input::-webkit-outer-spin-button,.cfg__f input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.cfg__f input:focus{outline:none;border-color:rgba(255,255,255,.6)}
.cfg__f span{position:absolute;right:.7em;top:50%;translate:0 -50%;pointer-events:none;
  font-size:.5rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}
/* one control, not a row of buttons: the group carries the border */
.cfg__tabs{display:flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.22)}
.cfg__tab{flex:1 1 0;min-width:0;background:none;border:0;font:inherit;
  font-size:.5rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:.95em .5em;cursor:pointer;white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease)}
.cfg__tab+.cfg__tab{border-left:1px solid rgba(255,255,255,.16)}
.cfg__tab:hover{color:#fff}
.cfg__tab.on{background:rgba(255,255,255,.14);color:#fff}
.cfg__tab:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:-2px}
.cfg__fams{margin-bottom:clamp(12px,1.4vw,18px)}
.cfg__viewbar{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cfg__views{flex:0 1 auto}
.cfg__views .cfg__tab{flex:0 0 auto;padding:.95em 1.15em}
/* ---- step three: what the room now holds ---------------------------- */
.cfg__out{margin-top:clamp(30px,4vw,58px);padding-bottom:0;
  border-top:1px solid rgba(255,255,255,.16)}
.cfg__out .cfg__ttl{margin-bottom:1.3em}
.cfg__outgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,52px);align-items:start}
@media (max-width:820px){.cfg__outgrid{grid-template-columns:1fr}}
.cfg__spec{min-width:0}
.cfg__spec table{width:100%;border-collapse:collapse;font-size:.75rem}
.cfg__spec th{text-align:left;font-weight:500;font-size:.5rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.4);padding:0 10px 9px 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.cfg__spec td{padding:.8em 10px .8em 0;border-bottom:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.8)}
.cfg__spec th:last-child,.cfg__spec td:last-child{text-align:right;padding-right:0}
.cfg__spec p{font-size:.75rem;color:rgba(255,255,255,.45);margin:0}

/* the library */
/* the library: objects sit isolated on the blue, no photographic cards */
.lib__k{font-size:.5625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:16px;display:block}
.lib{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px);
  min-height:120px;
  max-height:clamp(320px,44vw,540px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;padding-right:6px;
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
          mask:linear-gradient(180deg,#000 calc(100% - 46px),transparent)}
.lib::-webkit-scrollbar{width:2px}
.lib::-webkit-scrollbar-track{background:rgba(255,255,255,.07)}
.lib::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.chipp{position:relative;border:0;background:none;padding:10px 6px 0;cursor:grab;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:inherit;font:inherit;
  transition:transform .35s var(--ease)}
.chipp figure{margin:0;width:100%;aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;position:relative}
.chipp figure::before{content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.chipp img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;
  display:block;opacity:.9;
  transition:opacity .3s var(--ease),transform .45s var(--ease);
  filter:drop-shadow(0 8px 18px rgba(4,8,50,.45))}
.chipp b{font-size:.4688rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;line-height:1.35;color:rgba(255,255,255,.66);
  transition:color .3s var(--ease)}
.chipp:hover img,.chipp:focus-visible img{opacity:1;transform:translateY(-3px) scale(1.04)}
.chipp:hover b,.chipp:focus-visible b{color:#fff}
.chipp:focus-visible{outline:none}
.chipp:hover figure::before,.chipp:focus-visible figure::before{border-color:rgba(255,255,255,.2)}
.chipp.armed figure::before{border-color:#fff;background:rgba(255,255,255,.07)}
.chipp.armed img{opacity:1}
.chipp.armed b{color:#fff}
.chipp.armed::after{content:attr(data-sel);position:absolute;top:0;left:50%;translate:-50% -50%;
  padding:.35em .7em;background:#fff;color:var(--blue-deep);
  font-size:.4063rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
/* an object still waiting for its cut-out */
.chipp--soon figure::before{border-color:rgba(255,255,255,.16);border-style:dashed}
.chipp--soon img{display:none}
@media (max-width:1000px){.lib{grid-template-columns:repeat(6,1fr);max-height:none}}
@media (max-width:620px){.lib{grid-template-columns:repeat(3,1fr)}}

/* ---- FIND THE QUIET ------------------------------------------------------
   A premium architectural interior, warm and neutral, held in the section's
   own cobalt.  The viewpoint is fixed: nothing here turns, zooms or pans. */
/* the whole piece is deliberately small: it is a moment in the page, not a
   spread — the room is given a height rather than a share of the width, so it
   never grows with the browser */
.quiet{position:relative;z-index:2;margin-top:clamp(20px,2.6vw,36px);
  max-width:920px}
.quiet__head{display:flex;align-items:baseline;gap:clamp(16px,2.6vw,40px);flex-wrap:wrap;
  padding-bottom:clamp(12px,1.6vw,18px)}
.quiet__ask{flex:1 1 180px;min-width:0;margin:0;font-size:clamp(.8rem,1vw,.95rem);
  font-weight:300;letter-spacing:.01em;color:var(--ink)}
.quiet__rd{display:flex;align-items:baseline;gap:.8em}
.quiet__rd span{font-size:.5rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-35)}
.quiet__rd em{font-style:normal;font-size:.9375rem;color:var(--ink);font-variant-numeric:tabular-nums}
.quiet__prog{display:block;height:1px;background:var(--line);position:relative}
.quiet__prog::after{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:var(--v,0%);
  background:var(--blue);transition:width .9s var(--ease)}

/* the first column takes the room's own width, so there is no void beside it */
.quiet__left{min-width:0}
.quiet__grid{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.2vw,34px);align-items:start;justify-content:start;
  margin-top:clamp(14px,1.8vw,24px)}
@media (max-width:1000px){.quiet__grid{grid-template-columns:1fr}}
/* THE ROOM IS DRAWN IN BLUE, NOT ON IT.  The ground is the page's own white
   and every line of the architecture is the house cobalt — the drawing reads
   as a drawing rather than as a lit screen. */
.scene{position:relative;aspect-ratio:1000/620;
  height:clamp(150px,20vh,232px);width:auto;max-width:100%;
  overflow:hidden;background:var(--off);
  border:1px solid rgba(25,38,196,.20)}
@media (max-width:1000px){.scene{height:auto;width:100%}
  .quiet__left{min-width:0;max-width:100%}}
/* what the room gained, written up beside it as each thing is found */
.quiet__sk{display:block;font-size:.5rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-35);margin-bottom:14px}
.qlist{list-style:none;margin:0;padding:0}
.qi{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;
  padding:10px 0;border-top:1px solid var(--line);
  opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.qi.on{opacity:1;transform:none}
.qi:first-child{border-top:0;padding-top:0}
.qi figure{margin:0;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line)}
.qi img{max-width:84%;max-height:84%;object-fit:contain;display:block}
.qi b{display:block;font-size:.75rem;font-weight:400;color:var(--ink);line-height:1.25}
.qi u{display:block;text-decoration:none;font-size:.5rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);
  margin-top:.35em}
.qi span{display:block;font-size:.625rem;line-height:1.5;
  color:rgba(255,255,255,.56);margin-top:.6em}
.qi em{display:inline-flex;align-items:center;gap:.5em;font-style:normal;margin-top:.5em;
  font-size:.4375rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-35)}
.qi em::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(20,17,16,.18)}
.scene__svg,.scene__wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene__wave{pointer-events:none}
/* the room, drawn the way the world is drawn: thin white line, nothing filled */
.q-gl{fill:none}
.q-g{stroke:rgba(25,38,196,.20);stroke-width:1}
.q-e{stroke:rgba(25,38,196,.72);stroke-width:1.1;stroke-linecap:round}
.q-e2{stroke:rgba(25,38,196,.40);stroke-width:1}
.q-bwl{fill:rgba(25,38,196,.045);stroke:none}
.q-flr{fill:rgba(25,38,196,.025)}
.q-win{fill:rgba(25,38,196,.06);stroke:rgba(25,38,196,.5);stroke-width:1}
.q-day{fill:rgba(255,214,150,.20)}
.q-f{}
.q-fq{fill:rgba(25,38,196,.05);stroke:rgba(25,38,196,.55);stroke-width:1;
  stroke-linejoin:round}
.q-fl{stroke:rgba(25,38,196,.55);stroke-width:1}
.q-p ellipse{fill:rgba(255,255,255,.10)}
.q-p path,.q-p circle{fill:rgba(255,255,255,.24);stroke:rgba(255,255,255,.5);stroke-width:1}
/* the objects arrive; they never pop */
.q-in{opacity:0;transform:translateY(-10px);transform-origin:50% 0;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.q-in.on{opacity:1;transform:none}
.q-cbl{stroke:rgba(25,38,196,.55);stroke-width:1}
.q-sh{fill:rgba(25,38,196,.20);filter:blur(7px)}
/* a lit groove in the felt, and the light it puts on the wall around it */
.q-back{fill:#4c6b62}
.q-lamp{fill:#fff3dc;stroke:rgba(255,196,120,.9);stroke-width:.4}
.q-lampg{fill:#ffbe6e;mix-blend-mode:multiply;filter:blur(6px);opacity:.5}
.q-obj--lit .q-lamp,.q-obj--lit .q-lampg{animation:qWarm 2.2s var(--ease) both}
/* only a luminaire lights, and its light lands on the architecture */
/* screening any warm over a saturated cobalt lifts the blue too and turns
   violet, so the light is laid over the drawing instead: a warm haze, which
   is what a felt luminaire actually puts into a blue-lit room */
.q-pool{fill:#f0a83c;mix-blend-mode:multiply;filter:blur(13px)}
.q-cone{fill:#f5c274;mix-blend-mode:multiply;filter:blur(20px)}
.q-obj--lit .q-pool,.q-obj--lit .q-cone{animation:qWarm 2.2s var(--ease) both}
@keyframes qWarm{from{opacity:0}}
/* the places sound gathers: felt on hover, never labelled before the click */
.q-hit{fill:rgba(25,38,196,0);cursor:pointer;transition:fill .45s var(--ease)}
.q-hit:hover{fill:rgba(25,38,196,.06)}
.q-hit:focus-visible{outline:none;fill:rgba(25,38,196,.10)}
.q-hit.done{pointer-events:none;fill:rgba(25,38,196,0)}
.quiet__say{margin:clamp(16px,2vw,24px) 0 0;min-height:0;
  padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line);
  opacity:0;transform:translateY(5px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.quiet__say.on{opacity:1;transform:none}
.quiet__say b{display:block;font-size:.9375rem;font-weight:300;color:var(--ink)}
.quiet__say span{display:block;font-size:.6875rem;line-height:1.55;
  color:var(--ink-60);margin-top:.45em}
.quiet__say em{display:block;font-style:normal;font-size:.5625rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-35);margin-top:.9em}
.quiet__note{margin:clamp(10px,1.4vw,16px) 0 0;font-size:.5625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35);
  padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line)}
/* the end of it */
.quiet__done{margin-top:clamp(16px,2.2vw,28px);opacity:0;transform:translateY(10px);
  pointer-events:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.quiet__done.on{opacity:1;transform:none;pointer-events:auto}
.quiet__winT{margin:0;font-size:clamp(1.05rem,1.6vw,1.45rem);font-weight:300;line-height:1.05;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.quiet__winB{margin:.6em 0 0;font-size:clamp(.85rem,1.1vw,1rem);font-weight:300;
  color:var(--ink-60)}
.quiet__acts{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;margin:1.4em 0 0}
/* the whole scene settles as the room does */
.scene{transition:border-color 1.4s var(--ease)}
.quiet.is-quiet .scene{border-color:rgba(25,38,196,.45)}
@media (max-width:620px){.quiet__ask{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){
  .q-in{transition-duration:.01ms}
  .q-obj--lit .q-pool,.q-obj--lit .q-cone{animation-duration:.01ms}
}
.room__bar-k{flex:1 1 200px;min-width:0;font-size:.5625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.room__bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.meter{flex:1 1 130px;min-width:120px}
.meter span{display:block;font-size:.5rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:7px}
.meter i{display:block;height:2px;background:rgba(255,255,255,.16);position:relative}
.meter i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,0%);
  background:#fff;transition:width .9s cubic-bezier(.22,.61,.36,1)}
.meter em{font-style:normal;float:right;font-size:.5rem;font-weight:500;letter-spacing:.14em;
  color:rgba(255,255,255,.7)}
.mini{background:none;border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:.62em 1.05em;font:inherit;font-size:.5rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;transition:background .3s var(--ease),
  border-color .3s var(--ease)}
.mini:hover{background:rgba(255,255,255,.12);border-color:#fff}
.cfg__outgrid .room__done{margin-top:0;align-items:flex-start;flex-direction:column;
  gap:clamp(12px,1.4vw,20px)}
.cfg__outgrid .room__done p{max-width:14ch;line-height:1.15}
.room__done{margin-top:clamp(22px,3vw,40px);display:flex;align-items:center;gap:clamp(16px,2vw,32px);
  flex-wrap:wrap;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);position:relative;z-index:2}
.room__done.on{opacity:1;transform:none;pointer-events:auto}
.room__done p{font-size:clamp(1rem,1.6vw,1.4rem);font-weight:300;letter-spacing:.04em;
  text-transform:uppercase;margin:0}


/* ==========================================================================
   EMBEDDED.  Pasted into another site, this page becomes the child of that
   site's content column: the flow sections take the column's width and the
   fixed chrome keeps the window's, which is what leaves white down both
   sides.  When that is detected, the sections are given the window's width
   back and pulled out of the column.  Standalone, none of this applies.
   ========================================================================== */
html.is-embedded .hero,
html.is-embedded .sec,
html.is-embedded .sj,
html.is-embedded .cta,
html.is-embedded .ft{
  width:var(--bleedw) !important;
  max-width:var(--bleedw) !important;
  margin-left:calc(50% - var(--bleedw) / 2) !important;
  margin-right:0 !important;
}
html.is-embedded body{overflow-x:hidden}
/* ARMOUR.  A host theme states its own link and button colours after these
   and wins on equal specificity, which is what turned the navigation and the
   buttons unreadable.  Only the declarations that decide legibility are
   stated this loudly, and nowhere else on the page. */
html .nav.on-dark,
html .nav.on-dark .nav__link,
html .nav.on-dark .brand,
html .nav.on-dark .lang button,
html .nav.on-dark .sndbtn{color:#fff !important}
html .nav:not(.on-dark),
html .nav:not(.on-dark) .nav__link,
html .nav:not(.on-dark) .brand{color:var(--ink) !important}
html .btn{color:var(--fg) !important;background:var(--bg) !important;
  border-color:var(--bd) !important;text-decoration:none !important}
html .btn:hover{color:var(--bg) !important;background:var(--fg) !important}
html .tlink{color:inherit !important;text-decoration:none !important}
html [data-theme="dark"]{color:#fff}
html .sticky .btn{color:#fff !important}