.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

/* ==========================================================================
   GLITUR — FORSÍÐA
   Companion stylesheet for the Elementor template "Glitur — Forsíða".
   Paste into: Elementor → Site Settings → Custom CSS  (or Appearance →
   Customize → Additional CSS). Nothing here duplicates a control you can
   reach from the Elementor panel — it only covers effects Elementor has no
   control for: text stroke, pseudo-element decoration, absolute positioning,
   CSS grid tracks, and the keyframe animations.

   Layout properties use !important so they win over Elementor's own
   per-element rules regardless of stylesheet load order.
   ========================================================================== */

:root{
  --gl-ink:#0a0a0a;      --gl-ink-soft:#111213;  --gl-panel:#171819;
  --gl-line:rgba(255,255,255,.12);
  --gl-muted:#a7a7a3;    --gl-paper:#f2f0eb;
  --gl-accent:#ef4b2f;   --gl-accent-bright:#ff6247;
}

/* --- global -------------------------------------------------------------- */
body{ background:var(--gl-ink); overflow-x:hidden; }

/* Elementor gives EVERY container a default padding (Site Settings → Layout →
   Container Padding, 10px out of the box) and the source has none anywhere.
   Left alone it inflates the top bar, narrows every shell by 20px and shifts
   the hero visual.

   Two things matter here and both are easy to get wrong:

   1. Reset only the PHYSICAL properties. Elementor's .e-con maps
      --padding-block-start from --padding-top; setting the logical property
      too breaks that mapping and flattens the padding even when --padding-top
      is correct.
   2. Keep the .elementor-kit-5 at one class-level of specificity, i.e. the bare
      attribute .elementor-kit-5 and NOT [class*="gl-"].e-con. It then beats Elementor's
      (0,1,0) default because it is declared later, and still loses to the
      per-element .elementor-element.elementor-element-XXX rules at (0,2,0)
      that carry each section's real padding. */
[class*="gl-"]{
  --padding-top:0px;    --padding-right:0px;
  --padding-bottom:0px; --padding-left:0px;
}

.gl-shell{
  width:min(1340px, 100% - 64px) !important;
  max-width:none !important;
  margin-inline:auto !important;
  /* Elementor gives every container a default padding (Site Settings → Layout →
     Container Padding, 10px out of the box). The source's .shell has none, and
     nested containers stack it, so clear it here. Sections that need their own
     padding set it further down and win on source order. */
  padding:0 !important;
}
.gl-shell > *{ min-width:0; }

/* the "— LABEL" kicker: the rule is drawn, not typed */
.gl-eyebrow .elementor-heading-title{
  display:flex; align-items:center; gap:10px;
}
.gl-eyebrow .elementor-heading-title::before{
  content:""; flex:0 0 24px; height:1px; background:currentColor;
}

/* shared button geometry */
.gl-btn{ flex:0 0 auto; }
.gl-btn .elementor-button{
  display:inline-flex !important;
  justify-content:space-between; align-items:center;
  min-height:57px; border-radius:0; white-space:nowrap;
  transition:transform .25s, background .25s, color .25s;
}
.gl-btn .elementor-button:hover{ transform:translateY(-3px); }
.gl-btn--text .elementor-button{
  min-height:0; padding:0 0 7px 0 !important;
  border-bottom:1px solid #5b5b58; background:transparent;
}
.gl-btn--text .elementor-button-icon{ color:var(--gl-accent); }
.gl-btn--primary .elementor-button-icon{ font-size:15px; }

/* Arrow links. Elementor nests the label and the icon inside
   .elementor-button-content-wrapper and sets that to justify-content:center —
   so space-between has to go THERE. Putting it on .elementor-button does
   nothing, because the button has exactly one child.
   The two links differ in the source: the service-card link is display:flex and
   fills its column with the arrow pinned to the far right, while the About link
   is inline-flex and shrink-wraps with a fixed 55px gap. */
.gl-arrowLink .elementor-button,
.gl-cardLink  .elementor-button{
  align-items:center; background:transparent; border-radius:0;
}
.gl-arrowLink .elementor-button-content-wrapper,
.gl-cardLink  .elementor-button-content-wrapper{
  display:flex !important; align-items:center;
  justify-content:space-between !important;
}

/* service-card "NÁNAR" — full width, arrow hard against the right edge */
.gl-cardLink .elementor-button-wrapper{ width:100%; }
.gl-cardLink .elementor-button{
  display:flex !important; width:100%;
  border-top:1px solid var(--gl-line);
}
.gl-cardLink .elementor-button-content-wrapper{ width:100%; }

/* About "Kynntu þér Glitur" — shrink-wrapped, 55px between label and arrow.
   The gap is set here rather than left to the widget's Icon Spacing, so the
   spacing holds even if that panel value is changed. */
.gl-arrowLink .elementor-button{
  display:inline-flex !important; width:auto;
  border-bottom:1px solid #555;
}
.gl-arrowLink .elementor-button-content-wrapper{ gap:55px !important; }
.gl-arrowLink .elementor-button-icon{ margin:0 !important; }
.gl-cardLink  .elementor-button-icon{ margin:0 !important; }

.gl-arrowLink .elementor-button-icon,
.gl-cardLink  .elementor-button-icon{ color:var(--gl-accent); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.gl-hero{
  position:relative !important; overflow:hidden !important;
  background:radial-gradient(circle at 76% 52%, #252729 0, #111 35%, #090909 68%) !important;
  min-height:890px !important;
}

/* --------------------------------------------------------------------------
   IMPORTANT — decorative ::before on Elementor containers
   Elementor owns `.e-con:before` for its container background overlay and sets
   width/height:100% and top/left:0 on it, at the same specificity as ours. That
   over-constrains any `inset` we declare, so a ring/glow/tick keeps the box's
   own size but slides to the top-left corner. Every rule below therefore states
   its geometry explicitly with !important and resets width/height to auto (or a
   fixed size). `opacity` is deliberately left alone so the pulse can animate it.
   -------------------------------------------------------------------------- */
.gl-hero::before{
  content:"" !important; position:absolute !important;
  top:auto !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:auto !important; height:35% !important;
  border:0 !important; border-radius:0 !important;
  z-index:2; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.68)) !important;
}
.gl-hero__grid{
  position:absolute !important; inset:0 !important; opacity:.14;
  padding:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 63%);
          mask-image:linear-gradient(90deg,#000,transparent 63%);
}

.gl-hero__visual{
  position:absolute !important; z-index:1;
  top:170px;
  /* Anchored to the 1340px shell, not to the section — the visual is a child of
     .gl-hero__inner, so this is the source's own value with nothing derived. */
  right:-10vw;
  width:min(78vw,1120px) !important; height:625px !important;
  overflow:hidden !important; padding:0 !important;
  clip-path:polygon(11% 0, 100% 0, 100% 100%, 0 100%);
  background-position:50% center !important;
  animation:gl-imageIn 1.1s .12s both;
}
/* darkening + edge blend that the source applies to its video */
.gl-hero__visual::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,#0a0a0a 0%, rgba(10,10,10,.15) 27%, transparent 58%),
    linear-gradient(transparent 60%, rgba(0,0,0,.5)),
    rgba(0,0,0,.30);
}
/* --- the hero media -------------------------------------------------------
   This slot is a VIDEO, not a still. Select this container in Elementor and set
   Style -> Background -> Video with a self-hosted MP4; use the poster as the
   Background Fallback so something is on screen before the file loads.

   Elementor centres its background video with transform:translate(-50%,-50%).
   Animating `transform` here overrides that (keyframes beat normal declarations
   whatever the specificity) and drags the video down and to the right out of
   frame — which is what was happening. The push-in therefore carries the
   centring inside its own keyframes. Nothing animates the fallback still. */
.gl-hero__visual .elementor-background-video-container{
  position:absolute !important; inset:0 !important; overflow:hidden !important;
}
.gl-hero__visual video{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover;
  filter:contrast(1.08) saturate(.72) brightness(.62);
}
/* Elementor background video */
.gl-hero__visual .elementor-background-video-hosted{
  transform:translate(-50%,-50%) scale(1.035);
  animation:gl-slowZoomBg 12s ease-out infinite alternate;
}
/* a plain <video> element, if you ever place one directly */
.gl-hero__visual > video{
  transform:scale(1.035);
  animation:gl-slowZoom 12s ease-out infinite alternate;
}
/* Don't want the push-in at all? Add:
   .gl-hero__visual video{ animation:none !important; transform:translate(-50%,-50%) !important; } */
.gl-hero__visual::before{                        /* the accent glow */
  content:"" !important; position:absolute !important; z-index:2;
  top:auto !important; left:auto !important;
  bottom:5% !important; right:17% !important;
  width:380px !important; height:380px !important;
  border:0 !important; border-radius:50% !important;
  background:rgba(239,75,47,.12) !important; filter:blur(80px);
}

.gl-hero__tag{
  position:absolute !important; z-index:4; width:auto !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:0 !important;
}
.gl-hero__tag--top   { top:18%;    left:38%; animation:gl-drift 4s ease-in-out infinite; }
.gl-hero__tag--bottom{ bottom:20%; right:15%; animation:gl-drift 4s ease-in-out 1.2s infinite; }
.gl-hero__tag .elementor-heading-title{ letter-spacing:.07em; }
.gl-tag__n{ color:var(--gl-accent); font-family:'Geist Mono',monospace; margin-right:8px; }

.gl-hero__caption{
  position:absolute !important; z-index:4; bottom:20px; right:23px;
  width:auto !important;
}

.gl-hero__inner,
.gl-hero__inner > .e-con-inner{ position:relative !important; }
.gl-hero__inner{
  z-index:3;
  min-height:890px !important;
  padding-top:112px !important;
  justify-content:center !important;
}
.gl-hero__copy{
  position:relative !important; z-index:3;
  width:min(100%,680px) !important; padding-top:20px !important;
  animation:gl-fadeUp .9s both;
}
.gl-hero__title .elementor-heading-title{ max-width:680px; }
.gl-hero__title span{
  display:block; color:transparent; font-weight:610;
  -webkit-text-stroke:1.25px rgba(255,255,255,.64);
}
.gl-hero__lead .elementor-widget-container{ max-width:520px; margin-top:38px; }
.gl-hero__proof .gl-proof__item{ border-left:1px solid var(--gl-accent); }

.gl-scrollCue{
  position:absolute !important; z-index:5; bottom:64px; left:32px;
  transform:rotate(-90deg); transform-origin:0;
  width:auto !important;
}
.gl-scrollCue__line{
  position:relative !important; display:block !important;
  width:38px !important; height:1px !important; min-height:0 !important;
  background:#666; overflow:hidden !important; padding:0 !important;
}
.gl-scrollCue__line::after{
  content:""; position:absolute; inset:0; background:#fff;
  animation:gl-scrollLine 2s infinite;
}

/* ==========================================================================
   2. MERCEDES FEATURE  (paper)
   ========================================================================== */
.gl-mercedes{ overflow:hidden !important; }
.gl-sectionIntro{
  display:grid !important;
  grid-template-columns:.5fr 1fr .56fr !important;
  align-items:end !important; gap:50px !important;
  margin-bottom:60px !important;
}
.gl-sectionIntro .gl-eyebrow{ align-self:start; }
.gl-sectionIntro__title .elementor-heading-title{ max-width:690px; }
.gl-sectionIntro__lead .elementor-widget-container{ margin-bottom:6px; }

.gl-hotspotStage{
  position:relative !important; overflow:hidden !important;
  background:var(--gl-paper) !important;
}
.gl-hotspotStage__car{
  position:absolute !important; inset:3% 2% 0;
  width:96% !important; height:94% !important;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image:linear-gradient(#000 0% 88%, rgba(0,0,0,.88) 92%, rgba(0,0,0,.32) 97%, transparent 100%);
          mask-image:linear-gradient(#000 0% 88%, rgba(0,0,0,.88) 92%, rgba(0,0,0,.32) 97%, transparent 100%);
}
.gl-hotspotStage__car img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  filter:saturate(.82) contrast(1.04) drop-shadow(0 28px 28px rgba(0,0,0,.28));
}
.gl-hotspotStage:hover .gl-hotspotStage__car{ transform:scale(1.025); }

.gl-hotspot{
  position:absolute !important; z-index:3; cursor:pointer;
  width:52px !important; height:52px !important; min-height:0 !important;
  padding:7px !important; border-radius:50% !important;
  background:rgba(17,17,17,.65) !important;
  border:1px solid rgba(255,255,255,.65) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .25s, background .25s;
}
.gl-hotspot::before{                              /* the pulse ring */
  content:"" !important; position:absolute !important;
  top:-9px !important; right:-9px !important;
  bottom:-9px !important; left:-9px !important;
  width:auto !important; height:auto !important;
  border:1px solid rgba(255,255,255,.38) !important;
  border-radius:50% !important; background:none !important;
  animation:gl-pulse 2.1s infinite;
}
.gl-hotspot:hover,.gl-hotspot:focus-within{
  z-index:12; background:var(--gl-accent) !important; transform:scale(1.12);
}
/* The mark inside a hotspot. The source sizes its <img> to the button's 36px
   content box with object-fit:contain, perfectly concentric with the ring.
   Elementor's image and icon widgets bring their own box, so pin both here —
   otherwise the mark renders at its natural size, overflows the 52px button
   and stops being concentric with the ring. */
.gl-hotspot > .elementor-widget{
  width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important;
  justify-content:center !important;
}
.gl-hotspot > .elementor-widget > .elementor-widget-container{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.gl-hotspot img{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:contain; display:block; position:relative; z-index:2;
}
.gl-hotspot .elementor-icon{ color:#fff; font-size:26px; line-height:1; }
/* Star looking too big or too small? It is sized by the button's padding —
   .gl-hotspot{ padding:7px } gives a 36px mark. Raise the padding to shrink it. */
.gl-hotspot--badge{ top:58%; left:80%; }
.gl-hotspot--light{ top:51%; left:63%; }
.gl-hotspot--body { top:43%; left:37%; }

.gl-hotspot__card{
  position:absolute !important; z-index:20; top:50%; left:auto; right:68px;
  width:265px !important; text-align:left;
  opacity:0; pointer-events:none;
  transform:translate(-10px,-50%);
  transition:opacity .28s, transform .28s;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.gl-hotspot:hover .gl-hotspot__card,
.gl-hotspot:focus-within .gl-hotspot__card{
  opacity:1; transform:translateY(-50%);
}
.gl-hotspotStage__label{
  position:absolute !important; z-index:2; bottom:30px; left:32px;
  width:auto !important;
}

/* ==========================================================================
   3. BRAND RAIL
   ========================================================================== */
.gl-brandRail{
  border-top:1px solid var(--gl-line); border-bottom:1px solid var(--gl-line);
}
.gl-brandRail__inner{
  display:grid !important; grid-template-columns:220px 1fr !important;
  align-items:center !important;
}
.gl-brandRail__list{
  display:grid !important; grid-template-columns:repeat(5,1fr) !important;
  gap:0 !important;
}
.gl-brandRail__item{
  border-left:1px solid var(--gl-line);
  min-height:64px !important; transition:transform .25s;
}
.gl-brandRail__item:hover{ transform:translateY(-2px); }
.gl-brandRail__item:hover .elementor-heading-title{ color:#fff; }
.gl-brandRail__name .elementor-heading-title{ transition:color .25s; }

/* ==========================================================================
   4. ABOUT
   ========================================================================== */
.gl-about{ position:relative !important; overflow:hidden !important; }
.gl-about::after{
  content:"GLITUR"; position:absolute; bottom:-65px; right:-35px;
  pointer-events:none; color:rgba(255,255,255,.024);
  font-family:'Geist',sans-serif; font-weight:780;
  font-size:min(24vw,340px); letter-spacing:-.08em; line-height:1;
}
.gl-about__shell,.gl-about__inner{ position:relative !important; z-index:1; }
.gl-about__inner{
  display:grid !important;
  grid-template-columns:.65fr 1.18fr .52fr !important;
  align-items:center !important; gap:90px !important;
}
.gl-about__numberWrap{ position:relative !important; align-items:flex-start !important; }
/* The outlined 35. Elementor emits a per-element `color:#FFFFFF` for the
   heading at higher specificity than a plain class .elementor-kit-5, which fills the
   digits solid — hence !important. The source lays this out as a flex row with
   align-items:flex-start and pulls the + up 14px, so reproduce that rather than
   relying on vertical-align (which flex items ignore anyway). */
.gl-about__number .elementor-heading-title{
  display:flex !important; align-items:flex-start !important;
  color:transparent !important;
  -webkit-text-stroke:1px rgba(255,255,255,.35) !important;
}
.gl-about__number span{
  -webkit-text-stroke:0 !important;
  color:var(--gl-accent) !important;
  font-size:45px !important; font-weight:300 !important;
  line-height:normal !important; letter-spacing:normal !important;
  margin:-14px 0 0 4px !important;
}
.gl-about__numberLabel{
  position:absolute !important; bottom:0; left:8px; width:auto !important;
}
.gl-about__text .elementor-widget-container{ max-width:640px; margin:28px 0; }
.gl-about__aside{
  border-left:1px solid var(--gl-line);
  justify-content:center !important; align-self:stretch !important;
}
.gl-about__meter{
  width:100% !important; height:1px !important; min-height:0 !important;
  margin:24px 0 !important; padding:0 !important;
  background:#303030 !important; overflow:hidden !important;
}
.gl-about__meter::after{
  content:""; display:block; width:72%; height:100%;
  background:var(--gl-accent);
  animation:gl-meter 3s ease-in-out infinite alternate;
}

/* ==========================================================================
   5. SERVICES
   ========================================================================== */
.gl-headSplit{
  display:grid !important; grid-template-columns:1fr 420px !important;
  align-items:end !important; gap:60px !important;
  margin-bottom:58px !important;
}
.gl-headSplit--wide{ grid-template-columns:1fr 370px !important; gap:100px !important;
  margin-bottom:61px !important; }
.gl-headSplit__lead .elementor-widget-container{ margin-bottom:6px; }

.gl-serviceGrid{
  display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:1px !important;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.11);
}
.gl-serviceCard{ min-width:0; }
.gl-serviceCard__media{
  position:relative !important; height:270px !important; overflow:hidden !important;
  padding:0 !important;
}
.gl-serviceCard__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(transparent 45%, rgba(0,0,0,.62));
}
.gl-serviceCard__img{ position:absolute !important; inset:0; }
.gl-serviceCard__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) saturate(.72) brightness(.78);
  transition:transform .8s cubic-bezier(.2,.75,.2,1), filter .5s;
}
.gl-serviceCard:hover .gl-serviceCard__img img{
  filter:grayscale(0) saturate(.9) brightness(.9); transform:scale(1.055);
}
.gl-serviceCard__num{
  position:absolute !important; z-index:2; bottom:17px; left:20px;
  width:auto !important;
}
.gl-serviceCard__body{ position:relative !important; }
.gl-serviceCard__text .elementor-widget-container{
  min-height:75px; margin:17px 0 28px;
}
.gl-serviceCard__body .gl-cardLink{ margin-top:auto; }

/* ==========================================================================
   6. VEHICLE SHOWCASE
   ========================================================================== */
.gl-vehicleGrid{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  height:560px !important; gap:0 !important;
}
.gl-vehicleCard{
  position:relative !important; overflow:hidden !important;
  min-width:0; padding:0 !important;
  border-right:1px solid rgba(255,255,255,.15);
}
.gl-vehicleCard__img{ position:absolute !important; inset:0; }
.gl-vehicleCard__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.75) brightness(.58);
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .55s;
}
.gl-vehicleCard::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(transparent 45%, rgba(0,0,0,.86));
}
.gl-vehicleCard:hover .gl-vehicleCard__img img{
  filter:grayscale(0) brightness(.82); transform:scale(1.055);
}
.gl-vehicleCard__index{
  position:absolute !important; z-index:2; top:24px; left:25px;
  width:auto !important;
}
.gl-vehicleCard__copy{
  position:absolute !important; z-index:2;
  bottom:30px; left:28px; right:28px;
  transform:translateY(14px); transition:transform .4s;
  width:auto !important;
}
.gl-vehicleCard:hover .gl-vehicleCard__copy{ transform:none; }

