/* H.I Rörteknik AB — generated from the approved Claude Design export.
   Rules 1-N are the export's own, serialised in cascade order: the design
   runtime injects its :hover/:focus rules through insertRule, so they live
   only in the CSSOM and a plain HTML dump would lose every one of them. */
@font-face { font-family: Archivo; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/8f4cf083-cac4-49ad-add8-e144626bd328.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/d76eddc1-cb5c-43ba-9e54-d712595ceab6.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/cda2d67b-da32-4f36-b395-e370122a9641.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/8f4cf083-cac4-49ad-add8-e144626bd328.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/d76eddc1-cb5c-43ba-9e54-d712595ceab6.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/cda2d67b-da32-4f36-b395-e370122a9641.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/8f4cf083-cac4-49ad-add8-e144626bd328.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/d76eddc1-cb5c-43ba-9e54-d712595ceab6.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/cda2d67b-da32-4f36-b395-e370122a9641.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/8f4cf083-cac4-49ad-add8-e144626bd328.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/d76eddc1-cb5c-43ba-9e54-d712595ceab6.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/cda2d67b-da32-4f36-b395-e370122a9641.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/6a61dec4-116d-40a7-b9a6-d29dbdd4d2bd.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/587f13b9-295a-4c19-be05-3963d4f3fa3e.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/96834014-5247-446a-b3e0-b7f51a794e66.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/1fad9432-04ef-491b-a54e-3667a48725b2.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/318f6f4b-0a2c-4daf-b928-c6b452a85bf9.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/3300a026-f873-48fb-bf02-d16632a8e00c.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/60e77dcb-10ca-4f10-8892-65d1d9247a9e.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/fa99e06b-1b14-49be-9368-2ae9c4799086.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/3e68010a-75c5-46f7-95bc-e82b68630e10.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/80db1683-585e-468a-9b6b-fa51f28014a9.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/f8ae71e7-0c6f-4553-9cf4-d31d1b849867.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/c3a1d8da-592f-4ec2-b688-47731548e95c.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/55c7668d-d8d3-4939-be67-8720df36abf4.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/f8ae71e7-0c6f-4553-9cf4-d31d1b849867.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/c3a1d8da-592f-4ec2-b688-47731548e95c.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/55c7668d-d8d3-4939-be67-8720df36abf4.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/f8ae71e7-0c6f-4553-9cf4-d31d1b849867.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/c3a1d8da-592f-4ec2-b688-47731548e95c.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/55c7668d-d8d3-4939-be67-8720df36abf4.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0px; background: rgb(244, 245, 247); color: rgb(28, 26, 24); font-family: "Public Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0px; }
ul, ol { padding: 0px; list-style: none; }
a { color: rgb(169, 85, 47); text-decoration: none; }
a:hover { color: rgb(138, 68, 38); }
input, select, textarea, button { font: inherit; color: inherit; }
@keyframes pulseDot { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}
body { margin: 0px; font-family: "Public Sans", system-ui, sans-serif; color: rgb(28, 26, 24); background: rgb(244, 245, 247); }
a { color: rgb(169, 85, 47); }
a:hover { color: rgb(138, 69, 38); }
input[type="range"] { accent-color: rgb(219, 133, 101); }

/* hover and focus states, lifted out of the runtime's stylesheet */
.hv1ac21fm:hover { background: rgb(156, 79, 46) !important; color: rgb(255, 255, 255) !important; }
.hviv59ba:hover { border-color: rgb(219, 133, 101) !important; }
.hv16m0gf4:hover { background: rgb(234, 230, 226) !important; color: rgb(28, 26, 24) !important; }
.hv1ou8x46:hover { background: rgb(244, 245, 247) !important; color: rgb(28, 26, 24) !important; }
.hvixjte6:hover { color: rgb(138, 69, 38) !important; }
.hv1lxaty5:hover { border-color: rgb(219, 133, 101) !important; color: rgb(169, 85, 47) !important; }
.hv1po6mqj:hover { border-color: rgb(219, 133, 101) !important; color: rgb(28, 26, 24) !important; }
.hv170by1w:hover { border-color: rgb(219, 133, 101) !important; box-shadow: rgba(33, 31, 29, 0.8) 0px 22px 40px -34px !important; }
.hv1g8zknw:hover { border-color: rgb(219, 133, 101) !important; color: rgb(28, 26, 24) !important; box-shadow: rgba(33, 31, 29, 0.8) 0px 20px 36px -32px !important; }
.hvbyjx6a:hover { opacity: 0.88 !important; }
.hvn7wxw1:hover { background: rgb(234, 230, 226) !important; color: rgb(33, 31, 29) !important; }
.hvs45lcs:hover { border-color: rgb(255, 255, 255) !important; color: rgb(255, 255, 255) !important; }
.hvolbt6y:hover { background: rgb(46, 42, 39) !important; color: rgb(255, 255, 255) !important; }
.hv16lzjks:focus { outline: none !important; border-color: rgb(219, 133, 101) !important; box-shadow: rgba(219, 133, 101, 0.3) 0px 0px 0px 3px !important; }
.hv12nsaid:hover { background: rgb(156, 79, 46) !important; }
.hv543k7k:hover { color: rgb(169, 85, 47) !important; }
.hvznzq1w:hover { border-color: rgb(219, 133, 101) !important; color: rgb(28, 26, 24) !important; box-shadow: rgba(33, 31, 29, 0.9) 0px 22px 40px -34px !important; }
.hvmgin3s:hover { border-color: rgb(219, 133, 101) !important; color: rgb(28, 26, 24) !important; box-shadow: rgba(33, 31, 29, 0.9) 0px 24px 44px -36px !important; }
.hv1d46bj8:hover { color: rgb(255, 255, 255) !important; }
.hvn5rxnp:hover { border-color: rgb(219, 133, 101) !important; color: rgb(255, 255, 255) !important; }
.hv133rm3a:hover { background: rgb(237, 231, 227) !important; color: rgb(33, 31, 29) !important; }

/* The export renders the desktop and the phone header as two mutually
   exclusive branches of window.innerWidth, so a snapshot only ever holds one.
   The static page ships both and the breakpoint — the export's own 1080px —
   picks. Inline styles carry display:flex, hence the !important. */
.hi-narrow { display: none !important; }
@media (max-width: 1079px) {
  .hi-wide { display: none !important; }
  .hi-narrow { display: flex !important; }
}

/* 🔴 THE FOUR REVIEW CARDS WERE CUT MID-WORD ON EVERY PHONE, AND THE 384px
   LAYER COULD NOT SEE THEM. That layer selects grids by their minmax(Npx);
   this strip is a FIXED repeat(4, minmax(0px, 1fr)), so no selector matched
   and nothing failed — the client reported it («ser inte klart eller
   proffsigt ut»), no gate did. Measured on the built page: each card is
   overflow:hidden, and «116 omdömen» needs 61px while the track gives 28px
   at 360 and 36px at 390, so the label is clipped to «116 omdöm».
   ⚠️ The container width is NOT monotonic with the viewport — 552px at 600,
   then 345px at 768 — so no breakpoint can be reasoned out from the viewport
   alone; it was measured at eleven widths. Two columns below 1080 covers
   every measured failure, and 1024/1100 pass by a single pixel, which is not
   a margin worth trusting. Hence the second rule: the label may wrap at any
   width, so a thin track costs a line break rather than a severed word. */
@media (max-width: 1079px) {
  [style*="repeat(4, minmax(0px, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }
}
[style*="repeat(4, minmax(0px, 1fr))"] [style*="color: rgb(122, 113, 104)"] {
  white-space: normal !important;
}

/* The folded long paragraph and its toggle — set by app.js on phones only
   (see longreads()). Both attributes are written by script, so neither
   selector can match with JS off and the paragraph stays whole. */
[data-hi-clamp="on"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.hi-longread-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: rgb(169, 85, 47);
  cursor: pointer;
}
.hi-longread-toggle::after { content: " \2192"; }
.hi-longread-toggle[aria-expanded="true"]::after { content: ""; }

/* 🔴 ON A PHONE THE HOME HERO HAD NO PICTURE AT ALL. The hero is a two-column
   grid: trust bar + headline on the left, the photo carousel on the right. At
   one column the carousel stacks LAST, so it landed ~890px down and the first
   screen was grey, a wall of type and two buttons — the client's words were
   «there's no hero image on mobile».
   The photo is brought to the top and the trust bar pulled onto it, so the
   cards read as floating on the picture rather than sitting above a blank
   field. Nothing is hidden and no new bytes are shipped: it is the carousel
   that already existed, moved.
   ⚠️ SCOPED WITH :has() ON PURPOSE. Three other pages — badrumsrenovering,
   koksrenovering, varmesystem — use this very grid for a hero whose second
   column is NOT a picture, so a bare nth-child rule would have reordered
   their content too. Only the home hero carries aspect-ratio: 4 / 4.4.
   ⚠️ 737px, NOT the 767px the rest of the phone layer uses, and the number
   is algebraic rather than round: two tracks need 330 + 330 + gap, the gap is
   4vw and the grid is viewport − 48, so two columns fit from 0.96w ≥ 708,
   i.e. w ≥ 738. Measured to confirm: one column through 730, two from 740. At 767
   the first draft of this rule left the hero two-up and merely swapped the
   sides, putting the picture left and the trust bar right. The reorder is
   only correct once the grid is single-column. */
@media (max-width: 737px) {
  /* row-gap, NEVER gap: column-gap decides whether two 330px tracks fit, so
     zeroing it moved the collapse point under our own feet and put the hero
     back into two flipped columns. */
  [style*="minmax(330px, 1fr)"]:has([style*="aspect-ratio: 4 / 4.4"]) {
    row-gap: 0 !important;
  }
  [style*="minmax(330px, 1fr)"]:has([style*="aspect-ratio: 4 / 4.4"]) > div:nth-child(2) {
    order: -1;
  }
  [style*="minmax(330px, 1fr)"]:has([style*="aspect-ratio: 4 / 4.4"]) > div:nth-child(1) {
    margin-top: -54px;
    position: relative;
    z-index: 1;
  }
  [style*="aspect-ratio: 4 / 4.4"] {
    aspect-ratio: 4 / 3.1 !important;
    border-radius: 20px !important;
  }
  /* the slide caption and dots sit at bottom:16px, which is exactly the strip
     the trust card now covers — lift them clear rather than lose the caption */
  [style*="aspect-ratio: 4 / 4.4"] [style*="bottom: 16px"] {
    bottom: 74px !important;
  }
}
/* must outrank .hi-narrow above: the phone nav panel and the sticky CTA are
   closed until script opens them */
[hidden] { display: none !important; }

/* The export mounted the page inside #dc-root > .sc-host. Those wrappers are
   kept, with the runtime's own rules: measured, dropping them changes how the
   rounded corners inside the page antialias. */
html, body { height: 100%; }
#dc-root, #dc-root > .sc-host { height: 100%; }
.sc-host { position: relative; }

/* the click-to-load map facade's button, in the export's primary colours */
[data-hi="map-load"]:hover { background: #935122; }

/* 🔴 NO SIDEWAYS SCROLL ON A SMALL PHONE — WCAG 2.2 §1.4.10, and
   scripts/site-mobile-fit.mjs, which asserts it at 320 and 360.
   The phone header's row is logo + wordmark + call button + menu button, and
   the logo link is flex: 0 0 auto, so the row's intrinsic width is a fixed
   381px at EVERY viewport. Below 381px the whole document scrolls sideways.
   The export does exactly the same; this is the design's defect reproduced,
   and 320px phones are still 2% of Swedish mobile traffic.
   The wordmark is what has to give. At 320px the row has 288px to spend and
   the call button alone is 133 of it — for a plumber that button IS the page,
   so shrinking the name instead only turns it into "H.I Rö…". The 36px mark
   still carries the brand and still links home.
   384px, not 390: the parity capture runs at 390 and must never see this. */
@media (max-width: 384px) {
  .hi-narrow { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
  .hi-narrow > a:first-child > span { display: none !important; }

  /* 🔴 THE SECOND HALF OF THE SAME DEFECT, AND THE LARGER ONE.
     Every card grid in the export is repeat(auto-fit, minmax(Npx, 1fr)), with
     N up to 330. A grid track NEVER shrinks below its own minimum, so on a
     320px phone a 300px track inside a section with 24px padding needs 348px
     and the whole document scrolls sideways. It was not the header that made
     the page 1.2x too wide; it was thirteen of these.
     384px, like the header above, and for the same reason: measured, the
     narrowest grid stops fitting at 378px and the header at 381px, so every
     width the design was actually drawn for — 390 and up — keeps the export's
     own track sizing, down to the pixel. A first attempt used
     minmax(min(100%, N), 1fr) with no media query at all, on the reasoning
     that it is a no-op whenever the container can hold N. It is not: on
     /tjanster at 390px a nested CTA grid was overflowing its own card padding
     by 12px in the export, the rule corrected it, and the parity run caught
     the correction as a 9 406px difference. Fixing the design's padding is a
     change to the design, and this branch does not make those.
     The selectors read the inline style because that is where the export puts
     these values; the list is derived from the pages themselves, so a grid
     added later cannot quietly miss out. */
  [style*="minmax(140px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important; }
  [style*="minmax(150px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important; }
  [style*="minmax(200px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important; }
  [style*="minmax(210px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important; }
  [style*="minmax(220px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
  [style*="minmax(230px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important; }
  [style*="minmax(240px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
  [style*="minmax(260px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
  [style*="minmax(270px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important; }
  [style*="minmax(280px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
  [style*="minmax(300px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; }
  [style*="minmax(320px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }
  [style*="minmax(330px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important; }

  /* And the last 3px, which is one word. The h1 sets
     font-size: clamp(38px, 5.2vw, 62px), so at 320px it renders at its 38px
     floor and "Rörmokartjänster" is a single unbreakable 275px word in a 272px
     box. Swedish compounds do this constantly and the export never gave the
     text permission to break. */
  h1, h2, h3, h4, h5, p, li, dt, dd, blockquote, figcaption { overflow-wrap: break-word; }
}