/* Officium — Services & Pricing (shared by /services-pricing and /is/thjonusta-og-verd).
   Builds on home.css: same tokens, typography, rounded cards and spacing rhythm.
   Adds one warm accent for prices and a print layout that exports to a single page. */
:root{
  --clay:#A9743A;
  --clay-soft:#C79355;
}

/* ---------- HERO ---------- */
.sp-hero{padding:160px 0 84px; max-width:760px;}
.sp-hero h1{font-size:clamp(2.3rem, 4.2vw, 3.5rem); line-height:1.08; margin-bottom:24px;}
.sp-hero h1 em{font-style:italic; color:var(--orange);}
.sp-hero p.lead{font-size:1.14rem; color:var(--ink-soft); max-width:620px; margin-bottom:36px;}

/* The secondary CTA is a button (it triggers print), so it needs the anchor styling reset onto it. */
button.btn-secondary{
  background:none; border:none; border-bottom:1.5px solid var(--navy);
  font-family:'Nunito Sans', sans-serif; cursor:pointer;
}

/* ---------- PROBLEM ---------- */
.sp-problem{padding:0 0 100px;}
.sp-h2{font-size:clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom:34px;}
.sp-symptoms{
  list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:34px;
}
.sp-symptoms li{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; font-size:0.99rem; color:var(--navy-soft);
}
.sp-symptoms li svg{flex-shrink:0; margin-top:3px;}
.sp-problem-note{
  font-family:'Fraunces', serif; font-size:1.3rem; font-weight:450; line-height:1.45;
  color:var(--navy); max-width:640px;
}

/* ---------- SERVICES ---------- */
.sp-services{padding:0 0 100px;}
.sp-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:26px;}
.sp-card{
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sp-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px -28px rgba(22,39,74,0.3); border-color:transparent;}
.sp-card .num{
  width:38px; height:38px; border-radius:50%;
  background:var(--ivory); border:1.5px solid var(--clay-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-style:italic; font-size:0.95rem; color:var(--navy);
  margin-bottom:22px;
}
.sp-card h3{font-size:1.22rem; margin-bottom:10px;}
.sp-card .price{
  font-size:0.86rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--clay); margin-bottom:14px;
}
.sp-card p{color:var(--ink-soft); font-size:0.97rem;}

/* The seventh card closes the grid across both columns. */
.sp-card.sp-card-wide{grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:start;}
.sp-card.sp-card-wide .sp-card-head{max-width:340px;}
.sp-card.sp-card-wide p{padding-top:4px;}

/* ---------- WHY OFFICIUM ---------- */
.sp-why{padding:0 0 100px;}
.sp-badges{list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin-top:6px;}
.sp-badges li{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:100px;
  padding:14px 24px;
  font-size:0.88rem; font-weight:800; letter-spacing:0.02em; color:var(--navy-soft);
}
.sp-badges li svg{flex-shrink:0;}