/* ==========================================================================
   7. REASONS  (paper)
   ========================================================================== */
.gl-reasons__inner{
  display:grid !important; grid-template-columns:.8fr 1.2fr !important;
  gap:145px !important;
}
.gl-reasons__sticky{
  position:sticky !important; top:40px; align-self:start !important;
}
.gl-reasons__title .elementor-heading-title{ max-width:520px; }
.gl-reasons__lead .elementor-widget-container{ max-width:440px; margin-top:28px; }
.gl-reasonList{ border-top:1px solid rgba(0,0,0,.17); }
.gl-reason{
  display:grid !important; grid-template-columns:65px 1fr !important;
  gap:20px !important;
  border-bottom:1px solid rgba(0,0,0,.17);
  transition:padding-left .3s;
}
.gl-reason:hover{ padding-left:12px !important; }
.gl-reason__text .elementor-widget-container{ margin-top:10px; }

/* ==========================================================================
   8. PROCESS
   ========================================================================== */
.gl-process__head{ margin-bottom:58px !important; }
.gl-processGrid{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:0 !important; border-top:1px solid var(--gl-line);
}
.gl-process__item{
  position:relative !important;
  border-right:1px solid var(--gl-line);
}
.gl-process__item:not(:first-child){ padding-left:30px !important; }
.gl-process__item::before{
  content:"" !important; position:absolute !important;
  top:-2px !important; left:-1px !important;
  right:auto !important; bottom:auto !important;
  width:6px !important; height:3px !important;
  border:0 !important; border-radius:0 !important;
  background:var(--gl-accent) !important;
  transition:width .35s !important;
}
.gl-process__item:hover::before{ width:70px !important; }
.gl-process__title{ margin-top:70px !important; }
.gl-process__text .elementor-widget-container{ max-width:220px; }

/* ==========================================================================
   9. BOOKING
   ========================================================================== */
