/* ==========================================================================
   Fotterapi – Gabriella Holsten
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #ffffff; }
body { margin: 0; background: #ffffff; }
#kontakt { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.fp-root {
  /* Type scale — every font-size on the site is one of these */
  --fs-2xs: 12px;  /* uppercase micro-labels (e.g. "Telefon") */
  --fs-xs:  13px;  /* eyebrow, footer, fine print */
  --fs-sm:  15px;  /* nav links, buttons, chips, small UI text */
  --fs-base: 17px; /* body copy, lead paragraphs, list items */
  --fs-md:  20px;  /* logotype */
  --fs-lg:  28px;  /* all section H2 headings */
  /* H1 stays a responsive clamp() defined on .fp-hero-h1 */

  /* Spacing scale — every padding/margin/gap on the site is one of these */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 40px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Muted text tiers, reused instead of repeating one-off oklch() values */
  --c-muted:   oklch(35% 0.025 235); /* lead paragraphs, list copy */
  --c-muted-2: oklch(44% 0.02 235);  /* secondary inline text */
  --c-muted-3: oklch(48% 0.02 235);  /* footer */

  font-family: "Satoshi", -apple-system, "Segoe UI", sans-serif;
  background: #ffffff;
  color: oklch(20% 0.03 235);
  line-height: 1.55;
  width: 100%;
}

.fp-h {
  font-family: "Satoshi", -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

.fp-h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); color: #0050A0; }

.fp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

.fp-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 var(--sp-1);
  color: #0050A0;
}

/* -- Section rhythm ---------------------------------------------------- */

.fp-section { padding: var(--sp-8) 0; }
.fp-section--tint { background: #ffffff; }
#kontakt {
  background: #0050A0;
  color: oklch(97% 0.01 235);
  --c-muted: oklch(88% 0.02 235);
  --c-muted-2: oklch(80% 0.02 235);
}
#hvorfor {
  max-width: 1040px;
  margin: var(--sp-3) auto;
  padding: 48px 110px;
  border-radius: 48px;
  background: color-mix(in oklch, #0050A0 12%, white);
  color: oklch(20% 0.03 235);
  --c-muted: oklch(35% 0.025 235);
  --c-muted-2: oklch(44% 0.02 235);
  box-shadow: 0 30px 70px -20px oklch(20% 0.03 235 / 0.16);
}
#kontakt .fp-h2 { color: oklch(98% 0.008 235); }
.fp-section--dark {
  background: #ffffff;
  color: oklch(20% 0.03 235);
  --c-muted: oklch(35% 0.025 235);
  --c-muted-2: oklch(44% 0.02 235);
}

/* -- Lead paragraphs (intro copy under a heading) ----------------------- */

.fp-lead {
  font-size: var(--fs-md); font-weight: 400; color: var(--c-muted);
  max-width: 60ch; margin: 0 0 var(--sp-5);
}
.fp-lead--dark { color: var(--c-muted); margin-left: auto; margin-right: auto; }
.fp-lead--warm { color: oklch(35% 0.03 70); }
.fp-lead--hero { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }

/* -- Lists (services, benefits) ----------------------------------------- */

.fp-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.fp-list-item-text { font-size: var(--fs-base); margin: 0; color: var(--c-muted); }

.fp-microlabel { font-size: var(--fs-2xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted-2); }

.fp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-5); border-radius: 999px; font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; color: oklch(99% 0.005 235); border: none; cursor: pointer;
  background: #0050A0;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.fp-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.fp-btn:focus-visible { outline: 3px solid #0050A0; outline-offset: 3px; }
.fp-btn-sm { padding: var(--sp-1) var(--sp-4); }

.fp-contact-grid { display: inline-flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-5); }
.fp-contact-link { font-size: var(--fs-base); font-weight: 600; color: inherit; text-decoration: none; }

.fp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.fp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

.fp-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: 999px; border: none;
  background: oklch(95% 0.02 70); font-size: var(--fs-sm); font-weight: 500;
}

/* -- Header / nav ---------------------------------------------------- */

.fp-header {
  position: sticky; top: 0; z-index: 20;
  background: #ffffff;
  color: oklch(20% 0.03 235);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(87% 0.018 235);
}
.fp-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.fp-brand { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; color: inherit; }
.fp-brand-name { font-size: var(--fs-md); }
.fp-brand-role { font-size: var(--fs-xs); color: var(--c-muted-2); }

.fp-nav-links {
  display: flex; align-items: center; gap: var(--sp-4); list-style: none; margin: 0; padding: 0;
}
.fp-nav-links a {
  color: inherit; text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
}
.fp-nav-links a:hover,
.fp-nav-links a:focus-visible { color: #0050A0; }

.fp-nav-links a.fp-btn,
.fp-nav-links a.fp-btn:hover,
.fp-nav-links a.fp-btn:focus-visible {
  color: oklch(99% 0.005 235);
}

.fp-nav-actions { display: flex; align-items: center; gap: 12px; }

.fp-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid oklch(87% 0.018 235); background: transparent; cursor: pointer;
  color: oklch(20% 0.03 235);
}
.fp-menu-btn:focus-visible { outline: 3px solid #0050A0; outline-offset: 2px; }

.fp-mobile-panel {
  display: none;
  border-bottom: 1px solid oklch(87% 0.018 235);
  background: #ffffff;
  color: oklch(20% 0.03 235);
}
.fp-mobile-panel.is-open { display: block; }
.fp-mobile-panel ul {
  list-style: none; margin: 0; padding: var(--sp-3) clamp(20px, 5vw, 40px) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.fp-mobile-panel a {
  display: block; padding: var(--sp-2) 4px; color: inherit; text-decoration: none;
  font-size: var(--fs-base); font-weight: 600; border-bottom: 1px solid oklch(90% 0.015 235);
}

/* -- Hero -------------------------------------------------------------- */

.fp-hero-h1 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--sp-2); color: #0050A0; }

.fp-client-box {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1);
}
.fp-client-item {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); border-radius: 10px;
  background: color-mix(in oklch, #0050A0 6%, white);
  border: 1px solid oklch(87% 0.018 235);
  font-size: var(--fs-xs); font-weight: 400; color: oklch(25% 0.03 235);
}
.fp-client-item svg { flex-shrink: 0; }

.fp-hero-row { flex-wrap: nowrap; }

.fp-hero-photo {
  width: 460px; flex-shrink: 0;
  border-radius: 65% 35% 65% 35% / 65% 35% 65% 35%;
  padding: 16px;
  background: #0050A0;
  box-shadow: 0 10px 30px oklch(20% 0.03 235 / 0.18);
}
.fp-hero-photo img { width: 100%; height: auto; display: block; }

/* -- Responsive breakpoints -------------------------------------------- */

@media (max-width: 900px) {
  .fp-nav-links { display: none; }
  .fp-menu-btn { display: inline-flex; }
}

@media (max-width: 840px) {
  .fp-hero-row { flex-wrap: wrap; justify-content: center; text-align: center; }
  .fp-hero-row .fp-client-box { justify-content: center; }
}

@media (max-width: 760px) {
  .fp-grid3 { grid-template-columns: 1fr; }
  .fp-grid2 { grid-template-columns: 1fr; }
  .fp-hero-photo { width: 264px; }
  #hvorfor { padding: var(--sp-5) var(--sp-4); border-radius: 24px; }
}

@media (max-width: 480px) {
  .fp-header-inner { height: 64px; }
  .fp-btn { padding: var(--sp-2) var(--sp-4); }
  .fp-client-box { grid-template-columns: 1fr; }
}