/* PK & Friends Collective — landing page
   Palette sampled directly from Peters logotyp (djup marinblå + guld + krämvit). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500&display=swap');

:root{
  --color-bg: #0b0f1a;
  --color-bg-elevated: #131a2b;
  --color-bg-elevated-2: #1a2338;
  --color-ink: #f2ede1;
  --color-ink-soft: #b9b6ac;
  --color-ink-faint: #8b8c96;
  --color-line: rgba(201,162,77,.22);
  --color-accent: #c9a24d;
  --color-accent-bright: #e0bc6c;
  --color-accent-contrast: #10141f;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-logo-tagline: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 6px;
  --max-w: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--color-accent); text-decoration: none; }
a:hover{ color: var(--color-accent-bright); text-decoration: underline; }

.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* language toggling — !important guarantees this wins regardless of
   any later display rule (buttons, flex containers, etc.) set on the
   same element further down the stylesheet. */
body[data-lang="sv"] .lang-en{ display: none !important; }
body[data-lang="en"] .lang-sv{ display: none !important; }

/* HEADER */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,15,26,.88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 114px; gap: 24px; padding: 10px 0;
}
.logo-mark{ display:flex; align-items:center; gap: 12px; }
.logo-mark img{ height: 106px; width:auto; border-radius: 4px; }
.logo-amp{ color: var(--color-accent); }
.main-nav{ display:flex; gap: 30px; font-size: .92rem; }
.main-nav a{ color: var(--color-ink-soft); letter-spacing: .01em; }
.main-nav a:hover{ color: var(--color-accent-bright); text-decoration: none; }
.header-actions{ display:flex; align-items:center; gap: 12px; }
.linkedin-link{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--color-line); color: var(--color-ink-soft);
}
.linkedin-link:hover{ border-color: var(--color-accent); color: var(--color-accent-bright); background: var(--color-bg-elevated); text-decoration:none; }
.linkedin-link svg{ width: 17px; height: 17px; fill: currentColor; }
.lang-toggle{
  border: 1px solid var(--color-line); background: transparent;
  color: var(--color-accent); font-weight: 600; font-size: .78rem;
  width: 40px; height: 36px; border-radius: 999px; cursor: pointer;
}
.lang-toggle:hover{ border-color: var(--color-accent); background: var(--color-bg-elevated); }

/* HERO */
.hero{ padding: 96px 0 68px; position: relative; }
.hero-inner{ max-width: 760px; }
.eyebrow{ text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight:600; color: var(--color-accent); margin: 0 0 16px; }
.hero h1{ font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.1rem, 4vw, 3.1rem); line-height:1.18; margin: 0 0 22px; letter-spacing: -0.01em; color: var(--color-ink); }
.lead{ font-size: 1.1rem; color: var(--color-ink-soft); max-width: 56ch; margin: 0 0 30px; overflow: auto; }
.hero-tagline{
  font-family: var(--font-logo-tagline);
  text-transform: uppercase; font-weight: 500; letter-spacing: .12em;
  font-size: .85rem; color: var(--color-accent-bright); margin: -6px 0 30px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap: 14px; }
.hero-img-inline{
  float: right; width: 150px; max-width: 40%; height: auto;
  aspect-ratio: 4/5; object-fit: cover; object-position: top center;
  border-radius: var(--radius); border: 1px solid var(--color-line);
  margin: 4px 0 14px 24px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 13px 26px; border-radius: 3px; font-weight: 600; font-size: .9rem;
  letter-spacing: .03em;
  border: 1px solid transparent; cursor:pointer;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background: var(--color-accent); color: var(--color-accent-contrast); }
.btn-primary:hover{ background: var(--color-accent-bright); }
.btn-ghost{ background: transparent; border-color: var(--color-line); color: var(--color-ink); }
.btn-ghost:hover{ border-color: var(--color-accent); color: var(--color-accent-bright); }

/* PILLARS */
.pillars{ background: var(--color-bg-elevated); padding: 52px 0; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.pillar-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar-card{ background: transparent; border:1px solid var(--color-line); border-radius: var(--radius); padding: 26px; }
.pillar-icon{ display:inline-block; font-family: var(--font-serif); font-weight:600; color: var(--color-accent); font-size:.95rem; border: 1px solid var(--color-line); padding: 3px 12px; border-radius: 999px; margin-bottom: 14px; }
.pillar-card h3{ font-family: var(--font-serif); font-weight: 600; margin: 0 0 10px; font-size: 1.1rem; color: var(--color-ink); }
.pillar-card p{ margin:0; color: var(--color-ink-soft); font-size: .93rem; }

/* SECTIONS generic */
.section{ padding: 76px 0; }
.section h2{ font-family: var(--font-serif); font-weight: 600; font-size: 1.8rem; margin: 0 0 30px; letter-spacing: -0.01em; color: var(--color-ink); }

/* ABOUT */
.about-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items:center; }
.about-img{ border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--color-line); }
.about-text p{ color: var(--color-ink-soft); margin: 0 0 16px; }

