/* W Mallorca Invest — premiumlager. Skrivet för varv 1.
   Ordning: tokens, bas, typografi, header, knappar, hero, briefen, kort,
   sektioner, objektsida, artikelsidor, bokning, pitch, footer, rörelse,
   och sist ett eget mobillager. */

/* ---------- 1. Tokens ---------- */
:root {
  --creme: #f7f2e9;
  --creme-deep: #efe7d8;
  --paper: #fdfbf7;
  --ink: #10233c;
  --ink-deep: #0a1728;
  --ink-soft: #46556c;
  --ink-faint: #7b8798;
  --sand: #e2d8c7;
  --sand-soft: #ece4d6;
  --sea: #57d0f8;
  --royal: #3a65d2;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --gut: clamp(20px, 5vw, 76px);
  --maxw: 1320px;
  --narrow: 1080px;
  --lh: 1.62;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --foot-h: 0px;
}

/* ---------- 2. Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }

.pr-shell { position: relative; z-index: 1; background: var(--creme); }
.pr-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.pr-wrap--narrow { max-width: var(--narrow); }
.pr-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--creme); padding: 12px 18px;
}
.pr-skip:focus { left: 12px; top: 12px; }

/* ---------- 3. Typografi ---------- */
.pr-display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.004em;
  margin: 0;
}
h1.pr-display { font-size: clamp(38px, 5.4vw, 74px); }
h2.pr-display { font-size: clamp(30px, 3.5vw, 50px); }
h3.pr-display { font-size: clamp(22px, 2vw, 30px); line-height: 1.4; }
.pr-display--diak { line-height: 1.45; padding-bottom: .06em; }
.pr-eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.pr-eyebrow--sea { color: var(--sea); }
.pr-display + .pr-lead, .pr-display + .pr-body { margin-top: 18px; }
.pr-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.7; color: var(--ink-soft); margin: 0; }
.pr-body p { line-height: 1.75; }
.pr-rule { height: 1px; background: var(--sand); border: 0; margin: 0; }
.pr-hair { border-top: 1px solid var(--sand); }

/* ---------- 4. Header ---------- */
/* Höjden står still och loggan skalas. Inget layoutmått animeras, så listen
   aldrig knuffar innehållet under sig när man skrollar. */
.pr-head {
  position: fixed; inset: 0 0 auto; z-index: 90;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
  padding: 19px 0;
}
.pr-head__in { display: flex; align-items: center; gap: 28px; }
.pr-head__logo { display: flex; align-items: center; }
.pr-head__logo img {
  width: 168px; height: auto !important;
  transform-origin: left center; transition: transform .5s var(--ease);
}
.pr-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.pr-nav a {
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.5; color: var(--ink-soft); position: relative; padding: 6px 0;
}
.pr-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.pr-nav a:hover::after, .pr-nav a[aria-current="page"]::after { transform: scaleX(1); }
.pr-head--over .pr-nav a, .pr-head--over .pr-head__tel { color: rgba(255, 255, 255, .88); }
.pr-head--over .pr-head__logo img { filter: brightness(0) invert(1); }
.pr-head--solid {
  background: rgba(247, 242, 233, .94);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--sand);
}
.pr-head--solid .pr-head__logo img { transform: scale(.8); }
.pr-burger { display: none; }
.pr-drawer { display: none; }

