@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap');
    :root{--bg:#E8F5EE; --ink:#0f172a; --muted:#475569; --brand:#0ea5e9; --card:#f8fafc; --ring:rgba(14,165,233,.35); --radius:18px; --shadow:0 12px 30px rgba(2,6,23,.06),0 2px 8px rgba(2,6,23,.06); }*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family: 'Poppins', sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}img{max-width:100%;height:auto;vertical-align:middle}a{color:inherit;text-decoration:none}.container{width:100%;max-width:1200px;padding:0 20px;margin:0 auto}.site-header .container{
  padding: 0 5px;  /* ændr tallet hvis du vil have mere eller mindre luft */
}.site-header .container{
  padding-top: 10px;  /* adds space above logo & nav */
  padding-bottom: 5px; /* keep bottom spacing even if you like */
}/* Header */
   .site-header{
  position:sticky;
  top:0;
  z-index:2000;
  background:#E8F5EE;   /* solid green background */
  border-bottom:1px solid #e5e7eb;
  padding-bottom: 10px;  /* add more green space below header */
}.nav{display:flex;align-items:right;justify-content:space-between;padding:14px 0;gap:12px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}.brand-logo{width:80px;height:80px;display:block}.nav-links{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;     /* skubber menuen til højre */
  justify-content:flex-end;
}.nav a{opacity:.9}.nav a:hover{opacity:1}.nav-btn{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid transparent;font-weight:600}.nav-btn:hover{border-color:#cbd5e1}.menu-toggle{display:none;background:none;border:0;font-size:28px}@media (max-width:960px){.nav-links{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid #e5e7eb;padding:16px 20px;flex-direction:column;align-items:flex-start;gap:14px;z-index:1900}.menu-toggle{display:block}.nav-open .nav-links{display:flex}}/* Language pills */
    .lang-wrap{display:flex;align-items:center;gap:8px;margin-left:auto;z-index:2001}.lang-pills{display:flex;gap:8px;align-items:center}.lang-pill{padding:3px 6px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;cursor:pointer;font-weight:600}.lang-pill[aria-current="true"]{background:#0ea5e9;color:#fff;border-color:#0ea5e9}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}/* Slider */
    .slider{position:relative;padding:60px 0 0;background:#E8F5EE;}/* your green */
    .slides{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease-in-out}.slide.is-active{position:relative;opacity:1;z-index:2}.slide img{width:100%;display:block;aspect-ratio:16/8;object-fit:cover}.slide-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(15,23,42,.65);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer}.slide-btn:hover{background:rgba(15,23,42,.8)}.slide-btn.prev{left:12px}.slide-btn.next{right:12px}.dots{display:flex;gap:8px;justify-content:center;margin-top:10px}.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#cbd5e1;cursor:pointer}.dots button[aria-current="true"]{background:#0ea5e9}/* Full-bleed slider (edge to edge) */
.slider .container{ padding-left: 0; padding-right: 0; }.slides{
  border-radius: 0;
  box-shadow: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}body{ overflow-x: hidden; }.eyebrow{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.h1{font-size:clamp(32px,5vw,48px);line-height:1.1;margin:10px 0 14px;font-weight:900}.lede{font-size:16px; line-height:1.5;color:var(--muted)}.cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}@media (max-width:960px){}.trust{display:flex;gap:24px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:14px;margin:18px 0 6px}.trust .dot{width:6px;height:6px;background:#cbd5e1;border-radius:999px;display:inline-block;margin:0 10px}.section{padding:44px 0}.h2{font-size:clamp(24px,4vw,34px);margin:0 0 14px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media (max-width:960px){.grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.grid{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.card img{width:100%;aspect-ratio:16/10;object-fit:cover}.card-body{padding:14px;display:grid;gap:6px}.price{font-weight:700}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media (max-width:960px){.features{grid-template-columns:1fr 1fr}}.feat{padding:14px;border:1px solid #e5e7eb;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}.feat b{display:block;margin-bottom:6px}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}@media (max-width:960px){.split{grid-template-columns:1fr}}.quotes{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:960px){.quotes{grid-template-columns:1fr}}.quote{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);font-size:16px}.cta-band{background:#0b1324;color:#eef2ff;padding:40px 0;border-radius:calc(var(--radius) + 8px);margin:24px 0}.site-footer{background:#0f172a;color:#94a3b8;padding:40px 0;margin-top:24px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.footer-grid{grid-template-columns:1fr}}.site-footer a{color:#e2e8f0;opacity:.9}.site-footer a:hover{opacity:1}/* Accessibility */
    :focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}@media (prefers-reduced-motion: reduce) {/* keep slider animation */ }.brand-text{
  font-size:1.2rem;   /* gør teksten større – øg/sænk tallet efter behov */
  font-weight:800;
  letter-spacing:1px;
  white-space:nowrap; /* forhindrer linjeskift */
}/* Tighten space between slider and the section below */
.slider{ padding-bottom: 0 !important; }/* remove extra bottom padding on slider */
#slider .dots{ margin-top: 0 !important; }/* ensure first line has no extra top margin */
.h1{ margin-top: 8px !important; }/* trim any extra top margin on the heading */
      /* Keep header content aligned with page container */
.site-header{
  background:#E8F5EE;   /* keep solid green header */
  border-bottom:1px solid #e5e7eb;
}.site-header .nav{
  padding-left:12px;
  padding-right:12px;
  max-width:1200px;
  margin:0 auto;
}.slide-btn{
  display: none !important;
}/* Ken Burns zoom for active slider image */
  100%{ transform: scale(1.08); }/* adjust 1.05–1.12 to taste */
}
.slide.is-active img{
  animation: kb-zoom 5s ease-in-out forwards;
  will-change: transform;
  transform-origin: center center;
}/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .slide.is-active img { animation: none; }
}/* === Ken Burns zoom/pan for active slider image === */
  100%{ transform: scale(1.08) translate(-1.5%, -1.5%); }}
/* Increase specificity and guard with !important to avoid accidental overrides */
.slides .slide.is-active img{
  animation: kb-zoom-pan 5s ease-in-out forwards !important;
  will-change: transform;
  transform-origin: center center;
}/* Make sure base state doesn't force a transform that cancels the animation */
.slides .slide img{ transform: none; }/* --- Ken Burns: zoom in then out within each slide --- */
@keyframes kb-zoom-io{
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.08) translate(-1%, -1%); } /* feel free to tweak 1.05–1.12 */
  100% { transform: scale(1) translate(0,0); }
}/* Apply in-out animation to the active slide's image */
.slides .slide.is-active img{
  animation: kb-zoom-io 8s ease-in-out both !important; /* fits your 5s slide interval */
  will-change: transform;
  transform-origin: center center;
}/* Avoid base transforms that could cancel animation */
.slides .slide img{ transform: none; }/* Reduce flicker on some GPUs */
.slides .slide{ backface-visibility: hidden; }/* Remove the slim white line below the header */
.site-header{
  margin-bottom: 0;
  padding-bottom: 0;
}.slider{
  margin-top: 0;
  padding-top: 0;
}/* Kill the slim line under the header */
.site-header{ border-bottom: none !important; }/* (Optional) nudge if any 1px gap remains due to rounding */
.slider{ margin-top: -1px; }/* Language button default */
.lang-pill{
  padding: 6px 10px;
  border: 1px solid #B7E8E1;
  border-radius: 999px;
  background: #B7E8E1;   /* new background color */
  color: #2F2F2F;        /* dark text for contrast */
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}/* Language button hover */
.lang-pill:hover{
  background: #A7D8A2;  /* a slightly darker green for hover */
  color: #fff;
}/* Active language */
.lang-pill[aria-current="true"]{
  background: #2F2F2F;   /* dark background for active */
  color: #fff;           /* white text for contrast */
  border-color: #2F2F2F;
}.brand-logo{
  height: auto;
  width: 60px;   /* adjust this value to make the logo smaller */
}.slider{
  margin-top: 5px; /* adjust number for more/less green space */
}/* Sektionen har nu den ønskede grønne baggrund */
#features{
  background:#A7D8A2;
  padding:40px 0;        /* lidt ekstra luft oppe/nede */
}/* Grid til 6 elementer */
.features-boxes{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  margin-top:24px;
}/* Hvert element gennemsigtigt */
.feat{
  background:transparent;
  padding:8px 0;
  display:flex;
  align-items:center;
  gap:16px;
}/* Ikoner */
.feat-icon{
  width:48px;
  height:48px;
  flex-shrink:0;
}/* Tekst */
.feat b{
  display:block;
  margin-bottom:4px;
  font-size:1.2rem;
  color:#0f172a; /* mørk tekst på den lysegrønne baggrund */
}.feat span{
  display:block;
  font-size:1rem;
  line-height:1.4;
  color:#1e293b; /* mørk grå for læsbarhed */
}/* Sektionen i fuld bredde */
#features{
  background:#E8F5EE;
  padding:40px 0;
  margin:0;
  width:100%;
}/* Fjern container-begrænsning herinde */
/* Fjern alt “ramme-look” på boksene i features */
#features .feat{
  background: transparent;      /* eller samme som sektionens baggrund */
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  border-radius: 0;             /* fjern de runde hjørner – valgfrit */
  padding: 8px 0;               /* lidt luft uden at ligne en boks */
}/* Hvis dit tema tegner pynt med pseudo-elementer */
#features .feat::before,
#features .feat::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}/* ---- FEATURES: layout + color fixes ---- */
:root{
  /* Change this once if you want a different green */
  --feature-bg: #E8F5EE; /* or #E8F5EE */
}/* Force grid layout (overrides any older .features flex rules) */
#features .features-boxes{
  display: grid !important;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}/* Tablet: 2 per row */
@media (max-width: 1024px){
  #features .features-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}/* Mobile portrait: 1 per row */
@media (max-width: 640px){
  #features .features-boxes {
    grid-template-columns: 1fr;
  }
}/* Box styling: green background + no border/shadow */
#features .features-boxes .feat{
  background: var(--feature-bg);
  padding: 14px 16px;
  border-radius: 12px;
  border: none !important;
  box-shadow: none !important;
}/* Keep icon + text aligned nicely */
#features .features-boxes .feat{
  display: flex;
  align-items: center;
  gap: 16px;
}#features .feat .feat-icon{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}/* Optional: ensure headings/bodies wrap nicely on narrow screens */
#features .feat b{ line-height: 1.2; display: block; }#features .feat span{ line-height: 1.4; display: block; }/* ===================================================================
   MERGED OVERRIDE — Features section: force square corners & clean card look
   (appended at end of main stylesheet)
   =================================================================== */
