/* ============================================================
   VERSETTO — landingsside
   Stilark. Produktdata og interaksjon ligger i script.js
   ============================================================ */

:root{
  --cream:#FBF8F4;
  --sand:#F3ECE2;
  --ink:#23201D;
  --muted:#7A746E;
  --green:#2E6E63;
  --green-deep:#1E4E46;
  --mint:#EAF1EF;
  --line:#E6DED3;
  --white:#FFFFFF;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, Helvetica, Arial, sans-serif;
  --logo:Impact, 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

/* logo */
.logo{font-family:var(--logo);letter-spacing:2px;text-transform:uppercase;line-height:1;}

/* announcement */
.topbar{background:var(--green-deep);color:#E8F2EE;}
.topbar .wrap{display:flex;justify-content:center;align-items:center;gap:18px;
  height:38px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;}
.topbar .dot{width:3px;height:3px;border-radius:50%;background:#6FA89D;}
.topbar .hide-sm{display:inline-flex;align-items:center;gap:18px;}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,248,244,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);}
.nav.scrolled{background:rgba(251,248,244,.96);box-shadow:0 8px 30px rgba(35,32,29,.07);}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;}
.nav__links{display:flex;gap:28px;font-size:13.5px;font-weight:500;letter-spacing:.2px;}
.nav__links a{color:var(--ink);opacity:.78;transition:opacity .2s;position:relative;}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1.5px;
  background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);}
.nav__links a:hover{opacity:1;}
.nav__links a:hover::after{transform:scaleX(1);}
.nav__logo{font-size:26px;text-align:center;}
.nav__icons{display:flex;gap:18px;justify-self:end;align-items:center;}
.nav__icons button{background:none;border:0;color:var(--ink);cursor:pointer;padding:4px;display:flex;position:relative;}
.nav__icons svg{width:20px;height:20px;}
.cartcount{position:absolute;top:-6px;right:-8px;background:var(--green);color:#fff;
  font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--sans);}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.cartcount.bump{animation:bump .35s var(--ease);}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:84px;padding-bottom:84px;}
.kicker{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green);
  font-weight:600;margin-bottom:22px;display:flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:26px;height:1px;background:var(--green);display:inline-block;}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6vw,78px);
  line-height:1.02;letter-spacing:-1px;margin:0 0 24px;}
.hero h1 em{font-style:italic;color:var(--green);}
.hero p{font-size:17px;color:var(--muted);max-width:30em;margin:0 0 32px;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:14px;
  font-weight:600;letter-spacing:.2px;padding:14px 26px;border-radius:40px;cursor:pointer;
  border:1px solid transparent;transition:transform .18s ease,background .2s,color .2s;}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.btn--solid{background:var(--green);color:#fff;}
.btn--solid:hover{background:var(--green-deep);transform:translateY(-2px);}
.btn--solid:hover svg{transform:translateX(3px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn--light{background:var(--cream);color:var(--ink);}
.btn--light:hover{transform:translateY(-2px);}

.hero__media{position:relative;}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.hero__grid .media{aspect-ratio:1/1.1;}
.hero__badge{position:absolute;left:-18px;bottom:20px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 14px 40px rgba(35,32,29,.10);
  animation:float 6s ease-in-out infinite;font-size:13px;}
.badge__label{font-family:var(--logo);font-size:13px;letter-spacing:1.5px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.badge__lang{font-size:11px;color:var(--muted);margin-bottom:6px;font-style:italic;}
.badge__def{font-family:var(--serif);font-size:14px;font-weight:500;color:var(--green);letter-spacing:-.2px;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* media + images */
.media{background:var(--mint);border:1px solid #D8E6E1;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.media img{width:100%;height:100%;object-fit:cover;}
.ph{flex-direction:column;gap:10px;color:var(--green);width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;background:var(--mint);}
.ph svg{width:30px;height:30px;opacity:.65;}
.ph code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;
  color:#5C7E77;background:rgba(46,110,99,.08);padding:3px 9px;border-radius:6px;letter-spacing:.3px;}

/* section headings */
.section{padding:84px 0;}
.section--sand{background:var(--sand);}
.head{text-align:center;max-width:48em;margin:0 auto 52px;}
.head .kicker{justify-content:center;}
.head .kicker::before{display:none;}
.head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,46px);
  letter-spacing:-.5px;margin:0 0 14px;line-height:1.08;}
.head p{color:var(--muted);font-size:16.5px;margin:0;}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(35,32,29,.09);}
.card__media{aspect-ratio:1/1;border:0;border-bottom:1px solid var(--line);border-radius:0;}
.card__media img{transition:transform .6s var(--ease);}
.card:hover .card__media img{transform:scale(1.06);}
.card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.card__ref{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--green);
  font-weight:600;margin-bottom:8px;}
.card__name{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 6px;letter-spacing:-.3px;}
.card__verse{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--muted);margin:0 0 18px;}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card__price{font-size:15px;font-weight:600;}
.add{font-family:var(--sans);font-size:13px;font-weight:600;color:#fff;background:var(--ink);
  border:0;border-radius:30px;padding:10px 16px;cursor:pointer;transition:background .2s,transform .15s;}
.add:hover{background:var(--green);transform:translateY(-1px);}
.add.added{background:var(--green);}

/* brand statement */
.creed{display:grid;grid-template-columns:1fr 1fr;gap:46px;max-width:980px;margin:0 auto;}
.creed > div{padding-top:26px;border-top:1.5px solid var(--green);}
.creed h3{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:600;margin:0 0 14px;}
.creed p{font-family:var(--serif);font-size:21px;line-height:1.45;font-weight:400;margin:0;letter-spacing:-.2px;}

/* glocal aid */
.aid .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.aid h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.5px;margin:0 0 18px;}
.aid .pct{font-family:var(--serif);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:18px;}
.aid p{color:var(--muted);font-size:16.5px;max-width:34em;margin:0 0 28px;}
/* designet stat-panel (ingen dedikert glocalaid-bilde finnes) */
.aid__panel{aspect-ratio:5/4;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,var(--green) 0%,var(--green-deep) 100%);
  color:#EAF2EF;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,5vw,56px);position:relative;}