/* ---------- 5. Knappar och kontroller ---------- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 30px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  line-height: 1.5; border: 1px solid var(--ink); color: var(--ink);
  background: transparent; cursor: pointer; position: relative; overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.pr-btn::before {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.pr-btn > span { position: relative; z-index: 1; }
.pr-btn:hover::before { transform: scaleY(1); }
.pr-btn:hover { color: var(--creme); }
.pr-btn--solid { background: var(--ink); color: var(--creme); }
.pr-btn--solid::before { background: var(--creme); }
.pr-btn--solid:hover { color: var(--ink); }
.pr-btn--light { border-color: rgba(255, 255, 255, .7); color: #fff; }
.pr-btn--light::before { background: #fff; }
.pr-btn--light:hover { color: var(--ink); border-color: #fff; }
.pr-btn[disabled] { opacity: .45; pointer-events: none; }
.pr-btns { display: flex; flex-wrap: wrap; gap: 14px; }

.pr-link {
  display: inline-block; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500; line-height: 1.6;
  padding-bottom: 5px; border-bottom: 1px solid var(--sand);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.pr-link:hover { border-color: var(--ink); }

/* ---------- 6. Hero ---------- */
.pr-hero { position: relative; min-height: 96vh; display: flex; align-items: flex-end; overflow: hidden; }
.pr-hero__media { position: absolute; inset: 0; }
.pr-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--op-d, 50% 50%); transform: scale(1.06);
}
.pr-hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 58% at 80% 50%, rgba(8, 20, 36, .52) 0%, rgba(8, 20, 36, 0) 72%),
    linear-gradient(180deg, rgba(8, 20, 36, .58) 0%, rgba(8, 20, 36, .18) 30%, rgba(8, 20, 36, .86) 100%),
    linear-gradient(90deg, rgba(8, 20, 36, .62) 0%, rgba(8, 20, 36, .12) 58%, rgba(8, 20, 36, 0) 84%);
}
.pr-hero__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(56px, 8vh, 108px); padding-top: 190px; }
.pr-hero__in .pr-eyebrow { color: rgba(255, 255, 255, .72); }
.pr-hero h1 { color: #fff; max-width: 18ch; text-shadow: 0 2px 34px rgba(8, 20, 36, .35); }
.pr-hero__sub { color: rgba(255, 255, 255, .84); max-width: 54ch; margin: 26px 0 36px; font-size: 17px; line-height: 1.7; }
.pr-hero .pr-btn--solid { background: #fff; color: var(--ink); border-color: #fff; }
.pr-hero .pr-btn--solid::before { background: var(--ink); }
.pr-hero .pr-btn--solid:hover { color: #fff; }
/* W:et ur loggan bär heron. Kundens märke ligger i bilden, inte bara i listen. */
.pr-hero__w {
  position: absolute; right: var(--gut); top: 50%; z-index: 2;
  width: clamp(170px, 19vw, 296px); display: block;
  opacity: 0; transform: translateY(-46%) scale(.94);
  transition: opacity 1.4s var(--ease) .25s, transform 1.6s var(--ease) .25s;
}
.pr-hero__w img {
  width: 100%; height: auto;
  filter: drop-shadow(0 18px 50px rgba(8, 20, 36, .6));
}
.pr-hero.is-in .pr-hero__w { opacity: .94; transform: translateY(-50%) scale(1); }
.pr-hero__scroll {
  position: absolute; left: auto; right: var(--gut); bottom: 96px; z-index: 2;
  writing-mode: vertical-rl; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; line-height: 1.6; color: rgba(255, 255, 255, .6);
}
.pr-hero__cred {
  position: absolute; right: var(--gut); bottom: 26px; z-index: 2;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.6; color: rgba(255, 255, 255, .55); text-align: right;
}
/* Havsblå linje där fotot slutar och sidan börjar, kundens egen ton ur loggan */
.pr-band {
  background: var(--ink); color: rgba(255, 255, 255, .8);
  border-top: 2px solid var(--sea);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.6;
}
.pr-band__in { display: flex; flex-wrap: wrap; gap: 8px 34px; padding: 17px 0; }
.pr-band span { white-space: nowrap; }

/* ---------- 6b. Kortheron på startsidan ----------
   Kortets form är kvar: rundade hörn, luft runt, W:et, rubrik, undertext, knapp.
   Kundens tre foton bär kortet i full storlek, en i taget, med lugn korsfadning.
   Texten står nere till vänster mot en gradient underifrån och från vänster, så
   att den ligger fritt mot både det ljusa Puntiró-fotot, det mörka loftet och den
   soliga terrassen. Motivet i varje bild flyttas till höger om texten med sin egen
   object-position (--op-d på skrivbord, --op-m på mobil). */
.pr-hero--card {
  display: block; min-height: 0; overflow: visible;
  background: var(--paper); padding: 118px 0 clamp(44px, 5vw, 78px);
}
.pr-hero__card {
  position: relative; background: var(--ink-deep); border: 1px solid var(--sand-soft);
  border-radius: 18px; isolation: isolate;
  min-height: min(72vh, 680px); display: flex; align-items: flex-end;
  padding: clamp(44px, 5vw, 80px) clamp(24px, 4vw, 66px) clamp(46px, 5vw, 76px);
  text-align: left; overflow: hidden;
}
.pr-hero__bgs { position: absolute; inset: 0; z-index: 0; }
.pr-hero__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.pr-hero__bg.is-on { opacity: 1; }
.pr-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--op-d, 50% 50%); transform: scale(var(--z, 1.004));
}
/* Överlägget hör till bilden, inte till kortet: en mjuk mörk pöl förankrad i nedre
   vänstra hörnet där texten står, medan höger halva och övre högra hörnet lämnas
   kvar som foto. --sh sänker styrkan på den bild som redan är mörk. */
.pr-hero__bg::after {
  content: ""; position: absolute; inset: 0; opacity: var(--sh, 1);
  background:
    radial-gradient(88% 128% at 6% 86%,
      rgba(8, 20, 36, .95) 0%, rgba(8, 20, 36, .93) 38%, rgba(8, 20, 36, .88) 56%,
      rgba(8, 20, 36, .66) 72%, rgba(8, 20, 36, .30) 86%, rgba(8, 20, 36, 0) 100%),
    linear-gradient(to top, rgba(8, 20, 36, .44) 0%, rgba(8, 20, 36, .12) 15%, rgba(8, 20, 36, 0) 34%);
}
/* Ken Burns, två och en halv procent över hela visningen. Ingen blink. */
.pr-hero__bg.is-on img { animation: pr-burns 9.6s linear forwards; }
@keyframes pr-burns { from { transform: scale(var(--z, 1.004)); } to { transform: scale(calc(var(--z, 1.004) * 1.025)); } }
/* Tunn kant nertill så punkterna syns även mot en ljus bild */
.pr-hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
  background: linear-gradient(to top, rgba(8, 20, 36, .30) 0%, rgba(8, 20, 36, 0) 13%);
}
.pr-hero--card .pr-hero__in {
  position: relative; z-index: 2; max-width: 640px; margin: 0; padding: 0; text-align: left;
}
.pr-hero--card .pr-eyebrow { color: rgba(255, 255, 255, .8); margin-bottom: 18px; }
.pr-hero--card h1.pr-display {
  color: #fff; max-width: 15ch; font-size: clamp(33px, 4.4vw, 60px);
  text-shadow: 0 2px 30px rgba(8, 20, 36, .5);
}
.pr-hero--card .pr-hero__sub {
  color: rgba(255, 255, 255, .88); max-width: 50ch; margin: 22px 0 32px; font-size: 17px;
  text-shadow: 0 1px 18px rgba(8, 20, 36, .55);
}
.pr-hero--card .pr-btns { justify-content: flex-start; }
.pr-hero--card .pr-btn--solid { background: #fff; color: var(--ink); border-color: #fff; }
.pr-hero--card .pr-btn--solid::before { background: var(--ink); }
.pr-hero--card .pr-btn--solid:hover { color: #fff; }
/* W:et i havsblått överst i textpelaren, i scrimen där havsblått står starkast,
   ovanför ögonbrynet så att det varken krockar med texten eller med motivet */
.pr-hero--card .pr-hero__w {
  position: static; display: block; margin: 0 0 20px; width: clamp(64px, 7.2vw, 106px);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity 1.1s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.pr-hero--card .pr-hero__w img { filter: drop-shadow(0 12px 34px rgba(8, 20, 36, .6)); }
.pr-hero--card.is-in .pr-hero__w { opacity: 1; transform: none; }
.pr-hero--card .pr-hero__scroll { color: var(--ink-faint); bottom: 54px; left: 8px; right: auto; }

/* Tre punkter i kortets nedre kant. Klickbara, 44 px tryckyta, inga pilar. */
.pr-hero__dots {
  position: absolute; z-index: 3; right: clamp(8px, 1.8vw, 26px);
  bottom: clamp(4px, 1.2vw, 18px); display: flex; gap: 0;
}
.pr-hero__dot {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.pr-hero__dot::before {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.pr-hero__dot:hover::before { background: rgba(255, 255, 255, .82); }
.pr-hero__dot[aria-current="true"]::before { background: #fff; transform: scale(1.3); }
.pr-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: -10px; }
.pr-hero__sub--tight { display: none; }

/* ---------- 6c. Fotobandet efter briefen ---------- */
.pr-shout { position: relative; min-height: 76vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.pr-shout__media { position: absolute; inset: 0; }
.pr-shout__media img { width: 100%; height: 100%; object-fit: cover; }
.pr-shout__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 20, 36, .34) 0%, rgba(8, 20, 36, .14) 30%, rgba(8, 20, 36, .9) 100%),
    linear-gradient(90deg, rgba(8, 20, 36, .68) 0%, rgba(8, 20, 36, .14) 60%, rgba(8, 20, 36, 0) 88%);
}
.pr-shout__in { position: relative; z-index: 2; width: 100%; padding-top: clamp(96px, 15vh, 180px); padding-bottom: clamp(58px, 9vh, 112px); }
.pr-shout .pr-eyebrow { color: rgba(255, 255, 255, .6); }
.pr-shout .pr-display { color: #fff; max-width: 17ch; }
.pr-shout .pr-lead { color: rgba(255, 255, 255, .82); max-width: 56ch; margin-top: 24px; }
.pr-shout .pr-btns { margin-top: 34px; }
.pr-shout__cred {
  position: absolute; right: var(--gut); bottom: 22px; z-index: 2; margin: 0;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.6; color: rgba(255, 255, 255, .5);
}

/* ---------- 7. Sektionsrytm ---------- */
.pr-sec { padding: clamp(72px, 9vw, 132px) 0; position: relative; }
.pr-sec--paper { background: var(--paper); }
.pr-sec--sand { background: var(--sand-soft); }
.pr-btns--end { justify-content: flex-end; margin-top: clamp(28px, 3.2vw, 46px); }
.pr-sec--deep { background: var(--ink); color: rgba(255, 255, 255, .84); }
.pr-sec--deep .pr-display { color: #fff; }
.pr-sec--deep .pr-eyebrow { color: rgba(255, 255, 255, .5); }
.pr-sec--deep .pr-lead { color: rgba(255, 255, 255, .72); }
.pr-sec__head { max-width: 62ch; margin-bottom: clamp(38px, 4vw, 62px); }
.pr-sec__head .pr-lead { margin-top: 20px; }
.pr-sec__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

/* ---------- 8. Briefen, signaturen ---------- */
.pr-brief { background: var(--creme-deep); }
.pr-brief__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(34px, 5vw, 84px); align-items: start; }
.pr-brief__note { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; margin: 22px 0 0; font-style: italic; font-family: var(--serif); font-size: 19px; }
.pr-step { border-top: 1px solid var(--sand); padding: 26px 0 24px; }
.pr-step:last-of-type { border-bottom: 1px solid var(--sand); }
.pr-step__q { font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); line-height: 1.4; margin: 0 0 18px; }
.pr-opts { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pr-opt {
  position: relative; cursor: pointer; padding: 6px 0 8px;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  border-bottom: 2px solid transparent; min-height: 34px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.pr-opt:hover { color: var(--ink); border-bottom-color: var(--sand); }
/* Valt: kundens egen havsblå under ordet, inte en pillerform bakom det */
.pr-opt[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--sea); font-weight: 500; }
.pr-opt[data-empty="1"] { color: var(--ink-faint); opacity: .5; }

.pr-result { background: var(--paper); border: 1px solid var(--sand); padding: clamp(24px, 2.6vw, 38px); position: sticky; top: 108px; }
.pr-result__count { display: flex; align-items: baseline; gap: 14px; }
.pr-result__n { font-family: var(--serif); font-size: clamp(46px, 5vw, 68px); line-height: 1.1; font-weight: 300; }
.pr-result__of { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--ink-faint); }
.pr-result__list { margin: 26px 0 0; padding: 0; list-style: none; }
.pr-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--sand); align-items: center; }
.pr-mini__img { width: 96px; height: 72px; overflow: hidden; background: var(--sand-soft); }
.pr-mini__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pr-mini:hover .pr-mini__img img { transform: scale(1.06); }
.pr-mini__area, .pr-mini__t, .pr-mini__p { display: block; }
.pr-mini__t { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.pr-mini__area { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.6; color: var(--ink-faint); }
.pr-mini__t { font-family: var(--serif); font-size: 18px; line-height: 1.4; margin: 2px 0 3px; }
.pr-mini__p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.pr-result__foot { border-top: 1px solid var(--sand); padding-top: 24px; margin-top: 6px; }
.pr-result__empty { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); padding: 22px 0; border-top: 1px solid var(--sand); }

/* ---------- 9. Objektkort ----------
   Vitt kort på creme, mjuk skugga, tre av kundens foton som bildspel i bildytan.
   Punkterna under bilden är navigeringen, inga pilar, inga ikoner i kortet. */
.pr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.pr-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sand-soft); border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 35, 60, .04), 0 10px 26px rgba(16, 35, 60, .05);
  transition: box-shadow .55s var(--ease), transform .55s var(--ease), opacity 1s var(--ease);
}
.pr-card[hidden] { display: none; }
.pr-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16, 35, 60, .05), 0 20px 46px rgba(16, 35, 60, .11);
}
.pr-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--creme-deep); }
.pr-card__shots { position: absolute; inset: 0; display: block; overflow: hidden; }
.pr-card__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--ease);
}
.pr-card__slide.is-on { opacity: 1; }
.pr-card__shots--fit .pr-card__slide { object-fit: contain; background: var(--creme-deep); }
.pr-mini__img--fit img { object-fit: contain; background: var(--creme-deep); }
.pr-card__veil {
  position: absolute; inset: 0; background: rgba(10, 23, 40, .1);
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.pr-card:hover .pr-card__veil { opacity: 1; }
.pr-card__tag {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  background: #fff; color: var(--ink); border-radius: 5px; padding: 6px 11px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.6; font-weight: 500; box-shadow: 0 2px 9px rgba(16, 35, 60, .16);
}
.pr-card__dots { position: absolute; left: 0; right: 0; bottom: 1px; z-index: 2; display: flex; justify-content: center; gap: 2px; }
.pr-card__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
}
.pr-card__dot i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(10, 23, 40, .45);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.pr-card__dot:hover i { background: #fff; }
.pr-card__dot[aria-current="true"] i { background: #fff; transform: scale(1.2); }
.pr-card__body { position: relative; display: block; padding: 20px 20px 22px; }
.pr-card__area, .pr-card__p, .pr-card__facts, .pr-card__quiet, .pr-card__ref { display: block; }
.pr-card__area { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.6; color: var(--ink-faint); }
.pr-card__t { font-family: var(--serif); font-size: clamp(18px, 1.4vw, 22px); font-weight: 400; line-height: 1.4; margin: 8px 0 14px; }
.pr-card__t a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-card__t a::after { content: ""; position: absolute; inset: 0; }
.pr-card__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--sand-soft); padding-top: 13px;
}
.pr-card__ref { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); }
.pr-card__p { font-size: 15px; line-height: 1.6; font-weight: 500; white-space: nowrap; }
.pr-card__facts { font-size: 13px; line-height: 1.6; color: var(--ink-faint); margin-top: 8px; }
.pr-card__quiet { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; color: var(--royal); margin-top: 10px; }

/* ---------- 10. Köparombudet ---------- */
.pr-agent { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pr-agent__img { overflow: hidden; }
.pr-agent__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.pr-facts { list-style: none; margin: 34px 0 0; padding: 0; }
.pr-facts li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px;
  border-top: 1px solid var(--sand); padding: 14px 0; font-size: 14.5px; line-height: 1.6;
}
.pr-facts b { font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.7; }
.pr-sign { margin-top: 34px; }
.pr-sign img { width: clamp(180px, 20vw, 260px); height: auto; }
.pr-sign figcaption { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); margin-top: 10px; }