#features,
#features *{ --radius: 0 !important; }#features .features-boxes,
#features .features-boxes *,
#features .features-boxes .feat,
#features .features-boxes .feat *{
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}#features .features-boxes .feat{
  background: var(--feature-bg, #fff);
  border: 1px solid var(--feature-border, #e5e7eb);
  box-shadow: none;
  padding: 16px;
}/* Optional: icon size helper */
#features .features-boxes .feat .feat-icon{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}/* Force feature boxes to have square corners */
.features .feat{
  border-radius: 0 !important;
}/* === Align Features container with global container (1200px) === */
#features .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}/* Override brand text to use Arial only */
.brand-text{
  font-family: Arial, sans-serif !important;
}/* Footer "XYZ CARGO" in Helvetica/Arial only */
.site-footer h3,
.site-footer h3 *{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}/* === Override: remove rounded corners in Models section === */
#models .card{
  border-radius: 0 !important;
}#models .card img{
  border-radius: 0 !important;
}/* === Models: lys baggrund på alle bokse === */
#models .card{
  background: #F5F5F5 !important;
}/* === MODELS: remove border and shadow === */
#models .card{
  border: none !important;
  box-shadow: none !important;
}/* =============================================
   MOBILE + SLIDER FIXES (latest request)
   ============================================= */
/* 1) Slider full width (kill container cap + side padding) */
#slider .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}/* 2) Hide slider dots (three-dot chooser) */
#dots,
.dots{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}/* 3) Make language pills smaller so the menu icon is not obscured */
.lang-wrap{ gap: 4px !important; }.lang-pills{ gap: 4px !important; }.lang-pill{
  padding: 2px 6px !important;
  font-size: 0.75rem !important;
  border-radius: 999px;
}/* Ensure menu toggle sits above and remains tappable */
.menu-toggle{
  z-index: 2002;
  line-height: 1;
}/* Optional: tighten header on very small screens */
@media (max-width: 480px){
  .brand-logo { width: 48px !important; height: auto !important; }
  .brand-text { font-size: 1rem !important; }
}/* Ensure landscape doesn't bump sizes unexpectedly */
@media (orientation: landscape) and (max-width: 900px){
}/* Prevent mobile text inflation (landscape zoom) */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}body{
  font-size: 16px; /* explicit base avoids auto-enlarge heuristics */
}/* .lede stays body-size, no viewport scaling */
.lede{ font-size: 16px; line-height: 1.5; }/* =========================
   Landscape-only slider fix
   - keep portrait & laptop unchanged
   - make slider taller by using a less flat ratio
   - remove extra top padding in landscape
   ========================= */
@media (orientation: landscape){
  /* Kill the extra green padding above the slider in landscape */
  .slider { padding-top: 0 !important; }
  /* Use a taller ratio only in landscape so more of the image is visible */
  .slides .slide img,
  .slide img {
    aspect-ratio: 4/3 !important; /* was effectively 16/8 (2:1) */
  }
}/* Floating round "Get in touch" button */
.contact-float{
  position: fixed;
  bottom: 24px;         /* distance from bottom */
  right: 24px;          /* distance from right edge */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;          /* button size */
  height: 80px;
  background: #A7D8A2;  /* your chosen green */
  color: #000;          /* black text for better contrast */
  font-size: 12px;      /* smaller text to fit in circle */
  text-align: center;
  text-decoration: none;
  border-radius: 50%;   /* makes it perfectly round */
  font-weight: bold;
  line-height: 1.2;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 9999;
}.contact-float:hover{
  background: #8ecb88;  /* slightly darker shade on hover */
  transform: scale(1.05);
}/* Prevent iOS input zoom (needs 16px or larger) */
input, textarea, select, button{
  font-size: 16px;          /* key line: stops the zoom */
  line-height: 1.4;
}/* === Slider finjustering efter orientering === */
/* PORTRAIT: gør slider lidt højere */
@media (orientation: portrait){
  .slides .slide img {
    aspect-ratio: 14/8 !important;  /* lavere tal = højere billede */
  }
}/* LANDSCAPE: gør slider lidt lavere */
@media (orientation: landscape){
  .slides .slide img {
    aspect-ratio: 18/9 !important;  /* højere tal = lavere billede */
  }
}/* ==================================================================
   SPACING CONTROL PANEL — Edit numbers only
   tweak ankreControls vertical gaps (top/bottom padding) per section
   Three contexts: Laptop/Desktop, Mobile Portrait, Mobile Landscape
   ================================================================== */
/* -------- Laptop / Desktop (≥1025px) -------- */
@media (min-width: 1025px){
  .slider { padding-top: 0 !important; padding-bottom: 0 !important; } /* was 0px */
  #home { padding-top: 8px !important; padding-bottom: 1px !important; } /* was 16px — try 12px */
  #models { padding-top: 6px !important; padding-bottom: 14px !important; } /* was 28px — try 20px */
  #features { padding-top: 10px !important; padding-bottom: 10px !important; } /* was 24px — try 16px */
  #about { padding-top: 10px !important; padding-bottom: 10px !important; } /* was 24px — try 16px */
  #about-photo { padding-top: 10px !important; padding-bottom: 10px !important; } /* was 20px — try 14px */
  #faq { padding-top: 10px !important; padding-bottom: 10px !important; } /* was 20px — try 14px */
  #contact { padding-top: -40px !important; padding-bottom: 14px !important; } /* was 28px — try 20px */
}/* -------- Mobile — Portrait (≤768px) -------- */
@media (max-width: 768px) and (orientation: portrait){
  .slider { padding-top: 0 !important; padding-bottom: 0 !important; }
  #home { padding-top: 6px !important; padding-bottom: 6px !important; } /* was 12px — try 8px */
  #models { padding-top: 9px !important; padding-bottom: 9px !important; } /* was 18px — try 12px */
  #features { padding-top: 8px !important; padding-bottom: 8px !important; } /* was 16px — try 10px */
  #about { padding-top: 8px !important; padding-bottom: 8px !important; } /* was 16px — try 10px */
  #about-photo { padding-top: 7px !important; padding-bottom: 7px !important; } /* was 14px — try 9px */
  #faq { padding-top: 8px !important; padding-bottom: 8px !important; } /* was 16px — try 10px */
  #contact { padding-top: 9px !important; padding-bottom: 9px !important; } /* was 18px — try 12px */
}/* -------- Mobile — Landscape (≤900px) -------- */
@media (max-width: 900px) and (orientation: landscape){
  .slider { padding-top: 0 !important; padding-bottom: 0 !important; }
  #home { padding-top: 6px !important; padding-bottom: 6px !important; } /* was 12px — try 8px */
  #models { padding-top: 8px !important; padding-bottom: 8px !important; } /* was 16px — try 10px */
  #features { padding-top: 7px !important; padding-bottom: 7px !important; } /* was 14px — try 9px */
  #about { padding-top: 7px !important; padding-bottom: 7px !important; } /* was 14px — try 9px */
  #about-photo { padding-top: 6px !important; padding-bottom: 6px !important; } /* was 12px — try 8px */
  #faq { padding-top: 7px !important; padding-bottom: 7px !important; } /* was 14px — try 9px */
  #contact { padding-top: 8px !important; padding-bottom: 8px !important; } /* was 16px — try 10px */
}/* 1) Kill collapsed top-margins on first headings inside sections */
section > h1:first-child,
section > h2:first-child,
section > h3:first-child{
  margin-top: 0 !important;
}/* If #models starts with a heading, this guarantees no extra gap */
#models > h1:first-child,
#models > h2:first-child,
#models > h3:first-child{
  margin-top: 0 !important;
}/* 2) Add a tiny padding to #models so margins can't collapse into previous section */
#models{
  padding-top: 0.01px; /* visually zero, prevents collapse in Safari */
}/* 3) (Optional) If your first child isn’t a heading, zero any first-child margin */
#models > *:first-child{
  margin-top: 0 !important;
}/* 4) Safari-only safety net (targets WebKit without touching other browsers) */
@supports (-webkit-hyphens: none){
  #models { padding-top: 1px !important; }
  #models > h1:first-child,
  #models > h2:first-child,
  #models > h3:first-child { margin-top: 0 !important; }
}/* General guard against sub-pixel gaps from rounding */
section{ border-top: 1px solid transparent; }section > h1:first-child,
section > h2:first-child,
section > h3:first-child{ margin-top: 0; }section{ padding-top: 1px; }/* or */
section{ display: flow-root; }/* creates a new block formatting context */
h1, h2, h3, h4, h5, h6{ margin: 0 0 0.75rem; line-height: 1.2; }.section{ border-top: 1px solid transparent; /* prevents collapse + rounding jitter */ }html{ line-height: 1.4; }body{ font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif; }.main-column{ display: flex; flex-direction: column; gap: 16px; }/* no margin-collapsing */
/* ensure gallery can't escape the card */
.card-gallery{ display: block; width: 100%; }.card-track{ border-radius: inherit; }/* === Card Slider — final fix (containment + swipe inside <a>) === */
.card{ 
  overflow: hidden;                /* keep gallery clipped to card box */
}.card-gallery{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;                /* extra guard against "seeping" */
  background: #000;
}.card-track{
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x !important;  /* hint Safari that this region scrolls horizontally */
  cursor: grab;
  border-radius: inherit;
}.card-track img{
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  scroll-snap-align: center;
  user-select: none;
  pointer-events: none;            /* allow swipe inside <a> without triggering link */
  -webkit-user-drag: none;         /* stop Safari from treating the image as draggable */
  background: #000;
}/* Hide scrollbars in WebKit without layout shift */
.card-track::-webkit-scrollbar{ display: none; }/* Optional: tiny "Swipe" hint visibility */
@media (hover: hover) and (pointer: fine){
  .card-hint { opacity: 0; transition: opacity .25s ease; }
  .card-gallery:hover .card-hint,
  .card-track:focus-visible + .card-hint { opacity: 1; }
}/* === Card Slider (div-card version) === */
.card{ overflow: hidden; }.card-gallery{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/10;     /* fix the visual height of the media area */
  background: transparent; /* no black bar */
  overflow: hidden;
  border-radius: inherit;
}.card-track{
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
}.card-track:active{ cursor: grabbing; }.card-track img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
  user-select: none;
  pointer-events: auto;      /* now safe because outer wrapper isn't a link */
  -webkit-user-drag: none;
}/* === Final slider fixes (containment + gestures) === */
.card{ overflow: hidden; }.card-gallery{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: inherit;
}.card-track{
  display: flex;
  gap: 0;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x !important;
  cursor: grab;
}.card-track img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}.card-track::-webkit-scrollbar{ display: none; }.card-cta-wrap{ margin-top: 10px; }.card-cta{ text-decoration: underline; font-weight: 600; }.card-cta:focus{ outline: 2px solid currentColor; outline-offset: 2px; }/* === Slider controls (bigger arrows, moved inside) === */
.slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #000;
  font-size: 40px;   /* bigger chevrons */
  cursor: pointer;
  z-index: 3;
  padding: 0 6px;    /* easier click area */
  line-height: 1;
}.slider-btn.prev{ left: 12px; }/* moved in */
.slider-btn.next{ right: 12px; }/* moved in */
.slider-btn:hover{ color: #666; }.slider-btn:focus{ outline: 2px solid currentColor; outline-offset: 2px; }.card-dots{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}.card-dots .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,.3);
}.card-dots .dot.is-active{ background: #000; }/* === HEADER LAYOUT: group logo + brand left; push nav/menu to the right === */
.site-header .container.nav{
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* keep left group together */
}.site-header .nav-links{
  margin-left: auto !important;  /* desktop: push links to the right */
}.site-header .menu-toggle{
  margin-left: auto !important;  /* mobile: push hamburger to the right */
}.site-header .brand-text{
  font-size: 1.5rem !important;  /* adjust to match h2 size */
  font-weight: 600;
  line-height: 1.2;
}/* Prevent overlap on very narrow screens */
@media (max-width: 480px){
  .site-header .brand-text {
    font-size: 1.2rem !important;
  }
}.site-header .brand-text{
  font-size: 2rem !important;   /* bigger, close to h2 */
  font-weight: 700;             /* stronger presence */
  line-height: 1.1;             /* tight spacing */
}/* Prevent overlap on very narrow screens */
@media (max-width: 480px){
  .site-header .brand-text {
    font-size: 1.4rem !important;
  }
}/* === Make XYZ CARGO text slightly bigger and closer to logo === */
.site-header .brand-text{
  font-size: 2.2rem !important;   /* slightly bigger */
  font-weight: 700;
  line-height: 1.1;
}.site-header .brand-logo{
  margin-right: 0 !important;   /* no gap */
}/* Prevent overlap on very narrow screens */
@media (max-width: 480px){
  .site-header .brand-text {
    font-size: 1.6rem !important; /* still readable but safe */
  }
}/* === Align brand text differently for desktop vs mobile === */
/* Desktop/laptop (default): left aligned */
.site-header .brand{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}/* Mobile (both portrait + landscape): center align */
@media (hover: none) and (pointer: coarse){
  .site-header .brand {
    justify-content: center !important;
    width: 100%;
  }
}/* === Mobile dropdown: make menu scrollable in landscape (no lock) === */
@media (max-width: 960px){
  /* Define a reasonable header height fallback */
  .site-header { --header-height: 68px; }
  /* When menu is open, make the dropdown a fixed, scrollable panel */
  .nav-open .nav-links {
    position: fixed !important;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2100;                 /* above everything */
    display: flex !important;      /* ensure visible when open */
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    padding: 16px 20px 28px;
    overflow-y: auto;              /* key: allow scrolling inside menu */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* prevent page from stealing scroll */
  }
  /* Optional: prevent body scrolling behind the menu (CSS-only fallback) */
  .nav-open { overscroll-behavior: none; }
}/* === MENU FIXES: drop from below logo + align language buttons left === */
@media (max-width: 960px){
  /* Make the header nav a positioning context */
  .site-header .nav { position: relative !important; }
  /* Dropdown: attach to header and open from BELOW the logo */
  .nav-open .nav-links {
    position: absolute !important;  /* override earlier fixed */
    top: 100% !important;           /* start right under the header */
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 80px); /* leave some space for safety */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;  /* align items to left edge */
    text-align: left !important;
    padding: 16px 20px 24px !important;
    z-index: 2100 !important;
  }
  /* Language buttons: align to same left as other menu items */
  .nav-open .lang-wrap,
  .nav-open .nav-links .lang-pills {
    margin-left: 0 !important;
    align-self: flex-start !important;
  }
}/* === Center language buttons in dropdown === */
@media (max-width: 960px){
  .nav-open .nav-links .lang-pills {
    width: 100%;
    display: flex;
    justify-content: center;   /* center horizontally */
    margin-top: 12px;          /* space above buttons */
  }
}/* === Tighter spacing between menu items in dropdown === */
@media (max-width: 960px){
  .nav-open .nav-links {
    gap: 6px !important; /* reduce vertical spacing */
  }
  .nav-open .nav-links .nav-btn {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}/* === MOBILE LANDSCAPE: full-height dropdown with scrolling & safe bottom space === */
@media (max-width: 960px) and (orientation: landscape){
  .site-header { --header-height: 68px; }
  /* Force the open menu to become a fixed viewport panel below the header */
  .nav-open .nav-links {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    background: #fff !important;
    z-index: 2200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom)) !important; /* extra bottom padding for reach */
    gap: 10px !important;
    overflow-y: auto !important;           /* key: scroll inside menu */
    -webkit-overflow-scrolling: touch;     /* smooth iOS scroll */
    overscroll-behavior: contain;          /* don't bubble to page */
  }
  /* Make sure the menu toggle remains tappable above the panel */
  .menu-toggle { position: relative; z-index: 2300; }
  /* Center language buttons but keep them visible and reachable */
  .nav-open .nav-links .lang-pills {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 6px; /* ensure not clipped at the bottom */
  }
}/* === FIX: avoid clipping bottom of logo in mobile landscape === */
@media (max-width: 960px) and (orientation: landscape){
  /* Bump the header height variable and add a tiny buffer */
  .site-header { --header-height: 80px; }
  .site-header .container.nav { padding-bottom: 6px; }
  .nav-open .nav-links {
    top: calc(var(--header-height) + 6px) !important; /* start a bit lower */
  }
}/* === FIX: make header taller + avoid clipping logo in mobile landscape === */
@media (max-width: 960px) and (orientation: landscape){
  /* Give header more vertical room */
  .site-header {
    --header-height: 92px;   /* was 68px / 80px, bump it higher */
  }
  .site-header .brand-logo {
    width: 72px !important;   /* slightly larger logo */
    height: auto !important;
  }
  .site-header .container.nav {
    padding-top: 8px;
    padding-bottom: 8px;      /* more green area around logo */
  }
  /* Make sure dropdown starts clearly below logo */
  .nav-open .nav-links {
    top: var(--header-height) !important;
  }
}/* === Desktop: hide the first menu item (Home) but keep language pills visible === */
@media (min-width: 961px){
  /* Assumes the first direct <a.nav-btn> in .nav-links is 'Home' */
  .nav-links > a.nav-btn:first-of-type {
    display: none !important;
  }
}


