:root{--ink:#191815;--paper:#ddd5ca;--gold:#a97828;--line:rgba(116,82,28,.38)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}
.hero{min-height:100vh;position:relative;background:linear-gradient(90deg,rgba(19,18,16,.34),rgba(19,18,16,.08) 58%,rgba(255,255,255,.02)),url('hero-komet-responsive-final.jpg?v=20260923-final') center/cover no-repeat;color:white;overflow:hidden}
nav{display:flex;justify-content:space-between;padding:30px 5vw;letter-spacing:.22em;font-size:12px;font-weight:700}.navlink{border-bottom:1px solid var(--gold);padding-bottom:8px}.stamp{position:absolute;right:5vw;top:80px;width:105px}.stamp img{width:100%}
.hero-copy{position:absolute;left:5vw;bottom:7vh;max-width:680px}.eyebrow{letter-spacing:.3em;font-size:13px;font-weight:700}.hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(48px,5.8vw,88px);letter-spacing:.08em;margin:.12em 0;color:#e5c48b}.tagline{letter-spacing:.28em;font-size:13px}.goldline{width:70px;border-top:2px solid #b7822e;margin:28px 0}.intro{max-width:560px;font-size:18px}.button{display:inline-block;margin-top:20px;padding:13px 18px;border:1px solid #b7822e;background:rgba(15,14,12,.62);font-size:12px;letter-spacing:.16em;font-weight:700}
.section{padding:76px 8vw;border-top:1px solid rgba(80,65,45,.15);background:linear-gradient(110deg,#e6dfd5,#d6cec2)}.split{display:grid;grid-template-columns:1.4fr .8fr;gap:70px;align-items:center}.number{display:block;color:var(--gold);font-size:12px;letter-spacing:.25em;margin-bottom:22px}.dark{color:#302d28}.section h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(34px,4vw,58px);letter-spacing:.035em;line-height:1.08;margin:.15em 0 .45em}.section p{max-width:760px}.quote{font-family:Georgia,serif;font-style:italic;font-size:32px;color:#5d4931;transform:rotate(-2deg)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px}.cards article{text-align:center;padding:10px 45px;border-right:1px solid var(--line)}.cards article:last-child{border-right:0}.cards h3,.factgrid h3{font-size:12px;letter-spacing:.2em}.icon{font-size:36px;color:var(--gold)}
.breeding{background:linear-gradient(100deg,#cfc4b5,#ebe5dc)}.facts{background:#e9e3da}.factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:30px}.factgrid>div{padding-left:22px;border-left:2px solid #b88735}
.contact{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;background:#e7e0d6}.contact-info{border-right:1px solid var(--line);padding-right:45px}form{max-width:760px}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}input,textarea{width:100%;padding:15px;border:1px solid rgba(50,45,38,.12);background:rgba(255,255,255,.48);font:inherit;margin-bottom:12px;border-radius:3px}textarea{min-height:150px;resize:vertical}button{width:100%;padding:16px;border:0;background:linear-gradient(#d7a44d,#b47d26);font-weight:700;letter-spacing:.22em;cursor:pointer}.hp{position:absolute;left:-9999px}.form-note{font-size:12px;opacity:.6}
footer{display:flex;justify-content:space-between;padding:35px 5vw;background:#e7e0d6;border-top:1px solid var(--line);font-size:10px;letter-spacing:.32em}
@media(max-width:760px){.hero{min-height:88vh}.stamp{width:75px;top:76px}.hero-copy{right:6vw}.hero h1{font-size:46px}.intro{font-size:16px}.split,.contact,.cards,.factgrid{grid-template-columns:1fr}.cards article{border-right:0;border-bottom:1px solid var(--line);padding:25px 10px}.contact-info{border-right:0;border-bottom:1px solid var(--line);padding:0 0 35px}.row{grid-template-columns:1fr}.section{padding:55px 7vw}.quote{font-size:26px}nav{font-size:10px}.tagline{font-size:10px}footer{gap:20px;flex-direction:column}}
.navlinks{display:flex;gap:42px;align-items:center}
.navlinks a{position:relative;padding-bottom:8px}
.navlinks a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#b7822e;transition:width .25s ease}
.navlinks a:hover:after{width:100%}
@media(max-width:760px){
  nav{align-items:flex-start}
  .navlinks{gap:15px;font-size:9px;letter-spacing:.13em}
  .brand{display:none}
}

/* Premium top navigation */
.topnav{
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:25px 4.5vw;
  min-height:88px;
  background:linear-gradient(90deg,rgba(20,19,17,.68),rgba(35,31,27,.42),rgba(35,31,27,.20));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.topnav .brand{
  justify-self:start;
  font-size:13px;
  letter-spacing:.32em;
  color:#fff;
  font-weight:700;
}
.topnav .navlinks{
  justify-self:center;
  display:flex;
  gap:54px;
  align-items:center;
}
.topnav .navlinks a{
  color:#fff;
  font-size:12px;
  letter-spacing:.28em;
  font-weight:600;
  padding:12px 2px;
  opacity:.92;
}
.topnav .navlinks a:after{background:#c99138;height:2px}
.topnav .navlinks a.active:after{width:100%}
.topnav .navcta{
  justify-self:end;
  color:#fff;
  border:1px solid #c99138;
  border-radius:28px;
  padding:13px 22px;
  font-size:11px;
  letter-spacing:.19em;
  font-weight:700;
  white-space:nowrap;
  background:rgba(22,20,17,.24);
}
.topnav .navcta:hover{background:rgba(22,20,17,.48)}
@media(max-width:900px){
  .topnav{grid-template-columns:auto 1fr;padding:18px 5vw}
  .topnav .brand{display:none}
  .topnav .navlinks{justify-self:start;gap:22px}
  .topnav .navlinks a{font-size:10px;letter-spacing:.15em}
  .topnav .navcta{font-size:9px;padding:11px 14px}
}
@media(max-width:560px){
  .topnav{grid-template-columns:1fr}
  .topnav .navlinks{justify-self:center;gap:24px}
  .topnav .navcta{display:none}
}

/* Requested final tweaks only */
.topnav .brand{color:#d6a044;}
.topnav .navlinks a{color:#d6a044;}
.contact-logo{margin-top:28px;width:145px;}
.contact-logo img{display:block;width:100%;height:auto;}


/* Vår tjänst – kompakt och sammanhållen */
.service-compact{padding-top:88px;padding-bottom:88px;background:linear-gradient(105deg,#d8cec1,#ebe4da)}
.service-head{max-width:1050px}
.service-head h2{font-size:clamp(40px,5vw,72px);margin-bottom:42px}
.service-flow{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:80px;align-items:start}
.service-copy{max-width:850px}
.service-copy p{max-width:820px;margin:0 0 20px;line-height:1.65}
.service-copy .lead{font-size:clamp(19px,1.5vw,24px);line-height:1.55;margin-bottom:24px}
.service-side{padding-left:34px;border-left:1px solid rgba(120,83,35,.25)}
.service-side .quote{margin-bottom:42px}
.service-note{display:flex;flex-direction:column;gap:14px}
.service-note span{font-size:10px;letter-spacing:.22em;font-weight:700;color:#8e6225;padding-bottom:12px;border-bottom:1px solid rgba(120,83,35,.18)}
.service-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:50px;padding-top:28px;border-top:1px solid rgba(120,83,35,.22)}
.service-bottom p{margin:0;max-width:650px}
.service-button{display:inline-block;white-space:nowrap;padding:15px 24px;border:1px solid #b7822e;font-size:11px;letter-spacing:.2em;font-weight:700;transition:.25s ease}
.service-button:hover{background:#b7822e;color:white}
@media(max-width:900px){.topnav .navlinks{gap:18px}.topnav .navlinks a{font-size:9px;letter-spacing:.12em}.service-flow{grid-template-columns:1fr;gap:38px}.service-side{padding-left:0;border-left:0;border-top:1px solid rgba(120,83,35,.2);padding-top:30px}.service-note{display:grid;grid-template-columns:1fr 1fr}.service-bottom{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.service-compact{padding-top:60px;padding-bottom:65px}.service-head h2{margin-bottom:30px}.service-flow{gap:28px}.service-bottom{margin-top:36px}}
@media(max-width:560px){.topnav .navlinks{gap:13px}.topnav .navlinks a{font-size:8px;letter-spacing:.08em}.service-note{grid-template-columns:1fr}}

/* Vår tjänst – verkligt kompakt helhet */
.service-compact{padding-top:52px;padding-bottom:52px}
.service-head{max-width:900px}
.service-head .number{margin-bottom:12px}
.service-head .eyebrow{margin:0 0 8px}
.service-head h2{font-size:clamp(34px,4vw,56px);margin:0 0 24px;line-height:1.02}
.service-flow{grid-template-columns:minmax(0,1.7fr) minmax(240px,.7fr);gap:54px}
.service-copy p{font-size:15px;line-height:1.55;margin:0 0 12px;max-width:760px}
.service-side{display:flex;align-items:center;min-height:100%;padding-left:28px}
.service-side .quote{font-size:27px;margin:0}
.service-note-row{margin-top:25px;padding:16px 0;border-top:1px solid rgba(120,83,35,.22);border-bottom:1px solid rgba(120,83,35,.22);display:flex;flex-direction:row;justify-content:space-between;gap:18px}
.service-note-row span{border:0;padding:0;white-space:nowrap}
.service-bottom{margin-top:20px;padding-top:0;border-top:0}
.service-bottom p{font-size:14px}
.service-button{padding:12px 19px}
@media(max-width:900px){.service-flow{gap:28px}.service-note-row{display:grid;grid-template-columns:1fr 1fr}.service-side{padding-left:20px}}
@media(max-width:760px){.service-compact{padding-top:42px;padding-bottom:44px}.service-head h2{font-size:clamp(31px,9vw,44px);margin-bottom:20px}.service-flow{grid-template-columns:1fr}.service-side{border-left:0;border-top:1px solid rgba(120,83,35,.2);padding:20px 0 0}.service-side .quote{font-size:23px}.service-note-row{margin-top:20px}.service-bottom{margin-top:18px}}

/* Vår tjänst – spacing fix */
.service-side .quote{line-height:1.25;margin-bottom:0}
.service-note-row{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;align-items:center}
.service-note-row span{display:block;white-space:normal;line-height:1.35;text-align:center;font-size:9px;letter-spacing:.16em}
@media(max-width:760px){.service-note-row{grid-template-columns:1fr 1fr;row-gap:14px;column-gap:20px;margin-top:28px}}

/* Hero/menu correction: keep desktop image full-bleed (no exposed edges).
   Move the crop to the right so the horse's head clears the navigation. */
@media (min-width:901px){
  .hero{
    background-size:cover;
    background-position:58% center;
    background-repeat:no-repeat;
  }
}
/* Mobile navigation: make HEM / TRAV / VÅR TJÄNST / KONTAKT clearly larger. */
@media (max-width:900px){
  .topnav .navlinks a{font-size:12px;letter-spacing:.14em}
}
@media (max-width:560px){
  .topnav{padding-left:3vw;padding-right:3vw}
  .topnav .navlinks{width:100%;justify-content:space-between;gap:8px}
  .topnav .navlinks a{font-size:12px;letter-spacing:.08em;white-space:nowrap}
}
\n\n/* 2026-09-23 cache-safe hero/menu fix */\n@media (min-width:901px){\n  .hero{\n    background-size:cover !important;\n    background-position:58% 58% !important;\n    background-repeat:no-repeat !important;\n  }\n}\n@media (max-width:900px){\n  .topnav .navlinks a{font-size:13px !important;letter-spacing:.10em !important;}\n}\n@media (max-width:560px){\n  .topnav{padding-left:3vw !important;padding-right:3vw !important;}\n  .topnav .navlinks{width:100% !important;justify-content:space-between !important;gap:5px !important;}\n  .topnav .navlinks a{font-size:12px !important;letter-spacing:.055em !important;white-space:nowrap !important;}\n}\n
/* 2026-09-23 requested hero typography + tighter mobile nav */
.hero h1{font-size:clamp(41px,4.93vw,75px);}
@media (max-width:900px){
  .topnav .navlinks{gap:14px !important;justify-content:center !important;}
}
@media (max-width:560px){
  .topnav .navlinks{width:auto !important;justify-content:center !important;gap:13px !important;}
  .topnav .navlinks a{font-size:12px !important;letter-spacing:.055em !important;}
  .hero h1{font-size:39px;}
}

/* 2026-09-23 navigation refinement: three primary links, shifted left on desktop; discreet home link in footer */
@media (min-width:901px){
  .topnav .navlinks{transform:translateX(-72px);}
}
@media (max-width:900px){
  .topnav .navlinks{transform:none !important;gap:18px !important;}
}
@media (max-width:560px){
  .topnav .navlinks{gap:16px !important;}
}
.footer-home{color:#8e6225;opacity:.75;transition:opacity .2s ease;}
.footer-home:hover{opacity:1;}

/* 2026-09-23 final requested sizing */
.hero h1{font-size:clamp(35px,4.2vw,64px) !important;}
.footer-home{font-size:11.5px !important;}
@media (max-width:560px){
  .hero h1{font-size:33px !important;}
  .footer-home{font-size:11.5px !important;}
}

/* 2026-09-23 mobile hero title contrast */
@media (max-width:760px){
  .hero h1{
    color:#c99538 !important;
    text-shadow:0 2px 8px rgba(20,14,8,.38) !important;
  }
}

/* 2026-09-23 portrait-mobile hero readability fix */
@media (max-width:600px) and (orientation:portrait){
  .hero::after{
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:24%;
    top:48%;
    bottom:23%;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(20,16,12,.34) 0%,rgba(20,16,12,.20) 58%,rgba(20,16,12,0) 100%);
  }
  .hero-copy{
    z-index:2;
    left:5vw;
    right:3vw;
    bottom:6vh;
  }
  .hero h1{
    color:#e5c48b !important;
    text-shadow:0 2px 10px rgba(16,12,8,.48) !important;
    transform:translateY(10px);
  }
  .topnav{z-index:3;}
}

/* 2026-09-23 final portrait-mobile title size adjustment: -5% only */
@media (max-width:600px) and (orientation:portrait){
  .hero h1{font-size:31.35px !important;}
}


/* 2026-09-23 precise desktop alignment fix
   Desktop only: CONTACT to right edge, title optically aligned.
   Mobile and landscape-phone layout remain unchanged. */
@media (min-width:901px){
  .topnav .navlinks{
    position:absolute !important;
    left:30.3% !important;
    right:4.5vw !important;
    width:auto !important;
    transform:none !important;
    justify-self:auto !important;
    justify-content:space-between !important;
    gap:0 !important;
  }
  .hero h1{
    transform:translateX(-3px) !important;
  }
}


/* Grouped desktop navigation: CONTACT remains at the right edge,
   but TRAV / VÅR TJÄNST / KONTAKT stay together as one group. */
@media (min-width:901px){
  .topnav .navlinks{
    position:absolute !important;
    left:auto !important;
    right:4.5vw !important;
    width:auto !important;
    transform:none !important;
    justify-content:flex-start !important;
    gap:72px !important;
  }
  .hero h1{transform:none !important;}
}

/* Consistent mobile hero in portrait and landscape. */
@media (max-width:900px){
  .hero{
    min-height:100svh !important;
    background-position:60% center !important;
  }
  .hero::after{
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:20%;
    top:46%;
    bottom:21%;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(20,16,12,.34) 0%,rgba(20,16,12,.20) 58%,rgba(20,16,12,0) 100%);
  }
  .hero-copy{
    z-index:2 !important;
    left:5vw !important;
    right:3vw !important;
    bottom:6svh !important;
  }
  .hero h1{
    font-size:31.35px !important;
    color:#e5c48b !important;
    text-shadow:0 2px 10px rgba(16,12,8,.48) !important;
    transform:translateY(10px) !important;
  }
  .topnav{z-index:3 !important;}
}
@media (min-width:601px) and (max-width:900px){
  .hero-copy{max-width:620px !important;}
  .intro{font-size:16px !important;}
  .tagline{font-size:10px !important;}
}


/* Requested final refinements — no layout changes */

/* Desktop: same nav positions, only a deeper gold for contrast */
@media (min-width:901px){
  .topnav .navlinks a{
    color:#c58b2b !important;
  }
  .topnav .navlinks a.active::after{
    background:#c58b2b !important;
  }
}

/* Portrait phones only: show more of the racing image, without changing copy/menu */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    background-color:#211b16 !important;
    background-size:auto 100% !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
  }
}


/* Transparent header on all screen sizes */
.topnav{
  background:transparent !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

/* Darker gold navigation for readability, desktop + mobile */
.topnav .navlinks a{
  color:#a96f16 !important;
  text-shadow:0 1px 2px rgba(255,255,255,.12) !important;
}
.topnav .navlinks a.active::after{
  background:#a96f16 !important;
}


/* Final header refinement: no separator line, light beige navigation */
.topnav{
  border:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
}
.topnav::before,
.topnav::after{
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.topnav .navlinks a{
  color:#e3c895 !important;
  text-shadow:0 1px 3px rgba(40,28,16,.28) !important;
}
.topnav .navlinks a.active::after{
  background:#e3c895 !important;
}


/* Desktop-only header swap — mobile remains exactly as before */
@media (min-width:901px){
  .topnav{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
  }

  .topnav .brand{
    position:absolute !important;
    left:auto !important;
    right:4.5vw !important;
    margin:0 !important;
    color:#e3c895 !important;
  }

  .topnav .navlinks{
    position:absolute !important;
    left:4.5vw !important;
    right:auto !important;
    width:auto !important;
    margin:0 !important;
    transform:none !important;
    justify-content:flex-start !important;
    gap:72px !important;
  }

  .topnav .navlinks a{
    color:#e3c895 !important;
  }
  .topnav .navlinks a.active::after{
    background:#e3c895 !important;
  }
}


/* Service CTA text refinement */
.service-bottom > p{
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(22px, 1.45vw, 28px) !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  color: #2a2119 !important;
  max-width: 920px !important;
  margin: 0 !important;
}
.service-bottom{
  align-items:center !important;
  column-gap:32px !important;
}
@media (max-width:900px){
  .service-bottom > p{
    font-size:20px !important;
  }
}

/* Consistent non-emoji arrow on mobile and desktop */
.service-button .service-arrow{display:inline-block;vertical-align:-2px;margin-left:5px;flex:none}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;gap:7px;margin-left:18px;vertical-align:middle}
.lang-btn{appearance:none;border:0;background:transparent;padding:2px;line-height:1;font-size:19px;cursor:pointer;opacity:.62;filter:saturate(.9);transition:.18s ease}
.lang-btn:hover,.lang-btn.active{opacity:1;transform:translateY(-1px)}
.lang-btn.active{filter:saturate(1.05)}
@media (max-width:900px){
  .lang-switch{gap:4px;margin-left:5px}
  .lang-btn{font-size:17px;padding:1px}
}

/* Final language switch: always visible SWE / GB */
.lang-switch{display:inline-flex!important;align-items:center!important;gap:10px!important;margin-left:16px!important;white-space:nowrap!important}
.lang-btn{display:inline-flex!important;align-items:center!important;gap:4px!important;color:#e3c895!important;font-family:Arial,sans-serif!important;font-size:11px!important;letter-spacing:.04em!important;opacity:.72!important;background:transparent!important;border:0!important;padding:2px!important;cursor:pointer!important}
.lang-btn .flag{font-size:18px!important;line-height:1!important}
.lang-btn.active,.lang-btn:hover{opacity:1!important}
@media (max-width:900px){.lang-switch{gap:6px!important;margin-left:6px!important}.lang-btn{font-size:9px!important;gap:2px!important}.lang-btn .flag{font-size:15px!important}}
/* Major chapter titles: 10% smaller */
section h2{font-size:90%!important}

/* Language selector under HEM — visible on desktop and mobile */
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.footer-right .lang-switch{display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;visibility:visible!important;opacity:1!important}
.footer-right .lang-btn{display:inline-flex!important;align-items:center!important;gap:5px!important;color:inherit!important;font-size:10px!important;opacity:.68!important;padding:0!important}
.footer-right .lang-btn.active,.footer-right .lang-btn:hover{opacity:1!important}
.flag-svg{display:inline-block!important;width:22px!important;height:14px!important;overflow:hidden;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.flag-svg svg{display:block!important;width:100%!important;height:100%!important}
.location-line{font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.45;margin-top:14px;margin-bottom:14px}
@media(max-width:900px){
 .footer-right{align-items:flex-end;gap:7px}
 .footer-right .lang-switch{display:flex!important;gap:9px!important}
 .flag-svg{width:20px!important;height:13px!important}
 .footer-right .lang-btn{font-size:9px!important}
}

/* Language switch next to KONTAKT — force visible on desktop and mobile */
.topnav .navlinks .lang-switch{display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;gap:10px!important;margin-left:12px!important;position:relative!important;z-index:9999!important;width:auto!important;height:auto!important;overflow:visible!important}
.topnav .navlinks .lang-btn{display:inline-flex!important;visibility:visible!important;align-items:center!important;gap:4px!important;background:transparent!important;border:0!important;padding:2px!important;color:#e3c895!important;cursor:pointer!important;opacity:.7!important}
.topnav .navlinks .lang-btn.active,.topnav .navlinks .lang-btn:hover{opacity:1!important}
.topnav .navlinks .flag-svg{display:inline-block!important;width:22px!important;height:14px!important;visibility:visible!important}
.topnav .navlinks .flag-svg svg{display:block!important;width:100%!important;height:100%!important}
@media(max-width:900px){
 .topnav .navlinks .lang-switch{display:inline-flex!important;gap:6px!important;margin-left:5px!important}
 .topnav .navlinks .flag-svg{width:19px!important;height:12px!important}
 .topnav .navlinks .lang-code{font-size:9px!important}
}

/* Final language position: directly below KONTAKT */
.topnav .navlinks{display:flex!important;align-items:flex-start!important;position:relative!important}
.topnav .navlinks .lang-switch{
  position:absolute!important;
  right:0!important;
  top:27px!important;
  margin:0!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:10px!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
  .topnav .navlinks .lang-switch{
    position:absolute!important;
    right:0!important;
    top:25px!important;
    margin:0!important;
    gap:8px!important;
  }
}

/* Final language position: left of TRAV in the top navigation */
.topnav .navlinks .lang-switch{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  align-self:center!important;
  justify-content:flex-start!important;
  margin:0 18px 0 0!important;
  gap:9px!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
 .topnav .navlinks .lang-switch{
   position:static!important;
   margin:0 7px 0 0!important;
   gap:5px!important;
 }
}

/* Shift entire navigation row 6% left */
.topnav .navlinks{transform:translateX(-6%)!important}

/* Stockholmsvit — screen approximation of NCS S 0502-Y */
:root{--stockholmsvit:#F2F0E6}

/* Top/home navigation */
.topnav .navlinks > a,
.topnav .brand,
.topnav .navlinks .lang-btn{
  color:var(--stockholmsvit)!important;
}
.topnav .navlinks > a::after{
  background:var(--stockholmsvit)!important;
}

/* Front-page texts requested */
.hero-copy .tagline,
.hero-copy .intro{
  color:var(--stockholmsvit)!important;
}

/* Phone landscape only — prevent navigation from colliding with KOMET RACING AB */
@media (orientation:landscape) and (max-height:600px) and (max-width:950px){
  .topnav .navlinks{
    transform:none!important;
    max-width:68%!important;
    gap:18px!important;
  }
  .topnav .navlinks > a{
    font-size:11px!important;
    letter-spacing:.20em!important;
    white-space:nowrap!important;
  }
  .topnav .navlinks .lang-switch{
    margin-right:5px!important;
    gap:4px!important;
  }
  .topnav .navlinks .flag-svg{
    width:17px!important;
    height:11px!important;
  }
  .topnav .navlinks .lang-code{font-size:8px!important}
  .topnav .brand{
    font-size:11px!important;
    letter-spacing:.20em!important;
    white-space:nowrap!important;
  }
}

/* Desktop only — move KONTAKT slightly closer to VÅR TJÄNST */
@media (min-width:901px){
  .topnav .navlinks > a[href="#kontakt"]{
    transform:translateX(-14px)!important;
  }
}

@media (min-width:901px){
  .topnav .navlinks > a[href="#kontakt"]{
    transform:translateX(-22px)!important;
  }
}

/* Portrait phone hero correction — desktop untouched */
@media (orientation:portrait) and (max-width:760px){
  .hero{
    min-height:88vh !important;
    background-image:
      linear-gradient(90deg,rgba(19,18,16,.34),rgba(19,18,16,.08) 58%,rgba(255,255,255,.02)),
      url('hero-komet-responsive-final.jpg?v=20260923-final') !important;
    background-size:auto 100% !important;
    background-position:72% center !important;
    background-repeat:no-repeat !important;
    background-color:#2d6f9f !important;
  }
  .hero::before,.hero::after{
    border:0 !important;
    box-shadow:none !important;
  }
}

/* Final responsive hero framing */
@media (max-width:900px){
  .hero{
    background-image:
      linear-gradient(90deg,rgba(19,18,16,.25),rgba(19,18,16,.04) 62%,rgba(255,255,255,0)),
      url('hero-komet-responsive-final.jpg?v=20260923-final') !important;
    background-repeat:no-repeat !important;
    background-color:#2d6f9f !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .hero::before,.hero::after{display:none!important;content:none!important}
  .topnav .navlinks > a,
  .topnav .brand,
  .topnav .navlinks .lang-btn{
    color:#e5c48b!important;
  }
  .topnav .navlinks > a::after{background:#e5c48b!important}
}
@media (orientation:portrait) and (max-width:760px){
  .hero{
    min-height:100svh !important;
    background-size:auto 72% !important;
    background-position:72% bottom !important;
  }
  .hero-copy{
    bottom:5vh!important;
  }
}
@media (orientation:landscape) and (max-width:950px){
  .hero{
    min-height:100svh!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}

/* Approved final hero composition */
.hero{
  background-image:
    linear-gradient(90deg,rgba(19,18,16,.28),rgba(19,18,16,.05) 62%,rgba(255,255,255,0)),
    url('hero-komet-responsive-final.jpg?v=20260923-final') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
}
.hero::before,.hero::after{display:none!important;content:none!important;border:0!important;box-shadow:none!important}

/* beige/gold navigation, matching KOMET RACING */
.topnav .navlinks > a,
.topnav .brand,
.topnav .navlinks .lang-btn{color:#e5c48b!important}
.topnav .navlinks > a::after{background:#e5c48b!important}

/* desktop: flags left, menu on right */
@media (min-width:951px){
  .topnav{
    grid-template-columns:auto 1fr auto !important;
  }
  .topnav .navlinks{
    width:100% !important;
    transform:none !important;
    justify-content:flex-end !important;
  }
}

/* portrait phone: zoom out so horse + driver/sulky are visible */
@media (orientation:portrait) and (max-width:760px){
  .hero{
    min-height:100svh!important;
    background-size:auto 68%!important;
    background-position:66% bottom!important;
    background-color:#2c75a8!important;
  }
  .hero-copy{bottom:4.5vh!important}
}

/* landscape phone: same wide composition as desktop */
@media (orientation:landscape) and (max-width:950px){
  .hero{
    min-height:100svh!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}

/* Definitive clean responsive hero assets */
.hero{
  background-image:
    linear-gradient(90deg,rgba(19,18,16,.30),rgba(19,18,16,.04) 62%,rgba(255,255,255,0)),
    url('hero-desktop-clean.jpg?v=20260923-clean2') !important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  border:0!important; box-shadow:none!important;
}
.hero::before,.hero::after{display:none!important;content:none!important}
.topnav .navlinks > a,.topnav .brand,.topnav .navlinks .lang-btn{color:#e5c48b!important}
.topnav .navlinks > a::after{background:#e5c48b!important}

@media (orientation:portrait) and (max-width:760px){
  .hero{
    min-height:100svh!important;
    background-image:
      linear-gradient(180deg,rgba(19,18,16,.08),rgba(19,18,16,.10) 45%,rgba(19,18,16,.26)),
      url('hero-mobile-clean.jpg?v=20260923-clean2') !important;
    background-size:cover!important;
    background-position:center center!important;
  }
}
@media (orientation:landscape) and (max-width:950px){
  .hero{
    min-height:100svh!important;
    background-image:
      linear-gradient(90deg,rgba(19,18,16,.30),rgba(19,18,16,.04) 62%,rgba(255,255,255,0)),
      url('hero-desktop-clean.jpg?v=20260923-clean2') !important;
    background-size:cover!important;
    background-position:center center!important;
  }
}

/* Reframed hero: preserve full horse + driver */
.hero{
  background-color:#176ca4!important;
  background-size:cover!important;
  background-position:center center!important;
}
@media (min-width:761px){
  .hero{
    background-size:100% auto!important;
    background-position:center center!important;
  }
}
@media (orientation:portrait) and (max-width:760px){
  .hero{
    min-height:100svh!important;
    background-image:
      linear-gradient(180deg,rgba(19,18,16,.08),rgba(19,18,16,.08) 48%,rgba(19,18,16,.28)),
      url('hero-desktop-clean.jpg?v=20260924-mobile-reframe')!important;
    background-size:auto 58%!important;
    background-position:62% 58%!important;
    background-repeat:no-repeat!important;
  }
  .hero-copy{bottom:4vh!important}
}

/* ORIGINAL HERO RESET — single image only */
.hero{
  background:#111 url('hero.jpg?v=20260924-original') center center / cover no-repeat !important;
  border:0!important;
  box-shadow:none!important;
}
.hero::before,.hero::after{display:none!important;content:none!important}
@media (max-width:950px){
  .hero{
    background:#111 url('hero.jpg?v=20260924-original') center center / cover no-repeat !important;
  }
}

/* FINAL: one clean hero image; all website text remains HTML only */
.hero{
  background-image:
    linear-gradient(90deg,rgba(15,15,13,.32),rgba(15,15,13,.05) 60%,rgba(15,15,13,0)),
    url('hero.jpg?v=20260924-final-clean') !important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#151513!important;
}
.hero::before,.hero::after{display:none!important;content:none!important}

/* Restore top navigation to white, as requested */
.topnav .navlinks > a,
.topnav .brand,
.topnav .navlinks .lang-btn{color:#fff!important}
.topnav .navlinks > a::after{background:#e5c48b!important}

@media (max-width:950px){
  .hero{
    background-image:
      linear-gradient(90deg,rgba(15,15,13,.32),rgba(15,15,13,.05) 60%,rgba(15,15,13,0)),
      url('hero.jpg?v=20260924-final-clean') !important;
    background-size:cover!important;
    background-position:center center!important;
  }
}

/* Hero intro readability */
.hero-copy .intro{
  color:#2B241D !important;
}

/* Hero intro: white with subtle dark shadow for readability */
.hero-copy .intro{
  color:#FFFFFF !important;
  text-shadow:0 1px 4px rgba(0,0,0,.72), 0 0 10px rgba(0,0,0,.28) !important;
}

/* Same white + dark shadow treatment for HEM/home link */
a[href="#top"],
a[href="#hem"],
.home-link,
.footer-home{
  color:#FFFFFF !important;
  text-shadow:0 1px 4px rgba(0,0,0,.72), 0 0 10px rgba(0,0,0,.28) !important;
}

/* FINAL exact readability fix */
.hero-copy h1,
.hero-copy .intro,
footer .footer-home{
  color:#FFFFFF !important;
  text-shadow:0 2px 4px rgba(0,0,0,.90), 0 0 12px rgba(0,0,0,.55) !important;
}
/* Keep top-right brand clean white, no shadow */
.topnav .brand{
  color:#FFFFFF !important;
  text-shadow:none !important;
}

/* FRONT PAGE: same white + shadow treatment throughout */
.hero .topnav,
.hero .topnav a,
.hero .topnav button,
.hero .topnav .brand,
.hero .topnav .lang-code,
.hero-copy h1,
.hero-copy .tagline,
.hero-copy .intro,
.hero-copy .button{
  color:#FFFFFF !important;
  text-shadow:0 2px 4px rgba(0,0,0,.92), 0 0 10px rgba(0,0,0,.62) !important;
}
.hero-copy .button{
  border-color:rgba(255,255,255,.88) !important;
}

/* 2026-10-04 DESKTOP HERO — cache-safe final override */
@media (min-width:951px){
  .hero{
    background-image:
      linear-gradient(90deg,rgba(15,15,13,.32),rgba(15,15,13,.05) 60%,rgba(15,15,13,0)),
      url('komet-hero-final-20261004-v2.png?v=20261004-2315') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}

/* 2026-10-04 — approved hero copy + stronger Service 05 */
.hero-message{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(34px,3.35vw,58px);
  line-height:1.08;
  margin:0 0 18px;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.45);
}
.hero-message strong{color:#e2ad57;font-style:italic;font-weight:600}
.hero-copy .hero-intro{font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,1.45vw,24px);line-height:1.42;max-width:780px;margin:0}

.service-compact{background:linear-gradient(105deg,#e7ded1,#f2ece3) !important}
.service-head{max-width:1100px !important}
.service-head h2{font-size:clamp(44px,5.25vw,78px) !important;line-height:.98 !important;letter-spacing:-.02em !important;margin-bottom:28px !important}
.service-head h2 br + *{color:#9b681f}
.service-flow{grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr) !important;gap:72px !important}
.service-copy p{font-size:17px !important;line-height:1.55 !important;max-width:930px !important}
.service-side{border-left:1px solid rgba(155,104,31,.35) !important;padding-left:42px !important}
.service-side .quote{font-size:clamp(30px,2.4vw,42px) !important;font-style:italic;color:#4b3827}
.service-side .quote strong{color:#9b681f}
.service-note-row{padding:24px 0 !important;margin-top:34px !important;gap:0 !important}
.service-pillar{display:flex;align-items:center;gap:18px;padding:0 24px;border-right:1px solid rgba(155,104,31,.28)}
.service-pillar:first-child{padding-left:0}.service-pillar:last-child{border-right:0;padding-right:0}
.service-pillar svg{width:54px;height:54px;flex:0 0 54px;fill:none;stroke:#9b681f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-note-row .service-pillar span{font-family:Georgia,"Times New Roman",serif;font-size:15px !important;letter-spacing:.12em !important;color:#2a2119 !important;text-align:left !important;font-weight:700}
.service-note-row .service-pillar small{display:block;margin-top:7px;font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.25;font-style:italic;color:#4d4035;white-space:nowrap}
.service-bottom{margin-top:26px !important}
.service-button{background:#9b681f !important;color:#fff !important;border-color:#9b681f !important;padding:17px 28px !important}
.service-button:hover{background:#7f5318 !important;border-color:#7f5318 !important}
@media(max-width:1050px){.service-pillar{padding:0 14px;gap:11px}.service-pillar svg{width:42px;height:42px;flex-basis:42px}.service-note-row .service-pillar small{white-space:normal}}
@media(max-width:900px){.service-flow{grid-template-columns:1fr !important;gap:32px !important}.service-side{border-left:0 !important;border-top:1px solid rgba(155,104,31,.25) !important;padding:28px 0 0 !important}.service-note-row{grid-template-columns:1fr 1fr !important;row-gap:24px}.service-pillar{border-right:0;padding:0 !important}}
@media(max-width:560px){.hero-message{font-size:34px}.hero-copy .hero-intro{font-size:17px}.service-note-row{grid-template-columns:1fr !important}.service-head h2{font-size:38px !important}.service-copy p{font-size:15px !important}}

/* 2026-10-04 — Service 05 precision pass; hero and sections 01–04 untouched */
@media (min-width:901px){
  #tjanst.service-compact{padding-top:58px!important;padding-bottom:52px!important}
  #tjanst .service-head{max-width:none!important}
  #tjanst .service-head h2{
    font-size:clamp(40px,4.15vw,66px)!important;
    line-height:1.02!important;
    letter-spacing:-.018em!important;
    margin:12px 0 32px!important;
    max-width:1040px!important;
  }
  #tjanst .service-title-gold{color:#9b681f!important}
  #tjanst .service-flow{grid-template-columns:minmax(0,1.75fr) minmax(360px,.72fr)!important;gap:62px!important;align-items:center!important}
  #tjanst .service-copy p{font-size:16px!important;line-height:1.52!important;max-width:940px!important;margin-bottom:15px!important}
  #tjanst .service-side{padding-left:46px!important}
  #tjanst .service-side .quote{font-size:clamp(27px,2.05vw,37px)!important;line-height:1.28!important;white-space:nowrap!important}
  #tjanst .service-note-row{margin-top:34px!important;padding:24px 0!important;column-gap:0!important}
  #tjanst .service-pillar{gap:16px!important;padding:0 22px!important;min-width:0!important}
  #tjanst .service-pillar:first-child{padding-left:6px!important}
  #tjanst .service-pillar:last-child{padding-right:0!important}
  #tjanst .service-pillar svg{width:58px!important;height:58px!important;flex:0 0 58px!important;stroke-width:1.8!important}
  #tjanst .service-note-row .service-pillar span{font-size:14px!important;letter-spacing:.115em!important}
  #tjanst .service-note-row .service-pillar small{font-size:13px!important;margin-top:6px!important}
  #tjanst .service-bottom{margin-top:24px!important;align-items:center!important}
  #tjanst .service-bottom>p{font-family:Georgia,"Times New Roman",serif!important;max-width:820px!important;line-height:1.25!important}
  #tjanst .service-bottom>p strong{display:block;font-size:27px!important;font-weight:400!important;margin-bottom:5px!important}
  #tjanst .service-bottom>p span{display:block;font-size:16px!important}
  #tjanst .service-button{min-width:305px!important;text-align:center!important}
}
@media (max-width:900px){
  #tjanst .service-title-gold{color:#9b681f!important}
  #tjanst .service-bottom>p strong{display:block;font-size:24px;font-weight:400;margin-bottom:5px}
  #tjanst .service-bottom>p span{display:block;font-size:15px}
}

/* 2026-10-04 — Service 05 alignment + 20% smaller headline; all other sections untouched */
@media (min-width:901px){
  #tjanst .service-head h2{
    font-size:clamp(34px,3.32vw,53px)!important;
    line-height:1.04!important;
    max-width:1120px!important;
    margin-bottom:30px!important;
  }
  #tjanst .service-note-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  #tjanst .service-pillar{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:18px!important;
    padding:0 26px!important;
    min-height:72px!important;
  }
  #tjanst .service-pillar:first-child{padding-left:10px!important}
  #tjanst .service-pillar:last-child{padding-right:10px!important}
  #tjanst .service-pillar svg{margin:0!important;justify-self:center!important}
  #tjanst .service-pillar > div{min-width:0!important;align-self:center!important}
  #tjanst .service-note-row .service-pillar span,
  #tjanst .service-note-row .service-pillar small{margin-left:0!important;text-align:left!important}
}

/* Service 05 final alignment/color correction */
#tjanst .service-title-gold{color:#a96f18!important;}
@media (min-width:901px){
  #tjanst .service-note-row .service-pillar span{white-space:nowrap!important;}
  #tjanst .service-pillar:nth-child(2){grid-template-columns:58px minmax(190px,1fr)!important;}
  #tjanst .service-pillar:nth-child(2) span{font-size:13px!important;letter-spacing:.09em!important;}
}
/* SERVICE 05 FIX 5: keep Trainer & Stable content inside its own column */
@media (min-width:901px){
  #tjanst .service-note-row{
    grid-template-columns:1fr 1.13fr .93fr 1.14fr!important;
  }
  #tjanst .service-pillar:nth-child(2){
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:13px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #tjanst .service-pillar:nth-child(2) svg{
    width:52px!important;height:52px!important;flex-basis:52px!important;
  }
  #tjanst .service-pillar:nth-child(2) span{
    font-size:13px!important;letter-spacing:.075em!important;white-space:nowrap!important;
  }
  #tjanst .service-pillar:nth-child(2) small{
    font-size:12px!important;letter-spacing:-.01em!important;white-space:nowrap!important;
  }
  #tjanst .service-pillar:nth-child(4) small{
    font-size:12px!important;letter-spacing:-.01em!important;
  }
}

/* SERVICE 05 FIX 6 — equal columns, lock title/subtitle together */
@media (min-width:901px){
  #tjanst .service-note-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:0!important;
  }
  #tjanst .service-pillar,
  #tjanst .service-pillar:nth-child(2){
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    column-gap:14px!important;
    padding:0 18px!important;
    min-width:0!important;
  }
  #tjanst .service-pillar:first-child{padding-left:14px!important}
  #tjanst .service-pillar:last-child{padding-right:14px!important}
  #tjanst .service-pillar svg,
  #tjanst .service-pillar:nth-child(2) svg{
    width:54px!important;height:54px!important;flex-basis:54px!important;
  }
  #tjanst .service-pillar > div{
    min-width:0!important;
    width:100%!important;
  }
  #tjanst .service-note-row .service-pillar span,
  #tjanst .service-pillar:nth-child(2) span{
    display:block!important;
    font-size:13px!important;
    letter-spacing:.075em!important;
    white-space:nowrap!important;
  }
  #tjanst .service-note-row .service-pillar small,
  #tjanst .service-pillar:nth-child(2) small,
  #tjanst .service-pillar:nth-child(4) small{
    display:block!important;
    font-size:11.5px!important;
    letter-spacing:-.015em!important;
    white-space:nowrap!important;
    margin-top:6px!important;
  }
}

/* 2026-10-05 mobile hero image only — desktop remains unchanged */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    background-image:linear-gradient(180deg,rgba(8,14,19,.08) 0%,rgba(8,10,11,.03) 62%,rgba(10,10,10,.78) 88%,#111 100%),url('komet-hero-mobile-clean-20261005.png?v=20261005-002') !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }
}

/* 2026-10-06: third language button (DE), mobile-safe spacing only */
@media(max-width:560px){
  .topnav .navlinks .lang-switch{margin-right:4px!important;gap:3px!important}
  .topnav .navlinks .flag-svg{width:16px!important;height:10px!important}
  .topnav .navlinks .lang-code{font-size:8px!important;letter-spacing:0!important}
}
\n\n/* 2026-10-06 DE mobile nav fit — DE only, desktop/SV/EN untouched */
@media (max-width:560px) and (orientation:portrait){
  html[lang="de"] .topnav .navlinks{
    gap:4.75px !important;
  }
  html[lang="de"] .topnav .navlinks > a{
    font-size:11.4px !important;
    letter-spacing:.052em !important;
  }
  html[lang="de"] .topnav .navlinks .lang-switch{
    gap:2.85px !important;
    margin-right:3.8px !important;
  }
  html[lang="de"] .topnav .navlinks .lang-btn{
    transform:scale(.95);
    transform-origin:center;
  }
}

/* 2026-10-06 DE mobile nav FIX 2 — hard fit inside viewport, DE portrait only */
@media (max-width:560px) and (orientation:portrait){
  html[lang="de"] .topnav{
    padding-left:2vw !important;
    padding-right:2vw !important;
    overflow:visible !important;
  }
  html[lang="de"] .topnav .navlinks{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
    justify-self:stretch !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:3px !important;
  }
  html[lang="de"] .topnav .navlinks > a{
    flex:0 1 auto !important;
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    font-size:10px !important;
    letter-spacing:.018em !important;
    white-space:nowrap !important;
  }
  html[lang="de"] .topnav .navlinks .lang-switch{
    flex:0 0 auto !important;
    margin:0 2px 0 0 !important;
    gap:2px !important;
  }
  html[lang="de"] .topnav .navlinks .lang-btn{
    width:auto !important;
    flex:0 0 auto !important;
    gap:1px !important;
    padding:0 !important;
    transform:none !important;
  }
  html[lang="de"] .topnav .navlinks .flag-svg{
    width:14px !important;
    height:9px !important;
  }
  html[lang="de"] .topnav .navlinks .lang-code{
    font-size:7px !important;
    letter-spacing:0 !important;
  }
}

/* 2026-10-07 — Komet cartoon hero. Desktop + portrait mobile only. */
.hero{
  background-image:linear-gradient(90deg,rgba(10,14,17,.52) 0%,rgba(10,14,17,.24) 43%,rgba(10,14,17,.04) 72%),url('hero-komet-cartoon-final.png?v=20261007') !important;
}
@media (min-width:901px){
  .hero{
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}
@media (max-width:600px) and (orientation:portrait){
  .hero{
    background-color:#111820 !important;
    background-size:auto 100% !important;
    background-position:63% top !important;
    background-repeat:no-repeat !important;
  }
}

/* 2026-10-07 — dedicated portrait hero: prevents oversized desktop crop on phones */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    background-image:linear-gradient(180deg,rgba(10,14,17,.10) 0%,rgba(10,14,17,.02) 48%,rgba(10,14,17,.24) 100%),url('hero-komet-cartoon-mobile.png?v=20261007b') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}


/* 2026-10-07 FINAL HERO — desktop uses new clean artwork; mobile shows full composition zoomed out */
.hero{
  background-image:linear-gradient(90deg,rgba(19,18,16,.34),rgba(19,18,16,.08) 58%,rgba(255,255,255,.02)),url('hero-komet-final-clean.png') !important;
}
@media (min-width:901px){
  .hero{
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}
@media (max-width:600px) and (orientation:portrait){
  .hero{
    min-height:100svh !important;
    background-color:#10171d !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }
}

/* 2026-10-07 MOBILE HERO FIT v15 — desktop untouched */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    background-size:128% auto !important;
    background-position:60% top !important;
  }
}

/* 2026-10-07 MOBILE HERO LAYOUT v16 — desktop untouched.
   Keep the wide artwork visible, but remove the large dead gap by placing copy directly below it. */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    min-height:100svh !important;
    background-size:138% auto !important;
    background-position:58% top !important;
    background-repeat:no-repeat !important;
    background-color:#10171d !important;
  }
  .hero-copy{
    top:51svh !important;
    bottom:auto !important;
    left:5vw !important;
    right:4vw !important;
    max-width:none !important;
  }
}
@media (max-width:430px) and (orientation:portrait){
  .hero-copy{top:49svh !important;}
}

/* 2026-10-07 MOBILE BLEND v17 — desktop untouched.
   Blend artwork into the dark hero and pull copy upward so mobile reads as one composition. */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    min-height:100svh !important;
    background-image:
      linear-gradient(180deg,
        rgba(16,23,29,0) 0%,
        rgba(16,23,29,0) 27%,
        rgba(16,23,29,.18) 34%,
        rgba(16,23,29,.72) 43%,
        #10171d 53%),
      url('hero-komet-final-clean.png') !important;
    background-size:138% auto !important;
    background-position:58% top !important;
    background-repeat:no-repeat !important;
    background-color:#10171d !important;
  }
  .hero-copy{
    top:40svh !important;
    bottom:auto !important;
    left:5vw !important;
    right:4vw !important;
    max-width:none !important;
    z-index:2 !important;
  }
}
@media (max-width:430px) and (orientation:portrait){
  .hero-copy{top:39svh !important;}
}

/* 2026-10-07 LANDSCAPE PHONE v18 — ONLY phone side/landscape.
   Portrait mobile and desktop remain exactly as approved in v17. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px){
  .hero{
    min-height:100svh !important;
    height:auto !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  /* Lock copy to its own left/lower zone so language changes cannot push it into the horse. */
  .hero-copy{
    position:absolute !important;
    top:auto !important;
    bottom:5.5svh !important;
    left:4.5vw !important;
    right:auto !important;
    width:43vw !important;
    max-width:430px !important;
    transform:none !important;
    z-index:2 !important;
  }
  .hero h1{
    margin:0 0 5px !important;
    font-size:clamp(22px,3.3vw,31px) !important;
    line-height:.98 !important;
    transform:none !important;
  }
  .hero .tagline{
    margin:0 0 9px !important;
    font-size:clamp(7px,1.05vw,10px) !important;
    line-height:1.15 !important;
    letter-spacing:.16em !important;
    white-space:nowrap !important;
  }
  .hero .hero-message{
    margin:0 0 7px !important;
    font-size:clamp(18px,2.65vw,27px) !important;
    line-height:1.02 !important;
    max-width:100% !important;
  }
  .hero .hero-intro{
    margin:0 !important;
    font-size:clamp(11px,1.55vw,14px) !important;
    line-height:1.32 !important;
    max-width:100% !important;
  }

  /* Stable one-row navigation in landscape. */
  .topnav{
    padding-top:10px !important;
    padding-bottom:8px !important;
    min-height:0 !important;
  }
  .topnav .navlinks{
    max-width:none !important;
    gap:clamp(10px,2vw,22px) !important;
    align-items:center !important;
  }
  .topnav .navlinks > a{
    font-size:clamp(8px,1.15vw,11px) !important;
    letter-spacing:.14em !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .topnav .brand{
    font-size:clamp(8px,1.15vw,11px) !important;
    letter-spacing:.14em !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .topnav .navlinks .lang-switch{gap:3px !important;margin-right:2px !important;}
  .topnav .navlinks .lang-btn{gap:1px !important;padding:0 !important;}
  .topnav .navlinks .flag-svg{width:15px !important;height:10px !important;}
  .topnav .navlinks .lang-code{font-size:7px !important;letter-spacing:0 !important;}

  /* German stays inside the exact same composition instead of lifting the whole copy block. */
  html[lang="de"] .hero-copy{bottom:5.5svh !important;width:45vw !important;max-width:450px !important;}
  html[lang="de"] .hero .hero-message{font-size:clamp(16px,2.35vw,24px) !important;line-height:1.02 !important;}
  html[lang="de"] .hero .hero-intro{font-size:clamp(10px,1.4vw,13px) !important;line-height:1.27 !important;}
  html[lang="de"] .topnav .navlinks{gap:clamp(7px,1.25vw,14px) !important;}
  html[lang="de"] .topnav .navlinks > a{font-size:clamp(7px,1vw,9px) !important;letter-spacing:.08em !important;}
  html[lang="de"] .topnav .brand{font-size:clamp(7px,1vw,9px) !important;letter-spacing:.09em !important;}
}

/* 2026-10-07 v20 — TRUE DESKTOP 85% COMPOSITION
   Direct desktop rules. Phone portrait + phone landscape are untouched. */
@media (min-width: 1000px) {
  .hero{
    background-color:#101920 !important;
    background-size:85% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
  .hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      #101920 0%, rgba(16,25,32,.94) 3%, rgba(16,25,32,.58) 8%, rgba(16,25,32,0) 15%,
      rgba(16,25,32,0) 85%, rgba(16,25,32,.58) 92%, rgba(16,25,32,.94) 97%, #101920 100%) !important;
  }
  .topnav{padding:25px 4.5vw !important;z-index:4 !important;}
  .topnav .navlinks{gap:61px !important;}
  .topnav .navlinks > a{font-size:10px !important;letter-spacing:.14em !important;}
  .topnav .brand{font-size:10px !important;letter-spacing:.14em !important;}
  .topnav .navlinks .lang-switch{transform:scale(.85) !important;transform-origin:left center !important;margin-left:0 !important;}

  .hero-copy{
    left:7.5vw !important;
    bottom:10vh !important;
    max-width:578px !important;
    transform:none !important;
    z-index:3 !important;
  }
  .hero h1{font-size:clamp(30px,3.57vw,54px) !important;transform:none !important;}
  .hero .tagline{font-size:11px !important;letter-spacing:.24em !important;}
  .hero .goldline{width:60px !important;margin:24px 0 !important;}
  .hero .hero-message{font-size:clamp(28px,3.15vw,48px) !important;line-height:1.05 !important;}
  .hero .hero-intro{font-size:15px !important;line-height:1.55 !important;max-width:476px !important;}
}

/* 2026-10-07 v22 — DESKTOP ONLY: true feathered side fade.
   Keeps v20's 85% composition and all mobile rules untouched. */
@media (min-width:1000px){
  .hero{
    background-color:#101920 !important;
    background-image:none !important;
  }
  .hero::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background-image:linear-gradient(90deg,rgba(19,18,16,.34),rgba(19,18,16,.08) 58%,rgba(255,255,255,.02)),url('hero-komet-final-clean.png') !important;
    background-size:85% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 6.5%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.55) 12%,#000 19%,#000 81%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.12) 92%,transparent 93.5%) !important;
    mask-image:linear-gradient(90deg,transparent 6.5%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.55) 12%,#000 19%,#000 81%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.12) 92%,transparent 93.5%) !important;
  }
  .hero-copy,.topnav{position:absolute;z-index:3 !important;}
}

/* 2026-10-07 v23 — DESKTOP ONLY: stronger cinematic navy feather.
   Same 85% composition as v22; only the edge blend is stronger/wider. */
@media (min-width:1000px){
  .hero::before{
    -webkit-mask-image:linear-gradient(90deg,
      transparent 5%, rgba(0,0,0,.08) 7%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.62) 14%, #000 22%,
      #000 78%, rgba(0,0,0,.62) 86%, rgba(0,0,0,.28) 90%, rgba(0,0,0,.08) 93%, transparent 95%) !important;
    mask-image:linear-gradient(90deg,
      transparent 5%, rgba(0,0,0,.08) 7%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.62) 14%, #000 22%,
      #000 78%, rgba(0,0,0,.62) 86%, rgba(0,0,0,.28) 90%, rgba(0,0,0,.08) 93%, transparent 95%) !important;
  }
  .hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      rgba(16,25,32,.82) 0%, rgba(16,25,32,.48) 6%, rgba(16,25,32,.14) 13%, transparent 21%,
      transparent 79%, rgba(16,25,32,.14) 87%, rgba(16,25,32,.48) 94%, rgba(16,25,32,.82) 100%) !important;
  }
  .hero-copy,.topnav{z-index:3 !important;}
}


/* 2026-10-07 v24 — DESKTOP ONLY: true cinematic fade matching approved mockup.
   The artwork itself remains unchanged. We place the 85% artwork on its own layer,
   then feather it into the exact hero navy from ALL outer edges. Mobile untouched. */
@media (min-width:1000px){
  .hero{
    background:#101920 !important;
    overflow:hidden !important;
  }
  .hero::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:7.5% !important;
    right:7.5% !important;
    z-index:0 !important;
    pointer-events:none !important;
    background-image:url('hero-komet-final-clean.png') !important;
    background-size:100% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 3%,rgba(0,0,0,.42) 7%,rgba(0,0,0,.78) 12%,#000 19%,#000 81%,rgba(0,0,0,.78) 88%,rgba(0,0,0,.42) 93%,rgba(0,0,0,.12) 97%,transparent 100%),
      linear-gradient(180deg,rgba(0,0,0,.68) 0%,#000 11%,#000 82%,rgba(0,0,0,.72) 91%,transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-image:
      linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 3%,rgba(0,0,0,.42) 7%,rgba(0,0,0,.78) 12%,#000 19%,#000 81%,rgba(0,0,0,.78) 88%,rgba(0,0,0,.42) 93%,rgba(0,0,0,.12) 97%,transparent 100%),
      linear-gradient(180deg,rgba(0,0,0,.68) 0%,#000 11%,#000 82%,rgba(0,0,0,.72) 91%,transparent 100%) !important;
    mask-composite:intersect !important;
  }
  .hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(90deg,
        #101920 0%,rgba(16,25,32,.97) 7.5%,rgba(16,25,32,.70) 11%,rgba(16,25,32,.32) 16%,rgba(16,25,32,.08) 21%,transparent 27%,
        transparent 73%,rgba(16,25,32,.08) 79%,rgba(16,25,32,.32) 84%,rgba(16,25,32,.70) 89%,rgba(16,25,32,.97) 92.5%,#101920 100%),
      linear-gradient(180deg,rgba(16,25,32,.22) 0%,transparent 12%,transparent 80%,rgba(16,25,32,.20) 88%,#101920 100%) !important;
  }
  .hero-copy,.topnav{z-index:3 !important;}
}

/* v25: desktop-only seamless four-edge feather, no rectangular seam. */
@media (min-width:1000px){
  .hero::before{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 79%,transparent 100%) !important;
    mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 79%,transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-composite:intersect !important;
  }
  .hero::after{
    background:linear-gradient(90deg,rgba(16,25,32,.52) 0%,rgba(16,25,32,.24) 13%,transparent 28%,transparent 76%,rgba(16,25,32,.10) 90%,rgba(16,25,32,.36) 100%),linear-gradient(180deg,rgba(16,25,32,.50) 0%,transparent 20%,transparent 73%,rgba(16,25,32,.48) 91%,#101920 100%) !important;
  }
}