/* ============================================================
   Saltsjöbadens Marinservice – stylesheet
   Font pairing & palette echo saltlakebake.se for a shared,
   stilren (clean) sister-brand look.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:            #f0f0ef;
  --bg-soft:       #ffffff;
  --bg-deep:       #dedede;
  --ink:           #161616;
  --ink-soft:      #4b4b4b;
  --ink-faint:     rgba(22,22,22,0.55);
  --accent:        #9c9c9c;
  --accent-deep:   #707070;
  --line:          rgba(22,22,22,0.14);
  --line-strong:   rgba(22,22,22,0.4);
  --radius-pill:   999px;
  --radius-card:   18px;
  --max-w:         1120px;
  --shadow-card:   0 18px 40px -24px rgba(0,0,0,0.35);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
section[id], .sub-card[id]{ scroll-margin-top:90px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Figtree', system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400;
  line-height:1.08;
  margin:0 0 0.4em;
  color:var(--ink);
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:1.4rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
em{ font-style:italic; color:var(--accent-deep); }

.eyebrow{
  font-family:'Space Mono', 'Courier New', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:0.6em; height:1px;
  background:var(--line-strong);
  display:inline-block;
}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:'Figtree', sans-serif;
  font-size:0.95rem;
  font-weight:600;
  padding:0.85rem 1.5rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-solid{ background:#9c9c9c; color:var(--ink); }
.btn-solid:hover{ background:#707070; }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
/* .btn-light sits on top of photos (the hero), never on the page background,
   so – like .cta-band – it stays fixed light-with-dark-text regardless of
   the viewer's light/dark theme. */
.btn-light{ background:rgba(255,255,255,0.92); color:#161616; }
.btn-light:hover{ background:#fff; }

/* ---------- header ----------
   header.site is a deliberately fixed light bar (frosted glass over any
   background), independent of the page's light/dark theme, so every color
   inside it below is a fixed literal rather than a theme-reactive token –
   that keeps its text readable no matter which theme the viewer is in. */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(240,240,239,0.88);
  border-bottom:1px solid rgba(22,22,22,0.14);
  color:#161616;
}
/* blur lives on a decorative layer, not on header.site itself – a filter on
   header.site would make it the containing block for its position:fixed
   mobile-nav descendant and break that nav's viewport-relative offset */
header.site::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.9rem 1.5rem;
  max-width:var(--max-w); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:0.7rem; }