/* === Center brand on narrow windows (<=960px) even on laptops === */
@media (max-width: 960px){
  .site-header .brand{
    justify-content: center !important; /* center XYZ CARGO + logo */
    width: 100%;                        /* allow centering across header */
    text-align: center;
  }
  /* keep hamburger on the right while brand is centered */
  .site-header .nav{
    justify-content: space-between;
  }
}


/* === MOBILE PORTRAIT: bigger header, logo, text, and hamburger === */
@media (max-width: 960px) and (orientation: portrait) {
  .site-header {
    --header-height: 90px;           /* make header taller */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-header .brand-logo {
    width: 72px !important;          /* larger logo */
    height: auto !important;
  }

  .site-header .brand-text {
    font-size: 2rem !important;    /* larger XYZ CARGO text */
  }

  .site-header .menu-toggle {
    font-size: 34px !important;      /* bigger hamburger icon */
  }
}


/* === Card fold-down improvements === */
.card-more {
  width: 100%;
}
.card-more summary {
  display: block;
}
.card-more > div {
  max-height: 240px;               /* allow longer copy without blowing the row height */
  overflow: auto;                   /* scroll inside if content is very long */
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 6px;
  padding-top: 10px;
  background: transparent;
}
@media (max-width: 960px) and (orientation: landscape) {
  .card-more > div { max-height: 180px; } /* a bit tighter on mobile landscape */
}


/* Fix anchor scroll for contact section */
#contact {
  scroll-margin-top: 120px; /* adjust to header height */
}
#about {
  scroll-margin-top: 110px; /* instead of 140px */
}
#faq {
  scroll-margin-top: 120px;
}
#models {
  scroll-margin-top: 120px;
}
/* Force hamburger menu icon to be black on mobile */
@media (max-width: 960px) {
  .site-header .menu-toggle {
    color: #000 !important;   /* solid black */
  }
}
.footer-social {
  display: flex;
  justify-content: flex-start; /* eller 'center' hvis du vil have dem i midten */
  gap: 16px;
  margin-top: 15px;
}

.footer-social a img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1); /* gør ikoner hvide i mørk footer */
  transition: opacity 0.3s ease;
}

.footer-social a:hover img {
  opacity: 0.7;
}
.footer-social a img {
  width: 28px;
  height: 28px;
  /* remove this: filter: brightness(0) invert(1); */
  filter: none;              /* <- keep original colors */
  transition: opacity .3s ease;
}

.details-green > div {
  background: var(--feature-bg, #E8F5EE);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: inherit;
}


/* Safari-only: normalize vertical gaps between sections */
@supports (-webkit-hyphens: none) {
  .section { padding-top: 0 !important; }
  .section > *:first-child { margin-top: 0 !important; }
  .section > *:last-child  { margin-bottom: 0 !important; }
  .section { border-top: 0 solid transparent !important; }
}
/* Safari-only: tighten gap between #home and #models */
@supports (-webkit-hyphens: none) {
  /* Stop margin-collapsing */
  #home,
  #models {
    display: flow-root;
  }

  /* Remove the extra bottom margin from the last element in #home */
  #home > *:last-child {
    margin-bottom: 0 !important;
  }

  /* (Optional) Nudge #models’ top padding a touch smaller just in Safari */
  /* Adjust this 2–6px to taste */
  #models {
    padding-top: calc(var(--models-pt, 14px) - 6px) !important;
  }
}
@supports (-webkit-hyphens: none) {
  #home,
  #models {
    overflow: hidden;   /* instead of display: flow-root */
  }
}


