@charset "UTF-8";

/* ==================================================================
   Heyrnarstöðin — 2026 design refresh.

   Loaded AFTER custom.css by templates/shaper_helixultimate/index.php, so
   everything here sits on top of the Floox parity layer without editing it.
   custom.css stays the record of "what the old site looked like"; this file
   is the record of "what we changed on purpose". Deleting this one file (and
   its loader line) reverts the site to exact parity.


   THE BRIEF
   ---------
   Heyrnarstöðin is a hearing clinic on the third floor of Kringlan. Its
   visitors are people in their 50s–80s who have started asking others to
   repeat themselves, plus the adult children doing the research for a parent.
   The page has one job: get that person to book the free hearing test, by the
   form or by phone.

   That audience is the design direction, not a checklist bolted on afterwards.
   People who come here because one sense is failing are frequently working
   with less of another. So the type is large, the contrast is high, the fields
   are wide and the targets are big — and that IS the look. Nothing on this
   site is small.


   THE PALETTE came off the client's own artwork
   ---------------------------------------------
   The hero illustrations (images/2026/01/02/kona-a-blau_01_2200x865.jpg and
   friends) are commissioned paper-cut pieces in deep indigo, terracotta and
   sand — a genuinely good palette that the old site used for 600px at the top
   of the page and then abandoned for grey-on-white. Averaging the flat areas
   of that file gives #27355B, #9D4B36 and #AB876D, and those are the values
   below. The site now looks like its own pictures.

   The brand green #3ab54a is unchanged and still the accent. It is only 2.7:1
   against white, though, so it can never carry white text: --hs-green-deep is
   the same hue taken to 5.4:1 and that is what fills buttons.


   THE TYPE was chosen for the audience
   ------------------------------------
   Raleway 500 / Playfair Display 400 out; Atkinson Hyperlegible Next and
   Newsreader in. Atkinson Hyperlegible was drawn by the Braille Institute for
   readers with low vision — differentiated I/l/1, open apertures, large
   x-height — which is an unusually literal fit for a clinic whose visitors
   are here about sensory loss. Newsreader carries the headings: a warm text
   serif with far lower stroke contrast than Playfair, so it stays legible at
   the sizes Playfair started to thin out at. Both cover ð þ æ ö á í ó ú ý.


   SPECIFICITY: read this before adding a rule
   -------------------------------------------
   Joomla emits every <link rel=stylesheet> BEFORE every inline <style>, so
   this file is overridden by, not overriding, the template's font and colour
   declarations — which are bare element selectors:

       <style>body{font-family:'Raleway';font-size:16px;font-weight:500}</style>
       <style>h1{font-family:'Raleway';font-size:60px;font-weight:600}</style>
       <style>:root{--sppb-text-color:#484848; …}</style>

   A plain `body { }` or `h1 { }` here loses on source order at equal
   specificity. Everything contending with those is therefore written one step
   heavier — `html body`, `body h1`, `html:root` — which is why the selectors
   below look slightly odd. That is deliberate; do not "simplify" them.

   !important appears in exactly two places, both unavoidable:
     - the --sppb-* custom properties (see above);
     - the contact form, where SP Page Builder emits per-addon rules scoped to
       two generated ids that are regenerated whenever the addon is rebuilt.
   ================================================================== */


/* 1. Tokens
   --------- */

html:root {
	/* --- ink: the hero illustration's indigo, taken to text contrast --- */
	--hs-ink: #1E2A47;          /* 14.1:1 on white — body copy and headings */
	--hs-ink-soft: #5A6480;     /*  5.9:1 on white — captions, muted labels */
	--hs-indigo: #27355B;       /* sampled from the artwork — the panel colour */
	--hs-indigo-lift: #33436D;  /* one step up, for fields sitting on indigo */

	--hs-line: #DEE3EE;         /* indigo-tinted hairline, not neutral grey */

	/* --- action --- */
	--hs-green: #3AB54A;        /* the brand green, unchanged */
	--hs-green-deep: #1F7A2E;   /*  5.4:1 on white — anything carrying text */
	--hs-green-dark: #17601F;   /* pressed / hover */

	/* The artwork's terracotta #9D4B36 is in the file twice — as the panel's
	   lower-left wash (§9) and, lightened to #E8836C for legibility on that
	   panel, as the form's error state. Both need it inside rgba(), so it is
	   written out at both sites rather than held here. */

	/* --- type --- */
	--hs-display: "Newsreader", Georgia, "Times New Roman", serif;
	--hs-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible",
	           -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Fluid scale. The floor is set for a 320px phone, the ceiling for a
	   1440px desktop; the middle term is what interpolates between them. */
	/* The hero title's size is not here: SP Page Builder owns it, including its
	   responsive steps. See §6. */
	--hs-fs-h1:   clamp(2rem, 1.45rem + 2.3vw, 3.25rem);     /* 32 → 52 */
	--hs-fs-h2:   clamp(1.625rem, 1.3rem + 1.35vw, 2.375rem);/* 26 → 38 */
	--hs-fs-h3:   clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);/* 21 → 28 */
	--hs-fs-body: clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem); /* 17 → 19 */
	--hs-fs-ui:   1.0625rem;                                  /* 17 — nav, buttons */
	--hs-fs-small: 0.9375rem;                                 /* 15 — captions */

	/* Prose measure. Icelandic compounds run long ("Viðgerðarþjónusta"), so
	   this is a touch wider than the usual 65ch. */
	--hs-measure: 68ch;

	/* --- depth --- */
	--hs-shadow-header: 0 1px 2px rgba(30, 42, 71, .06), 0 8px 28px rgba(30, 42, 71, .09);
	--hs-shadow-card: 0 2px 4px rgba(30, 42, 71, .05), 0 18px 40px rgba(30, 42, 71, .14);
	--hs-shadow-panel: 0 4px 10px rgba(30, 42, 71, .10), 0 30px 60px rgba(30, 42, 71, .22);
	--hs-shadow-btn: 0 2px 6px rgba(30, 42, 71, .16);

	--hs-radius: 14px;
	--hs-radius-lg: 24px;

	--hs-ease: cubic-bezier(.4, 0, .2, 1);
	--hs-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* --- SP Page Builder theme variables ---
	   Emitted by the builder in an inline <style> AFTER this file, so a plain
	   `:root { --sppb-text-color: … }` would lose on source order even at
	   matching specificity. Custom properties honour !important; this is the
	   one mechanism available short of editing the template parameters in the
	   database, which would not be under version control. */
	--sppb-text-color: var(--hs-ink) !important;
	--sppb-link-color: var(--hs-green-deep) !important;
	--sppb-link-hover-color: var(--hs-green-dark) !important;
	--sppb-menu-text-color: var(--hs-ink-soft) !important;
	--sppb-menu-text-hover-color: var(--hs-ink) !important;
	--sppb-menu-text-active-color: var(--hs-ink) !important;
	--sppb-menu-dropdown-text-color: var(--hs-ink-soft) !important;
	--sppb-menu-dropdown-text-hover-color: var(--hs-ink) !important;
	--sppb-footer-bg-color: var(--hs-ink) !important;
	--sppb-footer-text-color: #C6CEDF !important;
	--sppb-footer-link-color: #FFFFFF !important;
	--sppb-footer-link-hover-color: #FFFFFF !important;
}

