/* ============================================================
   GREIND.COM — Base / Design System
   Nordic premium · AI-native · executive advisory
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --cream:        oklch(0.963 0.013 78);   /* warm bright cream */
  --cream-deep:   oklch(0.945 0.016 76);   /* framework sections */
  --white:        #ffffff;
  --navy:         oklch(0.255 0.045 261);  /* deep navy sections */
  --navy-deep:    oklch(0.215 0.042 262);  /* darkest / footer */
  --navy-soft:    oklch(0.305 0.045 261);

  /* Ink */
  --ink:          oklch(0.265 0.040 260);  /* primary text on light */
  --ink-2:        oklch(0.265 0.040 260 / 0.66);
  --ink-3:        oklch(0.265 0.040 260 / 0.42);
  --on-navy:      oklch(0.965 0.012 80);
  --on-navy-2:    oklch(0.965 0.012 80 / 0.62);
  --on-navy-3:    oklch(0.965 0.012 80 / 0.32);

  /* Accents */
  --coral:        oklch(0.685 0.158 36);   /* primary accent */
  --coral-bright: oklch(0.715 0.165 38);
  --coral-deep:   oklch(0.62 0.15 34);
  --blue:         oklch(0.62 0.095 240);   /* data-viz support only */
  --teal:         oklch(0.66 0.072 200);

  /* Lines */
  --line:         oklch(0.265 0.040 260 / 0.14);
  --line-soft:    oklch(0.265 0.040 260 / 0.08);
  --line-navy:    oklch(0.965 0.012 80 / 0.16);

  /* Type */
  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --serif:   'Newsreader', Georgia, serif;
  --body:    'Schibsted Grotesk', system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(72px, 11vw, 168px);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --motion: 1; /* tweakable 0..1 multiplier */
}

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-size: clamp(16px, 1.05vw, 18px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background: var(--coral); color:#fff; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--section-y); }
.center{ text-align:center; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family: var(--display); font-weight:700; line-height:1.02; letter-spacing:-0.022em; }
.h-display{
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  font-weight:700; line-height:0.98; letter-spacing:-0.03em;
  text-wrap: balance;
}
.h1{ font-size: clamp(2.2rem, 4.6vw, 3.7rem); letter-spacing:-0.028em; text-wrap:balance; }
.h2{ font-size: clamp(1.7rem, 3vw, 2.55rem); letter-spacing:-0.022em; text-wrap:balance; }
.h3{ font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight:600; letter-spacing:-0.015em; }
.serif{ font-family: var(--serif); font-weight:400; letter-spacing:0; line-height:1.06; }
.serif-i{ font-style:italic; }

.eyebrow{
  font-size: 0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--coral); display:inline-flex; align-items:center; gap:0.6em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background: var(--coral); display:inline-block;
}
.eyebrow.on-navy{ color: var(--coral-bright); }
.eyebrow.plain{ color: var(--ink-3); }
.eyebrow.plain::before{ background: var(--ink-3); }

.lead{ font-size: clamp(1.08rem, 1.55vw, 1.35rem); line-height:1.5; color: var(--ink-2); max-width: 56ch; }
.muted{ color: var(--ink-2); }
.tm{ font-size:0.55em; vertical-align:0.55em; font-weight:600; opacity:0.5; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  padding: 0.92em 1.5em; border-radius: 100px;
  font-weight:600; font-size:0.98rem; letter-spacing:-0.01em;
  transition: transform .4s var(--ease), background .3s, color .3s, box-shadow .3s;
  will-change: transform; white-space: nowrap;
}
.btn .arrow{ transition: transform .4s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }
.btn-primary{ background: var(--coral); color:#fff; box-shadow: 0 1px 0 oklch(0.62 0.15 34), 0 14px 30px -12px oklch(0.685 0.158 36 / 0.6); }
.btn-primary:hover{ background: var(--coral-bright); transform: translateY(-2px); box-shadow: 0 18px 38px -12px oklch(0.685 0.158 36 / 0.7); }
.btn-ink{ background: var(--navy); color: var(--on-navy); }
.btn-ink:hover{ background: var(--navy-soft); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost.on-navy{ color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--line-navy); }
.btn-ghost.on-navy:hover{ box-shadow: inset 0 0 0 1.5px var(--on-navy); }
.link-arrow{ display:inline-flex; align-items:center; gap:0.5em; font-weight:600; color: var(--coral); }
.link-arrow .arrow{ transition: transform .4s var(--ease); }
.link-arrow:hover .arrow{ transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gutter);
  transition: background .5s var(--ease-soft), box-shadow .5s, padding .5s, backdrop-filter .5s;
}
.nav.scrolled{
  background: oklch(0.963 0.013 78 / 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 12px;
}
.nav-links{ display:flex; align-items:center; gap: clamp(14px, 1.9vw, 30px); }
.nav-links a{ font-size:0.93rem; font-weight:500; color: var(--ink-2); transition: color .25s; letter-spacing:-0.01em; }
.nav-links a:hover{ color: var(--ink); }
.nav-right{ display:flex; align-items:center; gap: 18px; }
.nav-cta{ padding: 0.62em 1.15em; font-size:0.92rem; }
.nav-burger{ display:none; }
@media (max-width: 940px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; flex-direction:column; gap:5px; padding:8px; }
  .nav-burger span{ width:22px; height:2px; background: var(--ink); border-radius:2px; transition:.3s; }
}