.gl-booking{ position:relative !important; overflow:hidden !important; }
.gl-booking::before{
  content:"" !important; position:absolute !important;
  top:auto !important; right:auto !important;
  bottom:-300px !important; left:-200px !important;
  width:650px !important; height:650px !important;
  border:0 !important; border-radius:50% !important;
  background:rgba(239,75,47,.11) !important; filter:blur(70px);
}
.gl-booking__shell{ position:relative !important; z-index:1; }
.gl-booking__inner{
  display:grid !important; grid-template-columns:.73fr 1.27fr !important;
  gap:130px !important;
}
.gl-booking__text .elementor-widget-container{ max-width:460px; margin-top:28px; }
.gl-bookingForm .elementor-field-group{ margin-bottom:0; }
.gl-bookingForm .elementor-field-textual{
  border-radius:0 !important; box-shadow:none;
}
.gl-bookingForm .elementor-field-textual:focus{
  border-color:var(--gl-accent) !important;
}
.gl-bookingForm .elementor-field-textual::placeholder{ color:#555552; opacity:1; }
.gl-bookingForm select.elementor-field-textual{ color-scheme:dark; }
/* Submit button — label left, arrow hard right, same as the source.
   For forms Elementor styles `.elementor-form .elementor-button>span` with
   justify-content:center, so space-between has to be set on that span; on the
   button itself it has one child and does nothing. `order` pins the arrow last
   regardless of the DOM order Elementor emits for the icon. */
.gl-bookingForm .elementor-button{
  display:flex !important; width:100%;
  /* beats .elementor-form .elementor-button.elementor-size-sm{min-height:40px} */
  min-height:57px !important; justify-content:space-between;
  transition:transform .25s, background .25s;
}
.gl-bookingForm .elementor-button > span,
.gl-bookingForm .elementor-button-content-wrapper{
  display:flex !important; width:100%; align-items:center;
  justify-content:space-between !important; gap:0 !important;
}
.gl-bookingForm .elementor-button-text{ order:0; }
.gl-bookingForm .elementor-button-icon{ order:1; margin:0 !important; }
.gl-bookingForm .elementor-button:hover{ transform:translateY(-3px); }

/* =========================================================================
   10. MINI CTA
   ========================================================================= */
.gl-miniCta .gl-eyebrow .elementor-heading-title::before{ background:rgba(255,255,255,.7); }
.gl-btn--light .elementor-button-icon{ color:inherit; }

/* --------------------------------------------------------------------------
   Fluid display sizes. These duplicate what the template already sets through
   Elementor's typography controls; they only take effect if your Elementor
   build does not support the "custom" font-size unit. Editing the size in the
   Elementor panel always wins over these.
   -------------------------------------------------------------------------- */
.gl-hero__title       .elementor-heading-title{ font-size:clamp(66px,6.3vw,112px); }
.gl-sectionIntro__title .elementor-heading-title{ font-size:clamp(42px,5vw,74px); }
.gl-about__title      .elementor-heading-title{ font-size:clamp(44px,4.4vw,70px); }
.gl-about__number     .elementor-heading-title{ font-size:clamp(150px,14vw,220px); }
.gl-services__title   .elementor-heading-title{ font-size:clamp(48px,5vw,76px); }
.gl-vehicles__title   .elementor-heading-title{ font-size:clamp(46px,5vw,75px); }
.gl-reasons__title    .elementor-heading-title{ font-size:clamp(48px,5vw,75px); }
.gl-process__heading  .elementor-heading-title{ font-size:clamp(48px,5vw,76px); }
.gl-booking__title    .elementor-heading-title{ font-size:clamp(52px,5vw,79px); }
.gl-miniCta__title    .elementor-heading-title{ font-size:clamp(38px,4vw,64px); }

/* ==========================================================================
   KEYFRAMES  (verbatim from the source)
   ========================================================================== */
@keyframes gl-fadeUp    { 0%{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes gl-imageIn   { 0%{opacity:0;transform:translateX(45px)} to{opacity:1;transform:none} }
@keyframes gl-slowZoom  { to{transform:scale(1.09)} }
@keyframes gl-slowZoomBg{ from{transform:translate(-50%,-50%) scale(1.035)}
                          to  {transform:translate(-50%,-50%) scale(1.09)} }
@keyframes gl-drift     { 50%{transform:translateY(-8px)} }
@keyframes gl-scrollLine{ 0%{transform:translateX(-110%)} 60%,to{transform:translateX(110%)} }
@keyframes gl-pulse     { 50%{opacity:.5} }
@keyframes gl-meter     { 0%{transform:translateX(-25%)} to{transform:translateX(35%)} }

/* ==========================================================================
   RESPONSIVE — the source breakpoints, verbatim: 1100 / 720 / 390
   ========================================================================== */
@media (max-width:1100px){
  .gl-shell{ width:min(100% - 40px, 960px) !important; }

  .gl-hero__copy{ max-width:660px !important; }
  .gl-hero__visual{ opacity:.58; width:98vw !important; right:-28vw; }

  .gl-sectionIntro{ grid-template-columns:1fr 1fr !important; }
  .gl-sectionIntro .gl-eyebrow{ grid-column:1 / -1; }

  .gl-about__inner{ grid-template-columns:.6fr 1.4fr !important; gap:55px !important; }
  .gl-about__aside{ display:none !important; }

  .gl-headSplit{ grid-template-columns:1fr 330px !important; }
  .gl-headSplit--wide{ grid-template-columns:1fr 330px !important; }

  .gl-vehicleGrid{ grid-template-columns:repeat(2,1fr) !important; height:850px !important; }
  .gl-reasons__inner{ gap:75px !important; }
  .gl-booking__inner{ gap:60px !important; }
}

@media (max-width:720px){
  .gl-shell{ width:calc(100% - 32px) !important; max-width:100% !important; }

  .gl-hero,.gl-hero__inner{ min-height:max(750px,100svh) !important; }
  .gl-hero__inner{
    justify-content:flex-start !important;   /* source: align-items:start */
    align-items:flex-start !important;
    width:calc(100% - 32px) !important;
    padding-top:150px !important; overflow:hidden !important;
  }
  .gl-hero__copy{ width:100% !important; max-width:100% !important; padding-top:54px !important; }
  .gl-hero__title .elementor-heading-title{ max-width:100%; }
  .gl-hero__lead .elementor-widget-container{ max-width:100%; margin-top:28px; }
  .gl-hero__actions{ flex-direction:column !important; align-items:flex-start !important; gap:22px !important; }
  .gl-hero__actions .gl-btn{ width:min(100%,310px); }
  .gl-hero__actions .gl-btn .elementor-button{ width:100%; }
  .gl-hero__proof{ gap:22px !important; margin-top:38px !important; }
  /* below 720 the source sizes this in % of .hero__inner, which is
     calc(100% - 32px) wide and therefore inset 16px on each side */
  .gl-hero__visual{
    clip-path:none; opacity:.42; top:110px; height:670px !important;
    width:150% !important; right:-68%;
  }
  .gl-hero__visual::after{
    background:
      linear-gradient(90deg,#0a0a0a 8%, rgba(10,10,10,.5) 53%, transparent),
      linear-gradient(transparent 52%, #0a0a0a);
  }
  .gl-hero__tag,.gl-hero__caption,.gl-scrollCue{ display:none !important; }

  .gl-brandRail__inner{ grid-template-columns:1fr !important; padding:25px 0 !important; }
  .gl-brandRail__label .elementor-heading-title{ text-align:center; margin-bottom:18px; }
  .gl-brandRail__list{ grid-template-columns:repeat(2,1fr) !important; gap:20px 0 !important; }
  .gl-brandRail__item:last-child{ grid-column:1 / -1; }

  .gl-about__inner{ grid-template-columns:1fr !important; gap:50px !important; }
  .gl-about__numberWrap{ min-height:140px !important; }
  .gl-about__numberLabel{ bottom:-4px; }

  .gl-headSplit,.gl-headSplit--wide{ grid-template-columns:1fr !important; gap:28px !important; }
  .gl-serviceGrid{ grid-template-columns:1fr !important; }
  /* min-height on the container floors this at its desktop 270px, so clear it */
  .gl-serviceCard__media{ height:245px !important; min-height:0 !important; }
  .gl-serviceCard__body{ min-height:230px !important; }

  .gl-sectionIntro{ grid-template-columns:1fr !important; gap:24px !important; }
  .gl-sectionIntro .gl-eyebrow{ grid-column:auto; }
  .gl-hotspotStage{ min-height:480px !important; }
  .gl-hotspotStage__car{ inset:4% 0 0; width:100% !important; height:92% !important; }
  .gl-hotspot{ width:45px !important; height:45px !important;
    -webkit-backdrop-filter:none; backdrop-filter:none; transform:none !important; }
  .gl-hotspot--body { top:43%; left:29%; }
  .gl-hotspot--light{ top:52%; left:58%; }
  .gl-hotspot--badge{ top:59%; left:76%; }
  .gl-hotspot__card{
    position:fixed !important; z-index:60;
    top:auto; bottom:calc(16px + env(safe-area-inset-bottom));
    left:16px !important; right:16px !important;
    width:auto !important; max-width:none !important;
    max-height:min(52vh,360px); overflow-y:auto;
    padding:22px !important; transform:translateY(18px);
  }
  .gl-hotspot:hover .gl-hotspot__card,
  .gl-hotspot:focus-within .gl-hotspot__card{ transform:translateY(0); }

  .gl-vehicleGrid{ grid-template-columns:1fr !important; height:auto !important; }
  .gl-vehicleCard{ height:430px; }

  .gl-reasons__inner{ grid-template-columns:1fr !important; gap:45px !important; }
  .gl-reasons__sticky{ position:static !important; }
  .gl-reason{ grid-template-columns:45px 1fr !important; }

  .gl-processGrid{ grid-template-columns:1fr 1fr !important; }
  .gl-process__item{ border-bottom:1px solid var(--gl-line); min-height:210px !important; }
  .gl-process__item:nth-child(odd){ padding-left:0 !important; }
  .gl-process__title{ margin-top:45px !important; }

  .gl-hero__title       .elementor-heading-title{ font-size:clamp(40px,12vw,52px); }
  .gl-sectionIntro__title .elementor-heading-title{ font-size:44px; }
  .gl-about__title      .elementor-heading-title{ font-size:45px; }
  .gl-about__number     .elementor-heading-title{ font-size:140px; }
  .gl-services__title   .elementor-heading-title{ font-size:44px; }
  .gl-vehicles__title   .elementor-heading-title{ font-size:44px; }
  .gl-reasons__title    .elementor-heading-title{ font-size:44px; }
  .gl-process__heading  .elementor-heading-title{ font-size:44px; }
  .gl-booking__title    .elementor-heading-title{ font-size:46px; }
  .gl-miniCta__title    .elementor-heading-title{ font-size:38px; }

  .gl-booking__inner{ grid-template-columns:1fr !important; gap:50px !important; }
  .gl-miniCta__inner{ flex-direction:column !important; align-items:flex-start !important; gap:32px !important; }
}

@media (max-width:390px){
  .gl-hero__title .elementor-heading-title{ font-size:clamp(38px,11.6vw,45px); }
  .gl-processGrid{ grid-template-columns:1fr !important; }
  .gl-process__item,.gl-process__item:not(:first-child){
    min-height:180px !important; padding-left:0 !important;
  }
}

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


/* ==========================================================================
   HEADER  —  Theme Builder template "Glitur — Header"
   Top bar + header row. The header overlays the hero exactly as the source
   does, but by pulling the next section up rather than by absolute
   positioning, so it does not depend on which ancestor a theme happens to
   position.
   ========================================================================== */

/* --- top bar ------------------------------------------------------------- */
/* Three nested containers each carrying Elementor's default padding put ~60px
   into a bar the source builds at 34px. Zero all of them. */
.gl-topbar, .gl-topbar__shell, .gl-topbar__inner, .gl-topbar__right,
.gl-siteHeader, .gl-siteHeader__shell, .gl-siteHeader__inner, .gl-brand{
  padding:0 !important;
}
.gl-topbar{
  position:relative; z-index:21;
  background:#050505 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.gl-topbar__inner{
  flex-direction:row !important; justify-content:space-between !important;
  align-items:center !important; min-height:34px !important;
}
.gl-topbar__right{
  flex-direction:row !important; align-items:center !important;
  gap:18px !important; width:auto !important;
}
.gl-topbar .elementor-heading-title a{ color:inherit; }
.gl-topbar .elementor-heading-title a:hover{ color:#fff; }
.gl-topbar__dot{
  flex:0 0 3px;
  width:3px !important; height:3px !important; min-height:0 !important;
  padding:0 !important; border-radius:50% !important;
  background:var(--gl-accent) !important;
}

/* --- header row ---------------------------------------------------------- */
.gl-siteHeader{
  position:relative !important; z-index:20;
  width:100%;
  background:transparent !important;
  border-bottom:1px solid var(--gl-line) !important;
  /* the source uses position:absolute;top:35px to float this over the hero.
     Pulling the following section up by the header's own height (92px + the
     1px rule) is the same result without an absolute-positioning dependency. */
  margin-bottom:-93px !important;
}
.gl-siteHeader__inner{
  flex-direction:row !important; align-items:center !important;
  gap:28px !important; height:92px !important; min-height:92px !important;
}

/* brand */
.gl-brand{
  flex-direction:row !important; align-items:center !important;
  gap:14px !important; width:auto !important; margin-right:auto !important;
  white-space:nowrap;
}
.gl-brand__logo{ width:auto !important; }
/* The source's logo is a clean transparent PNG with no shadow — reset anything
   the theme or Elementor's image styles might add on top of it. If a shadow is
   still visible after this, it is baked into the file: open the PNG on its own
   to check. */
.gl-brand__logo img{
  width:150px !important; height:auto !important;
  filter:none !important; box-shadow:none !important;
  -webkit-box-reflect:none !important;
  border:0 !important; border-radius:0 !important;
  background:none !important; mix-blend-mode:normal !important;
}
.gl-brand__word{ width:auto !important; }
.gl-brand__word .elementor-heading-title{ transform:translateY(1px); }

/* --- nav ----------------------------------------------------------------- */
.gl-nav{ width:auto !important; }
.gl-nav .elementor-nav-menu--main .elementor-nav-menu{ gap:22px; }
.gl-nav .elementor-nav-menu--main .elementor-item{
  position:relative;
  padding:0 !important;
  color:#b8b8b5;
  font-size:12px;
  white-space:nowrap;
  background:transparent !important;
  transition:color .3s;
}
.gl-nav .elementor-nav-menu--main .elementor-item:hover,
.gl-nav .elementor-nav-menu--main .elementor-item:focus,
.gl-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:#fff;
  background:transparent !important;
}

/* The underline. Elementor's own pointer animations grow from the centre or
   fade; the source grows from the left, so the pointer control is set to
   "none" and this draws it instead: a bar pinned to the left edge whose right
   inset animates from 100% (zero width) to 0 (full width).
   !important throughout because .e--pointer-* rules set width/left/height on
   the same pseudo-element at comparable specificity. */
.gl-nav .elementor-nav-menu--main .elementor-item::after{
  content:"" !important; display:block !important;
  position:absolute !important;
  top:auto !important; bottom:-9px !important;
  left:0 !important; right:100% !important;
  width:auto !important; height:1px !important;
  background-color:var(--gl-accent) !important;
  transition:right .3s !important;
  z-index:2;
}
.gl-nav .elementor-nav-menu--main .elementor-item:hover::after,
.gl-nav .elementor-nav-menu--main .elementor-item:focus::after,
.gl-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after{
  right:0 !important;
}
/* the current page keeps its underline without transitioning on load */
.gl-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after{
  transition:none !important;
}
/* Elementor draws some pointers with ::before — make sure none of it shows */
.gl-nav .elementor-nav-menu--main .elementor-item::before{
  content:none !important; display:none !important;
}

/* --- header CTA ---------------------------------------------------------- */
.gl-headerCta{ flex:0 0 auto; width:auto !important; }
.gl-headerCta .elementor-button{
  display:inline-flex !important; align-items:center;
  border-radius:0 !important; background:transparent;
  min-height:0; white-space:nowrap;
  transition:background .25s, color .25s;
}
.gl-headerCta .elementor-button:hover{ transform:none; }
/* the source keeps the arrow accent-coloured even on the inverted hover */
.gl-headerCta .elementor-button-icon,
.gl-headerCta .elementor-button:hover .elementor-button-icon{
  color:var(--gl-accent) !important;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  /* the nav widget switches itself to the burger here; the CTA hides, as in
     the source (.desktopNav,.headerCta{display:none}) */
  .gl-headerCta{ display:none !important; }

  /* The toggle reads "Valmynd" like the source, not a burger. The nav widget
     has no control for toggle text, so the icon is hidden and the label comes
     from CSS — change the word in the content: below if you ever need to.
     Elementor still sets aria-label on the toggle, so it stays announced. */
  .gl-nav .elementor-menu-toggle{
    padding:11px 15px !important; border-radius:0 !important;
    border:1px solid var(--gl-line) !important;
    background-color:transparent !important; color:#fff !important;
    width:auto !important; height:auto !important;
  }
  .gl-nav .elementor-menu-toggle i,
  .gl-nav .elementor-menu-toggle svg,
  .gl-nav .elementor-menu-toggle .e-font-icon-svg{ display:none !important; }
  .gl-nav .elementor-menu-toggle::before{
    content:"Valmynd";
    font-family:'Geist', Arial, sans-serif;
    font-size:11px; font-weight:500; line-height:1;
    letter-spacing:.1em; text-transform:uppercase;
    color:#fff; white-space:nowrap;
  }

  /* the panel */
  .gl-nav .elementor-nav-menu--dropdown{
    width:210px !important; margin-left:auto !important;
    left:auto !important; right:0 !important;
    padding:11px !important;
    background-color:#141414 !important;
    border:1px solid var(--gl-line) !important;
    box-shadow:0 20px 50px #000;
  }
  /* dropdown links inherit the theme's link colour otherwise — hence the blue */
  .gl-nav .elementor-nav-menu--dropdown a,
  .gl-nav .elementor-nav-menu--dropdown .elementor-item{
    color:#b8b8b5 !important;
    background-color:transparent !important;
    border-bottom:1px solid var(--gl-line);
    padding:12px !important;
    font-size:13px;
    fill:#b8b8b5 !important;
  }
  .gl-nav .elementor-nav-menu--dropdown a:hover,
  .gl-nav .elementor-nav-menu--dropdown a:focus,
  .gl-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
    color:#fff !important; background-color:transparent !important;
  }
  .gl-nav .elementor-nav-menu--dropdown li:last-child a{ border-bottom:0; }
  /* no growing underline inside the dropdown */
  .gl-nav .elementor-nav-menu--dropdown .elementor-item::after,
  .gl-nav .elementor-nav-menu--dropdown .elementor-item::before{
    content:none !important; display:none !important;
  }
}

@media (max-width:720px){
  /* the source drops the address and the hours here and centres what is left,
     so the top bar is just the phone number */
  .gl-topbar__inner{ justify-content:center !important; }
  .gl-topbar__address,
  .gl-topbar__hours,
  .gl-topbar__dot{ display:none !important; }

  .gl-siteHeader__inner{
    height:76px !important; min-height:76px !important; gap:12px !important;
  }
  .gl-siteHeader{ margin-bottom:-77px !important; }
  .gl-brand{ gap:10px !important; }
  .gl-brand__logo img{ width:112px !important; }
  .gl-brand__word .elementor-heading-title{ font-size:9px; letter-spacing:.13em; }

  /* the source turns the panel into a sheet inset 16px from both edges */
  .gl-nav .elementor-nav-menu--dropdown{
    position:fixed !important; z-index:50;
    top:110px !important; left:16px !important; right:16px !important;
    width:auto !important;
    max-height:calc(100dvh - 126px); overflow-y:auto;
  }
  .gl-nav .elementor-menu-toggle{ padding:10px 12px !important; }
  .gl-nav .elementor-menu-toggle::before{ font-size:10px; }
}

@media (max-width:390px){
  .gl-brand__logo img{ width:104px !important; }
  .gl-brand__word .elementor-heading-title{ font-size:8px; letter-spacing:.1em; }
}
/*end of home page*/


/* ==========================================================================
   GLITUR — BÓKA TÍMA (booking page)
   Addendum to the companion stylesheet. Append this BELOW the existing
   gliturforsida_7.css content in Elementor → Site Settings → Custom CSS —
   it depends on that file's tokens (--gl-*), the global [class*="gl-"]
   container-padding reset, and reuses .gl-shell, .gl-eyebrow, .gl-btn,
   .gl-booking / .gl-booking__inner / .gl-bookingForm, .gl-process__title
   and the 1100/720/390 breakpoints as-is — do not duplicate those, this
   file only adds what's new for this page.

   Measurement note: everything under "measured" below was read with
   getBoundingClientRect()/getComputedStyle() against
   https://glitur-ny-forsida.petur865795.chatgpt.site/boka-tima at a real
   ~1920px viewport. The extension's browser window would not accept a
   forced resize this session (it tracks the person's actual Chrome
   window, which happened to be ~1920px when this ran), so nothing below
   720px could be measured directly this time — the values marked
   REASONED extrapolate from this same design system's established
   720/390 idioms (already verified on the front page) rather than from
   a live capture. Spot-check these once you can size a window down.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HERO  — measured at 1920px
   -------------------------------------------------------------------------- */
.gl-pageHero{
  position:relative !important; overflow:hidden !important;
  background:#090909 !important;
  min-height:650px !important;
}
.gl-pageHero__grid{
  position:absolute !important; inset:0 !important; opacity:.14;
  padding:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:76px 76px;
}
/* right-half photo panel — plain rectangle, no clip-path on this page
   (measured: left:672px / 1920px = 35%, full height, object-fit:cover) */
.gl-pageHero__media{
  position:absolute !important; z-index:1;
  top:0 !important; left:35% !important; right:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important;
  overflow:hidden !important; padding:0 !important;
}
.gl-pageHero__media-img,
.gl-pageHero__media .elementor-widget-container,
.gl-pageHero__media img{
  width:100% !important; height:100% !important; max-width:none;
}
.gl-pageHero__media img{
  object-fit:cover;
  filter:saturate(.68) contrast(1.05) brightness(.62);
}

.gl-pageHero__inner{
  position:relative !important; z-index:2;
  min-height:650px !important;
}
.gl-pageHero__copy{ max-width:760px; }
.gl-pageHero__title{ margin-top:0; }
.gl-pageHero__lead .elementor-widget-container{ margin-top:32px; }

/* the "04 / BÓKUN" corner index — flex sibling of __copy inside __inner,
   align-self:flex-end; the ~38px inset from the hero's own bottom edge is
   reproduced directly since it isn't explained by inner's own padding */
.gl-pageHero__index{
  align-self:flex-end !important;
  margin-bottom:38px !important;
  width:auto !important;
}

/* --------------------------------------------------------------------------
   2. BOOKING (page variant) — .gl-booking / .gl-booking__inner /
   .gl-bookingForm are reused as-is from the front-page stylesheet
   (measured: identical .73fr 1.27fr / 130px gap grid and identical
   accent glow ::before). Everything below is new to this page.
   -------------------------------------------------------------------------- */
.gl-booking__copy{ max-width:460px; }
.gl-booking__copy .gl-booking__title{ margin-top:50px !important; }
.gl-booking__copy .gl-booking__text .elementor-widget-container{ margin-top:28px !important; }
.gl-booking__copy .gl-booking__contact{ margin-top:50px !important; }

.gl-booking__contact{ width:100%; }
.gl-booking__contactLabel{ margin-bottom:2px; }
.gl-booking__contactValue a,
.gl-booking__contactValue .elementor-heading-title a{ color:inherit; }
.gl-booking__contactValue a:hover{ color:var(--gl-accent-bright); }

/* the bordered form panel — measured: 1px solid var(--gl-line) border,
   background ~rgb(18,19,20) (== --gl-ink-soft), 42px padding. Scoped to
   .gl-booking--page so the front page's plain, unbordered form keeps its
   current look. */
.gl-booking--page .gl-bookingForm{
  background:var(--gl-ink-soft) !important;
  border:1px solid var(--gl-line) !important;
  padding:42px !important;
}
.gl-booking--page .gl-bookingForm .elementor-form-fields-wrapper{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:26px 22px !important;
}
.gl-booking--page .gl-bookingForm .elementor-field-group{ margin-bottom:0 !important; }
.gl-booking--page .gl-bookingForm .elementor-field-type-textarea,
.gl-booking--page .gl-bookingForm .elementor-field-type-submit,
.gl-booking--page .gl-bookingForm .bookingForm__wide{
  grid-column:1 / -1 !important;
}
.gl-booking--page .gl-bookingForm .elementor-field-textual{
  padding:12px 0 !important; font-size:13px !important;
}

/* --------------------------------------------------------------------------
   3. "HVAÐ GERIST NÆST?"  (paper, 3-item variant of the front page's
   process grid) — measured
   -------------------------------------------------------------------------- */
.gl-expectSection{ background:var(--gl-paper) !important; }
.gl-expectGrid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:0 !important;
  margin-top:58px !important;
  border-top:1px solid rgba(0,0,0,.18);
}
.gl-expectItem{
  padding:30px 35px 20px 0 !important;
  border-right:1px solid rgba(0,0,0,.18);
}
.gl-expectItem:not(:first-child){ padding-left:35px !important; }
.gl-expectItem__num{ font-family:'Geist Mono',monospace; }
.gl-expectItem__text .elementor-widget-container{ max-width:220px; }
/* .gl-expectItem__title reuses .gl-process__title's margin-top:70px (and
   its existing 720px override to 45px) verbatim — no rule needed here */

/* ==========================================================================
   RESPONSIVE — REASONED from this design system's existing 1100/720/390
   idioms (see file header note); re-measure once a narrow live window is
   available and true these up.
   ========================================================================== */
@media (max-width:1100px){
  .gl-pageHero__title{ font-size:clamp(40px,5vw,64px); }
  .gl-pageHero__inner{ padding-top:96px !important; }
}

@media (max-width:720px){
  .gl-pageHero{ min-height:620px !important; }
  .gl-pageHero__inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding-top:150px !important;
  }
  .gl-pageHero__copy{ max-width:100%; }
  .gl-pageHero__title{ font-size:clamp(36px,11vw,44px); }
  .gl-pageHero__lead .elementor-widget-container{ margin-top:24px; }
  .gl-pageHero__media{
    left:auto; right:-50%; top:0; bottom:0;
    width:140% !important; opacity:.35;
  }
  .gl-pageHero__index{ display:none !important; }

  .gl-booking__copy .gl-booking__title{ margin-top:32px !important; }
  .gl-booking__copy .gl-booking__text .elementor-widget-container{ margin-top:20px !important; }
  .gl-booking__copy .gl-booking__contact{ margin-top:32px !important; }

  .gl-booking--page .gl-bookingForm{ padding:26px !important; }
  .gl-booking--page .gl-bookingForm .elementor-form-fields-wrapper{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .gl-expectGrid{ grid-template-columns:1fr !important; margin-top:36px !important; }
  .gl-expectItem{
    border-right:0 !important;
    border-bottom:1px solid rgba(0,0,0,.18);
    padding:24px 0 !important;
  }
  .gl-expectItem:not(:first-child){ padding-left:0 !important; }
  .gl-expectItem:last-child{ border-bottom:0; }
}

/* ==========================================================================
   FIX PATCH — booking form (measured on the LIVE build, glitur.webdev.is)
   Paste this block at the very end of Site Settings → Custom CSS, after
   everything already there. Three separate bugs, all confirmed against
   the live DOM with getBoundingClientRect()/getComputedStyle():
   ========================================================================== */

/* 1. .gl-booking__inner is a "boxed" Elementor container, so Elementor
   auto-wraps its two children (.gl-booking__copy, .gl-bookingForm) in a
   single .e-con-inner div. That wrapper is the ONLY grid item, so it only
   ever lands in the first .73fr track (measured: 441.648px) — the 1.27fr
   track sits empty, and copy+form get squeezed into a flex-row inside the
   441px column together. That's the "form overlapping the copy text" and
   the collapsed, multi-line-wrapping form fields in the screenshot: the
   whole form (and its internal fields-wrapper grid) was rendering at
   ~261px wide instead of the intended ~768px.
   Fix: make the auto-inserted wrapper itself the two-column grid. */
.gl-booking__inner > .e-con-inner{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:.73fr 1.27fr !important;
  gap:130px !important;
  width:100% !important;
  max-width:100% !important;
}

/* 2. Field styling — measured: .elementor-field-textual was only ever
   getting box-shadow/border-radius/:focus from this stylesheet, so
   Elementor's own default (white background, mid-gray border on all
   four sides, dark gray text) was showing through unchallenged. Give it
   the dark, bottom-border-only look, matching this section's existing
   text colors (white values / labels measured directly off the live
   page's own eyebrow + heading colors in this dark section). */
.gl-bookingForm .elementor-field-textual{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid var(--gl-line) !important;
  color:#fff !important;
}
.gl-bookingForm .elementor-select-wrapper{
  border-bottom:1px solid var(--gl-line) !important;
}
.gl-bookingForm .elementor-select-wrapper select.elementor-field-textual{
  border-bottom:none !important;
  background:transparent !important;
  color:#fff !important;
}
.gl-bookingForm .elementor-field-group label{
  color:rgba(255,255,255,.52) !important;
  font-size:13px !important;
}

/* 3. Submit button — measured: no rule anywhere set the form's own
   button color, so it was rendering the theme/Kit's default green.
   Switch it to the design system's accent. */
.gl-bookingForm button.elementor-button{
  background-color:var(--gl-accent) !important;
  border-color:var(--gl-accent) !important;
  color:#fff !important;
}
.gl-bookingForm button.elementor-button:hover{
  background-color:var(--gl-accent-bright) !important;
  border-color:var(--gl-accent-bright) !important;
}
/*start of boka tima*/

/* ==========================================================================
   GLITUR — BÓKA TÍMA (booking page)  ·  v4

   HOW TO INSTALL (two parts — the first one matters most)

   1) THE FONT. Paste this ONE line at the very TOP of Elementor →
      Site Settings → Custom CSS, ABOVE gliturforsida_7.css. @import only
      works as the first rule in the box, so it must go above everything:

      @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

      The site declares 'Geist' everywhere but never loads it — there is not
      a single @font-face or @import on the page, so every heading, label and
      number has been rendering in Arial. That alone accounted for most of
      the remaining differences: with Geist loaded the hero h1 measures
      760x186 and the lead wraps to two lines (60px), exactly like the
      reference; without it the lead fits on one line (30px) and every
      block below shifts up. If you'd rather self-host, Elementor Pro →
      Custom Fonts with the Geist and Geist Mono woff2 files does the same
      job — just name them exactly "Geist" and "Geist Mono".

   2) THIS FILE. Replaces the previous boka-tima.css and every patch —
      delete everything from the old "GLITUR — BÓKA TÍMA" header down to the
      end of the box and paste this in its place, below gliturforsida_7.css.

   Depends on the base file for: the --gl-* tokens, the global [class*="gl-"]
   padding reset, .gl-shell (its 1100/720 rules already match the reference),
   .gl-eyebrow, .gl-btn, .gl-booking / .gl-booking__inner, .gl-bookingForm.

   MEASUREMENT NOTE — nothing here is reasoned. Every value was read with
   getBoundingClientRect()/getComputedStyle() off both pages, and every rule
   was verified by injecting it into the live page and re-measuring against
   the reference. Desktop at a real 1920px viewport; 768px and 390px by
   loading each page into a same-origin iframe at those widths so its real
   media queries run. Breakpoints are the reference's own: <1100px, <720px.

   THE ELEMENTOR "BOXED CONTAINER" TRAP, which caused three separate bugs
   on this page: a container whose content width is "boxed" gets an extra
   .e-con-inner div injected around ALL its children. Any flex/grid layout
   set on the container itself then applies to that single wrapper instead
   of to the real children. .gl-pageHero__inner and .gl-booking__inner are
   both boxed, so the layout has to be applied to "> .e-con-inner" in both
   places. Elementor also sets .e-con > .e-con-inner{height:100%}, which
   collapses to content height inside a min-height parent — hence the
   explicit align-self:stretch/height:auto on the hero wrapper.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HERO
   -------------------------------------------------------------------------- */
.gl-pageHero{
  position:relative !important; overflow:hidden !important;
  background:rgb(9,9,9) !important;
  min-height:650px !important;
}

/* The scrim — missing entirely from the build (::after was content:none).
   It's what keeps the headline readable and fades the photo out leftward. */
.gl-pageHero::after{
  content:"" !important;
  position:absolute !important; inset:0 !important; z-index:1;
  background:
    linear-gradient(90deg, rgb(9,9,9) 3%, rgba(9,9,9,.92) 31%, rgba(9,9,9,.35) 64%, rgba(9,9,9,.2)),
    linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.7)) !important;
  pointer-events:none;
}

/* Photo panel, from 35% across. z-index must stay BELOW the scrim — the
   build had it at 1, the scrim's own layer. */
.gl-pageHero__media{
  position:absolute !important; z-index:0 !important;
  inset:0 0 0 35% !important;
  width:auto !important; height:auto !important;
  overflow:hidden !important; padding:0 !important;
}
.gl-pageHero__media .elementor-widget-container,
.gl-pageHero__media img{
  width:100% !important; height:100% !important; max-width:none;
}
.gl-pageHero__media img{
  object-fit:cover;
  filter:saturate(.68) contrast(1.05) brightness(.62);
}

/* Grid overlay — .12 not .14, above the scrim, masked out across the right
   70% so it only reads over the dark side. The mask was missing. */
.gl-pageHero__grid{
  position:absolute !important; inset:0 !important; z-index:2;
  opacity:.12; padding:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:linear-gradient(90deg, #000, rgba(0,0,0,0) 70%);
          mask-image:linear-gradient(90deg, #000, rgba(0,0,0,0) 70%);
}

/* The hero row lives on the injected wrapper, not on __inner (see the
   boxed-container note above). Verified after: copy 760x317 at x=290,
   index 68 wide at x=1563 sitting 38px off the hero's bottom edge — all
   identical to the reference. */
.gl-pageHero__inner{
  position:relative !important; z-index:3;
  display:flex !important;
  align-items:stretch !important;
  min-height:650px !important;
  padding:110px 0 0 !important;
}
.gl-pageHero__inner > .e-con-inner{
  display:flex !important; flex-direction:row !important;
  align-items:center !important; justify-content:space-between !important;
  align-self:stretch !important; height:auto !important;
  width:100% !important; max-width:100% !important;
  padding:0 !important;
}
.gl-pageHero__copy{
  width:auto !important; max-width:760px !important;
  flex:0 1 auto !important;
  display:block !important; gap:0 !important;   /* kill the 20px container gap */
}
.gl-pageHero__copy > *{ margin:0 !important; }
.gl-pageHero__copy > .gl-eyebrow{ margin:0 0 23px !important; }

/* 102px on the reference vs 40px on the build. */
.gl-pageHero__title h1,
.gl-pageHero__title .elementor-heading-title{
  font-size:clamp(62px, 6.2vw, 102px) !important;
  line-height:.91 !important;
  letter-spacing:-.065em !important;
  font-weight:650 !important;
  max-width:760px !important;
  margin:0 !important;
}

.gl-pageHero__lead{ margin:32px 0 0 !important; }
.gl-pageHero__lead p,
.gl-pageHero__lead .elementor-widget-container{
  margin:0 !important;
  color:rgb(170,169,165) !important;
  font-size:17px !important;
  line-height:1.75 !important;
  max-width:570px !important;
}

.gl-pageHero__index{
  align-self:flex-end !important;
  margin-bottom:38px !important;
  width:auto !important; flex:0 0 auto !important;
}

/* --------------------------------------------------------------------------
   2. BOOKING (page variant)
   -------------------------------------------------------------------------- */

/* Same boxed-container trap as the hero: the .73fr 1.27fr grid has to go on
   the injected wrapper, or copy + form share the first 441.648px track and
   the form's own field grid collapses to ~81px columns (which is what wrapped
   every label over four lines). Verified after: copy 442 wide at x=290,
   form 768 wide at x=862 — identical to the reference. */
.gl-booking__inner > .e-con-inner{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:.73fr 1.27fr !important;
  gap:130px !important;
  width:100% !important; max-width:100% !important;
}

/* Copy column — reference is plain block flow; ours is a flex container that
   added a 20px gap between every widget. Measured stack, top of column:
   eyebrow +28 (h25), title +103, text +368, contact +467. */
.gl-booking__copy{
  max-width:460px;
  display:block !important; gap:0 !important;
}
.gl-booking__copy > *{ margin:0 !important; }
.gl-booking__copy > .gl-eyebrow{ margin-top:28px !important; }
.gl-booking__copy > .gl-booking__title{ margin-top:50px !important; }
.gl-booking__copy > .gl-booking__text{ margin-top:28px !important; }
.gl-booking__copy > .gl-booking__contact{ margin-top:50px !important; }

.gl-booking__copy .gl-booking__title h2,
.gl-booking__copy .gl-booking__title .elementor-heading-title{
  font-size:clamp(52px, 5vw, 79px) !important;
  line-height:.95 !important;                  /* build was 1.0 → 12px taller */
  letter-spacing:-.06em !important;
  font-weight:470 !important;
  margin:0 !important;
}
.gl-booking__copy .gl-booking__text p,
.gl-booking__copy .gl-booking__text .elementor-widget-container{
  margin:0 !important;
  font-size:14px !important; line-height:1.75 !important;
  max-width:460px !important;
  color:rgb(132,132,128) !important;
}

/* Contact block — reference: grid, 18px between the two items, each item
   46px tall (9px label, 13.5px line, 5px below it, then an 18px value at
   line-height 1.5). Note the label margin is set on the WIDGET only and
   zeroed on the heading inside it: putting 5px on both stacks to 10 and
   made each item 51px. Verified after: item 46, block 109 — matching. */
.gl-booking__contact{ width:100%; gap:18px !important; }
.gl-booking__contact > *{ gap:0 !important; }
.gl-booking__contactLabel{ margin:0 0 5px !important; }
.gl-booking__contactLabel .elementor-heading-title{
  font-size:9px !important;
  line-height:1.5 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  color:rgb(109,109,105) !important;
  margin:0 !important;
}
.gl-booking__contactValue{ margin:0 !important; }
.gl-booking__contactValue .elementor-heading-title{
  font-size:18px !important; line-height:1.5 !important; margin:0 !important;
}
.gl-booking__contactValue a,
.gl-booking__contactValue .elementor-heading-title a{ color:inherit; }
.gl-booking__contactValue a:hover{ color:var(--gl-accent-bright); }

/* The bordered panel. Reference background is rgb(18,19,20) — one step off
   --gl-ink-soft (rgb(17,18,19)) — so it's set literally. */
.gl-booking--page .gl-bookingForm{
  background:rgb(18,19,20) !important;
  border:1px solid var(--gl-line) !important;
  padding:42px !important;
}
.gl-booking--page .gl-bookingForm .elementor-form-fields-wrapper{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:26px 22px !important;
}
.gl-booking--page .gl-bookingForm .elementor-field-type-textarea,
.gl-booking--page .gl-bookingForm .elementor-field-type-submit,
.gl-booking--page .gl-bookingForm .bookingForm__wide{
  grid-column:1 / -1 !important;
}
/* Elementor's gutter system fights the grid: the wrapper carries
   margin:0 -5px -10px and each group padding:0 5px, which made the tracks
   335.17px instead of 330.17px; and .elementor-col-50 sets each group to
   width:50% INSIDE its own grid cell, which is why the inputs measured
   157.6px. Verified after: tracks 330.172/330.18, input 330, textarea
   682x129 — all identical to the reference. */
.gl-booking--page .gl-bookingForm .elementor-form-fields-wrapper{
  margin:0 !important; width:100% !important;
}
.gl-booking--page .gl-bookingForm .elementor-field-group{
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important;
}
.gl-booking--page .gl-bookingForm .elementor-field-textual{ width:100% !important; }

/* On the reference the <form> IS the panel, so its grid rows share out the
   extra height the booking column gives it (that's why its inputs measure
   51px, not their natural 43). In the widget the grid is buried two levels
   down, so its rows were content-sized and ~90px of dead space collected at
   the bottom of the panel. Give the chain a height and the rows stretch the
   same way. Verified after: copy column and form both 564 tall, exactly
   like the reference. */
.gl-booking--page .gl-bookingForm form.elementor-form{ height:100% !important; }
.gl-booking--page .gl-bookingForm .elementor-form-fields-wrapper{
  height:100% !important; align-content:stretch !important;
}
.gl-booking--page .gl-bookingForm .elementor-field-group{
  display:grid !important; gap:10px !important;
  align-items:stretch !important; align-content:stretch !important;
}

/* Fields — the build was rendering Elementor's untouched default (white
   background, rgb(105,114,125) border all round, rgb(122,122,122) Roboto
   text) because nothing ever set background, border, colour or font-family
   on .elementor-field-textual. */
.gl-bookingForm .elementor-field-textual,
.gl-bookingForm textarea.elementor-field-textual,
.gl-bookingForm select.elementor-field-textual{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgb(62,62,61) !important;   /* measured; not --gl-line */
  border-radius:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-family:'Geist',sans-serif !important;
  font-size:13px !important;
  padding:12px 0 !important;
  transition:border-color .25s !important;
}
.gl-bookingForm .elementor-field-textual:focus{
  border-bottom-color:var(--gl-accent) !important;
  box-shadow:none !important;
}
.gl-bookingForm .elementor-field-textual::placeholder{
  color:rgb(85,85,82) !important; opacity:1;
}
.gl-bookingForm .elementor-select-wrapper,
.gl-bookingForm .elementor-select-wrapper::before{
  border:0 !important; background:transparent !important;
}
.gl-bookingForm select.elementor-field-textual{ color-scheme:dark; }
/* reference textarea is rows=5 → 128.5px; the widget renders rows=4.
   Tidier fix: set Rows = 5 on the Message field in Elementor and drop this. */
/* height, not min-height: with the rows now stretching (above) a min-height
   textarea grew to 137px, while the reference's stays at its natural
   rows=5 height of 128.5 and lets the label row take the slack instead. */
.gl-bookingForm textarea.elementor-field-textual{
  height:128.5px !important; min-height:128.5px !important; resize:vertical;
}

/* Labels — reference rgb(139,139,135), 10px, .12em, uppercase, 10px above
   the field; build had rgb(122,122,122) at 16px in sentence case. */
.gl-bookingForm .elementor-field-group > label{
  display:block !important;
  color:rgb(139,139,135) !important;
  font-family:'Geist',sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  margin-bottom:0 !important;   /* the group's 10px grid gap does this now */
  padding:0 !important;
}

/* Submit button — accent, Geist 12px/730, .045em, 57px min-height, square,
   label left and an 18px arrow right, lifting 3px on hover. The build was
   the theme's default green at 15px/500 with no arrow. The arrow is a
   ::after because the widget's icon slot is empty; setting that icon in
   Elementor instead is equivalent. */
.gl-bookingForm button.elementor-button{
  display:flex !important;
  align-items:center !important; justify-content:space-between !important;
  gap:35px !important;
  min-height:57px !important;
  padding:0 24px !important;
  border:0 !important; border-radius:0 !important;
  background-color:var(--gl-accent) !important;
  color:#fff !important;
  font-family:'Geist',sans-serif !important;
  font-size:12px !important; font-weight:730 !important;
  letter-spacing:.045em !important; text-transform:none !important;
  transition:transform .25s, background-color .25s, color .25s !important;
}
.gl-bookingForm button.elementor-button::after{
  content:"\2192";
  font-size:18px; line-height:1; font-weight:400;
}
.gl-bookingForm button.elementor-button:hover{
  background-color:var(--gl-accent-bright) !important;
  transform:translateY(-3px) !important;
}

/* --------------------------------------------------------------------------
   3. "HVAÐ GERIST NÆST?"
   -------------------------------------------------------------------------- */
.gl-expectSection{
  background:var(--gl-paper) !important;
  color:rgb(17,17,17) !important;
}
/* the section's boxed wrapper adds a 20px container gap between the eyebrow
   and the grid, pushing the grid to +187 instead of the reference's +167 */
.gl-expectSection .gl-shell > .e-con-inner{ gap:0 !important; }
.gl-expectGrid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:0 !important;
  margin-top:40px !important;              /* build had 58px */
  border-top:1px solid rgba(0,0,0,.18);
}
.gl-expectItem{
  display:block !important; gap:0 !important;
  min-height:230px !important;
  padding:30px 35px 20px 0 !important;
  border-right:1px solid rgba(0,0,0,.18);
}
.gl-expectItem:not(:first-child){ padding-left:35px !important; }
/* The reference article is plain block flow — spacing comes only from the
   h3's own margin. Ours is a flex container that added a 20px gap, AND the
   h3's widget wrapper carries .gl-process__title (margin-top:70px) while the
   h3 inside carries another 70px, so the space under the number came out at
   160px instead of 70px. Verified after: number at +38, h3 at +124, text at
   +172, item 230 tall at 1920; 36/102/150/198 at 390 — matching exactly. */
.gl-expectItem__num,
.gl-expectItem__title,
.gl-expectItem__text{ margin:0 !important; }
.gl-expectItem__num .elementor-heading-title{
  font-family:'Geist Mono',monospace !important;
  font-size:10px !important;
  color:var(--gl-accent) !important;
  margin:0 !important;
}
.gl-expectItem__title h3,
.gl-expectItem__title .elementor-heading-title{
  font-size:25px !important;
  margin:70px 0 10px !important;
}
.gl-expectItem__text p,
.gl-expectItem__text .elementor-widget-container{
  margin:0 !important;
  font-size:13px !important;
  color:rgb(112,112,108) !important;
  max-width:none !important;               /* build capped this at 220px */
}

/* ==========================================================================
   4. RESPONSIVE — measured at 768 and 390, not reasoned.
   The reference's entire responsive story for this page is these two blocks.
   ========================================================================== */
@media (max-width:1100px){
  /* the only thing the reference changes here, besides .gl-shell, which the
     base file already handles identically */
  .gl-booking__inner > .e-con-inner{ gap:60px !important; }
}

@media (max-width:720px){
  .gl-pageHero,
  .gl-pageHero__inner{ min-height:590px !important; }
  /* stays a flex ROW, bottom-aligned — it does not become a column */
  .gl-pageHero__inner{ padding:165px 0 70px !important; }
  .gl-pageHero__inner > .e-con-inner{ align-items:flex-end !important; }
  /* photo goes full-bleed behind the copy at 62% — it is NOT hidden */
  .gl-pageHero__media{ inset:0 !important; opacity:.62; }
  /* scrim flips from a left-to-right fade to a top-to-bottom one */
  .gl-pageHero::after{
    background:linear-gradient(rgba(9,9,9,.35), rgba(9,9,9,.62) 36%, rgb(9,9,9) 92%) !important;
  }
  .gl-pageHero__title h1,
  .gl-pageHero__title .elementor-heading-title{
    font-size:clamp(43px, 12vw, 58px) !important;
    max-width:100% !important;
    overflow-wrap:break-word;
  }
  .gl-pageHero__lead p,
  .gl-pageHero__lead .elementor-widget-container{ font-size:15px !important; }
  .gl-pageHero__index{ display:none !important; }

  .gl-booking{ padding:90px 0 !important; }
  .gl-booking__inner > .e-con-inner{
    grid-template-columns:1fr !important;
    gap:50px !important;
  }
  .gl-booking__copy{ max-width:none !important; }
  .gl-booking--page .gl-bookingForm{ padding:26px 20px !important; }
  .gl-booking--page .gl-bookingForm .elementor-form-fields-wrapper{
    grid-template-columns:1fr !important;
  }
  .gl-booking--page .gl-bookingForm .elementor-field-type-textarea,
  .gl-booking--page .gl-bookingForm .elementor-field-type-submit{
    grid-column:auto !important;
  }

  .gl-expectGrid{ grid-template-columns:1fr !important; }
  /* the reference keeps the bottom border on the LAST item too */
  .gl-expectItem,
  .gl-expectItem:not(:first-child){
    min-height:190px !important;
    padding:28px 0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(0,0,0,.18) !important;
  }
  .gl-expectItem__title h3,
  .gl-expectItem__title .elementor-heading-title{ margin-top:50px !important; }
}

/* ==========================================================================
   5. ENTRANCE ANIMATION
   The reference plays exactly two animations on this page, both on load.
   There is no scroll-reveal system on it — no IntersectionObserver, no
   scroll listener, nothing parked at opacity:0 waiting for a class:
     .pageHero__copy   fadeUp   0.85s ease  0ms   both
     .pageHero__media  imageIn  1.1s  ease  80ms  both
   The build had neither. Keyframes copied verbatim.
   ========================================================================== */
@keyframes fadeUp{
  0%{ opacity:0; transform:translateY(28px); }
  100%{ opacity:1; transform:none; }
}
@keyframes imageIn{
  0%{ opacity:0; transform:translate(45px); }
  100%{ opacity:1; transform:none; }
}
.gl-pageHero__copy{ animation:fadeUp .85s ease 0s 1 normal both; }
.gl-pageHero__media{ animation:imageIn 1.1s ease .08s 1 normal both; }

/* the reference ships this guard too */
@media (prefers-reduced-motion:reduce){
  .gl-pageHero__copy,
  .gl-pageHero__media{ animation-duration:.01ms !important; }
}
/*end of boka tima*/
/* ==========================================================================
   GLITUR — ÞJÓNUSTA (services page)  ·  v1

   INSTALL: append this at the END of Elementor → Site Settings → Custom CSS,
   below gliturforsida_7.css and below boka-tima.css. Order matters: this
   file reuses the hero, booking-panel and form rules that boka-tima.css
   already ships, and only adds what is new to this page.

   Requires the Geist webfont line at the TOP of the box (the one from
   boka-tima.css's install note). Without it every measurement below drifts.

   Reused as-is, nothing repeated here:
     · --gl-* tokens, [class*="gl-"] padding reset, .gl-shell (+ its 1100/720
       widths), .gl-eyebrow, .gl-btn                    → gliturforsida_7.css
     · the whole .gl-pageHero block, the fadeUp/imageIn animations, and every
       .gl-bookingForm field/label/button rule           → boka-tima.css
   The hero and booking containers on this page are built "boxed" on purpose,
   exactly like Bóka tíma, so those rules (which target "> .e-con-inner")
   apply unchanged. Everything new here is built "full", so it has no
   .e-con-inner wrapper and is targeted directly.

   MEASUREMENT NOTE: values read with getBoundingClientRect()/getComputedStyle()
   off https://glitur-ny-forsida.petur865795.chatgpt.site/thjonusta at a real
   1920px viewport, and at 768/390 through a same-origin iframe so its real
   media queries run. Breakpoints are the reference's own: <1100px and <720px.
   Reference baseline at 1920, for anyone re-checking:
     intro grid  260 / 607 / 352 at x=290, 60px gaps, section 538 tall
     detail rows 1340 wide, media 724 + copy 616 (media flips right on row 02)
     mini CTA    copy 541 at x=290, button 211 at x=1419
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE INTRO  (paper band under the hero)
   -------------------------------------------------------------------------- */
.gl-pageIntro{ padding:125px 0 !important; }
.gl-pageIntro--light{
  background:var(--gl-paper) !important;
  color:rgb(17,17,17) !important;
}
.gl-pageIntro__grid{
  display:grid !important;
  grid-template-columns:.48fr 1.12fr .65fr !important;
  align-items:start !important;
  gap:60px !important;
}
.gl-pageIntro__grid > *{ margin:0 !important; width:auto !important; }
/* the eyebrow keeps its 23px bottom margin — invisible at 1920 where it has
   its own column, but it is what sets the gap once the grid folds to
   1fr 1fr (<1100) and to a single column (<720) */
.gl-pageIntro__grid > .gl-eyebrow{ margin:0 0 23px !important; }
.gl-pageIntro__title h2,
.gl-pageIntro__title .elementor-heading-title{
  font-size:clamp(45px, 4.7vw, 72px) !important;
  font-weight:550 !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  margin:0 !important;
}
.gl-pageIntro__text p,
.gl-pageIntro__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(103,103,99) !important;
  font-size:15px !important;
  line-height:1.8 !important;
}

/* --------------------------------------------------------------------------
   2. DETAIL ROWS  (three alternating image / copy bands)
   -------------------------------------------------------------------------- */
.gl-detailRows{
  background:rgb(17,18,19) !important;
  padding:125px 0 !important;
}
.gl-detailRows__inner{ gap:0 !important; }

.gl-detailRow{
  display:grid !important;
  grid-template-columns:1.08fr .92fr !important;   /* 724 / 616 at 1340 */
  gap:0 !important;
  min-height:500px !important;
  border-top:1px solid var(--gl-line);
}
.gl-detailRow:last-child{ border-bottom:1px solid var(--gl-line); }

/* Placement is stated explicitly rather than left to DOM order. Row 01 came
   back from the import with its copy before its media, which flipped that
   row (photo on the right, next to row 02's, instead of on the left) and,
   at mobile, stacked its photo UNDER the text. With grid-column/grid-row
   pinned, the alternation holds no matter which order the two containers
   sit in inside the row — so it also survives any later drag in Elementor.
   Odd rows: photo left in the 1.08fr track. Even rows: photo right. */
.gl-detailRow > .gl-detailRow__media{
  grid-column:1 !important; grid-row:1 !important; order:0 !important;
}
.gl-detailRow > .gl-detailRow__copy{
  grid-column:2 !important; grid-row:1 !important; order:0 !important;
}
.gl-detailRow:nth-child(2n) > .gl-detailRow__media{ grid-column:2 !important; }
.gl-detailRow:nth-child(2n) > .gl-detailRow__copy{ grid-column:1 !important; }

.gl-detailRow__media{
  position:relative !important;
  overflow:hidden !important;
  min-height:500px !important;
  padding:0 !important;
}
.gl-detailRow__media::after{
  content:"" !important;
  position:absolute !important; inset:0 !important; z-index:1;
  background:linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.52)) !important;
  pointer-events:none;
}
/* the image widget has to fill the cell, so it is taken out of flow */
.gl-detailRow__img{
  position:absolute !important; inset:0 !important;
  width:auto !important; height:auto !important; padding:0 !important;
}
.gl-detailRow__img .elementor-widget-container,
.gl-detailRow__img img{
  width:100% !important; height:100% !important; max-width:none;
}
.gl-detailRow__img img{
  object-fit:cover;
  filter:grayscale(.38) saturate(.74) brightness(.74);
  transition:transform .9s, filter .5s;
}
.gl-detailRow:hover .gl-detailRow__img img{
  filter:grayscale(0) saturate(.9) brightness(.86);
  transform:scale(1.035);
}
/* the number badge over the bottom-left corner of the photo */
.gl-detailRow__num{
  position:absolute !important; z-index:2;
  bottom:24px !important; left:28px !important;
  width:auto !important;
}
.gl-detailRow__num .elementor-heading-title{
  font-family:'Geist Mono',monospace !important;
  font-size:11px !important;
  color:var(--gl-accent-bright) !important;
  margin:0 !important;
}