/* EXPERIENCE (categorized lists) */
.exp-category{ margin-bottom: 44px; }
.exp-category:last-child{ margin-bottom: 0; }
.exp-cat-title{ font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--color-accent); margin: 0 0 14px; letter-spacing: .01em; }
.exp-list{ list-style:none; margin:0; padding:0; }
.exp-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap: 24px;
  padding: 13px 0; border-bottom: 1px solid var(--color-line);
}
.exp-list li:last-child{ border-bottom: none; }
.exp-company{ font-family: var(--font-serif); font-weight: 600; color: var(--color-ink); font-size: 1rem; }
.exp-role{ color: var(--color-ink-faint); font-size: .88rem; text-align: right; white-space: nowrap; }

/* FACTS */
.facts{ background: var(--color-bg-elevated); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.facts-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items:center; }
.facts-img{ border-radius: var(--radius); aspect-ratio: 4/3; object-fit:cover; border: 1px solid var(--color-line); }
.facts-table{ width:100%; border-collapse: collapse; }
.facts-table th, .facts-table td{ text-align:left; padding: 13px 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.facts-table th{ width: 38%; color: var(--color-ink-faint); font-weight:600; font-size:.85rem; text-transform: uppercase; letter-spacing: .04em; padding-right: 16px; }
.facts-table td{ font-size: .95rem; color: var(--color-ink); }
.cert-badge{
  display:flex; align-items:center; gap: 14px; margin-top: 22px;
  color: var(--color-ink-faint);
  background: transparent; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer;
}
.cert-badge:hover{ color: var(--color-accent-bright); text-decoration:none; }
.cert-thumb{
  width: 52px; height: 70px; object-fit: cover; object-position: top center;
  border-radius: 3px; border: 1px solid var(--color-line); flex-shrink:0;
}
.cert-badge:hover .cert-thumb{ border-color: var(--color-accent); }
.cert-badge span{ font-size: .82rem; line-height: 1.4; }

/* LIGHTBOX (enlarged certificate view) */
.lightbox{ position: fixed; inset: 0; z-index: 200; display:flex; align-items:center; justify-content:center; padding: 32px; }
.lightbox[hidden]{ display:none; }
.lightbox-backdrop{ position:absolute; inset:0; background: rgba(11,15,26,.88); backdrop-filter: blur(4px); border:none; cursor:pointer; }
.lightbox-content{ position:relative; max-width: min(680px, 92vw); max-height: 90vh; }
.lightbox-content img{ display:block; max-width:100%; max-height:90vh; border-radius: var(--radius); border: 1px solid var(--color-line); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.lightbox-close{
  position:absolute; top:-46px; right:0; background: var(--color-bg-elevated); border:1px solid var(--color-line);
  color: var(--color-ink); width:38px; height:38px; border-radius:999px; font-size:1.4rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ border-color: var(--color-accent); color: var(--color-accent-bright); }
body.lightbox-open{ overflow: hidden; }

/* CONTACT */
.contact-inner{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 48px; }
.contact-inner > div > p{ color: var(--color-ink-soft); }
.contact-tagline{ font-family: var(--font-serif); font-style: italic; color: var(--color-accent-bright) !important; font-size: 1.05rem; line-height: 1.5; margin: 0 0 20px !important; }
.contact-portrait{
  width: 30%; min-width: 120px; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--color-line); margin-bottom: 22px;
}
.contact-details{ list-style:none; padding:0; margin: 20px 0 0; display:flex; flex-direction:column; gap:10px; font-size: 1.05rem; }
.contact-form{ display:flex; flex-direction:column; gap: 16px; background: var(--color-bg-elevated); border:1px solid var(--color-line); border-radius: var(--radius); padding: 28px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color: var(--color-ink-faint); font-weight:600; text-transform: uppercase; letter-spacing: .03em; }
.contact-form input, .contact-form textarea{
  font: inherit; padding: 11px 13px; border-radius: 3px; border: 1px solid var(--color-line);
  background: var(--color-bg); color: var(--color-ink);
}
.contact-form input:focus, .contact-form textarea:focus{ outline: 1px solid var(--color-accent); outline-offset: 1px; }
.form-note{ margin: 0; font-size: .78rem; color: var(--color-ink-faint); text-transform:none; font-weight:400; }

/* FOOTER */
.site-footer{ border-top:1px solid var(--color-line); padding: 30px 0; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 8px; font-size:.82rem; color: var(--color-ink-faint); }
.footer-built a{ color: var(--color-ink-faint); }
.footer-built a:hover{ color: var(--color-accent); }

/* RESPONSIVE */
@media (max-width: 860px){
  .main-nav{ display:none; }
  .pillar-grid{ grid-template-columns: 1fr; }
  .about-inner{ grid-template-columns: 1fr; }
  .facts-inner{ grid-template-columns: 1fr; }
  .contact-inner{ grid-template-columns: 1fr; }
  .exp-list li{ flex-direction: column; align-items:flex-start; gap: 4px; }
  .exp-role{ text-align:left; white-space: normal; }
  .hero-img-inline{ width: 120px; margin: 4px 0 10px 14px; }
}