/* ---------- Logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:11px; color: var(--ink); }
.logo .mark{ width:32px; height:32px; flex:none; object-fit:contain; }
.logo .word{ font-family: var(--display); font-weight:800; font-size:1.3rem; letter-spacing:0.005em; color: var(--ink); }
.logo.on-navy .word{ color: var(--on-navy); }
.logo-img{ height:46px; width:auto; display:block; transition: height .5s var(--ease-soft); }
.nav.scrolled .logo-img{ height:40px; }
.footer .logo-img{ height:50px; filter: brightness(0) invert(1); }
@media (max-width: 520px){ .logo-img{ height:36px; } .footer .logo-img{ height:40px; } }

/* ---------- Reveal animations (armed only when JS adds .anim-ready) ---------- */
.reveal{ opacity:1; transform:none; }
html.anim-ready .reveal{
  opacity:0; transform: translateY(calc(26px * var(--motion)));
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}
html.anim-ready .reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay: calc(.08s * var(--motion)); }
.reveal-d2{ transition-delay: calc(.16s * var(--motion)); }
.reveal-d3{ transition-delay: calc(.24s * var(--motion)); }
.reveal-d4{ transition-delay: calc(.32s * var(--motion)); }
@media (prefers-reduced-motion: reduce){
  html.anim-ready .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Footer ---------- */
.footer{ background: var(--navy-deep); color: var(--on-navy); padding-block: clamp(56px, 7vw, 96px) 40px; }
.footer a{ color: var(--on-navy-2); transition: color .25s; }
.footer a:hover{ color: var(--on-navy); }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; align-items:start; }
.footer h5{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--on-navy-3); margin-bottom:16px; font-weight:600; }
.footer ul{ list-style:none; display:grid; gap:10px; font-size:0.96rem; }
.footer-bottom{ margin-top: clamp(48px, 6vw, 80px); padding-top:28px; border-top:1px solid var(--line-navy);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:0.86rem; color: var(--on-navy-3); }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- Tweaks panel ---------- */
.tw-panel{ position:fixed; right:18px; bottom:18px; z-index:300; width:248px; background: var(--white);
  border-radius: var(--r-lg); box-shadow: 0 30px 60px -24px oklch(0.255 0.045 261 / 0.55), inset 0 0 0 1px var(--line-soft);
  padding:18px; transform: translateY(14px); opacity:0; transition: .3s var(--ease); }
.tw-panel.open{ transform:none; opacity:1; }
.tw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tw-head b{ font-size:0.95rem; }
.tw-x{ font-size:0.85rem; color: var(--ink-3); padding:4px; }
.tw-sec{ margin-bottom:16px; }
.tw-sec label{ display:block; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-3); font-weight:600; margin-bottom:9px; }
.tw-swatches{ display:flex; gap:8px; }
.tw-sw{ width:26px; height:26px; border-radius:50%; box-shadow: inset 0 0 0 1px oklch(0.255 0.045 261 / 0.12); transition:.2s; }
.tw-sw.on{ box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--ink); }
.tw-panel input[type=range]{ width:100%; accent-color: var(--coral); }
.tw-radio{ display:flex; gap:6px; }
.tw-radio button{ flex:1; padding:8px; font-size:0.82rem; font-weight:600; border-radius:8px; box-shadow: inset 0 0 0 1px var(--line); transition:.2s; }
.tw-radio button.on{ background: var(--ink); color:#fff; box-shadow:none; }