::selection {
	background: rgba(58, 181, 74, .22);
	color: var(--hs-ink);
}


/* 2. Base typography
   ------------------
   The template declares body/h1–h5 as bare element selectors in a later
   <style>, so each of these carries one extra step of specificity to win.
   See the header comment. */

html body {
	font-family: var(--hs-text);
	font-size: var(--hs-fs-body);
	font-weight: 400;
	line-height: 1.65;
	color: var(--hs-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .sppb-addon-title,
body .sppb-sp-slider-title {
	font-family: var(--hs-display);
	font-weight: 500;
	color: var(--hs-ink);
	letter-spacing: -0.015em;
	line-height: 1.15;
	font-optical-sizing: auto;
	text-wrap: balance;
}

body h1 { font-size: var(--hs-fs-h1); }
body h2, body .sppb-addon-title { font-size: var(--hs-fs-h2); }
body h3 { font-size: var(--hs-fs-h3); }
body h4 { font-size: 1.1875rem; line-height: 1.3; }
body h5, body h6 { font-size: 1.0625rem; line-height: 1.35; }

/* Headings inside running copy need air above them and very little below —
   the gap should bind the heading to the text it introduces. */
#sp-main-body h2,
#sp-main-body h3,
#sp-main-body .sppb-addon-title {
	margin-top: 0;
	margin-bottom: .6em;
}

/* Every SP Page Builder heading also carries the addon's own typography as an
   id-scoped rule — `#sppb-addon-1698313256826 .sppb-addon-title { font-family:
   Raleway; color:#484848 }` — emitted after this file, so the family and
   colour need the flag. The SIZE is left to the builder: it is a real per-block
   decision made in the editor, and the addons set responsive steps with it.

   Scoped to #sp-main-body so a heading deliberately coloured for a dark
   section elsewhere in the template is not caught by it. */
#sp-main-body .sppb-addon-title {
	font-family: var(--hs-display) !important;
	color: var(--hs-ink) !important;
	font-weight: 500 !important;
}

#sp-main-body p { margin-bottom: 1.15em; }
#sp-main-body p:last-child { margin-bottom: 0; }

/* The hero title is authored as three <p> elements inside the <h1>, and the
   slider lives inside #sp-main-body, so the paragraph rhythm above applies to
   it too.

   The line-height has to be set here rather than on the <h1>: SP Page Builder
   writes the title's size and leading into an id-scoped rule
       #sp-slider-inner-item-1757114853482-num-0-key { font-size:74px; line-height:52px }
   which no class selector can outrank — and 52px of leading on 74px type means
   the lines overlap. On the old site the paragraph margins happened to hide
   that. Targeting the <p> directly reaches past the inherited value without
   touching the font-size, which stays owned by the slider's own settings
   (including its responsive steps). */
#sp-main-body .sppb-sp-slider-title p {
	margin: 0;
	line-height: 1.06;
}

#sp-main-body .sppb-sp-slider-text p {
	margin: 0;
	line-height: inherit;
}

body strong, body b { font-weight: 700; }

/* Prose measure. The "Um okkur" copy was running the full 1070px of its
   column — roughly 130 characters a line, about twice a comfortable read.
   Applied to the addon content rather than to <p> so lists and headings stay
   on the same edge as the paragraphs. */
#sp-main-body .sppb-addon-text-block .sppb-addon-content,
#sp-main-body .sppb-addon-header .sppb-addon-content,
#sp-main-body .sppb-addon-raw-html {
	max-width: var(--hs-measure);
}

/* Lists on this site are hand-typed with "•" and "1 )" inside <p>, so there
   is no <ul> to style. Give those paragraphs a hanging indent instead so the
   bullets line up and wrapped lines clear them. */


/* 3. Accessible focus and reduced motion
   --------------------------------------
   Helix/Bootstrap leave most controls on the UA outline, which the pill-shaped
   fields and buttons swallow visually. :focus-visible keeps this off mouse
   clicks so it never reads as a stray border. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.sppb-btn:focus-visible,
.sp-megamenu-parent a:focus-visible,
#offcanvas-toggler:focus-visible {
	outline: 3px solid var(--hs-green-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

/* On the indigo panel the dark green outline disappears; use the bright brand
   green there, which is what that colour is for. */
.hs-panel a:focus-visible,
.hs-panel button:focus-visible,
.hs-panel input:focus-visible,
.hs-panel textarea:focus-visible,
.hs-panel .sppb-btn:focus-visible,
body.itemid-109 #sp-header:not(.is-stuck) a:focus-visible {
	outline-color: var(--hs-green);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}


/* 4. Sticky header
   ----------------
   Previously the header was position:absolute at top:0, so it scrolled away
   and never came back — on a site with a 6-item menu and deep sub-pages that
   means scrolling back up to navigate.

   It is now position:fixed. At rest that renders IDENTICALLY to the absolute
   version (both sit at top:0 over the hero), so the home page's transparent
   white-on-slider treatment from custom.css §1–2 is untouched.

   js/custom.js adds .is-stuck once the page is scrolled past the header, which
   is the only state that changes appearance: solid white with a soft shadow.
   The header must go opaque there because on sub-pages the muted menu would
   otherwise sit over arbitrary page content. */

#sp-header {
	position: fixed;
	transition: background-color .28s var(--hs-ease),
	            box-shadow .28s var(--hs-ease);
}

/* Opaque white, not a translucent blur. A backdrop-filter on a position:fixed
   header has to re-sample and re-blur everything behind it on every scroll
   frame — the one element on the page guaranteed to repaint constantly — and
   Chrome composites it late enough that the menu visibly ghosts through. For
   an audience on ordinary hardware that is a lot of GPU for an effect whose
   only job is to keep the menu readable, which a solid fill does better. */
#sp-header.is-stuck {
	background: #fff;
	box-shadow: var(--hs-shadow-header);
	z-index: 999;
}

@media (min-width: 992px) {
	#sp-logo .logo-image,
	#sp-logo .logo-image-phone {
		transition: height .28s var(--hs-ease);
	}

	#sp-header.is-stuck #sp-logo .logo-image,
	#sp-header.is-stuck #sp-logo .logo-image-phone {
		height: 44px;
	}
}

