:root{--black:#070807;--cream:#f2ece2;--gold:#d1a65b;--muted:#c9c0b3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;background:var(--black);color:#fff}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:74px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(#0009,transparent)}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.27em;font-size:.78rem}.brand img{width:46px}.brand small,.about-brand small{display:block;font-size:.56rem;letter-spacing:.48em;margin-top:3px}nav{display:flex;gap:26px;font-size:.84rem}.lang{justify-self:end;background:none;border:0;color:#fff;cursor:pointer}.lang b{opacity:.45}.lang b.active{opacity:1;color:var(--gold)}.dark{background:var(--black)}.light{background:var(--cream);color:#161616}.label,.eyebrow{font-size:.73rem;letter-spacing:.22em;font-weight:600}.hero{min-height:100vh;position:relative;overflow:hidden;padding:145px 6vw 90px;display:flex;align-items:center;background:radial-gradient(circle at 78% 38%,#72572b33,transparent 25%),linear-gradient(100deg,#050505 0%,#0c0d0b 58%,#18140d 100%)}.hero:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 8%,#ffffff05 8% 8.12%);pointer-events:none}.glow{position:absolute;right:8%;top:16%;width:35vw;height:35vw;border-radius:50%;background:#8f6b3033;filter:blur(70px)}.hero-copy{position:relative;z-index:2;max-width:780px}.eyebrow{color:var(--gold)}h1,h2,.lab h3{font-family:'Playfair Display',serif;font-weight:400}.hero h1{font-size:clamp(3.3rem,7vw,7.4rem);line-height:.95;margin:20px 0 28px}.hero h1 em,.purpose em{font-style:normal;color:var(--gold)}.hero-copy>p:not(.eyebrow){font-size:1.25rem;line-height:1.6;max-width:650px;color:#eee8df}.cta{display:inline-flex;gap:18px;margin-top:20px;padding-bottom:8px;border-bottom:1px solid var(--gold)}.hero-side{position:absolute;right:7vw;top:27%;line-height:1.8;letter-spacing:.2em;font-size:.68rem;color:#d5cec3}.hero-note{position:absolute;right:6vw;bottom:9%;text-align:right;color:#bcb4a8;font-size:.7rem;letter-spacing:.13em;line-height:1.6}.philosophy{padding:85px 6vw 65px}.phi-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw}.phi-grid h2{font-size:clamp(2.5rem,4.5vw,5rem);line-height:1.05;margin:26px 0}.phi-grid p{font-size:1.03rem;line-height:1.8;color:#48443f;margin-top:34px}.pillars{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-top:1px solid #c8bfb2;padding-top:32px}.pillars div{text-align:center;display:flex;flex-direction:column;gap:5px;border-right:1px solid #c8bfb2}.pillars div:last-child{border:0}.pillars i{font-style:normal;font-size:2rem;margin-bottom:10px}.pillars strong{letter-spacing:.16em;font-size:.8rem}.pillars span{color:#5d5750}.lab{padding:70px 4vw}.lab-head{display:grid;grid-template-columns:1fr 1fr;gap:10vw;margin:0 2vw 28px}.lab h3{color:var(--gold);font-size:1.4rem;font-weight:400}.lab-head>p{color:#cfc7bb;line-height:1.7}.products{display:grid;grid-template-columns:1fr 1fr;gap:14px}.product{min-height:560px;border-radius:10px;overflow:hidden;position:relative;border:1px solid #ffffff24}.product .content{position:relative;z-index:2;padding:44px;max-width:72%}.product img{max-height:88px;max-width:160px;margin-bottom:12px}.product span{letter-spacing:.28em;font-size:.8rem}.product h2{font-size:clamp(2rem,3.6vw,4.2rem);line-height:1.03;margin:25px 0 18px}.product p{line-height:1.7}.product a{display:inline-block;margin-top:18px;padding:10px 18px;border:1px solid currentColor;border-radius:999px;font-size:.85rem}.yteru{color:#161616;background:linear-gradient(#f3eadde6,#98866f99),radial-gradient(circle at 65% 35%,#d6c9b5,transparent 34%),linear-gradient(155deg,#f0e9dd,#665f53)}.yteru img{filter:brightness(.3)}.helymov{background:radial-gradient(circle at 72% 25%,#74896044,transparent 25%),linear-gradient(145deg,#132018,#29402d 55%,#0c140f)}.purpose{padding:90px 6vw;position:relative;overflow:hidden}.purpose h2{font-size:clamp(2.3rem,4.7vw,5.1rem);line-height:1.08;max-width:1080px;margin:26px 0 40px}.tags{display:flex;gap:18px;flex-wrap:wrap;color:#ccc4b9}.tags span:not(:last-child):after{content:"•";color:var(--gold);margin-left:18px}.about{padding:68px 6vw}.about-grid{display:grid;grid-template-columns:.8fr 1.7fr .7fr;gap:55px;align-items:center;margin-top:28px}.about-brand{display:flex;gap:14px;align-items:center}.about-brand img{width:80px;filter:invert(1)}.about-brand b{letter-spacing:.28em}.about-grid p{line-height:1.8;color:#4c4842}.values{padding-left:30px;border-left:1px solid #bbb1a3;line-height:1.9;letter-spacing:.18em;font-size:.7rem}footer{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:24px;align-items:center;padding:32px 4vw 22px;background:#050505;font-size:.78rem}footer>div:first-child{display:flex;flex-direction:column;gap:5px;letter-spacing:.11em}footer small{color:#9d9488}.footer-mid{text-align:center;letter-spacing:.16em}.footer-links{display:flex;justify-content:flex-end;gap:18px}footer p{grid-column:1/-1;color:#6f6961}@media(max-width:900px){.site-header{grid-template-columns:1fr auto}nav{display:none}.hero-side,.hero-note{display:none}.phi-grid,.lab-head,.about-grid{grid-template-columns:1fr}.pillars{grid-template-columns:1fr 1fr;gap:30px}.pillars div{border:0}.products{grid-template-columns:1fr}.product .content{max-width:92%}footer{grid-template-columns:1fr}.footer-mid{text-align:left}.footer-links{justify-content:flex-start}}@media(max-width:560px){.hero{padding:120px 7vw 80px}.hero h1{font-size:3.15rem}.philosophy,.lab,.purpose,.about{padding-left:7vw;padding-right:7vw}.pillars{grid-template-columns:1fr}.product{min-height:500px}.product .content{padding:30px;max-width:100%}.product h2{font-size:2.5rem}}


/* NURHELIX v0.2A — Copperfield intro */
body.intro-active { overflow: hidden; }
.brand-intro{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:
    radial-gradient(circle at 63% 35%, rgba(209,166,91,.16), transparent 28%),
    #050505;
  color:#fff; opacity:1; visibility:visible;
  transition:opacity .85s ease, visibility .85s ease;
}
.brand-intro::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.025),transparent 35%);
  animation:nurhelixBreath 5s ease-in-out infinite;
}
.brand-intro.is-leaving{opacity:0;visibility:hidden}
.brand-intro__inner{position:relative;width:min(72vw,560px);text-align:center}
.brand-intro__mark{width:100%;display:block}
.brand-intro__word{
  margin-top:-26px;letter-spacing:.43em;font-size:clamp(18px,2.4vw,34px);
  opacity:0;filter:blur(5px);animation:nurhelixReveal .9s ease 2.72s forwards
}
.brand-intro__word span{display:block;margin-top:10px;letter-spacing:.66em;font-size:.45em}
.brand-intro__rule{
  height:1px;width:0;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,#d1a65b,transparent);
  animation:nurhelixRule 1s ease 3.05s forwards
}
.brand-intro__tag{
  margin-top:18px;font-size:clamp(13px,1.2vw,18px);color:#cfc7bb;
  opacity:0;animation:nurhelixRise .8s ease 3.18s forwards
}
.brand-intro__tag b{color:#d1a65b;font-weight:400}
.brand-intro__skip{
  position:absolute;right:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,44px);
  border:0;background:transparent;color:#9b958b;letter-spacing:.22em;
  font-size:10px;cursor:pointer;padding:10px
}
.brand-intro__skip:hover{color:#d1a65b}
@keyframes nurhelixReveal{to{opacity:1;filter:blur(0)}}
@keyframes nurhelixRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nurhelixRule{to{width:58%}}
@keyframes nurhelixBreath{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){
  .brand-intro__word,.brand-intro__tag,.brand-intro__rule{animation:none;opacity:1;filter:none}
  .brand-intro__rule{width:58%}
}


/* NURHELIX v0.2B — Cinematic Hero */
.hero--cinematic{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(92vh,900px);
  background:
    radial-gradient(ellipse at 74% 42%, rgba(193,145,69,.14) 0%, rgba(65,46,23,.08) 28%, transparent 58%),
    radial-gradient(ellipse at 15% 82%, rgba(255,255,255,.035), transparent 38%),
    linear-gradient(112deg,#030303 0%,#080706 52%,#020202 100%);
}
.hero--cinematic > *:not(.hero-atmosphere){position:relative;z-index:3}
.hero-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-glow{
  position:absolute;width:58vw;height:58vw;right:-13vw;top:-15vw;border-radius:50%;
  background:radial-gradient(circle,rgba(209,166,91,.14),rgba(209,166,91,.035) 35%,transparent 68%);
  filter:blur(12px);animation:heroBreathe 8s ease-in-out infinite alternate
}
.hero-orbit{
  position:absolute;border:1px solid rgba(209,166,91,.15);border-radius:50%;
  transform:rotate(-18deg);box-shadow:0 0 42px rgba(209,166,91,.025)
}
.hero-orbit--one{width:62vw;height:29vw;right:-15vw;top:17%;animation:orbitFloat 13s ease-in-out infinite alternate}
.hero-orbit--two{width:44vw;height:20vw;right:-6vw;top:30%;border-color:rgba(255,255,255,.06);animation:orbitFloat 17s ease-in-out infinite alternate-reverse}
.hero-grain{
  position:absolute;inset:-40%;opacity:.055;mix-blend-mode:screen;
  background-image:
    radial-gradient(circle at 20% 30%,#fff 0 .6px,transparent .8px),
    radial-gradient(circle at 70% 60%,#fff 0 .5px,transparent .7px);
  background-size:13px 17px,19px 23px;transform:rotate(7deg)
}
.hero-particles i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#d1a65b;
  box-shadow:0 0 12px 2px rgba(209,166,91,.45);opacity:.45;
  animation:particleDrift 7s ease-in-out infinite alternate
}
.hero-particles i:nth-child(1){left:59%;top:22%}.hero-particles i:nth-child(2){left:67%;top:31%;animation-delay:-2s}
.hero-particles i:nth-child(3){left:76%;top:19%;animation-delay:-4s}.hero-particles i:nth-child(4){left:84%;top:39%;animation-delay:-1s}
.hero-particles i:nth-child(5){left:91%;top:27%;animation-delay:-5s}.hero-particles i:nth-child(6){left:63%;top:57%;animation-delay:-3s}
.hero-particles i:nth-child(7){left:73%;top:67%;animation-delay:-6s}.hero-particles i:nth-child(8){left:88%;top:61%;animation-delay:-2.5s}
.hero-particles i:nth-child(9){left:54%;top:72%;animation-delay:-4.5s}.hero-particles i:nth-child(10){left:95%;top:76%;animation-delay:-1.5s}
.hero-particles i:nth-child(11){left:79%;top:48%;width:2px;height:2px}.hero-particles i:nth-child(12){left:69%;top:45%;width:2px;height:2px}
.hero-particles i:nth-child(13){left:58%;top:40%;width:2px;height:2px}.hero-particles i:nth-child(14){left:86%;top:16%;width:2px;height:2px}
.hero-particles i:nth-child(15){left:97%;top:49%;width:2px;height:2px}.hero-particles i:nth-child(16){left:62%;top:83%;width:2px;height:2px}
.hero-particles i:nth-child(17){left:82%;top:83%;width:2px;height:2px}.hero-particles i:nth-child(18){left:92%;top:88%;width:2px;height:2px}
@keyframes heroBreathe{to{transform:translate3d(-2vw,2vh,0) scale(1.06);opacity:.8}}
@keyframes orbitFloat{to{transform:rotate(-14deg) translate3d(-12px,10px,0)}}
@keyframes particleDrift{to{transform:translate3d(8px,-14px,0);opacity:.85}}
@media(max-width:760px){
 .hero--cinematic{min-height:82vh}
 .hero-orbit--one{width:110vw;height:56vw;right:-52vw;top:28%}
 .hero-orbit--two{width:82vw;height:40vw;right:-35vw;top:38%}
 .hero-glow{width:110vw;height:110vw;right:-65vw;top:5%}
 .hero-grain{opacity:.035}
}
@media(prefers-reduced-motion:reduce){
 .hero-glow,.hero-orbit,.hero-particles i{animation:none}
}


/* NURHELIX v0.2C — HERO WITH STEROIDS
   Overrides v0.2B atmosphere only. Copperfield untouched. */
.hero--cinematic{
  background:
    radial-gradient(ellipse at 77% 38%, rgba(221,171,84,.24) 0%, rgba(105,73,30,.12) 25%, transparent 56%),
    radial-gradient(ellipse at 42% 100%, rgba(110,83,44,.10), transparent 42%),
    radial-gradient(ellipse at 12% 72%, rgba(255,255,255,.045), transparent 36%),
    linear-gradient(112deg,#020202 0%,#090806 52%,#010101 100%);
}
.hero-glow{
  width:68vw;height:68vw;right:-15vw;top:-20vw;
  background:
    radial-gradient(circle at 48% 48%,rgba(245,205,128,.20) 0 4%,rgba(209,166,91,.18) 12%,rgba(147,100,40,.075) 38%,transparent 69%);
  filter:blur(8px);
}
.hero-orbit{border-color:rgba(222,179,103,.28);box-shadow:0 0 58px rgba(209,166,91,.055),inset 0 0 28px rgba(209,166,91,.018)}
.hero-orbit--two{border-color:rgba(255,255,255,.105)}
.hero-grain{opacity:.085}
.hero-particles i{
  width:4px;height:4px;
  background:#e1b563;
  box-shadow:0 0 15px 3px rgba(209,166,91,.58);
  opacity:.66;
}
.hero-particles i:nth-child(3n){width:2px;height:2px;opacity:.5}
.hero-particles i:nth-child(4n){width:6px;height:6px;opacity:.78;box-shadow:0 0 22px 5px rgba(209,166,91,.40)}
.hero-particles i:nth-child(5n){background:#fff3d1;box-shadow:0 0 18px 4px rgba(255,224,165,.48)}
.hero-atmosphere::after{
  content:"";position:absolute;right:-7%;top:7%;width:52%;height:78%;
  opacity:.33;filter:blur(.1px);
  background:
    radial-gradient(circle at 22% 18%,rgba(225,181,99,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 65% 28%,rgba(255,238,199,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 44% 61%,rgba(209,166,91,.8) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 78% 75%,rgba(255,255,255,.65) 0 1px,transparent 2px);
  background-size:71px 83px,97px 109px,131px 119px,157px 143px;
  transform:rotate(-8deg);
  animation:starField 16s ease-in-out infinite alternate;
}
@keyframes starField{to{transform:rotate(-7deg) translate3d(-14px,-9px,0);opacity:.46}}
@media(prefers-reduced-motion:reduce){.hero-atmosphere::after{animation:none}}


/* NURHELIX v0.2D — HERO +1.5
   More presence, not more noise. Copperfield untouched. */
.hero--cinematic{
  background:
    radial-gradient(ellipse at 76% 36%, rgba(239,188,91,.34) 0%, rgba(135,91,33,.18) 24%, rgba(55,38,18,.07) 43%, transparent 61%),
    radial-gradient(ellipse at 52% 108%, rgba(172,124,56,.14), transparent 46%),
    radial-gradient(ellipse at 10% 68%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(112deg,#010101 0%,#0b0906 54%,#010101 100%);
}
.hero-glow{
  width:74vw;height:74vw;right:-16vw;top:-22vw;
  background:
    radial-gradient(circle at 47% 47%,rgba(255,226,164,.25) 0 3%,rgba(225,174,82,.25) 11%,rgba(157,105,38,.11) 34%,rgba(94,61,25,.045) 51%,transparent 70%);
  filter:blur(6px);
}
.hero-orbit{border-color:rgba(232,190,112,.39);box-shadow:0 0 70px rgba(209,166,91,.075),inset 0 0 38px rgba(209,166,91,.025)}
.hero-orbit--one{border-width:1.25px}
.hero-orbit--two{border-color:rgba(255,255,255,.15)}
.hero-grain{opacity:.105}
.hero-particles i{
  opacity:.78;
  box-shadow:0 0 19px 4px rgba(224,174,79,.67);
}
.hero-particles i:nth-child(4n){opacity:.9;box-shadow:0 0 28px 7px rgba(224,174,79,.52)}
.hero-particles i:nth-child(5n){box-shadow:0 0 23px 6px rgba(255,232,181,.58)}
.hero-atmosphere::after{opacity:.50}
.hero-atmosphere::before{
  content:"";position:absolute;right:3%;top:10%;width:44%;height:70%;border-radius:50%;
  background:
    conic-gradient(from 195deg at 50% 50%,
      transparent 0 21%,
      rgba(209,166,91,.045) 25%,
      rgba(239,196,115,.12) 27%,
      rgba(209,166,91,.035) 30%,
      transparent 34% 100%);
  filter:blur(1px);
  transform:rotate(-12deg);
  animation:energySweep 12s ease-in-out infinite alternate;
}
@keyframes energySweep{
  to{transform:rotate(-7deg) scale(1.05);opacity:.72}
}
@media(prefers-reduced-motion:reduce){.hero-atmosphere::before{animation:none}}


/* NURHELIX v0.2E — persistent particles fix
   Pointer movement no longer competes with particle animation transforms. */
.hero-particles{
  position:absolute;
  inset:0;
  translate:0 0;
  transition:translate .32s cubic-bezier(.2,.8,.2,1);
  will-change:translate;
}
.hero-particles i{
  will-change:transform,opacity;
  backface-visibility:hidden;
}


/* NURHELIX v0.3C — FROM THE LAB VISUAL RESET
   Static first. Match the approved mockup before adding motion. */

#lab .products{
  gap:18px;
  align-items:stretch;
}

#lab .product{
  min-height:410px;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
  transform:none;
  transition:none;
}

#lab .product .content{
  position:relative;
  z-index:3;
  max-width:58%;
  padding:30px 34px 28px;
}

#lab .product img{
  display:none; /* temporary: traced logos are visually noisy at this size */
}

#lab .product span{
  display:block;
  font-size:.74rem;
  letter-spacing:.26em;
  margin-bottom:18px;
  font-weight:500;
}

#lab .product h2{
  font-size:clamp(2rem,3vw,3.55rem);
  line-height:1.02;
  margin:0 0 14px;
  max-width:390px;
}

#lab .product p{
  font-size:.9rem;
  line-height:1.55;
  max-width:390px;
  margin:0;
}

#lab .product a{
  display:inline-block;
  margin-top:20px;
  padding:9px 16px;
  border-radius:999px;
  font-size:.79rem;
  background:rgba(255,255,255,.90);
  color:#171717;
  border:0;
}

/* YTERU — warm editorial landscape */
#lab .product.yteru{
  color:#171717;
  background:
    linear-gradient(90deg,
      rgba(244,237,225,1) 0%,
      rgba(244,237,225,.98) 35%,
      rgba(244,237,225,.77) 54%,
      rgba(244,237,225,.22) 72%,
      rgba(244,237,225,.05) 100%),
    url("assets/yteru-atmosphere.jpg") right center / 58% 100% no-repeat,
    #eee4d3;
}
#lab .product.yteru::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(76,65,48,.04));
  pointer-events:none;
}
#lab .product.yteru span::after{
  content:"";
  display:block;
  width:22px;
  height:1px;
  margin-top:10px;
  background:#c99a45;
}

