/* Ludens Hundtrim - granit-syrengul, soft-organic.
   Ett enda grepp: samma hundkontur ritad om med fyra olika palsar.

   Kontrast, matt mot faktisk bakgrund (WCAG AA kraver 4,5):
   text pa bas 13,07 - text pa yta 10,90 - dov pa bas 7,57 - dov pa yta 6,31
   accent pa bas 8,44 - accent pa yta 7,04 - bas pa accentknapp 8,44.
   Syrengult ar ljust nog pa den morka basen for att klara sig som liten text
   utan morkad variant. Accenten ror aldrig en ljus yta pa den har sidan. */

:root{
  --bas:#26282b;
  --yta:#323539;
  --yta2:#3f4449;
  --accent:#e3c14a;
  --text:#f1f1ef;
  --dov:#b9bab5;
  --kropp:#555b61;
  --ull:#646b72;
  --linje:rgba(241,241,239,.14);
  --blobb:58% 42% 47% 53% / 45% 52% 48% 55%;
  --sekt:clamp(66px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bas);
  color:var(--text);
  font-family:Urbanist,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

h1,h2,h3{
  margin:0;
  font-weight:800;
  letter-spacing:-.018em;
  overflow-wrap:break-word;
  hyphens:manual;
  text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}
a{color:inherit}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{
  width:min(1180px,100%);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,44px);
}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{
  position:fixed;left:14px;top:14px;width:auto;height:auto;clip-path:none;
  z-index:120;background:var(--accent);color:var(--bas);
  padding:13px 22px;border-radius:14px;font-weight:600;text-decoration:none;
}

.ld-defs{position:absolute;width:0;height:0;overflow:hidden}

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