/* Anchor targets — and the "Panta tíma" jump in §5 — must clear the fixed
   header, plus a little breathing room. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

/* --- home page: undo the over-the-slider white treatment once stuck ---
   custom.css §2 paints the logo, menu and burger white for body.itemid-109.
   Over the now-white stuck header that would be invisible, so each of those
   rules needs a counterpart at higher specificity. The extra #sp-header id in
   these selectors is what wins — no !important needed. */

body.itemid-109 #sp-header.is-stuck #sp-logo .logo-image,
body.itemid-109 #sp-header.is-stuck #sp-logo .logo-image-phone {
	content: url("../../../images/2023/heyrnarst_svart_logo_web.png");
}

body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li > a,
body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li > span {
	color: var(--hs-ink-soft);
}

body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li:hover > a,
body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li:focus > a {
	color: var(--hs-ink);
	opacity: 1;
}

body.itemid-109 #sp-header.is-stuck #offcanvas-toggler .burger-icon span {
	background-color: var(--hs-ink);
}


/* 5. Menu and the header call to action
   -------------------------------------
   Nav type comes up from the template's 14px to 17px — this is the audience
   that most needs it, and the six items still fit at 1280px. */

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
	font-family: var(--hs-text);
	font-size: var(--hs-fs-ui);
	font-weight: 600;
	letter-spacing: 0;
	transition: color .2s var(--hs-ease), opacity .2s var(--hs-ease);
}

#sp-header .sp-megamenu-parent > li {
	margin: 0 2px;
}

/* The template paints the menu #484848 — a neutral grey that reads slightly
   dirty next to the indigo everything else is now set in. Moving it onto
   --hs-ink-soft also makes the sub-pages agree with the home page's stuck
   header, which §4 already had to colour by hand.

   `body:not(.itemid-109)` is load-bearing, not decoration: custom.css §2 paints
   the home page's menu white to sit over the slider at (0,3,1), and any
   selector here starts with an id. Without the exclusion this rule would win
   and put grey text on the dark hero. */
body:not(.itemid-109) #sp-header .sp-megamenu-parent > li > a,
body:not(.itemid-109) #sp-header .sp-megamenu-parent > li > span {
	color: var(--hs-ink-soft);
}

body:not(.itemid-109) #sp-header .sp-megamenu-parent > li:hover > a,
body:not(.itemid-109) #sp-header .sp-megamenu-parent > li.active > a,
body:not(.itemid-109) #sp-header .sp-megamenu-parent > li.active > span {
	color: var(--hs-ink);
}

/* An underline that grows from the centre on hover — the one piece of
   decoration in the nav. It is drawn on ::before because custom.css §7 already
   hides ::after (the caret).

   The ::before is positioned against the LI, not the A: Helix leaves the
   anchor static and sets `position: relative` on the menu item (it has to, for
   the dropdown panels to anchor). So `bottom` here is measured from the bottom
   of the full-height 80px menu item. */
#sp-header .sp-megamenu-parent > li > a::before {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 24px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0;
	transition: left .25s var(--hs-ease), right .25s var(--hs-ease), opacity .25s var(--hs-ease);
}

#sp-header .sp-megamenu-parent > li:hover > a::before,
#sp-header .sp-megamenu-parent > li.active > a::before {
	left: 10px;
	right: 10px;
	opacity: .9;
}

/* currentColor is right over the hero (white on the slider), but against the
   solid stuck header the brand green reads as an accent rather than a second
   grey line. */
#sp-header.is-stuck .sp-megamenu-parent > li > a::before {
	background: var(--hs-green);
	opacity: 1;
}

/* Dropdown panels: lighter shadow, and a fade rather than a snap. */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	box-shadow: 0 12px 40px rgba(30, 42, 71, .16);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	padding: 8px 0;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
	font-family: var(--hs-text);
	font-size: 1rem;
	font-weight: 500;
	padding: 8px 16px;
	line-height: 1.4;
	border-radius: 8px;
	margin: 0 8px;
	transition: background-color .18s var(--hs-ease), color .18s var(--hs-ease);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
	background-color: rgba(58, 181, 74, .1);
}

/* --- the header call to action ---
   Booking is the only thing this site is for, and until now the only way to
   start was to scroll to the bottom of the page. js/custom.js fills the
   empty .header-modules slot Helix already renders with a jump to the booking
   form and the phone number; the markup lives there, the appearance here.

   The phone comes first and is the larger target: for a lot of these visitors
   it is the preferred route, and it was previously 14px grey in the footer. */

.hs-header-cta {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: 32px;
	white-space: nowrap;
}

.hs-header-phone {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--hs-text);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--hs-ink);
	text-decoration: none;
	transition: color .2s var(--hs-ease);
}

.hs-header-phone .hs-header-phone-label {
	font-size: var(--hs-fs-small);
	font-weight: 500;
	color: var(--hs-ink-soft);
}

.hs-header-phone:hover,
.hs-header-phone:focus { color: var(--hs-green-deep); }

.hs-header-book {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--hs-green-deep);
	color: #fff;
	font-family: var(--hs-text);
	font-size: var(--hs-fs-ui);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--hs-shadow-btn);
	transition: background-color .25s var(--hs-ease),
	            transform .25s var(--hs-ease),
	            box-shadow .25s var(--hs-ease);
}

.hs-header-book:hover,
.hs-header-book:focus {
	background: var(--hs-green-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(31, 122, 46, .38);
}

.hs-header-book:active { transform: translateY(0); }

/* Over the slider on the home page everything in the header is white, and a
   solid green pill against a photographic background is the one element that
   should not be. A hairline outline keeps it legible on every slide. */
body.itemid-109 #sp-header:not(.is-stuck) .hs-header-phone,
body.itemid-109 #sp-header:not(.is-stuck) .hs-header-phone .hs-header-phone-label {
	color: #fff;
}

body.itemid-109 #sp-header:not(.is-stuck) .hs-header-book {
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

body.itemid-109 #sp-header:not(.is-stuck) .hs-header-book:hover,
body.itemid-109 #sp-header:not(.is-stuck) .hs-header-book:focus {
	background: #fff;
	color: var(--hs-ink);
	box-shadow: inset 0 0 0 1.5px #fff, 0 10px 22px rgba(0, 0, 0, .25);
}

/* --- the width budget ---
   The header row is logo + menu + this pair, inside a Bootstrap container that
   steps 960 / 1140 / 1320 at 992 / 1200 / 1400. Measured on the live menu once
   the webfont has loaded:

       logo 293    pill 135    phone 106
       six menu items   725 at 17px   667 at 16px   621 at 15px

   which gives 1320 all four, 1140 everything but the phone, and 960 the menu
   alone. The steps below spend the slack on type size rather than banking it.

   Getting this wrong is not a cosmetic failure. Both containers wrap: the row
   is a Bootstrap .row, and .sp-megamenu-parent is a block of inline-block
   items. Overflow therefore used to drop the entire menu onto a second line
   *underneath* the header's own background, unreadable and unclickable. The
   two nowrap declarations make an overflow show up as an overflow — visible
   and obviously wrong — instead of as a quietly broken menu. Keep them if the
   menu ever gains a seventh item. */