/* HELYMOV — deep green, macro nature */
#lab .product.helymov{
  color:#fff;
  background:
    linear-gradient(90deg,
      rgba(24,50,31,1) 0%,
      rgba(24,50,31,.99) 36%,
      rgba(24,50,31,.85) 55%,
      rgba(24,50,31,.30) 74%,
      rgba(24,50,31,.05) 100%),
    url("assets/helymov-atmosphere.jpg") right center / 55% 100% no-repeat,
    #18321f;
}
#lab .product.helymov::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 84% 22%,rgba(242,138,75,.10),transparent 18%);
  pointer-events:none;
}
#lab .product.helymov span::after{
  content:"";
  display:block;
  width:22px;
  height:1px;
  margin-top:10px;
  background:#c99a45;
}

#lab .product.helymov a{
  background:#f6f2ea;
  color:#18321f;
}

@media(max-width:900px){
  #lab .product{min-height:440px}
  #lab .product .content{max-width:68%}
}
@media(max-width:620px){
  #lab .product{
    min-height:520px;
    background-size:auto 48%, cover;
    background-position:right bottom, center;
  }
  #lab .product .content{
    max-width:100%;
    padding:28px;
  }
  #lab .product.yteru{
    background:
      linear-gradient(180deg,rgba(244,237,225,1) 0%,rgba(244,237,225,.98) 55%,rgba(244,237,225,.50) 75%,rgba(244,237,225,.08) 100%),
      url("assets/yteru-atmosphere.jpg") center bottom / 100% 52% no-repeat,
      #eee4d3;
  }
  #lab .product.helymov{
    background:
      linear-gradient(180deg,rgba(24,50,31,1) 0%,rgba(24,50,31,.98) 56%,rgba(24,50,31,.54) 76%,rgba(24,50,31,.10) 100%),
      url("assets/helymov-atmosphere.jpg") center bottom / 100% 52% no-repeat,
      #18321f;
  }
}