/* ---------- 11. Steg, tjänster, områden ---------- */
.pr-rows { list-style: none; margin: 0; padding: 0; }
.pr-row { border-top: 1px solid var(--sand); padding: clamp(22px, 2.4vw, 32px) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 46px); align-items: start; }
.pr-row:last-child { border-bottom: 1px solid var(--sand); }
.pr-row__t { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; margin: 0 0 8px; font-weight: 400; }
.pr-row__d { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }
.pr-sec--deep .pr-row, .pr-sec--deep .pr-row:last-child { border-color: rgba(255, 255, 255, .17); }
.pr-sec--deep .pr-row__d { color: rgba(255, 255, 255, .7); }
.pr-sec--deep .pr-link { border-color: rgba(255, 255, 255, .3); }
.pr-sec--deep .pr-link:hover { border-color: #fff; }

.pr-row--link { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pr-row--link > div { transition: transform .5s var(--ease); }
.pr-row--link:hover > div { transform: translateX(12px); }
.pr-row__meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); white-space: nowrap; }

/* ---------- 11b. Secret listings, mörkt band med stor typografi ---------- */
.pr-hids { list-style: none; margin: 0; padding: 0; }
.pr-hid { border-top: 1px solid rgba(255, 255, 255, .17); }
.pr-hid:last-child { border-bottom: 1px solid rgba(255, 255, 255, .17); }
.pr-hid__in {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 300px;
  gap: clamp(18px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 2.2vw, 30px) 0;
}
.pr-hid__ref {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.7;
  color: rgba(255, 255, 255, .45); transition: color .5s var(--ease);
}
.pr-hid__txt { display: block; }
.pr-hid__n {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 54px); line-height: 1.4; color: #fff;
  transition: color .5s var(--ease);
}
.pr-hid__d {
  display: block; font-size: 14.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .62); max-width: 52ch; margin-top: 6px;
}
.pr-hid__ph {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: rgba(255, 255, 255, .05);
  opacity: .22; filter: grayscale(1); transform: scale(1.04);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform 1.1s var(--ease);
}
.pr-hid__ph img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.pr-hid__cap {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.6; color: rgba(255, 255, 255, .86);
}
.pr-hid__ph--none { border: 1px solid rgba(255, 255, 255, .17); background: transparent; }
.pr-hid__in:hover .pr-hid__ph, .pr-hid__in:focus-visible .pr-hid__ph { opacity: 1; filter: none; transform: none; }
.pr-hid__in:hover .pr-hid__n { color: var(--sea); }
.pr-hid__in:hover .pr-hid__ref { color: var(--sea); }

/* ---------- 11c. Palmas stadsdelar som rutnät med objektfoton ---------- */
.pr-hoods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.pr-hood { position: relative; display: block; overflow: hidden; }
.pr-hood__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-deep); }
.pr-hood__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pr-hood::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 20, 36, 0) 42%, rgba(8, 20, 36, .74) 100%);
}
.pr-hood:hover .pr-hood__ph img { transform: scale(1.06); }
.pr-hood__body { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; }
.pr-hood__n {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 1.8vw, 27px); line-height: 1.4; color: #fff;
}
.pr-hood__c {
  display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.7; color: rgba(255, 255, 255, .7); margin-top: 2px;
}
.pr-hood__rest { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--sand); padding-top: 20px; }
.pr-hood__list { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 10px; }
.pr-hood__more {
  display: inline-flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.6;
  border-bottom: 1px solid transparent; transition: border-color .4s var(--ease);
}
.pr-hood__more span { font-size: 11px; letter-spacing: .14em; color: var(--ink-faint); }
.pr-hood__more:hover { border-bottom-color: var(--sea); }

/* ---------- 11d. Stadsdelsguider ---------- */
/* Guidens hero är lägre än startsidans: en guide ska visa sin substans direkt.
   Saknar stadsdelen ett eget foto hos kunden blir heron ett marinblått band
   med stor typografi i stället. Aldrig ett foto från en annan stadsdel. */
.pr-hero--guide { min-height: 74vh; }
.pr-hero--guide .pr-hero__in { padding-top: 172px; padding-bottom: clamp(44px, 6vh, 78px); }
/* Boxen följer stadsdelens namn i stället för att sträcka sig in i den ljusa
   halvan av fotot. 15ch räcker för det längsta namnet, Santa Catalina, utan
   radbrytning, och fit-content drar in boxen till de korta namnen. */
.pr-hero--guide h1.pr-display { font-size: clamp(44px, 7vw, 96px); width: fit-content; max-width: 15ch; }
/* Guidens överlägg är samma pöl som sidhuvudets foto (.pr-shot::after): en mjuk
   mörk pöl förankrad i nedre vänstra hörnet där texten står, en svag kant
   nertill, och motivet fritt till höger. --sh sänker den på bilder som redan
   är mörka. Mobilvarianten ligger i mobilblocket sist i filen. */
.pr-hero--guide .pr-hero__veil {
  opacity: var(--sh, 1);
  background:
    radial-gradient(88% 128% at 6% 86%,
      rgba(8, 20, 36, .95) 0%, rgba(8, 20, 36, .93) 38%, rgba(8, 20, 36, .88) 56%,
      rgba(8, 20, 36, .66) 72%, rgba(8, 20, 36, .30) 86%, rgba(8, 20, 36, 0) 100%),
    linear-gradient(to top, rgba(8, 20, 36, .44) 0%, rgba(8, 20, 36, .12) 15%, rgba(8, 20, 36, 0) 34%);
}
.pr-hero--guide .pr-eyebrow a { border-bottom: 1px solid rgba(255, 255, 255, .34); }
.pr-hero--guide .pr-eyebrow a:hover { border-bottom-color: #fff; }
.pr-hero--plain { min-height: 64vh; background: var(--ink); }
.pr-hero__plain {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 76% at 84% 26%, rgba(87, 208, 248, .17) 0%, rgba(87, 208, 248, 0) 68%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
}
/* Utan foto bär typografin bandet: namnet går stort över ytan i stället för
   att ett foto från en annan stadsdel lånas in. */
.pr-hero--plain h1.pr-display { font-size: clamp(54px, 13vw, 184px); line-height: 1.06; }
.pr-hero--plain .pr-hero__sub { font-size: 19px; max-width: 46ch; margin-top: 30px; }
.pr-hero--plain .pr-hero__in::before {
  content: ""; display: block; width: 84px; height: 1px;
  background: var(--sea); margin-bottom: 30px;
}

.pr-duo { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 5vw, 86px); align-items: start; }
.pr-duo .pr-facts { margin-top: 28px; }
.pr-duo h3.pr-display { font-size: clamp(24px, 2.3vw, 34px); }

.pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: 4px; }
.pr-price__n { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 5.6vw, 78px); line-height: 1.3; color: #fff; }
.pr-price__to { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; line-height: 1.7; color: rgba(255, 255, 255, .5); }
.pr-price__ask { font-family: var(--serif); font-weight: 300; font-size: clamp(27px, 3.6vw, 50px); line-height: 1.4; color: #fff; max-width: 22ch; }
.pr-price__x {
  border-top: 1px solid rgba(255, 255, 255, .17); margin-top: 30px; padding-top: 22px;
  font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .6); max-width: 64ch;
}
.pr-sec--deep .pr-facts li { border-color: rgba(255, 255, 255, .17); }

/* Bricka utan eget foto: samma mått, marinblå grund, namnet bär den */
.pr-hood--plain .pr-hood__ph {
  background:
    radial-gradient(70% 80% at 78% 22%, rgba(87, 208, 248, .2) 0%, rgba(87, 208, 248, 0) 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
}
.pr-hood--plain::after { background: linear-gradient(180deg, rgba(8, 20, 36, 0) 55%, rgba(8, 20, 36, .5) 100%); }
.pr-hood--plain .pr-hood__body { bottom: auto; top: 50%; transform: translateY(-50%); }
.pr-hood--plain .pr-hood__n { font-size: clamp(26px, 2.4vw, 36px); transition: color .5s var(--ease); }
.pr-hood--plain:hover .pr-hood__n { color: var(--sea); }

/* ---------- 11e. Nyckeltalsbandet och Explore by type ---------- */
.pr-kpis { background: var(--sand-soft); padding: clamp(48px, 5.6vw, 84px) 0; }
.pr-kpis__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 64px); text-align: center; }
.pr-kpis h2.pr-display { font-size: clamp(24px, 2.6vw, 38px); color: var(--ink); }
.pr-kpis p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }

.pr-types-sec__h { text-align: center; font-size: clamp(26px, 2.8vw, 40px); margin-bottom: clamp(30px, 3.4vw, 50px); }
.pr-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pr-type {
  display: flex; align-items: center; gap: 16px; min-height: 86px;
  background: #fff; border: 1px solid var(--sand-soft); border-radius: 10px;
  padding: 12px 22px 12px 12px;
  box-shadow: 0 1px 2px rgba(16, 35, 60, .04), 0 8px 20px rgba(16, 35, 60, .04);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.pr-type:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 35, 60, .06), 0 16px 34px rgba(16, 35, 60, .09); }
.pr-type__ph { flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--creme-deep); }
.pr-type__ph img { width: 100%; height: 100%; object-fit: cover; }
.pr-type__txt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-type__n { font-size: 15.5px; line-height: 1.5; }
.pr-type__c { font-size: 11px; letter-spacing: .16em; line-height: 1.7; color: var(--ink-faint); }

/* ---------- 12. Citat ---------- */
.pr-quote { max-width: 24ch; }
.pr-quote__t { font-family: var(--serif); font-size: clamp(26px, 3.1vw, 44px); line-height: 1.34; font-weight: 300; margin: 0; }
.pr-quote__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.pr-quote__by { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); margin-top: 28px; }
.pr-quote__rest p { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 18px; }

/* Testimonial med foto till vänster, som i replikan */
.pr-tm { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4.4vw, 74px); align-items: start; }
.pr-tm__ph { overflow: hidden; border-radius: 10px; }
.pr-tm__ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.pr-tm__txt > p { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 18px; }
.pr-tm__txt .pr-quote { max-width: 46ch; margin-bottom: 26px; }
.pr-tm__txt .pr-quote__t { font-size: clamp(24px, 2.6vw, 36px); }
.pr-tm__txt .pr-quote__by { margin-top: 24px; }

/* ---------- 13. Slut-CTA ---------- */
.pr-cta { text-align: center; }
.pr-cta .pr-display { margin: 0 auto; max-width: 18ch; }
.pr-cta .pr-lead { margin: 22px auto 34px; max-width: 58ch; }
.pr-cta .pr-btns { justify-content: center; }
.pr-cta__seal { margin: 48px auto 0; width: fit-content; }
.pr-cta__seal img { width: clamp(170px, 19vw, 240px); height: auto; opacity: .9; }