#sp-header .row {
	flex-wrap: nowrap;
}

#sp-header .sp-megamenu-parent {
	white-space: nowrap;
}

/* .has-border reserves 45px on the right of the logo column for a divider
   that this template style leaves set to `none` — 30px of the header's width
   budget spent on nothing. */
#sp-header #sp-logo.has-border {
	padding-right: 20px;
}

/* Both steps are scoped to #sp-header: the same two components are reused in
   the offcanvas drawer (§15), which is precisely where they have to survive
   once the header can no longer hold them. */

@media (max-width: 1399.98px) {
	#sp-header .hs-header-phone { display: none; }
	#sp-header .hs-header-cta { gap: 16px; margin-left: 20px; }

	#sp-header .sp-megamenu-parent > li > a,
	#sp-header .sp-megamenu-parent > li > span {
		font-size: 1rem;
	}
}

@media (max-width: 1199.98px) {
	#sp-header .hs-header-cta { display: none; }

	#sp-header .sp-megamenu-parent > li > a,
	#sp-header .sp-megamenu-parent > li > span {
		font-size: .9375rem;
		padding-left: 8px;
		padding-right: 8px;
	}
}


/* 6. The hero
   -----------
   Two real problems, one cosmetic.

   a) Contrast. The menu, logo and now the CTA are painted white for the whole
      home page, but the second slide is a pale sky blue — white on it measures
      2.4:1, which is illegible. A top-down scrim fixes every slide at once and
      is invisible on the dark ones.

   b) The type. Playfair Display 400 at 74px is thin enough that the strokes
      start to break up for exactly the readers this site is for. Newsreader
      at 500 holds the same size with real weight behind it. */

.sp-slider .sp-item::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 260px;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(to bottom,
	            rgba(20, 28, 48, .55) 0%,
	            rgba(20, 28, 48, .28) 45%,
	            rgba(20, 28, 48, 0) 100%);
}

/* The same problem again, one axis over: the slide copy is white on every
   slide, and two of the three slides are pale photographs — "Guð gaf þér eyra
   svo þú megir heyra" was white on near-white. The copy always sits in the
   left third (.sp-slider-content-align-left), so a left-to-right wash gives it
   something to sit on without touching the subject of the picture, which on
   all three slides is on the right. Invisible on the indigo illustration. */
.sp-slider .sp-item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(to right,
	            rgba(20, 28, 48, .58) 0%,
	            rgba(20, 28, 48, .34) 28%,
	            rgba(20, 28, 48, 0) 62%);
}

.sp-slider .sp-slider-content-wrap {
	position: relative;
	z-index: 2;
}

/* The slide is a flex box centring its content over a fixed 600px, and the
   header is an 80px overlay on top of it — so a tall three-line title runs up
   underneath the menu. Padding on the flex CONTAINER takes the header's height
   out of the centring box, which keeps the copy optically centred in the space
   that is actually visible rather than in the slide. */
@media (min-width: 992px) {
	.sp-slider .sp-item { padding-top: 80px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.sp-slider .sp-item { padding-top: 60px; }
}

body .sppb-sp-slider-title {
	font-family: var(--hs-display);
	font-weight: 500;
	letter-spacing: -0.025em;
	text-shadow: 0 2px 24px rgba(20, 28, 48, .35);
}

body .sppb-sp-slider-text {
	font-family: var(--hs-text);
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
	font-weight: 400;
	line-height: 1.5;
	max-width: 34ch;
	text-shadow: 0 1px 14px rgba(20, 28, 48, .4);
}

/* The green pill is the <span> inside the link, not the link itself. It had a
   colour transition but no hover state to transition TO, and no depth.

   It also had white text on #3ab54a, which is 2.7:1 — the brand green is a
   light colour and cannot carry white. Against the near-black green below it
   measures 8.4:1, so the button keeps the actual brand colour rather than
   being darkened into a stand-in. Same treatment as the panel's submit button,
   which is the point: the two primary actions on the site now match. */
/* The colours need the flag: the slider writes each slide's button styling as
   a THREE-id selector
       #sppb-addon-… .sp-slider #sp-slider-item-… #sp-slider-inner-item-… .sp-slider-btn-text
   one copy per slide, all regenerated on every edit in the builder. */
.sp-slider-btn-text {
	font-family: var(--hs-text);
	font-size: var(--hs-fs-ui);
	font-weight: 700;
	background-color: var(--hs-green) !important;
	color: #0F2A14 !important;
	box-shadow: 0 6px 18px rgba(20, 28, 48, .3);
	transition: background-color .3s var(--hs-ease),
	            transform .3s var(--hs-ease),
	            box-shadow .3s var(--hs-ease);
}

.sppb-sp-slider-button:hover .sp-slider-btn-text,
.sppb-sp-slider-button:focus .sp-slider-btn-text {
	background-color: #4FCB5F !important;
	color: #0F2A14 !important;
	border-color: transparent !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(20, 28, 48, .4);
}

.sppb-sp-slider-button:active .sp-slider-btn-text {
	transform: translateY(0);
}

/* The slider's own arrows are siblings of the slides, so they already sit
   above both scrims. They are set to show on hover only and are otherwise
   untouched — restyling a control most visitors never see is not where this
   file should spend another !important. */
.sp-slider .sp-nav-control {
	z-index: 3;
}


/* 7. Section rhythm
   -----------------
   SP Page Builder writes each section's padding into an inline <style> scoped
   to `.sp-page-builder .page-content #section-id-…`, which is one id and two
   classes — unreachable from a stylesheet, and regenerated whenever the page
   is edited in the builder. The rhythm therefore has to come from the pieces
   the builder does NOT pin: the main-body wrapper and the column addons.

   The one exception is the home page's empty-space addon, which exists purely
   to push the booking row down and is what left a ~350px void under the hero.
   It is measured in the builder, so it is safe to zero here and re-add the gap
   as real section padding. */

/* template.css zeroes this for every page builder page
   (`.com-sppagebuilder #sp-main-body { padding: 0 }`, 1,1,0), which is why the
   last section runs straight into the footer. */
body.com-sppagebuilder #sp-main-body,
body #sp-main-body {
	padding-top: 0;
	padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
}

