/* =========================================================
   Service page (Altaner & trädäck and siblings)
   Loaded only on pages flagged _ha_service_page.
   ========================================================= */

.ha-sp{--sp-gap:56px}
.ha-main .ha-sp-section{max-width:var(--ha-container);margin:0 auto;padding:88px var(--ha-gutter) 0}
.ha-main .ha-sp-section--last{padding-bottom:96px}
.ha-sp-section > *{margin-block-start:0;margin-block-end:0}
/* Standalone headings sit in block flow (no flex gap to space them), and the
   reset above strips their margin - give them their own breathing room. */
.ha-sp-section > h2,
.ha-sp-section > h3,
.ha-sp-dark__inner > h2,
.ha-sp-dark__inner > h3{margin-block-end:28px}
/* ...and space above a heading that follows content. */
.ha-sp-section > * + h2,
.ha-sp-section > * + h3{margin-block-start:44px}


/* ---------- Hero ---------- */
.ha-sp-hero{background:var(--ha-hero-ground)}
.ha-sp-hero__inner{max-width:var(--ha-container);margin:0 auto;padding:80px var(--ha-gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.ha-sp-hero__inner > *{margin-block-start:0;margin-block-end:0}
.ha-sp-hero__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.ha-sp-hero__copy > *{margin:0}
.ha-sp-hero h1{font-family:var(--ha-heading);font-size:58px;font-weight:900;letter-spacing:-.01em;line-height:1.04;text-transform:uppercase;color:#fff;text-wrap:pretty}
.ha-sp-hero__lead{font-size:19px;line-height:1.6;color:var(--ha-on-dark-lead);max-width:560px;text-wrap:pretty}
.ha-sp-hero__media{display:flex;flex-direction:column;gap:16px;min-width:0}
.ha-sp-hero__media > *{margin-block-start:0;margin-block-end:0}
.ha-sp-hero__media .wp-block-image{margin:0;height:460px;overflow:hidden;border-radius:var(--ha-radius)}
.ha-sp-hero__media .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ha-sp-hero__note{display:flex;align-items:center;gap:16px;background:var(--ha-accent);color:#fff;border-radius:var(--ha-radius);padding:20px 22px;font-family:var(--ha-heading);font-weight:700;font-size:15px;line-height:1.4;margin:0}

/* ---------- Breadcrumb ---------- */
.ha-breadcrumb{font-size:14px;color:#A9B0B7;display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ha-breadcrumb a{color:#A9B0B7;text-decoration:none}
.ha-breadcrumb a:hover,.ha-breadcrumb a:focus-visible{color:var(--ha-accent-light)}
.ha-breadcrumb__current{color:var(--ha-accent-light);font-weight:600}

/* ---------- Badge strip ---------- */
.ha-sp-badges{background:var(--ha-surface);border-bottom:1px solid var(--ha-border)}
.ha-sp-badges__inner{max-width:var(--ha-container);margin:0 auto;padding:30px var(--ha-gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ha-sp-badges__inner > *{margin-block-start:0;margin-block-end:0}
.ha-sp-badge{display:flex;align-items:center;gap:12px;border-left:3px solid var(--ha-accent);padding-left:16px;font-family:var(--ha-heading);font-weight:700;font-size:17px;color:var(--ha-charcoal);margin:0}

/* ---------- Two-column split ---------- */
.ha-sp-split.wp-block-columns{gap:56px;margin:0;align-items:center}
.ha-sp-split .wp-block-column{box-sizing:border-box;min-width:0}
.ha-sp-split .wp-block-column > *{margin-block-start:0;margin-block-end:0}
.ha-sp-copy{display:flex;flex-direction:column;gap:18px}
.ha-sp-copy > *{margin:0}
.ha-sp-copy h2{font-family:var(--ha-heading);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:var(--ha-charcoal);text-wrap:pretty}
.ha-sp-copy p{font-size:17px;line-height:1.65;color:var(--ha-stone)}
.ha-sp-media{display:flex;flex-direction:column;gap:12px}
.ha-sp-media > *{margin-block-start:0;margin-block-end:0}
.ha-sp-media .wp-block-image{margin:0;border-radius:var(--ha-radius);overflow:hidden}
.ha-sp-media .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ha-sp-caption{font-size:14px;line-height:1.5;color:var(--ha-subtle);margin:0}

/* paired images inside a media column */
.ha-sp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ha-sp-pair > *{margin-block-start:0;margin-block-end:0}
.ha-sp-pair .wp-block-image{height:300px;margin:0;border-radius:var(--ha-radius);overflow:hidden}
.ha-sp-pair .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}

/* scope list */
/* Columns, not grid: grid rows align across both halves, so a two-line item
   leaves a visible gap beside it. */
.ha-sp-scope{column-count:2;column-gap:32px;margin:0;padding:0;list-style:none}
.ha-sp-scope li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:10px}
.ha-sp-scope li{position:relative;padding-left:20px;font-size:16px;line-height:1.5;color:var(--ha-charcoal)}
.ha-sp-scope li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--ha-accent);font-weight:700}

/* ---------- Details: 3-up image row ---------- */
.ha-sp-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.ha-sp-trio > *{margin-block-start:0;margin-block-end:0}
.ha-sp-trio .wp-block-image{margin:0;height:300px;border-radius:var(--ha-radius);overflow:hidden}
.ha-sp-trio .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}

/* ---------- Dark construction band ---------- */
.ha-sp-dark{background:var(--ha-charcoal)}
.ha-main > .ha-sp-dark{margin-block-start:88px}
.ha-sp-dark__inner{max-width:var(--ha-container);margin:0 auto;padding:80px var(--ha-gutter);display:flex;flex-direction:column;gap:32px}
.ha-sp-dark__inner > *{margin-block-start:0;margin-block-end:0}
.ha-sp-dark h2{font-family:var(--ha-heading);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:#fff;margin:0;text-wrap:pretty}
.ha-sp-dark p{font-size:17px;line-height:1.65;color:var(--ha-on-dark);margin:0}
.ha-sp-dark .ha-eyebrow{color:var(--ha-accent-light)}

/* ---------- Full-bleed emotional ---------- */
.ha-sp-bleed.wp-block-cover{min-height:620px;padding:0;align-items:center;border-radius:0;background-color:var(--ha-hero-ground)}
.ha-sp-bleed.ha-sp-bleed.wp-block-cover.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container{width:100%;max-width:none;margin:0;padding:0}
.ha-sp-bleed__inner{max-width:var(--ha-container);margin:0 auto;padding:0 var(--ha-gutter);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ha-sp-bleed__inner > *{margin:0;max-width:560px}
.ha-sp-bleed h2{font-family:var(--ha-heading);font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:#fff;text-wrap:pretty}
/* Astra's body .wp-block-cover:not(...) p is (0,3,2) and outranks a 3-class rule,
   so this needs a fourth class to win. Same trap as the homepage hero. */
.ha-sp-bleed.ha-sp-bleed.wp-block-cover .ha-sp-bleed__inner p{font-size:18px;line-height:1.6;color:#E8E6E2}
.ha-sp-bleed.ha-sp-bleed.wp-block-cover .ha-sp-bleed__inner p.is-emphasis{color:#fff;font-weight:600}

/* ---------- Gallery ---------- */
.ha-sp-galleryhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.ha-sp-galleryhead > *{margin-block-start:0;margin-block-end:0}
.ha-sp-galleryhead__title{display:flex;flex-direction:column;gap:12px}
.ha-sp-galleryhead__title > *{margin:0}
.ha-sp-galleryhead h2{font-family:var(--ha-heading);font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0}
.ha-sp-galleryhead__note{font-size:15px;color:var(--ha-subtle);max-width:320px;text-align:right;margin:0}
.ha-sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ha-sp-grid > *{margin-block-start:0;margin-block-end:0}
.ha-sp-grid .wp-block-image{margin:0;height:280px;border-radius:var(--ha-radius);overflow:hidden}
.ha-sp-grid .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .5s ease}
.ha-sp-grid .wp-block-image:hover img{transform:scale(1.06)}

/* ---------- Aldas panel ---------- */
.ha-sp-aldas.wp-block-columns{gap:48px;margin:0;align-items:center}
.ha-sp-aldas .wp-block-column{box-sizing:border-box;min-width:0}
.ha-sp-aldas .wp-block-column > *{margin-block-start:0;margin-block-end:0}
.ha-sp-aldas__media .wp-block-image{margin:0;border-radius:var(--ha-radius);overflow:hidden}
.ha-sp-aldas__media img{width:100%;height:100%;max-height:460px;object-fit:cover;display:block;border-radius:0}

/* ---------- Process ---------- */
.ha-sp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ha-sp-steps > *{margin-block-start:0;margin-block-end:0}
.ha-sp-step{background:var(--ha-surface);border:1px solid var(--ha-border);border-top:3px solid var(--ha-accent);border-radius:var(--ha-radius);padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.ha-sp-step > *{margin:0}
.ha-sp-step__num{font-family:var(--ha-heading);font-weight:800;font-size:26px;color:#C9C4BC;line-height:1}
.ha-sp-step__title{font-family:var(--ha-heading);font-weight:700;font-size:18px;color:var(--ha-charcoal);line-height:1.3}
.ha-sp-step__desc{font-size:15px;line-height:1.55;color:var(--ha-stone)}

/* ---------- CTA ---------- */
.ha-sp-cta.wp-block-columns{background:var(--ha-surface);border:1px solid var(--ha-border);border-radius:var(--ha-radius);padding:56px;gap:48px;margin:0;align-items:center}
.ha-sp-cta .wp-block-column{box-sizing:border-box;min-width:0}
.ha-sp-cta .wp-block-column > *{margin-block-start:0;margin-block-end:0}
.ha-sp-cta__body{display:flex;flex-direction:column;gap:16px}
.ha-sp-cta__body > *{margin:0}
.ha-sp-cta__body h2{font-family:var(--ha-heading);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.14;text-wrap:pretty}
.ha-sp-cta__body p{font-size:17px;line-height:1.6;color:var(--ha-stone)}
.ha-sp-cta__note{font-size:14px;color:var(--ha-subtle)}

/* ---------- FAQ ---------- */
.ha-sp-faqs{display:flex;flex-direction:column;gap:12px}
.ha-sp-faqs > *{margin-block-start:0;margin-block-end:0}
.ha-sp-faq{background:var(--ha-surface);border:1px solid var(--ha-border);border-radius:var(--ha-radius);padding:26px 28px;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:32px;align-items:start}
.ha-sp-faq > *{margin-block-start:0;margin-block-end:0}
.ha-sp-faq__q{font-family:var(--ha-heading);font-weight:700;font-size:18px;color:var(--ha-charcoal);line-height:1.35;margin:0}
.ha-sp-faq__a{font-size:16px;line-height:1.6;color:var(--ha-stone);margin:0}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .ha-sp-hero__inner{grid-template-columns:1fr;gap:40px;padding:64px var(--ha-gutter)}
  .ha-sp-hero h1{font-size:46px}
  .ha-sp-hero__media .wp-block-image{height:360px}
  .ha-sp-badges__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .ha-sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ha-sp-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .ha-sp-trio .wp-block-image,.ha-sp-pair .wp-block-image{height:230px}
  .ha-sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ha-sp-cta.wp-block-columns{padding:40px}
}

@media (max-width:781px){
  .ha-main .ha-sp-section{padding-top:56px}
  .ha-main .ha-sp-section--last{padding-bottom:64px}
  .ha-sp-hero__inner{padding:48px var(--ha-gutter);gap:28px}
  .ha-sp-hero h1{font-size:32px}
  .ha-sp-hero__lead{font-size:17px}
  .ha-sp-hero__media .wp-block-image{height:260px}
  .ha-sp-badges__inner{grid-template-columns:1fr;gap:14px;padding:22px var(--ha-gutter)}
  .ha-sp-split.wp-block-columns,.ha-sp-aldas.wp-block-columns,.ha-sp-cta.wp-block-columns{flex-wrap:wrap;gap:28px}
  .ha-sp-split .wp-block-column,.ha-sp-aldas .wp-block-column,.ha-sp-cta .wp-block-column{flex-basis:100%!important}
  .ha-sp-copy h2,.ha-sp-dark h2,.ha-sp-galleryhead h2,.ha-sp-cta__body h2{font-size:26px}
  .ha-sp-scope{grid-template-columns:1fr}
  .ha-sp-trio{grid-template-columns:1fr}
  .ha-sp-pair{grid-template-columns:1fr}
  .ha-sp-trio .wp-block-image,.ha-sp-pair .wp-block-image{height:240px}
  .ha-main > .ha-sp-dark{margin-block-start:56px}
  .ha-sp-dark__inner{padding:56px var(--ha-gutter);gap:24px}
  .ha-sp-bleed.wp-block-cover{min-height:480px}
  .ha-sp-bleed h2{font-size:26px}
  .ha-sp-galleryhead{flex-direction:column;align-items:flex-start}
  .ha-sp-galleryhead__note{text-align:left;max-width:none}
  .ha-sp-grid{grid-template-columns:1fr}
  .ha-sp-grid .wp-block-image{height:240px}
  .ha-sp-steps{grid-template-columns:1fr}
  .ha-sp-cta.wp-block-columns{padding:28px 24px}
  .ha-sp-faq{grid-template-columns:1fr;gap:10px;padding:22px 24px}
  .ha-sp-aldas__media img{max-height:340px}
}

@media (max-width:480px){
  .ha-sp-hero h1{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  .ha-sp-grid .wp-block-image img{transition:none}
  .ha-sp-grid .wp-block-image:hover img{transform:none}
}

/* ---------- Labelled shots: before / during / after ---------- */
.ha-sp-shot{position:relative;overflow:hidden;border-radius:var(--ha-radius)}
.ha-sp-shot > *{margin-block-start:0;margin-block-end:0}
.ha-sp-shot .wp-block-image,
.ha-sp-ba > .wp-block-image,
.ha-sp-series > .wp-block-image{margin:0;height:320px;overflow:hidden;border-radius:var(--ha-radius)}
.ha-sp-shot .wp-block-image img,
.ha-sp-ba > .wp-block-image img,
.ha-sp-series > .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ha-sp-shot__label{position:absolute;left:0;top:0;margin:0;padding:8px 14px;background:var(--ha-charcoal);color:#fff;font-family:var(--ha-heading);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.ha-sp-shot--now .ha-sp-shot__label{background:var(--ha-accent)}

/* two-up before/after and three-up series */
.ha-sp-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ha-sp-series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ha-sp-ba > *,.ha-sp-series > *{margin-block-start:0;margin-block-end:0}

/* dark band variants of the shot grids */
.ha-sp-dark .ha-sp-shot__label{background:var(--ha-accent)}
.ha-sp-dark .ha-sp-series .wp-block-image,
.ha-sp-dark .ha-sp-series > .wp-block-image{height:280px}

@media (max-width:1024px){
  .ha-sp-shot .wp-block-image,.ha-sp-ba > .wp-block-image,.ha-sp-series > .wp-block-image{height:260px}
  .ha-sp-dark .ha-sp-series .wp-block-image{height:230px}
}
@media (max-width:781px){
  .ha-sp-ba,.ha-sp-series{grid-template-columns:1fr}
  .ha-sp-shot .wp-block-image,.ha-sp-ba > .wp-block-image,.ha-sp-series > .wp-block-image,.ha-sp-dark .ha-sp-series .wp-block-image{height:240px}
  .ha-sp-scope{column-count:1}
  .ha-sp-section > h2,.ha-sp-section > h3{margin-block-end:20px}
  .ha-sp-section > * + h2,.ha-sp-section > * + h3{margin-block-start:32px}
}