.gl-detailRow__copy{
  display:flex !important; flex-direction:column !important;
  justify-content:center !important;
  gap:0 !important;
  padding:65px 70px !important;
}
.gl-detailRow__copy > *{ margin:0 !important; }
.gl-detailRow__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-detailRow__title h2,
.gl-detailRow__title .elementor-heading-title{
  font-size:clamp(44px, 4.4vw, 68px) !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  margin:0 !important;
}
.gl-detailRow__text{ margin:28px 0 !important; }
.gl-detailRow__text p,
.gl-detailRow__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(146,146,142) !important;
  font-size:15px !important;
  line-height:1.8 !important;
}
.gl-detailRow__note .elementor-heading-title{
  margin:0 !important;
  color:rgb(212,212,208) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
}

/* --------------------------------------------------------------------------
   3. BOOKING (compact variant)
   The panel, fields, labels and submit button all come from boka-tima.css;
   those rules are scoped to .gl-booking--page, so the same seven are
   repeated here for --compact. Everything unscoped there (field colours,
   label type, button styling) already applies to this form.
   -------------------------------------------------------------------------- */
.gl-booking--compact{ padding:120px 0 145px !important; }

.gl-booking--compact .gl-bookingForm{
  background:rgb(18,19,20) !important;
  border:1px solid var(--gl-line) !important;
  padding:42px !important;
}
.gl-booking--compact .gl-bookingForm .elementor-form-fields-wrapper{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:26px 22px !important;
  margin:0 !important; width:100% !important;
  height:100% !important; align-content:stretch !important;
}
.gl-booking--compact .gl-bookingForm .elementor-field-type-textarea,
.gl-booking--compact .gl-bookingForm .elementor-field-type-submit{
  grid-column:1 / -1 !important;
}
.gl-booking--compact .gl-bookingForm .elementor-field-group{
  display:grid !important; gap:10px !important;
  align-items:stretch !important; align-content:stretch !important;
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important;
}
.gl-booking--compact .gl-bookingForm .elementor-field-textual{ width:100% !important; }
.gl-booking--compact .gl-bookingForm form.elementor-form{ height:100% !important; }