.topp{
  position:sticky;top:0;z-index:50;
  background:rgba(38,40,43,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linje);
}
.topp-inre{
  width:min(1180px,100%);margin-inline:auto;
  padding:9px clamp(20px,5vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{
  display:inline-flex;align-items:center;gap:11px;
  min-height:48px;text-decoration:none;color:var(--accent);
}
.brand-mark{display:flex;color:var(--accent)}
.brand-ord{
  display:flex;flex-direction:column;line-height:1.02;
  font-weight:800;font-size:1.24rem;letter-spacing:-.02em;color:var(--text);
}
.brand-sub{
  font-size:.63rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}

.meny{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.meny-lista{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.meny-lista a{
  text-decoration:none;font-weight:600;font-size:.98rem;color:var(--text);
  display:inline-flex;align-items:center;min-height:44px;
}
.meny-lista a:hover{color:var(--accent)}

.hamburgare{
  display:none;align-items:center;gap:9px;
  min-height:46px;padding:0 15px;
  background:transparent;border:1px solid var(--linje);border-radius:999px;
  color:var(--text);font:inherit;font-weight:600;cursor:pointer;
}
.ham-streck{display:grid;gap:4px;width:18px}
.ham-streck i{display:block;height:2px;background:var(--accent);border-radius:2px}

/* ---------- Knappar ---------- */

.knapp{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:999px;
  font-weight:700;font-size:1.01rem;text-decoration:none;
  transition:transform .18s ease,background-color .18s ease;
}
.knapp-fyll{background:var(--accent);color:var(--bas)}
.knapp-fyll:hover{background:#efd066}
.knapp-linje{border:1.5px solid rgba(227,193,74,.55);color:var(--accent)}
.knapp-linje:hover{border-color:var(--accent);background:rgba(227,193,74,.09)}
.meny-cta{min-height:46px;padding:0 20px;font-size:.96rem}

/* ---------- Gemensamt ---------- */

.etikett{
  font-size:.76rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.sekt-rubrik{font-size:clamp(1.95rem,4.4vw,3.05rem);line-height:1.18}
.led{color:var(--dov);max-width:56ch;margin-top:16px;font-size:1.06rem}

.pol{position:absolute;display:block;pointer-events:none;z-index:0}

.kurva{
  border-radius:50% 50% 0 0 / clamp(38px,6vw,86px) clamp(38px,6vw,86px) 0 0;
  margin-top:calc(clamp(38px,6vw,86px) * -1);
  position:relative;
}

section{scroll-margin-top:78px}

/* ---------- 1. Hero ---------- */

.hero{position:relative;overflow:hidden;padding:clamp(52px,8vw,96px) 0 clamp(70px,9vw,112px)}
.pol-a{
  width:min(720px,94vw);aspect-ratio:1/.9;
  right:-13%;top:-24%;background:var(--yta);
  border-radius:54% 46% 38% 62% / 48% 55% 45% 52%;
}
.pol-b{
  width:min(280px,46vw);aspect-ratio:1;
  left:-11%;bottom:-20%;background:#2c2f33;
  border-radius:46% 54% 60% 40% / 58% 42% 58% 42%;
}
.hero-inre{position:relative;z-index:1}
.hero-rubrik{
  font-size:clamp(2.5rem,7.9vw,5.9rem);
  line-height:1.18;
  max-width:14ch;
}
.hero .ingress{
  margin-top:22px;max-width:52ch;color:var(--dov);
  font-size:clamp(1.06rem,1.5vw,1.19rem);
}
.hero-knappar{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fakta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:36px}
.fakta li{
  position:relative;padding-left:19px;
  font-size:.95rem;font-weight:600;color:var(--dov);
}
.fakta li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  background:var(--accent);
  border-radius:60% 40% 55% 45% / 45% 55% 45% 55%;
}

/* ---------- 2. Palstyperna (signaturen) ---------- */

.pals{padding:var(--sekt) 0 clamp(70px,8vw,104px)}
.sekt-topp{max-width:62ch;margin-bottom:clamp(34px,4.5vw,54px)}

.pals-rutnat{
  display:grid;gap:clamp(16px,2.2vw,24px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pals-kort{
  background:var(--yta);
  border-radius:clamp(24px,3vw,34px);
  padding:clamp(20px,2.6vw,30px);
  display:flex;flex-direction:column;
}
.pals-bild{
  background:var(--yta2);
  border-radius:var(--blobb);
  padding:clamp(8px,1.4vw,16px) clamp(12px,2vw,24px);
  margin-bottom:clamp(18px,2.2vw,26px);
}
.hund{display:block;width:100%;height:auto}
.hund .lager-kropp{fill:var(--kropp)}
.hund .lager-pals{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.hund .lager-ull{fill:none;stroke:var(--ull);stroke-width:22;stroke-linejoin:round;stroke-linecap:round}

.p-kort   .lager-pals{stroke-width:5;stroke-dasharray:.6 6}
.p-lang   .lager-pals{stroke-width:18;stroke-dasharray:26 26}
.p-dubbel .lager-pals{stroke-width:34;stroke-dasharray:2 40}
.p-lockig .lager-pals{stroke-width:22;stroke-dasharray:.5 24}

.pals-kort h3{font-size:clamp(1.35rem,2.2vw,1.72rem);line-height:1.2}
.kanna{margin-top:10px;font-weight:500}
.raser{margin-top:9px;color:var(--dov);font-size:.9rem;line-height:1.5}
.gor{margin-top:14px;color:var(--dov);font-size:.96rem}
.pals-rad{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--linje);
}
.pals-rad .tid{color:var(--dov);font-size:.95rem;font-weight:600}
.pals-rad .pris{
  color:var(--accent);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.8vw,1.95rem);
}
.pals-not{
  margin-top:clamp(26px,3vw,38px);color:var(--dov);
  max-width:70ch;font-size:.97rem;
}

/* ---------- 3. Det har ingar ---------- */

.ingar{background:var(--yta);padding:calc(var(--sekt) + 26px) 0 var(--sekt)}
.ingar-inre{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr}
.ingar-lista li{
  position:relative;padding:15px 0 15px 34px;
  border-top:1px solid var(--linje);font-size:1.04rem;
}
.ingar-lista li:last-child{border-bottom:1px solid var(--linje)}
.ingar-lista li::before{
  content:"";position:absolute;left:1px;top:24px;
  width:14px;height:14px;background:var(--accent);
  border-radius:60% 40% 55% 45% / 45% 55% 45% 55%;
}

/* ---------- 4. Besoket ---------- */

.besok{background:var(--bas);padding:calc(var(--sekt) + 26px) 0 var(--sekt);overflow:hidden}
.pol-c{
  width:min(420px,62vw);aspect-ratio:1/.9;
  right:-12%;bottom:4%;background:#2c2f33;
  border-radius:52% 48% 63% 37% / 42% 58% 42% 58%;
}
.besok .wrap{position:relative;z-index:1}
.steg{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(2,minmax(0,1fr))}
.steg li{
  background:var(--yta);border-radius:clamp(22px,2.6vw,30px);
  padding:clamp(22px,2.6vw,32px);
}
.steg-nr{
  display:block;font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:800;
  line-height:1;color:var(--accent);letter-spacing:-.03em;margin-bottom:12px;
}
.steg h3{font-size:clamp(1.18rem,1.8vw,1.38rem);line-height:1.24}
.steg p{margin-top:10px;color:var(--dov);font-size:1rem}

/* ---------- 5. Omdome ---------- */

.omdome{background:var(--yta);padding:calc(var(--sekt) + 26px) 0 var(--sekt)}
.omdome-inre>*{max-width:64ch}
.citat{margin:0;position:relative}
.citat p{
  font-size:clamp(1.3rem,2.7vw,1.95rem);
  line-height:1.38;font-weight:500;letter-spacing:-.012em;
}
.citat::before{
  content:"”";display:block;color:var(--accent);
  font-size:4rem;line-height:.7;margin-bottom:10px;font-weight:800;
}
.citat-namn{margin-top:24px;font-weight:700}
.citat-om{display:block;font-weight:500;color:var(--dov);font-size:.96rem}

/* ---------- 6. Boka ---------- */

.boka{background:var(--bas);padding:calc(var(--sekt) + 26px) 0 var(--sekt);overflow:hidden}
.pol-d{
  width:min(560px,80vw);aspect-ratio:1/.78;
  left:-20%;top:6%;background:var(--yta);
  border-radius:57% 43% 40% 60% / 52% 46% 54% 48%;
}
.boka-inre{
  position:relative;z-index:1;
  display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1fr;
}
.tel-stor{
  display:flex;align-items:center;width:fit-content;min-height:56px;
  margin-top:28px;text-decoration:none;
  color:var(--accent);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.1rem,5.4vw,3.25rem);line-height:1.15;
}
.tel-stor:hover{text-decoration:underline;text-underline-offset:6px}
.mejl{
  display:inline-flex;align-items:center;min-height:46px;margin-top:6px;
  color:var(--text);font-weight:600;
  text-decoration:underline;text-decoration-color:rgba(227,193,74,.6);
  text-underline-offset:5px;
}
.mejl:hover{color:var(--accent)}

.boka-hoger{
  background:var(--yta);border-radius:clamp(24px,3vw,34px);
  padding:clamp(24px,3vw,34px);align-self:start;
}
.oppet-rubrik{font-size:1.16rem;margin-bottom:6px}
.oppet li{
  display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--linje);
}
.oppet li span:first-child{color:var(--dov)}
.oppet li span:last-child{font-weight:600;white-space:nowrap}
.boka-not{margin-top:18px;color:var(--dov);font-size:.94rem}

/* ---------- Footer ---------- */

.fot{background:var(--yta);padding:clamp(72px,9vw,120px) 0 26px}
.fot-inre{
  display:flex;flex-wrap:wrap;gap:22px 40px;justify-content:space-between;
  padding-bottom:24px;border-bottom:1px solid var(--linje);
}
.fot-namn{font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.fot-ort{color:var(--dov);font-size:.96rem}
.fot-lista{display:flex;flex-wrap:wrap;gap:6px 26px}
.fot-lista a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;font-weight:600;color:var(--text);
}
.fot-lista a:hover{color:var(--accent)}
.fot-rad{
  width:min(1180px,100%);margin:20px auto 0;
  padding-inline:clamp(20px,5vw,44px);
  color:var(--dov);font-size:.84rem;
}

/* ---------- Responsivt ---------- */

@media (max-width:1000px){
  .ingar-inre{grid-template-columns:1fr}
}

@media (min-width:1001px){
  .ingar-inre{grid-template-columns:.85fr 1.15fr;align-items:start}
  .boka-inre{grid-template-columns:1.1fr .9fr;align-items:start}
}

@media (max-width:899px){
  .meny{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bas);border-bottom:1px solid var(--linje);
    padding:4px clamp(20px,5vw,44px) 22px;
  }
  body.meny-oppen .meny{display:flex}
  .meny-lista{flex-direction:column;align-items:stretch;gap:0}
  .meny-lista a{display:flex;min-height:54px;border-bottom:1px solid var(--linje);font-size:1.06rem}
  .meny-cta{margin-top:16px;min-height:52px}
  .hamburgare{display:inline-flex}
}

@media (max-width:720px){
  .pals-rutnat{grid-template-columns:1fr}
  .steg{grid-template-columns:1fr}
  .hero-knappar .knapp{flex:1 1 100%}
  .fot-lista{gap:0 22px}
}

@media (max-width:420px){
  .brand-ord{font-size:1.12rem}
  .fakta li{font-size:.9rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}