/* === Dropdown menu for nav (desktop hover + mobile tap) === */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown .dropdown-content {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  min-width: 160px;
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.12));
  z-index: 9999;
}
.nav-dropdown .dropdown-content a {
  display: block;
  padding: 8px 12px;
  color: var(--ink, #0f172a);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown .dropdown-content a:hover { background: #f0f0f0; }
.nav-dropdown:hover .dropdown-content,
.nav-dropdown:focus-within .dropdown-content { display: block; }

/* Make the More button visually identical to other nav-btn links (remove any reddish default) */
.nav-dropdown > .more-btn.nav-btn {
  background: var(--btn-bg, #A7D8A2) !important;
  color: var(--btn-ink, #000) !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.nav-dropdown > .more-btn.nav-btn:hover { filter: brightness(0.95); }
.nav-dropdown > .more-btn.nav-btn:focus { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }

/* Mobile: dropdown stacks and opens on tap */
@media (max-width: 960px){
  .nav-dropdown { position: static; }
  .nav-dropdown .dropdown-content{
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 12px;
  }
  .nav-dropdown.open .dropdown-content{ display: block; }
}


/* === Visibility helpers for nav items === */
@media (min-width: 961px){
  .only-mobile { display: none !important; }
}
@media (max-width: 960px){
  .only-desktop { display: none !important; }
}

/* Compact the folded menu ONLY on narrow laptops (not phones) */
@media (min-width: 961px) and (max-width: 1200px){
  :root{
    /* adjust if your header is taller/shorter */
    --header-h: 72px;
  }

  /* your vertical menu panel under the header */
  .nav-links{
    position: absolute;             /* ensure it anchors under the header */
    top: var(--header-h);           /* start right below the header bar */
    padding-top: 0 !important;      /* remove extra white space at top */
    margin-top: 0 !important;
  }

  /* tighten item spacing a touch */
  .nav-links .nav-btn,
  .nav-links .nav-dropdown{
    margin-top: .35rem;
  }
}

/* Hamburger / menu toggle: vertically & horizontally centered */
.menu-toggle,
.hamburger{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                         /* visual hit area */
  height: 44px;                        /* visual hit area */
  padding: 0;
  background: transparent;
  border: 0;
  line-height: 1;
}

/* Bars inside the hamburger */
.menu-toggle span,
.hamburger span{
  display: block;
  width: 22px;
  height: 2px;
  background: #111;                    /* your icon color */
  margin: 3px 0;
  border-radius: 1px;
}

/* If the toggle is absolutely positioned, center it with transform */
.site-header .menu-toggle.is-abs,
.site-header .hamburger.is-abs{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
/* ---------- NAV STATE NORMALIZER (put at very end) ---------- */

/* Desktop & wide laptop (inline menu only, no hamburger) */
@media (min-width: 961px){
  .menu-toggle{ display: none !important; }
  .nav-links{ display: flex !important; position: static !important; }
}

/* Phones + narrow laptop (hamburger controls visibility) */
@media (max-width: 960px){
  .menu-toggle{ display: block !important; }
  .nav-links{
    display: none !important;        /* hidden by default */
    flex-direction: column;
  }
  .nav-open .nav-links{
    display: flex !important;        /* visible only when opened */
  }
}

/* Narrow-laptop band: only reposition panel when it's open */
@media (min-width: 961px) and (max-width: 1200px){
  :root{ --header-h: 72px; }         /* tweak if your header is taller */

  /* inline menu sits in the header as normal */
  .nav-links{
    position: static !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* if a script opens a vertical panel in this band, anchor it */
  .nav-open .nav-links{
    position: absolute !important;
    top: var(--header-h);
    left: 0; right: 0;
  }
}
/* --- Hide vertical scrollbar but keep scrolling --- */
body {
  scrollbar-width: none;        /* Firefox */
}

body::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}


/* === Hide scrollbar in card-more sections but keep scrolling === */
.card-more > div {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

.card-more > div::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}
/* === UNIFY SLIDER RATIO (stop jumping on laptop) ===
   Keep the "taller" mobile-portrait ratio on wide screens too.
   This overrides earlier landscape/desktop aspect-ratio rules. */
:root{ --slider-aspect-portrait: 14/8; }  /* uses your current portrait setting */

@media (min-width: 961px){
  .slides .slide img,
  .slide img{
    aspect-ratio: var(--slider-aspect-portrait) !important;
    object-fit: cover;
  }
}

/* Also neutralize any orientation-based flips that occur at desktop sizes */
@media (orientation: landscape){
  .slides .slide img,
  .slide img{
    aspect-ratio: var(--slider-aspect-portrait) !important;
  }
}
/* keep the native disclosure marker visible on mobile Safari */
.card-more summary{
  display: list-item;               /* was: block */
  list-style: disclosure-closed inside;
  cursor: pointer;
}
.card-more[open] summary{
  list-style: disclosure-open inside;
}

/* (optional) extra nudge for older WebKit builds */
.card-more summary::-webkit-details-marker{ display:inline-block; }
/* === MODELS: remove rounded corners on cards & images ===
   Your #models anchor is a <span> before the grid, so we use the sibling selector.
   This overrides any earlier rounding (including via CSS variables). */
#models ~ .grid,
#models ~ .grid * {
  --radius-xs: 0 !important;
  --radius-sm: 0 !important;
  --radius-md: 0 !important;
  --radius-lg: 0 !important;
  --radius-xl: 0 !important;
}

#models ~ .grid a.card,
#models ~ .grid .card,
#models ~ .grid .card img,
#models ~ .grid .card figure,
#models ~ .grid .card .image-wrapper,
#models ~ .grid .card .thumb,
#models ~ .grid .card .card-body {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important; /* prevent parent clipping implying rounding */
}

/* If the grid cells themselves carry rounding: */
#models ~ .grid > * {
  border-radius: 0 !important;
}


/* === MOBILE: Center brand text to full header width (absolute center) ===
   Problem: On mobile, 'XYZ CARGO' centers between logo and hamburger (optical center).
   Fix: Absolutely center the brand relative to the entire header width.
   Notes: .site-header .nav is already a positioning context in your CSS. */
@media (max-width: 960px){
  .site-header .nav { position: relative !important; } /* ensure positioning context */
  .site-header .brand{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;         /* don't stretch across */
    justify-content: center !important;
    text-align: center !important;
    z-index: 2005;                  /* sit above background, below menu panel */
  }
  /* Keep logo stuck left and hamburger on the right as usual */
  .site-header .menu-toggle{ margin-left: auto !important; }
}
/* ABOUT "Read more" — align with the section margins (no extra indent) */
#about .card-more{
  max-width: var(--container-max, 72rem);
  margin-inline: auto;
  padding-inline: 0;              /* no extra side padding */
}

/* Remove the hairline and any inner padding from the panel content */
#about .card-more > div{
  border-top: none !important;
  padding-inline: 0;              /* match section text */
}

/* Triangle + label, but without the inside indent */
#about .card-more summary{
  display: list-item;
  list-style: disclosure-closed outside;  /* was 'inside' → caused indent */
  margin-left: 0;
  padding-left: 0;
}
#about .card-more[open] summary{
  list-style: disclosure-open outside;
}

/* (Optional) do the same for FAQ for perfect consistency */
#faq .card-more{
  max-width: var(--container-max, 72rem);
  margin-inline: auto;
  padding-inline: 0;
}
#faq .card-more summary{
  list-style: disclosure-closed outside;
  margin-left: 0;
  padding-left: 0;
}
#faq .card-more[open] summary{
  list-style: disclosure-open outside;
}

/* Mobile-only: align the About "Read more" marker + label with the text gutter */
@media (max-width: 768px){
  /* Kill native marker only for About (mobile) */
  #about .card-more summary{
    list-style: none !important;
    display: inline-flex !important;
    align-items: baseline;
    margin-left: 0 !important;
    padding-left: 20px !important;     /* same as .container side padding */
    font-weight: 700;                   /* keep your bold label */
    cursor: pointer;
  }
  #about .card-more summary::-webkit-details-marker{ display: none !important; }

  /* Our own chevron, aligned perfectly with the label */
  #about .card-more summary::before{
    content: "▸";
    display: inline-block;
    width: 1ch;
    margin-right: .5rem;                /* space between chevron and text */
    transform: translateY(-.06em);      /* tiny vertical optical tweak */
  }
  #about .card-more[open] summary::before{
    content: "▾";
  }
}
/* Mobile-only fine-tune: nudge About "Read more" left a bit */
@media (max-width: 768px){
  #about .card-more summary{
    padding-left: 2px !important;   /* was 20px — try 14px */
  }
  /* slightly tighten the space between triangle and label */
  #about .card-more summary::before{
    margin-right: .4rem;
  }
}


/* Scroll offset for News section */
#news {
  scroll-margin-top: 80px; /* justér tallet op/ned efter behov */
}
@media (min-width: 1024px){
  #home-models .card figure:first-of-type,
  #home-models .card .card-media,
  #home-models .card .media,
  #home-models .card .slider {
    height: clamp(260px, 24vw, 360px);  /* adjust to taste */
    aspect-ratio: auto;                 /* override any prior ratio */
  }
  #home-models .card figure:first-of-type > img,
  #home-models .card .card-media > img,
  #home-models .card .media > img,
  #home-models .card .slider img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
.card,
.card img,
.card-gallery,
.hero-card,
.hero-card img {
  border-radius: 0 !important;
}
#models-grid {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  max-width: 1200px;   /* same as .container */
  box-sizing: border-box;
}
/* Reducer afstand mellem de to h2/p i introsektionen */
.intro .h2 {
  margin-bottom: 0.6em; /* standard er sikkert 1em, prøv 0.6 eller 0.5 */
}

/* === XYZ CARGO — small spacing & anchor fixes (2025-09-29) === */

/* Make the in-page jump to "Models" land correctly below the sticky header */
#models{ scroll-margin-top: 96px; }            /* adjust if header height changes */
@media (max-width:960px){ #models{ scroll-margin-top: 82px; } }

/* Tighten the gap between the two hero paragraphs and the models heading */
#intro{ padding-bottom: 8px !important; }
#home-models{ padding-top: 6px !important; }

#intro h1{ margin-bottom: 10px !important; }
#intro p{ margin-top: 0 !important; margin-bottom: 12px !important; }
#home-models h2{ margin-top: 0 !important; }

/* Keep model cards square-cornered (belt-and-braces) */
#home-models .card,
#home-models .card *{ border-radius: 0 !important; }



/* ===== Anchor landing control (individual per section) =====
   Works in all modern browsers, including Safari.
   You can tune each anchor independently for desktop and for mobile.
*/

/* --- Desktop defaults per anchor --- */
#home        { scroll-margin-top: 90px; }
#intro       { scroll-margin-top: 90px; }
#home-models { scroll-margin-top: 90px; }
#features    { scroll-margin-top: 90px; }
#about       { scroll-margin-top: 90px; }
#models      { scroll-margin-top: -30px; }  /* example: models a bit lower */
#news        { scroll-margin-top: 90px; }
#faq         { scroll-margin-top: -300px; }
#contact     { scroll-margin-top: 90px; }

/* --- Mobile / narrow windows --- */
@media (max-width: 960px){
  #home        { scroll-margin-top: 80px; }
  #intro       { scroll-margin-top: 80px; }
  #home-models { scroll-margin-top: 80px; }
  #features    { scroll-margin-top: 80px; }
  #about       { scroll-margin-top: 120px; }
  #models      { scroll-margin-top: -100px; } /* example override for models on mobile */
  #news        { scroll-margin-top: 120px; }
  #faq         { scroll-margin-top: 80px; }
  #contact     { scroll-margin-top: 120px; }
}

/* --- Belt‑and‑suspenders fallback for Safari/older engines using :target --- */
#home:target::before,
#intro:target::before,
#home-models:target::before,
#features:target::before,
#about:target::before,
#models:target::before,
#news:target::before,
#faq:target::before,
#contact:target::before{
  content: "";
  display: block;
  height: 0;        /* set per anchor below if needed */
  margin-top: 0;
}