.sppb-column-addons > .sppb-addon-wrapper + .sppb-addon-wrapper {
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

/* The gap between the hero and the booking row is NOT set here. It is the
   spacer addon's own `gap` in the page builder, which is where a distance
   somebody will want to adjust belongs — see _migration/tighten-home-hero-gap.js
   for why it is one setting there rather than four.

   An earlier version of this file forced that spacer to a clamp() with
   !important, which meant the number in the builder was not the number on the
   page. Do not put it back. */

/* Sub-pages open with a full-bleed-ish banner image. Round it consistently
   and give the content below it room. */
#sp-main-body .sppb-addon-single-image img,
#sp-main-body .sppb-addon-image img {
	border-radius: var(--hs-radius-lg);
}


/* 8. Content pages
   ----------------
   Every sub-page is one wide text column with the booking form beside it. The
   form now follows the reader down the page instead of scrolling away at the
   top — on a page like "Vörur", which runs well past three screens, the point
   at which someone decides to book is rarely the point at which they started.

   `align-items: flex-start` on the row is what makes position:sticky work:
   Bootstrap's default `stretch` gives the column full row height, and a sticky
   child inside a full-height container has nowhere to travel. */

/* `overflow-x: hidden` is the template's guard against stray horizontal
   scroll. It sits on .body-innerwrapper, and Helix's offcanvas script adds a
   second copy to <body> as part of .offcanvas-init (which is why the selector
   below needs that class to reach it). Either one silently disables
   position:sticky for everything inside, because an element with a clipped
   axis becomes a scroll container and sticky then resolves against THAT rather
   than the viewport — the panel would simply scroll away.

   `clip` clips identically but explicitly does not create a scroll container,
   which is what it was added to the spec for. Browsers without it (Safari 15
   and older) drop these two declarations as invalid and keep the template's
   original pair, so they lose the sticky panel and nothing else. */
body.offcanvas-init,
.body-innerwrapper {
	overflow-x: clip;
	overflow-y: visible;
}

@media (min-width: 992px) {
	.sppb-row:has(> [class*="sppb-col-"] .sppb-addon-ajax-contact) {
		align-items: flex-start;
	}

	body:not(.itemid-109) [class*="sppb-col-"]:has(.sppb-addon-ajax-contact) {
		position: sticky;
		top: 104px;
	}
}

/* Hand-typed bullet paragraphs ("• Heyrnarmæling", "1 ) Fyrir kyrrlátt…")
   get a hanging indent so wrapped lines clear the marker. */
#sp-main-body .sppb-addon-content p {
	text-wrap: pretty;
}


/* 9. THE APPOINTMENT CARD — the one loud object on the site
   ---------------------------------------------------------
   Everything else here is quiet on purpose so that this can be the thing the
   page is remembered by. It is the site's only job made into an object: a deep
   indigo panel in the artwork's own colour, lifted off the page, with the
   phone number sitting under the button as an equal second route rather than
   a footnote.

   The old treatment was four grey pills the same colour as disabled controls,
   labels that existed only as placeholder text (and so vanished the moment
   someone started typing), a textarea forced to 60px, and a #909090 submit
   button — grey, on the primary conversion action of the business.

   WHY !important, at length:
   SP Page Builder renders the addon's own colour settings as an inline <style>
   scoped to generated ids, e.g.
       #sppb-addon-1698313256826 #btn-1698313256826.sppb-btn-custom { … }
   That is two ids and a class. No class-only selector can outrank it, and the
   ids are regenerated whenever the addon is rebuilt in the builder, so they
   cannot be hard-coded here either. custom.css §6 hit the same wall, and its
   own width/height pins are what several rules below are undoing.

   The alternative is to set these on the addon in the page builder — but the
   form appears on the home page AND on every content page, so that is an edit
   per page, stored in the database, and invisible to version control. Keeping
   it here means the whole refresh reverts with one file. */

/* The addon carries a hand-set offset on every content page — the builder's own
   "position" control, emitted as
       #sppb-addon-wrapper-1703082790440 { position:relative; top:75px; left:36px }
   and used on the old site to drop the form clear of a heading that is no
   longer there and nudge it away from the text beside it. With the columns now
   aligned properly the 75px just leaves the panel floating below the text it
   belongs next to, and the 36px pushes it out past the right-hand edge of the
   banner above it — the panel was the only block on those pages not sitting on
   the container's line. */
#sp-main-body .sppb-addon-wrapper.addon-root-ajax-contact {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

.sppb-addon-ajax-contact {
	position: relative;
	/* custom.css §6 pulls the block up 47px to line it up with the old promo
	   images. The layout below sets that alignment properly, so the hack has
	   to go or everything sits 47px high. */
	top: 0;
	background: var(--hs-indigo);
	background-image:
		radial-gradient(120% 90% at 100% 0%, rgba(58, 181, 74, .22) 0%, rgba(58, 181, 74, 0) 55%),
		radial-gradient(90% 70% at 0% 100%, rgba(157, 75, 54, .18) 0%, rgba(157, 75, 54, 0) 60%);
	border-radius: var(--hs-radius-lg);
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	box-shadow: var(--hs-shadow-panel);
	overflow: hidden;
}

/* custom.css §6 also pulls every addon's content up 19px above 800px wide.
   Inside the panel that clips the heading against the padding. */
.sppb-addon-ajax-contact .sppb-addon-content {
	margin-top: 0;
}

/* One id heavier than the general heading rule in §2, so its `color: ink
   !important` does not paint this one dark blue on dark blue. The size is
   overridden here — unlike everywhere else — because the panel's proportions
   are this file's decision, not the builder's. */
#sp-main-body .sppb-addon-ajax-contact .sppb-addon-title {
	color: #fff !important;
	font-size: var(--hs-fs-h3) !important;
	margin: 0 0 .15em;
	letter-spacing: -0.01em;
}

/* A line of orientation under the heading. Injected by js/custom.js so the
   copy stays with the rest of the site's copy decisions rather than being
   buried in a database field. */