/* v0.3D — CLEAN CINEMATIC ASSETS
   Replaces mockup crops with original clean imagery. Static composition first. */

#lab .product{
  min-height:430px;
  background-image:none !important;
}

/* shared photographic layer */
#lab .product::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* keep copy safely above photography */
#lab .product .content{z-index:4}
#lab .product::before{z-index:2}

/* YTERU */
#lab .product.yteru{
  background:#eee5d6 !important;
}
#lab .product.yteru::after{
  background-image:url("assets/yteru-cinematic.png");
  background-position:58% center;
}
#lab .product.yteru::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(245,239,228,.99) 0%,
      rgba(245,239,228,.97) 29%,
      rgba(245,239,228,.78) 44%,
      rgba(245,239,228,.28) 63%,
      rgba(245,239,228,.03) 100%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(60,52,42,.05));
}

/* HELYMOV */
#lab .product.helymov{
  background:#15321f !important;
}
#lab .product.helymov::after{
  background-image:url("assets/helymov-cinematic.png");
  background-position:63% center;
}
#lab .product.helymov::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(19,48,29,.99) 0%,
      rgba(19,48,29,.97) 31%,
      rgba(19,48,29,.80) 47%,
      rgba(19,48,29,.30) 65%,
      rgba(19,48,29,.04) 100%),
    radial-gradient(circle at 82% 16%,rgba(229,160,84,.10),transparent 24%);
}

/* restore premium edge without animation yet */
#lab .product{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 16px 42px rgba(0,0,0,.13);
}
#lab .product.yteru{border-color:rgba(103,91,72,.18)}
#lab .product.helymov{border-color:rgba(148,174,146,.20)}

@media(max-width:620px){
 #lab .product.yteru::after{background-position:68% bottom}
 #lab .product.helymov::after{background-position:70% bottom}
 #lab .product.yteru::before{
   background:linear-gradient(180deg,rgba(245,239,228,.99) 0%,rgba(245,239,228,.96) 48%,rgba(245,239,228,.38) 75%,rgba(245,239,228,.05) 100%);
 }
 #lab .product.helymov::before{
   background:linear-gradient(180deg,rgba(19,48,29,.99) 0%,rgba(19,48,29,.96) 48%,rgba(19,48,29,.42) 75%,rgba(19,48,29,.06) 100%);
 }
}


/* v0.3E — approved product logos integrated */
#lab .product .content::before{
  content:"";
  display:block;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  margin-bottom:18px;
}

/* Hide the plain text eyebrow when exact brand lockup is present */
#lab .product.yteru .content > span:first-of-type,
#lab .product.helymov .content > span:first-of-type{
  display:none;
}

#lab .product.yteru .content::before{
  width:92px;
  height:68px;
  background-image:url("assets/yteru-lockup-web.png");
}

#lab .product.helymov .content::before{
  width:155px;
  height:72px;
  background-image:url("assets/helymov-lockup-web.png");
}

@media(max-width:620px){
  #lab .product.yteru .content::before{width:82px;height:60px}
  #lab .product.helymov .content::before{width:138px;height:64px}
}

/* v0.3F — corrected product brand marks */
#lab .product.yteru .content::before{
  width:118px;height:88px;
  background-image:url("assets/yteru-logo-clean.png");
  background-size:contain;background-position:left center;background-repeat:no-repeat;
}
#lab .product.helymov .content::before{
  width:220px;height:96px;
  background-image:url("assets/helymov-logo-light.png");
  background-size:contain;background-position:left center;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.12));
}
@media(max-width:620px){
  #lab .product.yteru .content::before{width:100px;height:76px}
  #lab .product.helymov .content::before{width:188px;height:84px}
}


/* v0.3G — brand balance + principles icon refinement */

/* Helymov needs equal visual authority to Yteru */
#lab .product.helymov .content::before{
  width:285px;
  height:118px;
  margin-bottom:14px;
}

/* Principles: replace generic-feeling glyph treatment with quieter editorial marks */
.principles .principle:nth-child(1) .icon,
.values .value:nth-child(1) .icon{
  font-size:0;
}
.principles .principle:nth-child(1) .icon::before,
.values .value:nth-child(1) .icon::before{
  content:"○";
  font-size:28px;
  font-weight:300;
}

.principles .principle:nth-child(2) .icon,
.values .value:nth-child(2) .icon{
  font-size:0;
}
.principles .principle:nth-child(2) .icon::before,
.values .value:nth-child(2) .icon::before{
  content:"↻";
  font-size:30px;
  font-weight:300;
}

.principles .principle:nth-child(3) .icon,
.values .value:nth-child(3) .icon{
  font-size:0;
}
.principles .principle:nth-child(3) .icon::before,
.values .value:nth-child(3) .icon::before{
  content:"〈〉";
  font-size:25px;
  letter-spacing:-4px;
  font-weight:300;
}

.principles .principle:nth-child(4) .icon,
.values .value:nth-child(4) .icon{
  font-size:0;
}
.principles .principle:nth-child(4) .icon::before,
.values .value:nth-child(4) .icon::before{
  content:"◇";
  font-size:30px;
  font-weight:300;
}

@media(max-width:620px){
  #lab .product.helymov .content::before{
    width:235px;
    height:102px;
  }
}


/* v0.3H — FINAL STATIC BALANCE */

/* Helymov is the first product: give its brand mark real presence. */
#lab .product.helymov .content::before{
  width:340px !important;
  height:132px !important;
  margin-top:-4px;
  margin-bottom:12px !important;
  background-size:contain !important;
  background-position:left center !important;
}

/* Exact visual language approved for the four principles. */
.principles .icon::before,
.values .icon::before{
  content:none !important;
}
.principles .icon,
.values .icon{
  width:48px;
  height:48px;
  margin-inline:auto;
  display:grid;
  place-items:center;
  font-size:0 !important;
}
.principle-svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:#111;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

@media(max-width:620px){
  #lab .product.helymov .content::before{
    width:275px !important;
    height:112px !important;
  }
  .principle-svg{width:38px;height:38px}
}


/* v0.3I — TARGET THE REAL DOM */