.brand img.mark{ height:32px; width:auto; }
.brand img.wordmark{ height:15px; width:auto; margin-top:2px; }
@media (max-width:480px){
  .brand img.wordmark{ display:none; }
}
header.site .brand, .header-cta{ flex-shrink:0; }
header.site .btn, nav.primary a{ white-space:nowrap; }
@media (max-width:560px){
  header.site .brand img.wordmark{ display:none; }
  header.site .bar{ gap:0.5rem; padding-inline:1rem; }
  header.site .header-cta{ gap:0.75rem; }
}
nav.primary{ display:flex; align-items:center; gap:2rem; }
nav.primary a{
  font-size:0.92rem; font-weight:500;
  padding:0.3rem 0;
  border-bottom:1px solid transparent;
}
nav.primary a:hover, nav.primary a.active{ border-color:#161616; }
.header-cta{ display:flex; align-items:center; gap:1rem; }
.header-cta .btn-solid{ background:var(--accent); }
.header-cta .btn-solid:hover{ background:var(--accent-deep); }
.header-cta .ig-link{ display:flex; color:#161616; opacity:0.75; transition:opacity .18s ease; }
.header-cta .ig-link:hover{ opacity:1; }
.header-cta .phone{
  font-family:'Space Mono', monospace;
  font-size:0.85rem;
}
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:0.4rem; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:#161616;
  position:relative; transition:all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width: 1100px){
  nav.primary{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:flex-start;
    background:rgba(240,240,239,0.88); padding:1.5rem; gap:1.1rem;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(22,22,22,0.14);
    visibility:hidden;
    transform:translateY(-130%); transition:transform .25s ease;
  }
  nav.primary.open{ visibility:visible; transform:translateY(0); }
  .header-cta .phone{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:78vh;
  display:flex; align-items:flex-end;
  padding:4rem 0 4.5rem;
  overflow:hidden;
  color:#f5f5f5;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero .hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.48) 40%, rgba(4,4,4,0.82) 100%);
}
.hero .hero-content{ position:relative; z-index:2; max-width:760px; }
.hero .eyebrow{
  color:#fff;
  font-family:'Figtree', sans-serif;
  font-size:0.8rem;
  font-weight:400;
  letter-spacing:0.08em;
}
.hero .eyebrow::before{ background:rgba(255,255,255,0.6); }
.hero h1{ color:#fff; }
.hero h1 em{ color:#F2D6A2; }
.hero p.lead{ color:rgba(255,255,255,0.88); font-size:1.15rem; max-width:56ch; }
.hero .actions{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

.hero.small{ min-height:46vh; padding:3.5rem 0 3rem; align-items:center; }
.hero.small .hero-content{ max-width:640px; }

/* ---------- sections ---------- */
section{ padding:5rem 0; }
section.soft{ background:var(--bg-soft); }
section.deep{ background:var(--bg-deep); }
.section-head{ max-width:640px; margin-bottom:3rem; }

/* stat row */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  padding:3rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat b{
  display:block; font-family:'Instrument Serif', serif; font-size:2.6rem; font-weight:400; color:var(--ink);
}
.stat span{ font-size:0.92rem; color:var(--ink-soft); }
@media (max-width:700px){ .stats{ grid-template-columns:1fr; gap:1.6rem; text-align:left; } }

/* cards */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
@media (max-width:1080px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  background:#fff; border-radius:var(--radius-card); overflow:hidden;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column;
  transition:transform .2s ease;
}
.card:hover{ transform:translateY(-4px); }
.card:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }
.card .card-img{ aspect-ratio:4/3; overflow:hidden; }
.card .card-img img{ width:100%; height:100%; object-fit:cover; }
.card .card-body{ padding:1.5rem 1.5rem 1.75rem; flex:1; display:flex; flex-direction:column; }
.card h3{ margin-bottom:0.5rem; }
.card p{ flex:1; font-size:0.95rem; }
.card .card-link{
  font-family:'Space Mono', monospace; font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:.4em;
  margin-top:1rem;
}
.card .card-link::after{ content:"→"; transition:transform .18s ease; }
.card:hover .card-link::after{ transform:translateX(3px); }

/* two-col feature */
.feature{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:3.5rem; align-items:center;
}
.feature.reverse{ direction:rtl; }
.feature.reverse > *{ direction:ltr; }
@media (max-width:860px){ .feature{ grid-template-columns:1fr; } }
.feature .media{ border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); }
.feature .media img{ width:100%; height:auto; }
.feature.compact-media .media{ max-width:340px; justify-self:start; }
@media (max-width:860px){ .feature.compact-media .media{ max-width:340px; justify-self:center; } }

/* spec table */
.specs{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.specs tr{ border-bottom:1px solid var(--line); }
.specs td{ padding:0.85rem 0.4rem; font-size:0.95rem; }
.specs td:first-child{ color:var(--ink-soft); width:55%; }
.specs td:last-child{ font-weight:600; text-align:right; }

/* pill list (certifications, cargo examples) */
.pill-list{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:1.2rem 0 1.6rem; padding:0; list-style:none; }
.pill-list li{
  font-size:0.85rem; padding:0.5rem 1rem; border-radius:var(--radius-pill);
  background:var(--bg-soft); border:1px solid var(--line);
}
section.deep .pill-list li, section.soft .pill-list li{ background:#fff; }

/* sub-service list (sjötransport) */
.sub-services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2.5rem; }
@media (max-width:1080px){ .sub-services{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sub-services{ grid-template-columns:1fr; } }
.sub-card{
  border:1px solid var(--line); border-radius:var(--radius-card); padding:1.25rem 1.35rem;
  background:var(--bg-soft);
  display:block; color:inherit; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sub-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.sub-card h3{ font-size:1.15rem; }
.sub-card p{ font-size:0.92rem; margin-bottom:0; }
.sub-card .num{
  font-family:'Space Mono', monospace; font-size:0.78rem; color:var(--ink-soft);
  display:block; margin-bottom:0.8rem;
}

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
@media (max-width:760px){ .gallery{ grid-template-columns:1fr 1fr; } }
.gallery img{
  width:100%; height:100%; object-fit:cover; border-radius:14px;
  aspect-ratio:4/5;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery img:hover{ transform:scale(1.035); box-shadow:var(--shadow-card); }
.gallery .wide{ grid-column:span 2; aspect-ratio:auto; }
@media (max-width:760px){ .gallery .wide{ grid-column:span 2; } }

/* compact gallery variant – small, uniform tiles for a stiller, more streamlined grid.
   auto-fit collapses unused tracks so a 4-image gallery doesn't leave a gap
   where a 6-image one would have more tiles. */
.gallery.compact{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.5rem; margin-top:2rem; }
.gallery.compact img{ aspect-ratio:1/1; border-radius:7px; }
@media (max-width:560px){ .gallery.compact{ grid-template-columns:repeat(3,1fr); gap:0.4rem; } }

.gallery-trigger{
  display:block; width:100%; min-width:0; padding:0; border:0;
  background:transparent; border-radius:14px; cursor:pointer;
  aspect-ratio:4/5;
}
.gallery.compact .gallery-trigger{ aspect-ratio:1/1; border-radius:7px; }
.gallery-trigger:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }
.lightbox-overlay button:focus-visible{ outline:3px solid #fff; outline-offset:4px; }

/* lightbox */
.lightbox-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(8,8,8,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease;
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-figure{ display:flex; flex-direction:column; align-items:center; gap:0.9rem; max-width:min(92vw,1100px); }
.lightbox-figure img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,0.8); display:block;
  cursor:default;
}
.lightbox-caption{ color:rgba(245,245,245,0.82); font-size:0.88rem; text-align:center; max-width:65ch; }
.lightbox-close, .lightbox-nav{
  position:fixed; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.28);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background:rgba(255,255,255,0.2); }
.lightbox-close{ top:1.25rem; right:1.25rem; width:2.5rem; height:2.5rem; font-size:1.4rem; line-height:1; }
.lightbox-nav{ top:50%; transform:translateY(-50%); width:3rem; height:3rem; font-size:1.5rem; }
.lightbox-prev{ left:1.25rem; }
.lightbox-next{ right:1.25rem; }
@media (max-width:640px){
  .lightbox-nav{ width:2.3rem; height:2.3rem; font-size:1.2rem; }
  .lightbox-close{ width:2.2rem; height:2.2rem; font-size:1.2rem; }
}

/* CTA band – deliberately a fixed dark card regardless of light/dark viewer
   theme, so its white text always has the contrast it was designed for */
.cta-band{
  background:#161616; color:#f5f5f5;
  border-radius:28px; padding:3.5rem 3rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin:0; }
.cta-band p{ color:rgba(255,255,255,0.75); margin:0.6rem 0 0; }
.cta-band .btn-solid{ background:#f5f5f5; color:#161616; }
.cta-band .btn-solid:hover{ background:#fff; }

/* footer */
footer.site{ background:var(--bg-deep); padding:4rem 0 2rem; margin-top:4rem; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem;
  border-bottom:1px solid rgba(22,22,22,0.15);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:0.9rem; }
.footer-grid h4{
  font-family:'Space Mono', monospace; font-size:0.75rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 1rem;
}
.footer-grid a, .footer-grid p{ font-size:0.92rem; display:block; margin:0 0 0.5rem; color:var(--ink); }
.social-row{ display:flex; gap:0.75rem; margin-top:1rem; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:1.5rem; font-size:0.8rem; color:var(--ink-faint);
  flex-wrap:wrap; gap:0.6rem;
}

/* misc */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.map-link{ font-size:0.9rem; text-decoration:underline; text-underline-offset:3px; }