#models:target::before{ height: 120px; margin-top: -120px; } /* desktop */
@media (max-width: 960px){
  #models:target::before{ height: 100px; margin-top: -100px; } /* mobile */
}
/* Pin the dropdown items to the top (no big white area above) */
@media (max-width: 960px) {
  /* if you already have --header-height elsewhere, keep that one */
  .site-header { --header-height: 72px; }

  .site-header .nav { position: relative !important; }

  .nav-links{
    /* already absolute under the header in your sheet, this just ensures layout */
    display: none !important;
    position: absolute !important;
    top: 100% !important;     /* sits flush under the header */
    left: 0; right: 0;
    background: #fff;
    margin: 0 !important;

    /* the important part: stack at the top, not vertically centered */
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    /* tweak these two to fine-tune how close the first item is */
    padding: 10px 20px 18px !important;  /* less top padding = less white */
    gap: 10px !important;

    /* if the list is tall, it scrolls inside (so it won't push page) */
    max-height: calc(100vh - var(--header-height)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* shown when your JS adds .nav-open to the header */
  .nav-open .nav-links{ display: flex !important; }

  /* make sure individual links don’t add extra top margin */
  .nav-links > a, .nav-links > button { margin-top: 0 !important; }
}
/* --- Mobile / hamburger widths: keep dropdown below the header and stop logo clipping --- */
@media (max-width: 960px) {
  /* One place to control header height on mobile */
  .site-header { 
    --header-height: 92px;          /* Tweak this to match your visual header */
    min-height: var(--header-height);
  }

  /* Make sure the logo is contained inside the header height */
  .site-header .brand,
  .site-header .brand a,
  .site-header .brand img {
    display: flex;
    align-items: center;
  }
  .site-header .brand img {
    max-height: calc(var(--header-height) - 24px); /* small breathing room */
    height: auto;
    width: auto;
  }

  /* Pin the dropdown panel under the header; full width; no overlap with the logo */
  .nav-links{
    position: fixed !important;
    top: var(--header-height) !important;  /* always starts below header */
    left: 0; 
    right: 0;
    background: #fff;
    margin: 0 !important;

    display: none !important;             /* shown when .nav-open is present */
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    padding: 10px 20px 18px !important;   /* reduce top white space */
    gap: 10px !important;

    /* Scroll inside panel if it’s tall; prevents pushing page and keeps under header */
    max-height: calc(100vh - var(--header-height)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;                        /* keep it above page, below header */
  }
  .nav-open .nav-links{ display: flex !important; }

  /* Ensure header itself sits above panel */
  .site-header{ position: sticky; top: 0; z-index: 10000; }

  /* No extra top margins on individual items */
  .nav-links > a, .nav-links > button { margin-top: 0 !important; }
}
/* Hide dots under model card sliders (safe) */
.card-gallery .card-dots,
.card-gallery .card-dots .dot {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Make model card slider arrows light grey */
.card-gallery .slider-btn {
  color: #ccc !important;   /* light grey */
}

/* Optional: make them a bit darker on hover */
.card-gallery .slider-btn:hover {
  color: #999 !important;
}
/* var 2,5rulletext Upgrade notice ticker */
.upgrade-ticker {
  background: #E8F5EE;       /* light background */
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  height: 2.5em;
  display: flex;
  align-items: center;
}

.ticker-text {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-move 60s linear infinite;
  font-size: 0.95rem;
  color: #555;               /* neutral grey */
}

@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* --- Typography override: enforce Inter for brand and footer --- */
.brand-text {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
}

.site-footer h3,
.site-footer h3 * {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
}
/* === ABOUT: Read more panel — square corners + taller on laptops === */

/* Fjern runde hjørner */
#about .card-more,
#about .card-more > div,
#about .details-green > div {
  border-radius: 0 !important;
}

/* Gør selve “vinduet” højere på laptop/desktop */
@media (min-width: 1025px){
  #about .card-more > div {
    max-height: 600px;   /* var 240px — justér tallet efter behov */
  }
}
/* Read-more images in "It all started in Copenhagen" */
#about .card-more > div img {
  display: block;       /* removes inline-gap */
  width: 100%;          /* fill the content width */
  max-width: 100%;      /* never overflow */
  height: auto;         /* keep aspect ratio */
  object-fit: contain;  /* show whole image (use 'cover' if you want crop-to-fill) */
  margin: 0;            /* align to both inner edges */
  border-radius: 0;     /* keep corners square, matches your panel tweak */
}

/* Billeder i read-more panel: følg tekstens marginer */
#about .card-more > div img {
  display: block;
  width: 100%;       /* gør billedet lige så bredt som tekstfeltet */
  height: auto;      /* bevarer proportioner */
  max-width: 100%;   /* undgå overflow */
  margin: 0 auto;    /* centrer hvis nødvendigt */
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; }
}
/* Ticker icon sizing & alignment */
.ticker-text .ticker-icon {
  height: 3.5em;           /* same height as text */
  width: auto;           /* keep aspect ratio */
  vertical-align: middle;
  margin: 0 0.4em;       /* a little breathing room */
}

/* Optional: make the icon a bit larger than text (uncomment if desired) */
/* .ticker-text .ticker-icon { height: 1.3em; } */




/* === FIX: About Read‑more height in desktop hamburger (narrow laptop/tablet) ===
   Targets widths where the site is in hamburger mode on desktop/tablet,
   without affecting phones where it's already OK.
*/
@media (min-width: 769px) and (max-width: 960px){
  #about .card-more > div{
    max-height: clamp(420px, 72vh, 800px) !important;
    overflow: auto; /* allow scrolling if very long */
  }
}
.upgrade-ticker {
  margin: 0;        /* no outside spacing */
  padding: 0;       /* no inside spacing */
  line-height: 1;   /* collapse extra vertical space */
}




/* === TICKER: remove hairline gaps above/below ===================== */
/* Kill the light borders and any padding that create a white seam */
.upgrade-ticker{
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* Ensure inline content doesn't add extra line box */
.ticker-text{
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* If neighboring sections had a rounding seam, make sure they sit flush */
#slider + .upgrade-ticker,
.upgrade-ticker + .section,
.upgrade-ticker + #home,
.upgrade-ticker + #models,
.upgrade-ticker + #features,
.upgrade-ticker + #about,
.upgrade-ticker + #faq,
.upgrade-ticker + #contact{
  margin-top: 0 !important;
}



/* === MODELS SECTION – white cards with black frame ================= */
#home-models {
  background: #ffffff !important;  /* white background behind the section */
}

#home-models .card {
  background: #ffffff !important;  /* white card background */
  border: 1px solid #000 !important;  /* black frame */
  box-shadow: none !important;        /* no drop shadow */
}

#home-models .card-body {
  background: transparent !important; /* keep inside clean */
}

#home-models .card img {
  display: block;
  border-radius: 0;                    /* no rounded corners */
}



/* === WHITE BAND — from 'It all started in Copenhagen' (About) down through FAQ === */
/* Make About and FAQ sections sit on white, regardless of the global green body bg */
#about,
#faq {
  background: #ffffff !important;
}

/* If any green info panels are used inside these sections, neutralize them */
#about .details-green > div,
#faq .details-green > div {
  background: #ffffff !important;
}

/* Optional smoothing: avoid tiny seams caused by margins */
#about { margin-top: 0; }
#faq { margin-bottom: 0; }



/* === Reduce gap above Models section even further ============= */
#home-models {
  padding-top: 0 !important;
}

#home-models h2 {
  margin-top: 0 !important;
}



/* Intro paragraph: switch to two columns on desktop (menu in line mode) */
@media (min-width: 961px){
  .intro-two-col{
    column-count: 2;
    column-gap: 2.2rem;
    column-fill: balance;
    hyphens: auto;
  }
}
@media (min-width: 1400px){
  .intro-two-col{
    column-gap: 2.6rem;
  }
}



/* === Two-column layout for About, News, and FAQ (desktop only) === */
@media (min-width: 961px){
  /* turn the content inside these sections into two balanced columns */
  #about .twocol,
  #news .twocol,
  #faq .twocol{
    column-count: 2;
    column-gap: 2.2rem;
    column-fill: balance;
    hyphens: auto;
  }

  /* keep headings and summaries spanning both columns */
  #about .twocol > h2,
  #news  .twocol > h2,
  #faq   .twocol > h2,
  #about .twocol summary,
  #news  .twocol summary,
  #faq   .twocol summary{
    column-span: all;
    display: block;
  }

  /* avoid awkward splits */
  .twocol p,
  .twocol ul,
  .twocol ol,
  .twocol details,
  .twocol figure,
  .twocol .card{
    break-inside: avoid;
  }

  /* details content should stay intact within a column */
  .twocol details > div{
    break-inside: avoid;
  }
}



/* === ABOUT: distribute text across two columns (including Read More) === */
@media (min-width: 961px){
  /* ensure normal block flow so columns can balance */
  #about .twocol{
    display: block !important;
    column-count: 2;
    column-gap: 2.2rem;
    column-fill: balance;
    hyphens: auto;
  }
  /* allow content to flow between columns */
  #about .twocol p,
  #about .twocol ul,
  #about .twocol ol{
    break-inside: auto;
  }
  /* let details participate in columns (no single-column lock) */
  #about .twocol details,
  #about .twocol details > div{
    break-inside: auto;
  }
  /* keep only the section heading and the summary full width */
  #about .twocol > h2,
  #about .twocol summary{
    column-span: all;
    display: block;
  }
}



/* === ABOUT — TRUE two-column flow + proper Read‑more behaviour (desktop) === */
@media (min-width: 961px){
  /* Make the whole About content flow into two balanced columns */
  #about .container{
    display: block !important;         /* cancel flex/grid so multicol works */
    column-count: 2;
    column-gap: 2.2rem;
    column-fill: balance;
    hyphens: auto;
  }

  /* Align the two columns from the same top baseline */
  #about .container > *:first-child{ margin-top: 0 !important; }

  /* Keep the section heading + the summary label full width */
  #about .container > h2,
  #about .container summary{
    column-span: all;
    display: block;
    margin-top: 0;
  }

  /* Allow normal blocks to fragment across columns */
  #about .container p,
  #about .container ul,
  #about .container ol,
  #about .container figure{
    break-inside: auto;
  }

  /* === Read‑more panel must participate in the parent's columns === */
  /* Remove any height/overflow constraints that prevent fragmentation */
  #about .card-more > div{
    max-height: none !important;
    overflow: visible !important;
    column-count: initial !important;  /* cancel inner 2-col, use parent's */
    column-gap: normal !important;
  }
  #about .card-more,
  #about .card-more > div{
    break-inside: auto !important;     /* allow content to flow */
  }
}
@media (min-width: 961px){
  /* NEWS: start text in left column */
  #news .container{
    display: block !important;
    column-count: 2;
    column-gap: 2.2rem;
    column-fill: auto;   /* fill first column before moving to next */
  }
  #news .container > *:first-child{ 
    margin-top: 0 !important; 
  }
  #news .container > h2,
  #news .container summary{
    column-span: all;
    display: block;
  }
  #news .container p,
  #news .container ul,
  #news .container ol{
    break-inside: auto;
  }

  /* FAQ: make photos span both columns (full width) */
  #faq .container img,
  #faq .container figure,
  #faq .card-more > div img,
  #faq .card-more > div figure{
    column-span: all !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (min-width: 961px){
  /* NEWS: start text in left column */
  #news .container{
    display: block !important;
    column-count: 2;
    column-gap: 2.2rem;
    column-fill: auto;   /* fill first column before moving to next */
  }
  #news .container > *:first-child{ 
    margin-top: 0 !important; 
  }
  #news .container > h2,
  #news .container summary{
    column-span: all;
    display: block;
  }
  #news .container p,
  #news .container ul,
  #news .container ol{
    break-inside: auto;
  }

  /* FAQ: make photos span both columns (full width) */
  #faq .container img,
  #faq .container figure,
  #faq .card-more > div img,
  #faq .card-more > div figure{
    column-span: all !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}



