:root{
  --accent-teal: #1aa6a6;
  /* Backwards-compatible alias used for underline accents */
  --teal: var(--accent-teal);

  --gryt-orange: #c1711d;
  --gryt-accent: #008B8B;

  /* används bara på mobil för att overlay:a header utan att den blir “sticky” */
  --mobile-header-overlay: 130px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: "Junge", serif;
  color: #fff;
  overflow-x: hidden;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--gryt-orange);
}

a { color: inherit; }

/* ===========================
   HEADER + TOP NAV (DESKTOP)
   =========================== */
.header {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
}

.logo { width: 150px; }

.contact {
  text-align: right;
  font-size: 18px;
  line-height: 1.4;
}

.contact a {
  color: #fff;
  text-decoration: none;
}

/* Center menu (desktop) */
.top-nav {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  gap: 26px;
  font-size: 18px;
  align-items: center;
  white-space: nowrap;
}

/* premium links */
.top-nav a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.1;
  padding: 4px 2px 10px;
  transition: font-weight .25s ease, opacity .25s ease;
}

/* underline centered */
.top-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 0;
  height: 2px;
  background: var(--gryt-accent);
  transform: translateX(-50%);
  transition:
    width .28s cubic-bezier(.4,0,.2,1),
    height .28s cubic-bezier(.4,0,.2,1);
}

/* Nav: orange understreck endast för "Kontakt" */
.top-nav a[href="contact.html"]::after{
  background: var(--gryt-orange);
}

/* v75: On the Contact page (desktop), all menu hover/underlines should be orange */
body.contact-body .top-nav a::after{
  background: var(--gryt-orange) !important;
}

/* v79: Menu underline color should be consistent per page */
body[data-page="index"] .top-nav a::after,
body[data-page="case"] .top-nav a::after,
body.case-page .top-nav a::after,
body[data-page="services"] .top-nav a::after{
  background: var(--gryt-accent) !important; /* teal */
}
body[data-page="selected-shorts"] .top-nav a::after{
  background: var(--gryt-orange) !important;
}

.top-nav a:hover {
  opacity: 1;
  font-weight: 800;
}

.top-nav a:hover::after {
  width: 100%;
  height: 3px;
}

/* ===========================
   HAMBURGER (default: hidden)
   =========================== */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  cursor: pointer;
  background: rgba(0,0,0,0.05);

  /* viktigt: ska scrolla bort => INTE fixed */
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1001;
}

.hamburger span {
  width: 18px;
  height: 2px;
  background: #fff;
  opacity: 0.92;
  border-radius: 2px;
}

/* Mobile slide menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100vh;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  padding: 90px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: right 0.3s ease;
}

.mobile-menu.open { right: 0; }

.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  opacity: 0.92;
}

.mobile-menu a:hover { opacity: 1; }

/* ===========================
   HERO VIDEO
   =========================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--gryt-orange);
}

.video-desktop,
.video-mobile-landscape,
.video-mobile-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: var(--gryt-orange);
}

.video-mobile-landscape,
.video-mobile-portrait { display: none; }

/* Desktop fade i botten (behåll desktop look) */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to bottom,
    rgba(193,113,29,0) 0%,
    rgba(193,113,29,0.18) 45%,
    rgba(193,113,29,1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ===========================
   HERO TEXT
   =========================== */
.hero-content {
  position: absolute;
  bottom: 80px;
  width: 100%;
  text-align: center;
  padding: 0 40px;
  z-index: 2;
}

.hero-description {
  font-size: 28px;
  line-height: 1.5;
  max-width: 650px;
  margin: 0 auto 25px auto;
  font-weight: 300;
}

.cta-btn {
  display: inline-block;
  padding: 14px 30px;
  background: #000;
  border-radius: 40px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  border: 1px solid var(--gryt-accent);
  transition: 0.3s;
}

.cta-btn:hover { background: var(--gryt-accent); }

/* ===========================
   VIDEO GALLERY (DESKTOP)
   =========================== */
.video-gallery {
  background: var(--gryt-orange);
  padding: 70px 40px 90px;
  width: 100%;
}

.gallery-grid {
  max-width: 1560px;
  margin: 0 auto;
  column-count: 3;
  column-gap: 18px;
}

.video-tile {
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
  background: rgba(0,0,0,0.10);
  transform: translateZ(0);
}

/* Ingen crop: video behåller ratio */
.video-tile video {
  width: 100%;
  height:100%;
  display: block;
  background: transparent;
  pointer-events: none;

  object-fit: cover;}

/* Safari overlay-play bort */
.video-tile video::-webkit-media-controls,
.video-tile video::-webkit-media-controls-start-playback-button,
.video-tile video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-size: 22px;
  background: rgba(0,0,0,0);
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-tile:hover .video-overlay { opacity: 1; }

/* ===========================
   CASE BADGE
   =========================== */
.case-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 88px;
  height: 88px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.98;
}

.case-badge,
.case-badge svg { overflow: visible !important; }

.case-badge svg { width: 100%; height: 100%; display: block; }

.case-badge .ringText {
  transform-origin: 50% 50%;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===========================
   LIGHTBOX
   =========================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 30px;
}

.lightbox-inner {
  width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}

.lightbox-inner.has-aspect {
  aspect-ratio: var(--lb-aspect);
  height: auto;
}

.lightbox video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: #000;
  padding: 70px 40px;
}

.footer-inner {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}

.footer-logo {
  align-self: flex-end;
  width: 520px;
  max-width: 70vw;
  display: block;
  height: auto;
}

.footer-right {
  justify-self: end;
  text-align: right;
  font-size: 18px;
  line-height: 1.6;
}

.footer-right a {
  color: #fff;
  text-decoration: none;
  opacity: 0.95;
}

.footer-right a:hover { opacity: 1; }

.footer-socials-icons {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}

.footer-socials-icons a {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-socials-icons svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  display: block;
}

/* =========================================================
   MOBILE (under 900px)
   - Viktigt: header görs "relative" så den garanterat scrollar bort
   - Hero lyfts upp bakom headern via negativ margin
   ========================================================= */