/* copy column — same block flow as the Bóka tíma one, minus the contact list */
.gl-booking--compact .gl-booking__copy{
  max-width:460px;
  display:block !important; gap:0 !important;
}
.gl-booking--compact .gl-booking__copy > *{ margin:0 !important; }
.gl-booking--compact .gl-booking__copy > .gl-eyebrow{ margin-top:28px !important; }
.gl-booking--compact .gl-booking__copy > .gl-booking__title{ margin-top:50px !important; }
.gl-booking--compact .gl-booking__copy > .gl-booking__text{ margin-top:28px !important; }

/* --------------------------------------------------------------------------
   4. MINI CTA  (accent band at the foot of the page)
   -------------------------------------------------------------------------- */
.gl-miniCta{
  background:var(--gl-accent) !important;
  padding:70px 0 !important;
}
.gl-miniCta__inner{
  display:flex !important; flex-direction:row !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:0 !important;
}
.gl-miniCta__copy{
  width:auto !important; flex:0 1 auto !important;
  gap:0 !important;
}
.gl-miniCta__copy > *{ margin:0 !important; }
.gl-miniCta__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-miniCta__title h2,
.gl-miniCta__title .elementor-heading-title{
  font-size:clamp(38px, 4vw, 64px) !important;
  line-height:1.5 !important;   /* measured 96px on 64px — the reference just
                                   inherits body 1.5 here; our headings don't */
  letter-spacing:-.05em !important;
  margin:0 !important;
}
.gl-miniCta__btn{ width:auto !important; flex:0 0 auto !important; }

/* white button, inverting on hover. The ↗ is drawn with ::after because the
   widget's icon slot is empty — setting the button icon in Elementor
   instead is equivalent. Measured 12px here, unlike the form's 18px arrow. */