.hs-panel-note {
	margin: 0 0 1.25rem;
	font-size: var(--hs-fs-small);
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

/* --- fields ---
   Width, padding and the textarea height are pinned in custom.css §6 with
   !important at 0,3,0. These selectors match that shape exactly and win on
   source order; the !important is needed only to outrank the same flag there. */

.sppb-addon-ajax-contact .sppb-form-group .sppb-form-control {
	width: 100% !important;
	max-width: 100%;
	height: 56px !important;
	padding: 22px 16px 6px !important;   /* top inset leaves room for the label */
	background: var(--hs-indigo-lift) !important;
	border: 1.5px solid rgba(255, 255, 255, .22) !important;
	border-radius: 12px !important;
	color: #fff !important;
	font-family: var(--hs-text);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none !important;
	transition: border-color .2s var(--hs-ease),
	            background-color .2s var(--hs-ease),
	            box-shadow .2s var(--hs-ease);
}

.sppb-addon-ajax-contact .sppb-form-group textarea.sppb-form-control {
	height: 116px !important;
	min-height: 116px !important;
	max-height: 116px !important;
	padding: 26px 16px 10px !important;
	line-height: 1.45;
	resize: none;
}

.sppb-addon-ajax-contact .sppb-ajax-contact-content .sppb-ajaxt-contact-form .sppb-form-group {
	margin-bottom: 10px;
	position: relative;
}

/* --- floating labels ---
   SP Page Builder ships placeholder-only fields: the label disappears the
   moment the visitor types, so anyone who pauses half way through the form has
   no way to tell which box is which. js/custom.js adds a real <label>, moves
   the placeholder text into it and leaves the placeholder as a single space so
   :placeholder-shown still reports emptiness. The result is a label that is
   always on screen and correctly associated for screen readers. */

.hs-float-label {
	position: absolute;
	left: 27px;
	top: 20px;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1;
	color: rgba(255, 255, 255, .62);
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform .18s var(--hs-ease), color .18s var(--hs-ease);
}

.sppb-form-group:focus-within .hs-float-label,
.sppb-form-control:not(:placeholder-shown) ~ .hs-float-label {
	transform: translateY(-9px) scale(.76);
	color: rgba(255, 255, 255, .82);
}

.sppb-form-group:focus-within .hs-float-label {
	color: #8FE39A;
}

.sppb-addon-ajax-contact .sppb-form-control:focus {
	background: #3B4C78 !important;
	border-color: var(--hs-green) !important;
	box-shadow: 0 0 0 4px rgba(58, 181, 74, .25) !important;
	outline: none;
}

/* SPPB marks invalid fields with this class (see js/custom.js). The selector
   has to carry one more class than the field rule above: that one sets the
   `border` shorthand at 0,3,0 with !important, and a longhand border-color
   !important still loses to a more specific !important shorthand. */
.sppb-addon-ajax-contact .sppb-form-group .sppb-form-control.sppb-has-field-error {
	border-color: #E8836C !important;
	box-shadow: 0 0 0 4px rgba(232, 131, 108, .22) !important;
}

.sppb-addon-ajax-contact .sppb-form-validation-error {
	color: #FFC9BB;
	font-size: var(--hs-fs-small);
	font-weight: 600;
	margin: 12px 0 0;
}

/* Keep Chrome's autofill from repainting the fields white-on-white. */
.sppb-addon-ajax-contact .sppb-form-control:-webkit-autofill,
.sppb-addon-ajax-contact .sppb-form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px var(--hs-indigo-lift) inset !important;
	caret-color: #fff;
}

/* --- the button ---
   custom.css §6 pins this to 180px (120px on the home page), sized for a
   label that no longer needs to fit in a narrow grey column. Full width is
   both a bigger target and a clearer end to the form. */

.sppb-addon-ajax-contact .sppb-btn,
body.itemid-109 .sppb-addon-ajax-contact .sppb-btn {
	display: block;
	width: 100%;
	min-height: 54px;
	margin-top: 6px;
	padding: 0 20px;
	background-color: var(--hs-green) !important;
	border: none !important;
	border-radius: 12px;
	color: #0F2A14 !important;
	font-family: var(--hs-text) !important;
	font-size: var(--hs-fs-ui);
	font-weight: 700 !important;
	letter-spacing: .01em;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: background-color .25s var(--hs-ease),
	            transform .25s var(--hs-ease),
	            box-shadow .25s var(--hs-ease);
}

/* The bright brand green fails contrast against white but is 8.4:1 against
   this near-black ink — so on the indigo panel the primary button can finally
   be the actual brand colour rather than a darkened stand-in. */
.sppb-addon-ajax-contact .sppb-btn:hover,
.sppb-addon-ajax-contact .sppb-btn:focus {
	background-color: #4FCB5F !important;
	color: #0F2A14 !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(58, 181, 74, .35);
}

.sppb-addon-ajax-contact .sppb-btn:active {
	transform: translateY(0);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

/* --- the second route ---
   Injected by js/custom.js. For a large share of these visitors the phone is
   the route they will actually take, and it belongs next to the button rather
   than in the footer. */

.hs-panel-call {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: var(--hs-fs-small);
	color: rgba(255, 255, 255, .72);
	line-height: 1.35;
}

.hs-panel-call a {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s var(--hs-ease);
}

.hs-panel-call a:hover,
.hs-panel-call a:focus {
	color: #8FE39A;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* SPPB's success message renders inside the panel. */
.sppb-addon-ajax-contact .sppb-alert,
.sppb-addon-ajax-contact .sppb-ajax-contact-message {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	color: #fff;
	padding: 14px 16px;
	margin-top: 14px;
}


/* 10. The home page booking row
    ----------------------------
    Five columns in the DOM, in reading order:

        form  |  self-check  |  card  |  card  |  card

    and two shapes to get out of them. On a phone that order stacks and is
    already right. On a desktop the row is turned into a grid so the same five
    columns read as an L: the panel down the left, its full height, with the
    self-check across the top of the remaining two-thirds and the three cards
    in a line underneath.

        ┌──────────┬──────────────────────────────┐
        │          │  self-check                  │
        │  form    ├─────────┬─────────┬──────────┤
        │          │  card   │  card   │  card    │
        └──────────┴─────────┴─────────┴──────────┘

    Grid, not flex, for two reasons. It is what actually lets one child span a
    column while the others sit beside each other in the next row — flex has no
    way to express that without wrapper elements SP Page Builder would have to
    emit. And it takes the widths back from the builder without a fight: the
    columns' own 25% is written as
        #column-wrap-id-1687611310498 { max-width:25%; flex-basis:25% }
    in an inline <style> — one id, and after this file in source order, so
    nothing selector-based reaches it. Under `display: grid` on the parent,
    flex-basis stops applying and grid-template-columns decides; only max-width
    still has to be cancelled. Two !important gone.

    The 30 / 3×23.33 split is the same as before: at the builder's 25% the form
    is 285px wide, narrower than the panel wants, and identical to the three
    cards — so the site's one job read as a fourth card.

    If someone adds a sixth column in the builder, this grid will not know
    where to put it and it will land in the auto rows below. Placing it is a
    one-line change here.

    `:has()` is already in use in custom.css §6. */

@media (min-width: 992px) {
	body.itemid-109 .sppb-row:has(.sppb-addon-ajax-contact) {
		display: grid;
		grid-template-columns: 32% repeat(3, 1fr);
		grid-template-rows: auto auto;
		align-items: start;
		/* The gutter is the columns' own 15px padding, as it was under flex —
		   a grid gap on top of it would double every space in the row. */
		gap: 0;
	}

	body.itemid-109 .sppb-row:has(.sppb-addon-ajax-contact) > [class*="sppb-col-"] {
		max-width: none !important;

		/* Grid items default to `min-width: auto`, which floors every track at
		   its content's min-content width. The promo images are 800px PNGs, so
		   the three 1fr tracks refused to shrink below 290px and the row ran
		   72px past the right edge of its own container — the whole section sat
		   visibly left of every other block on the site. This is the standard
		   fix and it is load-bearing, not tidying. */
		min-width: 0;
	}

	/* The panel: first column, full height of the row.

	   The two paddings are the reason it is 32% rather than 30%. custom.css §6
	   strips this column's gutter entirely on the home page — a leftover from
	   when the old 275px fields had to be squeezed in — which left the panel
	   hanging 15px outside the container on the left and only 15px clear of the
	   self-check on the right. 15px is nothing between a solid dark block and a
	   column of text.

	   So: 15px on the left puts its edge on the same line as the banner, the
	   footer and everything else on the site, and 33px on the right adds to the
	   neighbour's own 15px for a 48px gutter — deliberately wider than the 30px
	   between the cards, because the panel is a single heavy object and the
	   cards are a set. The extra 2% of track keeps the panel's own width where
	   it was despite giving 48px away. */
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-ajax-contact) {
		grid-column: 1;
		grid-row: 1 / -1;
		padding-left: 15px;
		padding-right: 33px;
	}

	/* The self-check: across the top of the other three. */
	body.itemid-109 [class*="sppb-col-"]:has(.hs-selfcheck) {
		grid-column: 2 / -1;
		grid-row: 1;
		padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	}

	/* The cards: one line underneath, each centred in its own cell so the
	   three sit on a shared centre line whatever their columns contain. */
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-single-image) {
		grid-row: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* The third promo column carries a 75px empty-space addon under its image,
	   added in the builder to fake the alignment this section now does properly
	   — with it in place that card sits 53px above the other two. */
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-single-image) .addon-root-empty-space {
		display: none;
	}

	/* Each promo image is pinned to a hard 260px in the builder — the exact
	   content width of a 25% column at 1140, so it fitted the old layout by
	   coincidence rather than by being responsive. It is what jammed the three
	   tracks open above (min-content could not go below 260), and left alone it
	   would now overflow them instead. The source PNGs are 800px wide, so there
	   is nothing to lose by letting them fill whatever column they are given.

	   SP Page Builder writes the 260 as an id-scoped rule per addon, hence the
	   flags; scoped to this row so the sub-page banners keep their own sizing. */
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-single-image) .sppb-addon-single-image-container,
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-single-image) .sppb-addon-single-image-container > a,
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-single-image) img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
}