@media (max-width: 900px) {
  .top-nav { display: none; }
  .hamburger { display: flex; }
  .contact { display: none; }

  /* gör header i flow => kan inte “hänga med” som fixed/sticky */
  .header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 20px 20px 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;

    /* overlay-känsla utan att vara absolute/fixed */
    margin-bottom: calc(-1 * var(--mobile-header-overlay));
    z-index: 10;
  }

  /* hero dras upp bakom headern */
  .hero {
    margin-top: calc(-1 * var(--mobile-header-overlay));
  }

  .logo { width: 135px; }

  /* hamburger ska ligga i dokumentflödet och scrolla bort */
  .hamburger {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    right: calc(14px + env(safe-area-inset-right));
  }

  /* stabil viewport på mobil */
  .hero {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .hero { height: 100dvh; min-height: 100dvh; }
  }

  /* Döda desktop-faden på mobil helt (orsakar ofta “nyans”) */
  .hero::after {
    display: none !important;
    content: none !important;
  }

  /* Aggressiv overscan uppåt (tar bort top-kant/nyans i portrait) */
  .video-desktop,
  .video-mobile-landscape,
  .video-mobile-portrait {
    position: absolute !important;
    left: -10px !important;
    right: -10px !important;
    top: calc(-1 * env(safe-area-inset-top) - 70px) !important;
    width: calc(100% + 20px) !important;
    height: calc(100% + env(safe-area-inset-top) + 140px) !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: var(--gryt-orange) !important;
    filter: none !important;
    opacity: 1 !important;
    transform: translateZ(0);
  }

  /* Sömlös skarv video -> galleri på mobil
     (overlay på galleriet, men thumbnails ligger ovanpå => INGEN fade på thumbs) */
  .video-gallery {
    position: relative;
    background: var(--gryt-orange);
    margin-top: -1px; /* tar 1px-skarv */
  }

  .video-gallery::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    height: 90px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      rgba(193,113,29,0) 0%,
      rgba(193,113,29,0.35) 55%,
      rgba(193,113,29,1) 100%
    );
  }

  .gallery-grid { position: relative; z-index: 1; }

  html, body {
    background: var(--gryt-orange);
    overflow-x: hidden;
  }
}

/* MOBIL stående */
@media (max-width: 768px) {
  .video-gallery { padding: 55px 20px 70px; }

  .hero-content { padding: 0 20px; }

  .hero-description {
    font-size: 22px;
    line-height: 1.35;
    max-width: 540px;
    margin: 0 auto 16px auto;
  }

  .cta-btn { font-size: 16px; padding: 12px 24px; }

  .gallery-grid {
    column-count: 1;
    column-gap: 0;
    max-width: 680px;
  }

  .video-tile {
    margin: 0 0 14px;
    border-radius: 16px;
  }

  .case-badge {
    width: 78px;
    height: 78px;
    top: 12px;
    left: 12px;
  }

  .footer { padding: 60px 20px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-right { justify-self: start; text-align: left; }
  .footer-socials-icons { justify-content: flex-start; }
}

/* portrait video */
@media (max-width: 768px) and (orientation: portrait) {
  .video-desktop, .video-mobile-landscape { display: none; }
  .video-mobile-portrait { display: block; }

  .hero-content {
    top: 170px;
    bottom: auto;
    width: 92%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* landscape video + text under TV + hamburger i mitten */
@media (max-width: 900px) and (orientation: landscape) {
  .video-desktop { display: none; }
  .video-mobile-landscape { display: block; }
  .video-mobile-portrait { display: none; }

  /* CTA bort i landscape */
  .cta-btn { display: none !important; }
  .hero-description { margin-bottom: 0 !important; }

  /* resetta portrait-positionering helt */
  .hero-content {
    top: auto;
    left: 0;
    transform: none;
    width: 100%;
    bottom: 18px;
    padding: 0 20px;
    text-align: center;
  }

  /* hamburger i mitten */
  .hamburger {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 14px;
  }
}

/* ===========================
   FIX 1: iOS portrait top-kant/nyans (safe-area)
   =========================== */
@media (max-width: 900px) {
  /* Lägg headerns innehåll under status bar */
  .header {
    padding-top: calc(env(safe-area-inset-top) + 16px) !important;
  }

  /* Dra upp hero även över safe-area så videon ligger bakom */
  .hero {
    margin-top: calc(-1 * (var(--mobile-header-overlay) + env(safe-area-inset-top))) !important;
  }

  /* Overscan videon mer uppåt (tar bort sista “remsan”) */
  .video-desktop,
  .video-mobile-landscape,
  .video-mobile-portrait {
    top: calc(-1 * env(safe-area-inset-top) - 120px) !important;
    height: calc(100% + env(safe-area-inset-top) + 240px) !important;
  }
}

/* ===========================
   FIX 2: mobile LANDSCAPE – logo ska inte vara centrerad
   (tillbaka till “tidigare” header-känsla)
   =========================== */
@media (max-width: 900px) and (orientation: landscape) {
  .header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    text-align: left !important;

    /* behåll overlay men inte center-layout */
    padding: calc(env(safe-area-inset-top) + 10px) 20px 0 !important;
  }

  .logo { width: 150px !important; }
}

/* =========================================================
   FINAL FIX: iOS PORTRAIT top-kant utan att "zooma" videon
   + LANDSCAPE: högerjustera hamburger
   (lägg längst ner i style.css)
   ========================================================= */

/* 1) PORTRAIT: ta bort nyansremsa uppe (safe-area) utan aggressiv overscan */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  /* se till att hero täcker och att bakgrunden inte lyser igenom */
  html, body, .hero { background: var(--gryt-orange) !important; }

  /* stäng av alla fades på mobil (om någon regel råkar slå på) */
  .hero::after {
    display: none !important;
    content: none !important;
  }

  /* minimal "safe-area-overscan" (inte 100+ px) */
  .video-mobile-portrait {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(-1 * env(safe-area-inset-top)) !important;
    width: 100% !important;
    height: calc(100% + env(safe-area-inset-top)) !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    background: var(--gryt-orange) !important;
  }
}

/* 2) LANDSCAPE: hamburgaren ska vara högerjusterad (inte centrerad) */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) and (orientation: landscape) {
  .hamburger {
    left: auto !important;
    right: 18px !important;
    transform: none !important;
    top: 14px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  /* se till att hero verkligen börjar i absolut topp */
  .hero { padding-top: 0 !important; }

  /* låt videon gå hela vägen upp under statusbaren */
  .video-mobile-portrait {
    top: 0 !important;
    height: 100% !important;
  }
}

/* iOS Safari PORTRAIT: ta bort top-remsa/nyans genom att använda -webkit-fill-available
   + låta videon "overscanna" minimalt uppåt. Påverkar inte desktop eller landscape. */
@supports (-webkit-touch-callout: none) {
  @media (orientation: portrait) and (max-width: 768px) {
    html { height: -webkit-fill-available; }
    body { min-height: 100vh; min-height: -webkit-fill-available; }

    .hero {
      height: 100vh;                  /* fallback */
      height: -webkit-fill-available; /* iOS fix */
      min-height: -webkit-fill-available;
      overflow: hidden;
      background: var(--gryt-orange);
    }

    /* videon ska alltid täcka hela – och lite till – så ingen bakgrund "kikar fram" i toppen */
    .video-mobile-portrait {
      top: -18px !important;
      bottom: -18px !important;
      height: calc(100% + 36px) !important;
      width: 100% !important;
      object-fit: cover !important;
      object-position: center top !important;
      background: var(--gryt-orange) !important;
    }

    /* v64: keep a subtle bottom fade so the transition to the page background is seamless */
    .hero::after{
      content: "" !important;
      display: block !important;
      height: 140px !important;
      background: linear-gradient(
        to bottom,
        rgba(193,113,29,0) 0%,
        rgba(193,113,29,0.35) 55%,
        rgba(193,113,29,1) 100%
      ) !important;
    }
  }
}

/* =========================================================
   iOS PORTRAIT: ta bort top-remsa/nyans (stoppa negativa margins)
   + header ovanpå hero (scrollar bort, ej fixed)
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (orientation: portrait) {

    /* 1) Stäng av overlay-tricket som skapar remsan */
    .header {
      margin-bottom: 0 !important;
      position: absolute !important;
      top: calc(env(safe-area-inset-top) + 16px) !important;
      left: 0 !important;
      right: 0 !important;
      padding: 0 20px !important;
      z-index: 10 !important;

      /* behåll din portrait-layout */
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 10px !important;
    }

    .hero {
      margin-top: 0 !important; /* <-- nyckeln */
      height: 100svh !important;
      min-height: 100svh !important;
      overflow: hidden !important;
      background: var(--gryt-orange) !important;
    }

    @supports (height: 100dvh) {
      .hero { height: 100dvh !important; min-height: 100dvh !important; }
    }

    /* 2) Ingen fade/overlay på mobil (kan ge bandning/nyans) */
    .hero::after { display: none !important; content: none !important; }

    /* 3) Videon fyller exakt heron + liten safety-overscan (inte “zoom”) */
    .video-mobile-portrait {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center center !important;
      background: var(--gryt-orange) !important;
      transform: translateZ(0) !important;
    }

    /* Minimal overscan bara för att eliminera 1–2px glapp (inte skala upp visuellt) */
    .video-mobile-portrait {
      top: -2px !important;
      left: -2px !important;
      width: calc(100% + 4px) !important;
      height: calc(100% + 4px) !important;
    }

    /* 4) Hamburger ska vara höger (och scrolla bort, dvs absolute) */
    .hamburger {
      position: absolute !important;
      top: calc(env(safe-area-inset-top) + 12px) !important;
      right: 14px !important;
      left: auto !important;
      transform: none !important;
      z-index: 1001 !important;
    }
  }

  /* v74: iOS (landscape) – fade the seam between hero video and Latest Work */
  @media (max-width: 900px) and (orientation: landscape) {
    body[data-page="index"] .hero::after{
      content: "" !important;
      display: block !important;
      height: 110px !important;
      background: linear-gradient(
        to bottom,
        rgba(193,113,29,0) 0%,
        rgba(193,113,29,0.45) 55%,
        rgba(193,113,29,1) 100%
      ) !important;
    }
  }
}