.gl-btn--light .elementor-button{
  background-color:#fff !important;
  color:rgb(17,17,17) !important;
  border:0 !important; border-radius:0 !important;
  display:flex !important;
  align-items:center !important; justify-content:space-between !important;
  gap:35px !important;
  min-height:57px !important;
  padding:0 24px !important;
  font-family:'Geist',sans-serif !important;
  font-size:12px !important; font-weight:730 !important;
  letter-spacing:.045em !important; text-transform:none !important;
  transition:transform .25s, background-color .25s, color .25s !important;
}
.gl-btn--light .elementor-button::after{
  content:"\2197"; font-size:12px; line-height:1; font-weight:400;
}
.gl-btn--light .elementor-button:hover{
  background-color:rgb(17,17,17) !important;
  color:#fff !important;
  transform:translateY(-3px) !important;
}

/* ==========================================================================
   5. RESPONSIVE — measured, not reasoned.
   These are the reference's own rules for this page's sections; .gl-shell,
   .gl-pageHero and the booking/form blocks are handled by the two files
   above and are not repeated.
   ========================================================================== */
@media (max-width:1100px){
  .gl-pageIntro__grid{ grid-template-columns:1fr 1fr !important; }
  .gl-pageIntro__grid > .gl-eyebrow{ grid-column:1 / -1 !important; }
  .gl-detailRow__copy{ padding:50px 42px !important; }
}

@media (max-width:720px){
  .gl-pageIntro{ padding:85px 0 !important; }
  .gl-pageIntro__grid{
    grid-template-columns:1fr !important;
    gap:25px !important;
  }
  .gl-pageIntro__grid > .gl-eyebrow{ grid-column:auto !important; }
  .gl-pageIntro__title h2,
  .gl-pageIntro__title .elementor-heading-title{ font-size:44px !important; }

  .gl-detailRows{ padding:80px 0 !important; }
  .gl-detailRow{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  /* photo above the copy on EVERY row, whichever order the two containers
     happen to be in inside the row */
  .gl-detailRow > .gl-detailRow__media,
  .gl-detailRow:nth-child(2n) > .gl-detailRow__media{
    grid-column:1 !important; grid-row:1 !important;
  }
  .gl-detailRow > .gl-detailRow__copy,
  .gl-detailRow:nth-child(2n) > .gl-detailRow__copy{
    grid-column:1 !important; grid-row:2 !important;
  }
  .gl-detailRow__media{ min-height:280px !important; }
  .gl-detailRow__copy{ padding:45px 22px 60px !important; }

  .gl-miniCta__inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:32px !important;
  }
}

/*vutton started here*/


/* ==========================================================================
   GLITUR — VOTTUN (certification page)  ·  v1

   INSTALL: append at the END of Elementor → Site Settings → Custom CSS,
   below gliturforsida_7.css, boka-tima.css and thjonusta.css. The Geist
   @import line still has to be the first rule in the box.

   Reused as-is, nothing repeated here:
     · tokens, [class*="gl-"] padding reset, .gl-shell, .gl-eyebrow,
       .gl-btn, .gl-btn--text, .gl-arrowLink            → gliturforsida_7.css
     · the whole .gl-pageHero block + the fadeUp/imageIn animations
                                                        → boka-tima.css
     · .gl-pageIntro / .gl-pageIntro--light / .gl-pageIntro__grid,
       .gl-miniCta and .gl-btn--light                   → thjonusta.css
   Only two sections on this page are new: the CABAS standard section and
   the Mercedes certificate band.

   The hero container is built "boxed" on purpose, exactly like the other
   two pages, so the rules that target "> .e-con-inner" apply unchanged.
   Everything else is "full", so it has no wrapper and is targeted directly.
   Grid placement is stated explicitly (grid-column/grid-row) rather than
   left to DOM order, the same guard added to the Þjónusta rows.

   MEASUREMENT NOTE: read with getBoundingClientRect()/getComputedStyle()
   off https://glitur-ny-forsida.petur865795.chatgpt.site/vottun inside a
   fixed-width iframe at 1920, then 768 and 390 so its real media queries
   run. Breakpoints are the reference's own: <1100px and <720px.
   Reference baseline at 1920:
     intro    section 394 tall, same 260 / 607 / 352 grid as Þjónusta
     standard section 749 tall, copy 500 at x=290, list 720 at x=910,
              four items 720x119, item grid 62px + 638
     band     section 389 tall, 810 / 160 / 230 tracks, 70px gaps,
              copy at x=290, logo 120 wide at x=1170, button 230 at x=1400
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STANDARD SECTION  (CABAS process)
   -------------------------------------------------------------------------- */
.gl-standardSection{
  background:rgb(16,17,18) !important;
  padding:135px 0 !important;
}
.gl-standardSection__grid{
  display:grid !important;
  grid-template-columns:.82fr 1.18fr !important;   /* 500 / 720 at 1340 */
  gap:120px !important;
  /* no align-items: the reference lets both columns stretch to the row, so
     the copy column measures the same 479 as the list rather than 428 */
}
.gl-standardSection__copy{
  grid-column:1 !important; grid-row:1 !important;
  display:block !important; gap:0 !important;
}
.gl-standardSection__copy > *{ margin:0 !important; }
.gl-standardSection__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-standardSection__title h2,
.gl-standardSection__title .elementor-heading-title{
  font-size:clamp(47px, 4.7vw, 73px) !important;
  font-weight:530 !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  margin:0 !important;
}
.gl-standardSection__text{ margin:29px 0 !important; }
.gl-standardSection__text p,
.gl-standardSection__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(144,144,140) !important;
  font-size:15px !important;
  line-height:1.8 !important;
}

/* the underlined "Bóka tjónaskoðun ↗" link. .gl-btn--text already gives it
   the transparent background and bottom rule; these are the values this
   page's version differs by. The arrow is a ::after because the widget's
   icon slot is empty — setting the button icon in Elementor is equivalent. */
.gl-standardSection__link .elementor-button{
  display:inline-flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:55px !important;
  min-height:0 !important;
  padding:0 0 9px !important;
  border-bottom:1px solid rgb(85,85,85) !important;
  background:transparent !important;
  color:#fff !important;
  font-family:'Geist',sans-serif !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.6 !important;      /* measured 28px tall overall, not 22 */
  letter-spacing:normal !important;
  transform:none !important;
}
.gl-standardSection__link .elementor-button::after{
  content:"\2197";
  color:var(--gl-accent);
  font-size:12px; line-height:1; font-weight:400;
}
.gl-standardSection__link .elementor-button:hover{
  border-bottom-color:var(--gl-accent) !important;
  transform:none !important;
}

/* the numbered list — a top rule, then one rule under every item */
.gl-standardList{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important; gap:0 !important;
  /* longhands, not the shorthand: Elementor's own container border rules
     otherwise leave this at the initial medium (3px) width */
  border-top-width:1px !important;
  border-top-style:solid !important;
  border-top-color:rgba(255,255,255,.12) !important;
}
.gl-standardList__item{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  gap:20px !important;
  padding:28px 0 !important;
  border-bottom-width:1px !important;
  border-bottom-style:solid !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
}
.gl-standardList__num{
  grid-column:1 !important;
  width:auto !important;
}
.gl-standardList__num .elementor-heading-title{
  font-family:'Geist Mono',monospace !important;
  font-size:10px !important;
  color:var(--gl-accent) !important;
  margin:0 !important;
}
.gl-standardList__body{
  grid-column:2 !important;
  display:block !important; gap:0 !important;
}
.gl-standardList__body > *{ margin:0 !important; }
.gl-standardList__title h3,
.gl-standardList__title .elementor-heading-title{
  font-size:22px !important;
  font-weight:550 !important;
  line-height:1.5 !important;      /* 33px — the item is 119 tall with it */
  letter-spacing:normal !important;
  margin:0 !important;
}
.gl-standardList__text{ margin:8px 0 0 !important; }
.gl-standardList__text p,
.gl-standardList__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(125,125,121) !important;
  font-size:13px !important;
  line-height:1.65 !important;
}

/* --------------------------------------------------------------------------
   2. CERTIFICATE BAND  (Mercedes-Benz, accent background)
   -------------------------------------------------------------------------- */
.gl-certificateBand{
  background:var(--gl-accent) !important;
  padding:95px 0 !important;
}
.gl-certificateBand__inner{
  display:grid !important;
  grid-template-columns:1fr 160px auto !important;
  align-items:center !important;
  gap:70px !important;
}
.gl-certificateBand__copy{
  grid-column:1 !important;
  display:block !important; gap:0 !important;
}
.gl-certificateBand__copy > *{ margin:0 !important; }
.gl-certificateBand__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-certificateBand__title h2,
.gl-certificateBand__title .elementor-heading-title{
  font-size:clamp(42px, 4.4vw, 66px) !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  margin:0 !important;
}
.gl-certificateBand__text p,
.gl-certificateBand__text .elementor-widget-container{
  margin:0 !important;
  color:rgba(255,255,255,.78) !important;
  font-size:16px !important;
  line-height:1.7 !important;
  max-width:620px !important;
}
/* the mark is a flat white knockout of the logo, so any coloured source
   file still lands correctly */
.gl-certificateBand__mark{
  grid-column:2 !important;
  width:auto !important;
  justify-self:start !important;   /* the mark sits at the track's left edge
                                      (x=1170), not centred inside it */
  text-align:left !important;
}
.gl-certificateBand__mark .elementor-widget-container{ text-align:left !important; }
.gl-certificateBand__mark img{
  width:120px !important; height:auto !important;
  filter:brightness(0) invert(1);
}
.gl-certificateBand__btn{
  grid-column:3 !important;
  width:auto !important;
}

/* ==========================================================================
   3. RESPONSIVE — measured, not reasoned.
   .gl-shell, .gl-pageHero, .gl-pageIntro and .gl-miniCta are handled by the
   files above and are not repeated here.
   ========================================================================== */
@media (max-width:1100px){
  .gl-standardSection__grid{ gap:65px !important; }
  /* the band drops to copy + logo, with the button on its own row */
  .gl-certificateBand__inner{ grid-template-columns:1fr 100px !important; }
  .gl-certificateBand__mark{ grid-column:2 !important; }
  .gl-certificateBand__btn{
    grid-column:1 / -1 !important;
    justify-self:start !important;
  }
}

@media (max-width:720px){
  .gl-standardSection{ padding:85px 0 !important; }
  .gl-standardSection__grid{
    grid-template-columns:1fr !important;
    gap:55px !important;
  }
  /* copy above the list, whichever order the two containers sit in */
  .gl-standardSection__copy{ grid-column:1 !important; grid-row:1 !important; }
  .gl-standardList{ grid-column:1 !important; grid-row:2 !important; }

  .gl-certificateBand{ padding:75px 0 !important; }
  .gl-certificateBand__inner{
    grid-template-columns:1fr !important;
    gap:35px !important;
  }
  .gl-certificateBand__copy,
  .gl-certificateBand__mark,
  .gl-certificateBand__btn{ grid-column:1 !important; }
  .gl-certificateBand__mark img{ width:85px !important; }
}

/*end  of vutton*/

/* ==========================================================================
   GLITUR — FYRIRTÆKIÐ (company page)  ·  v1

   INSTALL: append at the END of Elementor → Site Settings → Custom CSS,
   below gliturforsida_7.css, boka-tima.css, thjonusta.css and vottun.css.
   The Geist @import line still has to be the first rule in the box.

   Reused as-is, nothing repeated here:
     · tokens, [class*="gl-"] padding reset, .gl-shell, .gl-eyebrow, .gl-btn
                                                        → gliturforsida_7.css
     · the whole .gl-pageHero block + the fadeUp/imageIn animations
                                                        → boka-tima.css
     · .gl-miniCta and .gl-btn--light                    → thjonusta.css
   Three sections are new: the 35+ history block, the four-up value grid and
   the full-bleed image statement.

   The hero container is built "boxed" like the other pages so its existing
   rules apply unchanged; everything new is "full" (no .e-con-inner wrapper)
   and pinned with grid-column/grid-row rather than left to DOM order.

   MEASUREMENT NOTE: read with getBoundingClientRect()/getComputedStyle() off
   https://glitur-ny-forsida.petur865795.chatgpt.site/fyrirtaekid inside a
   fixed-width iframe at 1920, then 768 and 390 so its real media queries run.
   Breakpoints are the reference's own: <1100px and <720px.
   Reference baseline at 1920:
     history  section 573 tall, 427 / 793 tracks with a 120px gap,
              number block 427x270 at x=290, copy 793 at x=837
     values   section 678 tall, heading 397 / 883 (gap 60, 55px below),
              grid four 334.5 tracks, each article 285 tall, 30px padding
     stmt     section 650 tall, copy 1340 at x=290, h2 720 wide, button 201
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HISTORY  (paper band, outlined 35+)
   -------------------------------------------------------------------------- */
.gl-historySection{
  background:var(--gl-paper) !important;
  color:rgb(17,17,17) !important;
  padding:135px 0 !important;
}
.gl-historySection__grid{
  display:grid !important;
  grid-template-columns:.7fr 1.3fr !important;      /* 427 / 793 at 1340 */
  align-items:center !important;
  gap:120px !important;
}

/* the big outlined figure. Elementor cannot express -webkit-text-stroke, so
   the knockout is done here: transparent fill, 1px black stroke at 30%. */
.gl-historySection__number{
  grid-column:1 !important; grid-row:1 !important;
  position:relative !important;
  display:flex !important; flex-direction:row !important;
  align-items:flex-start !important;
  gap:0 !important;
  min-height:270px !important;
  width:auto !important;
}
.gl-historySection__figure{ width:auto !important; }
.gl-historySection__figure .elementor-heading-title{
  margin:0 !important;
  font-size:clamp(190px, 19vw, 285px) !important;
  font-weight:500 !important;
  line-height:.8 !important;
  letter-spacing:-.1em !important;
  color:transparent !important;
  -webkit-text-stroke:1px rgba(0,0,0,.3);
          text-stroke:1px rgba(0,0,0,.3);
}
.gl-historySection__plus{ width:auto !important; }
.gl-historySection__plus .elementor-heading-title{
  margin:0 !important;
  font-size:52px !important;
  color:var(--gl-accent) !important;
}
/* the caption is pinned to the bottom-left of the block, under the figure */
.gl-historySection__label{
  position:absolute !important;
  bottom:0 !important; left:12px !important;
  width:auto !important;
}
.gl-historySection__label .elementor-heading-title{
  margin:0 !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgb(114,114,110) !important;
}

.gl-historySection__copy{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important; gap:0 !important;
}
.gl-historySection__copy > *{ margin:0 !important; }
.gl-historySection__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-historySection__title h2,
.gl-historySection__title .elementor-heading-title{
  font-size:clamp(48px, 5vw, 76px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  margin:0 !important;
}
/* the two paragraphs run on with no gap between them, as on the reference */
.gl-historySection__text p,
.gl-historySection__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(102,102,98) !important;
  font-size:15px !important;
  line-height:1.85 !important;
}

/* --------------------------------------------------------------------------
   2. VALUE GRID
   -------------------------------------------------------------------------- */
.gl-valueSection{
  background:rgb(17,18,19) !important;
  padding:130px 0 !important;
}
.gl-valueSection__inner{ gap:0 !important; }
.gl-valueSection__heading{
  display:grid !important;
  grid-template-columns:.45fr 1fr !important;       /* 397 / 883 at 1340 */
  align-items:end !important;
  gap:60px !important;
  margin-bottom:55px !important;
}
.gl-valueSection__heading > *{ margin:0 !important; }
.gl-valueSection__heading > .gl-eyebrow{ grid-column:1 !important; }
.gl-valueSection__title{ grid-column:2 !important; }
.gl-valueSection__title h2,
.gl-valueSection__title .elementor-heading-title{
  font-size:clamp(48px, 5vw, 76px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  margin:0 !important;
}

/* one box around the four cells, one rule between them. Longhands rather
   than the shorthand: Elementor's own container border rules otherwise
   leave these at the initial medium (3px) width. */
.gl-valueGrid{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:0 !important;
  border-width:1px !important;
  border-style:solid !important;
  border-color:rgba(255,255,255,.12) !important;
}
.gl-valueItem{
  min-height:285px !important;
  padding:30px !important;
  gap:0 !important;
  border-right-width:1px !important;
  border-right-style:solid !important;
  border-right-color:rgba(255,255,255,.12) !important;
}
.gl-valueItem:last-child{ border-right-width:0 !important; }
.gl-valueItem > *{ margin:0 !important; }
.gl-valueItem__num .elementor-heading-title{
  margin:0 !important;
  font-family:'Geist Mono',monospace !important;
  font-size:10px !important;
  color:var(--gl-accent) !important;
}
.gl-valueItem__title h3,
.gl-valueItem__title .elementor-heading-title{
  margin:85px 0 12px !important;
  font-size:24px !important;
  line-height:1.5 !important;
}
.gl-valueItem__text p,
.gl-valueItem__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(129,129,125) !important;
  font-size:13px !important;
  line-height:1.7 !important;
}