/* custom.css §6 lifts every addon's content by 19px above 800px wide, carried
   over from the old template's global CSS. It was there to line up a layout
   that no longer exists, and it makes each promo image overhang the top of its
   own wrapper. */
@media (min-width: 800px) {
	.sppb-addon-content {
		margin-top: 0;
	}
}


/* 10b. The self-check
    -------------------
    Three of the clinic's own questions from "Þarftu heyrnartæki?", added to the
    home page in _migration/add-home-selfcheck.js. It is the bridge the page was
    missing: the visitor who is not yet sure they have a problem has nothing to
    do here except book, and booking is a bigger step than reading three
    questions about your own evenings.

    So it is set as questions, not as a feature list. Each one gets its own
    line, at reading size, with a light rule between — the eye should stop at
    each and answer it. The green marks are the only decoration: they are the
    checkbox the reader is ticking in their head.

    Everything is scoped through .hs-selfcheck, the addon's class in the
    builder, so editing the text there cannot break the layout and deleting the
    block leaves nothing behind. */

/* Heading rank: the same size as the panel's "Tímapantanir", not the h2 size
   §2 gives every .sppb-addon-title. These two blocks sit side by side and are
   peers; the panel wins the row on colour and elevation, which is a quieter
   way to win than being bigger. */
#sp-main-body .hs-selfcheck .sppb-addon-title {
	font-size: var(--hs-fs-h3);
	margin-bottom: .5em;
}

/* Two measures on purpose. The prose keeps a normal reading width, but the
   questions get the block's full width so each one lands on a single line —
   a question that wraps reads as a paragraph, and these have to read as things
   you answer yes or no. It also puts the rules' right edge on the same line as
   the third card, which is the only reason the two bands read as one block.

   The id is needed to clear §2's 68ch cap on .sppb-addon-content, which is a
   sensible default for a page of running text and the wrong one here. */
#sp-main-body .hs-selfcheck .sppb-addon-content {
	max-width: none;
}

.hs-selfcheck .sppb-addon-content > p {
	max-width: 62ch;
}

.hs-selfcheck ul {
	list-style: none;
	margin: 0 0 1.1em;
	padding: 0;
	border-top: 1px solid var(--hs-line);
}

.hs-selfcheck li {
	position: relative;
	margin: 0;
	padding: .55em 0 .55em 2.1rem;
	border-bottom: 1px solid var(--hs-line);
	line-height: 1.45;
	text-wrap: pretty;
}

/* An empty check box rather than a bullet: the list is a question being put to
   the reader, and the shape should say "answer me", not "here is an item". */
.hs-selfcheck li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3em;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: -.55rem;
	border: 2px solid var(--hs-green);
	border-radius: 5px;
}

.hs-selfcheck .sppb-addon-content > p:last-child {
	margin-bottom: 0;
}

/* The link out is the one thing in the block that is an action. */
#sp-main-body .hs-selfcheck a {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
}

#sp-main-body .hs-selfcheck a::after {
	content: "\2192";                 /* → */
	transition: transform .2s var(--hs-ease);
}

#sp-main-body .hs-selfcheck a:hover::after {
	transform: translateX(4px);
}

/* Below 992px the row stacks, and the block sits between the panel and the
   cards where it needs its own breathing room. */
@media (max-width: 991.98px) {
	.hs-selfcheck {
		margin: 2.5rem 0 .5rem;
	}
}


/* 11. The promo cards
    -------------------
    The rounded corners are baked into the PNGs as transparency, so a
    box-shadow would draw a rectangle behind them — drop-shadow() follows the
    alpha channel and traces the actual shape. */

.sppb-addon-single-image a,
.sppb-addon-image a {
	display: block;
	border-radius: var(--hs-radius-lg);
	transition: transform .4s var(--hs-ease-out), filter .4s var(--hs-ease-out);
}

.sppb-addon-single-image a:hover,
.sppb-addon-single-image a:focus-visible,
.sppb-addon-image a:hover,
.sppb-addon-image a:focus-visible {
	transform: translateY(-8px);
	filter: drop-shadow(var(--hs-shadow-card));
}

.sppb-addon-single-image img,
.sppb-addon-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* 12. Body links
    --------------
    Underline on hover only, offset clear of the descenders. Links wrapping an
    image are excluded — §11 handles those, and an underline would draw a bar
    across the bottom of the picture. */