/* ---------- 14. Objektlista ---------- */
.pr-page-head { padding: 170px 0 clamp(34px, 4vw, 54px); background: var(--creme); }
.pr-page-head--deep { background: var(--ink); color: #fff; padding-bottom: clamp(48px, 6vw, 84px); }
.pr-page-head--deep .pr-lead { color: rgba(255, 255, 255, .74); }
.pr-page-head--deep .pr-eyebrow { color: rgba(255, 255, 255, .5); }

/* ---------- 14b. Kundens foto bakom sidrubriken ----------
   Samma bildspråk som kortheron på startsidan, utan rotation: ett foto ur
   kundens egen portfölj, en mjuk mörk pöl förankrad i nedre vänstra hörnet där
   texten står, och motivet fritt till höger. Varje sida har sin egen
   object-position på skrivbord (--op-d) och på mobil (--op-m), och --sh sänker
   pölen på de foton som redan är mörka. */
.pr-page-head--shot {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62vh; display: flex; align-items: flex-end;
  background: var(--ink-deep);
  padding: 196px 0 clamp(52px, 6vw, 88px);
}
.pr-shot { position: absolute; inset: 0; z-index: 0; }
.pr-shot img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--op-d, 50% 50%);
}
.pr-shot::after {
  content: ""; position: absolute; inset: 0; opacity: var(--sh, 1);
  background:
    radial-gradient(88% 128% at 6% 86%,
      rgba(8, 20, 36, .95) 0%, rgba(8, 20, 36, .93) 38%, rgba(8, 20, 36, .88) 56%,
      rgba(8, 20, 36, .66) 72%, rgba(8, 20, 36, .30) 86%, rgba(8, 20, 36, 0) 100%),
    linear-gradient(to top, rgba(8, 20, 36, .44) 0%, rgba(8, 20, 36, .12) 15%, rgba(8, 20, 36, 0) 34%);
}
.pr-page-head--shot > .pr-wrap { position: relative; z-index: 2; width: 100%; }
.pr-page-head--shot h1.pr-display { color: #fff; text-shadow: 0 2px 30px rgba(8, 20, 36, .5); }
.pr-page-head--shot .pr-lead { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 18px rgba(8, 20, 36, .55); }
.pr-page-head--shot .pr-eyebrow { color: rgba(255, 255, 255, .8); }
/* Palma-rubriken är lång: två rader på skrivbord, boxen följer orden */
.pr-page-head--palma h1.pr-display { font-size: clamp(33px, 4.6vw, 66px); width: fit-content; max-width: 22ch; }
.pr-shot__cred {
  position: absolute; right: var(--gut); bottom: 22px; z-index: 3; margin: 0;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.6; text-align: right; color: rgba(255, 255, 255, .58);
}
.pr-shot__cred a, .pr-hero__cred a {
  color: inherit; border-bottom: 1px solid rgba(255, 255, 255, .26);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.pr-shot__cred a:hover, .pr-hero__cred a:hover { color: #fff; border-bottom-color: #fff; }

/* Porträttet på about: ett stående foto kapar ansiktet som helbreddsbakgrund,
   så kundens egen bild står bredvid texten i stället, med ansiktet fritt. */
.pr-page-head--por { padding-bottom: clamp(52px, 6vw, 88px); }
.pr-por {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
  gap: clamp(28px, 5vw, 74px); align-items: end;
}
.pr-por__f { margin: 0; position: relative; }
/* Kvadraten håller håret, ansiktet och hunden hela, stolen nertill går. */
.pr-por__f img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 50% 12%;
  border: 1px solid rgba(255, 255, 255, .14);
}
.pr-por__f figcaption {
  margin-top: 14px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.7; color: rgba(255, 255, 255, .55);
}
.pr-filter { border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); padding: 6px 0 18px; background: var(--creme); }
.pr-filter__row { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding-top: 14px; }
.pr-filter__lab { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); width: 92px; flex: none; }
.pr-filter__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0 4px; }
.pr-count { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); }
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 46px) clamp(22px, 2.6vw, 40px); }
.pr-grid .pr-card[hidden] { display: none; }
.pr-empty { padding: 60px 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- 15. Objektsida ---------- */
.pr-obj { padding-top: 132px; }
.pr-obj h1.pr-display { font-size: clamp(27px, 3.1vw, 44px); }
.pr-obj__top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 64px); align-items: end; padding: clamp(26px, 3vw, 44px) 0; }
.pr-obj__price { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.4; font-weight: 400; }
.pr-obj__ref { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); }
.pr-gal__main { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sand-soft); cursor: zoom-in; }
.pr-gal__main img { width: 100%; height: 100%; object-fit: cover; }
.pr-gal__thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pr-gal__thumbs .pr-thumb { flex: 1 1 0; min-width: 0; }
.pr-thumb { overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand-soft); cursor: pointer; padding: 0; border: 0; }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .45s var(--ease); }
.pr-thumb[aria-current="true"] img, .pr-thumb:hover img { opacity: 1; }
.pr-obj__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(36px, 4vw, 60px); }
.pr-obj__desc p { font-size: 16px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 20px; }
.pr-table { width: 100%; border-collapse: collapse; }
.pr-table th, .pr-table td { text-align: left; border-top: 1px solid var(--sand); padding: 13px 0; font-size: 14.5px; line-height: 1.6; vertical-align: top; }
.pr-table th { font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.7; width: 52%; }
.pr-aside-box { border: 1px solid var(--sand); background: var(--paper); padding: clamp(22px, 2.4vw, 34px); position: sticky; top: 108px; }
.pr-aside-box h3 { margin-top: 0; }
.pr-source { font-size: 12px; line-height: 1.7; color: var(--ink-faint); padding: 26px 0; border-top: 1px solid var(--sand); margin-top: clamp(40px, 5vw, 72px); }
.pr-secret-note { border: 1px solid var(--sand); background: var(--creme-deep); padding: clamp(20px, 2.2vw, 30px); font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin-top: 14px; }

.pr-lb { position: fixed; inset: 0; z-index: 150; background: rgba(8, 18, 32, .95); display: none; }
.pr-lb[data-open="1"] { display: block; }
.pr-lb__fig { position: absolute; inset: 54px 54px 76px; display: flex; align-items: center; justify-content: center; }
.pr-lb__fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pr-lb__x, .pr-lb__nav {
  position: absolute; min-width: 48px; min-height: 48px; color: #fff;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pr-lb__x { top: 14px; right: 18px; }
.pr-lb__nav { bottom: 18px; padding: 0 14px; }
.pr-lb__nav--p { left: 50%; transform: translateX(-118px); }
.pr-lb__nav--n { left: 50%; transform: translateX(34px); }
.pr-lb__c { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .6); font-size: 12px; line-height: 1.6; }

/* ---------- 16. Artikelsidor ---------- */
.pr-art-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 88px); align-items: start; }
.pr-art { font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }
.pr-art > *:first-child { margin-top: 0; }
.pr-art p { margin: 0 0 20px; }
.pr-art h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 33px); line-height: 1.4; color: var(--ink); margin: 46px 0 16px; }
.pr-art h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.4; color: var(--ink); margin: 34px 0 12px; }
.pr-art ul, .pr-art ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.pr-art ol { counter-reset: pr-o; }
.pr-art li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--sand); line-height: 1.7; }
.pr-art li > ul, .pr-art li > ol { margin: 10px 0 0; }
.pr-art li > ul > li:first-child, .pr-art li > ol > li:first-child { border-top: 1px solid var(--sand); }
.pr-art ul > li::before { content: ""; position: absolute; left: 0; top: 21px; width: 14px; height: 1px; background: var(--ink-faint); }
/* Stegen i artikelspalten är egna rader med hårlinje, inte en punktlista */
.pr-art .pr-rows > li { padding: clamp(22px, 2.4vw, 32px) 0; }
.pr-art .pr-rows > li::before { content: none; }
.pr-art ol > li::before {
  counter-increment: pr-o; content: counter(pr-o); position: absolute; left: 0; top: 11px;
  font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); line-height: 1.8;
}
.pr-art a { border-bottom: 1px solid var(--sand); }
.pr-art a:hover { border-color: var(--ink); }
.pr-art table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.pr-art th, .pr-art td { text-align: left; border-top: 1px solid var(--sand); padding: 12px 14px 12px 0; font-size: 15px; line-height: 1.6; vertical-align: top; }
.pr-art th { font-weight: 500; color: var(--ink); }
.pr-agent .pr-body { margin-top: 22px; }
.pr-art hr { border: 0; border-top: 1px solid var(--sand); margin: 40px 0; }
.pr-art strong { color: var(--ink); font-weight: 500; }
.pr-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--sand); border: 1px solid var(--sand); margin: 34px 0 44px; }
.pr-compare > div { background: var(--paper); padding: clamp(22px, 2.4vw, 32px); }
.pr-compare h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.4; }
.pr-compare p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.pr-compare > div + div { background: var(--ink); color: rgba(255, 255, 255, .8); }
.pr-compare > div + div h3 { color: #fff; }
.pr-compare > div + div p { color: rgba(255, 255, 255, .78); }

/* ---------- 17. Bokning ---------- */
.pr-book { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 80px); align-items: start; }
.pr-field { border-top: 1px solid var(--sand); padding: 22px 0; }
.pr-field:last-of-type { border-bottom: 1px solid var(--sand); }
.pr-field__lab { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); margin: 0 0 14px; display: block; }
.pr-field__row { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.pr-in {
  width: 100%; border: 0; border-bottom: 1px solid var(--sand); background: transparent;
  padding: 12px 0; font-size: 16px; line-height: 1.6; color: var(--ink); min-height: 46px;
  transition: border-color .4s var(--ease); font-family: var(--sans);
}
.pr-in:focus { outline: 0; border-bottom-color: var(--ink); }
.pr-in::placeholder { color: var(--ink-faint); }
textarea.pr-in { resize: vertical; min-height: 96px; }
.pr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
.pr-days { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; scrollbar-width: none; }
.pr-days::-webkit-scrollbar { display: none; }
.pr-day {
  flex: none; min-width: 62px; min-height: 66px; padding: 10px 8px; cursor: pointer;
  border: 1px solid var(--sand); background: var(--paper); text-align: center;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.pr-day em { display: block; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.7; }
.pr-day b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.4; }
.pr-day[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--creme); }
.pr-day[aria-pressed="true"] em { color: rgba(255, 255, 255, .66); }
.pr-note { font-size: 13px; line-height: 1.7; color: var(--ink-faint); margin-top: 18px; }
.pr-receipt { border: 1px solid var(--ink); background: var(--paper); padding: clamp(26px, 3vw, 42px); margin-top: 26px; }
.pr-receipt__ref { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.4; margin: 10px 0 16px; }
.pr-err { color: #8c2f2f; font-size: 14px; line-height: 1.7; margin-top: 16px; }

/* ---------- 18. Pitch ---------- */
.pr-pitch .pr-sec { padding: clamp(58px, 6.5vw, 100px) 0; }
.pr-pitch__rule { display: block; width: 68px; height: 1px; background: var(--sand); margin-bottom: 24px; }
.pr-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--sand); border: 1px solid var(--sand); margin-top: 36px; }
.pr-kpi > div { background: var(--paper); padding: clamp(20px, 2.2vw, 30px); }
.pr-kpi b { display: block; font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: 1.3; }
.pr-kpi span { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; }
.pr-mod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.pr-mod > div { border: 1px solid var(--sand); background: var(--paper); padding: clamp(24px, 2.6vw, 36px); }
.pr-mod h3 { margin: 0 0 10px; }
.pr-mod p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.pr-mod__price { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.7; color: var(--ink-faint); border-top: 1px solid var(--sand); padding-top: 14px; }
.pr-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.pr-ba > div { padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--sand); }
.pr-ba > div:last-child { background: var(--ink); color: rgba(255, 255, 255, .82); border-color: var(--ink); }
.pr-ba h3 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.4; }
.pr-ba > div:last-child h3 { color: #fff; }
.pr-ba ul { list-style: none; margin: 0; padding: 0; }
.pr-ba li { border-top: 1px solid var(--sand); padding: 12px 0; font-size: 15px; line-height: 1.7; }
.pr-ba > div:last-child li { border-color: rgba(255, 255, 255, .2); }
.pr-tab__h { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; margin: 0 0 16px; }
.pr-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pr-tab th, .pr-tab td {
  text-align: left; vertical-align: top; padding: 13px 18px 13px 0;
  border-top: 1px solid var(--sand); font-size: 14px; line-height: 1.6;
  color: var(--ink-soft); overflow-wrap: break-word;
}
.pr-tab thead th {
  border-top: 0; border-bottom: 1px solid var(--ink);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; line-height: 1.7; color: var(--ink-faint); padding-bottom: 10px;
}
.pr-tab .pr-tab__first { color: var(--ink); font-weight: 500; }
.pr-tab td.pr-tab__num { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); }
.pr-tab thead th.pr-tab__num { font-family: var(--sans); }
.pr-tab__foot { font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); margin: 14px 0 0; max-width: 72ch; }