/* --------------------------------------------------------------------------
   3. IMAGE STATEMENT  (full-bleed photo, copy over it)
   -------------------------------------------------------------------------- */
.gl-imageStatement{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  min-height:650px !important;
  padding:0 !important;
}
.gl-imageStatement__media{
  position:absolute !important; inset:0 !important; z-index:0;
  width:auto !important; height:auto !important; padding:0 !important;
}
.gl-imageStatement__img,
.gl-imageStatement__img .elementor-widget-container{
  width:100% !important; height:100% !important;
}
.gl-imageStatement__img img{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover;
  filter:saturate(.75) brightness(.68);
}
/* the scrim that keeps the headline readable on the left */
.gl-imageStatement::after{
  content:"" !important;
  position:absolute !important; inset:0 !important; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.46) 55%, rgba(0,0,0,.1)) !important;
  pointer-events:none;
}
.gl-imageStatement__copy{
  position:relative !important; z-index:2;
  display:block !important; gap:0 !important;
}
.gl-imageStatement__copy > *{ margin:0 !important; }
.gl-imageStatement__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-imageStatement__title h2,
.gl-imageStatement__title .elementor-heading-title{
  font-size:clamp(55px, 6vw, 88px) !important;
  line-height:.95 !important;
  letter-spacing:-.065em !important;
  max-width:720px !important;
  margin:0 0 38px !important;
}
.gl-imageStatement__btn{ width:auto !important; }

/* accent button with an 18px arrow, same primary as the booking form's */
.gl-btn--primary .elementor-button{
  display:inline-flex !important;
  align-items:center !important; justify-content:space-between !important;
  gap:35px !important;
  min-height:57px !important;
  padding:0 24px !important;
  border:0 !important; border-radius:0 !important;
  background-color:var(--gl-accent) !important;
  color:#fff !important;
  font-family:'Geist',sans-serif !important;
  font-size:12px !important; font-weight:730 !important;
  letter-spacing:.045em !important; text-transform:none !important;
  transition:transform .25s, background-color .25s, color .25s !important;
}
.gl-btn--primary .elementor-button::after{
  content:"\2197"; font-size:18px; line-height:1; font-weight:400;
}
.gl-btn--primary .elementor-button:hover{
  background-color:var(--gl-accent-bright) !important;
  transform:translateY(-3px) !important;
}

/* ==========================================================================
   4. RESPONSIVE — measured, not reasoned.
   .gl-shell, .gl-pageHero and .gl-miniCta are handled by the files above.
   ========================================================================== */
@media (max-width:1100px){
  .gl-historySection__grid{ gap:65px !important; }
  /* the four-up becomes a 2x2: the second cell loses its right rule and the
     top row gains a bottom rule */
  .gl-valueGrid{ grid-template-columns:repeat(2, 1fr) !important; }
  .gl-valueItem:nth-child(2){ border-right-width:0 !important; }
  .gl-valueItem:nth-child(-n+2){
    border-bottom-width:1px !important;
    border-bottom-style:solid !important;
    border-bottom-color:rgba(255,255,255,.12) !important;
  }
}

@media (max-width:720px){
  .gl-historySection{ padding:90px 0 !important; }
  .gl-historySection__grid{
    grid-template-columns:1fr !important;
    gap:55px !important;
  }
  .gl-historySection__number{
    grid-column:1 !important; grid-row:1 !important;
    min-height:190px !important;
  }
  .gl-historySection__copy{ grid-column:1 !important; grid-row:2 !important; }
  .gl-historySection__figure .elementor-heading-title{ font-size:175px !important; }

  .gl-valueSection{ padding:90px 0 !important; }
  .gl-valueSection__heading{
    grid-template-columns:1fr !important;
    gap:25px !important;
  }
  .gl-valueSection__heading > .gl-eyebrow,
  .gl-valueSection__title{ grid-column:1 !important; }
  .gl-valueGrid{ grid-template-columns:1fr !important; }
  .gl-valueItem,
  .gl-valueItem:nth-child(2){
    min-height:230px !important;
    border-right-width:0 !important;
    border-bottom-width:1px !important;
    border-bottom-style:solid !important;
    border-bottom-color:rgba(255,255,255,.12) !important;
  }
  .gl-valueItem:last-child{ border-bottom-width:0 !important; }
  .gl-valueItem__title h3,
  .gl-valueItem__title .elementor-heading-title{ margin-top:55px !important; }

  .gl-imageStatement{ min-height:570px !important; }
  .gl-imageStatement__title h2,
  .gl-imageStatement__title .elementor-heading-title{ font-size:54px !important; }
}
/*end of fyrirtaekio*/

/* ==========================================================================
   GLITUR — GÆÐAVIÐURKENNING MERCEDES-BENZ  ·  v1

   INSTALL: append at the END of Elementor → Site Settings → Custom CSS,
   below gliturforsida_7.css, boka-tima.css, thjonusta.css, vottun.css and
   fyrirtaekid.css. The Geist @import line still has to be the first rule
   in the box.

   Reused as-is, nothing repeated here:
     · tokens, [class*="gl-"] padding reset, .gl-shell, .gl-eyebrow,
       .gl-btn, .gl-btn--text, .gl-arrowLink            → gliturforsida_7.css
     · the whole .gl-pageHero block + the fadeUp/imageIn animations
                                                        → boka-tima.css
     · .gl-miniCta and .gl-btn--light                    → thjonusta.css
   One section is new: the certificate panel itself.

   The hero container is built "boxed" like the other pages so its rules
   apply unchanged; the new section is "full" (no .e-con-inner wrapper) and
   pinned with grid-column/grid-row rather than left to DOM order.

   MEASUREMENT NOTE: read with getBoundingClientRect()/getComputedStyle() off
   https://glitur-ny-forsida.petur865795.chatgpt.site/gaedavidurkenning-mercedes-benz
   inside a fixed-width iframe at 1920, 768 and 390, with transitions and
   animations disabled so nothing is measured mid-flight.
   Reference baseline at 1920:
     section 820 tall, 140px padding, 439 / 781 tracks with a 120px gap
     mark    439x480 at x=290, logo 210 wide, 35px above the caption
     copy    781 at x=849 — eyebrow +0, h2 +40, text +192, list +277,
             link +512; list items 49 tall each
   The reference has no <1100px rule for this section: it stays two-column
   at 768 (219 / 389, still a 120px gap) and only folds at <720px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CERTIFICATE PANEL
   -------------------------------------------------------------------------- */
.gl-mercedesCert{
  background:var(--gl-paper) !important;
  color:rgb(17,17,17) !important;
  padding:140px 0 !important;
}
.gl-mercedesCert__grid{
  display:grid !important;
  grid-template-columns:.72fr 1.28fr !important;   /* 439 / 781 at 1340 */
  align-items:center !important;
  gap:120px !important;
}

/* the dark plaque: a radial pool of light behind a knocked-out white logo */
.gl-mercedesCert__mark{
  grid-column:1 !important; grid-row:1 !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  gap:35px !important;
  min-height:480px !important;
  padding:0 !important;
  color:#fff !important;
  background:radial-gradient(circle, rgb(48,50,52), rgb(17,17,17) 65%) !important;
}
.gl-mercedesCert__markImg{ width:auto !important; }
.gl-mercedesCert__markImg img{
  width:210px !important; height:auto !important;
  filter:brightness(0) invert(1);
}
.gl-mercedesCert__markLabel{ width:auto !important; }
.gl-mercedesCert__markLabel .elementor-heading-title{
  margin:0 !important;
  text-align:center !important;
  font-size:11px !important;
  line-height:1.7 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:#fff !important;
}

.gl-mercedesCert__copy{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important; gap:0 !important;
}
.gl-mercedesCert__copy > *{ margin:0 !important; }
.gl-mercedesCert__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-mercedesCert__title h2,
.gl-mercedesCert__title .elementor-heading-title{
  font-size:clamp(48px, 5vw, 76px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  margin:0 !important;
}
.gl-mercedesCert__text p,
.gl-mercedesCert__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(100,100,96) !important;
  font-size:15px !important;
  line-height:1.85 !important;
}

/* the checklist: a rule above the group and one under every row. Longhands
   rather than the shorthand, so Elementor's own container border custom
   properties can't leave these at the initial medium (3px) width. */
.gl-mercedesCert__list{
  display:block !important; gap:0 !important;
  margin:30px 0 35px !important;
  border-top-width:1px !important;
  border-top-style:solid !important;
  border-top-color:rgba(0,0,0,.16) !important;
}
.gl-mercedesCert__item{
  padding:14px 0 !important;
  border-bottom-width:1px !important;
  border-bottom-style:solid !important;
  border-bottom-color:rgba(0,0,0,.16) !important;
}
.gl-mercedesCert__item .elementor-heading-title{
  margin:0 !important;
  font-size:13px !important;
  line-height:1.5 !important;   /* 19.5px — the row is 49 tall with it */
  color:rgb(17,17,17) !important;
}

/* "Lesa um vottun Glitur ↗" — same underlined link as the Vottun page's,
   but sitting on paper, so the label is ink rather than white. The arrow is
   a ::after because the widget's icon slot is empty; setting the button icon
   in Elementor is equivalent. */
.gl-mercedesCert__link .elementor-button{
  display:inline-flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:55px !important;
  min-height:0 !important;
  padding:0 0 9px !important;
  border-bottom:1px solid rgb(85,85,85) !important;
  background:transparent !important;
  color:rgb(17,17,17) !important;
  font-family:'Geist',sans-serif !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.5 !important;   /* 18px — the link is 28 tall with it */
  letter-spacing:normal !important;
  transform:none !important;
}
.gl-mercedesCert__link .elementor-button::after{
  content:"\2197";
  color:var(--gl-accent);
  font-size:12px; line-height:1; font-weight:400;
}
.gl-mercedesCert__link .elementor-button:hover{
  border-bottom-color:var(--gl-accent) !important;
  transform:none !important;
}

/* ==========================================================================
   RESPONSIVE — measured, not reasoned.
   There is deliberately no <1100px block: the reference leaves this section
   two-column all the way down to 720px. .gl-shell, .gl-pageHero and
   .gl-miniCta are handled by the files above.
   ========================================================================== */
@media (max-width:720px){
  .gl-mercedesCert{ padding:90px 0 !important; }
  .gl-mercedesCert__grid{
    grid-template-columns:1fr !important;
    gap:55px !important;
  }
  /* plaque above the copy, whichever order the containers sit in */
  .gl-mercedesCert__mark{
    grid-column:1 !important; grid-row:1 !important;
    min-height:360px !important;
  }
  .gl-mercedesCert__copy{ grid-column:1 !important; grid-row:2 !important; }
}
/*start of hafa*/


/* ==========================================================================
   GLITUR — HAFA SAMBAND (contact page)  ·  v1

   INSTALL: append at the END of Elementor → Site Settings → Custom CSS,
   below gliturforsida_7.css, boka-tima.css, thjonusta.css, vottun.css,
   fyrirtaekid.css and the Mercedes file. The Geist @import line still has
   to be the first rule in the box.

   Reused as-is, nothing repeated here:
     · tokens, [class*="gl-"] padding reset, .gl-shell, .gl-eyebrow, .gl-btn
                                                        → gliturforsida_7.css
     · the whole .gl-pageHero block, the fadeUp/imageIn animations, and every
       unscoped .gl-bookingForm field / label / button rule
                                                        → boka-tima.css
   One section is new: the contact cards + form. The hero only needs the two
   overrides this page's variant makes (a wider copy column and its own
   headline clamp), so it carries .gl-pageHero--contact.

   Note on the form: unlike Bóka tíma, the reference gives this one NO panel
   — no border, no background, no padding. boka-tima.css scopes the panel to
   .gl-booking--page, so nothing has to be undone; the field grid and the
   field-group rules that live under that same scope are repeated here for
   .gl-contactForm.

   MEASUREMENT NOTE: read with getBoundingClientRect()/getComputedStyle() off
   https://glitur-ny-forsida.petur865795.chatgpt.site/hafa-samband inside a
   fixed-width iframe at 1920, 768 and 390, transitions and animations
   disabled so nothing is measured mid-flight.
   Reference baseline at 1920:
     section 908 tall, 130px padding, 451.797 / 803.203 tracks, 85px gap
     cards   452 wide at x=290, two 224.898 columns, each card 210 tall
     form    803 at x=827, h2 72px, field grid 390.602 x2, button full width
   Breakpoints: the grid folds to one column at <1100px (the cards stay 2-up
   and the fields stay 2-up there); everything goes single-column at <720px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — contact variant
   -------------------------------------------------------------------------- */
.gl-pageHero--contact .gl-pageHero__copy{ max-width:940px !important; }
.gl-pageHero--contact .gl-pageHero__title h1,
.gl-pageHero--contact .gl-pageHero__title .elementor-heading-title{
  max-width:940px !important;
  font-size:clamp(60px, 4.65vw, 88px) !important;
}

/* --------------------------------------------------------------------------
   2. CONTACT SECTION
   -------------------------------------------------------------------------- */
.gl-contactSection{
  background:rgb(17,18,19) !important;
  padding:130px 0 !important;
}
.gl-contactSection__grid{
  display:grid !important;
  grid-template-columns:.72fr 1.28fr !important;   /* 452 / 803 at 1340 */
  gap:85px !important;
}

/* the 2x2 card block: one box around it, one rule between the cells. It
   aligns to the top of the row rather than stretching with the form. */
.gl-contactCards{
  grid-column:1 !important; grid-row:1 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;
  align-self:start !important;
  /* longhands, not the shorthand, so Elementor's own container border custom
     properties can't leave these at the initial medium (3px) width */
  border-width:1px !important;
  border-style:solid !important;
  border-color:rgba(255,255,255,.12) !important;
}
.gl-contactCard{
  display:flex !important; flex-direction:column !important;
  gap:0 !important;
  min-height:210px !important;
  padding:28px !important;
  border-right-width:1px !important;
  border-right-style:solid !important;
  border-right-color:rgba(255,255,255,.12) !important;
  border-bottom-width:1px !important;
  border-bottom-style:solid !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
}
.gl-contactCard:nth-child(2n){ border-right-width:0 !important; }
.gl-contactCard:nth-last-child(-n+2){ border-bottom-width:0 !important; }
.gl-contactCard > *{ margin:0 !important; }

.gl-contactCard__label .elementor-heading-title{
  margin:0 !important;
  font-size:9px !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  color:var(--gl-accent) !important;
}
/* auto top margin pushes the value (and the note under it) to the bottom of
   the card, so all four line up however long the label wraps */
.gl-contactCard__value{ margin:auto 0 12px !important; }
.gl-contactCard__value .elementor-heading-title{
  margin:0 !important;
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  color:#fff !important;
}
.gl-contactCard__note .elementor-heading-title{
  margin:0 !important;
  font-size:11px !important;
  color:rgb(119,119,115) !important;
}
/* the arrow marks the three cards that are links; the opening-hours card
   has no link, so it carries --plain and gets no arrow */
.gl-contactCard__note .elementor-heading-title::after{
  content:" \2197";
  white-space:pre;
}
.gl-contactCard__note--plain .elementor-heading-title::after{ content:"" !important; }
.gl-contactCard:hover .gl-contactCard__value .elementor-heading-title{
  color:var(--gl-accent-bright) !important;
}

/* --------------------------------------------------------------------------
   3. FORM COLUMN
   -------------------------------------------------------------------------- */
