/* RingFarsan! – stilar. Mobile-first.
   Palett hämtad från loggan: hjälmgul, varningsorange, röd swoosh, nästan svart, vitt. */
:root {
  --yellow: #ffc400;
  --yellow-deep: #f5a800;
  --orange: #f26b0f;
  --red: #c8161d;
  --black: #111111;
  --ink: #1b1b1b;
  --grey: #2a2a2a;
  --paper: #f6f3ec;
  --white: #ffffff;
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1120px;
  --radius: 10px;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 1.125rem/1.55 var(--font-body); color: var(--ink); background: var(--white);
  padding-bottom: 76px; /* plats för klistrig ringknapp på mobil */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { width: 1.5em; height: 1.5em; flex: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.02; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 0; background: var(--yellow); color: var(--black); padding: .75rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: 0; }

/* Knappar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: 800 1.2rem/1.1 var(--font-display); text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
  padding: .9rem 1.25rem; border: 3px solid var(--black); border-radius: var(--radius);
  background: var(--white); color: var(--black); cursor: pointer;
  box-shadow: 4px 4px 0 var(--black); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.btn--call { background: var(--yellow); }
.btn--red { background: var(--red); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); box-shadow: none; }
.btn--ghost:hover { box-shadow: none; background: rgba(255,255,255,.12); }
.btn--sm { padding: .45rem .8rem; font-size: 1.1rem; box-shadow: 3px 3px 0 var(--black); }
.btn--lg { font-size: 1.35rem; padding: 1rem 1.5rem; }
.btn--xl { padding: 1rem 1.5rem; text-align: left; }
.btn--xl svg { width: 2.2rem; height: 2.2rem; }
.btn--xl small { display: block; font-size: 1.05rem; letter-spacing: .1em; }
.btn--xl strong { font: 800 clamp(2rem, 8vw, 2.8rem)/1 var(--font-display); letter-spacing: .03em; }
.section--dark .btn { border-color: var(--yellow); box-shadow: 4px 4px 0 var(--orange); }
.section--dark .btn:hover { box-shadow: 6px 6px 0 var(--orange); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--black); color: var(--white); border-bottom: 4px solid var(--yellow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 800 1.6rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.brand img { border-radius: 6px; background: var(--white); }
.brand b { font-weight: 800; color: var(--yellow); }
.nav { display: none; }
.site-header .btn--call { box-shadow: 3px 3px 0 var(--orange); }

/* Hero */
.hero {
  position: relative; background-color: var(--black); color: var(--white); overflow: hidden;
  background-image:
    var(--noise),
    radial-gradient(circle at 78% 40%, rgba(242,107,15,.85) 0, rgba(242,107,15,.35) 30%, transparent 62%),
    repeating-conic-gradient(from 0deg at 78% 40%, rgba(255,196,0,.16) 0 4deg, transparent 4deg 12deg);
  background-blend-mode: soft-light, normal, normal;
  padding: 2.5rem 0 3.5rem;
}
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.eyebrow { font: 800 1.05rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 1rem; }
.eyebrow--dark { color: var(--red); }
.hero h1 { font-size: clamp(3.4rem, 15vw, 5.6rem); }
.hero h1 span { color: var(--yellow); }
.lead { font-size: 1.15rem; max-width: 34em; margin: 1.25rem 0 1.75rem; color: #f0ece0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero .btn--call { box-shadow: 5px 5px 0 var(--red); }
.hero-art { justify-self: center; width: min(100%, 440px); }
.hero-art img {
  background: var(--white); border: 4px solid var(--black); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--yellow), 0 18px 40px rgba(0,0,0,.45);
  transform: rotate(-1.5deg);
}

/* Varningsrand */
.hazard { height: 22px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 22px, var(--black) 22px 44px); border-block: 3px solid var(--black); }