/* =========================================================
   LANDSCAPE: du sa den funkar nu – men vi högerställer hamburger
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) {
  .hamburger {
    left: auto !important;
    right: 18px !important;
    transform: none !important;
  }
}

/* iOS: färga statusbar/safe-area så den matchar videon (platt remsa) */
@supports (-webkit-touch-callout: none) {
  html { background: var(--gryt-orange) !important; }
  body { background: var(--gryt-orange) !important; }

  /* Säkerställ att ingen annan bakgrund “lyser igenom” vid topp/elastic scroll */
  .hero { background: var(--gryt-orange) !important; }
}

/* === iOS SAFARI PORTRAIT: döda top-remsa/nyans genom att garantera att videon täcker safe-area === */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (orientation: portrait) {

    /* Stoppa "overlay-hacket" som kan skapa glapp överst */
    .header {
      margin-bottom: 0 !important;
      position: absolute !important;
      top: calc(env(safe-area-inset-top) + 16px) !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 10 !important;
    }

    .hero {
      margin-top: 0 !important;
      height: 100svh !important;
      min-height: 100svh !important;
      overflow: hidden !important;
      background: var(--gryt-orange) !important;
    }

    /* Inga fades på mobil */
    .hero::after { display: none !important; content: none !important; }

    /* Tvinga PORTRAIT-videon att täcka hela vägen upp under statusbar */
    .video-mobile-portrait {
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;

      /* nyckeln: gå upp i safe-area */
      top: calc(-1 * env(safe-area-inset-top)) !important;

      width: 100% !important;
      height: calc(100% + env(safe-area-inset-top)) !important;

      object-fit: cover !important;
      object-position: center center !important;
      background: var(--gryt-orange) !important;
      filter: none !important;
      opacity: 1 !important;
    }

    /* Se till att desktop/landscape-videos inte råkar vinna */
    .video-desktop,
    .video-mobile-landscape {
      display: none !important;
    }

    /* Hindra iOS "rubber band" från att visa annan nyans */
    html, body {
      background: var(--gryt-orange) !important;
      overflow-x: hidden !important;
    }
  }
}

/* =========================================
   iOS PORTRAIT: ta bort top-remsa/nyans
   (videon täcker safe-area)
   ========================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (orientation: portrait) {

    /* Se till att hero faktiskt börjar i toppen */
    .hero {
      margin-top: 0 !important;
      padding-top: 0 !important;
      background: var(--gryt-orange) !important;
      overflow: hidden !important;
    }

    /* Ingen fade/overlay som kan påverka */
    .hero::after { display: none !important; content: none !important; }

    /* Nyckeln: låt videon gå upp i safe-area */
    .video-mobile-portrait {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;

      top: calc(-1 * env(safe-area-inset-top)) !important;
      height: calc(100% + env(safe-area-inset-top)) !important;

      width: 100% !important;
      object-fit: cover !important;
      object-position: center top !important;
      background: var(--gryt-orange) !important;
      filter: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    /* För säkerhets skull: sidan får samma bakgrund vid "rubber band" */
    html, body { background: var(--gryt-orange) !important; }
  }
}

/* =========================================
   iOS PORTRAIT – jämna ut top-kant mot statusbar
   (mask, inte video-skalning)
   ========================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (orientation: portrait) {

    .hero {
      position: relative;
      overflow: hidden;
    }

    /* Stäng av alla andra fades */
    .hero::after { display: none !important; }

    /* Top-mask som smälter ihop status-bar → video */
    .hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 120px; /* 80–140px funkar, detta är sweet-spot */
      pointer-events: none;
      z-index: 3;

      background: linear-gradient(
        to bottom,
        var(--gryt-orange) 0%,
        rgba(193,113,29,0.85) 35%,
        rgba(193,113,29,0.35) 65%,
        rgba(193,113,29,0.0) 100%
      );
    }

    /* Se till att text & logo ligger ovanpå masken */
    .header,
    .hero-content {
      position: relative;
      z-index: 4;
    }
  }
}


/* ========================================================


/* v22: overlay visible on touch so tiles never look empty */
@media (hover: none) and (pointer: coarse){
  .video-overlay{ opacity: 1; }
}