/* Philosophy icons: the page actually uses .pillars i */
.pillars i{
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 auto 14px !important;
  font-size:0 !important;
  font-style:normal !important;
}
.pillars .pillar-icon svg{
  display:block !important;
  width:42px !important;
  height:42px !important;
  fill:none !important;
  stroke:#111 !important;
  stroke-width:1.45 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Helymov: disable pseudo-logo and show the actual image at a deliberate size */
#lab .product.helymov .content::before{
  display:none !important;
  content:none !important;
}
#lab .product.helymov .content > img.helymov-brand{
  display:block !important;
  width:250px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  margin:0 0 24px 0 !important;
  opacity:1 !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.14));
}

/* Keep Yteru exactly as previously approved */
#lab .product.yteru .content > img{display:none !important;}

@media(max-width:620px){
  #lab .product.helymov .content > img.helymov-brand{
    width:210px !important;
    margin-bottom:20px !important;
  }
}


/* v0.3J — HELYMOV PEDIASURE MODE
   First product = stronger brand presence, without touching Yteru. */

#lab .product.helymov .content > img.helymov-brand{
  width:340px !important;
  max-width:78% !important;
  margin:0 0 18px 0 !important;
  transform:translateY(-2px);
}

#lab .product.helymov .content{
  padding-top:34px !important;
}

@media(max-width:900px){
  #lab .product.helymov .content > img.helymov-brand{
    width:305px !important;
    max-width:82% !important;
  }
}

@media(max-width:620px){
  #lab .product.helymov .content > img.helymov-brand{
    width:255px !important;
    max-width:88% !important;
  }
}


/* v0.3K — HELYMOV SUPER SOLDIER SERUM
   Match Yteru's perceived brand footprint, not merely its CSS width. */

#lab .product.helymov .content > img.helymov-brand{
  width:430px !important;
  max-width:92% !important;
  height:auto !important;
  margin:-8px 0 14px -10px !important;
  transform:none !important;
}

/* Give the larger lockup enough breathing room without moving the card itself. */
#lab .product.helymov .content{
  padding-top:26px !important;
}

@media(max-width:1100px){
  #lab .product.helymov .content > img.helymov-brand{
    width:390px !important;
    max-width:90% !important;
  }
}
@media(max-width:900px){
  #lab .product.helymov .content > img.helymov-brand{
    width:350px !important;
  }
}
@media(max-width:620px){
  #lab .product.helymov .content > img.helymov-brand{
    width:285px !important;
    max-width:94% !important;
    margin-left:-6px !important;
  }
}


/* v0.3L — FROM THE LAB: CINEMATIC LIFE
   The approved static composition stays intact.
   Motion lives in photography, light and depth — never in decorative flying shapes. */

#lab .product{
  isolation:isolate;
  transform:translateZ(0);
  transition:
    transform 900ms cubic-bezier(.2,.75,.2,1),
    box-shadow 900ms cubic-bezier(.2,.75,.2,1);
}

/* photographic layer gets a little overscan so it can move without revealing edges */
#lab .product::after{
  inset:-3.5% !important;
  background-size:cover !important;
  will-change:transform,filter;
  transition:
    transform 1400ms cubic-bezier(.2,.75,.2,1),
    filter 1400ms ease;
}

/* Preserve existing gradient overlays but let them breathe subtly */
#lab .product::before{
  will-change:opacity;
  transition:opacity 1200ms ease;
}

/* YTERU — almost imperceptible camera drift + atmospheric breathing */
#lab .product.yteru::after{
  animation:yteruCamera 18s ease-in-out infinite alternate;
}
#lab .product.yteru::before{
  animation:yteruLight 9s ease-in-out infinite alternate;
}
@keyframes yteruCamera{
  0%{transform:scale(1.035) translate3d(-.5%,.2%,0);filter:saturate(.92) brightness(1);}
  100%{transform:scale(1.075) translate3d(-2.1%,-.65%,0);filter:saturate(.98) brightness(1.035);}
}
@keyframes yteruLight{
  0%{opacity:.96}
  100%{opacity:.82}
}

/* HELYMOV — macro lens drift, very slow focus/light breathing */
#lab .product.helymov::after{
  animation:helymovCamera 15s ease-in-out infinite alternate;
}
#lab .product.helymov::before{
  animation:helymovLight 7.5s ease-in-out infinite alternate;
}
@keyframes helymovCamera{
  0%{transform:scale(1.045) translate3d(.25%,0,0);filter:saturate(.96) brightness(.97);}
  100%{transform:scale(1.095) translate3d(-2.4%,1.0%,0);filter:saturate(1.05) brightness(1.035);}
}
@keyframes helymovLight{
  0%{opacity:.98}
  100%{opacity:.84}
}

/* Hover = cinematic push-in, not a UI gimmick */
#lab .product.yteru:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 70px rgba(0,0,0,.22);
}
#lab .product.yteru:hover::after{
  animation-play-state:paused;
  transform:scale(1.105) translate3d(-2.8%,-.8%,0);
  filter:saturate(1) brightness(1.045);
}
#lab .product.helymov:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 70px rgba(0,0,0,.28);
}
#lab .product.helymov:hover::after{
  animation-play-state:paused;
  transform:scale(1.125) translate3d(-3%,1%,0);
  filter:saturate(1.07) brightness(1.045);
}

/* copy/logo enter as one restrained editorial sequence */
#lab .product .content{
  opacity:0;
  transform:translateY(15px);
}
#lab .product.lab-visible .content{
  animation:labContentIn 1.15s cubic-bezier(.2,.75,.2,1) forwards;
}
#lab .product.helymov.lab-visible .content{animation-delay:.12s}
@keyframes labContentIn{
  to{opacity:1;transform:translateY(0)}
}

/* CTA micro interaction */
#lab .product a{
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
#lab .product a:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* Respect accessibility preferences */
@media(prefers-reduced-motion:reduce){
  #lab .product,
  #lab .product::after,
  #lab .product::before,
  #lab .product .content,
  #lab .product a{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  #lab .product .content{opacity:1 !important}
}


/* v0.3M — FROM THE LAB: BREATHING 2.0
   More amplitude and, crucially, a visible inhale/exhale rhythm. */

/* YTERU — landscape breathes in long organic cycles */
#lab .product.yteru::after{
  animation:yteruBreath2 12s cubic-bezier(.45,.05,.55,.95) infinite alternate !important;
}
#lab .product.yteru::before{
  animation:yteruGlow2 6s ease-in-out infinite alternate !important;
}
@keyframes yteruBreath2{
  0%{
    transform:scale(1.035) translate3d(-.3%,.25%,0);
    filter:saturate(.90) brightness(.985) contrast(.99);
  }
  45%{
    transform:scale(1.075) translate3d(-1.4%,-.35%,0);
    filter:saturate(.96) brightness(1.025) contrast(1);
  }
  100%{
    transform:scale(1.115) translate3d(-2.8%,-1%,0);
    filter:saturate(1.02) brightness(1.065) contrast(1.015);
  }
}
@keyframes yteruGlow2{
  0%{opacity:.98}
  100%{opacity:.70}
}

/* HELYMOV — closer macro breath, slightly more energetic than Yteru */
#lab .product.helymov::after{
  animation:helymovBreath2 10s cubic-bezier(.45,.05,.55,.95) infinite alternate !important;
}
#lab .product.helymov::before{
  animation:helymovGlow2 5s ease-in-out infinite alternate !important;
}
@keyframes helymovBreath2{
  0%{
    transform:scale(1.045) translate3d(.35%,0,0);
    filter:saturate(.94) brightness(.955) contrast(.99);
  }
  48%{
    transform:scale(1.095) translate3d(-1.2%,.55%,0);
    filter:saturate(1.02) brightness(1.015) contrast(1.01);
  }
  100%{
    transform:scale(1.145) translate3d(-3.2%,1.25%,0);
    filter:saturate(1.10) brightness(1.075) contrast(1.025);
  }
}
@keyframes helymovGlow2{
  0%{opacity:.99}
  100%{opacity:.68}
}

/* A tiny breathing response in the brand/content plane: enough to feel alive,
   not enough to look like floating UI. */
#lab .product.lab-visible .content{
  animation:labContentIn 1.15s cubic-bezier(.2,.75,.2,1) forwards,
            contentBreath 7s ease-in-out 1.2s infinite alternate;
}
#lab .product.helymov.lab-visible .content{
  animation:labContentIn 1.15s cubic-bezier(.2,.75,.2,1) .12s forwards,
            contentBreathH 6s ease-in-out 1.35s infinite alternate;
}
@keyframes contentBreath{
  from{transform:translateY(0)}
  to{transform:translateY(-2px)}
}
@keyframes contentBreathH{
  from{transform:translateY(0)}
  to{transform:translateY(-2.5px)}
}

/* Hover keeps the stronger cinematic push-in */
#lab .product.yteru:hover::after{
  animation-play-state:paused !important;
  transform:scale(1.145) translate3d(-3.2%,-1%,0) !important;
}
#lab .product.helymov:hover::after{
  animation-play-state:paused !important;
  transform:scale(1.175) translate3d(-3.6%,1.3%,0) !important;
}


/* v0.3N — WHAT WE'RE BUILDING FOR
   New section only. Frozen sections above are untouched. */

