/* Services (/leistungen) — Kakadu about template, feature section (C07, C11, C12a, C19, C21, C22).
   Breakpoints: tablet max-width 1279.98px, phone max-width 767.98px. Colours via base.css tokens only. */

/* sticky nav (20 + 75) must not cover anchor targets; Kakadu anchors scroll natively (smooth, no offset) */
.sv-svc, .sv-pj { scroll-margin-top: 115px; }
/* #projects: the section padding already clears the nav on desktop; tablet/phone padding (80/40) does not */
.sv-projects { scroll-margin-top: max(0px, calc(100px - var(--sec-y))); }

/* Hyphenation: only long DE/FR/LB compounds (12+ letters, 6 on each side), so a word wider than its box breaks at a
   syllable instead of mid-letter. Body copy and the card headline (DE "zusammenpassen" is wider than the card below
   1440) always; the other headings only on phone (elsewhere a greedy "Zusammen-arbeit" would split a word that fits
   on the next line). English never hyphenates: no English word is wider than its box, and a greedy "strate-gically"
   in body copy at 1280 read badly; overflow-wrap stays as the last resort. */
.sv-card :is(h2, h3, p, li span), .sv-pj-meta :is(h3, p), .sv-pj-body p, .sv-faq-head h2, .sv-faq summary > span:first-child { min-width: 0; overflow-wrap: break-word; }
html:not([lang="en"]) :is(.sv-card :is(h3, p, li span), .sv-pj-meta p, .sv-pj-body p) { hyphens: auto; hyphenate-limit-chars: 12 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
@media (max-width: 767.98px) {
  html:not([lang="en"]) :is(.sv-card h2, .sv-pj-meta h3, .sv-faq-head h2, .sv-faq summary > span:first-child) { hyphens: auto; hyphenate-limit-chars: 12 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
}

/* ---------- C07 hero: statement line, gradient phrase alone on the next line ---------- */
.sv-hero { padding-bottom: 0; }
.sv-hero .lead { max-width: 948px; }
.sv-hero .btn-row { align-items: center; } /* icon pill is 55 tall, outline pill 57 (Kakadu buttons) */
.sv-title .line { max-width: 100%; }

/* banner = C11 row 1 wide photo (1185×667), 120 below the hero text like C08 */
.sv-banner { margin-top: 120px; }
.sv-banner > img, .sv-photo > img, .sv-pj-media > img { object-position: var(--pos, 50% 50%); }

/* ---------- services: C11 checkerboard, 20 px gaps continue the banner bento ---------- */
.sv-services { padding: var(--gap) 0 var(--sec-y); }
.sv-svc + .sv-svc { margin-top: var(--gap); }
.sv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.sv-row--flip .sv-card { grid-column: 2; grid-row: 1; }
.sv-row--flip .sv-photo { grid-column: 1; grid-row: 1; }
/* C12a square (583×583); grows with long copy, the photo then stretches to the card height */
.sv-card { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.sv-photo { position: relative; min-height: 100%; }
.sv-photo > img { position: absolute; inset: 0; }
/* warm card = the --g-card-sunset token, not .value-card--warm: on --warm the bottom-left (where the text and the
   checklist sit) is solid #dd665e, ink on it measured 3.7-4.0:1 for the light 18-20 px copy (AA needs 4.5).
   Sunset keeps the sand/orange/coral look at 4.6-5.4:1. The C12a hover (vertical radius 89.351% -> 137%, x1.53,
   400 ms ease-framer, Kakadu value-card motion) is reproduced by stretching the token gradient's box vertically. */
.sv-card--sunset { background: var(--g-card-sunset) 0 0 / 100% 100% no-repeat; transition: background-size 400ms var(--ease-framer); }
@media (hover: hover) and (min-width: 1280px) { .sv-card--sunset:hover { background-size: 100% 153%; } }
/* number + name on one row; a name too wide for the card wraps beside the number (hanging), never below it */
.sv-head { display: flex; align-items: baseline; gap: 16px; }
.sv-num { flex: none; }
.sv-name { min-width: 0; text-wrap: balance; }
.sv-headline { margin-top: 20px; text-wrap: balance; } /* full card width: the 452 C12a measure splits DE "zusammenpassen" at 1440 */
.sv-text { margin-top: 20px; }
.sv-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.sv-foot .checklist { align-self: stretch; max-width: 452px; } /* C12b rows are 452 wide */

/* ---------- projects (C19 intro + C21 cards on the dark page) ---------- */
.sv-projects .intro .lead { max-width: 593px; }
.sv-projects .intro h2, .sv-faq-head h2 { text-wrap: balance; }
.sv-pj-grid { align-items: start; row-gap: 60px; } /* C22: column gap 20, row gap 60 */
.sv-pj { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sv-pj-media { aspect-ratio: 1; }
.sv-pj-text { padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.sv-pj-meta { display: flex; flex-direction: column; gap: 10px; }
.sv-pj-tag { color: var(--cream-80); }
.sv-pj-more { align-self: stretch; }
.sv-pj-more > summary { list-style: none; cursor: pointer; }
.sv-pj-more > summary::-webkit-details-marker { display: none; }
.sv-pj-more .sv-less, .sv-pj-more[open] .sv-more { display: none; }
.sv-pj-more[open] .sv-less { display: inline; }
.sv-pj-body { padding-top: 20px; max-width: 593px; }
.sv-pj-body p + p { margin-top: 1.4em; }
.sv-pj-link { margin-top: 20px; }
/* one card row shares its tracks: photos, titles and "Read more" buttons line up across the row */
@supports (grid-template-rows: subgrid) {
  .sv-pj-grid { row-gap: 0; margin-bottom: -60px; }
  .sv-pj { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; margin-bottom: 60px; }
  .sv-pj-media { margin-bottom: 20px; }
  .sv-pj-text { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; justify-items: start; }
  .sv-pj-more { margin-top: 40px; justify-self: stretch; }
}

/* ---------- FAQ: intro left, accordion right ---------- */
.sv-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.sv-faq-head .t-eyebrow { margin-bottom: 20px; }
.sv-faq-head h2 { padding-right: 20px; }
.sv-mail { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tablet ---------- */
@media (max-width: 1279.98px) {
  .sv-svc, .sv-pj { scroll-margin-top: 100px; }
  .sv-banner { margin-top: 80px; }
  /* Kakadu keeps the 2×2 rhythm on tablet (about template @1024/768, studio caps grid): the card hugs its copy,
     the photo stretches beside it */
  .sv-card { aspect-ratio: auto; }
  .sv-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .sv-faq .answer { max-width: 720px; } /* single column: keep the answer under ~90 characters a line */
}

/* ---------- phone ---------- */
@media (max-width: 767.98px) {
  /* a phrase wider than the phone column (FR "Une seule équipe.") wraps inside its own gradient block, balanced;
     it never joins the statement line and the title keeps the 40 px C07 size */
  .sv-title .grad-text { white-space: normal; text-wrap: balance; max-width: 100%; }
  /* the longest single word (LB "Leeschtungen.", 7.7 em) is wider than a 280 px column: below ~350 px the title
     scales down instead of overflowing; 40 px from 350 px up */
  .sv-title { font-size: min(40px, calc((100vw - 40px) / 7.75)); }
  .sv-banner { margin-top: 60px; }
  .sv-row { grid-template-columns: minmax(0, 1fr); }
  /* stacked: card -> its photo 10, service -> next service 40, banner -> first service 40 */
  .sv-services { padding-top: 40px; }
  .sv-svc + .sv-svc { margin-top: 40px; }
  .sv-row--flip .sv-card, .sv-row--flip .sv-photo { grid-column: auto; grid-row: auto; }
  .sv-head { gap: 10px; }
  .sv-headline { margin-top: 10px; }
  .sv-photo { min-height: 0; aspect-ratio: 1; }
  .sv-pj-grid { row-gap: 40px; }
  .sv-pj { gap: 10px; }
  .sv-pj-text { padding: 10px; gap: 30px; }
  @supports (grid-template-rows: subgrid) {
    .sv-pj-grid { row-gap: 0; margin-bottom: -40px; }
    .sv-pj { gap: 0; margin-bottom: 40px; }
    .sv-pj-media { margin-bottom: 10px; }
    .sv-pj-text { gap: 0; }
    .sv-pj-more { margin-top: 30px; }
  }
  .sv-faq-grid { gap: 40px; }
  .sv-faq-head h2 { padding-right: 0; }
}