.aid__panel::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;
  border:1.5px solid rgba(255,255,255,.14);border-radius:50%;}
.aid__panel .big{font-family:var(--serif);font-weight:500;font-size:clamp(64px,10vw,108px);
  line-height:.9;letter-spacing:-2px;color:#fff;}
.aid__panel .lede{font-family:var(--serif);font-size:20px;margin:10px 0 24px;max-width:14em;}
.aid__panel .stat{display:flex;align-items:baseline;gap:10px;font-size:14px;letter-spacing:.3px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.18);}
.aid__panel .stat b{font-family:var(--serif);font-size:30px;font-weight:500;color:#fff;}

/* value props */
.values{border-top:1px solid var(--line);}
.values .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:48px 32px;}
.value{display:flex;gap:14px;}
.value svg{width:22px;height:22px;color:var(--green);flex:none;margin-top:3px;}
.value h4{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 5px;font-weight:600;}
.value p{margin:0;font-size:14px;color:var(--muted);}

/* footer */
footer{background:var(--ink);color:#CFC9C2;}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:64px 32px 40px;}
.f-brand .logo{color:#fff;font-size:30px;margin-bottom:14px;}
.f-brand p{font-size:14px;max-width:24em;margin:0;}
footer h5{color:#fff;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 16px;font-weight:600;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;}
footer ul a{opacity:.8;transition:opacity .2s;}footer ul a:hover{opacity:1;color:#fff;}
.f-bottom{border-top:1px solid #38332E;}
.f-bottom .wrap{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;font-size:12.5px;color:#8C857D;}
.socials{display:flex;gap:16px;}
.socials a{color:#8C857D;transition:color .2s,transform .2s;}
.socials a:hover{color:#fff;transform:translateY(-2px);}
.socials svg{width:18px;height:18px;}

/* reveal on scroll (staggered via --d set in script.js) */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0s);}
.reveal.in{opacity:1;transform:none;}

/* lightbox modal */
.lightbox{position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;
  z-index:100;opacity:0;transition:opacity .25s var(--ease);padding:20px;}
.lightbox.open{display:flex;opacity:1;}
.lightbox__dialog{background:#fff;border-radius:16px;max-width:90vw;max-height:90vh;
  overflow:auto;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.3);
  animation:slideUp .35s var(--ease);}
.lightbox__close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.5);
  color:#fff;border:0;cursor:pointer;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:background .2s;z-index:101;}
.lightbox__close:hover{background:rgba(0,0,0,.8);}
.lightbox__img{display:block;width:100%;height:auto;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

@media (max-width:980px){
  .hero .wrap,.aid .wrap{grid-template-columns:1fr;gap:36px;}
  .hero__media{order:-1;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .creed{grid-template-columns:1fr;gap:30px;}
  .values .wrap{grid-template-columns:1fr;gap:24px;}
  footer .wrap{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:680px){
  .wrap{padding:0 20px;}
  .nav .wrap{grid-template-columns:auto 1fr auto;}
  .nav__links{display:none;}
  .nav__logo{text-align:left;}
  .topbar .hide-sm{display:none;}
  .grid{grid-template-columns:1fr 1fr;gap:16px;}
  .card__body{padding:16px;}
  .card__name{font-size:18px;}
  .hero__grid{grid-template-columns:1fr;}
  footer .wrap{grid-template-columns:1fr;}
  .f-bottom .wrap{flex-direction:column;gap:12px;}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;}
  .reveal{transition:none;opacity:1;transform:none;}
  .card:hover,.btn:hover{transform:none;}
  .hero__badge{animation:none;}
}