/* ---------- 19. Footer ---------- */
.pr-foot { background: var(--ink-deep); color: rgba(255, 255, 255, .7); }
body.pr-curtain .pr-foot { position: fixed; inset: auto 0 0; z-index: 0; }
body.pr-curtain { padding-bottom: var(--foot-h); }
.pr-foot__in { padding: clamp(56px, 6vw, 92px) 0 30px; }
.pr-foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 52px); }
.pr-foot h4 { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; line-height: 1.7; color: rgba(255, 255, 255, .45); margin: 0 0 18px; }
.pr-foot ul { list-style: none; margin: 0; padding: 0; }
.pr-foot li { margin-bottom: 11px; font-size: 14.5px; line-height: 1.6; }
.pr-foot a:hover { color: #fff; }
.pr-foot__logo img { width: 190px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.pr-foot__adr { font-size: 14.5px; line-height: 1.8; margin: 22px 0 0; }
.pr-foot__bot {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: clamp(40px, 5vw, 64px); padding-top: 26px;
  font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .5);
}
.insight-brand-link { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .62); transition: color .4s var(--ease); }
.insight-brand-link:hover { color: #fff; }
.insight-mark { display: inline-flex; align-items: center; gap: 9px; }
.insight-mark__text { font-size: 12px; letter-spacing: .06em; line-height: 1.7; }
.insight-mark__text strong { font-weight: 600; }

/* ---------- 20. Rörelse ---------- */
.pr-rev { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.pr-rev.is-in { opacity: 1; transform: none; }
.pr-rev[data-d="1"] { transition-delay: .09s; }
.pr-rev[data-d="2"] { transition-delay: .18s; }
.pr-rev[data-d="3"] { transition-delay: .27s; }
.pr-mask { display: block; overflow: hidden; }
.pr-mask > span { display: block; transform: translateY(105%); transition: transform 1.15s var(--ease); }
.is-in .pr-mask > span, .pr-mask.is-in > span { transform: none; }
.pr-mask:nth-of-type(2) > span { transition-delay: .1s; }
.pr-mask:nth-of-type(3) > span { transition-delay: .2s; }
.pr-hero__media img { transition: transform 2.6s var(--ease); }
.pr-hero.is-in .pr-hero__media img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .pr-rev { opacity: 1; transform: none; }
  .pr-mask > span { transform: none; }
  .pr-hero__media img { transform: none; }
  /* Ingen rotation i heron, första bilden står still */
  .pr-hero__bg { transition: none; }
  .pr-hero__bg.is-on img { animation: none; transform: none; }
}

/* ---------- 21. Mobillager, eget block sist ---------- */
@media (max-width: 1080px) {
  .pr-cards, .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-hoods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-hid__in { grid-template-columns: 72px minmax(0, 1fr) 230px; }
  .pr-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-obj__grid, .pr-art-grid, .pr-book, .pr-agent, .pr-brief__grid, .pr-quote__grid, .pr-duo { grid-template-columns: minmax(0, 1fr); }
  .pr-duo { gap: clamp(26px, 4vw, 44px); }
  .pr-result, .pr-aside-box { position: static; }
  .pr-kpi, .pr-mod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-obj__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* Sju poster i listen ska rymmas innan menyn blir ett ark */
  .pr-nav { gap: 18px; }
  .pr-nav a { font-size: 11.5px; letter-spacing: .05em; }
  /* Kortheron: smalare textpelare, så att texten aldrig når in i motivet */
  .pr-hero--card .pr-hero__in { max-width: 520px; }
  .pr-hero--card h1.pr-display { font-size: 37px; max-width: 14ch; }
  .pr-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-tm { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
}

@media (max-width: 860px) {
  /* --sec är mobilens enda sektionsavstånd, --ease-out tryck och meny */
  :root { --gut: 20px; --lh: 1.6; --sec: 64px; --ease-out: cubic-bezier(.23, 1, .32, 1); }
  body { font-size: 16px; }

  /* Menyn: en lugn helskärm i creme under listen. Listen står kvar överst med
     loggan och krysset, arket tonar in med en liten förflyttning på 320 ms. */
  .pr-nav { display: none; }
  .pr-burger {
    display: block; position: relative; flex: none;
    margin-left: auto; width: 48px; height: 48px; margin-right: -11px;
    cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
  }
  /* Två streck som möts i mitten och vrids till ett riktigt kryss */
  .pr-burger i {
    position: absolute; left: 11px; top: 50%; width: 26px; height: 1.5px; margin-top: -.75px;
    background: var(--ink); border-radius: 1px;
    transition: transform .32s var(--ease-out), background .32s var(--ease-out);
  }
  .pr-burger i:first-of-type { transform: translateY(-4px); }
  .pr-burger i:last-of-type { transform: translateY(4px); }
  .pr-head--over .pr-burger i { background: #fff; }
  body.pr-open .pr-burger i { background: var(--ink); }
  body.pr-open .pr-burger i:first-of-type { transform: rotate(45deg); }
  body.pr-open .pr-burger i:last-of-type { transform: rotate(-45deg); }

  .pr-drawer {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: var(--creme); overflow-y: auto; overscroll-behavior: contain;
    padding: calc(76px + env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right))
      calc(22px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
  }
  .pr-drawer__in {
    display: flex; flex-direction: column; min-height: 100%;
    transform: translateY(-10px); transition: transform .2s var(--ease-out);
  }
  body.pr-open .pr-drawer {
    opacity: 1; visibility: visible;
    transition: opacity .32s var(--ease-out), visibility 0s;
  }
  body.pr-open .pr-drawer__in { transform: none; transition-duration: .32s; }
  .pr-drawer__links { padding-top: 10px; }
  .pr-drawer__links a {
    display: flex; align-items: center; min-height: 50px;
    font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.4;
    color: var(--ink); border-bottom: 1px solid var(--sand-soft);
  }
  .pr-drawer__links a[aria-current="page"] { text-decoration: underline 1px var(--sea); text-underline-offset: 7px; }
  .pr-drawer .pr-btn {
    width: 100%; margin-top: 28px; padding: 15px 14px;
    white-space: nowrap; letter-spacing: .14em;
  }
  .pr-drawer__kontakt {
    margin: auto 0 0; padding-top: 30px;
    display: flex; flex-direction: column; font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  }
  .pr-drawer__kontakt a { display: flex; align-items: center; min-height: 44px; }
  /* Sidan bakom står still. Skrolläget sätts som top av pr.js. */
  body.pr-lock { position: fixed; left: 0; right: 0; overflow: hidden; }
  body.pr-open .pr-head {
    background: var(--creme); box-shadow: 0 1px 0 var(--sand-soft);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition-duration: .32s;
  }
  body.pr-open .pr-head--over .pr-head__logo img { filter: none; }

  /* Listen och loggan: loggan står som varumärke, 150 till 170 px bred,
     och krymper inte när listen blir fast. Säkra ytor på alla sidor. */
  .pr-head {
    padding: calc(14px + env(safe-area-inset-top)) env(safe-area-inset-right) 14px env(safe-area-inset-left);
    background: rgba(247, 242, 233, .94); box-shadow: 0 1px 0 var(--sand);
  }
  .pr-head--over { background: transparent; box-shadow: none; }
  .pr-head__logo img, .pr-head--solid .pr-head__logo img { width: clamp(150px, 42vw, 170px); transform: none; }

  .pr-hero { min-height: 100svh; }
  .pr-hero__in { padding-top: 150px; padding-bottom: 92px; }
  .pr-hero h1 { max-width: none; }
  .pr-hero__sub { font-size: 16px; margin: 20px 0 28px; }
  .pr-hero__scroll { display: none; }
  .pr-hero__cred { position: static; text-align: left; margin-top: 30px; color: rgba(255, 255, 255, .5); }
  .pr-btns .pr-btn { flex: 1 1 100%; }

  .pr-sec { padding: 62px 0; }
  .pr-band__in { gap: 6px 22px; padding: 14px 0; font-size: 10px; }
  .pr-cards, .pr-grid, .pr-cards--2 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pr-hoods, .pr-kpi, .pr-mod, .pr-ba, .pr-compare, .pr-two { grid-template-columns: minmax(0, 1fr); }
  .pr-compare { gap: 1px; }
  .pr-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pr-facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pr-row--link { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pr-row__meta { white-space: normal; }
  /* Tryckytor: allt klickbart mäter minst 44 x 44 utan att texten växer */
  .pr-opt { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .pr-link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .pr-head__logo { min-height: 44px; }
  .pr-field label { display: block; }
  .pr-crumb a, .pr-foot__adr a, .pr-facts a, .pr-hood__more, .insight-brand-link {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center;
  }
  .pr-foot li a { min-width: 44px; }
  .pr-foot__adr { line-height: 1.5; }

  /* Heron: W:et står över rubriken i stället för bredvid den */
  .pr-hero__w {
    position: static; width: 96px; margin: 0 0 22px;
    transform: translateY(10px) scale(.96);
  }
  .pr-hero.is-in .pr-hero__w { transform: none; }

  /* Kortheron på mobil: kortet fyller bredden, höjd 80 svh, rotationen kör.
     Varje bild byter till sin mobila object-position och undertexten blir kortare. */
  .pr-hero--card { padding: 86px 0 34px; }
  .pr-hero__card {
    border-radius: 14px; min-height: 80svh; padding: 34px 20px 38px;
  }
  .pr-hero--card .pr-hero__in { max-width: none; }
  .pr-hero--card h1.pr-display { font-size: 34px; max-width: none; }
  .pr-hero--card .pr-hero__sub { font-size: 16px; margin: 18px 0 26px; max-width: none; }
  .pr-hero--card .pr-hero__w { position: static; width: 56px; margin: 0 0 14px; }
  .pr-hero--card.is-in .pr-hero__w { transform: none; }
  .pr-hero--card .pr-hero__scroll { display: none; }
  /* En kvadratisk bild i ett högt kort visar annars mest tak. --zm och --tpm
     låter den bilden zooma in på rummet i stället. */
  .pr-hero__bg img {
    object-position: var(--op-m, 50% 50%);
    transform-origin: var(--tpm, 50% 50%); --z: var(--zm, 1.004);
  }
  .pr-hero__bg::after {
    background: linear-gradient(to top,
      rgba(8, 20, 36, .96) 0%, rgba(8, 20, 36, .94) 36%, rgba(8, 20, 36, .88) 54%,
      rgba(8, 20, 36, .58) 72%, rgba(8, 20, 36, .18) 88%, rgba(8, 20, 36, 0) 100%);
  }
  .pr-hero__dots { right: 2px; bottom: 0; }
  .pr-hero__sub--wide { display: none; }
  .pr-hero__sub--tight { display: inline; }
  .pr-hero--card .pr-btns .pr-btn { flex: 0 1 auto; }

  .pr-shout { min-height: 0; }
  .pr-shout__in { padding-top: 92px; padding-bottom: 76px; }
  .pr-shout .pr-display { max-width: none; }
  .pr-shout__cred { right: auto; left: var(--gut); bottom: 18px; }

  .pr-kpis__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pr-types { grid-template-columns: minmax(0, 1fr); }
  .pr-tm { grid-template-columns: minmax(0, 1fr); }
  .pr-tm__ph img { aspect-ratio: 4 / 3; }
  /* Punkterna i kortets bildspel är tryckytor på mobil */
  .pr-card__dot { width: 44px; height: 44px; }
  .pr-card__dots { bottom: 0; gap: 0; }

  .pr-hid__in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 0; }
  .pr-hid__ref { order: -1; }
  .pr-hid__n { font-size: 32px; }
  .pr-hid__ph { opacity: 1; filter: none; transform: none; aspect-ratio: 16 / 9; }
  .pr-hid__ph--none { display: none; }

  .pr-hood__body { left: 16px; right: 16px; }

  /* Stadsdelsguiderna på mobil */
  .pr-hero--guide, .pr-hero--plain { min-height: 0; }
  .pr-hero--guide .pr-hero__in { padding-top: 128px; padding-bottom: 60px; }
  .pr-hero--guide h1.pr-display { font-size: 44px; max-width: 13ch; }
  /* På mobil står texten över nästan hela bredden, så pölen kan inte lämna
     högerhalvan fri som på skrivbord. Den blir en bred pöl från vänsterkanten
     plus ett jämnt lager över textbandet, och motivet behåller sitt djup
     genom att lagret är svagast mellan ingressen och knapparna. Alla
     sidhuvuden med foto har texten i full bredd på mobil och får samma pöl. */
  .pr-hero--guide .pr-hero__veil, .pr-page-head--shot .pr-shot::after {
    background:
      radial-gradient(148% 74% at 0% 78%,
        rgba(8, 20, 36, .84) 0%, rgba(8, 20, 36, .77) 40%, rgba(8, 20, 36, .56) 66%,
        rgba(8, 20, 36, .28) 86%, rgba(8, 20, 36, 0) 100%),
      linear-gradient(180deg,
        rgba(8, 20, 36, .63) 0%, rgba(8, 20, 36, .48) 20%, rgba(8, 20, 36, .39) 44%,
        rgba(8, 20, 36, .44) 70%, rgba(8, 20, 36, .68) 100%);
  }
  .pr-hero--plain h1.pr-display { font-size: 52px; }
  .pr-hero--plain .pr-hero__sub { font-size: 16px; margin-top: 22px; }
  .pr-hero--plain .pr-hero__in::before { margin-bottom: 22px; }
  .pr-hero--guide .pr-hero__cred { position: static; text-align: left; margin-top: 26px; }
  .pr-hero--guide .pr-eyebrow a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .pr-price__n { font-size: 36px; }
  .pr-price__ask { font-size: 26px; max-width: none; }
  .pr-hood--plain .pr-hood__ph { aspect-ratio: 16 / 9; }
  .pr-hood--plain .pr-hood__n { font-size: 27px; }
  .pr-duo .pr-facts li { grid-template-columns: minmax(0, 1fr); }

  /* Tabellerna i pitchen staplas, inga sidleds-scroll */
  .pr-tab, .pr-tab tbody, .pr-tab tr, .pr-tab td { display: block; width: auto; }
  .pr-tab thead { display: none; }
  .pr-tab tr { border-top: 1px solid var(--sand); padding: 16px 0; }
  .pr-tab td { border: 0; padding: 0 0 6px; }
  .pr-tab td:last-child { padding-bottom: 0; }
  .pr-tab td::before {
    content: attr(data-l); display: block;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    line-height: 1.7; color: var(--ink-faint);
  }
  .pr-tab .pr-tab__first::before { display: none; }
  .pr-tab .pr-tab__first { font-family: var(--serif); font-size: 21px; line-height: 1.4; margin-bottom: 6px; }
  .pr-tab td.pr-tab__num { font-size: 17px; }
  .pr-gal__thumbs { flex-wrap: wrap; }
  .pr-gal__thumbs .pr-thumb { flex: 1 1 28%; min-height: 60px; }
  .pr-lb__fig { inset: 60px 12px 84px; }
  .pr-obj { padding-top: 96px; }
  .pr-page-head { padding-top: 104px; }
  /* Fotot i sidrubriken på mobil: lägre band, egen bildutsnitt, bildtexten
     under texten med full tryckyta i stället för i hörnet. */
  .pr-page-head--shot { min-height: 56svh; padding: 128px 0 46px; }
  .pr-shot img { object-position: var(--op-m, 50% 50%); }
  .pr-shot__cred {
    position: static; text-align: left; margin-top: 26px;
    color: rgba(255, 255, 255, .6);
  }
  .pr-shot__cred a, .pr-hero__cred a { min-height: 44px; display: inline-flex; align-items: center; }
  .pr-hero__media img { object-position: var(--op-m, 50% 50%); }
  /* Porträttet som liggande 3:2 i full bredd, ansiktet och hunden står kvar,
     så att biografin syns under sidhuvudet på en telefon */
  .pr-page-head--por { padding: 104px 0 40px; }
  .pr-por { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pr-por__f img { aspect-ratio: 3 / 2; object-position: 50% 25%; }
  /* Alla sidhuvuden med foto: bildtexten är ett flexbarn och hamnade bredvid
     ingressen. Kolumn i stället, så att ingressen får hela bredden och
     bildtexten står liten under den. */
  .pr-page-head--shot { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .pr-page-head--shot .pr-shot__cred { margin: 14px var(--gut) 0; font-size: 10px; }
  .pr-quote__t { font-size: 25px; }
  .pr-quote { max-width: none; }
  .pr-agent__img img { aspect-ratio: 4 / 5; }
  .pr-result { padding: 22px 18px; }
  .pr-nav a, .pr-foot li a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Curtain-footern stängs av på mobil, scrollen ska vara stabil */
  body.pr-curtain .pr-foot { position: static; }
  body.pr-curtain { padding-bottom: 0; }
}

@media (max-width: 400px) {
  :root { --gut: 16px; }
  h1.pr-display { font-size: 33px; }
  .pr-result__n { font-size: 42px; }
  .pr-mini { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .pr-mini__img { width: 76px; height: 58px; }
  .pr-gal__thumbs { gap: 8px; }
  .pr-day { min-width: 58px; }
  .pr-days { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- 22. Mobillagret, detaljerna ----------
   Sidmarginal på band och sidfot, karusellen, bokningens datum och tider,
   pitchens sökord, rytm, typografi, tryckkänsla och säkra ytor. */

/* .pr-band__in och .pr-foot__in satte padding: X 0 efter .pr-wrap och nollade
   sidmarginalen. Under 1320 px syns det, på 1440 bär max-width marginalen. */
@media (max-width: 1320px) {
  .pr-band__in, .pr-foot__in { padding-left: var(--gut); padding-right: var(--gut); }
}

/* Pitchens sökord står två gånger i cellen: i ett stycke för skrivbordet och
   en marknad per rad för mobilen. Bara den ena visas åt gången. */
.pr-kwm { display: none; }
/* Referensens tre stycken står också som svepbara kort för mobilen (varv 7) */
.pr-tm__svep { display: none; }

@media (max-width: 860px) {
  .pr-foot__in {
    padding-left: max(var(--gut), env(safe-area-inset-left));
    padding-right: max(var(--gut), env(safe-area-inset-right));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }

  /* Objektraderna blir vågräta karuseller. Native scroll med snäpp, kortet är
     84 % av skärmen så att nästa kikar fram, raden börjar i sidmarginalen.
     Raden äger svepet, kortet visar sin första bild och inga punkter. */
  .pr-cards, .pr-cards--2 {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: min(84vw, 420px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: -6px calc(var(--gut) * -1) 0; padding: 6px var(--gut) 30px;
    scrollbar-width: none;
  }
  .pr-cards::-webkit-scrollbar, .pr-hoods--rad::-webkit-scrollbar { display: none; }
  /* Stadsdelarna på startsidan är samma slags rad: samma karusell */
  .pr-hoods--rad {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: min(84vw, 420px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut);
    scrollbar-width: none;
  }
  .pr-hoods--rad > .pr-hood { scroll-snap-align: start; scroll-snap-stop: always; }
  .pr-hoods--rad > .pr-hood.pr-rev { opacity: 1; transform: none; }

  /* Hemliga objekt: fotot blir en liten kvadrat bredvid namnet i stället för
     ett helbreddsfoto per rad. Åtta rader ryms på två skärmar. */
  .pr-hid__in { grid-template-columns: minmax(0, 1fr) 88px; gap: 4px 18px; align-items: start; padding: 24px 0; }
  .pr-hid__ref { grid-column: 1 / -1; }
  .pr-hid__txt { grid-column: 1; grid-row: 2; }
  .pr-hid__in:has(.pr-hid__ph--none) .pr-hid__txt { grid-column: 1 / -1; }
  .pr-hid__ph { grid-column: 2; grid-row: 2; aspect-ratio: 1 / 1; margin-top: 8px; border-radius: 2px; }
  .pr-hid__cap { display: none; }
  .pr-hid__n { font-size: 28px; }

  /* Sidfoten: tjänster och övrigt bredvid varandra, märke och kontor i full bredd */
  .pr-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .pr-foot__grid > :first-child, .pr-foot__grid > :nth-child(4) { grid-column: 1 / -1; }
  .pr-cards > .pr-card { scroll-snap-align: start; scroll-snap-stop: always; }
  .pr-cards > .pr-card.pr-rev { opacity: 1; transform: none; }
  .pr-cards .pr-card__slide:first-child { opacity: 1; }
  .pr-cards .pr-card__slide ~ .pr-card__slide, .pr-cards .pr-card__dots { display: none; }
  .pr-cards + .pr-btns--end { margin-top: 2px; }
  /* Långa priser (hyra plus övertagande) bryts i stället för att klippas */
  .pr-card__p { white-space: normal; text-align: right; }
  /* Länken i en tjänsterad sträcktes över hela raden och dess understrykning
     blev en andra hårlinje under raden. Den följer orden i stället. */
  .pr-row--link > .pr-link { justify-self: start; }
  /* Galleriets huvudbild är en knapp, och knappens egen padding lade en ram på
     6 px runt fotot som tumnaglarna under inte har */
  .pr-gal__main { padding: 0; }
  /* Citatet i testimonials har margin: 0 i sin stil, så stycket under låg an */
  .pr-tm__txt .pr-quote + p { margin-top: 24px; }

  /* En skala för avstånden mellan sektioner */
  .pr-sec, .pr-pitch .pr-sec, .pr-kpis { padding: var(--sec) 0; }
  .pr-sec__head, .pr-types-sec__h { margin-bottom: 32px; }

  /* Rubrikerna balanseras, ingresserna och brödtexten bryts utan änkor */
  .pr-display, .pr-step__q, .pr-row__t, .pr-art h2, .pr-art h3, .pr-tab__h,
  .pr-compare h3, .pr-ba h3, .pr-quote__t, .pr-hid__n { text-wrap: balance; }
  .pr-lead, .pr-hero__sub, .pr-row__d, .pr-art p, .pr-art li, .pr-obj__desc p,
  .pr-tm__txt > p, .pr-quote__rest p, .pr-hid__d { text-wrap: pretty; }
  /* Radlängden i brödtext hålls på 30 till 42 tecken: 17 px och ett mått på
     18,5 em. På 390 fyller texten nästan bredden, på 430 står den kvar på måttet.
     !important slår de inline-bredder på 60 till 66 ch som skrivbordet bär. */
  .pr-lead, .pr-art, .pr-obj__desc p, .pr-tm__txt > p, .pr-quote__rest p { font-size: 17px; }
  .pr-row__d { font-size: 16px; }
  .pr-lead, .pr-art p, .pr-obj__desc p, .pr-row__d, .pr-tm__txt > p,
  .pr-quote__rest p { max-width: 18.5em !important; }
  /* Listraden bär hårlinjen och står i full bredd. Texten efter strecket på
     30 px får måttet, resten blir luft till höger */
  .pr-art li { padding-right: max(0px, calc(100% - 30px - 18.5em)); }
  /* Signaturen under citatet är en byline, inte brödtext */
  .pr-tm__txt > .pr-quote__by { font-size: 12px; max-width: none !important; }

  /* Bokningens datum: raden börjar i sidmarginalen, går ut över kanten så att
     nästa ruta kikar fram, och snäpper ruta för ruta. Tiderna blir rutor. */
  .pr-days {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px;
  }
  .pr-day {
    flex: 0 0 max(58px, calc((100vw - var(--gut) - 40px) / 5.4));
    min-width: 0; scroll-snap-align: start;
  }
  .pr-times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pr-times .pr-opt {
    min-height: 48px; min-width: 0; padding: 0;
    border: 1px solid var(--sand); background: var(--paper); color: var(--ink);
    font-size: 14.5px; font-variant-numeric: tabular-nums;
  }
  .pr-times .pr-opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--creme); }

  /* Pitchens sökord: en marknad per rad med språkkoden som etikett,
     sökningar och antal sidor bredvid varandra */
  .pr-tab--kw tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .pr-tab--kw td:not(.pr-tab__num) { grid-column: 1 / -1; }
  .pr-tab--kw td + td.pr-tab__num { padding-top: 8px; }
  .pr-kws { display: none; }
  .pr-kwm { display: block; }
  .pr-kw {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 7px 0; border-top: 1px solid var(--sand-soft);
  }
  .pr-kw:first-of-type { border-top: 0; padding-top: 4px; }
  .pr-kw__l {
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
    line-height: 1.6; color: var(--ink-faint);
  }

  /* Tryckkänsla. En kort respons när fingret ligger på, ingen blå blixt,
     och ingenting som hänger kvar efter ett tryck. */
  .pr-btn, .pr-card, .pr-type, .pr-hood, .pr-hid__in, .pr-mini, .pr-row--link, .pr-opt,
  .pr-day, .pr-link, .pr-thumb, .pr-gal__main, .pr-drawer a, .pr-foot a, .pr-head__logo,
  .pr-hood__more, .pr-hero__dot { -webkit-tap-highlight-color: transparent; }
  .pr-btn:active, .pr-type:active, .pr-hood:active, .pr-day:active, .pr-times .pr-opt:active,
  .pr-card:active, .pr-cards > .pr-card:active, .pr-hoods--rad > .pr-hood:active {
    transform: scale(.98); transition: transform .12s var(--ease-out);
  }
  .pr-opt:active, .pr-link:active, .pr-mini:active, .pr-row--link:active, .pr-hid__in:active,
  .pr-drawer a:active, .pr-foot a:active, .pr-hood__more:active, .pr-thumb:active { opacity: .62; }
  .pr-type:active { background: var(--paper); }
}

/* Hover finns inte på touch. Det som tänds av hover släcks, så att ett tryck
   aldrig lämnar en fylld knapp eller ett lyft kort efter sig. */
@media (max-width: 860px) and (hover: none) {
  .pr-btn:hover::before { transform: scaleY(0); }
  .pr-btn:hover { color: var(--ink); }
  .pr-btn--solid:hover { color: var(--creme); }
  .pr-btn--light:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }
  .pr-hero .pr-btn--solid:hover, .pr-hero--card .pr-btn--solid:hover { color: var(--ink); }
  .pr-card:hover, .pr-type:hover { transform: none; }
  .pr-card:hover { box-shadow: 0 1px 2px rgba(16, 35, 60, .04), 0 10px 26px rgba(16, 35, 60, .05); }
  .pr-type:hover { box-shadow: 0 1px 2px rgba(16, 35, 60, .04), 0 8px 20px rgba(16, 35, 60, .04); }
  .pr-card:hover .pr-card__veil { opacity: 0; }
  .pr-row--link:hover > div, .pr-hood:hover .pr-hood__ph img, .pr-mini:hover .pr-mini__img img { transform: none; }
  .pr-opt:not([aria-pressed="true"]):hover { color: var(--ink-soft); border-bottom-color: transparent; }
  .pr-hid__in:hover .pr-hid__n { color: #fff; }
  .pr-hid__in:hover .pr-hid__ref { color: rgba(255, 255, 255, .45); }
  .pr-card:active, .pr-cards > .pr-card:active, .pr-type:active { transform: scale(.98); }
}

/* Reducerad rörelse: menyn och trycken byter läge utan förflyttning */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .pr-drawer__in, body.pr-open .pr-drawer__in { transform: none; }
  .pr-btn:active, .pr-type:active, .pr-hood:active, .pr-day:active, .pr-times .pr-opt:active,
  .pr-card:active, .pr-cards > .pr-card:active, .pr-hoods--rad > .pr-hood:active { transform: none; opacity: .75; }
}

/* På de smalaste telefonerna går brödtexten tillbaka till 16 px, annars
   blir raden kortare än 30 tecken i rutorna med egen luft */
@media (max-width: 360px) {
  .pr-lead, .pr-art, .pr-obj__desc p, .pr-tm__txt > p, .pr-quote__rest p { font-size: 16px; }
  .pr-row__d { font-size: 15px; }
}

/* ---------- 23. Mobillagret, varv 7 ----------
   Kortare startsida med samma svepbara rader som objekten, läsbara band och
   bildtexter, tätare typrader, hela titlar, radlängd, objektlistan och guidernas
   Nearby. Allt under 860 px, skrivbordet rörs inte. */
@media (max-width: 860px) {
  /* Briefens och filtrets val står på en vågrät rad som sveps, sista valet
     kikar fram vid kanten. Understrykningen på valt val står kvar. */
  .pr-brief .pr-opts, .pr-filter .pr-opts {
    flex-wrap: nowrap; gap: 0 22px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gut);
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut);
    scrollbar-width: none;
  }
  .pr-brief .pr-opts::-webkit-scrollbar, .pr-filter .pr-opts::-webkit-scrollbar { display: none; }
  .pr-brief .pr-opt, .pr-filter .pr-opt { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .pr-brief .pr-step { padding: 22px 0 14px; }
  .pr-brief .pr-step__q { margin-bottom: 8px; }
  .pr-filter__row { display: block; padding-top: 12px; }
  .pr-filter__lab { display: block; width: auto; }

  /* Stegen och tjänsterna blir svepbara kort, som objektraderna i varv 6.
     Korten i en rad är lika höga, länken står längst ner i kortet. */
  .pr-rows--svep {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 420px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px;
    scrollbar-width: none;
  }
  .pr-rows--svep::-webkit-scrollbar, .pr-hids::-webkit-scrollbar { display: none; }
  .pr-rows--svep > .pr-row, .pr-rows--svep > .pr-row:last-child {
    display: flex; flex-direction: column; gap: 14px;
    border: 1px solid var(--sand); border-radius: 10px; background: #fff;
    padding: 24px 20px 22px; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pr-sec--paper .pr-rows--svep > .pr-row { background: var(--creme); }
  .pr-rows--svep > .pr-row.pr-rev { opacity: 1; transform: none; }
  .pr-rows--svep .pr-row__d { max-width: none !important; }
  .pr-rows--svep > .pr-row--link > .pr-link { margin-top: auto; align-self: flex-start; }
  .pr-rows--svep + .pr-btns { margin-top: 26px !important; }

  /* Hemliga objekt: en svepbar rad av mörka kort. Referens och namn överst med
     fotot som liten kvadrat till höger, beskrivningen i kortets fulla bredd. */
  .pr-hids {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 420px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px;
    scrollbar-width: none;
  }
  .pr-hid, .pr-hid:last-child {
    border: 1px solid rgba(255, 255, 255, .17); border-radius: 10px;
    background: rgba(255, 255, 255, .03); scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pr-hid.pr-rev { opacity: 1; transform: none; }
  .pr-hid__in {
    grid-template-columns: minmax(0, 1fr) 72px; grid-template-rows: auto auto 1fr;
    gap: 0 16px; height: 100%; padding: 22px 20px 24px;
  }
  .pr-hid__txt { display: contents; }
  .pr-hid__ref { grid-column: 1; grid-row: 1; }
  .pr-hid__n { grid-column: 1; grid-row: 2; font-size: 28px; }
  .pr-hid__d { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
  .pr-hid__ph { grid-column: 2; grid-row: 1 / 3; margin-top: 4px; align-self: start; }
  .pr-hid__in:has(.pr-hid__ph--none) .pr-hid__n { grid-column: 1 / -1; }
  .pr-hids + .pr-btns { margin-top: 32px !important; }

  /* Also in Palma på samma vågräta rad som briefens val */
  .pr-hood__list {
    flex-wrap: nowrap; gap: 0 24px; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 4px calc(var(--gut) * -1) 0; padding: 0 var(--gut); scrollbar-width: none;
  }
  .pr-hood__list::-webkit-scrollbar { display: none; }
  .pr-hood__more { flex: none; white-space: nowrap; }

  /* Referensens tre stycken som svepbara citatkort under det stora citatet */
  .pr-tm__p { display: none; }
  .pr-tm__svep {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 420px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: 24px calc(var(--gut) * -1) 0; padding: 2px var(--gut) 6px;
    scrollbar-width: none;
  }
  .pr-tm__svep::-webkit-scrollbar { display: none; }
  .pr-tm__kort {
    border: 1px solid var(--sand); border-radius: 10px; background: var(--creme);
    padding: 22px 20px; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pr-tm__kort p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }

  /* Köparombudets två citat blir samma slags svepbara kort som referensen,
     och fakta står i två spalter med kontoret i full bredd */
  .pr-agent .pr-body {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 420px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin: 22px calc(var(--gut) * -1) 0; padding: 2px var(--gut) 6px;
    scrollbar-width: none;
  }
  .pr-agent .pr-body::-webkit-scrollbar { display: none; }
  .pr-agent .pr-body.pr-rev { opacity: 1; transform: none; }
  .pr-agent .pr-body > .pr-lead {
    margin: 0 !important; max-width: none !important;
    border: 1px solid var(--sand); border-radius: 10px; background: var(--paper);
    padding: 22px 20px; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pr-agent .pr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .pr-agent .pr-facts li:last-child { grid-column: 1 / -1; }

  /* Köparombudets porträtt liggande som på about, testimonialfotot lägre */
  .pr-agent__img img { aspect-ratio: 3 / 2; object-position: 50% 25%; }
  .pr-tm__ph img { aspect-ratio: 16 / 9; }

  /* Punkt 2. Bandet och bildtexten under sidhuvudet läses utan att ta över */
  .pr-band__in { font-size: 11.5px; letter-spacing: .14em; gap: 6px 20px; }
  .pr-page-head--shot .pr-shot__cred { font-size: 11.5px; letter-spacing: .1em; }

  /* Punkt 3. Explore by type i två spalter, mindre bild, tryckyta kvar */
  .pr-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pr-type { min-height: 60px; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 8px; }
  .pr-type__ph { width: 42px; height: 42px; }
  /* Antalet följer sista ordet på dess baslinje, också när namnet bryts */
  .pr-type__txt { display: block; }
  .pr-type__n { font-size: 14.5px; line-height: 1.4; }
  .pr-type__c { margin-left: 7px; }

  /* Punkt 4. Titeln i briefens träffar och i objektraderna på upp till tre rader */
  .pr-mini__t, .pr-cards .pr-card__t a { -webkit-line-clamp: 3; line-clamp: 3; }

  /* Punkt 5. Radlängden: fulla rader på 30 till 42 tecken */
  .pr-lead, .pr-art p, .pr-obj__desc p, .pr-row__d, .pr-tm__txt > p,
  .pr-quote__rest p { max-width: 17.6em !important; }
  .pr-art li { padding-right: max(0px, calc(100% - 30px - 17.6em)); }
  .pr-hero__sub, .pr-hero--card .pr-hero__sub { max-width: 19em; }
  /* Textkorten i svepraderna: bredden håller raden inom måttet också på 430 */
  .pr-rows--svep, .pr-tm__svep, .pr-agent .pr-body { grid-auto-columns: min(84vw, 336px); }

  /* Punkt 6. Objektlistan följer sektionsskalan. Korten står med bild och text
     sida vid sida: fotot behåller höjden, titeln läses i 16,5 px på upp till
     tre rader, och listan blir hälften så lång som med ett kort per skärm. */
  .pr-sec--lista { padding-top: var(--sec) !important; }
  .pr-sec--lista .pr-grid { gap: 14px; }
  .pr-sec--lista .pr-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); border-radius: 8px; }
  .pr-sec--lista .pr-card__media { aspect-ratio: auto; min-height: 196px; }
  .pr-sec--lista .pr-card__body { padding: 14px 14px 15px; }
  .pr-sec--lista .pr-card__area { letter-spacing: .14em; }
  .pr-sec--lista .pr-card__t { font-size: 16.5px; margin: 5px 0 10px; }
  .pr-sec--lista .pr-card__t a { -webkit-line-clamp: 3; line-clamp: 3; }
  .pr-sec--lista .pr-card__row { flex-direction: column-reverse; align-items: flex-start; gap: 0; padding-top: 9px; }
  .pr-sec--lista .pr-card__p { font-size: 15px; text-align: left; }
  .pr-sec--lista .pr-card__facts { font-size: 12.5px; margin-top: 4px; }
  .pr-sec--lista .pr-card__tag { left: 8px; right: auto; top: 8px; padding: 4px 8px; font-size: 10px; letter-spacing: .12em; }
  .pr-sec--lista .pr-card__quiet { font-size: 10.5px; letter-spacing: .12em; }

  /* Punkt 7. Guidernas Nearby får luft under knapparna ovanför */
  .pr-sec--nara { padding-top: var(--sec) !important; }

  /* Varv 7b. Det kompakta kortets foto är 120 till 163 px brett, tre prickar
     på 44 px ryms inte på 320. Prickarna tas bort och bilden byts med svep
     i fotot, som i karusellerna. Guidernas bildtext får samma storlek som
     bandet. */
  .pr-sec--lista .pr-card__dots { display: none; }
  .pr-hero--guide .pr-hero__cred { font-size: 11.5px; }
}

/* På 320 blir textkorten lite bredare med mindre luft, så att raden inte
   kortas under 30 tecken */
@media (max-width: 360px) {
  .pr-rows--svep, .pr-tm__svep, .pr-agent .pr-body { grid-auto-columns: 86vw; gap: 12px; }
  .pr-rows--svep > .pr-row, .pr-rows--svep > .pr-row:last-child,
  .pr-tm__kort, .pr-agent .pr-body > .pr-lead { padding-left: 16px; padding-right: 16px; }
  .pr-tm__kort p, .pr-agent .pr-body > .pr-lead { font-size: 15px; }
  /* Typraderna får inte plats två i bredd med namn och antal, en spalt här */
  .pr-types { grid-template-columns: minmax(0, 1fr); }
}