/* Sektioner */
.section { padding: 3.5rem 0; position: relative; }
.section h2 { font-size: clamp(2.6rem, 10vw, 4.2rem); }
.section-lead { font-size: 1.1rem; max-width: 40em; margin-top: 1rem; }
.section--dark { background: var(--black) var(--noise); background-blend-mode: soft-light; color: var(--white); }
.section--dark .section-lead { color: #e6e1d3; }
.section--yellow { background: var(--yellow); color: var(--black); }
#tjanster, #varfor { background: var(--paper); }
#varfor { background: var(--white); }

/* Kort */
.cards { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.card {
  background: var(--white); border: 3px solid var(--black); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: 4px 4px 0 var(--black);
}
.card svg { width: 2rem; height: 2rem; color: var(--orange); margin-bottom: .6rem; }
.card h3 { font-size: 1.75rem; margin-bottom: .5rem; }
.card p { margin: 0; font-size: .98rem; color: #3a3a3a; }
.card--main { background: var(--yellow); border-width: 4px; }
.card--main svg { width: 2.6rem; height: 2.6rem; color: var(--black); }
.card--main h3 { font-size: 2.3rem; }
.card--main p { color: var(--black); font-size: 1.02rem; }
.cards--more { margin-top: 1.25rem; }

/* Steg */
.steps { list-style: none; padding: 0; margin: 2rem 0 2.5rem; display: grid; gap: 1.25rem; counter-reset: s; }
.steps li { border: 3px solid var(--yellow); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.25rem 5rem; position: relative; }
.step-num { position: absolute; left: 1rem; top: 1rem; width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--yellow); color: var(--black); font: 800 2rem/1 var(--font-display); border-radius: 50%; }
.steps h3 { font-size: 2.1rem; color: var(--yellow); margin-bottom: .4rem; }
.steps p { margin: 0; color: #e6e1d3; }

/* Varför */
.why { display: grid; gap: 1.5rem; margin-top: 2rem; }
.why article { border-left: 8px solid var(--orange); padding-left: 1rem; }
.why h3 { font-size: 2rem; margin-bottom: .4rem; }
.why p { margin: 0; }

/* Område */
.area { display: flex; gap: 1.25rem; align-items: flex-start; }
.area-pin { width: 4rem; height: 4rem; color: var(--black); }
.section--yellow .section-lead { color: var(--black); }

/* Kontakt */
.contact { display: grid; gap: 2.5rem; }
.contact .btn--xl { margin-top: 1.5rem; }
.facts { margin: 2rem 0 0; display: grid; gap: .75rem; }
.facts div { display: flex; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: .5rem; }
.facts dt { width: 7.5rem; flex: none; color: var(--yellow); font: 800 1.05rem/1.4 var(--font-display); text-transform: uppercase; letter-spacing: .1em; padding-top: .2rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.form { background: var(--white); color: var(--ink); border: 4px solid var(--yellow); border-radius: 14px; padding: 1.5rem; box-shadow: 8px 8px 0 var(--orange); }
.form h3 { font-size: 2.2rem; margin-bottom: 1rem; }
.form label { display: block; font-weight: 700; margin: 1rem 0 .3rem; }
.form input, .form textarea {
  width: 100%; font: inherit; padding: .75rem; border: 3px solid var(--black); border-radius: 8px; background: var(--paper); color: var(--black);
}
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; background: var(--white); }
.form .btn { margin-top: 1.25rem; width: 100%; }
.form-note { font-size: .9rem; color: #444; margin: .9rem 0 0; }

/* Footer */
.site-footer { background: var(--black); color: #d9d4c5; border-top: 4px solid var(--yellow); padding: 2rem 0 1.5rem; font-size: .95rem; }
.site-footer p { margin: 0 0 .75rem; }
.site-footer strong { color: var(--yellow); font: 800 1.7rem var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.site-footer .small { opacity: .7; font-size: .85rem; }

/* Klistrig ringknapp (endast mobil) */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--yellow); color: var(--black); text-decoration: none;
  font: 800 1.35rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-top: 4px solid var(--black);
  box-shadow: 0 -6px 18px rgba(0,0,0,.25);
}
.sticky-call b { font-weight: 800; }
.sticky-call svg { width: 1.5rem; height: 1.5rem; }

/* Större skärmar */
@media (min-width: 700px) {
  .cards--main { grid-template-columns: repeat(3, 1fr); }
  .cards--more { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { padding: 5rem 1.25rem 1.5rem; }
  .why { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .sticky-call { display: none; }
  .nav { display: flex; gap: 1.5rem; }
  .nav a { text-decoration: none; font-weight: 700; font-size: 1.02rem; padding: .4rem 0; border-bottom: 3px solid transparent; }
  .nav a:hover { border-color: var(--yellow); }
  .hero { padding: 4.5rem 0 5.5rem; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
  .cards--more { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 5rem 0; }
  .contact { grid-template-columns: 1fr 1fr; align-items: start; gap: 4rem; }
}
@media (min-width: 1100px) {
  .why { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .btn:active { transform: none; }
}

/* Header-knapp: aldrig radbrytning av numret */
.site-header .btn { white-space: nowrap; }
@media (max-width: 380px) { .brand { font-size: 1.35rem; } .site-header .btn--sm { padding: .5rem .6rem; font-size: .8rem; } }

/* Språkväxlare SV | EN */
.header-end { display: flex; align-items: center; gap: .75rem; }
.lang { display: flex; align-items: center; gap: .35rem; font: 800 1.1rem/1 var(--font-display); letter-spacing: .06em; }
.lang a { text-decoration: none; color: #cfc9b8; padding: .35rem .25rem; border-bottom: 3px solid transparent; }
.lang a:hover { color: var(--white); }
.lang a[aria-current] { color: var(--yellow); border-color: var(--yellow); }
.lang span { color: #6b665a; }
.lbl-sm { display: inline; }
.hide-sm { display: none; }
@media (min-width: 480px) { .lbl-sm { display: none; } .hide-sm { display: inline; } }

/* Om Farsan */
.section--about { background: var(--paper); }
.section--about p { max-width: 38em; }
.section--about h2 { margin-bottom: 1.25rem; }
.about { display: grid; gap: 2rem; }
.about-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; align-content: start; }
.about-points li { display: flex; align-items: center; gap: .75rem; background: var(--black); color: var(--white); border-left: 8px solid var(--yellow); padding: .9rem 1rem; font: 800 1.5rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.about-points svg { color: var(--yellow); width: 1.6rem; height: 1.6rem; }
@media (min-width: 900px) { .about { grid-template-columns: 1.3fr .7fr; gap: 4rem; align-items: center; } }
#varfor { background: var(--white); }

/* Formulär: sekundärt, infällbart (telefon först) */
.form-box summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .6rem; color: var(--yellow); font: 800 1.3rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px dashed var(--yellow); padding: .4rem 0; }
.form-box summary::-webkit-details-marker { display: none; }
.form-box summary::after { content: "+"; font-size: 1.6rem; }
.form-box[open] summary::after { content: "–"; }
.form-box .form { margin-top: 1.25rem; }