/* The exclusions go inside :where() so they contribute nothing to specificity.
   Written the obvious way, `a:not(.sppb-btn):not(.sppb-sp-slider-button):not(
   :has(img))` scores (1,2,2) — heavy enough that overriding it anywhere else
   needs a selector nobody would write on purpose. :where() keeps the whole
   thing at (1,0,1), which is what a default should cost. */
#sp-main-body a:not(:where(.sppb-btn, .sppb-sp-slider-button, :has(img))) {
	color: var(--hs-green-deep);
	font-weight: 600;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	transition: color .2s var(--hs-ease);
}

#sp-main-body a:not(:where(.sppb-btn, .sppb-sp-slider-button, :has(img))):hover {
	color: var(--hs-green-dark);
	text-decoration: underline;
}

/* The panel sits inside #sp-main-body, so its own links have to opt out of the
   rule above — dark green on dark indigo is unreadable. */
#sp-main-body .sppb-addon-ajax-contact a,
#sp-main-body .sppb-addon-ajax-contact a:hover {
	color: #fff;
}

#sp-main-body .hs-panel-call a:hover,
#sp-main-body .hs-panel-call a:focus {
	color: #8FE39A;
}


/* 13. Footer
    ----------
    Was a single centred line of pipe-separated text on #e6e6e6 — six facts
    with no hierarchy, the phone number not dialable, at 14px. It becomes the
    site's dark closing band, with the pipes turned into real separators and
    the phone and email as links. js/custom.js does the splitting; the
    separators below are drawn, not typed. */

#sp-footer {
	background: var(--hs-ink);
	color: #C6CEDF;
	padding: clamp(2rem, 1.4rem + 2vw, 3rem) 0;
	border-top: none;
	font-size: var(--hs-fs-small);
}

/* template.css draws a hairline and 30px of padding on the inner wrapper
   (`#sp-footer .container-inner`, 1,1,0). Against the old light grey bar that
   rule was invisible; on the dark band it lands as a stray line floating above
   the text, and its padding doubles up with the band's own. */
#sp-footer .container,
#sp-footer .container-inner {
	border-top: none;
	padding-top: 0;
	padding-bottom: 0;
}

#sp-footer .sp-copyright,
#sp-footer p {
	font-family: var(--hs-text);
	font-weight: 400;
	color: #C6CEDF;
	margin: 0;
}

#sp-footer a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color .2s var(--hs-ease);
}

#sp-footer a:hover,
#sp-footer a:focus {
	color: #8FE39A;
	text-decoration: underline;
}

/* The rebuilt row. Each fact becomes its own item; the pipes become 1px rules
   that disappear when the row wraps onto several lines on a phone. */
.hs-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 26px;
	line-height: 1.5;
}

/* The gap, not a space, separates "Sími" from the number: the two are flex
   items, and flex containers discard the whitespace between their children. */
.hs-footer-item {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	position: relative;
}

.hs-footer-item + .hs-footer-item::before {
	content: "";
	position: absolute;
	left: -13px;
	top: 50%;
	width: 1px;
	height: 15px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .22);
}

.hs-footer-item.is-name {
	font-family: var(--hs-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.01em;
}

.hs-footer-tel {
	font-size: 1.0625rem;
}

@media (max-width: 767.98px) {
	.hs-footer-row {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.hs-footer-item + .hs-footer-item::before { display: none; }
}


/* 14. Back to top
    ---------------
    Was a translucent grey circle (rgba(100,100,100,.4)) that sat almost
    invisible over light content. */

.sp-scroll-up {
	width: 48px;
	height: 48px;
	line-height: 48px;
	background: var(--hs-ink);
	color: #fff;
	box-shadow: 0 6px 20px rgba(30, 42, 71, .3);
	transition: background-color .25s var(--hs-ease),
	            transform .25s var(--hs-ease),
	            box-shadow .25s var(--hs-ease);
}

.sp-scroll-up:hover,
.sp-scroll-up:focus {
	background: var(--hs-green-deep);
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(30, 42, 71, .38);
}


/* 15. Offcanvas menu
    ------------------
    Carries the whole navigation below 992px, plus the two CTAs that §5 hides
    at that width. */

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span {
	font-family: var(--hs-text);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-offcanvas-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Clear of Helix's absolutely positioned close button. */
	margin: 34px 0 28px;
}

.hs-offcanvas-cta .hs-header-book {
	justify-content: center;
	width: 100%;
	height: 54px;
}

.hs-offcanvas-cta .hs-header-phone {
	justify-content: center;
	font-size: 1.25rem;
}


/* 16. Motion
    ----------
    Two moments, both suppressed under prefers-reduced-motion by §3.

    The hero runs an entrance on load: the line, then the subtitle, then the
    button, so the sentence arrives in the order it was written. js/custom.js
    drops .hs-hero-ready again once it has played — the slide rotates every ten
    seconds, and an entrance that replays on every rotation stops being an
    entrance and becomes a twitch.

    Everything below the fold gets one shared scroll reveal — a short rise, no
    stagger, no scale — applied by js/custom.js only to elements it can see are
    off screen at load, so nothing on the first screen ever starts hidden.

    .hs-reveal is set by JS, never in the markup, so with JS unavailable the
    page renders fully visible. */

.hs-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--hs-ease-out), transform .7s var(--hs-ease-out);
	will-change: opacity, transform;
}

.hs-reveal.hs-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@keyframes hs-hero-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

.hs-hero-ready .sp-item.active .sppb-sp-slider-title,
.hs-hero-ready .sp-item.active .sppb-sp-slider-text,
.hs-hero-ready .sp-item.active .sppb-sp-slider-button {
	animation: hs-hero-in .9s var(--hs-ease-out) both;
}

.hs-hero-ready .sp-item.active .sppb-sp-slider-text   { animation-delay: .1s; }
.hs-hero-ready .sp-item.active .sppb-sp-slider-button { animation-delay: .2s; }


/* 17. Small screens
    -----------------
    template.css already drops the header to 60px below 992px and 50px below
    576px. The panel is the only thing that needs real attention: on a phone it
    is the last thing on the page, so it gets edge-to-edge breathing room
    rather than the desktop card inset. */

@media (max-width: 991.98px) {
	html { scroll-padding-top: 80px; }

	.sppb-addon-ajax-contact {
		margin-top: 1.5rem;
	}

	/* custom.css §6 removes the column gutter around the form on the home page
	   so the old 275px fields would fit. With a full-width panel that gutter is
	   what keeps it off the screen edge. */
	body.itemid-109 [class*="sppb-col-"]:has(.sppb-addon-ajax-contact) {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 575.98px) {
	html { scroll-padding-top: 68px; }

	.sppb-addon-ajax-contact {
		border-radius: 18px;
	}

	.sp-slider .sp-item::before { height: 160px; }
}