/*-----------------------------------*\
  #style.css — Leo H Logistik
\*-----------------------------------*/

/* Brand & base setup inspired by Transportio by codewithsadee */
/* Icons: Ionicons (MIT) */

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/
:root {
  /* colors */
  --green-blue-crayola: hsl(202, 75%, 47%);  /* primary */
  --prussian-blue: hsl(202, 72%, 15%);       /* header bg gradient base */
  --eerie-black: hsl(210, 11%, 15%);
  --dark-orange: hsl(32, 100%, 50%);         /* accent */
  --alice-blue: hsl(203, 100%, 97%);
  --light-gray: hsl(0, 0%, 80%);
  --indigo-dye: hsl(202, 64%, 26%);
  --cultured-1: hsl(0, 0%, 94%);
  --cultured-2: hsl(0, 0%, 95%);
  --cultured-3: hsl(0, 0%, 95%);
  --plutinum: hsl(0, 0%, 91%);
  --black_60: hsla(0, 0%, 0%, 0.6);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --onyx: hsl(0, 0%, 24%);

  /* typography */
  --ff-oswald: 'Oswald', sans-serif;
  --ff-rubik: 'Rubik', sans-serif;
  --fs-1: 6rem; --fs-2: 5rem; --fs-3: 4rem; --fs-4: 3rem; --fs-5: 2.2rem;
  --fs-6: 2rem; --fs-7: 1.8rem; --fs-8: 1.5rem; --fs-9: 1.4rem; --fs-10: 1.2rem;
  --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-800: 800;

  /* spacing */
  --section-padding: 50px;

  /* shadow */
  --shadow-1: 2px 0 50px hsla(0, 0%, 0%, 0.2);
  --shadow-2: 0px 40px 60px hsla(202, 75%, 47%, 0.7);
  --shadow-3: 0px 0px 60px hsla(202, 75%, 47%, 0.5);

  /* transition */
  --transition: 0.25s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
  --accent-dark: #e05500; /* slightly darker accent for hover */
  --accent-glow: rgba(255,107,0,0.12);
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
li{list-style:none}
a{text-decoration:none;color:inherit}
a,img,time,span,input,button,ion-icon{display:block}
img{height:auto;max-width:100%}
input,button{background:none;border:none;font:inherit}
input{width:100%}
button{cursor:pointer}
ion-icon{pointer-events:none}
html{font-family:var(--ff-rubik);font-size:10px;scroll-behavior:smooth}
body{background-color:var(--white);color:var(--onyx);font-size:1.6rem;line-height:1.7}
:focus-visible{outline-offset:4px}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background-color:var(--cultured-2)}
::-webkit-scrollbar-thumb{background-color:hsl(0,0%,80%);border:2px solid var(--cultured-2)}
::-webkit-scrollbar-thumb:hover{background-color:hsl(0,0%,70%)}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/
.container{padding-inline:15px}
.section{padding-block:var(--section-padding)}
.h1,.h2,.h3{font-family:var(--ff-oswald);line-height:1.2;font-weight:var(--fw-600)}
.h1{font-size:var(--fs-3);text-transform:uppercase}
.h2,.h3{color:var(--prussian-blue)}
.h2{font-size:var(--fs-4)}
.h3{font-size:var(--fs-5)}
.img-holder{background-color:var(--light-gray);aspect-ratio:var(--width)/var(--height)}
.img-cover{width:100%;height:100%;object-fit:cover}
.section-subtitle{color:var(--dark-orange);text-transform:uppercase;font-size:var(--fs-6);font-family:var(--ff-oswald);font-weight:var(--fw-600);letter-spacing:3px;margin-block-end:10px}
.section-text{line-height:1.4}
.btn{
  display:inline-flex !important;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.2rem;
  border-radius:18px;
  font-weight:600;
  background:var(--dark-orange);
  color:var(--white);
  border: none;
  text-decoration:none;
  transition:filter .15s ease, transform .12s ease;
}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1rem;
  border-radius:14px;
  background:transparent;
  border:2px solid var(--dark-orange);
  color:var(--dark-orange);
  font-weight:600;
}
.grid-list{display:grid;gap:30px}
.btn-link{color:var(--dark-orange);font-size:var(--fs-7);text-transform:uppercase;display:flex;align-items:center;gap:5px;overflow:hidden}
.btn-link>*{transform:translateX(-22px);transition:var(--transition)}
.btn-link:is(:hover,:focus)>*{transform:translateX(0)}
.w-100{width:100%}

/* Simple cards & utilities used in this site */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,.08)}
.muted{color:#6b7280}
.grid{display:grid;gap:16px}

/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/
.header{position:fixed;top:0;left:0;width:100%;z-index:60;background:transparent}
.header.active{background:linear-gradient(90deg,var(--green-blue-crayola),var(--prussian-blue));box-shadow:0 6px 24px rgba(2,6,23,0.08)}
.header .container{display:flex;align-items:center;gap:1rem}
.logo{font-family:var(--ff-oswald);color:var(--white);font-size:2.4rem;font-weight:800;letter-spacing:0.5px}
.logo-accent{color:var(--dark-orange);font-weight:800;letter-spacing:0.2px;display:inline-block;padding-left:6px}
.nav-open-btn{color:var(--white);font-size:35px}
.nav-open-btn ion-icon{--ionicon-stroke-width:40px}
.navbar{position:fixed;top:0;left:-300px;max-width:300px;width:100%;height:100%;background-color:var(--white);box-shadow:var(--shadow-1);z-index:3;visibility:hidden;transition:.25s var(--cubic-in)}
.navbar.active{visibility:visible;transform:translateX(300px);transition:.5s var(--cubic-out)}
.navbar-top{display:flex;justify-content:space-between;align-items:center;border-block-end:1px solid var(--plutinum);padding:30px 20px}
.navbar-top .logo{color:var(--onyx);font-size:3rem}
.nav-close-btn{font-size:25px}
.nav-close-btn ion-icon{--ionicon-stroke-width:40px}
.navbar-item:not(:last-child){border-block-end:1px solid var(--plutinum)}
.navbar-link{color:var(--black);display:flex;justify-content:space-between;align-items:center;padding:15px;transition:var(--transition)}
.navbar-link:is(:hover,:focus){background-color:var(--cultured-1);color:var(--dark-orange)}
.overlay{position:fixed;inset:0;background-color:var(--black_60);z-index:2;visibility:hidden;opacity:0;transition:var(--transition)}
.overlay.active{visibility:visible;opacity:1}
nav{position:relative}
nav ul{list-style:none;display:flex;gap:1rem;align-items:center;margin:0;padding:0}
nav a{display:inline-block;padding:.4rem .25rem}

/* Mobile: slide-down menu that toggles the .open class on the <ul> (used by index.js) */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  nav ul{
    position:fixed;
    inset:70px 0 auto 0; /* below header */
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    flex-direction:column;
    padding:1rem 1.25rem;
    gap:1rem;
    transform:translateY(-120%);
    transition:transform .25s ease;
    z-index:55;
    align-items:flex-start;
  }
  nav ul.open{transform:translateY(0)}
}

/* Desktop: ensure nav toggle hidden */
@media (min-width:901px){
  .nav-toggle{display:none}
}

/* Header: redesigned topbar + site-header */
.site-topbar{background:linear-gradient(90deg,rgba(2,6,23,0.04),rgba(255,255,255,0));border-bottom:1px solid rgba(2,6,23,0.03)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0}
.topbar-tel{color:var(--indigo-dye);font-weight:600;display:inline-flex;align-items:center;gap:.6rem}
.topbar-tel ion-icon{font-size:1.6rem;color:var(--dark-orange)}

.site-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.site-brand{display:flex;align-items:center;gap:.75rem;color:var(--prussian-blue);font-family:var(--ff-oswald);font-weight:800;font-size:1.9rem}
.site-brand svg{color:var(--prussian-blue)}
.brand-text{display:inline-block}
.brand-accent{color:var(--dark-orange);margin-left:.2rem}

.main-nav{flex:1;margin-left:2rem}
.nav-list{display:flex;gap:1.25rem;align-items:center}
.nav-link{color:var(--onyx);padding:.5rem .4rem;border-radius:8px;transition:var(--transition);font-weight:600}
.nav-link:is(:hover,:focus){background:rgba(2,6,23,0.04);color:var(--dark-orange);outline:none}

.header-actions{display:flex;align-items:center;gap:.75rem}
.btn-sm{padding:.45rem .8rem;border-radius:12px;font-size:1.3rem}
.btn-ghost{background:transparent;border:1px solid rgba(2,6,23,0.06);color:var(--prussian-blue);padding:.6rem .9rem;border-radius:12px;font-weight:600}