/* === MOBILE FIX: prevent accidental two-column layout on phones/tablets ===
   Some sections use CSS multi-column on desktop. Force SINGLE column on mobile.
   Applies to About, News, FAQ, intro two-col blocks, and any .twocol helpers.
*/
@media (max-width: 960px){
  /* Main section containers */
  #about .container,
  #news .container,
  #faq .container,
  .intro-two-col,
  .twocol {
    display: block !important;        /* ensure normal block flow */
    column-count: 1 !important;       /* single column on mobile */
    column-gap: normal !important;
    column-fill: balance !important;
  }

  /* Read‑more panels inside these sections */
  #about .card-more > div,
  #news  .card-more > div,
  #faq   .card-more > div {
    column-count: 1 !important;       /* no 2-col inside panels on mobile */
    column-gap: normal !important;
    max-height: none !important;      /* let content flow; panel can scroll if needed elsewhere */
    overflow: auto;                    /* keep scrolling if very long */
  }
}



/* === MOBILE UNIVERSAL FIX (≤960px): stop accidental 2 columns & side overflow === */
@media (max-width: 960px){
  /* 1) Force single column everywhere we used multicol */
  body #about .container,
  body #news .container,
  body #faq .container,
  body .intro-two-col,
  body .twocol{
    display: block !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    columns: auto !important;
    column-gap: 0 !important;
    column-fill: balance !important;
  }
  /* Read-more panels also single column */
  body #about .card-more > div,
  body #news  .card-more > div,
  body #faq   .card-more > div{
    display: block !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    columns: auto !important;
    column-gap: 0 !important;
    max-height: none !important;    /* let content flow naturally */
    overflow: auto !important;
  }
  /* Cancel any column-span tricks on mobile */
  body #about .container > h2,
  body #news  .container > h2,
  body #faq   .container > h2,
  body #about .container summary,
  body #news  .container summary,
  body #faq   .container summary{
    -webkit-column-span: none !important;
    column-span: none !important;
  }

  /* 2) Kill slider full-bleed calc() that causes side overflow */
  .slides{
    width: 100% !important;
    margin-left: 0 !important;
  }
  .slider .container,
  #slider .container{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) Absolute guard: never allow horizontal scroll on mobile */
  html, body{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* === MOBILE LANDSCAPE (≤900px): keep the same safeguards === */
@media (max-width: 900px) and (orientation: landscape){
  .slides{ width: 100% !important; margin-left: 0 !important; }
  .slider .container, #slider .container{
    max-width: 100% !important; width: 100% !important;
    margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  html, body{ max-width: 100% !important; overflow-x: hidden !important; }
}


/* TEMP FIX: Hide "More details" links in model cards (can be re-enabled by removing this rule) */
.card .card-more {
    display: none !important;
}
/* === FINAL OVERRIDE: more white after FAQ, more green before Contact === */
#faq{
  background: #fff !important;          /* force FAQ on white */
  padding-bottom: 6rem !important;      /* add white space below */
  margin-bottom: 0 !important;
}
#faq > *:last-child{                     /* avoid hidden extra gap */
  margin-bottom: 0 !important;
}

#contact{
  background: #E8F5EE !important;       /* force Contact on green */
  padding-top: 6rem !important;          /* add green space above */
  margin-top: 0 !important;
}
#contact > *:first-child{
  margin-top: 0 !important;              /* avoid seam caused by first-child margin */
}

/* Make sure it wins against your breakpoint “spacing control panel” */
@media (min-width: 1025px){
  #faq{ padding-bottom: 6rem !important; }
  #contact{ padding-top: 6rem !important; }
}
@media (max-width: 768px) and (orientation: portrait){
  #faq{ padding-bottom: 4rem !important; }
  #contact{ padding-top: 4rem !important; }
}
@media (max-width: 900px) and (orientation: landscape){
  #faq{ padding-bottom: 4rem !important; }
  #contact{ padding-top: 4rem !important; }
}
/* === MOBILE PORTRAIT: taller slider (~2/3 screen), keep Ken Burns & crop === */
@media (max-width: 900px) and (orientation: portrait){
  .slider{
    height: clamp(260px, 65svh, 560px) !important;  /* was ~33svh → now ~65svh */
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .slider > .container{ height: 100% !important; }
  .slider .slides{
    position: relative !important;
    height: 100% !important;
    min-height: 100% !important;
  }
  .slider .slides .slide{
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
  .slider .slides .slide > img,
  .slider .slides .slide picture > img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;      /* crop edges */
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;     /* neutralize earlier ratios */
  }
}
/* === MOBILE LANDSCAPE: make slider a bit lower === */
@media (max-width: 900px) and (orientation: landscape){
  .slider{
    height: clamp(160px, 40svh, 420px) !important; /* tweak 36–44svh to taste */
    overflow: hidden !important;
    position: relative !important;
  }
  /* keep the internal chain consistent */
  .slider > .container{ height: 100% !important; }
  .slider .slides{ height: 100% !important; }
  .slider .slides .slide{ height: 100% !important; }
  .slider .slides .slide > img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
  }
}
/* ===== Slider: never collapse at in-between widths ===== */

/* 0) Base: the whole chain must inherit height, always */
.slider{
  position: relative !important;
  overflow: hidden !important;

  /* Default height used when no media query matches */
  --slider-h: 48vh;                 /* desktop-ish fallback; tweak */
  height: var(--slider-h) !important;
}

.slider > .container{ height: 100% !important; }
.slider .slides{ height: 100% !important; position: relative !important; }
.slider .slides .slide{
  position: absolute !important; inset: 0 !important;
  height: 100% !important;          /* keep your animation logic */
}
.slider .slides .slide > img{
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  aspect-ratio: auto !important; max-width: none !important; max-height: none !important;
}☰

/* 1) Portrait (taller ~ two-thirds of screen) */
@media (max-width: 900px) and (orientation: portrait){
  .slider{ --slider-h: 65svh; }      /* try 60–70svh to taste */
}

/* 2) Landscape (lower) */
@media (max-width: 900px) and (orientation: landscape){
  .slider{ --slider-h: 42svh; }      /* try 36–44svh to taste */
}

/* 3) Optional desktop tuning so there’s no gap between 900px and big screens */
@media (min-width: 901px) and (max-width: 1200px){
  .slider{ --slider-h: 46vh; }
}
@media (min-width: 1201px){
  .slider{ --slider-h: 56vh; }
}

/* 4) Prefer dynamic viewport on modern iOS to reduce jump on rotation */
@supports (height: 100dvh){
  @media (max-width: 900px) and (orientation: portrait){
    .slider{ --slider-h: 65dvh; }
  }
  @media (max-width: 900px) and (orientation: landscape){
    .slider{ --slider-h: 55dvh; }
  }
}
/* ===== Desktop/Laptop friendly: use aspect-ratio instead of orientation ===== */

/* Base: keep the chain intact */
.slider{ position: relative !important; overflow: hidden !important; }
.slider > .container{ height: 100% !important; }
.slider .slides{ height: 100% !important; position: relative !important; }
.slider .slides .slide{ position: absolute !important; inset: 0 !important; height: 100% !important; }
.slider .slides .slide > img{
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  aspect-ratio: auto !important;
}

/* Default desktop height (fallback) */
.slider{ height: 65vh !important; }  /* tweak to taste */

/* Portrait-like windows (taller than wide): make slider tall */
@media (max-aspect-ratio: 3/4){       /* e.g., 900x1200 */
  .slider{ height: 52vh !important; } /* ~two-thirds of screen var 65  */
}

/* Landscape-like windows (wider than tall): make slider lower */
@media (min-aspect-ratio: 5/4){       /* e.g., 1280x1024 or wider */
  .slider{ height: 90vh !important; } /* try 40–50vh to taste var 85 */
}
/* === MOBILE PORTRAIT: smaller header (4/5 of previous size) === */
@media (max-width: 960px) and (orientation: portrait) {
  .site-header {
    --header-height: 72px;           /* was 90px → 4/5 */
    padding-top: 9px;                /* was 10px */
    padding-bottom: 9px;             /* was 10px */
  }

  .site-header .brand-logo {
    width: 58px !important;          /* was 72px → 4/5 */
    height: auto !important;
  }

  .site-header .brand-text {
    font-size: 1.6rem !important;    /* was 2rem → 4/5 */
  }

  .site-header .menu-toggle {
    font-size: 27px !important;      /* was 34px → ~4/5 */
  }
}
.price-link {
  color: #2f855a;;
  text-decoration: none;   /* remove underline if you want it clean */
}

.price-link:hover {
  text-decoration: underline; /* or keep hover feedback */
}
/* === Subtle right-pointing arrow on bottom-left of model card images === */
#home-models .card .card-gallery {
  position: relative !important;
  display: block !important;
  overflow: hidden;
}

#home-models .card .card-gallery::after {
  content: "➔";                 
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 20px;
  color: #B7E8E1;               /* same green as floating button */
  opacity: 0.9;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: none;              /* arrow points naturally right */
}

#home-models .card .card-gallery:hover::after {
  opacity: 1;
  transform: translateX(3px);   /* small rightward nudge */
}

/* Optional: smaller arrow on mobile */
@media (max-width: 768px) {
  #home-models .card .card-gallery::after {
    font-size: 16px;
    left: 6px;
    bottom: 6px;
  }
}
/* === NEWS: fine-tune spacing between ticker and “Read more” === */

/* Default (tablet-ish) */
#news .upgrade-ticker { margin-bottom: 1.25rem; }
#news details.hero-card { margin-top: 1.25rem; }

/* Mobile portrait: bring them closer */
@media (max-width: 768px) and (orientation: portrait){
  #news .upgrade-ticker { margin-bottom: 0.5rem !important; }
  #news details.hero-card { margin-top: 0.5rem !important; }
}

/* Mobile landscape: still fairly tight */
@media (max-width: 900px) and (orientation: landscape){
  #news .upgrade-ticker { margin-bottom: 0.75rem !important; }
  #news details.hero-card { margin-top: 0.75rem !important; }
}

/* Laptop / desktop: add more breathing room */
@media (min-width: 1025px){
  #news .upgrade-ticker { margin-bottom: 2.25rem !important; }
  #news details.hero-card { margin-top: 3.25rem !important; }
}



/* === Button color update (More + Get in touch) — use new green #E8F5EE === */
:root{
  --xyz-green: #E8F5EE;                 /* unified light-green */
  --xyz-green-hover: #DDF1E8;           /* slightly darker for hover focus */
  --xyz-green-border: #cfe8db;          /* subtle border for contrast */
}

/* "More" dropdown button in the header */
.nav-dropdown > .more-btn.nav-btn{
  background: var(--xyz-green) !important;
  color: #000 !important;
  border: 1px solid var(--xyz-green-border) !important;
  box-shadow: none !important;
}
.nav-dropdown > .more-btn.nav-btn:hover,
.nav-dropdown > .more-btn.nav-btn:focus{
  background: var(--xyz-green-hover) !important;
  filter: none !important;
  outline: 2px solid rgba(0,0,0,.08) !important;
  outline-offset: 2px !important;
}

/* Floating round "Get in touch" button */
.contact-float{
  background: var(--xyz-green) !important;
  color: #000 !important;
  border: 1px solid var(--xyz-green-border) !important;
}
.contact-float:hover{
  background: var(--xyz-green-hover) !important;
  transform: scale(1.05);
}
/* === Darker base colour for the floating "Get in touch" button === */
.floating-button,
.float-btn,
.contact-btn {
  background-color: #BDE3CE !important;  /* slightly darker base */
  color: #000 !important;
  border: none;
  transition: background-color 0.3s ease;
}

