/* Skärgårds Yacht 2.0 – navigation, story, services, FAQ and service pages. */

/* Drawer trigger – visible, compact and fixed in the top-right corner. */
.header-reorg{justify-content:flex-start}.header-reorg>.brand{margin-right:auto}
.drawer-trigger{position:fixed;top:27px;right:5%;z-index:10020;display:flex;align-items:center;gap:13px;min-height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(11,30,39,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:inherit;font-size:11px;font-weight:700;letter-spacing:1.7px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}.drawer-trigger:hover{background:rgba(11,30,39,.56);transform:translateY(-1px)}.drawer-trigger i{width:20px;height:12px;display:flex;flex-direction:column;justify-content:space-between}.drawer-trigger b{height:1px;background:currentColor;width:100%;display:block}.drawer-trigger[aria-expanded=true]{opacity:0;pointer-events:none}
.admin-bar .drawer-trigger{top:59px}
.page-header-reorg{display:flex;align-items:center;justify-content:space-between;min-height:96px;border:0}.page-header-reorg .drawer-trigger{background:rgba(24,46,53,.82);border-color:rgba(255,255,255,.28)}

.drawer-scrim{position:fixed;inset:0;z-index:10000;background:rgba(4,17,23,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s}.site-drawer{position:fixed;z-index:10010;inset:0 0 0 auto;width:min(500px,100vw);height:100dvh;background:#132c35;color:#fff;transform:translateX(102%);transition:transform .44s cubic-bezier(.22,.8,.2,1);padding:34px 38px 32px;display:flex;flex-direction:column;box-shadow:-24px 0 70px rgba(4,17,23,.20);overflow-y:auto}.sy-drawer-open .drawer-scrim{opacity:1;visibility:visible}.sy-drawer-open .site-drawer{transform:translateX(0)}
.drawer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.17)}.drawer-brand{font-size:13px;font-weight:700;letter-spacing:2.3px;line-height:1.25}.drawer-brand small{display:block;margin-top:7px;font-size:8px;letter-spacing:2.1px;font-weight:500;color:#b8c7ca}.drawer-close{width:48px;height:48px;flex:0 0 48px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:transparent;color:#fff;font:300 31px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,transform .2s}.drawer-close:hover{background:rgba(255,255,255,.09);transform:rotate(4deg)}
.drawer-nav{display:block!important;margin:30px 0 35px;font-size:inherit}.header .drawer-nav{display:block!important}.drawer-menu,.drawer-menu ul{list-style:none;margin:0;padding:0}.drawer-menu>li{border-bottom:1px solid rgba(255,255,255,.15)}.drawer-menu>li>a{display:flex;align-items:baseline;gap:18px;padding:18px 0;color:#fff;font-size:clamp(25px,3vw,38px);font-weight:400;letter-spacing:-1px;line-height:1.1}.drawer-menu>li>a span{min-width:24px;color:#93a8ad;font-size:10px;letter-spacing:1px}.drawer-menu>li>a:hover{color:var(--accent)}.drawer-menu .sub-menu{padding:0 0 16px 42px;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px}.drawer-menu .sub-menu a{display:block;padding:4px 0;color:#b9c8ca;font-size:12px;line-height:1.45}.drawer-menu .sub-menu a:hover{color:#fff}.drawer-foot{margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.17)}.drawer-quote{display:flex;align-items:center;justify-content:space-between;background:var(--accent);color:var(--ink);padding:15px 17px;border-radius:3px;font-size:14px;font-weight:600}.drawer-foot p{margin:16px 0 0;color:#a9bdc0;font-size:11px;letter-spacing:.4px}

/* Team / about story directly below hero. */
.team-story{padding:100px 0 70px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:clamp(45px,6vw,95px);align-items:center}.team-story-media{position:relative;min-height:520px;overflow:hidden;border-radius:5px;background:#e8ecea}.team-story-media:after{content:'';position:absolute;inset:0;border:1px solid rgba(24,46,53,.08);pointer-events:none}.team-story-media img{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}.team-story-copy{padding-right:8%}.team-story-copy .eyebrow{color:var(--muted);margin-bottom:17px}.team-story-copy h2{font-size:clamp(38px,4.1vw,62px);letter-spacing:-2.4px;line-height:1.02;margin-bottom:28px}.team-story-copy>p{color:var(--muted);font-size:16px;line-height:1.75;margin:0 0 35px;max-width:520px}.story-link{display:flex;align-items:center;justify-content:space-between;gap:40px;width:min(100%,300px);padding:0 0 9px;border-bottom:1px solid var(--ink);font-size:13px}.story-link:hover{color:#527179}

/* Six service cards. */
.service-showcase{padding:55px 0 100px}.service-showcase-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:38px}.service-showcase-head h2{margin:0;font-size:clamp(36px,4vw,58px);line-height:1.04}.service-showcase-head h2 em,.faq-intro h2 em{font-family:Georgia,serif;font-weight:400;color:#617c80}.service-showcase-head>p{margin:0 0 4px;max-width:530px;color:var(--muted);font-size:15px;line-height:1.75}.service-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{min-width:0}.service-card>a{position:relative;display:block;height:440px;overflow:hidden;border-radius:5px;background:#18313a;color:#fff;isolation:isolate}.service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.22,.7,.2,1),filter .45s}.service-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,27,.10) 20%,rgba(6,20,27,.80) 100%);transition:background .4s}.service-card-index{position:absolute;top:20px;left:20px;font-size:10px;letter-spacing:1.4px;padding:7px 9px;border:1px solid rgba(255,255,255,.45);border-radius:99px;background:rgba(14,35,44,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.service-card-content{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:flex-start}.service-card-content strong{font-size:clamp(25px,2vw,33px);font-weight:400;letter-spacing:-1px;line-height:1.05}.service-card-content>span{max-height:0;opacity:0;overflow:hidden;transform:translateY(10px);margin-top:0;color:#e3ebed;font-size:13px;line-height:1.55;transition:max-height .45s,opacity .35s,transform .45s,margin .45s}.service-card-content em{display:flex;align-items:center;gap:10px;margin-top:0;max-height:0;opacity:0;overflow:hidden;color:var(--accent);font-size:11px;font-style:normal;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:max-height .45s,opacity .35s,margin .45s}.service-card-content em b{font-size:14px}.service-card>a:hover img{transform:scale(1.055)}.service-card>a:hover .service-card-shade{background:linear-gradient(180deg,rgba(6,20,27,.20),rgba(6,20,27,.92))}.service-card>a:hover .service-card-content>span{max-height:90px;opacity:1;transform:translateY(0);margin-top:13px}.service-card>a:hover .service-card-content em{max-height:30px;opacity:1;margin-top:16px}

/* Existing sections keep their sequence but get more breathing room after the new cards. */
.service-showcase+.approach{padding-top:72px}.faq-section{padding:95px 0 110px;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(55px,7vw,110px);border-top:1px solid var(--line)}.faq-intro h2{font-size:clamp(38px,4vw,58px);line-height:1.03;margin-bottom:25px}.faq-intro>p:last-child{color:var(--muted);font-size:15px;line-height:1.7;max-width:390px}.faq-list details{border-top:1px solid var(--line)}.faq-list details:last-child{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr) 32px;gap:16px;align-items:center;padding:24px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:10px;color:var(--muted)}.faq-list summary strong{font-size:18px;font-weight:500}.faq-list summary i{font-size:23px;font-weight:300;font-style:normal;text-align:center;transition:transform .25s}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details>div{padding:0 48px 24px 50px}.faq-list details p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;max-width:680px}

/* Service pages. */
.service-page-main{max-width:1500px;margin:auto;padding:0 5% 90px}.service-page-hero{display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);min-height:620px;border-bottom:1px solid var(--line)}.service-page-hero-copy{padding:100px 8% 80px 0;display:flex;flex-direction:column;justify-content:center}.service-page-hero-copy .eyebrow{color:var(--muted)}.service-page-hero-copy h1{font-size:clamp(56px,6vw,90px);letter-spacing:-4px;line-height:.98;margin:0 0 32px}.service-page-hero-copy>p{max-width:520px;color:var(--muted);font-size:17px;line-height:1.75;margin:0 0 36px}.service-page-hero-copy>a{display:flex;justify-content:space-between;gap:30px;width:min(100%,330px);padding:13px 0;border-bottom:1px solid var(--ink);font-size:14px}.service-page-hero-media{min-height:620px;overflow:hidden}.service-page-hero-media img{width:100%;height:100%;min-height:620px;object-fit:cover;display:block}.service-page-content{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(55px,8vw,120px);padding:95px 0}.service-page-content-inner{max-width:820px}.service-page-content-inner h2{font-size:clamp(34px,3.7vw,52px);margin:0 0 28px}.service-page-content-inner h3{font-size:25px;margin:50px 0 18px}.service-page-content-inner p,.service-page-content-inner li{font-size:17px;line-height:1.8;color:#52666b}.service-page-content-inner ul{padding-left:20px}.service-page-content aside{align-self:start;position:sticky;top:40px;border:1px solid var(--line);border-radius:5px;padding:30px;background:#fff}.service-page-content aside h2{font-size:30px;letter-spacing:-1px;margin-bottom:18px}.service-page-content aside>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:24px}.service-secondary{display:block;text-align:center;margin-top:13px;padding:12px;border:1px solid var(--line);border-radius:3px;font-size:13px}.service-related{padding-top:55px;border-top:1px solid var(--line)}.service-related-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.service-related-grid a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}.service-related-grid a:nth-child(3n){border-right:0}.service-related-grid a:hover{background:#eef2ef}.service-related-grid i{font-style:normal;color:var(--muted)}

@media(max-width:1100px){
  .team-story{grid-template-columns:1fr 1fr;gap:45px}.team-story-media,.team-story-media img{min-height:460px}.team-story-copy{padding-right:0}.service-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card>a{height:410px}.service-showcase-head{gap:45px}.service-page-hero{grid-template-columns:1fr 1.1fr}.service-page-content{grid-template-columns:minmax(0,1fr) 300px;gap:50px}
}
@media(max-width:782px){.admin-bar .drawer-trigger{top:73px}}
@media(max-width:720px){
  .drawer-trigger{top:18px;right:5%;min-height:42px;padding:0 13px;background:rgba(10,28,37,.42)}.admin-bar .drawer-trigger{top:64px}.drawer-trigger span{font-size:10px}.site-drawer{padding:25px 22px 26px}.drawer-menu>li>a{font-size:29px;padding:16px 0}.drawer-menu .sub-menu{grid-template-columns:1fr;padding-left:39px}.drawer-close{width:44px;height:44px;flex-basis:44px}.header-reorg{flex-wrap:nowrap!important}.header-reorg .brand{max-width:205px}.page-header-reorg{min-height:86px;padding-right:90px}
  .team-story{padding:65px 0 50px;grid-template-columns:1fr;gap:34px}.team-story-media,.team-story-media img{min-height:390px}.team-story-copy h2{font-size:42px;letter-spacing:-1.7px}.team-story-copy>p{font-size:15px}.service-showcase{padding:40px 0 70px}.service-showcase-head{grid-template-columns:1fr;gap:18px;margin-bottom:28px}.service-showcase-head h2{font-size:39px}.service-card-grid{grid-template-columns:1fr;gap:12px}.service-card>a{height:365px}.service-card-content>span{max-height:100px;opacity:1;transform:none;margin-top:12px}.service-card-content em{max-height:30px;opacity:1;margin-top:13px}.service-card-content strong{font-size:29px}.service-showcase+.approach{padding-top:50px}.faq-section{padding:70px 0 80px;grid-template-columns:1fr;gap:34px}.faq-intro h2{font-size:40px}.faq-list summary{grid-template-columns:26px minmax(0,1fr) 28px;padding:20px 0;gap:12px}.faq-list summary strong{font-size:16px}.faq-list details>div{padding:0 28px 22px 38px}
  .service-page-main{padding-left:5%;padding-right:5%}.service-page-hero{grid-template-columns:1fr;min-height:0}.service-page-hero-copy{padding:58px 0 45px}.service-page-hero-copy h1{font-size:58px;letter-spacing:-2.6px}.service-page-hero-media,.service-page-hero-media img{min-height:360px}.service-page-content{grid-template-columns:1fr;padding:60px 0;gap:38px}.service-page-content aside{position:static}.service-page-content-inner p,.service-page-content-inner li{font-size:16px}.service-related-grid{grid-template-columns:1fr}.service-related-grid a,.service-related-grid a:nth-child(3n){border-right:0}.service-related-grid a{padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){.site-drawer,.drawer-scrim,.service-card img,.service-card-content>span,.service-card-content em{transition:none}}

/* 2.1 – compact vertical top menu. It drops down from the top-right instead of covering the page. */
.site-drawer{inset:auto 5% auto auto;top:86px;width:min(410px,calc(100vw - 28px));height:auto;max-height:calc(100dvh - 112px);padding:20px 24px 22px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(19,44,53,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 65px rgba(4,17,23,.24);overflow-y:auto;transform:translateY(-12px) scale(.985);transform-origin:top right;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.22,.8,.2,1),visibility .22s}.sy-drawer-open .site-drawer{transform:translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto}.admin-bar .site-drawer{top:118px}
.drawer-top{align-items:center;padding-bottom:15px}.drawer-brand{font-size:11px;letter-spacing:1.8px}.drawer-brand small{font-size:7px;margin-top:4px}.drawer-close{position:relative;z-index:3;width:38px;height:38px;flex:0 0 38px;font-size:27px;line-height:34px;display:grid;place-items:center}.drawer-close span{display:block;line-height:1;transform:translateY(-1px)}
.drawer-nav{margin:10px 0 12px}.drawer-menu>li>a{gap:13px;padding:12px 0;font-size:21px;letter-spacing:-.45px;line-height:1.15}.drawer-menu>li>a span{min-width:20px;font-size:9px}.drawer-menu .sub-menu{grid-template-columns:1fr;padding:0 0 11px 33px;gap:2px}.drawer-menu .sub-menu a{padding:4px 0;font-size:11px}.drawer-foot{margin-top:8px;padding-top:14px}.drawer-quote{padding:12px 14px;font-size:12px}.drawer-foot p{display:none}

/* SEO hub pages. */
.service-index-main,.special-page-main{padding-top:0}.service-index-hero,.special-page-hero{padding:105px 0 65px;border-bottom:1px solid var(--line);max-width:1040px}.service-index-hero h1,.special-page-hero h1{font-size:clamp(54px,6vw,92px);line-height:.98;letter-spacing:-4px;margin:0 0 27px}.service-index-hero>p:last-child,.special-page-hero>p:last-child{max-width:720px;margin:0;color:var(--muted);font-size:17px;line-height:1.75}.service-index-copy,.special-page-copy{max-width:780px;padding:48px 0 0;color:var(--muted);font-size:16px;line-height:1.8}.service-index-main .service-showcase{padding-top:58px}.special-page-main .faq-section{margin-top:58px}.special-page-cta{margin:0 0 15px;padding:65px 0;border-top:1px solid var(--line)}.special-page-cta h2{font-size:clamp(36px,4vw,56px);margin:0 0 25px}.special-page-cta .primary{display:inline-flex;min-width:230px;justify-content:space-between}
.colour-guide-hero{display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);min-height:610px;border-bottom:1px solid var(--line)}.colour-guide-hero>div:first-child{padding:100px 8% 80px 0;display:flex;flex-direction:column;justify-content:center}.colour-guide-hero h1{font-size:clamp(54px,5.8vw,86px);line-height:.98;letter-spacing:-3.7px;margin:0 0 28px}.colour-guide-hero p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.75;margin:0 0 32px}.colour-guide-hero .primary{width:min(100%,320px);display:flex;justify-content:space-between}.colour-guide-image{min-height:610px;overflow:hidden}.colour-guide-image img{width:100%;height:100%;min-height:610px;object-fit:cover}.colour-guide-content{border-bottom:1px solid var(--line)}

@media(max-width:782px){.admin-bar .site-drawer{top:112px}}
@media(max-width:720px){
  .site-drawer{top:70px;right:14px;width:calc(100vw - 28px);max-height:calc(100dvh - 86px);padding:18px 20px 20px}.admin-bar .site-drawer{top:116px}.drawer-menu>li>a{font-size:22px;padding:12px 0}.drawer-menu .sub-menu{padding-left:32px}.drawer-close{width:38px;height:38px;flex-basis:38px}
  .service-index-hero,.special-page-hero{padding:62px 0 42px}.service-index-hero h1,.special-page-hero h1{font-size:55px;letter-spacing:-2.5px}.colour-guide-hero{grid-template-columns:1fr;min-height:0}.colour-guide-hero>div:first-child{padding:58px 0 45px}.colour-guide-hero h1{font-size:55px;letter-spacing:-2.5px}.colour-guide-image,.colour-guide-image img{min-height:350px}.service-index-copy,.special-page-copy{padding-top:36px}
}


/* 2.2 – horisontell toppmeny. MENY-knappen vecklar mjukt ut länkarna åt vänster. */
.top-menu-wrap{position:fixed;top:27px;right:5%;z-index:10020;display:flex;align-items:center;justify-content:flex-end;gap:0;max-width:calc(90vw - 260px);color:#fff}.admin-bar .top-menu-wrap{top:59px}
.drawer-trigger{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;z-index:2;flex:0 0 auto;min-height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(11,30,39,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;opacity:1!important;pointer-events:auto!important;transform:none!important}.drawer-trigger:hover{background:rgba(11,30,39,.48);transform:none!important}.drawer-trigger i{position:relative;width:18px;height:12px;display:block}.drawer-trigger b{position:absolute;left:0;width:18px;height:1px;background:currentColor;transition:transform .34s cubic-bezier(.22,.8,.2,1),top .34s cubic-bezier(.22,.8,.2,1)}.drawer-trigger b:first-child{top:3px}.drawer-trigger b:last-child{top:9px}.sy-drawer-open .drawer-trigger b:first-child{top:6px;transform:rotate(45deg)}.sy-drawer-open .drawer-trigger b:last-child{top:6px;transform:rotate(-45deg)}
.site-drawer{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;z-index:1;width:auto!important;height:46px!important;max-width:0;max-height:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;overflow:hidden!important;display:flex!important;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(30px)!important;transform-origin:right center;transition:max-width .48s cubic-bezier(.22,.8,.2,1),opacity .24s ease,transform .46s cubic-bezier(.22,.8,.2,1),visibility .1s linear .38s!important}.sy-drawer-open .site-drawer{max-width:680px;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)!important;transition:max-width .52s cubic-bezier(.22,.8,.2,1),opacity .26s ease .08s,transform .48s cubic-bezier(.22,.8,.2,1),visibility 0s!important}
.drawer-nav{margin:0!important;display:flex!important;align-items:center!important}.drawer-menu{display:flex!important;align-items:center;gap:34px;white-space:nowrap;margin:0 28px 0 0!important;padding:0!important;list-style:none}.drawer-menu>li{border:0!important;position:relative;flex:0 0 auto}.drawer-menu>li>a{display:block!important;padding:10px 0!important;color:#fff!important;font-size:13px!important;font-weight:400!important;letter-spacing:0!important;line-height:1.2!important;opacity:.94;transition:opacity .2s,color .2s}.drawer-menu>li>a:hover{color:#fff!important;opacity:1}.drawer-menu>li>a span{display:none!important}.drawer-menu .sub-menu{display:none!important}
.page-header-reorg .top-menu-wrap{color:#fff}.page-header-reorg .drawer-trigger{background:rgba(24,46,53,.84);border-color:rgba(255,255,255,.32)}

/* På mindre skärmar blir samma meny en kompakt vertikal ruta – aldrig en helsidespanel. */
@media(max-width:980px){
  .top-menu-wrap{top:21px;right:5%;max-width:calc(90vw - 190px)}.admin-bar .top-menu-wrap{top:53px}.site-drawer{position:absolute!important;top:56px!important;right:0!important;height:auto!important;width:260px!important;max-width:260px!important;max-height:0!important;padding:0 20px!important;background:rgba(19,44,53,.97)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:8px!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;box-shadow:0 20px 50px rgba(4,17,23,.22)!important;transform:translateY(-10px)!important;overflow:hidden!important}.sy-drawer-open .site-drawer{max-height:360px!important;padding:13px 20px 15px!important;transform:translateY(0)!important}.drawer-menu{width:100%;display:block!important;margin:0!important}.drawer-menu>li+li{border-top:1px solid rgba(255,255,255,.13)!important}.drawer-menu>li>a{padding:12px 0!important;font-size:14px!important}.header-reorg .brand{max-width:190px}}
@media(max-width:782px){.admin-bar .top-menu-wrap{top:67px}}
@media(max-width:720px){.top-menu-wrap{top:18px;right:5%;max-width:none}.admin-bar .top-menu-wrap{top:64px}.drawer-trigger{min-height:42px;padding:0 13px}.site-drawer{top:50px!important;right:0!important;width:min(270px,90vw)!important;max-width:min(270px,90vw)!important}.sy-drawer-open .site-drawer{max-height:360px!important}.header-reorg .brand{max-width:180px}}
@media(prefers-reduced-motion:reduce){.site-drawer,.drawer-trigger b{transition:none!important}}


/* 2.4 – top navigation stays with the hero instead of following the page. */
.top-menu-wrap{position:absolute!important;top:27px!important;right:5%!important;max-width:calc(90vw - 260px);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.admin-bar .top-menu-wrap{top:27px!important}
.drawer-menu{gap:46px!important;margin-right:32px!important}
.drawer-menu>li>a{position:relative;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-size:13px!important;font-weight:500!important;letter-spacing:.45px!important;opacity:.9;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease,letter-spacing .24s ease!important}
.drawer-menu>li>a:after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:currentColor;opacity:.7;transition:right .28s cubic-bezier(.2,.8,.2,1)}
.drawer-menu>li>a:hover,.drawer-menu>li>a:focus-visible{transform:translateY(-2px);opacity:1;letter-spacing:.8px!important}
.drawer-menu>li>a:hover:after,.drawer-menu>li>a:focus-visible:after{right:0}
.drawer-trigger{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;letter-spacing:1.45px!important}
@media(max-width:980px){.top-menu-wrap{top:21px!important}.admin-bar .top-menu-wrap{top:21px!important}.drawer-menu{gap:0!important;margin-right:0!important}.drawer-menu>li>a:hover,.drawer-menu>li>a:focus-visible{transform:translateX(3px)}}
@media(max-width:720px){.top-menu-wrap{top:18px!important}.admin-bar .top-menu-wrap{top:18px!important}}

/* 2.4 – menu lives in the hero/header instead of following the visitor while scrolling. */
.header-reorg .top-menu-wrap,.page-header-reorg .top-menu-wrap{
  position:relative!important;top:auto!important;right:auto!important;inset:auto!important;z-index:4;
  max-width:calc(100vw - 360px);margin-left:auto;color:#fff;
}
.drawer-menu{gap:44px!important;margin-right:31px!important}
.drawer-menu>li>a{
  position:relative;font-family:'SY Sans',Arial,Helvetica,sans-serif!important;font-size:13px!important;
  font-weight:400!important;letter-spacing:.035em!important;opacity:.92;
  transition:transform .28s cubic-bezier(.22,.8,.2,1),opacity .22s ease,letter-spacing .28s ease!important;
}
.drawer-menu>li>a::after{content:'';position:absolute;left:50%;right:50%;bottom:4px;height:1px;background:currentColor;opacity:.55;transition:left .28s ease,right .28s ease}
.drawer-menu>li>a:hover,.drawer-menu>li>a:focus-visible{transform:translateY(-3px);opacity:1;letter-spacing:.065em!important}
.drawer-menu>li>a:hover::after,.drawer-menu>li>a:focus-visible::after{left:0;right:0}
.drawer-trigger{font-family:'SY Sans',Arial,Helvetica,sans-serif!important;transition:background .25s,transform .28s cubic-bezier(.22,.8,.2,1)!important}
.drawer-trigger:hover{transform:translateY(-2px)!important}
@media(max-width:1100px){.drawer-menu{gap:28px!important}.drawer-menu>li>a{font-size:12px!important}.header-reorg .top-menu-wrap,.page-header-reorg .top-menu-wrap{max-width:calc(100vw - 250px)}}
@media(max-width:980px){
  .header-reorg .top-menu-wrap,.page-header-reorg .top-menu-wrap{position:relative!important;top:auto!important;right:auto!important;max-width:none;margin-left:auto}
  .site-drawer{position:absolute!important;top:56px!important;right:0!important}
  .drawer-menu{gap:0!important;margin-right:0!important}
  .drawer-menu>li>a:hover,.drawer-menu>li>a:focus-visible{transform:translateX(5px)}
}


/* 2.5 – extra-wide desktop navigation with more breathing room. */
@media(min-width:1201px){
  .header-reorg .top-menu-wrap,.page-header-reorg .top-menu-wrap{max-width:calc(100vw - 310px)!important}
  .sy-drawer-open .site-drawer{max-width:900px!important}
  .drawer-menu{gap:68px!important;margin-right:42px!important}
  .drawer-menu>li>a{font-size:13px!important;letter-spacing:.055em!important}
}
@media(min-width:981px) and (max-width:1200px){
  .sy-drawer-open .site-drawer{max-width:720px!important}
  .drawer-menu{gap:42px!important;margin-right:34px!important}
}

/* 2.6 – ännu luftigare desktopmeny. */
@media(min-width:1401px){
  .header-reorg .top-menu-wrap,.page-header-reorg .top-menu-wrap{max-width:calc(100vw - 300px)!important}
  .sy-drawer-open .site-drawer{max-width:1080px!important}
  .drawer-menu{gap:86px!important;margin-right:50px!important}
  .drawer-menu>li>a{font-size:13.5px!important;letter-spacing:.06em!important}
}
@media(min-width:1201px) and (max-width:1400px){
  .sy-drawer-open .site-drawer{max-width:930px!important}
  .drawer-menu{gap:66px!important;margin-right:42px!important}
}


/* 2.7 – Teamfoto, tjänstetexter och tidigare Extra CSS är nu inbyggt i temat. */
/* Behåll den nya dynamiska menyn. Om ett äldre nav skulle finnas döljs bara det, inte .site-drawer. */
.header > nav:not(.site-drawer){display:none!important}

/* Teamsektionen: något mindre bild och mer fokus på texten. */
@media(min-width:1101px){
  .team-story{grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr)!important;gap:clamp(52px,6vw,100px)!important;align-items:center}
  .team-story-media{min-height:410px!important;max-height:455px!important}
  .team-story-media img{min-height:410px!important;height:455px!important;object-fit:cover!important;object-position:center center}
  .team-story-copy{padding-right:2%!important;max-width:650px}
  .team-story-copy h2{font-size:clamp(42px,4vw,60px)!important;line-height:1.01!important;margin-bottom:24px!important}
  .team-story-copy>p{font-size:16px!important;line-height:1.68!important;max-width:590px!important}
}
@media(min-width:721px) and (max-width:1100px){
  .team-story{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;gap:38px!important}
  .team-story-media,.team-story-media img{min-height:390px!important;height:390px!important}
}

/* Färgstudion – introduktion och placering enligt tidigare Extra CSS. */
.studio-intro > p{
  white-space:normal!important;
  max-width:none!important;
  width:auto!important;
  flex-shrink:0;
  margin:0 0 -8px 0!important;
}

/* Dölj den lokala textfilsknappen – formuläret skickar i stället direkt via e-post. */
#quote-download{display:none!important}

/* Offertsektionen – typografi och mellanrum. */
.enquiry h2{line-height:.6!important}
.enquiry .eyebrow{margin-bottom:40px!important}

/* Startsidan – tätare introduktionstext. */
.hero-description{line-height:1!important}

/* Portfolio – tydligare hjälptext. */
.portfolio-meta-foot{
  font-size:14px!important;
  font-weight:500!important;
  color:#31464d!important;
}

/* 2.8 – större teamfoto i originalproportioner, utan den tidigare hårda beskärningen. */
@media(min-width:1101px){
  .team-story{
    grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr)!important;
    gap:clamp(48px,5vw,82px)!important;
  }
  .team-story-media{
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1672/941;
  }
  .team-story-media img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .team-story-copy{padding-right:0!important;max-width:590px!important}
}
@media(min-width:721px) and (max-width:1100px){
  .team-story{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;gap:34px!important}
  .team-story-media{min-height:0!important;height:auto!important;aspect-ratio:1672/941}
  .team-story-media img{min-height:0!important;height:100%!important;object-fit:cover!important}
}

/* v2.9.2 – Arbetssätt: lång huvudtext visas som brödtext, inte som jättestor rubrik. */
.approach .approach-copy{
  white-space:pre-line;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.62;
  letter-spacing:-.12px;
  font-weight:400;
  color:var(--ink);
  max-width:650px;
  margin:0;
}
@media(max-width:720px){
  .approach .approach-copy{
    font-size:16px;
    line-height:1.58;
    letter-spacing:0;
  }
}

/* 3.0 – gemensam premiumlayout för alla tjänsteundersidor + dragbar Före/Efter-visning. */
.service-page-v3{max-width:none!important;padding:0 5% 88px!important;background:var(--paper)}
.service-page-v3 .service-page-shell{width:min(100%,1020px);margin:0 auto;padding-top:58px}
.service-page-v3 .service-page-title-wrap{width:min(100%,760px);margin:0 auto 46px}
.service-page-v3 .service-page-title-wrap .eyebrow{color:var(--muted);margin-bottom:12px}
.service-page-v3 .service-page-title{font-size:var(--sy-service-title-size,64px)!important;line-height:.98!important;letter-spacing:-2.8px!important;font-weight:400!important;margin:0!important}
.service-page-v3 .service-page-title-rule{display:block;width:200px;max-width:38%;height:1px;background:var(--ink);margin-top:15px;opacity:.85}
.service-page-v3 .service-page-content-v3{display:grid!important;grid-template-columns:minmax(0,1fr) 260px!important;gap:clamp(42px,6vw,72px)!important;padding:0!important;margin:0 auto 48px!important;width:min(100%,760px)!important;align-items:start}
.service-page-v3 .service-page-content-inner{max-width:none!important;min-width:0}
.service-page-v3 .service-page-content-inner>:first-child{margin-top:0!important}
.service-page-v3 .service-page-content-inner h2{font-size:var(--sy-service-h2-size,29px)!important;line-height:1.12!important;letter-spacing:-.9px!important;margin:0 0 20px!important}
.service-page-v3 .service-page-content-inner h3{font-size:var(--sy-service-h3-size,20px)!important;line-height:1.25!important;letter-spacing:-.25px!important;margin:38px 0 14px!important}
.service-page-v3 .service-page-content-inner p,.service-page-v3 .service-page-content-inner li{font-size:var(--sy-service-body-size,16px)!important;line-height:1.72!important;color:#52666b!important}
.service-page-v3 .service-page-content-inner p{margin:0 0 22px!important}
.service-page-v3 .service-page-content-inner ul{margin:0 0 25px!important;padding-left:20px!important}
.service-page-v3 .service-page-aside{position:static!important;align-self:start!important;border:1px solid var(--line)!important;border-radius:3px!important;background:#fff!important;padding:22px!important;box-shadow:none!important}
.service-page-v3 .service-page-aside .eyebrow{font-size:9px!important;letter-spacing:1.55px!important;margin-bottom:11px!important;color:var(--muted)!important}
.service-page-v3 .service-page-aside h2{font-size:var(--sy-service-aside-size,24px)!important;line-height:1.08!important;letter-spacing:-.6px!important;margin:0 0 13px!important}
.service-page-v3 .service-page-aside>p:not(.eyebrow){font-size:14px!important;line-height:1.58!important;color:var(--muted)!important;margin:0 0 17px!important}
.service-page-v3 .service-page-aside .primary{font-size:12px!important;padding:12px 14px!important}
.service-page-v3 .service-secondary{font-size:12px!important}

.service-compare-section{width:min(100%,900px);margin:10px auto 62px;padding-top:1px}
.before-after{--split:50%;position:relative;aspect-ratio:16/9;overflow:hidden;background:#dfe5e3;border:1px solid var(--line);isolation:isolate;touch-action:pan-y;border-radius:2px}
.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.before-after-before{z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.before-after-label{position:absolute;z-index:5;top:50%;transform:translateY(-50%);padding:8px 13px;background:rgba(25,35,39,.48);color:#fff;font-family:Georgia,serif;font-size:13px;letter-spacing:.5px;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);pointer-events:none}
.before-after-label-before{left:14px}.before-after-label-after{right:14px}
.before-after-line{position:absolute;z-index:4;top:0;bottom:0;left:var(--split);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px #00000018;pointer-events:none}
.before-after-handle{position:absolute;z-index:5;left:var(--split);top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;border:2px solid #fff;background:rgba(24,46,53,.72);color:#fff;display:grid;place-items:center;font-size:18px;line-height:1;box-shadow:0 4px 18px #0003;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);pointer-events:none}
.before-after input[type=range]{position:absolute;z-index:6;inset:0;width:100%;height:100%;margin:0!important;padding:0!important;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;border:0;touch-action:pan-y}
.before-after input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:100%;cursor:ew-resize}
.before-after input[type=range]::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize}

.service-page-v3 .service-related{width:min(100%,900px);margin:0 auto;padding-top:30px!important;border-top:1px solid var(--line)!important}
.service-page-v3 .service-related>.eyebrow{font-size:10px!important;margin-bottom:14px!important;color:var(--muted)}
.service-page-v3 .service-related-grid{grid-template-columns:repeat(3,1fr)!important}
.service-page-v3 .service-related-grid a{font-size:14px!important;padding:16px 12px!important}

@media(max-width:820px){
  .service-page-v3{padding-left:6%!important;padding-right:6%!important}
  .service-page-v3 .service-page-shell{padding-top:42px}
  .service-page-v3 .service-page-title-wrap{margin-bottom:34px}
  .service-page-v3 .service-page-content-v3{grid-template-columns:1fr!important;width:100%!important;gap:30px!important;margin-bottom:38px!important}
  .service-page-v3 .service-page-aside{max-width:none;width:100%}
  .service-compare-section{margin-bottom:48px;width:100%}
  .before-after{aspect-ratio:4/3}
  .service-page-v3 .service-related{width:100%}
  .service-page-v3 .service-related-grid{grid-template-columns:1fr!important}
  .service-page-v3 .service-related-grid a,.service-page-v3 .service-related-grid a:nth-child(3n){border-right:0!important}
}
@media(max-width:520px){
  .service-page-v3 .service-page-title{letter-spacing:-1.6px!important}
  .service-page-v3 .service-page-title-rule{width:150px}
  .before-after-label{font-size:11px;padding:6px 9px}
  .before-after-handle{width:36px;height:36px;font-size:15px}
}


/* 3.1 – luftigare tjänstesidor + sidstyrda Före/Efter-etiketter. */
.service-page-v3 .service-page-shell{width:min(100%,1180px)!important}
.service-page-v3 .service-page-title-wrap{width:min(100%,980px)!important;margin-bottom:42px!important}
.service-page-v3 .service-page-content-v3{width:min(100%,980px)!important;grid-template-columns:minmax(0,1fr) 280px!important;gap:clamp(54px,6vw,86px)!important;margin-bottom:52px!important}
.service-page-v3 .service-page-content-inner{max-width:650px!important}
.service-page-v3 .service-page-content-inner p,.service-page-v3 .service-page-content-inner li{line-height:1.7!important}
.service-page-v3 .service-page-aside{width:280px!important;box-sizing:border-box}
.service-compare-section{width:min(100%,1100px)!important;margin-left:auto!important;margin-right:auto!important}
.service-page-v3 .service-related{width:min(100%,1100px)!important}

.before-after-label{
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
.before-after-label-before{transform:translateY(-50%) translateX(-7px)!important}
.before-after-label-after{transform:translateY(-50%) translateX(7px)!important}
.before-after.is-hover-before .before-after-label-before{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0)!important;
}
.before-after.is-hover-after .before-after-label-after{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0)!important;
}

@media(max-width:820px){
  .service-page-v3 .service-page-title-wrap,
  .service-page-v3 .service-page-content-v3,
  .service-compare-section,
  .service-page-v3 .service-related{width:100%!important}
  .service-page-v3 .service-page-content-inner{max-width:none!important}
  .service-page-v3 .service-page-aside{width:100%!important}
}


/* 3.2 – tjänstesidor linjeras mot Före/Efter-bilden. */
@media (min-width:821px){
  .service-page-v3 .service-page-title-wrap,
  .service-page-v3 .service-page-content-v3,
  .service-compare-section,
  .service-page-v3 .service-related{
    width:min(100%,1100px)!important;
  }
  .service-page-v3 .service-page-content-v3{
    grid-template-columns:minmax(0,1fr) 280px!important;
    gap:clamp(72px,7vw,100px)!important;
  }
  .service-page-v3 .service-page-content-inner{
    max-width:720px!important;
  }
  .service-page-v3 .service-page-title-wrap{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* 3.3 – tjänstesidor enligt ny referens: centrerad titel, Före/Efter först, text + CTA under. */
.service-page-v4{
  padding:0 5% 96px!important;
}
.service-page-v4 .service-page-shell{
  width:min(100%,1180px)!important;
  padding-top:30px!important;
}
.service-page-v4 .service-page-title-wrap{
  width:min(100%,1100px)!important;
  margin:0 auto 26px!important;
  text-align:center;
}
.service-page-v4 .service-page-title{
  font-size:var(--sy-service-title-size,72px)!important;
  line-height:.98!important;
  letter-spacing:-3.2px!important;
  font-weight:400!important;
  margin:0!important;
}
.service-page-v4 .service-page-title-rule{display:none!important}
.service-page-v4 .service-compare-section{
  width:min(100%,980px)!important;
  margin:0 auto 30px!important;
  padding:0!important;
}
.service-page-v4 .before-after{
  aspect-ratio:16/9!important;
  border-radius:0!important;
  border:0!important;
  background:#e3e7e5!important;
}
.service-page-v4 .service-page-content-v3{
  width:min(100%,980px)!important;
  grid-template-columns:minmax(0,1fr) 270px!important;
  gap:clamp(56px,7vw,92px)!important;
  margin:0 auto 62px!important;
  padding:0!important;
  align-items:start!important;
}
.service-page-v4 .service-page-content-inner{
  max-width:none!important;
}
.service-page-v4 .service-page-content-inner h2{
  margin-top:0!important;
  margin-bottom:18px!important;
}
.service-page-v4 .service-page-content-inner h3{
  margin-top:34px!important;
}
.service-page-v4 .service-page-content-inner p,
.service-page-v4 .service-page-content-inner li{
  line-height:1.65!important;
}
.service-page-v4 .service-page-aside{
  width:270px!important;
  margin-top:0!important;
}
.service-page-v4 .service-related{
  width:min(100%,980px)!important;
  margin:0 auto!important;
}

@media(max-width:820px){
  .service-page-v4{padding-left:5%!important;padding-right:5%!important}
  .service-page-v4 .service-page-shell{padding-top:24px!important}
  .service-page-v4 .service-page-title-wrap{margin-bottom:20px!important}
  .service-page-v4 .service-page-title{
    font-size:var(--sy-service-title-size,48px)!important;
    letter-spacing:-2px!important;
  }
  .service-page-v4 .service-compare-section,
  .service-page-v4 .service-page-content-v3,
  .service-page-v4 .service-related{width:100%!important}
  .service-page-v4 .before-after{aspect-ratio:4/3!important}
  .service-page-v4 .service-page-content-v3{
    grid-template-columns:1fr!important;
    gap:30px!important;
    margin-bottom:48px!important;
  }
  .service-page-v4 .service-page-aside{width:100%!important}
}

/* 3.4.1 – extra 3D-studiokort på sidan Båtfoliering. */
.service-page-v4 .service-page-aside-stack{
  width:270px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-self:start;
}
.service-page-v4 .service-page-aside-stack .service-page-aside{
  width:100%!important;
}
.service-page-v4 .service-studio-card h2{
  font-size:22px!important;
  line-height:1.12!important;
}
.service-page-v4 .service-studio-card .primary{
  width:100%;
  box-sizing:border-box;
}
@media(max-width:820px){
  .service-page-v4 .service-page-aside-stack{width:100%;gap:14px}
}