/* =====================================================================
   framsida.css – ENDAST för startsidan (/)
   - Laddas bara på startsidan, inte på andra sidor.
   - Allt bygger på befintliga variabler i styles.css (--line, --bw, --sh,
     --font-display, --font-mono, --orange, --blue, --rosa …).
   - Inga globala regler (inga :root, html, body, a, h1 …). Allt har prefixet fp-.
   - Ljust/mörkt tema fungerar automatiskt via variablerna i styles.css.
   ===================================================================== */

/* Sektioner på startsidan */
.fp-section { padding: 60px 0; border-bottom: var(--bw) solid var(--line); }
.fp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 30px; }
.fp-head .eyebrow { margin: 0 0 14px; }
.fp-title { font-size: clamp(28px, 4vw, 44px); }   /* samma storlek som .choice h3 */
.fp-text { max-width: 46ch; font-weight: 500; color: var(--ink-2); margin: 16px 0 0; }

/* ---------- 01 Hero: mindre rubrik än .svc-hero h1 (max 72 px i stället för 104 px) ---------- */
.fp-hero h1 { font-size: clamp(34px, 5.5vw, 72px); }
/* .svc-hero p (19px) slår annars igenom på etiketten – håll den i vanlig .eyebrow-storlek (12px) */
.fp-hero .eyebrow { font-size: 12px; font-weight: 400; }

/* ---------- 02 Kunder: loggkort som vänds vid hover ---------- */
.fp-clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; }
.fp-flip { display: block; height: 180px; perspective: 1000px; color: var(--ink); text-decoration: none; }
.fp-flip__inner { position: relative; display: block; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1.15); }
.fp-flip__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: var(--bw) solid var(--line); background: var(--paper); box-shadow: var(--sh);
  padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.fp-flip__top { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--muted); } /* = .choice__num */
.fp-flip__url { margin: 0; }
.fp-flip__back { transform: rotateY(180deg); color: #2a2430; border-color: #2a2430; justify-content: flex-end; gap: 8px; }
.fp-flip__back .eyebrow { color: #2a2430; margin: 0; }
.fp-flip__back--1 { background: var(--orange); }
.fp-flip__back--2 { background: var(--blue); }
.fp-flip__back--3 { background: var(--rosa); }
.fp-flip__go { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: 1; } /* = .svc h3 */
.fp-logo { display: block; align-self: center; width: 70%; max-width: 240px; background-color: var(--ink);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.fp-logo--helwit  { aspect-ratio: 320 / 53; -webkit-mask-image: url(logos/helwit.png);  mask-image: url(logos/helwit.png); }
.fp-logo--dript   { aspect-ratio: 320 / 58; -webkit-mask-image: url(logos/dript.png);   mask-image: url(logos/dript.png); }
.fp-logo--moutife { aspect-ratio: 320 / 47; -webkit-mask-image: url(logos/moutife.png); mask-image: url(logos/moutife.png); }
@media (hover: hover) {
  .fp-flip:hover .fp-flip__inner, .fp-flip:focus-visible .fp-flip__inner { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) { .fp-flip__inner { transition: none; } }

/* ---------- 03 Tjänster: använder befintliga .svc-grid / .svc rakt av ---------- */

/* ---------- 04 Om oss: använder befintliga .hero__grid och .facts ---------- */
.fp-about .facts { align-self: center; }

/* ---------- 05 Kontakt: befintligt kontaktformulär (.cta, #contactForm) – ingen ny CSS ---------- */