.gl-contactFormWrap{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important; gap:0 !important;
}
.gl-contactFormWrap > *{ margin:0 !important; }
.gl-contactFormWrap > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-contactFormWrap__title h2,
.gl-contactFormWrap__title .elementor-heading-title{
  font-size:clamp(45px, 4.8vw, 72px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  margin:0 0 35px !important;
}

/* no panel on this page — the fields sit straight on the section */
.gl-contactForm{
  background:none !important;
  border:0 !important;
  padding:0 !important;
}
.gl-contactForm .elementor-form-fields-wrapper{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:26px 22px !important;
  margin:0 !important; width:100% !important;
}
.gl-contactForm .elementor-field-type-textarea,
.gl-contactForm .elementor-field-type-submit{
  grid-column:1 / -1 !important;
}
.gl-contactForm .elementor-field-group{
  display:grid !important; gap:10px !important;
  align-items:stretch !important; align-content:stretch !important;
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important;
}
.gl-contactForm .elementor-field-textual{
  width:100% !important;
  line-height:1.5 !important;   /* 19.5px — makes the inputs 45 tall, as measured */
}
/* the labels sit above their field rather than beside it here, so their own
   line box counts: 1.5 puts each row at 70, matching the reference */
.gl-contactForm .elementor-field-group > label{ line-height:1.5 !important; }
/* rows=5 at this line-height is 122.5, not the 128.5 the booking page pins */
.gl-contactForm textarea.elementor-field-textual{
  height:122.5px !important; min-height:122.5px !important;
}

/* --------------------------------------------------------------------------
   5. NATIVE DROPDOWN LIST  (applies to every gl-bookingForm on the site)
   The open list of a <select> is drawn by the browser, not by page CSS, so
   the field rules above never reach it. Chrome paints it from the element's
   colour-scheme and, on Windows/Linux, from the options' own colours.

   Measured: the reference has colour-scheme:dark on the select and leaves
   its options transparent — which is exactly what this site already does,
   so the light popup is the reference's behaviour too, not a build error.
   Painting the options explicitly is therefore a deliberate improvement on
   the reference rather than a correction toward it.

   Scoped to .gl-bookingForm rather than this page, so the Bóka tíma and
   Þjónusta forms are fixed by the same paste — no need to reopen those files.
   -------------------------------------------------------------------------- */
.gl-bookingForm select.elementor-field-textual{
  color-scheme:dark !important;
}
.gl-bookingForm select.elementor-field-textual option{
  background-color:#121314 !important;
  color:#fff !important;
}

/* ==========================================================================
   4. RESPONSIVE — measured, not reasoned.
   .gl-shell and .gl-pageHero are handled by the files above.
   ========================================================================== */
@media (max-width:1100px){
  /* the two columns stack, but the cards stay 2-up and so do the fields */
  .gl-contactSection__grid{ grid-template-columns:1fr !important; }
  .gl-contactCards{ grid-column:1 !important; grid-row:1 !important; }
  .gl-contactFormWrap{ grid-column:1 !important; grid-row:2 !important; }
}

@media (max-width:720px){
  .gl-contactSection{ padding:90px 0 !important; }
  .gl-contactCards{ grid-template-columns:1fr !important; }
  /* one rule under every card, none under the last */
  .gl-contactCard,
  .gl-contactCard:nth-child(2n),
  .gl-contactCard:nth-last-child(-n+2){
    border-right-width:0 !important;
    border-bottom-width:1px !important;
    border-bottom-style:solid !important;
    border-bottom-color:rgba(255,255,255,.12) !important;
  }
  .gl-contactCard:last-child{ border-bottom-width:0 !important; }

  .gl-contactForm .elementor-form-fields-wrapper{
    grid-template-columns:1fr !important;
  }
  .gl-contactForm .elementor-field-type-textarea,
  .gl-contactForm .elementor-field-type-submit{ grid-column:auto !important; }
  /* the generic <720 rule pads .bookingForm; this page's form has none */
  .gl-contactForm{ padding:0 !important; }
}

/*start of abendingar*/
/* ==========================================================================
   GLITUR — ÁBENDINGAR (tips page)  ·  v1

   INSTALL: append at the END of Elementor → Site Settings → Custom CSS,
   below all the earlier page files. The Geist @import line still has to be
   the first rule in the box.

   Reused as-is, nothing repeated here:
     · tokens, [class*="gl-"] padding reset, .gl-shell, .gl-eyebrow, .gl-btn
                                                        → gliturforsida_7.css
     · the whole .gl-pageHero block + the fadeUp/imageIn animations
                                                        → boka-tima.css
     · .gl-miniCta and .gl-btn--light                    → thjonusta.css
     · .gl-btn--primary (accent button with the 18px arrow)
                                                        → fyrirtaekid.css
   Two sections are new: the six-up tips grid and the report band.

   The hero container is built "boxed" like the other pages so its rules
   apply unchanged; the new sections are "full" (no .e-con-inner wrapper).

   MEASUREMENT NOTE: read with getBoundingClientRect()/getComputedStyle() off
   https://glitur-ny-forsida.petur865795.chatgpt.site/abendingar inside a
   fixed-width iframe at 1920, 768 and 390, transitions and animations
   disabled so nothing is measured mid-flight.
   Reference baseline at 1920:
     tips   section 1048 tall, 130px padding, heading 397 / 883 (gap 60),
            grid three 446.3 tracks 65px below it, each article 285 tall
     report section 442 tall, 100px padding, copy 790 at x=290,
            button 221 at x=1409, both bottom-aligned with an 80px gap
   There is no <1100px block for either section — the tips grid stays 3-up
   at 768 (242 tracks) and the band stays a row; both fold only at <720px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIPS GRID
   -------------------------------------------------------------------------- */
.gl-tipsSection{
  background:var(--gl-paper) !important;
  color:rgb(17,17,17) !important;
  padding:130px 0 !important;
}
.gl-tipsSection__inner{ gap:0 !important; }
.gl-tipsSection__heading{
  display:grid !important;
  grid-template-columns:.45fr 1fr !important;      /* 397 / 883 at 1340 */
  align-items:end !important;
  gap:60px !important;
}
.gl-tipsSection__heading > *{ margin:0 !important; }
.gl-tipsSection__heading > .gl-eyebrow{ grid-column:1 !important; }
.gl-tipsSection__title{ grid-column:2 !important; }
.gl-tipsSection__title h2,
.gl-tipsSection__title .elementor-heading-title{
  font-size:clamp(48px, 5vw, 76px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  margin:0 !important;
}

/* This grid rules its cells differently from the Fyrirtækið one: the
   container carries only the top and left edges, and every cell carries its
   own bottom and right — so a six-cell 3x2 closes cleanly without any
   nth-child exceptions. Longhands rather than the shorthand, so Elementor's
   own container border custom properties can't leave these at the initial
   medium (3px) width. */
.gl-tipsGrid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:0 !important;
  margin-top:65px !important;
  border-top-width:1px !important;
  border-top-style:solid !important;
  border-top-color:rgba(0,0,0,.16) !important;
  border-left-width:1px !important;
  border-left-style:solid !important;
  border-left-color:rgba(0,0,0,.16) !important;
}
.gl-tipsItem{
  min-height:285px !important;
  padding:30px !important;
  gap:0 !important;
  border-bottom-width:1px !important;
  border-bottom-style:solid !important;
  border-bottom-color:rgba(0,0,0,.16) !important;
  border-right-width:1px !important;
  border-right-style:solid !important;
  border-right-color:rgba(0,0,0,.16) !important;
}
.gl-tipsItem > *{ margin:0 !important; }
.gl-tipsItem__num .elementor-heading-title{
  margin:0 !important;
  font-family:'Geist Mono',monospace !important;
  font-size:10px !important;
  color:var(--gl-accent) !important;
}
.gl-tipsItem__title h3,
.gl-tipsItem__title .elementor-heading-title{
  margin:80px 0 12px !important;
  font-size:25px !important;
  line-height:1.5 !important;
}
.gl-tipsItem__text p,
.gl-tipsItem__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(105,105,101) !important;
  font-size:13px !important;
  line-height:1.7 !important;
}

/* --------------------------------------------------------------------------
   2. REPORT BAND
   -------------------------------------------------------------------------- */
.gl-reportBand{
  background:rgb(17,18,19) !important;
  padding:100px 0 !important;
}
.gl-reportBand__inner{
  display:flex !important; flex-direction:row !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  gap:80px !important;
}
.gl-reportBand__copy{
  display:block !important; gap:0 !important;
  width:auto !important; flex:0 1 auto !important;
}
.gl-reportBand__copy > *{ margin:0 !important; }
.gl-reportBand__copy > .gl-eyebrow{ margin-bottom:23px !important; }
.gl-reportBand__title h2,
.gl-reportBand__title .elementor-heading-title{
  font-size:clamp(48px, 5vw, 74px) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  max-width:790px !important;
  margin:0 !important;
}
.gl-reportBand__text p,
.gl-reportBand__text .elementor-widget-container{
  margin:0 !important;
  color:rgb(133,133,129) !important;
  font-size:16px !important;
  line-height:1.7 !important;
  max-width:660px !important;
}
/* 0 1 auto, not the base .gl-btn's 0 0 auto: at 768 the reference lets this
   button shrink rather than squeezing the copy column, and its label wraps
   inside the 57px height. The anchor needs the same treatment — the base
   gives it white-space:nowrap, so without this it keeps its full 221 and
   overflows the widget wrapper that did shrink. */
.gl-reportBand__btn{
  width:auto !important;
  flex:0 1 auto !important;
}
.gl-reportBand__btn .elementor-button{
  flex:0 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
  width:100% !important;
}

/* ==========================================================================
   3. RESPONSIVE — measured, not reasoned.
   No <1100px block, deliberately: the reference changes nothing here until
   720. .gl-shell, .gl-pageHero and .gl-miniCta come from the files above.
   ========================================================================== */
@media (max-width:720px){
  .gl-tipsSection{ padding:90px 0 !important; }
  .gl-tipsSection__heading{
    grid-template-columns:1fr !important;
    gap:25px !important;
  }
  .gl-tipsSection__heading > .gl-eyebrow,
  .gl-tipsSection__title{ grid-column:1 !important; }
  .gl-tipsGrid{ grid-template-columns:1fr !important; }
  .gl-tipsItem__title h3,
  .gl-tipsItem__title .elementor-heading-title{ margin-top:55px !important; }

  /* the band's padding stays 100px here — the reference has no override */
  .gl-reportBand__inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:35px !important;
  }
}

/*footer*/
/* ==========================================================================
   GLITUR — SITE FOOTER  ·  v1

   INSTALL, two parts:
   1) Import glitur-footer.json as an Elementor Theme Builder FOOTER
      (Templates → Theme Builder → Footer → Add New → Import), then set its
      display condition to Entire Site. It is not a page template.
   2) Append this CSS at the END of Site Settings → Custom CSS, below the
      page files. The Geist @import line stays first in the box.

   Reused as-is, nothing repeated here:
     · tokens, [class*="gl-"] padding reset, .gl-shell   → gliturforsida_7.css
     · .gl-brand / .gl-brand__logo / .gl-brand__word — the footer only
       overrides the three values its variant changes  → the header template
   The logo is the same placeholder the header uses; swap both to the real
   silver PNG in the Media Library and neither needs a CSS change.

   MEASUREMENT NOTE: read with getBoundingClientRect()/getComputedStyle() off
   the reference footer inside a fixed-width iframe at 1920, 768 and 390,
   transitions and animations disabled so nothing is measured mid-flight.
   Reference baseline at 1920:
     footer 331 tall, 70px top / 25px bottom padding, 1px top rule
     top    612.828 / 240.75 / 306.414 tracks, 90px gaps, 55px below
     bottom own 1px top rule, 24px above it, copy left / link right
   Breakpoints: nothing changes until <720px, where the three columns become
   one (38px gaps) and the bottom row stacks.
   ========================================================================== */

.gl-siteFooter{
  background:rgb(8,8,8) !important;
  padding:70px 0 25px !important;
  /* longhands rather than the shorthand, so Elementor's own container border
     custom properties can't leave this at the initial medium (3px) width */
  border-top-width:1px !important;
  border-top-style:solid !important;
  border-top-color:rgba(255,255,255,.12) !important;
}

/* --------------------------------------------------------------------------
   1. TOP ROW — about / quick links / contact
   -------------------------------------------------------------------------- */
.gl-footer__top{
  display:grid !important;
  grid-template-columns:1.4fr .55fr .7fr !important;   /* 613 / 241 / 306 */
  gap:90px !important;
  padding-bottom:55px !important;
}
.gl-footer__about{ grid-column:1 !important; }
.gl-footer__nav{ grid-column:2 !important; }
.gl-footer__contact{ grid-column:3 !important; }
.gl-footer__top > *{ align-content:start !important; }

/* the footer lockup: same brand as the header, three values smaller */
.gl-brand--footer{
  display:flex !important; flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  width:auto !important;
  margin:0 !important;
}
.gl-brand--footer .gl-brand__logo{ width:auto !important; }
.gl-brand--footer .gl-brand__logo img{ width:122px !important; height:auto !important; opacity:1; }
.gl-brand--footer .gl-brand__word .elementor-heading-title{
  margin:0 !important;
  font-size:10px !important;
}
.gl-footer__aboutText{ margin:25px 0 0 !important; }
.gl-footer__aboutText p,
.gl-footer__aboutText .elementor-widget-container{
  margin:0 !important;
  color:rgb(117,117,113) !important;
  font-size:13px !important;
  line-height:1.7 !important;
  max-width:330px !important;
}

/* both link columns share one rhythm: an 11px gap, with 9px extra under the
   column heading */
.gl-footer__nav,
.gl-footer__contact{
  display:flex !important; flex-direction:column !important;
  align-items:flex-start !important;
  gap:11px !important;
}
.gl-footer__nav > *,
.gl-footer__contact > *{ margin:0 !important; width:auto !important; }
.gl-footer__colTitle{ margin-bottom:9px !important; }
.gl-footer__colTitle .elementor-heading-title{
  margin:0 !important;
  color:rgb(211,211,207) !important;
  font-size:10px !important;
  line-height:1.5 !important;   /* 15px — the columns come out 140 tall with it */
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.gl-footer__address .elementor-heading-title{
  margin:0 0 5px !important;
  color:rgb(119,119,115) !important;
  font-size:12px !important;
  line-height:1.6 !important;
}
.gl-footer__link .elementor-heading-title,
.gl-footer__link .elementor-heading-title a{
  margin:0 !important;
  color:rgb(119,119,115) !important;
  font-size:12px !important;
  line-height:1.5 !important;   /* 18px per row */
  transition:color .25s;
}
.gl-footer__link .elementor-heading-title a:hover{ color:#fff !important; }

/* --------------------------------------------------------------------------
   2. BOTTOM ROW
   -------------------------------------------------------------------------- */
.gl-footer__bottom{
  display:flex !important; flex-direction:row !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:0 !important;
  padding-top:24px !important;
  border-top-width:1px !important;
  border-top-style:solid !important;
  border-top-color:rgba(255,255,255,.12) !important;
}
.gl-footer__bottom > *{ margin:0 !important; width:auto !important; }
.gl-footer__copy .elementor-heading-title{
  margin:0 !important;
  color:rgb(85,85,82) !important;
  font-size:10px !important;
  line-height:1.5 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.gl-footer__bottomLink .elementor-heading-title,
.gl-footer__bottomLink .elementor-heading-title a{
  margin:0 !important;
  color:rgb(153,153,149) !important;
  font-size:10px !important;
  line-height:1.5 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  transition:color .25s;
}
/* the arrow is drawn here rather than typed into the heading, so the text
   stays clean to edit */
.gl-footer__bottomLink .elementor-heading-title::after{
  content:" \2197";
  white-space:pre;
}
.gl-footer__bottomLink .elementor-heading-title a:hover{ color:#fff !important; }

/* ==========================================================================
   3. RESPONSIVE — measured, not reasoned.
   There is no <1100px block: the reference keeps the three columns all the
   way down to 720px, only narrowing them with the shell.
   ========================================================================== */
@media (max-width:720px){
  .gl-footer__top{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
  .gl-footer__about,
  .gl-footer__nav,
  .gl-footer__contact{ grid-column:1 !important; }
  .gl-brand--footer{ margin-bottom:12px !important; }
  .gl-brand--footer .gl-brand__logo img{ width:112px !important; }

  .gl-footer__bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
}/* End custom CSS */