/* improved focus states for interactive header items */
.site-brand:focus,.nav-link:focus,.topbar-tel:focus,.btn-ghost:focus{outline:3px solid rgba(255,107,0,0.12);outline-offset:3px}
.nav-toggle{display:none;background:transparent;border:0;padding:.5rem;border-radius:8px}

/* Mobile adjustments: compact header, toggle visible */
@media (max-width:900px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
  .topbar-inner{padding:.35rem 0}
  .site-header{gap:.5rem}
  .site-brand{font-size:1.6rem}
}

/* Small screens: mobile nav slide-down uses existing nav ul.open behavior */
@media (max-width:900px){
  nav ul{position:fixed;inset:72px 0 auto 0;background:#fff;border-bottom:1px solid #e5e7eb;flex-direction:column;padding:1rem 1.25rem;gap:1rem;transform:translateY(-120%);transition:transform .25s ease;z-index:55;align-items:flex-start}
  nav ul.open{transform:translateY(0)}
}

/* Keep existing header.active behavior but ensure it plays nicely with new header */
.header.active{background:linear-gradient(90deg,var(--green-blue-crayola),var(--prussian-blue));box-shadow:0 6px 24px rgba(2,6,23,0.08)}

/* Replacement styles for accessible header/drawer provided by user */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,var(--prussian-blue),#07102a);color:var(--white);box-shadow:0 6px 20px rgba(2,6,23,0.12)}
.header-wrap{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;padding:.6rem 1rem}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--white);color:var(--prussian-blue);padding:.5rem .75rem;border-radius:10px}
.logo{font-family:var(--ff-oswald);font-size:1.6rem;letter-spacing:.4px;font-weight:700;color:var(--white);text-decoration:none}
.primary-nav{display:none}
.nav-list{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.nav-list a{display:inline-flex;align-items:center;padding:.55rem .8rem;border-radius:10px;color:var(--white);text-decoration:none;font-weight:600}
.nav-list a:hover{background:rgba(255,255,255,.06)}
.header-cta{display:none}
.cta-link{display:inline-flex;align-items:center;gap:.5rem;background:var(--dark-orange);color:#fff;text-decoration:none;padding:.6rem .9rem;border-radius:12px;font-weight:700}
.nav-toggle{display:inline-grid;place-items:center;background:transparent;border:0;color:var(--white)}
.icon-close{display:none}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0 0 0 auto;background:rgba(2,6,23,.55);backdrop-filter:saturate(120%) blur(6px);display:grid;grid-template-columns:1fr;align-items:start;justify-items:end;transition:opacity .22s ease, visibility .22s ease;opacity:1;visibility:visible;pointer-events:auto}
.mobile-drawer[hidden]{opacity:0;visibility:hidden;pointer-events:none}

.mobile-nav{width:min(92vw,360px);height:100%;background:linear-gradient(180deg,#071026,#091227);color:#dbe7ff;padding:1rem 1rem 2rem;overflow:auto;transform:translateX(0);transition:transform .26s cubic-bezier(.2,.9,.3,1),opacity .2s ease}
.mobile-drawer[hidden] .mobile-nav{transform:translateX(12px);opacity:0}
.mobile-drawer:not([hidden]) .mobile-nav{transform:translateX(0);opacity:1}

/* Increase tap targets and spacing for mobile nav links */
.mobile-link{display:block;padding:1.05rem 1.1rem;border-radius:12px;color:#e6eefc;text-decoration:none;font-size:1.08rem}
.mobile-link + .mobile-link{margin-top:.35rem}
.mobile-cta .cta-link{display:inline-flex;width:100%;justify-content:center;padding:0.95rem 1rem;border-radius:12px}

/* Make hamburger larger and easier to tap */
.nav-toggle{display:inline-grid;place-items:center;background:transparent;border:0;color:var(--white);padding:.5rem;border-radius:10px}
.nav-toggle:focus{outline:3px solid rgba(255,107,0,0.12);outline-offset:3px}

/* Ensure correct icon initial visibility */
.icon-burger{display:block}
.icon-close{display:none}

/* Responsive header grid for small screens */
@media (max-width:991px){
  .header-wrap{grid-template-columns:auto 1fr auto}
  .logo{font-size:1.25rem}
  .header-cta{display:none}
  .primary-nav{display:none}
}

/* Body scroll lock helper: use position fixed to avoid layout shift */
.no-scroll{position:fixed;inset:0;overflow:hidden;width:100%}

/* Desktop breakpoint */
@media (min-width: 992px){
  .header-wrap{grid-template-columns:auto 1fr auto}
  .nav-toggle{display:none}
  .primary-nav{display:block}
  .header-cta{display:block}
  .mobile-drawer{display:none}
}

/* Reduced motion */
@media (prefers-reduced-motion:no-preference){
  .mobile-nav{transform:translateX(8px);transition:transform .25s ease, opacity .25s ease}
  .mobile-drawer[hidden] .mobile-nav{transform:translateX(16px);opacity:0}
}

/* Body scroll lock helper */
.no-scroll{height:100vh;overflow:hidden}

/* Improved header + drawer styles for better desktop & mobile behavior */
.site-header{position:sticky;top:0;z-index:70;background:linear-gradient(180deg,var(--prussian-blue),#07102a);color:var(--white);box-shadow:0 6px 20px rgba(2,6,23,0.12)}
.header-wrap{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns: auto 1fr auto;align-items:center;gap:1rem;padding:.6rem 1rem}
.brand .brand-name{font-family:var(--ff-oswald);font-size:1.35rem;font-weight:700;color:var(--white);display:inline-flex;align-items:center;gap:.45rem}
.brand-accent{color:var(--dark-orange)}

.primary-nav{display:block}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-list a{display:inline-flex;align-items:center;padding:.55rem .8rem;border-radius:10px;color:var(--white);text-decoration:none;font-weight:600}
.nav-list a:hover,.nav-list a:focus{background:rgba(255,255,255,.06);color:var(--dark-orange);outline:none}

.header-actions{display:flex;align-items:center;gap:.6rem}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--white);padding:.5rem .7rem;border-radius:12px}
.btn{background:var(--dark-orange);color:#fff;padding:.55rem .9rem;border-radius:12px;font-weight:700}

.nav-toggle{display:none;background:transparent;border:0;padding:.4rem;border-radius:8px;color:var(--white)}
.nav-toggle:focus{outline:3px solid rgba(255,107,0,0.12);outline-offset:3px}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0;background:rgba(2,6,23,0.55);backdrop-filter:saturate(120%) blur(6px);display:grid;grid-template-columns:1fr;align-items:start;justify-items:end;transition:opacity .22s ease, visibility .22s ease;opacity:1;visibility:visible}
.mobile-drawer[hidden]{opacity:0;visibility:hidden}
.mobile-panel{width:min(92vw,380px);height:100%;background:linear-gradient(180deg,#071026,#091227);color:#e6eefc;padding:1rem 1.25rem;overflow:auto;box-shadow:-12px 0 30px rgba(2,6,23,0.5)}
.drawer-close{position:absolute;right:14px;top:10px;background:transparent;border:0;color:#e6eefc;font-size:2.2rem;padding:.25rem}
.mobile-list{list-style:none;margin:0;padding-top:3.25rem}
.mobile-link{display:block;padding:1.05rem 1.1rem;border-radius:12px;color:#e6eefc;text-decoration:none;font-size:1.08rem}
.mobile-link + .mobile-link{margin-top:.35rem}
.mobile-link:hover{background:rgba(255,255,255,0.03)}
.mobile-cta{margin-top:1rem}
.cta-link{display:inline-flex;width:100%;justify-content:center;padding:0.95rem 1rem;border-radius:12px;background:var(--dark-orange);color:#fff;font-weight:700}

/* Mobile behaviors */
@media (max-width:991px){
  .primary-nav{display:none}
  .nav-toggle{display:inline-flex}
  .header-wrap{grid-template-columns:auto 1fr auto;align-items:center}
  .brand .brand-name{font-size:1.15rem}
  .header-actions a.btn{display:none}
}

/* focus-visible improvements */
:focus-visible{outline:3px solid rgba(255,107,0,0.12);outline-offset:3px}

/* Text logo styles (user-provided) */
.nav__logo {
  font-size: 1.6rem; /* slightly larger */
  font-weight: 700;
  color: var(--dark-orange); /* use existing accent token */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.nav__logo .city {
  font-weight: 500;
  font-size: 1.05rem;
  color: var (--white); /* Eskilstuna in white */
}

/* Ensure mobile scales nicely */
@media (max-width:991px){
  .nav__logo{font-size:1.35rem}
  .nav__logo .city{font-size:0.95rem}
}

/* Glossy header effect */
.site-header{position:sticky;top:0;z-index:80;overflow:hidden}
.site-header::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.03) 100%);
  mix-blend-mode:screen; /* gentle lightening over background */
  z-index:65;
}
.site-header::after{
  /* moving sheen */
  content:"";
  position:absolute;left:-40%;top:-50%;width:60%;height:220%;transform:rotate(-18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.18) 52%, rgba(255,255,255,0.08) 62%, rgba(255,255,255,0.0) 100%);
  filter:blur(28px) saturate(120%);
  opacity:0.9;
  z-index:66;pointer-events:none;will-change:transform;
  animation:header-sheen 6s linear infinite;
}

@keyframes header-sheen{
  0%{transform:translateX(-120%) rotate(-18deg)}
  60%{transform:translateX(40%) rotate(-18deg)}
  100%{transform:translateX(120%) rotate(-18deg)}
}

/* Subtle glass blur behind header content for depth */
.site-header .header-wrap{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px) saturate(120%);z-index:70;border-radius:0}

/* Give logo a glossy text highlight */
.nav__logo{position:relative;z-index:71;text-shadow:0 1px 0 rgba(0,0,0,0.2)}
.nav__logo::after{
  content:"";position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.04));mix-blend-mode:overlay;opacity:0.9;pointer-events:none;border-radius:6px}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .site-header::after{animation:none;opacity:0.6}
}

/* Ensure sheen doesn't obstruct mobile touch areas; lower opacity on small screens */
@media (max-width:991px){
  .site-header::after{opacity:0.6;filter:blur(18px)}
  .nav__logo::after{height:40%;opacity:0.8}
}

/*-----------------------------------*\
  #HERO
\*-----------------------------------*/
.hero{position:relative;min-height:70vh;background-repeat:no-repeat;background-size:cover;background-position:center;display:grid;place-content:center;padding-block-start:calc(var(--section-padding) + 85px);z-index:1}
.hero .content{color:#fff}
.hero .eyebrow{color:#93c5fd;text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.85rem}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:.5rem 0 1rem}
.hero p{max-width:52ch}
.hero-cta{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}
.hero-content{background-color:var(--black_60);color:var(--white);text-align:center;padding:30px}
.hero-title .span{color:var(--dark-orange);font-size:var(--fs-2);font-weight:var(--fw-700)}
.hero-text{margin-block:20px 15px}
.btn-outline{max-width:max-content;margin-inline:auto;font-size:var(--fs-9);font-weight:var(--fw-500);text-transform:uppercase;border:1px solid var(--white);padding:8px 20px;transition:var(--transition)}
.btn-outline:is(:hover,:focus){background-color:var(--dark-orange);border-color:var(--dark-orange)}
.hero-shape{position:absolute;z-index:-1;animation:move 2s ease-in-out infinite alternate}
.hero .shape-1{top:100px;left:30px}
.hero .shape-2{bottom:80px;right:30px}
.hero .container{position:relative;z-index:2}
.hero-media{z-index:1}
@keyframes move{0%{transform:translateY(0)}100%{transform:translateY(20px)}}

/* Accent for hero subtitle/phrase */
.hero-accent{color:var(--accent);font-weight:700;letter-spacing:0.2px}
@media (min-width:640px){
  .hero-accent{font-size:1.05em}
}

/* Trust strip */
.strip{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between; /* spread items to fill the container */
  padding:.5rem 0;
}
.strip .item{
  display:flex; /* left-aligned content inside each item */
  align-items:center;
  gap:.6rem;
  padding:.75rem 1rem;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  flex:1 1 220px; /* grow to fill row, but allow wrapping */
  min-width:160px; /* stop shrinking below readable size */
  justify-content:flex-start;
}
.strip .item .icon{width:44px;height:44px;border-radius:10px;background:rgba(255,107,0,0.08);display:grid;place-items:center;flex:0 0 auto}
.strip .item .label{
  display:block;
  flex:1 1 auto; /* label takes remaining space inside item */
  white-space:normal; /* allow wrapping */
  overflow:visible;
  text-overflow:unset;
  font-weight:600;
}
/* Small screens: stack items full width for readability */
@media (max-width:640px){
  .strip .item{flex:1 1 100%;min-width:0;width:100%}
}

/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/
.about-banner{position:relative;box-shadow:var(--shadow-2);max-width:300px;margin-block-end:60px}
.about .abs-img-2{display:none}
.about .abs-img-1{position:absolute;bottom:40px;right:0;animation:move 2s ease-in-out infinite alternate}
.about :is(.section-title,.section-text){margin-block-end:20px}
.about-list{margin-block-end:40px}
.about-item{display:flex;align-items:flex-start;gap:15px}
.about-text{font-size:var(--fs-8)}
.about-icon{min-width:max-content;color:var(--dark-orange);margin-block-start:8px}
.about-item:not(:last-child){margin-block-end:10px}

/* About card video: ensure visible and responsive */
.about-video{
  display:block;
  width:100%;
  height:220px; /* reasonable default for cards */
  object-fit:cover;
  border-radius:12px;
  background-color:#f3f4f6;
}
/* Fallback image inside video element (for older browsers) */
.about-video img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}

@media (min-width:768px){
  .about-video{height:280px}
}
@media (min-width:992px){
  /* let the about card align with the text column and expand a bit */
  .about-video{height:340px}
  .card{overflow:hidden}
}

/* About video wrapper + play overlay */
.video-wrap{
  position:relative;
  display:block;
}
.about-video{
  display:block;
  width:100%;
  height:220px; /* small default, overridden by media queries below */
  object-fit:cover;
  border-radius:8px;
}
.video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.65);
  color:#fff;
  border:0;
  padding:.6rem 1rem;
  border-radius:999px;
  cursor:pointer;
  z-index:5;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.video-play.hidden{display:none}

/* Keep responsive heights aligned with previous breakpoints */
@media(min-width:600px){
  .about-video{height:280px}
}
@media(min-width:900px){
  .about-video{height:340px}
}

/*-----------------------------------*\
  #SERVICES
\*-----------------------------------*/
.service{background-color:var(--alice-blue)}
.service :is(.section-subtitle,.section-title,.section-text){text-align:center}
.service .section-title{margin-block-end:20px}
.service .section-text{margin-block-end:50px}
.service-card{background-color:var(--white);padding:30px;border:20px solid var(--cultured-3);transition:var(--transition);border-radius:18px}
.service-card:is(:hover,:focus-within){border-color:var(--dark-orange)}
.service-card .card-icon{margin-block-end:30px}
.service-card .card-title .span{display:inline-block;color:var(--dark-orange);font-size:var(--fs-3);margin-inline-end:15px}
.service-card .card-text{margin-block:10px 20px}

/*-----------------------------------*\
  #FEATURES
\*-----------------------------------*/
.feature .title-wrapper{margin-block-end:30px}
.feature .section-text{margin-block:20px 40px}
.feature-card{position:relative;padding:30px;text-align:center;border:1px solid var(--alice-blue);transition:var(--transition);border-radius:18px}
.feature-card:is(:hover,:focus-within){box-shadow:var(--shadow-3)}
.feature-card::before{content:var(--card-number);color:var(--cultured-1);font-family:var(--ff-oswald);font-size:var(--fs-1);font-weight:var(--fw-700);line-height:1;transition:var(--transition)}
.feature-card:is(:hover,:focus-within)::before{color:var(--dark-orange)}
.feature-card .card-icon{background-color:var(--alice-blue);width:170px;height:170px;display:grid;place-content:center;border-radius:50%;margin-inline:auto;margin-block-end:30px}
.feature-card .card-text{margin-block:20px 40px}
.feature-card .card-btn{color:var(--prussian-blue);font-size:24px;border:2px solid var(--prussian-blue);max-width:max-content;margin-inline:auto;padding:10px 18px;border-radius:12px}

/*-----------------------------------*\
  #PROJECTS
\*-----------------------------------*/
.project{background-color:var(--alice-blue)}
.project :is(.section-subtitle,.section-title,.section-text){text-align:center}
.project .section-text{margin-block:20px 50px}
.project-card{position:relative;border-radius:18px;overflow:hidden}
.project-card .action-btn{background-color:var(--dark-orange);color:var(--white);font-size:28px;padding:16px;position:absolute;top:30px;left:30px;opacity:0;transition:var(--transition);border-radius:12px}
.project-card:is(:hover,:focus-within) .action-btn{opacity:1}
.project-card .card-tag{color:var(--dark-orange);font-size:var(--fs-9)}
.project-card .card-content{position:relative;background-color:var(--white);padding:20px 30px;margin-block-start:-50px;margin-inline-start:30px;border-radius:18px}
.project-card .h3{font-size:var(--fs-7)}
.project-card .card-title{transition:var(--transition)}
.project-card :is(.card-title,.card-link):is(:hover,:focus){color:var(--dark-orange)}
.project-card .card-link{color:var(--prussian-blue);font-size:var(--fs-10);font-weight:var(--fw-600);text-transform:uppercase;margin-block-start:5px;transition:var(--transition)}
.project-list{display:flex;overflow-x:auto;gap:20px;padding-block-end:40px;scroll-snap-type:inline mandatory}
.project-item{min-width:100%;scroll-snap-align:start}
.project-list::-webkit-scrollbar{height:15px}
.project-list::-webkit-scrollbar-track{outline:2px solid var(--prussian-blue)}
.project-list::-webkit-scrollbar-thumb{border:3px solid var(--cultured-1);background-color:var(--prussian-blue)}
.project-list::-webkit-scrollbar-button{width:calc(25% - 40px)}

/*-----------------------------------*\
  #CTA
\*-----------------------------------*/
.cta{background:linear-gradient(180deg,#eef2ff 0,#f8fafc 100%);border-radius:18px;padding:2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/
.blog :is(.section-subtitle,.section-title,.section-text){text-align:center}
.blog .section-text{margin-block:20px 50px}
.blog-card .card-content{position:relative}
.blog-card .card-meta{background-color:var(--prussian-blue);color:var(--white);text-align:center;font-size:var(--fs-5);font-family:var(--ff-oswald);font-weight:var(--fw-600);line-height:1.5;max-width:max-content;margin-inline:auto 20px;margin-block:-80px 20px;padding:20px 25px;box-shadow:-8px 8px 0 var(--dark-orange)}
.blog-card .card-meta .span{color:var(--dark-orange);font-size:var(--fs-3);font-weight:var(--fw-700);line-height:.75}
.blog-card .card-text{margin-block:15px}

/*-----------------------------------*\
  #NEWSLETTER
\*-----------------------------------*/
.newsletter{background-color:var(--dark-orange)}
.newsletter .img-holder{background-color:transparent;margin-block-end:20px;max-width:max-content}
.newsletter .section-title{margin-block-end:20px}
.email-field{background-color:var(--white);color:var(--eerie-black);font-size:var(--fs-9);height:65px;padding-inline:20px;margin-block-end:10px;outline:none;transition:var(--transition)}
.email-field:focus{box-shadow:0 2px 2px hsla(0,0%,0%,0.4)}
.newsletter-btn{background-color:var(--prussian-blue);color:var(--white);font-family:var(--ff-oswald);font-weight:var(--fw-700);padding:8px 20px;border-radius:12px}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
.footer{background-color:var(--plutinum);color:var(--prussian-blue)}
.footer-top{display:grid;gap:40px}
.footer .logo{color:var(--white);font-size:2.2rem;font-weight:700;letter-spacing:0.35px}
.footer .logo .logo-accent{color:var(--dark-orange);font-weight:800}
.footer-text{margin-block:10px 30px}
.social-list{display:flex;gap:10px}
.social-link{background-color:var(--indigo-dye);color:var(--white);font-size:20px;padding:12px;transition:var(--transition);border-radius:12px}
.social-link:is(:hover,:focus){background-color:var(--prussian-blue)}
.footer-list-title{font-size:var(--fs-6);max-width:max-content;padding-block-end:10px;border-block-end:3px solid var(--dark-orange);margin-block-end:20px}
.footer-link{padding-block:6px}
.footer-bottom{padding-block:40px;border-block-start:1px solid var(--prussian-blue);font-size:var(--fs-9);color:var(--indigo-dye)}
.copyright-link{display:inline-block}

/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/
.back-top-btn{position:fixed;bottom:10px;right:20px;background-color:var(--eerie-black);color:var(--white);font-size:20px;padding:10px;z-index:3;opacity:0;visibility:hidden;transition:var(--transition);border-radius:999px}
.back-top-btn.active{opacity:1;visibility:visible;transform:translateY(-10px)}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/
@media (min-width:540px){
  .btn{font-size:var(--fs-7);padding-inline:30px 60px}
  .header-contact{color:var(--white);display:flex;align-items:center;gap:20px;text-align:right;line-height:1.2;margin-inline-start:auto}
  .header .contact-label{text-transform:uppercase;font-size:var(--fs-9)}
  .header .contact-number{font-size:var(--fs-6);font-weight:var(--fw-600);letter-spacing:1px}
  .header .contact-icon{font-size:35px;opacity:.6}
  .about .abs-img-2{display:block;position:absolute;width:400px;bottom:0;left:50px;z-index:-1}
  .about .abs-img-1{right:-200px}
}
@media (min-width:640px){
  .h1{--fs-3:5rem}
  .container{max-width:540px;width:100%;margin-inline:auto}
  .header .container{max-width:unset}
  .header .logo{font-size:2.2rem;letter-spacing:0.4px}
  .hero{justify-content:flex-start}
  .hero .shape-1{left:45px}
  .hero-content{background-color:transparent;text-align:left}
  .hero-title .span{--fs-2:6rem}
  .hero-text{max-width:30ch}
  .btn-outline{margin-inline:0}
}
@media (min-width:768px){
  .container{max-width:720px}
  .h1{--fs-3:6rem}
  .grid-list{grid-template-columns:1fr 1fr}
  .hero-title .span{--fs-2:7rem}
  .hero-text{font-size:var(--fs-7);max-width:40ch;margin-block-end:40px}
  .btn-outline{font-size:var(--fs-7);padding:12px 30px}
  .feature-card::before{--fs-1:10rem}
  .project-list{gap:80px}
  .project-item{min-width:calc(50% - 40px)}
  .newsletter{margin-block-start:110px}
  .newsletter .container{position:relative}
  .newsletter .newsletter-banner{position:absolute;bottom:-50px;left:0;margin-block-end:0}
  .newsletter-content{max-width:355px;margin-inline-start:auto}
  .newsletter .section-title{--fs-4:4rem}
  .newsletter-btn{font-size:var(--fs-5);padding:10px 30px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (min-width:992px){
  :root{--fs-4:4.5rem;--section-padding:120px}
  .container{max-width:960px}
  .h1{--fs-3:10rem}
  .section-subtitle{--fs-6:3rem}
  .section-text{max-width:70ch;margin-inline:auto}
  .grid-list{grid-template-columns:repeat(3,1fr)}
  .nav-open-btn,.navbar-top,.navbar-link>ion-icon{display:none}
  .navbar,.navbar.active{all:unset}
  .navbar-list{display:flex;gap:5px}
  .navbar-item:not(:last-child){border-block-end:none}
  .navbar-link{color:var(--white)}
  .navbar-link:is(:hover,:focus){background-color:transparent}
  .header-contact{margin-inline-start:0}
  .header .logo{font-size:2.6rem;letter-spacing:0.3px}
  .hero{grid-template-columns:1fr}
  .hero-content{padding:0}
  .hero-title .span{--fs-2:12rem}
  .about .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}
  .about-banner{margin-block-end:0}
  .about .abs-img-1{right:-100px}
  .about :is(.section-title,.section-text){margin-block-end:35px}
  .feature .title-wrapper{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:self-end}
  .feature .section-text{margin-block-end:0}
  .feature-list{margin-block-start:120px}
  .feature-card{padding-block-start:80px}
  .feature-card::before{--fs-1:16rem;position:absolute;top:-90px;left:20px}
  .project-item{min-width:calc(33.33% - 53.33px)}
  .blog-list{grid-template-columns:1fr 1fr}
  .newsletter{padding-block:30px}
  .newsletter .newsletter-banner{bottom:-30px}
  .newsletter-content{max-width:600px;display:grid;grid-template-columns:.8fr 1fr}
  .footer-top{grid-template-columns:repeat(4,1fr);justify-items:self-end}
  .copyright{text-align:center}
  .header .logo{font-size:2.6rem}
}
@media (min-width:1200px){
  .container{max-width:1180px}
  .h1{--fs-3:12rem}
  .header .contact-number{--fs-6:3rem}
  .hero{padding-block-start:150px;background-position:left}
  .hero-title .span{--fs-2:14rem}
  .hero-text{--fs-7:2.4rem}
  .about-banner{max-width:370px}
  .about .abs-img-2{width:max-content}
  .newsletter-content{max-width:840px;grid-template-columns:.8fr 1fr}
  .footer-top{padding-block:60px}
}

/* -----------------------------------
   Moved inline styles from index.html
   (minimal base fallback + orange accent)
   ----------------------------------- */

:root{
  --brand:#0b67ff;--brand-2:#0b5bd3;--dark:#0d1117;--light:#ffffff;--muted:#6b7280;--bg:#f7fafc;--radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:#0f172a;background:#fff}
img{max-width:100%;display:block}
.container{max-width:1140px;margin-inline:auto;padding:0 1rem}
.btn,.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.2rem;border-radius:var(--radius);text-decoration:none;font-weight:600}
.btn{background:var(--brand);color:#fff}
.btn:hover{filter:brightness(.95)}
.btn-outline{border:2px solid var(--brand);color:var(--brand)}
header.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
header .row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.logo{font-family:"Oswald", sans-serif;letter-spacing:.5px;color:#0b0f19;text-decoration:none;font-size:1.4rem}
nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
nav a{color:#111827;text-decoration:none;font-weight:500}
nav a:hover{color:var(--brand)}
.hero{position:relative;min-height:70vh;display:grid;place-items:center;padding:4rem 0;overflow:hidden;background:linear-gradient(180deg,#071021 0%,#0b1933 100%)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(0.45) saturate(0.95);pointer-events:none}
.hero .container, .hero .content{position:relative;z-index:1}
/* Sections */
section{padding:4.5rem 0}
.section-title{font-family:"Oswald",sans-serif;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 .75rem}
.section-text{color:#4b5563;max-width:65ch}
/* Services grid */
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:1.25rem;transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,.08)}
.card h3{margin:.5rem 0}
.muted{color:#6b7280}
/* Feature strip */
.strip{background:#0f172a;color:#cbd5e1;border-radius:var(--radius);padding:1rem;display:flex;gap:1rem;flex-wrap:wrap}
.strip .item{display:flex;align-items:center;gap:.6rem}
.strip .icon{width:40px;height:40px;border-radius:10px;background:#0b67ff11;display:grid;place-items:center}
/* Projects */
.projects{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.projects{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.projects{grid-template-columns:1fr}}
.project{position:relative;overflow:hidden;border-radius:var(--radius)}
.project img{aspect-ratio:4/3;object-fit:cover;width:100%}
.project .badge{position:absolute;left:.75rem;top:.75rem;background:#111827cc;color:#fff;padding:.3rem .6rem;border-radius:999px;font-size:.75rem}
.project .meta{padding:.75rem;background:#fff}
/* CTA */
.cta{background:linear-gradient(180deg,#eef2ff 0,#f8fafc 100%);border-radius:var(--radius);padding:2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* Footer */
footer{background:#0b1220;color:#93a3b8}
.footer-top{padding:3rem 0;border-bottom:1px solid #1f2937}
.footer-bottom{padding:1rem 0;color:#64748b;font-size:.9rem}
.social{display:flex;gap:.6rem}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#172033;color:#cbd5e1;text-decoration:none}
/* Back-to-top */
.back-top-btn{position:fixed;right:1rem;bottom:1rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;text-decoration:none}
/* Simple nav toggle for small screens */
.nav-toggle{display:none}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  nav ul{position:fixed;inset:70px 0 auto 0;background:#fff;border-bottom:1px solid #e5e7eb;flex-direction:column;padding:1rem;transform:translateY(-120%);transition:transform .25s}
  nav ul.open{transform:translateY(0)}
  .nav-wrap{gap:.5rem}
}

/* Orange accent additions (moved from head) */
:root{ --accent: #ff6b00; }
.btn { background: var(--accent) !important; color: #fff; border-color: transparent !important; }
.btn-outline { border-color: var(--accent) !important; color: var(--accent) !important; background: transparent; }
nav a:hover { color: var(--accent); }
.hero .eyebrow { color: var(--accent); }
.project .badge { background: var(--accent); }
.card:hover { box-shadow: 0 12px 30px rgba(255,107,0,0.08); }
.strip .icon { background: rgba(255,107,0,0.08); color: var (--accent); }
.back-top-btn { background: linear-gradient(90deg, var(--accent), #ff8b3d); }
input:focus, textarea:focus { outline: 3px solid rgba(255,107,0,0.08); box-shadow: 0 0 0 4px rgba(255,107,0,0.04); }

/* End moved styles */

/* Reduce header logo so it fits the nav/menu better */
.header .logo{font-size:1.8rem; font-weight:700; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
/* Slightly larger on medium screens, but smaller than previous values */
@media (min-width:640px){
  .header .logo{font-size:2.2rem; letter-spacing:0.4px}
}
@media (min-width:992px){
  .header .logo{font-size:2.6rem; letter-spacing:0.3px}
}
/* Ensure footer logo remains readable but not oversized */
footer .logo{font-size:1.9rem; font-weight:700; letter-spacing:0.35px}
footer .logo .logo-accent{font-weight:800}

/* Align nav to the right and hide header phone button (we removed it from markup) */
.header .row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-wrap{margin-left:auto;display:flex;align-items:center;gap:1rem}
/* Hide any leftover phone button if present */
.header .btn.phone{display:none}
/* Ensure nav ul stays on right side */
nav ul{justify-content:flex-end}
/* Mobile: keep toggle visible and slide-down menu as before */
@media (max-width:900px){
  nav ul{position:fixed;inset:70px 0 auto 0;background:#fff;border-bottom:1px solid #e5e7eb;flex-direction:column;padding:1rem;transform:translateY(-120%);transition:transform .25s}
  nav ul.open{transform:translateY(0)}
  .nav-wrap{gap:.5rem}
}
/* Desktop: keep nav inline, hide mobile toggle */
@media (min-width:901px){
  .nav-toggle{display:none}
  nav ul{position:static;transform:none;flex-direction:row;gap:1rem}
}

/* Override: show hamburger only on mobile and tablet (<=1024px), hide on desktop */
.nav-toggle{display:none !important}
@media (max-width:1024px){
  .nav-toggle{display:inline-flex !important}
  /* slide-down menu for mobile/tablet */
  nav ul{
    position:fixed;
    top:calc( var(--header-height, 70px) ); /* sit just below header */
    right:0;left:0;bottom:auto;
    background:transparent; /* transparent when closed */
    border-bottom:1px solid transparent;
    flex-direction:column;
    padding:1rem 1.25rem;
    gap:1rem;
    transform:translateY(-10%); /* slightly hidden */
    transition:transform .28s ease, opacity .18s ease, background .12s ease;
    z-index:50; /* below header (header z-index:60) */
    align-items:flex-start;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  nav ul.open{
    transform:translateY(0);
    background:#fff; /* visible background only when open */
    border-bottom:1px solid #e5e7eb;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    z-index:55; /* slightly above content but still under header if needed */
  }
  .nav-wrap{gap:.5rem}
}
@media (min-width:1025px){
  .nav-toggle{display:none !important}
  nav ul{position:static;transform:none;flex-direction:row;gap:1rem;align-items:center}
}

/* End overrides for hamburger visibility */

/* Mobile: stack hero CTA buttons and improve tap targets */
@media (max-width:900px){
  .hero-cta{flex-direction:column;align-items:center;gap:12px}
  .hero-cta .btn,
  .hero-cta .btn-outline{
    width:100%;
    max-width:420px; /* keep a comfortable max width on larger phones */
    padding:1rem 1.25rem;
    font-size:1.6rem;
    border-radius:12px;
    justify-content:center;
  }
  /* Ensure outline button keeps visible border on dark hero */
  .hero-cta .btn-outline{background:transparent;border:2px solid rgba(255,107,0,0.12);color:var(--white)}
  /* Slight elevation to make buttons stand out over hero */
  .hero-cta .btn{box-shadow:0 6px 18px rgba(0,0,0,0.18)}
}

/* Darken videos and add orange shadow/glow (adjusted: mindre mörkt, mer orange) */
.hero{position:relative;overflow:hidden}
.hero-media, .about-video{filter:brightness(.52) contrast(1.04) saturate(1.08);transition:filter .28s ease, box-shadow .28s ease}

/* Hero overlays: subtle orange glow + lättare mörk överlägg så innehåll fortfarande är läsbart */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle at 10% 20%, rgba(255,107,0,0.18), transparent 12%), radial-gradient(circle at 90% 80%, rgba(255,107,0,0.12), transparent 18%);mix-blend-mode:screen;opacity:.98}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.42));}
.hero .content{position:relative;z-index:3}

/* About-video wrapper glow + mindre mörk overlay (rundade hörn) */
.video-wrap{position:relative}
.video-wrap::before{content:"";position:absolute;inset:-8%;z-index:1;pointer-events:none;border-radius:12px;background:radial-gradient(circle at 20% 20%, rgba(255,107,0,0.22), transparent 10%), radial-gradient(circle at 80% 80%, rgba(255,107,0,0.14), transparent 14%);filter:blur(16px)}
.video-wrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:8px;background:linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.42));}

/* Mer framträdande orange skugga runt video */
.about-video{box-shadow:0 18px 40px rgba(0,0,0,0.40), 0 10px 30px rgba(255,107,0,0.12)}
.hero-media{box-shadow:inset 0 -60px 100px rgba(0,0,0,0.14), 0 20px 60px rgba(0,0,0,0.32)}

/* Keep play button above overlays */
.video-play{z-index:6}

/* Mjukare interaktion: visa mer detalj vid hover/focus */
.video-wrap:hover .about-video, .video-wrap:focus-within .about-video{filter:brightness(.66)}
.hero:hover .hero-media{filter:brightness(.56)}

/* Accessibility & button contrast overrides
   - Keep white text on primary orange buttons at all times
   - Give outline buttons a clear orange fill and white text on hover/focus
   - Improve focus-visible outlines for keyboard users
*/

/* Ensure primary buttons maintain white text and gain a stronger hover state */
.btn{
  color: #fff !important;
  background-color: var(--accent) !important;
  transition: background-color .18s var(--cubic-out), transform .12s ease, box-shadow .18s ease;
}
.btn:hover,
.btn:focus{
  background-color: var(--accent-dark) !important;
  color: #fff !important;
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 6px 24px var(--accent-glow);
}

/* Strong keyboard focus indicator */
.btn:focus-visible{
  outline: 3px solid rgba(255,107,0,0.18);
  outline-offset:3px;
}

/* Outline buttons should become a solid accent with white text on hover/focus */
.btn-outline{
  transition: background-color .18s var(--cubic-out), color .12s ease, border-color .12s ease, box-shadow .18s ease;
}
.btn-outline:hover,
.btn-outline:focus{
  background-color: var(--accent) !important;
  color:#fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px var(--accent-glow);
}
.btn-outline:active{ transform:translateY(0); }

/* Keep small ghost/link buttons readable and consistent */
.btn-link{
  color:var(--accent) !important;
}
.btn-link:hover,
.btn-link:focus{ color:var(--accent-dark) !important; text-decoration:underline; }

/* Ensure hero CTA outline variant (mobile) remains readable over dark hero */
.hero-cta .btn-outline:hover,
.hero-cta .btn-outline:focus{
  background-color: var(--accent) !important;
  color:#fff !important;
  border-color: var(--accent) !important;
}

/* Provide slightly stronger contrast for small icon-only social links */
.social a{filter:none}

/* End button contrast overrides */

/* Map box styling: make embedded map appear inside a clear boxed card */
.map-box{
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,0.06);
  box-shadow:0 10px 30px rgba(2,6,23,0.06);
}
.map-box .map-wrapper{
  height:260px; /* reduced size requested by user */
  border-radius:8px;
  overflow:hidden;
  background:#e6eefb; /* subtle placeholder while map loads */
}
.map-box iframe{width:100%;height:100%;display:block;border:0}
@media(min-width:992px){
  .map-box .map-wrapper{height:260px}
}

/* User-provided header CSS — appended per request */
/* Grundkoder – anpassa färger enligt dina variabler */
.header {
  position: sticky;
  top: 0;
  background: var(--prussian-blue); /* exempelvariabel */
  color: var(--white);
  z-index: 100;
  padding: 1rem 0;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: var(--ff-oswald);
  font-size: var(--fs-5);
  color: var(--white);
  text-decoration: none;
}
.nav-desktop ul {
  display: none; /* visas på större skärm */
  list-style: none;
  gap: 2rem;
}
.nav-desktop ul li a {
  color: var (--white);
  text-decoration: none;
  font-weight: var(--fw-500);
}
.header-btn {
  background: var(--dark-orange);
  color: var(--white);
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: var(--fw-600);
}
.nav-toggle {
  display: inline-block;
  background: none;
  border: none;
  color: var(--white);
  font-size: var(--fs-4);
}

@media(min-width: 768px) {
  .nav-desktop ul { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none; }
}

/* Mobilmenyn */
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--prussian-blue);
}
.nav-mobile ul {
  list-style: none;
  padding: 1rem;
}
.nav-mobile li a {
  display: block;
  padding: .75rem 0;
  color: var (--white);
  text-decoration: none;
}
.mobile-cta a {
  display: block;
  margin-top: 1rem;
  background: var(--dark-orange);
  padding: .75rem 1rem;
  text-align: center;
  border-radius: 8px;
}

/* End appended user header CSS */

/* Modern responsive header (appended overrides) */
.header{
  position:sticky;
  top:0;
  z-index:120;
  background:linear-gradient(180deg, rgba(7,16,42,0.9), rgba(7,16,42,0.97));
  backdrop-filter:blur(6px) saturate(120%);
  color:var(--white);
  box-shadow:0 6px 20px rgba(2,6,23,0.12);
}
.header-container{
  max-width:1180px;
  margin-inline:auto;
  padding:0.6rem 1rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
}
/* Preserve the text logo exactly; make it visually prominent */
.nav__logo, .logo{
  font-family:var(--ff-oswald);
  font-weight:700;
  color:var(--white);
  text-decoration:none;
  font-size:1.6rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.nav__logo .city{font-weight:500;color:rgba(255,255,255,0.95);font-size:0.95rem}

/* Desktop nav */
.nav-desktop ul{
  display:flex;
  gap:1.25rem;
  align-items:center;
  justify-content:center;
}
.nav-desktop a{color:var(--white);padding:.45rem .65rem;border-radius:8px;font-weight:600}
.nav-desktop a:hover,.nav-desktop a:focus{background:rgba(255,255,255,0.04);color:var(--dark-orange);outline:none}

/* Header action button */
.header-btn{background:var(--dark-orange);color:var(--white);padding:.55rem .9rem;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;gap:.5rem}
.header-btn:focus{outline:3px solid rgba(255,107,0,0.14);outline-offset:3px}

/* Mobile toggle */
.nav-toggle{display:inline-grid;place-items:center;background:transparent;border:0;color:var(--white);font-size:2.2rem;padding:.35rem;border-radius:8px}
.nav-toggle:focus{outline:3px solid rgba(255,107,0,0.14);outline-offset:3px}

/* Mobile nav (slide-down) */
.nav-mobile{
  position:fixed;inset:64px 0 0 0; /* sit under header */
  background:linear-gradient(180deg, rgba(7,16,42,0.98), rgba(7,16,42,0.99));
  z-index:110;
  transform:translateY(-6%);
  opacity:0;
  visibility:hidden;
  transition:transform .28s var(--cubic-out), opacity .2s ease;
  -webkit-overflow-scrolling:touch;
}
.nav-mobile:not([hidden]){transform:translateY(0);opacity:1;visibility:visible}
.nav-mobile ul{list-style:none;padding:1.25rem;margin:0;display:flex;flex-direction:column;gap:.35rem}
.nav-mobile a{display:block;padding:.9rem 1rem;border-radius:10px;color:var(--white);font-weight:600}
.nav-mobile a:focus,.nav-mobile a:hover{background:rgba(255,255,255,0.04);color:var(--dark-orange)}
.mobile-cta a{background:var(--dark-orange);color:#fff;padding:.85rem;border-radius:10px;display:inline-block;text-align:center}

/* Desktop behaviour */
@media(min-width:768px){
  .nav-toggle{display:none}
  .nav-mobile{display:none !important}
  .header-container{grid-template-columns:auto 1fr auto;align-items:center}
}

/* Mobile layout tweaks */
@media(max-width:767px){
  .nav-desktop{display:none}
  .header-container{grid-template-columns:auto 1fr auto}
  .nav__logo{font-size:1.25rem}
}

/* Ensure focus-visible is prominent for keyboard users */
:focus-visible{outline:3px solid rgba(255,107,0,0.16);outline-offset:3px}

/* Small improvements: spacing and touch targets */
.nav-desktop a, .nav-mobile a, .header-btn{min-height:44px}

/* End modern header overrides */

/* --- User test header CSS (appended) --- */
.header {
  position: sticky;
  top: 0;
  background: var(--prussian-blue);
  color: var(--white);
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
.logo {
  font-family: var(--ff-oswald);
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  color: var(--white);
  text-decoration: none;
}
.nav-desktop {
  display: none;
}
.nav-desktop a {
  margin: 0 1rem;
  color: var(--white);
  text-decoration: none;
  font-weight: var(--fw-500);
}
.nav-desktop a:hover {
  text-decoration: underline;
}
.cta-btn {
  background: var(--dark-orange);
  color: var(--white);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: var(--fw-600);
}
.nav-toggle {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.8rem;
}
.nav-mobile {
  display: none;
  background: var(--prussian-blue);
  padding: 1rem;
  text-align: center;
}
.nav-mobile a {
  display: block;
  padding: 0.75rem 0;
  color: var (--white);
  text-decoration: none;
}
.mobile-cta {
  margin-top: 1rem;
  display: inline-block;
  background: var (--dark-orange);
  padding: 0.6rem 1.2rem;
  border-radius: var (--radius);
}

@media(min-width: 768px) {
  .nav-desktop { display: block; }
  .nav-toggle, .nav-mobile { display: none; }
}

/* end appended test header CSS */

/* Header: layout & contrast fixes (override conflicting rules) */
header.header, .header {
  background: linear-gradient(180deg, var(--prussian-blue), #07102a) !important;
  color: var(--white) !important;
  position: sticky !important;
  top: 0;
  z-index: 140;
  box-shadow: 0 6px 20px rgba(2,6,23,0.12);
}

/* Ensure the header grid is centered and constrained */
.header-grid, .header-container {
  max-width: 1180px;
  margin-inline: auto;
  padding: 0.6rem 1rem;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

/* Make sure the logo is visible on all backgrounds and keep it prominent */
.logo, .nav__logo {
  color: var(--white) !important;
  text-decoration: none;
  font-family: var(--ff-oswald);
  font-weight: 700;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  -webkit-font-smoothing:antialiased;
}

/* Give the logo a subtle backdrop so it never disappears on light backgrounds */
.logo::after, .nav__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  mix-blend-mode: normal;
  background: transparent; /* kept transparent but available for future accent */
}

/* Desktop nav: center and distribute items */
.nav-desktop {
  display: flex !important;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}
.nav-desktop a{
  color: var(--white) !important;
  text-decoration: none;
  padding: .45rem .65rem;
  border-radius: 8px;
  font-weight: var(--fw-600);
}
.nav-desktop a:hover, .nav-desktop a:focus{ background: rgba(255,255,255,0.04); color: var(--dark-orange); }

/* CTA button */
.cta-btn, .header-btn{
  background: var(--dark-orange) !important;
  color: #fff !important;
  padding: .6rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Mobile toggle: keep visible on small screens only */
.nav-toggle{display:inline-grid;place-items:center;background:transparent;border:0;color:var(--white);font-size:1.9rem;padding:.35rem;border-radius:8px}

/* Mobile nav behavior: hidden by default. When JS removes hidden attr we show it as overlay */
.nav-mobile{display:none}
.nav-mobile[hidden]{display:none}
.nav-mobile:not([hidden]){
  display:block;
  position:fixed;
  left:0;right:0;top:64px; /* sits under header */
  background: linear-gradient(180deg, rgba(7,16,42,0.98), rgba(7,16,42,0.99));
  padding: 1rem 1.25rem;
  z-index:130;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile a{color:var(--white);display:block;padding:.85rem 0;border-radius:8px}
.nav-mobile a:hover{color:var(--dark-orange);background:rgba(255,255,255,0.03)}
.mobile-cta{display:block;margin-top:1rem;background:var(--dark-orange);color:#fff;padding:.75rem;border-radius:8px;text-align:center}

/* Responsive toggles */
@media(min-width:768px){
  .nav-toggle{display:none}
  .nav-mobile{display:none !important}
  .nav-desktop{display:flex}
}
@media(max-width:767px){
  .nav-desktop{display:none}
  .logo{font-size:1.25rem}
}

/* Ensure high contrast for links and visible focus outlines */
a, a:link, a:visited{color:inherit}
:focus{outline:3px solid rgba(255,107,0,0.14);outline-offset:3px}

/* Small spacing improvements so elements don't hug to the left */
.header-grid .logo{justify-self:start}
.header-grid .nav-desktop{justify-self:center}
.header-grid .cta-btn{justify-self:end}

/* End header fixes */

/* Restore white site background + black/orange text palette (user request) */
body{
  background-color: var(--white) !important;
  color: var(--onyx) !important; /* primary text = near-black */
}

/* Header: light background with subtle border/shadow so logo stays visible */
.header, header.header{
  background: var(--white) !important;
  color: var (--onyx) !important;
  box-shadow: 0 1px 8px rgba(2,6,23,0.06) !important;
  border-bottom: 1px solid rgba(2,6,23,0.04) !important;
}

/* Logo - keep markup unchanged but ensure visible on light bg */
.logo, .nav__logo{
  color: var(--onyx) !important;
  text-decoration: none;
}

/* Desktop & mobile nav links use dark text, hover to orange */
.nav-desktop a, .nav-mobile a, .nav-desktop, .nav-mobile, .nav-desktop a:link, .nav-mobile a:link{
  color: var(--onyx) !important;
}
.nav-desktop a:hover, .nav-desktop a:focus, .nav-mobile a:hover, .nav-mobile a:focus{
  color: var (--dark-orange) !important;
  background: transparent !important;
}

/* Toggle icon should be visible on light header */
.nav-toggle{
  color: var(--onyx) !important;
}

/* CTA buttons stay orange with white text for contrast */
.cta-btn, .header-btn, .mobile-cta, .btn, .cta-link{
  background: var (--dark-orange) !important;
  color: var(--white) !important;
  border-color: transparent !important;
}

/* Mobile nav overlay: white background to match header/body */
.nav-mobile:not([hidden]){
  background: var(--white) !important;
  border-top: 1px solid rgba(2,6,23,0.04) !important;
}

/* Ensure focus-visible remains clear on light background */
:focus-visible{
  outline: 3px solid rgba(255,107,0,0.16) !important;
  outline-offset: 3px !important;
}

/* Ensure links inherit new palette in footer/other areas */
a, a:link, a:visited{ color: inherit; }

/* Small utility: if any white-on-white remains, force readable contrast */
*{color:inherit}

/* End white/light theme overrides */

/* Logo color and sizing override (user-specified) */
:root{
  --accent: #ff7a1a; /* user-preferred orange */
  --text: #0f1115;   /* dark text for city */
}

.nav__logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent) !important; /* orange */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.nav__logo .city {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text) !important; /* mörk */
}

/* End logo overrides */

/* Logo-only override: ensure the text logo shows the exact orange + dark city color */
:root{ --accent: #ff7a1a; --text: #0f1115; }
.nav__logo{
  font-size:1.4rem !important;
  font-weight:700 !important;
  color:var(--accent) !important; /* orange */
  text-decoration:none !important;
  display:flex !important;
  align-items:center !important;
  gap:.4rem !important;
}
.nav__logo .city{
  font-weight:500 !important;
  font-size:1rem !important;
  color:var(--text) !important; /* dark */
}

/* End logo-only override */

/* ==========================
   CONSOLIDATED NAV OVERRIDES
   (disable legacy slide-down rules and enforce overlay/drawer pattern)
   ========================== */

/* Disable legacy slide-down <nav> <ul> behavior on small screens so it doesn't conflict
   with the overlay drawer (#mobileNav) implemented in HTML/JS. We keep desktop nav intact. */
@media (max-width: 991px){
  /* hide any older nav ul slide-down menus */
  nav ul{display:none !important;position:static !important;transform:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
  /* show the hamburger toggle */
  .nav-toggle{display:inline-grid !important}
  /* hide desktop nav region if present */
  .nav-desktop{display:none !important}
}

/* Desktop: show desktop nav, hide hamburger */
@media (min-width: 992px){
  .nav-desktop{display:flex !important;gap:1.25rem;align-items:center}
  .nav-toggle{display:none !important}
  /* mobile overlay should remain hidden on desktop */
  #mobileNav{display:none !important}
}

/* Mobile overlay / drawer (matches the JS toggling hidden / aria-hidden)
   - The <nav id="mobileNav"> acts as the dimmed overlay; .mobile-panel is the actual panel that slides in. */
#mobileNav{
  position:fixed;
  inset:64px 0 0 0; /* sits below the header */
  background:rgba(2,6,23,0.45);
  z-index:130;
  display:none; /* use [hidden] attribute to keep it hidden by default */
  -webkit-overflow-scrolling:touch;
}
#mobileNav:not([hidden]){display:block}

#mobileNav .mobile-panel{
  width:min(92vw,380px);
  height:100%;
  background:var(--white);
  color:var(--onyx);
  padding:1rem 1.25rem;
  box-shadow:-18px 0 40px rgba(2,6,23,0.4);
  border-left:1px solid rgba(2,6,23,0.04);
  transform:translateX(12px);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
  overflow:auto;
}
#mobileNav:not([hidden]) .mobile-panel{transform:translateX(0);opacity:1}
#mobileNav[hidden] .mobile-panel{transform:translateX(12px);opacity:0}

/* mobile links inside the panel */
#mobileNav .mobile-link{display:block;padding:1rem;border-radius:10px;color:var(--onyx);text-decoration:none;font-weight:700}
#mobileNav .mobile-link + .mobile-link{margin-top:.35rem}
#mobileNav .mobile-link:focus, #mobileNav .mobile-link:hover{background:rgba(2,6,23,0.03);color:var(--accent)}
#mobileNav .mobile-cta{display:block;margin-top:1rem;background:var(--accent);color:#fff;padding:.9rem;border-radius:10px;text-align:center;font-weight:700}

/* ensure hamburger / toggle is large enough on touch devices */
.nav-toggle{font-size:1.9rem;padding:.5rem;border-radius:8px}
.nav-toggle:focus{outline:3px solid rgba(255,107,0,0.14);outline-offset:3px}

/* Make sure legacy .nav-mobile selectors (if present) don't conflict */
.nav-mobile{display:none !important}

/* Ensure the text logo keeps the requested orange/dark style on light background */
.nav__logo{color:var(--accent) !important}
.nav__logo .city{color:var(--text) !important}

/* Prevent any residual 'nav ul.open' behavior from showing a second menu */
nav ul.open, nav ul[aria-hidden="false"]{display:none !important;visibility:hidden !important;opacity:0 !important;transform:none !important}

/* When mobile drawer is open lock body scroll (JS adds .no-scroll) */
.no-scroll{position:fixed;inset:0;overflow:hidden;width:100%}

/* small animation for the panel (optional but smooth) */
@media (prefers-reduced-motion: no-preference){
  #mobileNav .mobile-panel{transition:transform .28s cubic-bezier(.22,.9,.3,1), opacity .18s ease}
}

/* End consolidated nav overrides */

/* Immediate fixes to ensure mobile overlay shows when JS opens it.
   These are high-specificity overrides placed near the end of the file so they beat older conflicting rules. */
#mobileNav{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}
#mobileNav:not([hidden]){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Ensure the sliding panel is visible and readable */
#mobileNav .mobile-panel{
  background:var(--white) !important;
  color:var(--onyx) !important;
  padding:1rem 1.25rem !important;
}
#mobileNav .mobile-link{color:var(--onyx) !important}
#mobileNav .mobile-link:focus, #mobileNav .mobile-link:hover{background:rgba(2,6,23,0.03) !important; color:var(--accent) !important}
#mobileNav .mobile-cta{background:var(--accent) !important; color:#fff !important}

/* Ensure hamburger toggle is visible and above the overlay */
.nav-toggle{display:inline-grid !important; z-index:160 !important}
.header {z-index:170}

/* Desktop: keep mobile overlay hidden */
@media (min-width: 992px){
  #mobileNav{display:none !important}
  .nav-toggle{display:none !important}
}

/* End immediate mobile-show overrides */

/* Polished mobile panel styles to match desktop quality */
#mobileNav{background:rgba(15,17,21,0.35);backdrop-filter:blur(6px);}
#mobileNav .mobile-panel{width:min(92vw,380px);height:100%;background:var(--white);color:var(--onyx);padding:1rem 1rem 2rem;border-radius:12px 0 0 12px;border-left:1px solid rgba(2,6,23,0.04);box-shadow:-20px 20px 60px rgba(2,6,23,0.12);}
.mobile-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-block-end:1px solid rgba(2,6,23,0.04)}
.mobile-panel-header .logo{font-size:1.2rem;color:var(--accent);font-weight:700}
.mobile-close{background:transparent;border:0;font-size:1.8rem;color:var(--onyx);padding:.35rem;border-radius:8px}
.mobile-close:focus{outline:3px solid rgba(255,107,0,0.14);outline-offset:3px}
.mobile-panel-body{padding-top:1rem;display:flex;flex-direction:column;gap:.5rem}
#mobileNav .mobile-link{padding:12px 10px;border-radius:10px;font-weight:700;color:var(--onyx);background:transparent}
#mobileNav .mobile-link:hover,#mobileNav .mobile-link:focus{background:rgba(2,6,23,0.04);color:var(--accent)}
.mobile-panel-actions{margin-top:1rem;display:flex;flex-direction:column;gap:8px}
.mobile-panel-actions .btn-outline{display:block;padding:.95rem;border-radius:10px;text-align:center}

/* ensure overlay dims behind panel but panel stands above */
#mobileNav{z-index:140}
#mobileNav .mobile-panel{z-index:150}

/* Add slide-in animation */
#mobileNav .mobile-panel{transform:translateX(12px);opacity:0}
#mobileNav:not([hidden]) .mobile-panel{transform:translateX(0);opacity:1}

/* touch target improvements */
#mobileNav .mobile-link, .mobile-close, .mobile-cta{min-height:48px}

@media(min-width:992px){
  #mobileNav{display:none !important}
}

/* End polished mobile panel styles */

/* Ensure mobile overlay covers the hero and content beneath it */
#mobileNav{
  position:fixed !important;
  inset:0 !important; /* cover full viewport so overlay dims hero */
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:9999 !important; /* above header and hero */
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  background: rgba(15,17,21,0.35); /* keep dim */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#mobileNav:not([hidden]){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Slide-in panel should start below the header so header remains usable/visible
   but the overlay will still cover the hero behind it. Use CSS variable --header-height
   if present; otherwise default to 64px. */
#mobileNav .mobile-panel{
  width:min(92vw,380px) !important;
  /* leave space for header so panel content doesn't sit under header buttons */
  margin-top: var(--header-height, 64px) !important;
  height: calc(100% - var(--header-height, 64px)) !important;
  right:0; /* align panel to right edge */
  position: absolute !important;
  top: var(--header-height, 64px) !important;
  bottom: 0 !important;
  background: var(--white) !important;
  color: var(--onyx) !important;
  border-radius: 0 !important; /* full-height panel */
  box-shadow: -20px 20px 60px rgba(2,6,23,0.12) !important;
  transform: translateX(12px) !important;
  opacity: 0 !important;
  transition: transform .28s cubic-bezier(.22,.9,.3,1), opacity .18s ease !important;
}
#mobileNav:not([hidden]) .mobile-panel{ transform: translateX(0) !important; opacity:1 !important }

/* Ensure hero or other elements don't sit above the overlay */
.hero, .hero-media, .about-video, .jour-media{z-index:0 !important}
.header{z-index:10000 !important} /* header above panel if needed, but panel overlay is above everything */

/* Keep body locked when menu open */
.no-scroll{position:fixed !important;inset:0 !important;overflow:hidden !important;width:100%}

/* End overlay/hero coverage adjustments */

/* Ensure mobile overlay sits above header and all page content */
#mobileNav{
  z-index:100001 !important; /* very high to avoid stacking conflicts */
}
#mobileNav .mobile-panel{
  z-index:100002 !important; /* ensure the panel floats above the dim overlay */
}

/* Final: make sure the mobile overlay's menu is visible and interactive
   despite older / broad `nav ul` rules earlier in the file. These rules
   are intentionally very specific and placed at the end of the stylesheet. */
#mobileNav, #mobileNav:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:100001 !important;
  background: rgba(15,17,21,0.35) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* Ensure the panel sits at the right edge and below the header height */
#mobileNav .mobile-panel{
  position:fixed !important;
  right:0 !important;
  top: var(--header-height, 64px) !important;
  height: calc(100% - var(--header-height, 64px)) !important;
  margin:0 !important;
  width: min(92vw, 380px) !important;
  transform: translateX(0) !important;
  opacity:1 !important;
  z-index:100002 !important;
  box-shadow: -20px 20px 60px rgba(2,6,23,0.12) !important;
}

/* Ensure unordered list inside the overlay is shown (overrides broad nav ul rules) */
#mobileNav ul{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* Make sure links inside the panel are visible and tappable */
#mobileNav a, #mobileNav a.mobile-link{
  display:block !important;
  color:var(--onyx) !important;
  text-decoration:none !important;
  padding:12px 14px !important;
  border-radius:10px !important;
  min-height:44px !important;
  line-height:1.2 !important;
}
#mobileNav a:hover, #mobileNav a:focus{
  background: rgba(2,6,23,0.04) !important;
  color: var(--accent) !important;
}

/* Ensure close button sits above everything inside panel */
#mobileNav .mobile-close{
  z-index:100010 !important;
}

/* Keep body locked when menu open */
body.no-scroll{position:fixed !important;inset:0 !important;overflow:hidden !important;width:100% !important}

/* End final mobile overlay fixes */

/* FIX: Ensure the new mnav mobile drawer's list and icons are visible
   despite broad `nav ul` rules present earlier in this stylesheet. */
#mnav, .mnav {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100005 !important;
}
.mnav[hidden], #mnav[hidden]{
  display: none !important;
}
/* Make sure the list inside the mnav panel is shown (overrides generic nav ul rules) */
.mnav .mnav__panel ul,
.mnav .mnav__list,
#mnav .mnav__panel ul,
#mnav .mnav__list {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Ensure links inside the mnav are visible and tappable */
.mnav .mnav__link,
.mnav .mnav__sublink,
#mnav .mnav__link,
#mnav .mnav__sublink {
  display: block !important;
  color: var(--mnav-text, #e6eefc) !important;
  text-decoration: none !important;
  padding: .85rem 1rem !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
}
/* Make sure the toggle icons can be shown/hidden by inline styles or data-state */
.mnav__icon--burger,
.mnav__icon--close {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
}
/* keep the close icon hidden by default (JS will toggle inline styles or data-state) */
.mnav__icon--close{ display: none !important; }
/* when open, ensure correct icon visibility via data-state */
.mnav[data-state="open"] .mnav__icon--burger{ display: none !important; }
.mnav[data-state="open"] .mnav__icon--close { display: inline-block !important; }

/* Small visual safety: ensure panel is above hero and interactive */
.mnav__panel, #mnav .mnav__panel { z-index: 100006 !important; }