/* Hover still a touch darker for feedback */
.floating-button:hover,
.float-btn:hover,
.contact-btn:hover {
  background-color: #A9D8BC !important;  /* gentle darker hover */
}
/* === Pricelist link color (match language pills) === */
a.price-link,
a.price-btn,
a[href*="pricelist"] {
  color: #B7E8E1 !important; /* same as language pills */
  text-decoration: none;
  font-weight: 500;
}

a.price-link:hover,
a.price-btn:hover,
a[href*="pricelist"]:hover {
  text-decoration: underline;
  color: #9edbd3 !important; /* optional hover variant */
}
/* === Link + Button color adjustments === */

/* "here" link in About section */
#about a,
#about a:visited {
  color: #B7E8E1 !important;
  text-decoration: none;
  font-weight: 500;
}
#about a:hover {
  color: #9edbd3 !important; /* slightly darker hover */
  text-decoration: underline;
}

/* "Send" button in Get in touch section */
#contact button,
#contact .nav-btn {
  background-color: #B7E8E1 !important;
  color: #000 !important;
  border: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
#contact button:hover,
#contact .nav-btn:hover {
  background-color: #9edbd3 !important;
  transform: scale(1.05);
}
/* Visible glow + shadow pulse driller på laptop men mobil ok */
/*@keyframes cf-shadow-pulse {
  0%   { box-shadow: 0 10px 22px rgba(0,0,0,.18); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50%  { box-shadow: 0 20px 40px rgba(0,0,0,.34); filter: drop-shadow(0 0 10px rgba(0,0,0,.12)); }
  100% { box-shadow: 0 10px 22px rgba(0,0,0,.18); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}
.contact-float {
  animation: cf-shadow-pulse 2.8s ease-in-out infinite;
  will-change: box-shadow, filter;
}
.contact-float:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .contact-float{ animation:none!important; filter:none!important; } }*/

/* Strong, visible pulse (works on desktop + mobile) */


/* === Floating button: calm pulse (iPhone + desktop Safari safe) === */
@-webkit-keyframes cfPulseSlow {
  0%   { -webkit-transform: scale(1);         transform: scale(1);         box-shadow: 0 10px 22px rgba(0,0,0,.18); }
  50%  { -webkit-transform: scale(1.02);      transform: scale(1.02);      box-shadow: 0 18px 36px rgba(0,0,0,.26); }
  100% { -webkit-transform: scale(1);         transform: scale(1);         box-shadow: 0 10px 22px rgba(0,0,0,.18); }
}
@keyframes cfPulseSlow {
  0%   { transform: scale(1);    box-shadow: 0 10px 22px rgba(0,0,0,.18); }
  50%  { transform: scale(1.02); box-shadow: 0 18px 36px rgba(0,0,0,.26); }
  100% { transform: scale(1);    box-shadow: 0 10px 22px rgba(0,0,0,.18); }
}
/* Base: run everywhere (mobile already works) */
.contact-float{
  -webkit-animation-name: cfPulseSlow !important;
          animation-name: cfPulseSlow !important;
  -webkit-animation-duration: 3.4s !important;
          animation-duration: 3.4s !important;
  -webkit-animation-timing-function: ease-in-out !important;
          animation-timing-function: ease-in-out !important;
  -webkit-animation-iteration-count: infinite !important;
          animation-iteration-count: infinite !important;
  -webkit-animation-play-state: running !important;
          animation-play-state: running !important;
  will-change: transform, box-shadow;
}
/* Desktop force (in case other rules reset it) */
@media (min-width: 901px){
  .contact-float.cf-force{
    -webkit-animation-name: cfPulseSlow !important;
            animation-name: cfPulseSlow !important;
    -webkit-animation-duration: 3.4s !important;
            animation-duration: 3.4s !important;
    -webkit-animation-iteration-count: infinite !important;
            animation-iteration-count: infinite !important;
    -webkit-animation-play-state: running !important;
            animation-play-state: running !important;
  }
}
/* Never pause on hover */
@media (hover: hover){
  .contact-float:hover,
  .contact-float.cf-force:hover{
    -webkit-animation-play-state: running !important;
            animation-play-state: running !important;
  }
}
/* Respect reduced motion (comment block to test) */
@media (prefers-reduced-motion: reduce){
  .contact-float{ -webkit-animation: none !important; animation: none !important; }
}

/* === DESKTOP-VISIBLE PULSE for .contact-float === */
/* Stronger so it's noticeable on big screens, still gentle */
@-webkit-keyframes cfPulseDesk{
  0%   { -webkit-transform: scale(1);         transform: scale(1);         box-shadow: 0 10px 22px rgba(0,0,0,.18); }
  50%  { -webkit-transform: scale(1.035);     transform: scale(1.035);     box-shadow: 0 22px 44px rgba(0,0,0,.30); }
  100% { -webkit-transform: scale(1);         transform: scale(1);         box-shadow: 0 10px 22px rgba(0,0,0,.18); }
}
@keyframes cfPulseDesk{
  0%   { transform: scale(1);    box-shadow: 0 10px 22px rgba(0,0,0,.18); }
  50%  { transform: scale(1.035);box-shadow: 0 22px 44px rgba(0,0,0,.30); }
  100% { transform: scale(1);    box-shadow: 0 10px 22px rgba(0,0,0,.18); }
}

/* Apply with longhand so no later 'animation:' shorthand can kill it */
html body .contact-float{
  -webkit-animation-name: cfPulseDesk !important;
          animation-name: cfPulseDesk !important;
  -webkit-animation-duration: 3.2s !important;   /* a bit slower = calmer */
          animation-duration: 3.2s !important;
  -webkit-animation-timing-function: ease-in-out !important;
          animation-timing-function: ease-in-out !important;
  -webkit-animation-iteration-count: infinite !important;
          animation-iteration-count: infinite !important;
  -webkit-animation-play-state: running !important;
          animation-play-state: running !important;
  will-change: transform, box-shadow;
}

/* Don’t pause on hover (desktop pointers often sit on the button) */
@media (hover: hover){
  html body .contact-float:hover{
    -webkit-animation-play-state: running !important;
            animation-play-state: running !important;
  }
}