/* ---------- CONTACT ---------- */
.sp-contact{
  background:var(--navy); border-radius:36px; color:var(--ivory);
  padding:64px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.sp-contact h2{color:var(--ivory); font-size:clamp(1.75rem, 2.8vw, 2.3rem); margin-bottom:18px; max-width:18ch;}
.sp-contact .contact-detail{margin-bottom:0;}
.sp-contact .btn-primary{flex-shrink:0;}

/* ---------- PRINT-ONLY HEADER ---------- */
.sp-print-head{display:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
  .sp-symptoms{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:880px){
  .sp-hero{padding:132px 0 64px;}
  .sp-symptoms{grid-template-columns:1fr;}
  .sp-grid{grid-template-columns:1fr;}
  .sp-card{padding:30px 26px;}
  .sp-card.sp-card-wide{grid-template-columns:1fr; gap:14px;}
  .sp-card.sp-card-wide .sp-card-head{max-width:none;}
  .sp-contact{padding:44px 28px;}
  .sp-contact .btn-primary{width:100%; text-align:center;}
  .sp-problem, .sp-services, .sp-why{padding-bottom:70px;}
}

/* ---------- PRINT: one-page A4 export ----------
   Everything interactive drops away and the page is recomposed as a compact
   one-page overview, so "Download PDF" is just the browser's print-to-PDF. */
@media print{
  @page{size:A4 portrait; margin:11mm;}

  html{font-size:10px;}
  body{
    background:#fff; color:#16274A;
    font-size:8.4pt; line-height:1.35;
    overflow:visible;
  }
  header, footer, .seam, .lang-switch, .nav-cta, .btn-row, .sp-print-hide{display:none !important;}
  .wrap{max-width:none; padding:0;}

  /* Compact letterhead, print only. */
  .sp-print-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
    border-bottom:1px solid #C7C2B4; padding-bottom:6pt; margin-bottom:10pt;
  }
  .sp-print-head img{height:34px; width:auto;}
  .sp-print-head .sp-print-contact{font-size:7.6pt; text-align:right; color:#5B6472;}
  .sp-print-head .sp-print-contact b{display:block; color:#16274A; font-size:8.4pt;}

  .eyebrow{font-size:6.6pt; margin-bottom:4pt;}
  .eyebrow::before{width:14px;}

  .sp-hero{padding:0 0 9pt; max-width:none;}
  .sp-hero h1{font-size:17pt; line-height:1.1; margin-bottom:5pt;}
  .sp-hero h1 em{color:#A9743A;}
  .sp-hero p.lead{font-size:9pt; margin-bottom:0; max-width:none; color:#5B6472;}

  .sp-problem{padding:0 0 9pt;}
  .sp-h2{font-size:11pt; margin-bottom:6pt;}
  .sp-symptoms{grid-template-columns:repeat(3, 1fr); gap:5pt; margin-bottom:6pt;}
  .sp-symptoms li{
    padding:5pt 7pt; border-radius:7pt; font-size:7.8pt; gap:5pt;
    background:#F1ECE3; border-color:#C7C2B4;
  }
  .sp-symptoms li svg{width:11px; height:11px; margin-top:1px;}
  .sp-problem-note{font-size:9.4pt; max-width:none;}

  .sp-services{padding:0 0 9pt;}
  .sp-grid{grid-template-columns:repeat(2, 1fr); gap:6pt;}
  .sp-card{
    padding:8pt 9pt; border-radius:9pt;
    background:#F1ECE3; border-color:#C7C2B4;
    box-shadow:none !important; transform:none !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  .sp-card .num{
    width:16pt; height:16pt; margin-bottom:5pt; font-size:7.4pt;
    background:#fff; border-color:#C79355;
  }
  .sp-card h3{font-size:9.4pt; margin-bottom:3pt;}
  .sp-card .price{font-size:7.4pt; margin-bottom:4pt; color:#A9743A;}
  .sp-card p{font-size:7.8pt;}
  .sp-card.sp-card-wide{grid-template-columns:1fr 1.6fr; gap:12pt; align-items:center;}
  .sp-card.sp-card-wide .sp-card-head{max-width:none;}
  .sp-card.sp-card-wide .num{margin-bottom:4pt;}

  .sp-why{padding:0 0 9pt;}
  .sp-badges{gap:5pt; margin-top:0;}
  .sp-badges li{
    padding:4pt 9pt; font-size:7.6pt; gap:5pt;
    background:#F1ECE3; border-color:#C7C2B4;
  }
  .sp-badges li svg{width:12px; height:12px;}

  .sp-contact{
    background:#F1ECE3; color:#16274A; border:1px solid #C7C2B4;
    border-radius:9pt; padding:9pt 12pt; margin-bottom:0;
    break-inside:avoid; page-break-inside:avoid;
  }
  .sp-contact h2{color:#16274A; font-size:11pt; margin-bottom:0; max-width:none;}
  .sp-contact .contact-detail{font-size:8.4pt;}
  .sp-contact .contact-detail b{color:#A9743A; font-size:6.8pt; margin-bottom:1pt;}
  .sp-contact .contact-detail a{color:#16274A;}

  /* Reveal animations must never leave printed content invisible. */
  .reveal{opacity:1 !important; transform:none !important;}
  a{text-decoration:none; color:inherit;}
}