/* ===========================
   v27: Section headings (Contact + Services)
   =========================== */
.section-title{
  font-weight: 800;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--gryt-accent);
  letter-spacing: 0.02em;
}

/* Kontakt: orange understreck på rubriker */
body.contact-body .section-title{
  border-bottom-color: var(--gryt-orange);
}

/* Services: big WE DO like PDF */
.we-do{
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  font-weight: 800;
  margin: 0 0 22px 0;
}

/* Contact layout helpers */
.people-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.person-card{
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 18px;
}
.person-name{ font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.person-role{ opacity: 0.9; margin-bottom: 10px; }
.person-links a{ text-decoration: none; }
.person-links a:hover{ text-decoration: underline; text-decoration-color: var(--gryt-accent); }

.social-row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.social-row a{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-row svg{
  width: 16px;
  height: 16px;
  fill: #fff;
  display: block;
}

@media (max-width: 768px){
  .people-grid{ grid-template-columns: 1fr; }
}


/* ===========================
   v28: Kontakt + Tjänster – tajtare layout, större rubriker, centrerat
   =========================== */

/* Större rubriker (fet + teal underline) */
.section-title{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
}

/* Kontakt: tajtare yta + centrering */
.contact-page{
  max-width: 980px;
  margin: 0 auto;
  padding: 170px 24px 90px; /* plats för header */
  text-align: center;
}
.contact-sections{
  display: grid;
  gap: 34px;
  margin-top: 34px;
}
.contact-section{ text-align: center; }
.contact-lines a{ text-decoration: none; }
.contact-lines a:hover{ text-decoration: underline; text-decoration-color: var(--gryt-accent); }

.contact-subhead{
  margin-top: 24px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--gryt-accent);
}

.team-list{
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.team-card{
  background: transparent;
  border: 0;
  padding: 0;
}
.team-card h3{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}
.team-role{ opacity: 0.9; margin-bottom: 10px; }
.team-meta a{ text-decoration: none; }
.team-meta a:hover{ text-decoration: underline; text-decoration-color: var(--gryt-accent); }

/* Social icons rad i kontakt (samma som footer) */
.social-row{
  justify-content: center;
  margin-top: 16px;
}

/* Tjänster: tajtare bredd */
.services{
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px 24px 80px; /* plats för header */
}
.services-inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* WE DO: använd er markup (.we-do-title) */
.we-do-title{
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  font-weight: 800;
  margin: 0 0 22px 0;
}

/* Mobil: lite tajtare */
@media (max-width: 768px){
  .contact-page{ padding-top: 150px; }
  .services{ padding-top: 150px; }
}


/* ===========================
   v29: tajtare bredd + större rubriker + inga mörka rutor
   =========================== */

/* Rubriker tydligare */
.section-title{
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 900;
  border-bottom-width: 4px;
}
.contact-subhead{
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 900;
  border-bottom-width: 4px;
}

/* Kontakt: ta bort eventuella kort-bakgrunder */
.person-card,
.team-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kontakt: dra in bredden mer */
.contact-page{
  max-width: 820px;
}

/* Tjänster: dra in bredden mer */
.services,
.services-inner{
  max-width: 860px;
}

/* CTA centrerad i tjänster */
.services-cta{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}


/* ===========================
   v30: symmetrisk indragning + fetare rubriker (tvingat)
   =========================== */

/* Rubriker: tvinga fetstil på allt som ska vara rubrik */
.section-title,
.contact-subhead,
.we-do-title{
  font-weight: 900 !important;
}

.section-title{
  font-size: clamp(26px, 3vw, 38px) !important;
  border-bottom-width: 4px !important;
}

.contact-subhead{
  font-size: clamp(26px, 3vw, 38px) !important;
  border-bottom-width: 4px !important;
}

/* Kontakt: inga rutor, och se till att inget flyter utanför */
.team-card,
.person-card{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Tjänster: dra in lika mycket på båda sidor */
.services{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.services-inner{
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Mobil: något mindre padding men fortfarande symmetrisk */
@media (max-width: 768px){
  .services{
    max-width: 680px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* ===========================
   v31: Tjänster mindre indrag + CTA centrerad, Kontakt hero förenklad + team som underrubrik
   =========================== */

/* Tjänster: lite mindre sid-padding men fortfarande symmetrisk */
.services{
  padding-left: 28px !important;
  padding-right: 28px !important;
}
@media (max-width: 768px){
  .services{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* CTA: centrera i kolumnen */
.services-cta{
  display:flex;
  justify-content:center;
}
.services-cta .cta-btn{
  margin-left:auto;
  margin-right:auto;
}

/* Kontakt: mail under rubrik */
.contact-hero{ margin-bottom: 8px; }
.contact-hero-mail{
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
}
.contact-hero-mail a{ text-decoration:none; }
.contact-hero-mail a:hover{
  text-decoration: underline;
  text-decoration-color: var(--gryt-accent);
}

/* Team som underrubrik */
.team-section .contact-subhead{
  margin-top: 10px;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  border-bottom-width: 3px !important;
}

/* Namn/roller: inga versaler */
.team-card h3,
.team-role{
  text-transform: none !important;
}


/* ===========================
   v35: Tjänster finjustering (mindre luft, WE DO mindre, 2 kolumner)
   =========================== */

/* Lite mindre luft på sidorna men fortfarande i linje med header/galleri */
.services{
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 768px){
  .services{ padding-left: 18px !important; padding-right: 18px !important; }
}

/* Bredd i linje med galleriet */
.services .services-inner{
  max-width: 1560px !important;
  margin: 0 auto !important;
}

/* 2-kolumnslayout: copy vänster, WE DO+lista höger (som i PDF) */
.services-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 70px;
  align-items: start;
}

/* Högerkolumn: WE DO till vänster om listan (inte ovanpå) */
.services-we-do{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 42px;
  align-items: start;
}

/* WE DO lite mindre men fortfarande hero */
.we-do-title{
  font-size: clamp(50px, 5.4vw, 84px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Lista: samma storlek som brödtext och inga bokstavsbrytningar */
.we-do-list{
  font-size: 18px !important;
  line-height: 1.6 !important;
  margin-top: 6px;
}
.we-do-list li{ white-space: nowrap; }

@media (max-width: 900px){
  .we-do-list li{ white-space: normal; }
}

/* Text under WE DO ska matcha övrig brödtextstorlek */
.we-do-subtext,
.we-do-description,
.services-lead{
  font-size: 18px !important;
  line-height: 1.6 !important;
  opacity: 0.95;
}

/* Se till att brödtexter får plats i kolumnen (ingen konstig clipping) */
.services-grid *{
  min-width: 0;
}
.services-grid p,
.services-grid li{
  overflow-wrap: anywhere;
}

/* CTA centrerad i sin kolumn */
.services-cta{
  display: flex;
  justify-content: center;
}
.services-cta .cta-btn{
  margin: 18px auto 0;
}

/* Mobil: stapla kolumner */
@media (max-width: 900px){
  .services-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .services-we-do{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .we-do-list li{ white-space: normal; }
}

/* ===========================
   v35: Kontakt finputsa team-typografi
   =========================== */

/* Team-rubrik ska vara samma som andra section titles */
.team-section .section-title,
.team-section .contact-subhead{
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 900 !important;
  border-bottom-width: 4px !important;
  text-transform: none !important;
}

/* Namn som underrubrik, titel under, meta mindre */
.team-card h3{
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-bottom: 6px;
}
.team-role{
  font-size: 16px !important;
  font-weight: 600 !important;
  opacity: 0.95;
  margin-bottom: 10px;
}
.team-meta{
  font-size: 14px !important;
  line-height: 1.55 !important;
  opacity: 0.95;
}

/* Ingen mörk ruta */
.team-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* ===========================
   v43: Services tweaks requested
   =========================== */

/* Services overall: slightly less side padding than before */
.services{
  padding-left: 28px !important;
  padding-right: 28px !important;
}
@media (max-width: 768px){
  .services{ padding-left: 18px !important; padding-right: 18px !important; }
}

/* Inhouse eller extern byrå? — one line, smaller, bold, underline teal */
.services .services-copy h2,
.services .services-copy .services-question{
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 900 !important;
  text-transform: none !important;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 4px solid var(--gryt-accent);
}

/* Paragraph text a bit thicker */
.services .services-copy p,
.services .services-copy li{
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}

/* Remove list bullets explicitly */
.services ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* CTA centered like start */
.services-cta{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}
.services-cta .cta-btn{
  margin: 0 auto;
}

/* Clients section title centered, bold, underline teal */
.clients-title{
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 auto 34px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--teal);
  /* fejk-bolddar lite */
  text-shadow: 0.6px 0 0 #fff, -0.6px 0 0 #fff;
}
.clients-title-wrap{
  text-align:center;
  margin: 46px 0 22px;
}
/* If title not wrapped, still center the block */
.clients-title{
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 auto 34px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--teal);
  /* fejk-bolddar lite */
  text-shadow: 0.6px 0 0 #fff, -0.6px 0 0 #fff;
}


/* ===========================
   SERVICES PAGE FIXES (v45)
   =========================== */

/* Make the lead headline fit on one line on desktop */
.services .services-copy h2,
.services-lead-title{
  font-size: clamp(36px, 3.6vw, 54px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (min-width: 901px){
  .services .services-copy h2,
  .services-lead-title{
    white-space: nowrap;
  }
}

/* Center + emphasize "Some of our clients" */
.clients-heading,
.clients-title-wrap{
  text-align: center;
}
.clients-title{
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 auto 34px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--teal);
  /* fejk-bolddar lite */
  text-shadow: 0.6px 0 0 #fff, -0.6px 0 0 #fff;
}

/* Ensure service list has NO bullets/dots */
.services .services-right ul,
.services ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.services .services-right li::marker{ content: ""; }

.clients-rule{display:none !important;}


/* =========================================================
   SERVICES (tjanster.html) – layout & typography refinements
   Scoped to avoid affecting other pages
   ========================================================= */
body[data-page="services"] .services-wrap,
body[data-page="services"] .services-inner{
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 40px;
}

body[data-page="services"] .services-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 110px;
  align-items: start;
  padding-top: 120px; /* keeps clear of absolute header */
  padding-bottom: 40px;
}

body[data-page="services"] .services-copy{
  max-width: 720px;
}

body[data-page="services"] .services-title{
  position: relative;
  display: inline-block;
  font-size: clamp(36px, 3.2vw, 54px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  /* faux-bold hint for Junge */
  -webkit-text-stroke: 0.25px rgba(255,255,255,0.25);
  text-shadow: 0 0 0 rgba(255,255,255,0.55);
}

body[data-page="services"] body[data-page="services"] .services-we{
  display: flex;
  gap: 34px;
  align-items: flex-start;
  justify-content: flex-end;
}

body[data-page="services"] .we-title{
  font-size: clamp(56px, 6.2vw, 96px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  -webkit-text-stroke: 0.25px rgba(255,255,255,0.22);
}

body[data-page="services"] .we-list{
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
}

body[data-page="services"] .we-list ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

body[data-page="services"] .we-list li{
  margin: 6px 0;
}

body[data-page="services"] .services-cta{
  display: flex;
  justify-content: center;
  margin: 34px 0 10px;
}

body[data-page="services"] .clients-heading{
  max-width: 1560px;
  margin: 50px auto 18px;
  padding: 0 40px;
  text-align: center;
}

body[data-page="services"] .clients-title{
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 auto 34px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--teal);
  /* fejk-bolddar lite */
  text-shadow: 0.6px 0 0 #fff, -0.6px 0 0 #fff;
}

body[data-page="services"] /* remove any legacy underline helpers (if present) */
body[data-page="services"] .clients-rule{ display:none !important; }
body[data-page="services"] .services-rule {
  display: none;
}
body[data-page="services"] .clients-underline,
body[data-page="services"] .services-underline{ display: none !important; }

/* Responsive */
@media (max-width: 900px){
  body[data-page="services"] .services-wrap,
body[data-page="services"] .services-inner{ padding: 0 20px; }
  body[data-page="services"] .services-grid{
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 120px;
  }
  body[data-page="services"] .services-title{
    white-space: normal;
    font-size: 42px;
  }
  body[data-page="services"] .services-we{
    justify-content: flex-start;
  }
  body[data-page="services"] .we-title{
    font-size: 62px;
  }
  body[data-page="services"] .clients-heading{ padding: 0 20px; }
}


/* ===== v52 Clients logos + heading tweak ===== */

/* Slightly smaller clients title */
.clients-heading .clients-title{
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 auto 34px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--teal);
  /* fejk-bolddar lite */
  text-shadow: 0.6px 0 0 #fff, -0.6px 0 0 #fff;
}

/* Remove any leftover rule line spacing */
.clients-rule{ display:none !important; }

/* Replace kunder image with logo grid */
.clients-logos{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 26px 28px;
  align-items: center;
  justify-items: center;
}

.client-logo{
  width: 100%;
  max-width: 200px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.client-logo img{
  width: 100%;
  height: 56px;
  object-fit: contain;
  display:block;
  opacity: 0.98;
}

/* small screens */
@media (max-width: 768px){
  .clients-logos{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px 18px;
    margin-top: 22px;
  }
  .client-logo img{ height: 44px; }
}


.lightbox.open{ display:flex; }

/* Clients section (Services page) */
.clients{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 90px;
  text-align: center;
}
.clients-logos{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 34px;
  align-items: center;
  justify-items: center;
}
.client-logo img{
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
@media (max-width: 900px){
  .clients-logos{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clients-title{ font-size: 42px; }
}
@media (max-width: 520px){
  .clients-logos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-logo img{ max-width: 130px; }
}


/* --- Services + Clients heading underline fixes (v54) --- */
.services-title span{
  display:inline-block;
  padding-bottom:14px;
  border-bottom:3px solid var(--teal);
  /* make underline match text width */
}
.services-title{
  font-size: clamp(42px, 4.2vw, 68px);
  font-weight: 700;
  /* Junge has limited weights; this adds a slightly bolder feel */
  -webkit-text-stroke: 0.35px rgba(255,255,255,0.35);
}
.services-grid{padding-top:80px!important;}

.clients-title{
  text-align:center!important;
  font-size: clamp(34px, 3.2vw, 52px)!important;
  font-weight:700!important;
  position:relative;
  margin: 40px 0 18px!important;
}
.clients-title span{
  display:inline-block;
  padding-bottom:10px;
  border-bottom:3px solid var(--teal);
}
/* Slightly smaller than previous big version */



/* --- Clients logo sizing (v54) --- */
.clients-logos{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:22px 34px!important;
}
.clients-logos img{
  height:48px!important;
  width:auto!important;
  max-width:170px!important;
  object-fit:contain!important;
  display:block;
}
@media (max-width: 700px){
  .clients-logos img{height:42px!important; max-width:150px!important;}
}


/* =====================
   FINAL OVERRIDES (v55)
   ===================== */

/* Match gallery spacing under header on Case + Selected shorts */
.gallery-page .gallery-main {
  padding-top: 72px; /* a bit more breathing room below logo/nav */
}
@media (max-width: 820px) {
  .gallery-page .gallery-main { padding-top: 52px; }
}

/* SERVICES: tighten header->content gap a bit */
.services-hero { margin-top: 32px !important; }

/* Services headline: underline exactly text width */
.services-title { margin-bottom: 22px !important; }
.services-title .services-rule {
  display: none;
}
.services-title span {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: clamp(38px, 3.8vw, 54px);
  line-height: 1.05;
}
.services-title span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 3px;
  background: var(--teal);
}

/* Ensure body copy a hair heavier */
.services-copy {
  font-weight: 500;
}

/* Remove bullets from WE DO list if any browser default leaks */
.we-do-list,
.we-do-list ul,
.we-do-list li { list-style: none !important; margin: 0; padding: 0; }

/* CTA button centered like homepage */
.services-cta { display: flex !important; justify-content: center !important; }

/* Shared section title (Latest Work, Award-winning, Some of our clients on home) */
.section-title {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-size: clamp(34px, 3vw, 46px);
  margin: 0 0 18px 0;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 3px;
  background: var(--teal);
}
.section-title--center { display: inline-block; }
.section-title--center { margin-left: auto; margin-right: auto; }

/* SERVICES: clients heading bigger + single underline only */
.clients-title {
  display: inline-block;
  position: relative;
  font-weight: 700 !important;
  font-size: clamp(42px, 3.5vw, 56px) !important;
  margin: 0;
}
.clients-heading .clients-rule { display: none !important; }
.clients-heading { text-align: center !important; margin-bottom: 28px !important; }

/* Home text + awards layout */
.home-text {
  max-width: 900px;
  margin: 42px auto 56px;
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 26px auto 40px;
  align-items: center;
}
.award-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer: fill out more and add nav */
.footer-inner {
  max-width: 1200px !important;
}
.footer-logo { width: 650px !important; height: auto !important; max-width: 90vw; }
.footer-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.footer-nav a { text-decoration: none; }

/* Footer: make it feel less empty */
.footer-inner { max-width: 1200px; }
.footer-logo { width: 650px; height: auto; max-width: 90vw; }
.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.footer-nav a { text-decoration: none; }

/* =====================
   Overrides (v60)
   ===================== */

/* More breathing room so gallery pages don't overlap fixed header */
.gallery-page .video-gallery{
  padding-top: 260px; /* extra space under fixed header + logo */
}

/* Selected shorts: always 4 columns on desktop */
@media (min-width: 1100px){
  body[data-page="selected-shorts"] .gallery-grid{ column-count: 4; }
}

/* Consistent gaps between thumbnails */
.video-gallery .gallery-grid{ column-gap: 24px; }
.video-gallery .video-tile{ margin: 0 0 24px; }

/* Home: centered titles using underline only under text */
.home-section-title,
.award-title{
  text-align: center;
  margin: 0 auto 40px;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.05;
}

/* Wrap only the text that needs underline */
.title-underline{
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.title-underline::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--teal);
}

/* Remove any accidental extra underline blocks on home */
.latest-work hr,
.latest-work .full-width-underline{
  display: none !important;
}

/* v64: page background tests (ONLY background-color) */
body[data-page="selected-shorts"]{ background: #88c683; }
body[data-page="case"]{ background: #f4b77d; }

/* Home intro text */
.home-text{
  max-width: 1050px;
  margin: 60px auto 90px;
  text-align: center;
  font-size: 26px;
  line-height: 1.55;
}

/* Home intro text (v84): make statement much larger + bold */
body[data-page="index"] .home-text p{
  /* Much larger + bolder statement on home */
  font-size: clamp(56px, 4.8vw, 96px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  margin: 0;
}

/* v73: Home text – more side breathing room on mobile */
@media (max-width: 768px){
  .home-text{
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* Awards row */
.awards{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 44px;
  flex-wrap: wrap;
  margin: 18px auto 120px;
}
.awards img{
  height: 140px;
  width: auto;
  object-fit: contain;
}

/* Services clients title is already styled in v56; ensure underline stays */
/* Footer logo: keep proportions and make bigger */
.footer-logo img{
  /* Bigger footer logo, keep original proportions */
  width: 720px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* --- Services page: ensure a single teal underline under headings --- */
body[data-page="services"] .services-title,
body[data-page="services"] .clients-title {
  border-bottom: none !important;
}

body[data-page="services"] .services-title::after {
  content: none !important;
}

body[data-page="services"] .services-title span,
body[data-page="services"] .clients-title span {
  border-bottom: 4px solid var(--teal) !important;
  padding-bottom: 10px;
  display: inline-block;
}
/* --- v68 fixes: gallery backgrounds + services rollback --- */
/* Put background color behind the actual gallery area (not only body/footer) */
body[data-page="case"] .video-gallery{ background: #f4b77d; }
body[data-page="selected-shorts"] .video-gallery{ background: #88c683; }
/* ensure gallery itself doesn't paint over */
.video-gallery, .gallery-grid{ background: transparent; }

/* SERVICES: remove double underline (border-bottom + ::after) and slightly smaller headings */
body[data-page="services"] .services-title span{
  border-bottom: none !important;
  padding-bottom: 14px !important; /* keeps space for underline */
}
/* keep only the ::after underline */
body[data-page="services"] .services-title::after{ content: none !important; }
body[data-page="services"] .services-title span::after{ display:block !important; }

/* slightly smaller main headings on services page */
body[data-page="services"] .services-title{
  font-size: clamp(32px, 2.8vw, 48px) !important;
}
body[data-page="services"] .we-title{
  font-size: clamp(24px, 2.2vw, 34px) !important;
}
body[data-page="services"] .clients-title{
  font-size: clamp(24px, 2.2vw, 34px) !important;
}

/* =====================
   v69: MOBILE POLISH + SERVICES FIXES
   ===================== */

/* Services: stronger orange background (all viewports) */
body[data-page="services"]{ background:#D36327 !important; }

/* Services: force SINGLE underline on the main headline */
body[data-page="services"] .services-title span{
  border-bottom: none !important; /* removes the legacy underline */
}
body[data-page="services"] .services-title span::after{
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 3px;
  background: var(--teal) !important;
}

/* ---------- Mobile-only tweaks ---------- */
@media (max-width: 820px){

  /* Give text some breathing room on home + services */
  body[data-page="home"] .latest-work,
  body[data-page="home"] .latest-work-title,
  body[data-page="home"] .latest-work-sub,
  body[data-page="home"] .home-intro,
  body[data-page="services"] .services-inner{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Start (home): avoid a visible seam after the hero image/video */
  body[data-page="home"]{ background: var(--gryt-orange) !important; }
  body[data-page="home"] .hero,
  body[data-page="home"] .hero-media{
    background: var(--gryt-orange) !important;
  }
  body[data-page="home"] .hero-media::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(193,113,29,0), rgba(193,113,29,1));
  }

  /* Case / Selected shorts: remove orange top+bottom strips by matching body+header backgrounds */
  body[data-page="case"],
  body[data-page="case"] .header{ background: #f4b77d !important; }
  body[data-page="selected-shorts"],
  body[data-page="selected-shorts"] .header{ background: #88c683 !important; }

  /* Ensure gallery background fills the full area incl. padding */
  body[data-page="case"] .gallery-main,
  body[data-page="case"] .video-gallery{ background: #f4b77d !important; }
  body[data-page="selected-shorts"] .gallery-main,
  body[data-page="selected-shorts"] .video-gallery{ background: #88c683 !important; }

  /* Contact: full teal background on mobile, and lift content a bit */
  body.contact-body,
  body.contact-body .header,
  body.contact-body .contact-page{ background: var(--teal) !important; }
  /* v75: even tighter spacing on Contact (mobile) */
  body.contact-body .contact-page{ padding-top: 10px !important; }

  /* v74: Safari iOS can clip the hamburger in landscape if it sits too close to the top */
  body.contact-body .hamburger{
    top: calc(22px + env(safe-area-inset-top)) !important;
  }

  /* v75: ensure hamburger never disappears on Contact (mobile) */
  body.contact-body .hamburger{ display: flex !important; }

  /* Keep hamburger/menu above content on mobile */
  .hamburger{ z-index: 10050 !important; }
  .mobile-menu{ z-index: 10040 !important; }
  .header{ z-index: 10030 !important; }
}

/* v75: INDEX – in mobile landscape, give a little more space before "Latest Work" */
@media (max-width: 900px) and (orientation: landscape){
  body[data-page="index"] .latest-work{ margin-top: 34px !important; }
}

/* v79: INDEX – tighten spacing around gallery on mobile */
@media (max-width: 900px){
  /* Less space between "Latest Work" and the gallery */
  body[data-page="index"] .latest-work .home-section-title{ margin-bottom: 18px !important; }
  body[data-page="index"] .video-gallery{ padding-top: 28px !important; }

  /* Bring "Vi på GRYT" text closer to the gallery */
  body[data-page="index"] .home-text{ margin-top: 34px !important; }

  /* v79: Mobile footer – hide page links (also on index which doesn't load pages.css) */
  .footer-nav{ display: none !important; }
}

/* =====================
   v70: MOBILE FIXES (seams, page background fill) + SERVICES CLEANUP
   ===================== */

/* Page backgrounds (so body has the same color as the gallery/page itself) */
body[data-page="selected-shorts"]{ background:#88c683 !important; }
body[data-page="case"]{ background:#f4b77d !important; }
body.contact-body{ background: var(--gryt-accent) !important; }

/* Make headers/footers inherit the page background on these pages (mobile bars) */
body[data-page="selected-shorts"] .header,
body[data-page="selected-shorts"] .footer,
body[data-page="case"] .header,
body[data-page="case"] .footer{ background: transparent !important; }

/* CONTACT: remove any extra shadow/ghosting under the orange underline on mobile */
body.contact-body .section-title::after{
  box-shadow: none !important;
  filter: none !important;
}

/* CONTACT: make header/footer match teal background + keep hamburger above content */
body.contact-body .header,
body.contact-body .footer{ background: transparent !important; }
body.contact-body .hamburger{ z-index: 9999 !important; }

/* INDEX (mobile): seamless fade between video hero and page background */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (orientation: portrait) {
    /* Re-enable a subtle bottom fade (user wants it seamless) */
    body[data-page="index"] .hero::after{
      content: "" !important;
      display: block !important;
      height: 160px !important;
      background: linear-gradient(
        to bottom,
        rgba(193,113,29,0) 0%,
        rgba(193,113,29,0.35) 60%,
        rgba(193,113,29,1) 100%
      ) !important;
    }
  }
}

/* INDEX (mobile): give copy a little more side padding */
@media (max-width: 820px){
  body[data-page="index"] .hero-content{ padding-left: 26px !important; padding-right: 26px !important; }
}

/* SERVICES: force the stronger orange everywhere (incl header/footer/sections) */
body[data-page="services"],
body[data-page="services"] .services-hero,
body[data-page="services"] .clients-section,
body[data-page="services"] .header,
body[data-page="services"] .footer{
  background: #D36327 !important;
}

/* SERVICES: SINGLE underline under "Inhouse..." (kill all other underline implementations) */
body[data-page="services"] .services-title,
body[data-page="services"] .services-title::before,
body[data-page="services"] .services-title::after{ content: none !important; border: 0 !important; }

body[data-page="services"] .services-title span{
  position: relative !important;
  display: inline-block !important;
  border: 0 !important;
  padding-bottom: 14px !important;
}
body[data-page="services"] .services-title span::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: var(--teal) !important;
  box-shadow: none !important;
}

/* SERVICES (mobile): tighten top spacing + fit headings in one line + add side padding */
@media (max-width: 768px){
  body[data-page="services"] .services-hero{ padding: 92px 22px 70px !important; }
  body[data-page="services"] .services-inner{ padding-left: 0 !important; padding-right: 0 !important; }
  body[data-page="services"] .services-copy{ padding-left: 6px !important; padding-right: 6px !important; }
  body[data-page="services"] .services-copy p{ padding-left: 2px !important; padding-right: 2px !important; }

  body[data-page="services"] .services-title{ font-size: 44px !important; line-height: 0.95 !important; }
  body[data-page="services"] .we-do-title{ font-size: 44px !important; }
  body[data-page="services"] .clients-title{ font-size: 34px !important; }
}


/* =====================
   v71 – MOBILE BACKGROUND + FOOTER + CONTACT CLEANUP
   (fix orange bars, unify teal, restore black footer)
   ===================== */

/* Page background variable (used by mobile safe-area rules) */
body{ --page-bg: var(--gryt-orange); }
body[data-page="case"]{ --page-bg:#f4b77d; }
body[data-page="selected-shorts"]{ --page-bg:#88c683; }
body[data-page="services"]{ --page-bg:#D36327; }
body.contact-body{ --page-bg: var(--teal); }

/* Always keep footer black like before */
.footer,
.footer-inner{ background:#000 !important; }

/* Mobile: ensure <html>/<body> match current page bg (prevents iOS top/bottom bars) */
@media (max-width: 900px){
  html, body{ background: var(--page-bg) !important; }
}

/* iOS portrait safe-area rules: never force orange – use page bg */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait){
  html, body, .hero{ background: var(--page-bg) !important; }
  .video-mobile-portrait{ background: var(--page-bg) !important; }
}

/* CONTACT (mobile): one flat teal, no banding + tighter spacing */
body.contact-body{ background: var(--teal) !important; }
body.contact-body .header,
body.contact-body .contact-page{ background: var(--teal) !important; }
@media (max-width: 900px){
  /* v78: Contact (mobile) – content closer to logo */
  body.contact-body .contact-page{ padding-top: 18px !important; }

  /* v78: Contact (mobile) – ensure hamburger is always visible on iOS */
  body.contact-body .hamburger{
    position: fixed !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    display: flex !important;
    z-index: 20000 !important;
    pointer-events: auto !important;
  }
}

/* CONTACT underline: orange only, no shadow/ghost line */
body.contact-body .section-title::after{
  background: var(--gryt-orange) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* HOME (mobile): a bit more side padding for copy */
@media (max-width: 820px){
  body[data-page="index"] .hero-content{ padding-left: 52px !important; padding-right: 52px !important; }
}

/* CONTACT underline should be orange only, exactly under text */
body.contact-body .section-title{
  display: inline-block !important;
}
body.contact-body .section-title::after{
  left: 0 !important;
  width: 100% !important;
  right: auto !important;
  box-shadow: none !important;
  filter: none !important;
}

/* SERVICES (mobile): reduce top gap + keep headings on one line more often */
@media (max-width: 900px){
  body[data-page="services"] .services-grid{ padding-top: 44px !important; }
}
@media (max-width: 520px){
  body[data-page="services"] .services-title span{ font-size: 40px !important; }
  body[data-page="services"] .clients-title{ font-size: 38px !important; }
}

/* Footer must always be black on all pages (override any per-page background rules) */
body[data-page] .footer,
body[data-page] .footer-inner,
body.contact-body .footer,
body.contact-body .footer-inner{
  background: #000 !important;
}

/* =====================
   v82: Client logo per-brand scaling + more spacing
   ===================== */
/* Slightly more air between logos */
.clients-logos{ gap: 28px 46px !important; }

/* Scale tweaks (Services -> clients) */
.clients-logos img[alt="Jordbruksverket"]{ transform: scale(1.18); }
/* Näringslivets Producentansvar (if/when present) */
.clients-logos img[alt*="Producent"],
.clients-logos img[alt*="NPA"],
.clients-logos img[alt*="Näringsliv"]{ transform: scale(1.14); }

.clients-logos img[alt*="Beijer"]{ transform: scale(0.88); }
.clients-logos img[alt="Sectra"]{ transform: scale(0.90); }
.clients-logos img[alt="Qstar"]{ transform: scale(0.90); }
.clients-logos img[alt="Tekniska verken"]{ transform: scale(0.88); }
.clients-logos img[alt="Engströms"]{ transform: scale(0.88); }

/* Keep transforms centered */
.clients-logos .client-logo{ overflow: visible; }
.clients-logos img{ transform-origin: center center; }

/* =====================
   v82: Gallery hover — subtle dim + stronger title
   ===================== */
.video-overlay{
  font-size: 28px;
  font-weight: 800;
  background: rgba(0,0,0,0.18);
  opacity: 0;
  text-shadow:
    0 3px 18px rgba(0,0,0,0.75),
    0 1px 2px rgba(0,0,0,0.70);
}
@media (max-width: 768px){
  .video-overlay{ font-size: 24px; }
}

/* v83: INDEX – remove extra top padding now that "Latest Work" heading is removed */
body[data-page="index"] .video-gallery{ padding-top: 0 !important; }

/* v83: Awards – keep all logos on one row on desktop */
@media (min-width: 900px){
  .awards{
    flex-wrap: nowrap !important;
    gap: 36px !important;
  }
  .awards img{ height: 110px !important; }
}

/* v83: Services – smaller underlined headings + larger/bolder list */
body[data-page="services"] .services-title{ margin-bottom: 16px !important; }
body[data-page="services"] .services-title span{
  font-size: 22px !important;
  font-weight: 800 !important;
  padding-bottom: 8px !important;
}

body[data-page="services"] .clients-title{
  font-size: 22px !important;
  font-weight: 800 !important;
}
body[data-page="services"] .clients-title span{
  border-bottom: 0 !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 8px !important;
}
body[data-page="services"] .clients-title span::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: var(--teal) !important;
}

/* v92: Services – larger We Do list (make it clearly visible) */
body[data-page="services"] .we-do-list{
  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1.35 !important;
}
body[data-page="services"] .we-do-list li{
  font-weight: 800 !important;
  font-size: inherit !important;
}

/* v92: Services – single underline + match "Some of our clients" size to main heading */
body[data-page="services"] .services-title span,
body[data-page="services"] .clients-title span{
  border-bottom: 3px solid var(--teal) !important;
  padding-bottom: 10px !important;
  position: static !important;
}
body[data-page="services"] .services-title span::after,
body[data-page="services"] .clients-title span::after{
  content: none !important;
  display: none !important;
}

body[data-page="services"] .clients-title{
  /* same scale as "Inhouse eller extern byrå?" (small, bold, underlined) */
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* === Gallery masonry (fills Safari "holes" by balancing thumbnails) ===
   Enabled only when JS adds .masonry class to .gallery-grid. */
.gallery-grid.masonry{
  display:flex !important;
  gap:18px !important;
  column-count: initial !important;
  -webkit-column-count: initial !important;
}
.gallery-grid.masonry .masonry-col{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
.gallery-grid.masonry .video-tile{
  margin:0 !important; /* gaps handled by column flex gap */
  width:100%;
}