.building-for{
  position:relative;
  overflow:hidden;
  min-height:390px;
  background:#050606;
  color:#f3eee4;
  border-top:1px solid rgba(211,164,74,.12);
  border-bottom:1px solid rgba(211,164,74,.10);
}
.building-for__inner{
  width:min(1580px,calc(100% - 10vw));
  margin:0 auto;
  padding:72px 0 66px;
  position:relative;
  z-index:2;
}
.building-for__eyebrow{
  font-size:.68rem;
  letter-spacing:.24em;
  font-weight:700;
  color:#d7d0c4;
  margin-bottom:28px;
}
.building-for__grid{
  display:grid;
  grid-template-columns:minmax(440px,1.25fr) 1px minmax(230px,.62fr) minmax(420px,1fr);
  gap:34px;
  align-items:center;
  position:relative;
}
.building-for__statement h2{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(2rem,3vw,3.55rem);
  line-height:1.03;
  letter-spacing:-.025em;
  margin:0;
  max-width:720px;
}
.building-for__statement h2 em{
  color:#d5a548;
  font-style:normal;
}
.building-for__grid::before{
  content:"";
  grid-column:2;
  grid-row:1;
  width:1px;
  height:148px;
  justify-self:center;
  background:linear-gradient(180deg,transparent,rgba(221,215,203,.50),transparent);
}
.building-for__domains{
  grid-column:3;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.92rem;
  line-height:1.15;
  color:#ded9d0;
}
.building-for__signal{
  grid-column:4;
  position:absolute;
  right:-9vw;
  width:min(680px,48vw);
  height:270px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.92;
}
.signal-line{
  position:absolute;
  left:0;
  width:115%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(151,103,32,.12) 18%,
    rgba(224,171,69,.62) 48%,
    rgba(255,219,132,.94) 63%,
    rgba(203,140,41,.34) 82%,
    transparent 100%);
  box-shadow:
    0 0 10px rgba(230,171,62,.28),
    0 0 24px rgba(211,145,38,.14);
}
.signal-line::after{
  content:"";
  position:absolute;
  inset:-14px 0;
  background-image:
    radial-gradient(circle,rgba(255,218,137,.9) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(196,133,35,.65) 0 1px,transparent 1.5px);
  background-size:18px 17px,27px 23px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 76%,transparent 100%);
  opacity:.55;
}
.signal-line--1{top:34%;transform:rotate(-10deg) scaleX(1.05)}
.signal-line--2{top:52%;transform:rotate(-4deg) scaleX(1.12)}
.signal-line--3{top:68%;transform:rotate(5deg) scaleX(.98)}
.signal-glow{
  position:absolute;
  width:58%;
  height:72%;
  right:13%;
  top:12%;
  background:radial-gradient(ellipse,rgba(225,160,53,.20),rgba(177,113,28,.06) 38%,transparent 70%);
  filter:blur(18px);
}
.building-for__signature{
  position:absolute;
  right:0;
  bottom:-42px;
  z-index:4;
  text-align:right;
  font-size:.56rem;
  letter-spacing:.22em;
  line-height:1.55;
  color:#bfb9ae;
}

/* Give the energy field a slow, almost subconscious pulse. */
@media(prefers-reduced-motion:no-preference){
  .signal-line--1{animation:signalDrift1 10s ease-in-out infinite alternate}
  .signal-line--2{animation:signalDrift2 12s ease-in-out infinite alternate}
  .signal-line--3{animation:signalDrift3 9s ease-in-out infinite alternate}
  .signal-glow{animation:signalPulse 5.5s ease-in-out infinite alternate}
}
@keyframes signalDrift1{
  to{transform:rotate(-8deg) translate3d(-12px,5px,0) scaleX(1.08);opacity:.78}
}
@keyframes signalDrift2{
  to{transform:rotate(-2deg) translate3d(10px,-4px,0) scaleX(1.16);opacity:1}
}
@keyframes signalDrift3{
  to{transform:rotate(3deg) translate3d(-7px,-6px,0) scaleX(1.02);opacity:.72}
}
@keyframes signalPulse{
  to{transform:scale(1.12);opacity:.72}
}

@media(max-width:1050px){
  .building-for__grid{
    grid-template-columns:1fr 1px .55fr;
  }
  .building-for__signal{
    right:-18vw;
    width:58vw;
    opacity:.55;
  }
}
@media(max-width:760px){
  .building-for__inner{padding:58px 0}
  .building-for__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .building-for__grid::before{display:none}
  .building-for__domains{grid-column:1}
  .building-for__signal{
    grid-column:1;
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    width:120%;
    height:150px;
    margin-left:-10%;
    opacity:.58;
  }
  .building-for__signature{
    right:0;
    bottom:8px;
  }
}


/* v0.3O — WHAT WE'RE BUILDING FOR: ORGANIC SIGNAL
   Replace parallel "highway" lines with a living convergence field. */

.building-for__signal{
  width:min(760px,52vw) !important;
  height:330px !important;
  right:-7vw !important;
  opacity:1 !important;
  perspective:700px;
}

/* Turn the three rails into independent curved energy streams */
.signal-line{
  left:-4% !important;
  width:118% !important;
  height:88px !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:50% !important;
  opacity:.9;
}
.signal-line::before{
  content:"";
  position:absolute;
  inset:0;
  border-top:1.4px solid rgba(225,171,67,.72);
  border-radius:50%;
  filter:drop-shadow(0 0 5px rgba(224,164,54,.34));
}
.signal-line::after{
  inset:-18px 0 !important;
  background-image:
    radial-gradient(circle,rgba(255,224,154,.95) 0 1.15px,transparent 1.75px),
    radial-gradient(circle,rgba(202,143,43,.70) 0 1px,transparent 1.65px),
    radial-gradient(circle,rgba(255,197,88,.45) 0 .8px,transparent 1.45px) !important;
  background-size:22px 19px,31px 27px,43px 37px !important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 90%,transparent 100%) !important;
  opacity:.66 !important;
}

.signal-line--1{
  top:10% !important;
  transform:rotate(-17deg) translate3d(0,12px,0) scaleX(1.04) !important;
}
.signal-line--2{
  top:37% !important;
  transform:rotate(-2deg) translate3d(-20px,0,0) scaleX(1.12) !important;
}
.signal-line--3{
  top:62% !important;
  transform:rotate(13deg) translate3d(8px,-8px,0) scaleX(1.06) !important;
}

/* A fourth "ghost" current emerges from the shared glow using the glow itself */
.signal-glow{
  width:78% !important;
  height:86% !important;
  right:3% !important;
  top:7% !important;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 62% 50%,rgba(241,184,73,.24),transparent 30%),
    radial-gradient(ellipse at 38% 46%,rgba(187,119,25,.12),transparent 52%) !important;
  filter:blur(22px) !important;
}

/* The streams do not simply slide. They converge, open and breathe. */
@media(prefers-reduced-motion:no-preference){
  .signal-line--1{animation:organicCurrent1 8.5s cubic-bezier(.45,.05,.55,.95) infinite alternate !important}
  .signal-line--2{animation:organicCurrent2 10.5s cubic-bezier(.45,.05,.55,.95) infinite alternate !important}
  .signal-line--3{animation:organicCurrent3 9.3s cubic-bezier(.45,.05,.55,.95) infinite alternate !important}
  .signal-line::after{animation:particleFlow 6.5s linear infinite}
  .signal-glow{animation:organicGlow 4.8s ease-in-out infinite alternate !important}
}
@keyframes organicCurrent1{
  0%{transform:rotate(-19deg) translate3d(-18px,18px,0) scaleX(.96) scaleY(.72);opacity:.48}
  52%{transform:rotate(-12deg) translate3d(22px,-4px,0) scaleX(1.08) scaleY(1.12);opacity:1}
  100%{transform:rotate(-7deg) translate3d(48px,20px,0) scaleX(1.16) scaleY(.82);opacity:.68}
}
@keyframes organicCurrent2{
  0%{transform:rotate(-6deg) translate3d(-35px,8px,0) scaleX(.98) scaleY(1.18);opacity:.60}
  45%{transform:rotate(4deg) translate3d(8px,-14px,0) scaleX(1.13) scaleY(.78);opacity:1}
  100%{transform:rotate(-1deg) translate3d(54px,10px,0) scaleX(1.04) scaleY(1.20);opacity:.76}
}
@keyframes organicCurrent3{
  0%{transform:rotate(16deg) translate3d(-8px,-16px,0) scaleX(1.04) scaleY(.76);opacity:.52}
  50%{transform:rotate(8deg) translate3d(28px,8px,0) scaleX(1.14) scaleY(1.18);opacity:.98}
  100%{transform:rotate(2deg) translate3d(58px,-12px,0) scaleX(1.02) scaleY(.86);opacity:.70}
}
@keyframes particleFlow{
  from{background-position:0 0,0 0,0 0}
  to{background-position:132px 0,186px 0,258px 0}
}
@keyframes organicGlow{
  0%{transform:translate3d(-20px,6px,0) scale(.88);opacity:.48}
  100%{transform:translate3d(28px,-8px,0) scale(1.18);opacity:.92}
}

/* Keep statement hierarchy closer to the approved concept: strong but not billboard-sized. */
.building-for__statement h2{
  font-size:clamp(1.9rem,2.55vw,3.05rem) !important;
  line-height:1.02 !important;
}
.building-for__grid{
  grid-template-columns:minmax(430px,1.05fr) 1px minmax(220px,.48fr) minmax(470px,1.12fr) !important;
}

/* signature belongs to the energy field */
.building-for__signature{
  right:1.5% !important;
  bottom:-32px !important;
}

@media(max-width:1050px){
  .building-for__grid{grid-template-columns:1fr 1px .55fr !important}
}
@media(max-width:760px){
  .building-for__grid{grid-template-columns:1fr !important}
}


