/* ═══════════════════════════════════════════════════════
   OPTIMAL FYSIK 40+ — designdemo
   Palett: off-white / svart / grå + guld accent
   Referens-energi: noomoagency.com (komposition, ej färg)
   ═══════════════════════════════════════════════════════ */

:root{
  --paper:#f4f2ee;
  --paper-2:#eceae4;
  --white:#ffffff;
  --ink:#0c0c0c;
  --ink-soft:#1a1a1a;
  --grey:#6d6a64;
  --grey-2:#a8a49c;
  --line:#d8d4cc;
  --gold:#b3893f;
  --gold-2:#d8b25e;
  --r:6px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
em{font-style:italic}
::selection{background:var(--gold);color:var(--white)}

.display{font-family:"Space Grotesk",sans-serif}

/* ── labels ── */
.tag{
  font-family:"Space Grotesk",sans-serif;
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:inline-block;
}
.tag--center{display:block;text-align:center}
.tag--light{color:var(--gold-2)}

/* ═══ NAV ═══ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem clamp(1.2rem,4vw,3.5rem);
  mix-blend-mode:difference;color:#fff;
  transition:padding .4s var(--ease);
}
.nav__logo{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.14em;text-decoration:none;color:inherit;
}
.nav__logo span{color:var(--gold-2)}
.nav__links{display:flex;gap:clamp(1rem,2vw,2.2rem);align-items:center}
.nav__links a{
  color:inherit;text-decoration:none;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:400;opacity:.85;transition:opacity .3s;
}
.nav__links a:hover{opacity:1}
.nav__cta{
  border:1px solid currentColor;border-radius:40px;
  padding:.5rem 1.1rem !important;opacity:1 !important;
}

/* ═══ HERO ═══ */
.hero{
  position:relative;min-height:100svh;
  padding:clamp(6rem,12vh,9rem) clamp(1.2rem,4vw,3.5rem) 3rem;
  display:grid;align-content:center;
  overflow:hidden;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  margin-bottom:1.6rem;position:relative;z-index:3;
}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(179,137,63,.18)}
.hero__title{
  font-family:"Space Grotesk",sans-serif;
  font-weight:600;line-height:.94;letter-spacing:-.02em;
  font-size:clamp(2.6rem,9.2vw,9rem);
  text-transform:uppercase;
  max-width:14ch;position:relative;z-index:3;
  pointer-events:none;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title em{font-weight:400;color:var(--grey)}
.hero__title .line--gold{color:var(--gold)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.hero__media--fallback{display:none}
body.no-webgl .hero__canvas{display:none}
body.no-webgl .hero__media--fallback{display:block}
.hero__media{
  position:absolute;top:0;right:clamp(1rem,7vw,7rem);
  width:clamp(230px,29vw,440px);height:100%;
  z-index:2;overflow:hidden;
}
.hero__media img{filter:grayscale(.06) contrast(1.02)}
.hero__frame{
  position:absolute;inset:12px;border:1px solid rgba(216,178,94,.55);
  pointer-events:none;
}
.hero__sub{
  margin-top:2.4rem;max-width:34ch;
  font-size:clamp(.95rem,1.5vw,1.12rem);color:var(--ink-soft);
  position:relative;z-index:3;
}
.hero__scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.68rem;letter-spacing:.25em;color:var(--grey);z-index:4;
}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);
  animation:scrolldrop 1.8s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ═══ MANIFEST ═══ */
.manifest{
  background:var(--ink);color:var(--paper);
  padding:clamp(6rem,18vh,13rem) clamp(1.2rem,5vw,5rem);
}
.manifest__text{
  font-family:"Space Grotesk",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;
  font-size:clamp(1.7rem,5.2vw,4.6rem);max-width:20ch;
}
.manifest__text em{color:var(--gold-2);font-style:normal}