/* If you previously disabled motion, keep this commented while testing */
/*
@media (prefers-reduced-motion: reduce){
  html body .contact-float{ -webkit-animation: none !important; animation: none !important; }
}
*//* === HAMBURGER ZONE: lock header to one size (kills the 3rd phase) === */
@media (max-width: 960px){
  .site-header{
    --header-height: 90px !important;       /* use one portrait value */
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    padding: 0 !important;                   /* remove extra top/bottom padding */
  }

  /* Ensure the inner bar matches exactly */
  .site-header .container,
  .site-header .container.nav{
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    padding: 0 !important;                   /* kill the “extra padding bottom” */
    align-items: center !important;
  }

  /* Brand sizing: keep the two phases (hamburger vs. wide) */
  .site-header .brand-logo{
    width: 72px !important;                  /* same as your portrait */
    height: auto !important;
  }
  .site-header .brand-text{
    font-size: 2rem !important;              /* same as your portrait */
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Hamburger icon size stays consistent */
  .site-header .menu-toggle{ font-size: 34px !important; }

  /* The dropdown must start exactly below the fixed header */
  .nav-open .nav-links{ top: var(--header-height) !important; }

  /* Belt-and-suspenders: neutralize any mobile variants that add padding */
  .site-header.header--mobile,
  .site-header.header--compact,
  header.site-header{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Landscape within hamburger: do NOT change height/padding */
@media (max-width: 960px) and (orientation: landscape){
  .site-header,
  .site-header .container,
  .site-header .container.nav{
    padding-bottom: 0 !important;
    height: var(--header-height) !important;
  }
}
/* === SMALLER HAMBURGER HEADER (≤960px) === */
@media (max-width: 960px){
  .site-header{
    /* Tweak this first number to taste: 68–78px usually feels good */
    --header-height: 74px !important;
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    padding: 0 !important;
  }

  /* Inner bar matches the exact height, no extra padding */
  .site-header .container,
  .site-header .container.nav{
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* Smaller logo + brand text (adjust to taste) */
  .site-header .brand-logo{
    width: 60px !important;     /* was ~72px */
    height: auto !important;
  }
  .site-header .brand-text{
    font-size: 1.6rem !important; /* was ~2rem */
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Hamburger icon scaled down a bit */
  .site-header .menu-toggle{ font-size: 30px !important; }

  /* Keep dropdown starting exactly below the header */
  .nav-open .nav-links{ top: var(--header-height) !important; }
}

/* Ensure landscape within hamburger does not change size */
@media (max-width: 960px) and (orientation: landscape){
  .site-header,
  .site-header .container,
  .site-header .container.nav{
    height: var(--header-height) !important;
    padding: 0 !important;
  }
}
/* === KEEP BRAND TEXT SMALL IN WIDE MENU PHASE === */
@media (min-width: 961px){
  .site-header .brand-text{
    font-size: 1.6rem !important;  /* match hamburger phase */
    line-height: 1 !important;
  }
}
/* === Restore left margin for logo in hamburger phase === */
@media (max-width: 960px) {
  .site-header .brand-logo {
    margin-left: 12px !important;  /* restore space between screen edge and logo */
  }
}
/* === SUBPAGE: reduce slider height in hamburger mode (2/3 of index) === */

/* Portrait mobile */
@media (max-width: 960px) and (orientation: portrait) {
  body.subpage #slider,
  body.subpage .subslider {
    height: 100vh !important;  /* ~2/3 of 78vh */
  }
  body.subpage #slider .slides,
  body.subpage .subslider .subtrack {
    height: 100vh !important;
  }
  body.subpage #slider img,
  body.subpage .subslider img {
    height: 100vh !important;
    object-fit: cover !important;
  }
}

/* Landscape mobile */
@media (max-width: 960px) and (orientation: landscape) {
  body.subpage #slider,
  body.subpage .subslider {
    height: 90vh !important;  /* ~2/3 of 86vh var 57*/
  }
  body.subpage #slider .slides,
  body.subpage .subslider .subtrack {
    height: 90vh !important;
  }
  body.subpage #slider img,
  body.subpage .subslider img {
    height: 90vh !important;
    object-fit: cover !important;
  }
}

/* === SUBPAGES — MINIMAL GREEN ARROWS (no circle background) === */

body.subpage .slide-btn,
body.subpage .slider-btn,
body.subpage .subnav {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  padding: 0.5rem;
  border: none;
  background: transparent;        /* remove circle background */
  color: #E8F5EE;                 /* mint green arrows */
  font-size: 3rem;                /* adjust size */
  line-height: 1;
  cursor: pointer;
  z-index: 50;
  opacity: 0.9;
  pointer-events: auto !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.subpage .slide-btn:hover,
body.subpage .slider-btn:hover,
body.subpage .subnav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

/* Left/Right placement */
body.subpage .slide-btn.prev,
body.subpage .slider-btn.prev,
body.subpage .subnav.prev { left: 1rem; }

body.subpage .slide-btn.next,
body.subpage .slider-btn.next,
body.subpage .subnav.next { right: 1rem; }

/* Smaller on mobile */
@media (max-width: 768px) {
  body.subpage .slide-btn,
  body.subpage .slider-btn,
  body.subpage .subnav {
    font-size: 2.2rem;
  }
}
/* === DISABLE KEN BURNS ON SUBPAGES === */
body.subpage .subslider img,
body.subpage .slider img,
body.subpage .subtrack img {
  animation: none !important;
  transform: none !important;
}

/* ================================
   SUBPAGES — KILL KEN BURNS EFFECT
   Reason: On subpages, after arrow navigation, .slides .slide.is-active img
   re-triggers kb animations declared earlier (even with !important).
   Fix: Force NO animation/transform for any slider images on subpages,
   with higher specificity + !important, appended at the very end.
================================ */
body.subpage .slides .slide.is-active img,
body.subpage .slide.is-active img,
body.subpage .slides .slide img,
body.subpage .slide img {
  animation: none !important;
  transform: none !important;
}

/* Guard against any orientation-specific reapply */
@media (orientation: portrait){
  body.subpage .slides .slide.is-active img,
  body.subpage .slide.is-active img,
  body.subpage .slides .slide img,
  body.subpage .slide img {
    animation: none !important;
    transform: none !important;
  }
}
@media (orientation: landscape){
  body.subpage .slides .slide.is-active img,
  body.subpage .slide.is-active img,
  body.subpage .slides .slide img,
  body.subpage .slide img {
    animation: none !important;
    transform: none !important;
  }
}
/* ===========================================================
   SLIDER HEIGHT CONTROL PANEL (FINAL)
   Put this at the VERY END of style.css
   -----------------------------------------------------------
   - Index uses #slider / #slider .slides
   - Subpages use .subslider / .subslider .subtrack
   - Requires: <body class="subpage"> on subpages
   =========================================================== */

/* 1) Tune these numbers only (vh) */
:root{
  /* Index (front page) */
  --idx-desktop-h: 95vh;   /* laptop/desktop ≥961px */
  --idx-land-h:    100vh;   /* mobile landscape ≤960px */
  --idx-port-h:    70vh;   /* mobile portrait  ≤960px */

  /* Subpages */
  --sub-desktop-h: 66vh;   /* laptop/desktop ≥961px */
  --sub-land-h:    95vh;   /* mobile landscape ≤960px */
  --sub-port-h:    65vh;   /* mobile portrait  ≤960px */
}

/* 2) Index (home) — ensure our rules beat older ones */
#slider,
#slider .slides { height: var(--idx-desktop-h) !important; }
#slider .slides .slide,
#slider .slides .slide img{
  height: 100% !important;
  aspect-ratio: auto !important;     /* cancel earlier aspect-ratio forcing */
  object-fit: cover !important;
}

/* Index mobile PORTRAIT */
@media (max-width: 960px) and (orientation: portrait){
  #slider, #slider .slides { height: var(--idx-port-h) !important; }
}
/* Index mobile LANDSCAPE */
@media (max-width: 960px) and (orientation: landscape){
  #slider, #slider .slides { height: var(--idx-land-h) !important; }
}

/* 3) Subpages — heights + image behavior */
body.subpage .subslider,
body.subpage .subslider .subtrack{ height: var(--sub-desktop-h) !important; }
body.subpage .subslider img{
  height: 100% !important;
  aspect-ratio: auto !important;     /* cancel earlier aspect-ratio forcing */
  object-fit: cover !important;
}

/* Subpages mobile PORTRAIT */
@media (max-width: 960px) and (orientation: portrait){
  body.subpage .subslider,
  body.subpage .subslider .subtrack{ height: var(--sub-port-h) !important; }
}
/* Subpages mobile LANDSCAPE */
@media (max-width: 960px) and (orientation: landscape){
  body.subpage .subslider,
  body.subpage .subslider .subtrack{ height: var(--sub-land-h) !important; }
}

/* 4) Ken Burns control
      - Keep ON for index (do NOT blank transforms on #slider)
      - Turn OFF for subpages (even when slide becomes active)
*/
body.subpage #slider .slides .slide img,
body.subpage .slides .slide.is-active img,
body.subpage .slide.is-active img,
body.subpage .subslider img{
  animation: none !important;
  transform: none !important;
}

/* 5) Disarm earlier “orientation-based aspect-ratio” overrides.
   This must come LAST and with higher specificity. */
@media (orientation: portrait){
  #slider .slides .slide img,
  .slide img,
  body.subpage .subslider img{
    aspect-ratio: auto !important;
  }
}
@media (orientation: landscape){
  #slider .slides .slide img,
  .slide img,
  body.subpage .subslider img{
    aspect-ratio: auto !important;
  }
}
/* ===========================================================
   SUBPAGES — FINAL HEIGHT CONTROL (index unaffected)
   Requires <body class="subpage"> on all subpages
   =========================================================== */

/* 1) TUNE THESE THREE ONLY */
:root{
  --sub-desktop-h: 95vh;  /* laptop/desktop ≥ 961px */
  --sub-land-h:    90vh;  /* mobile landscape ≤ 960px */
  --sub-port-h:    65vh;  /* mobile portrait  ≤ 960px */
}

/* 2) BASE — make subpage sliders/images follow container height */
body.subpage #slider,
body.subpage #slider .slides,
body.subpage .subslider,
body.subpage .subslider .subtrack {
  height: var(--sub-desktop-h) !important;
}

body.subpage .subslider img,
body.subpage #slider .slides .slide img,
body.subpage .slides .slide img,
body.subpage .slide img {
  height: 100% !important;
  width: 100%;
  object-fit: cover !important;
  aspect-ratio: auto !important;   /* neutralize older aspect rules */
  animation: none !important;       /* ensure no Ken Burns on subpages */
  transform: none !important;
}

/* 3) MOBILE PORTRAIT (subpages only) */
@media (max-width: 960px) and (orientation: portrait){
  body.subpage #slider,
  body.subpage #slider .slides,
  body.subpage .subslider,
  body.subpage .subslider .subtrack {
    height: var(--sub-port-h) !important;
  }
}

/* 4) MOBILE LANDSCAPE (subpages only) */
@media (max-width: 960px) and (orientation: landscape){
  body.subpage #slider,
  body.subpage #slider .slides,
  body.subpage .subslider,
  body.subpage .subslider .subtrack {
    height: var(--sub-land-h) !important;
  }
}

/* 5) GUARD — beat any orientation-based aspect ratio rules above */
@media (orientation: portrait){
  body.subpage .slides .slide img,
  body.subpage .slide img,
  body.subpage .subslider img { aspect-ratio: auto !important; }
}
@media (orientation: landscape){
  body.subpage .slides .slide img,
  body.subpage .slide img,
  body.subpage .subslider img { aspect-ratio: auto !important; }
}
/* ===========================================================
   SUBPAGE — DESKTOP/WIDE CONTROL (final, index unaffected)
   Requires <body class="subpage"> on subpages
   =========================================================== */
:root{
  /* Subpages */
  --sub-desktop-h: 95vh;  /* desktop / laptop */
  --sub-land-h:    100vh;  /* mobile landscape */
  --sub-port-h:    42vh;  /* mobile portrait  */
}
/* 1) Set your desktop subpage height here */
:root{
  --sub-desktop-h: 95vh;   /* change this to taste for desktop/laptop */
}

/* 2) Apply height on ALL desktop widths (incl. ultrawide) */
@media (min-width: 961px){
  /* cover both markup patterns you use */
  body.subpage .subslider,
  body.subpage .subslider .subtrack,
  body.subpage #slider,
  body.subpage #slider .slides{
    height: var(--sub-desktop-h) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* make images follow container height, not their own ratio */
  body.subpage .subslider img,
  body.subpage #slider .slides .slide img{
    height: 100% !important;
    width: 100%;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    animation: none !important;   /* keep Ken Burns OFF on subpages */
    transform: none !important;
  }
}

/* 3) Beat any aspect-ratio based rules defined earlier */
@media (min-width: 961px) and (min-aspect-ratio: 5/4){
  body.subpage .subslider,
  body.subpage .subslider .subtrack,
  body.subpage #slider,
  body.subpage #slider .slides{
    height: var(--sub-desktop-h) !important;
  }
}
@media (min-width: 961px) and (min-aspect-ratio: 21/9){
  body.subpage .subslider,
  body.subpage .subslider .subtrack,
  body.subpage #slider,
  body.subpage #slider .slides{
    height: var(--sub-desktop-h) !important; /* ultrawide still obeys */
  }
}


/* SWIPE: slider touch action */
#slider .slides{ touch-action: pan-y; }
/* --- Outline link buttons (black frame) --- */
.price-link,
#about a.btn-outline {
  display: inline-block;
  padding: 6px 10px;
  border: 1.5px solid #000;
  border-radius: 4px;          /* rectangular; set to 0 for sharp corners */
  background: transparent;
  color: #000 !important;
  text-decoration: none;
  line-height: 1.1;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.price-link:hover,
#about a.btn-outline:hover {
  background: #000;
  color: #fff !important;
}

.price-link:focus-visible,
#about a.btn-outline:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* === MODELS: equal-height cards + pinned price row (2025-10-12) === */
#home-models .grid { align-items: stretch; }
#home-models .card { display: flex; flex-direction: column; height: 100%; }
#home-models .card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 1px; gap: .5rem; }
#home-models .card-body .price { margin-top: auto; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
/* Optional: normalize first paragraph height for consistent rows */
#home-models .card-body p:first-of-type { min-height: 4.6em; }

.section-green ul {
  margin-left: 0;
  padding-left: 1.2em;
}

/* === workshops billeder 2 columns i(2025-10-12) === */
.section-green .twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 800px) {
  .section-green .twocol {
    grid-template-columns: 1fr 1fr;
  }
}
/* --- Stable hero/slider height on iOS --- */
/* Fallback: brug en custom --vh variabel, hvis svh/dvh ikke findes */
#slider,
.hero,
.hero .slides {
  height: calc(var(--vh, 1vh) * 100);
}

/* Moderne browsere (iOS 16+, Safari/Chrome iOS) — brug dynamiske viewport-units */
@supports (height: 100svh) {
  #slider,
  .hero,
  .hero .slides {
    height: 100svh;   /* "small viewport height" = stabil i toppen, når baren animerer */
  }
}

/* Alternativt kan du bruge 100dvh (dynamic), der følger med UI; 100svh er mest stabil i toppen */
@supports (height: 100dvh) {
  .ios-dvh #slider,
  .ios-dvh .hero,
  .ios-dvh .hero .slides {
    height: 100dvh;
  }
}

/* Undgå visuelle "zoom" artefakter ved scrolling */
#slider,
#slider .slides,
#slider .slide img {
  will-change: transform;
  transform: translateZ(0); /* hjælper nogle iOS rasteriseringsglitches */
}

/* Hvis I bruger baggrundsbilleder med fixed parallax, slå det fra på iOS */
@supports (-webkit-touch-callout: none) {
  .slide.bg-fixed { background-attachment: scroll !important; }
}

/* Små “bounce” fixes */
html, body { overflow-x: hidden; }