/* v0.3P — GRAVITY FIELD
   The previous three decorative streams are retired.
   The field is now a canvas-based gravitational lens / orbital flow. */

.building-for__signal{
  overflow:visible !important;
  width:min(860px,56vw) !important;
  height:360px !important;
  right:-5vw !important;
}
.building-for__signal .signal-line,
.building-for__signal .signal-glow{
  display:none !important;
}
.gravity-field{
  position:absolute;
  inset:-18% -8% -18% -12%;
  width:120%;
  height:136%;
  display:block;
  pointer-events:none;
  opacity:.98;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 10px rgba(205,145,43,.10));
}

/* Dark vignette makes the center feel deep rather than decorative. */
.building-for__signal::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 58% 51%,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.55) 15%,
      rgba(0,0,0,.12) 34%,
      transparent 58%);
  mix-blend-mode:multiply;
}

@media(max-width:760px){
  .gravity-field{
    inset:-12% -18%;
    width:136%;
    height:124%;
  }
}


/* v0.3Q — DENSE GRAVITY FIELD
   More interstellar dust, fewer "campfire sparks". */
.gravity-field{
  opacity:1 !important;
  filter:
    drop-shadow(0 0 8px rgba(205,145,43,.13))
    drop-shadow(0 0 22px rgba(150,92,22,.06)) !important;
}
.building-for__signal::after{
  background:
    radial-gradient(ellipse at 58% 51%,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.68) 13%,
      rgba(0,0,0,.22) 30%,
      transparent 55%) !important;
}


/* v0.3R — TRAJECTORY MODE
   Slow, continuous light-paths with visible tails. */
.gravity-field{
  filter:
    drop-shadow(0 0 10px rgba(215,151,43,.16))
    drop-shadow(0 0 28px rgba(154,92,21,.08)) !important;
}


/* v0.3S — GRAVITATIONAL LENS
   Fewer, longer, intentional rays. No hair-field. */
.gravity-field{
  opacity:.96 !important;
  filter:
    drop-shadow(0 0 12px rgba(220,158,50,.17))
    drop-shadow(0 0 34px rgba(148,88,18,.08)) !important;
}


/* v0.3T — BRANCHING TIMELINE
   One dominant central current; alternate paths emerge around it. */
.gravity-field{
  opacity:1 !important;
  filter:drop-shadow(0 0 14px rgba(215,150,45,.12)) !important;
}
.building-for__signal::after{
  /* remove the old circular black-hole vignette */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.24) 0%,
      transparent 18%,
      transparent 84%,
      rgba(0,0,0,.18) 100%) !important;
  mix-blend-mode:normal !important;
}


/* v0.3X — CONTEMPLATION HERO
   Replaces the opening star field with the approved sunset image.
   Building For / Multiverse remains untouched. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(2,3,3,.98) 0%,
      rgba(2,3,3,.91) 24%,
      rgba(2,3,3,.52) 43%,
      rgba(2,3,3,.10) 67%,
      rgba(2,3,3,.05) 100%),
    url("assets/nurhelix-hero-contemplation.png") center center / cover no-repeat !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 30%, transparent 72%, rgba(0,0,0,.18) 100%),
    radial-gradient(circle at 54% 43%, rgba(226,161,64,.10), transparent 30%);
}

.hero > * {
  position: relative;
  z-index: 2;
}

/* Existing opening star layers are intentionally suppressed, not deleted,
   so the change is reversible from the checkpoint. */
.hero canvas,
.hero .hero-stars,
.hero .star-field,
.hero .stars,
.hero .hero-particles {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .hero {
    background-position: 62% center !important;
  }
}


/* v0.3Y — CONTEMPLATION HERO: ALIVE
   Animate the photograph and light, not decorative overlays. */

.hero{
  background-position: 50% 50% !important;
  background-size: cover !important;
  will-change: background-position;
}

.hero::before{
  animation: heroSunBreath 8s ease-in-out infinite alternate;
}

/* Gentle camera drift via an oversized photographic pseudo-layer */
.hero::after{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(2,3,3,.98) 0%,
      rgba(2,3,3,.90) 24%,
      rgba(2,3,3,.48) 42%,
      rgba(2,3,3,.08) 68%,
      rgba(2,3,3,.03) 100%),
    url("assets/nurhelix-hero-contemplation.png") center center / cover no-repeat;
  transform:scale(1.035) translate3d(0,0,0);
  filter:saturate(.96) brightness(.985);
  animation: heroCameraBreath 14s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.hero{
  background-image:none !important;
}

.hero > *{
  position:relative;
  z-index:2;
}

@keyframes heroCameraBreath{
  0%{
    transform:scale(1.035) translate3d(0,0,0);
    filter:saturate(.94) brightness(.975);
  }
  50%{
    transform:scale(1.060) translate3d(-.6%,-.2%,0);
    filter:saturate(.99) brightness(1.015);
  }
  100%{
    transform:scale(1.085) translate3d(-1.2%,-.45%,0);
    filter:saturate(1.03) brightness(1.045);
  }
}

@keyframes heroSunBreath{
  0%{opacity:.78}
  100%{opacity:1}
}

/* Slight editorial reveal once page loads */
.hero-copy,
.hero-side,
.hero-note{
  opacity:0;
  transform:translateY(12px);
}
.hero.hero-live .hero-copy{
  animation:heroCopyIn 1.05s cubic-bezier(.2,.75,.2,1) .20s forwards;
}
.hero.hero-live .hero-side{
  animation:heroCopyIn 1.05s cubic-bezier(.2,.75,.2,1) .48s forwards;
}
.hero.hero-live .hero-note{
  animation:heroCopyIn 1.05s cubic-bezier(.2,.75,.2,1) .68s forwards;
}
@keyframes heroCopyIn{
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .hero::after,
  .hero::before,
  .hero-copy,
  .hero-side,
  .hero-note{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}


/* =========================================================
   v0.4A — EDITORIAL POLISH / HERO + PHILOSOPHY
   Art-direction pass only. Approved imagery and motion remain.
   ========================================================= */

/* HERO — recover the cinematic/editorial scale of the concept */
.hero{
  min-height: min(760px, 82vh);
}

.hero .container,
.hero-inner,
.hero-content{
  min-height: inherit;
}

.hero-copy{
  max-width: 690px;
}

.hero h1,
.hero-title{
  font-size: clamp(3.7rem, 5.55vw, 6.45rem);
  line-height: .91;
  letter-spacing: -.045em;
  max-width: 760px;
  text-wrap: balance;
}

.hero .eyebrow,
.hero-kicker{
  margin-bottom: 1.35rem;
  letter-spacing: .19em;
}

.hero p,
.hero-subtitle{
  max-width: 560px;
  font-size: clamp(1rem, 1.15vw, 1.22rem);
  line-height: 1.55;
}

.hero .cta,
.hero-cta{
  margin-top: 2rem;
}

.hero-side{
  letter-spacing: .18em;
  line-height: 1.6;
}

/* PHILOSOPHY — less corporate grid, more editorial manifesto */
.philosophy,
#philosophy{
  padding-top: clamp(5.8rem, 8vw, 9rem);
  padding-bottom: clamp(5.4rem, 7vw, 8rem);
}

.philosophy .section-head,
#philosophy .section-head{
  align-items: start;
  gap: clamp(3rem, 7vw, 9rem);
  margin-bottom: clamp(4.2rem, 6vw, 6.6rem);
}

.philosophy h2,
#philosophy h2,
.philosophy-title{
  font-size: clamp(3rem, 4.7vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.038em;
  max-width: 800px;
  text-wrap: balance;
}

.philosophy .section-copy,
#philosophy .section-copy,
.philosophy-copy{
  max-width: 560px;
  font-size: clamp(1rem, 1.08vw, 1.2rem);
  line-height: 1.62;
  padding-top: .35rem;
}

.philosophy .eyebrow,
#philosophy .eyebrow{
  margin-bottom: 1.6rem;
  letter-spacing: .18em;
}

/* Pillars: quieter, gallery-like presentation */
.pillars,
.philosophy-grid,
.values-grid{
  margin-top: clamp(3.6rem, 5vw, 5.8rem);
  border-top: 1px solid rgba(22,18,12,.17);
  padding-top: 2rem;
}

.pillar,
.value-item{
  min-height: 155px;
  padding: .75rem clamp(1.1rem, 2vw, 2.3rem) 0;
}

.pillar-icon,
.value-icon{
  transform: scale(1.08);
  margin-bottom: 1.15rem;
}

.pillar strong,
.value-item strong{
  letter-spacing: .16em;
}

.pillar span,
.value-item span{
  margin-top: .35rem;
  opacity: .78;
}

/* More breathing room between Hero and philosophy */
.hero + .philosophy,
.hero + #philosophy{
  border-top: 0;
}

@media (max-width: 980px){
  .hero{
    min-height: 720px;
  }
  .hero-copy{
    max-width: 600px;
  }
  .philosophy .section-head,
  #philosophy .section-head{
    gap: 2.6rem;
  }
}

@media (max-width: 760px){
  .hero{
    min-height: 700px;
  }
  .hero h1,
  .hero-title{
    font-size: clamp(3.1rem, 13vw, 4.65rem);
    line-height: .94;
  }
  .philosophy,
  #philosophy{
    padding-top: 4.8rem;
    padding-bottom: 4.6rem;
  }
  .philosophy h2,
  #philosophy h2,
  .philosophy-title{
    font-size: clamp(2.75rem, 11vw, 4.1rem);
  }
  .pillars,
  .philosophy-grid,
  .values-grid{
    padding-top: 1.4rem;
  }
}