/* ═══ BIOLOGISK EKONOMI ═══ */
.econ{
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,5vw,5rem);
  display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);
  max-width:1400px;margin:0 auto;
}
.econ__head{max-width:52ch}
.econ__title{
  font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.02em;
  margin:1rem 0 1.4rem;
}
.econ__lead{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--grey);max-width:46ch}
.econ__ledger{display:grid;gap:1.1rem;border-top:1px solid var(--line);padding-top:2rem}
.ledger__row{
  display:grid;grid-template-columns:clamp(90px,12vw,160px) 1fr auto;
  align-items:center;gap:clamp(1rem,3vw,2.5rem);
}
.ledger__label{font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(1rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.02em}
.ledger__bar{height:10px;background:var(--line);border-radius:20px;overflow:hidden}
.ledger__bar i{display:block;height:100%;width:0;border-radius:20px;
  background:var(--ink);transition:width 1.3s var(--ease)}
.ledger__row--gold .ledger__bar i{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.ledger__row--gold .ledger__label{color:var(--gold)}
.ledger__val{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)}
.econ__note{
  font-family:"Space Grotesk",sans-serif;font-weight:400;
  font-size:clamp(1.15rem,2.6vw,2rem);line-height:1.28;max-width:24ch;
  justify-self:end;text-align:right;color:var(--ink);
}
.econ__note{border-right:2px solid var(--gold);padding-right:1.4rem}

/* ═══ METOD ═══ */
.method{
  background:var(--white);
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,5vw,5rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.phases{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin:2.5rem auto 0;max-width:1300px;
}
.phase{background:var(--white);padding:clamp(1.8rem,3vw,3rem);min-height:clamp(220px,28vh,320px);
  display:flex;flex-direction:column;transition:background .4s}
.phase:hover{background:var(--paper)}
.phase__num{font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(2.4rem,5vw,4rem);color:var(--gold);line-height:1;opacity:.85}
.phase h3{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(1.4rem,2.6vw,2rem);text-transform:uppercase;margin:auto 0 .8rem}
.phase p{color:var(--grey);font-size:.98rem;max-width:32ch}
.method__foot{text-align:center;margin-top:2.4rem;color:var(--grey);
  font-size:.95rem;letter-spacing:.02em}

/* ═══ LIVET / GALLERI ═══ */
.life{
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,5vw,5rem) clamp(4rem,8vh,6rem);
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.5vw,2rem);align-items:start;
}
.life__intro{grid-column:1/8;margin-bottom:clamp(2rem,5vw,4rem)}
.life__title{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(2rem,5.5vw,4rem);line-height:1;letter-spacing:-.02em;margin:1rem 0 1.2rem}
.life__intro p{color:var(--grey);max-width:44ch;font-size:1.05rem}
.shot{position:relative;overflow:hidden;background:var(--paper-2)}
.shot img{transition:transform 1.2s var(--ease);filter:grayscale(.05)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;left:0;bottom:0;width:100%;
  padding:1.4rem 1.3rem 1.2rem;color:#fff;font-size:.92rem;line-height:1.3;
  background:linear-gradient(transparent,rgba(10,10,10,.72));
}
.shot__k{display:block;font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.35rem}
.shot--a{grid-column:1/4;aspect-ratio:4/5}
.shot--b{grid-column:4/7;aspect-ratio:3/4;margin-top:clamp(3rem,7vw,6rem)}
.shot--c{grid-column:7/10;aspect-ratio:4/5}
.shot--d{grid-column:10/13;aspect-ratio:3/4;margin-top:clamp(3rem,7vw,6rem)}

/* ═══ PIA ═══ */
.pia{
  background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(4rem,10vh,8rem) clamp(1.2rem,5vw,5rem);
}
.pia__media{position:relative;aspect-ratio:4/5;overflow:hidden;max-width:480px}
.pia__media img{filter:grayscale(.1)}
.pia__title{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.02em;margin:.8rem 0 1.2rem}
.pia__lead{color:var(--grey-2);max-width:40ch;font-size:1.08rem;margin-bottom:2.2rem}
.pia__facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;max-width:420px}
.pia__facts li{border-top:1px solid rgba(255,255,255,.16);padding-top:.7rem;
  font-size:.92rem;color:var(--grey-2);letter-spacing:.04em}
.pia__facts b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--gold-2);margin-bottom:.1rem}

/* ═══ CTA ═══ */
.cta{
  padding:clamp(6rem,15vh,11rem) clamp(1.2rem,5vw,5rem);
  text-align:center;display:grid;justify-items:center;gap:1.6rem;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(216,178,94,.14),transparent 60%),
    var(--paper);
}
.cta__title{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(2rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.02em}
.cta__steps{display:flex;align-items:center;gap:1rem;color:var(--grey);
  font-family:"Space Grotesk",sans-serif;font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.06em;flex-wrap:wrap;justify-content:center}
.cta__steps i{width:26px;height:1px;background:var(--gold)}
.cta__btn{
  margin-top:.6rem;text-decoration:none;
  background:var(--ink);color:var(--white);
  font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:.06em;
  padding:1.05rem 2.6rem;border-radius:44px;font-size:1rem;
  border:1px solid var(--ink);transition:.4s var(--ease);
}
.cta__btn:hover{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--gold);border-color:var(--gold)}
.cta__fine{color:var(--grey-2);font-size:.85rem;letter-spacing:.03em}

/* ═══ FOOT ═══ */
.foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:2.2rem clamp(1.2rem,5vw,5rem);
  border-top:1px solid var(--line);
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);
}
.foot__demo{color:var(--gold);opacity:.8}

/* ═══ REVEAL (JS-driven) ═══ */
.r-up{opacity:0;transform:translateY(38px)}
.is-in.r-up{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
/* clip:a inre bilden (ej .shot självt) — annars rapporterar IO den fullt clip:ade
   targeten som osynlig och is-in läggs aldrig (deadlock). */
.r-clip img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.is-in.r-clip img{clip-path:inset(0 0 0 0)}
.r-clip figcaption{opacity:0}
.is-in.r-clip figcaption{opacity:1;transition:opacity .7s .3s}

/* ═══ MOBIL ═══ */
@media(max-width:860px){
  .hero{align-content:start;padding-top:7rem}
  .hero__media{position:relative;right:auto;width:100%;height:52vh;margin-top:2rem;order:3}
  .hero__title{font-size:clamp(2.4rem,13vw,5rem);max-width:none}
  .hero__sub{margin-top:1.6rem}
  .hero__scroll{display:none}
  .econ__note{justify-self:start;text-align:left;border-right:none;
    border-left:2px solid var(--gold);padding-right:0;padding-left:1.2rem}
  .phases{grid-template-columns:1fr}
  .life{grid-template-columns:repeat(6,1fr)}
  .life__intro{grid-column:1/-1}
  .shot--a{grid-column:1/4}.shot--b{grid-column:4/7;margin-top:2rem}
  .shot--c{grid-column:1/4;margin-top:0}.shot--d{grid-column:4/7;margin-top:2rem}
  .pia{grid-template-columns:1fr}
  .pia__media{max-width:none;order:2}
  .nav__links a:not(.nav__cta){display:none}
}
@media(prefers-reduced-motion:reduce){
  .r-up,.r-clip{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__scroll i{animation:none}
}