/* =========================================================
   v0.4B — CREATIVE DIRECTOR PASS
   System-level polish only. No new concepts or effects.
   ========================================================= */

:root{
  --cd-gold:#c99a3d;
  --cd-ink:#080908;
  --cd-cream:#f2ede3;
  --cd-hairline:rgba(201,154,61,.24);
}

/* 1. Global editorial rhythm */
section{
  scroll-margin-top: 76px;
}

.eyebrow,
.section-kicker,
.hero-kicker{
  font-size: clamp(.68rem,.72vw,.78rem);
  letter-spacing:.19em;
  font-weight:600;
}

.eyebrow::after,
.section-kicker::after{
  width:28px;
  height:1px;
}

/* 2. Optical text rendering and consistent measures */
h1,h2,h3{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}

p{
  text-wrap:pretty;
}

.section-copy,
.philosophy-copy{
  max-width:54ch;
}

/* 3. Hero: preserve composition, refine optical balance */
.hero-copy{
  padding-top:1.5vh;
}

.hero h1,
.hero-title{
  margin-bottom:1.35rem;
}

.hero .cta,
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  transition:opacity .28s ease, transform .28s ease;
}

.hero .cta:hover,
.hero-cta:hover{
  transform:translateY(-2px);
}

.hero-side{
  opacity:.82;
}

/* 4. Philosophy: stronger museum/editorial cadence */
.philosophy .section-head,
#philosophy .section-head{
  position:relative;
}

.philosophy .section-head::after,
#philosophy .section-head::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(clamp(4.2rem,6vw,6.6rem) * -.55);
  height:1px;
  background:linear-gradient(90deg,rgba(20,17,12,.17),rgba(20,17,12,.07) 72%,transparent);
}

.pillar,
.value-item{
  position:relative;
}

.pillar:not(:last-child)::after,
.value-item:not(:last-child)::after{
  opacity:.65;
}

/* 5. From the Lab: cards feel like exhibits, not widgets */
.product-card,
.lab-card{
  box-shadow:0 24px 70px rgba(0,0,0,.20);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),
             box-shadow .55s cubic-bezier(.2,.7,.2,1);
}

.product-card:hover,
.lab-card:hover{
  transform:translateY(-4px);
  box-shadow:0 32px 90px rgba(0,0,0,.28);
}

.product-card a,
.lab-card a{
  transition:transform .25s ease, opacity .25s ease;
}

.product-card a:hover,
.lab-card a:hover{
  transform:translateX(2px);
}

/* 6. Section transitions: reduce "stacked rectangles" feeling */
.from-lab,
#lab,
.products-section{
  position:relative;
}

.from-lab::before,
#lab::before,
.products-section::before{
  content:"";
  position:absolute;
  top:0;
  left:5%;
  right:5%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cd-hairline),transparent);
}

.building-for,
.building-section{
  position:relative;
  border-top:0 !important;
}

.building-for::before,
.building-section::before{
  content:"";
  position:absolute;
  top:0;
  left:4%;
  right:4%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,154,61,.16),transparent);
}

/* 7. Buttons: one visual grammar */
button,
.button,
.btn,
.cta-button,
.product-card a[role="button"]{
  -webkit-font-smoothing:antialiased;
}

.button,
.btn,
.cta-button{
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.button:hover,
.btn:hover,
.cta-button:hover{
  transform:translateY(-1px);
}

/* 8. Header/nav micro-polish */
.site-header a,
header nav a{
  position:relative;
  transition:opacity .22s ease;
}

.site-header nav a::after,
header nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:-7px;
  height:1px;
  background:var(--cd-gold);
  transition:left .25s ease,right .25s ease;
}

.site-header nav a:hover::after,
header nav a:hover::after{
  left:12%;
  right:12%;
}

/* 9. Focus states: production-quality interaction without visual noise */
a:focus-visible,
button:focus-visible{
  outline:1px solid var(--cd-gold);
  outline-offset:5px;
}

/* 10. Responsive optical corrections */
@media(max-width:980px){
  .product-card:hover,
  .lab-card:hover{
    transform:none;
  }
}

@media(max-width:760px){
  .philosophy .section-head::after,
  #philosophy .section-head::after{
    display:none;
  }

  .hero-copy{
    padding-top:0;
  }

  .site-header nav a::after,
  header nav a::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .product-card,
  .lab-card,
  .hero .cta,
  .hero-cta,
  .button,
  .btn,
  .cta-button{
    transition:none !important;
  }
}

/* =========================================================
   v0.5 — COMPOSITION / BREATH / CONSISTENCY / ABOUT + FOOTER
   Fine-polish pass. No new visual concept.
   ========================================================= */

/* Global section cadence */
.philosophy{padding:clamp(82px,7vw,124px) 6vw clamp(74px,6.4vw,112px)}
.lab{padding:clamp(76px,6.4vw,112px) 4vw clamp(82px,7vw,124px)}
.purpose{padding:clamp(88px,7vw,128px) 6vw}
.about{padding:0;background:#f2ece2;color:#161616}

/* Philosophy: use the real DOM, not conceptual class names */
.phi-grid{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:clamp(56px,8vw,142px);align-items:start}
.phi-grid h2{max-width:760px;letter-spacing:-.035em;margin:28px 0 0}
.phi-grid p{max-width:560px;margin:34px 0 0}
.pillars{margin-top:clamp(54px,5vw,86px);padding-top:clamp(28px,2.4vw,42px)}
.pillars div{min-height:128px;justify-content:flex-start;padding:0 clamp(16px,2vw,34px)}
.pillar-icon{width:48px;height:48px;margin:0 auto 12px!important}
.pillar-icon svg{width:100%;height:100%;fill:none;stroke:#171512;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}

/* Lab: align title/copy and let cards read as a pair */
.lab-head{gap:clamp(64px,9vw,150px);align-items:end;margin:0 2vw clamp(34px,3.4vw,54px)}
.lab h3{font-size:clamp(1.55rem,1.8vw,2.05rem);margin:18px 0 0}
.lab-head>p{max-width:610px;margin:0 0 3px}
#lab .products{gap:clamp(16px,1.4vw,24px)}
#lab .product{box-shadow:0 28px 80px rgba(0,0,0,.22);transition:transform .6s cubic-bezier(.2,.72,.2,1),box-shadow .6s cubic-bezier(.2,.72,.2,1)}
#lab .product:hover{transform:translateY(-3px);box-shadow:0 34px 96px rgba(0,0,0,.30)}

/* About: turn the closing cream panel into an editorial signature */
.about-shell{padding:clamp(62px,5.5vw,92px) 6vw clamp(68px,5.8vw,98px);border-top:1px solid rgba(26,22,16,.10)}
.about-grid{grid-template-columns:minmax(250px,.82fr) minmax(420px,1.55fr) minmax(180px,.48fr);gap:clamp(42px,6vw,104px);align-items:center;margin-top:clamp(30px,3vw,48px)}
.about-brand{gap:18px;align-items:center;min-width:0}
.about-brand img{width:clamp(68px,5vw,88px);filter:invert(1)}
.about-brand b{font-size:clamp(.78rem,.92vw,.98rem);letter-spacing:.31em;font-weight:500;line-height:1.2}
.about-brand small{font-size:.55em;margin-top:7px}
.about-copy{font-size:clamp(.92rem,1vw,1.06rem);line-height:1.78!important;max-width:68ch;margin:0;color:#4a453e!important}
.about-manifesto{min-height:112px;padding-left:clamp(28px,3vw,46px);border-left:1px solid rgba(36,30,21,.22);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#71695f;font-size:.69rem;line-height:1.7;letter-spacing:.19em;font-weight:500}
.about-manifesto i{display:block;width:28px;height:1px;background:var(--gold);margin-top:15px}

/* Footer: quiet, architectural, aligned with About */
.site-footer{display:block;padding:0 4vw;background:#050605;color:#f4efe6;font-size:.74rem;border-top:1px solid rgba(201,154,61,.12)}
.footer-main{min-height:118px;display:grid;grid-template-columns:.9fr 1.35fr 1fr;gap:30px;align-items:center}
.footer-brand{display:flex;flex-direction:column;gap:5px;letter-spacing:.15em}
.footer-brand b{font-size:.76rem;font-weight:500}.footer-brand small{letter-spacing:0;color:#8e887f}
.footer-mid{text-align:center;letter-spacing:.20em;font-size:.68rem;white-space:nowrap}.footer-mid i{font-style:normal;color:var(--gold);padding:0 .45rem}
.footer-links{display:flex;justify-content:flex-end;gap:clamp(15px,1.6vw,26px);color:#b8b1a7}.footer-links a{transition:color .22s ease}.footer-links a:hover{color:#fff}
.footer-bottom{min-height:64px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:24px;color:#68645e;font-size:.66rem}
.footer-bottom p{margin:0;grid-column:auto}.footer-bottom p:last-child{text-align:right}

/* The duplicated purpose/building statements need distinct hierarchy */
.purpose{padding-top:clamp(94px,8vw,142px);padding-bottom:clamp(92px,7.5vw,134px)}
.purpose h2{max-width:1220px;letter-spacing:-.03em}

@media(max-width:900px){
  .phi-grid,.about-grid{grid-template-columns:1fr}
  .about-grid{gap:32px}.about-manifesto{border-left:0;border-top:1px solid rgba(36,30,21,.18);padding:28px 0 0;min-height:0}
  .footer-main{grid-template-columns:1fr;padding:34px 0;gap:22px}.footer-mid{text-align:left;white-space:normal}.footer-links{justify-content:flex-start;flex-wrap:wrap}.footer-bottom{align-items:flex-start;padding:20px 0;flex-direction:column;gap:8px}.footer-bottom p:last-child{text-align:left}
  #lab .product:hover{transform:none}
}
@media(max-width:560px){
  .about-shell{padding-left:7vw;padding-right:7vw}.footer-main{min-height:0}.site-footer{padding-left:7vw;padding-right:7vw}
}

/* =========================================================
   v0.6 — EDITORIAL FINISH
   Legibility, header separation and closing-section balance.
   ========================================================= */

html{scroll-padding-top:92px}

/* Keep navigation readable without letting it cut through the story. */
.site-header{
  z-index:60;
  transition:background-color .32s ease,box-shadow .32s ease,backdrop-filter .32s ease,transform .32s ease;
}
.site-header.is-scrolled{
  background:rgba(5,6,5,.88);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  box-shadow:0 1px 0 rgba(209,166,91,.12),0 14px 34px rgba(0,0,0,.16);
}

/* Secondary copy should feel quiet, never faint. */
.label,.eyebrow{font-size:clamp(.76rem,.72vw,.84rem)}
.phi-grid p{
  font-size:clamp(1rem,1.08vw,1.16rem);
  line-height:1.78;
  color:#403b35;
}
.pillars strong{font-size:.84rem}
.pillars span{font-size:clamp(.91rem,.86vw,1rem);line-height:1.45}
.lab-head>p{
  font-size:clamp(1rem,1.02vw,1.12rem);
  line-height:1.72;
  color:#d8d1c6;
}
#lab .product p{
  font-size:clamp(.94rem,.92vw,1.02rem);
  line-height:1.64;
  max-width:42ch;
}
#lab .product a{
  font-size:.88rem;
  padding:10px 17px;
}

/* Match the perceived—not merely numeric—weight of both product marks. */
#lab .product.helymov .content > img.helymov-brand{
  transform:scale(1.1)!important;
  transform-origin:left center!important;
  margin-bottom:10px!important;
}

/* Give the closing statement a protected editorial plane. */
.building-for{min-height:440px;isolation:isolate}
.building-for__inner{
  width:min(1580px,calc(100% - 12vw));
  padding:104px 0 88px;
}
.building-for__eyebrow{
  position:relative;
  z-index:5;
  margin-bottom:30px;
  font-size:.76rem;
}
.building-for__grid{
  grid-template-columns:minmax(430px,1.12fr) 1px minmax(210px,.48fr) minmax(440px,1.08fr)!important;
  gap:clamp(26px,2.5vw,44px);
}
.building-for__statement,
.building-for__domains{position:relative;z-index:5}
.building-for__statement h2{
  font-size:clamp(2.05rem,2.7vw,3.25rem)!important;
  line-height:1.045!important;
  text-wrap:balance;
}
.building-for__domains{
  gap:10px;
  font-size:clamp(.94rem,.9vw,1.04rem);
  line-height:1.3;
  color:#e4ded4;
}
.building-for__signal{z-index:1;right:-3vw!important;width:min(800px,53vw)!important}
.building-for__signature{
  z-index:5;
  right:1.5%!important;
  bottom:-20px!important;
  font-size:.66rem;
  color:#c9c2b8;
}

/* Let the company signature carry the authority earned by the page. */
.about-shell{padding-top:clamp(72px,6vw,104px);padding-bottom:clamp(78px,6.5vw,112px)}
.about-brand img{width:clamp(78px,5.6vw,102px)}
.about-brand b{font-size:clamp(.86rem,1vw,1.06rem)}
.about-copy{
  font-size:clamp(1rem,1.08vw,1.14rem);
  line-height:1.76!important;
  color:#403b35!important;
}
.about-manifesto{font-size:clamp(.75rem,.72vw,.84rem);color:#625b52}

/* Footer remains discreet, but no longer reads like legal microcopy. */
.site-footer{font-size:.82rem}
.footer-main{min-height:142px}
.footer-brand{gap:7px}
.footer-brand b{font-size:.86rem}
.footer-brand small{font-size:.78rem;color:#a49d93}
.footer-mid{font-size:.76rem;line-height:1.6}
.footer-links{font-size:.84rem;color:#c8c1b7}
.footer-bottom{min-height:72px;font-size:.75rem;color:#817b73}

@media(max-width:1180px){
  .building-for__grid{grid-template-columns:minmax(390px,1fr) 1px minmax(190px,.5fr)!important}
  .building-for__signal{right:-18vw!important;width:64vw!important;opacity:.72!important}
}

@media(max-width:900px){
  .building-for__inner{padding:94px 0 76px}
  .building-for__grid{grid-template-columns:1fr!important;gap:26px}
  .building-for__grid::before{display:none}
  .building-for__domains{grid-column:1}
  .building-for__signal{
    grid-column:1;
    position:relative;
    right:auto!important;
    top:auto;
    transform:none;
    width:116%!important;
    height:180px!important;
    margin:4px 0 0 -8%;
    opacity:.72!important;
  }
  .building-for__signature{bottom:2px!important}
  .footer-main{padding:42px 0;gap:24px}
}

@media(max-width:560px){
  html{scroll-padding-top:78px}
  .site-header{height:66px}
  .building-for{min-height:0}
  .building-for__inner{width:86%;padding:82px 0 66px}
  .building-for__statement h2{font-size:clamp(2rem,9.2vw,2.72rem)!important}
  .building-for__signal{height:150px!important}
  .about-brand img{width:82px}
  .about-copy{font-size:1rem}
  .footer-bottom{font-size:.72rem}
}

/* =========================================================
   v0.7 — PRODUCT MARK OPTICAL ALIGNMENT
   Helymov's source artwork includes a tall transparent canvas.
   Crop that canvas in layout so both product stories begin together.
   ========================================================= */

#lab .product.helymov .content{padding-top:44px!important}
#lab .product.helymov .content > img.helymov-brand{
  display:block!important;
  width:360px!important;
  max-width:90%!important;
  height:104px!important;
  object-fit:cover!important;
  object-position:center 40%!important;
  transform:none!important;
  margin:0 0 2px 0!important;
}

@media(max-width:620px){
  #lab .product.helymov .content{padding-top:28px!important}
  #lab .product.helymov .content > img.helymov-brand{
    width:300px!important;
    max-width:94%!important;
    height:88px!important;
    margin-bottom:4px!important;
  }
}

/* =========================================================
   v0.8 — FOOTER ARCHITECTURE
   Restore the intended three-column close and elevate the final signature.
   ========================================================= */

footer.site-footer > .footer-main{
  display:grid!important;
  grid-template-columns:minmax(230px,.9fr) minmax(360px,1.25fr) minmax(300px,1fr)!important;
  min-height:152px;
  width:100%;
  padding:0;
  gap:clamp(28px,3vw,56px);
  align-items:center;
}
footer.site-footer .footer-brand{
  justify-self:start;
  align-items:flex-start;
  text-align:left;
}
footer.site-footer .footer-mid{
  justify-self:center;
  text-align:center;
}
footer.site-footer .footer-links{
  justify-self:end;
  justify-content:flex-end;
}
footer.site-footer > .footer-bottom{
  display:grid;
  grid-template-columns:1fr auto;
  min-height:88px;
  padding:0;
  align-items:center;
  gap:32px;
}
footer.site-footer > .footer-bottom p:first-child{
  color:#8f8981;
  font-size:.76rem;
}
footer.site-footer > .footer-bottom p:last-child{
  display:flex;
  align-items:center;
  gap:13px;
  color:#c9bda8;
  font-size:.84rem;
  letter-spacing:.035em;
  font-weight:400;
}
footer.site-footer > .footer-bottom p:last-child::before{
  content:"";
  display:block;
  width:24px;
  height:1px;
  background:var(--gold);
  opacity:.78;
}

@media(max-width:980px){
  footer.site-footer > .footer-main{
    grid-template-columns:1fr!important;
    min-height:0;
    padding:46px 0 40px;
    gap:22px;
  }
  footer.site-footer .footer-mid,
  footer.site-footer .footer-links{
    justify-self:start;
    text-align:left;
    justify-content:flex-start;
  }
  footer.site-footer > .footer-bottom{
    grid-template-columns:1fr;
    min-height:0;
    padding:26px 0 30px;
    gap:13px;
  }
  footer.site-footer > .footer-bottom p:last-child{text-align:left}
}

@media(max-width:560px){
  footer.site-footer > .footer-main{padding:38px 0 34px}
  footer.site-footer .footer-links{gap:18px;row-gap:12px}
  footer.site-footer > .footer-bottom p:last-child{font-size:.79rem}
}

/* =========================================================
   v0.9 — CHULA FINAL SPRINT
   Keep navigation available without interrupting the closing manifesto.
   Complete the optical alignment between both product cards.
   ========================================================= */

.site-header{will-change:transform}
.site-header.is-hidden{transform:translateY(calc(-100% - 2px))}
.site-header.is-hidden:focus-within{transform:translateY(0)}

@media(min-width:621px){
  #lab .product.helymov .content{padding-top:36px!important}
}

@media(prefers-reduced-motion:reduce){
  .site-header{transition:none}
}