/* =========================================================================
   Silke Total Service — design tokens + site styles
   Vanilla port of the Claude Design handoff (ui_kits/website/).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --forest:        #1F6B3A;
  --forest-darker: #15532C;
  --hedge:         #2F8C4A;
  --hedge-hover:   #266F3A;
  --moss-deep:     #133424;
  --moss-uplift:   #2A4D38;
  --sage-light:    #D8E8DA;

  --cream:    #F5F1E8;
  --ceramic:  #EFEADE;
  --bone:     #FFFDF7;

  --bark:     #3A2E22;
  --stone:    #8A8578;
  --stone-25: rgba(138, 133, 120, 0.25);
  --stone-12: rgba(138, 133, 120, 0.12);

  --honey:        #C9A765;
  --honey-light:  #E8D9B6;
  --honey-wash:   #FAF6EC;

  --sky:      #A8C8DD;
  --sky-deep: #6FA0BD;
  --tarp:     #4A5D3B;
  --rust:     #B8542B;

  --bg:           var(--cream);
  --surface:      var(--bone);
  --surface-alt:  #EFEADE;
  --fg:           var(--bark);
  --fg-muted:     var(--stone);
  --fg-on-dark:   var(--cream);
  --border:       var(--stone-25);
  --border-strong: var(--stone);

  --accent:       var(--hedge);
  --accent-hover: var(--hedge-hover);
  --link:         var(--hedge);
  --link-hover:   var(--forest);
  --focus-ring:   var(--hedge);
  --band:         var(--moss-deep);

  --success:      var(--hedge);
  --warning:      var(--rust);

  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-eyebrow:  12px;
  --fs-tiny:     13px;
  --fs-small:    14px;
  --fs-body:     16px;
  --fs-lead:     18px;
  --fs-h6:       16px;
  --fs-h5:       18px;
  --fs-h4:       22px;
  --fs-h3:       28px;
  --fs-h2:       40px;
  --fs-h1:       56px;
  --fs-display:  80px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  --tr-eyebrow: 0.08em;
  --tr-display: -0.02em;
  --tr-h1:      -0.015em;
  --tr-body:    0;

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-none:    none;
  --shadow-card:    0 0 0.5px rgba(19, 52, 36, 0.14),
                    0 1px 2px  rgba(19, 52, 36, 0.10),
                    0 8px 24px rgba(19, 52, 36, 0.05);
  --shadow-nav:     0 1px 3px  rgba(19, 52, 36, 0.10),
                    0 2px 2px  rgba(19, 52, 36, 0.06),
                    0 0 2px    rgba(19, 52, 36, 0.07);
  --shadow-lifted:  0 2px 4px  rgba(19, 52, 36, 0.10),
                    0 12px 28px rgba(19, 52, 36, 0.10),
                    0 24px 48px rgba(19, 52, 36, 0.06);
  --shadow-float:   0 0 6px    rgba(19, 52, 36, 0.24),
                    0 8px 14px rgba(19, 52, 36, 0.14);
  --shadow-focus:   0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  --press-scale: 0.97;

  --container-max: 1200px;
  --container-narrow: 800px;
  --gutter: var(--space-6);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 600ms;
}

* { box-sizing: border-box; }
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; background: var(--cream); color: var(--bark); }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--fg); margin: 0 0 var(--space-4); letter-spacing: var(--tr-h1); line-height: var(--lh-tight); }
h5, h6 { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--fg); margin: 0 0 var(--space-3); line-height: var(--lh-snug); }
h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p, li { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); margin: 0 0 var(--space-4); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg); }
.eyebrow, .stb-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
small, .small { font-size: var(--fs-small); color: var(--fg-muted); }

a {
  color: var(--link);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
::selection { background: var(--hedge); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- Buttons ---------- */
.stb { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.stb:hover { text-decoration: none; }
.stb:active { transform: scale(var(--press-scale)); }
.stb-primary { background: var(--hedge); color: #fff; border-color: var(--hedge); }
.stb-primary:hover { background: var(--hedge-hover); border-color: var(--hedge-hover); color: #fff; }
.stb-primary-light { background: #fff; color: var(--hedge); border-color: #fff; }
.stb-primary-light:hover { background: var(--cream); color: var(--hedge); }
.stb-ghost { background: transparent; color: var(--hedge); border-color: var(--hedge); }
.stb-ghost:hover { background: var(--hedge); color: #fff; }
.stb-ghost-light { background: transparent; color: #fff; border-color: #fff; }
.stb-ghost-light:hover { background: #fff; color: var(--hedge); }
.stb-dark { background: var(--bark); color: #fff; border-color: var(--bark); }
.stb-dark:hover { background: #000; border-color: #000; color: #fff; }
.stb-icon { display: inline-flex; }

/* ---------- Header ---------- */
.sth { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); }
.sth-solid { background: rgba(245, 241, 232, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--stone-25); }
.sth-inner { max-width: var(--container-max); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 24px; }
.sth-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sth-logo-mark { display: inline-flex; width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); flex: none; }
.sth-logo-word { display: inline-flex; flex-direction: column; line-height: 1.05; color: var(--cream); }
.sth-logo-line1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.sth-logo-line2 { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }
.sth-solid .sth-logo-word { color: var(--forest); }
.sth-nav { display: flex; gap: 28px; margin-left: auto; }
.sth-nav a { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--cream); text-decoration: none; }
.sth-solid .sth-nav a { color: var(--bark); }
.sth-nav a:hover { color: var(--honey-light); }
.sth-solid .sth-nav a:hover { color: var(--forest); }
.sth-right { display: flex; align-items: center; gap: 16px; }
.sth-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--cream); text-decoration: none; }
.sth-phone img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.sth-solid .sth-phone { color: var(--bark); }
.sth-solid .sth-phone img { filter: none; }
.sth-burger { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.sth-burger img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.sth-solid .sth-burger img { filter: none; }
.sth-mobile { display: none; flex-direction: column; gap: 4px; padding: 16px 24px 24px; background: var(--cream); border-top: 1px solid var(--stone-25); }
.sth-mobile.is-open { display: flex; }
.sth-mobile a { padding: 12px 0; color: var(--bark); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--stone-12); }
.sth-mobile-cta { background: var(--hedge); color: #fff !important; padding: 14px !important; border-radius: var(--radius-pill); margin-top: 8px; text-align: center; border: none !important; }

@media (max-width: 880px) {
  .sth-nav, .sth-right { display: none; }
  .sth-burger { display: block; margin-left: auto; }
}

/* ---------- Hero ---------- */
.sthero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-color: var(--moss-deep);
  background-image:
    linear-gradient(180deg, rgba(31,58,44,0.30) 0%, rgba(31,58,44,0.55) 55%, rgba(31,58,44,0.85) 100%),
    url('assets/photos/terrasse-parasol.png');
  background-size: cover, cover;
  background-position: 50% 45%, 50% 45%;
  background-repeat: no-repeat, no-repeat;
}
.sthero-inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px 20px 64px;
  color: var(--cream);
  width: 100%;
}
.sthero-inner .stb-eyebrow { color: rgba(245, 241, 232, 0.8); }
.sthero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 800px;
  margin: 0 0 20px;
  color: var(--cream);
}
.sthero-lead {
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 0 28px;
  color: rgba(245, 241, 232, 0.92);
}
.sthero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.sthero-meta {
  display: flex;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 241, 232, 0.2);
  font-size: 13px;
  color: rgba(245, 241, 232, 0.85);
  max-width: 700px;
}
.sthero-meta strong { color: var(--cream); font-weight: 600; }

/* Tablet portrait — close to photo aspect, gentle adjustments */
@media (min-width: 600px) {
  .sthero {
    min-height: 700px;
    background-position: 50% 50%, 50% 50%;
  }
  .sthero-inner { padding: 144px 24px 80px; }
  .sthero-ctas { margin-bottom: 56px; }
  .sthero-meta { font-size: 14px; gap: 24px 32px; padding-top: 24px; }
}

/* Tablet landscape / small desktop — shift photo left so parasol cluster sits opposite the headline */
@media (min-width: 1024px) {
  .sthero {
    min-height: 760px;
    background-position: 35% 55%, 35% 55%;
  }
  .sthero-inner { padding: 160px 24px 96px; }
  .sthero-title { margin-bottom: 24px; }
  .sthero-lead { margin-bottom: 32px; }
  .sthero-ctas { margin-bottom: 64px; }
}

/* Wide desktop — push photo further left to fill negative space on the right */
@media (min-width: 1440px) {
  .sthero { background-position: 30% 50%, 30% 50%; }
}

/* Short landscape (e.g. iPhone landscape, split-screen) — keep hero from overflowing viewport */
@media (max-height: 560px) and (orientation: landscape) {
  .sthero { min-height: 520px; }
  .sthero-inner { padding: 100px 24px 48px; }
  .sthero-ctas { margin-bottom: 28px; }
  .sthero-meta { padding-top: 16px; }
}

/* ---------- Service grid ---------- */
.stsg { padding: 96px 0; background: var(--cream); }
.stsg-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.stsg-head { max-width: 640px; margin: 0 0 48px; }
.stsg-head h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -0.015em; color: var(--forest); margin: 0 0 16px; line-height: 1.05; }
.stsg-head .lead { font-size: 18px; line-height: 1.5; color: var(--bark); }
.stsg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .stsg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stsg-grid { grid-template-columns: 1fr; } }
.stsg-card { display: block; background: var(--bone); border: none; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); text-decoration: none; color: var(--bark); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.stsg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); color: var(--bark); }
.stsg-icon { width: 32px; height: 32px; margin-bottom: 16px; filter: brightness(0) saturate(100%) invert(31%) sepia(15%) saturate(1234%) hue-rotate(85deg) brightness(95%) contrast(86%); }
.stsg-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--forest); margin: 0 0 8px; letter-spacing: -0.01em; }
.stsg-card p { font-size: 15px; line-height: 1.5; color: var(--bark); margin: 0 0 16px; }
.stsg-more { font-size: 14px; font-weight: 600; color: var(--hedge); letter-spacing: -0.01em; }

/* ---------- Before/After strip ---------- */
.stba { padding: 96px 0; background: var(--ceramic); }
.stba-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.stba-head { margin-bottom: 40px; max-width: 600px; }
.stba-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; color: var(--forest); margin: 0; letter-spacing: -0.015em; line-height: 1.1; }

.stcs {
  position: relative; width: 100%; aspect-ratio: 16/10;
  border-radius: var(--radius-lg); overflow: hidden;
  user-select: none; touch-action: none; cursor: ew-resize;
  margin: 16px 0 48px; background: var(--bark);
  box-shadow: 0 30px 60px -20px rgba(31,58,44,0.35), 0 8px 16px rgba(0,0,0,0.08);
}
.stcs-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.stcs-before { will-change: clip-path; clip-path: inset(0 50% 0 0); }
.stcs-tag { position: absolute; top: 16px; background: rgba(245,241,232,0.95); color: var(--bark); font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(4px); z-index: 3; }
.stcs-tag-before { left: 16px; }
.stcs-tag-after { right: 16px; background: var(--forest); color: var(--cream); }
.stcs-handle { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); pointer-events: none; will-change: left; z-index: 4; }
.stcs-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--cream); box-shadow: 0 0 12px rgba(0,0,0,0.4); }
.stcs-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--cream); color: var(--forest); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 4px rgba(245,241,232,0.25); pointer-events: none; }
.stcs-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(31,58,44,0.92); color: var(--cream); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 999px; pointer-events: none; z-index: 5; transition: opacity 300ms var(--ease-out); }

.stba-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 880px) { .stba-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stba-strip { grid-template-columns: repeat(2, 1fr); } }
.stba-card { margin: 0; }
.stba-card img { aspect-ratio: 3/4; object-fit: cover; width: 100%; border-radius: var(--radius-md); margin-bottom: 8px; }
.stba-card figcaption { font-size: 12px; color: var(--stone); }

/* ---------- Area ---------- */
.stas { padding: 96px 0; background: var(--cream); }
.stas-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 880px) { .stas-inner { grid-template-columns: 1fr; gap: 32px; } }
.stas-text h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 600; color: var(--forest); margin: 0 0 16px; letter-spacing: -0.015em; line-height: 1.1; }
.stas-text p { font-size: 17px; line-height: 1.55; margin: 0 0 24px; max-width: 480px; }
.stas-towns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.stas-chip { font-size: 13px; padding: 6px 12px; background: var(--bone); border: 1px solid var(--stone-25); border-radius: var(--radius-pill); color: var(--bark); }
.stas-map { aspect-ratio: 1; background: var(--surface-alt); border-radius: var(--radius-lg); border: 1px solid var(--stone-25); overflow: hidden; }

/* ---------- Reviews ---------- */
.strv { padding: 96px 0; background: var(--bone); }
.strv-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.strv-head { margin-bottom: 40px; max-width: 640px; }
.strv-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; color: var(--forest); margin: 0; letter-spacing: -0.015em; line-height: 1.1; }
.strv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .strv-grid { grid-template-columns: 1fr; } }
.strv-card { position: relative; background: var(--cream); border: none; border-radius: var(--radius-lg); padding: 28px; margin: 0; box-shadow: var(--shadow-card); }
.strv-quote { width: 24px; height: 24px; opacity: 0.35; margin-bottom: 12px; }
.strv-card blockquote { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--bark); margin: 0 0 20px; }
.strv-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.strv-card figcaption strong { font-size: 14px; font-weight: 600; color: var(--forest); }
.strv-card figcaption span { font-size: 13px; color: var(--stone); }
.strv-tag { position: absolute; top: 16px; right: 16px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); background: var(--surface-alt); padding: 3px 8px; border-radius: var(--radius-sm); }

/* ---------- CTA band ---------- */
.stcta { padding: 112px 0; background: var(--moss-deep); position: relative; overflow: hidden; }
.stcta-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.stcta-inner h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 600; color: #fff; margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.05; }
.stcta-inner p { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0 0 32px; }
.stcta-actions { display: inline-flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center; }
.stcta-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.stcta-phone img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.stcta-phone:hover { color: var(--honey-light); }

/* ---------- Footer ---------- */
.stft { background: var(--moss-deep); color: var(--cream); padding: 80px 0 0; }
.stft-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px 64px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; }
@media (max-width: 880px) { .stft-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stft-inner { grid-template-columns: 1fr; } }
.stft-brand p { font-size: 15px; line-height: 1.5; color: rgba(245,241,232,0.7); margin: 16px 0 0; max-width: 240px; }
.stft-col h4 { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,241,232,0.5); margin: 0 0 16px; }
.stft-col a, .stft-col span { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: rgba(245,241,232,0.85); text-decoration: none; font-size: 14px; }
.stft-col a:hover { color: var(--honey-light); }
.stft-col img { width: 14px; height: 14px; filter: brightness(0) invert(1); opacity: 0.7; }
.stft-meta { color: rgba(245,241,232,0.55) !important; font-size: 13px !important; }
.stft-base { border-top: 1px solid rgba(245,241,232,0.1); padding: 24px; max-width: var(--container-max); margin: 0 auto; display: flex; justify-content: space-between; font-size: 13px; color: rgba(245,241,232,0.5); }

/* ---------- Generic page hero — moss-deep band ---------- */
.page-head { background: var(--moss-deep); color: var(--cream); padding: 160px 0 64px; }
.page-head-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.page-head h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 600; color: var(--cream); margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
.page-head .stb-eyebrow { color: rgba(245,241,232,0.7); }
.page-head p { font-size: 19px; line-height: 1.5; color: rgba(245,241,232,0.85); max-width: 600px; margin: 16px 0 0; }

/* ---------- Article (service detail / long-form copy) ---------- */
.starticle { padding: 64px 0 96px; background: var(--cream); }
.starticle-inner { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.starticle h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 600; color: var(--forest); margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.05; }
.starticle .lead { font-size: 20px; color: var(--bark); line-height: 1.5; margin: 0 0 32px; }
.starticle .hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); margin: 16px 0 48px; box-shadow: var(--shadow-card); }
.starticle h2 { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--forest); margin: 40px 0 16px; }
.starticle h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--forest); margin: 24px 0 8px; }
.starticle p, .starticle li { font-size: 17px; line-height: 1.6; color: var(--bark); }
.starticle ul { padding-left: 20px; }
.starticle .check-list { list-style: none; padding: 0; }
.starticle .check-list li { padding: 8px 0 8px 32px; background: url('assets/icon-check.svg') no-repeat 0 12px / 20px 20px; }
.starticle aside { background: var(--bone); border: 1px solid var(--stone-25); border-radius: var(--radius-lg); padding: 24px; margin: 32px 0; }
.starticle aside h4 { margin: 0 0 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.starticle aside p { font-size: 15px; line-height: 1.55; }

/* ---------- Om os layout ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 16px 0 32px; }
@media (max-width: 700px) { .team { grid-template-columns: 1fr; } }
.team img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); width: 100%; box-shadow: var(--shadow-card); }
.team h2 { margin-top: 0; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 32px; }
@media (max-width: 700px) { .values { grid-template-columns: 1fr; } }
.value { padding: 24px; background: var(--bone); border: 1px solid var(--stone-25); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.value h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--forest); margin: 0 0 8px; }
.value p { font-size: 14px; color: var(--bark); margin: 0; line-height: 1.5; }

/* ---------- Område layout ---------- */
.map-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; padding: 96px 0; align-items: start; max-width: var(--container-max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 880px) { .map-wrap { grid-template-columns: 1fr; padding: 64px 24px; } }
.map-wrap h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; color: var(--forest); margin: 0 0 16px; line-height: 1.1; letter-spacing: -0.015em; }
.map-list { columns: 2; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.map-list li { padding: 10px 0; font-size: 16px; border-bottom: 1px solid var(--stone-12); color: var(--bark); }
.big-map { aspect-ratio: 4/3; background: var(--surface-alt); border-radius: var(--radius-lg); border: 1px solid var(--stone-25); overflow: hidden; box-shadow: var(--shadow-card); }
.map-note { margin-top: 24px; font-size: 14px; color: var(--stone); }

/* ---------- Kontakt layout ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; padding: 96px 24px; max-width: var(--container-max); margin: 0 auto; }
@media (max-width: 880px) { .kontakt-grid { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px; } }
.kontakt-info h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 36px); font-weight: 600; color: var(--forest); margin: 0 0 16px; letter-spacing: -0.015em; line-height: 1.1; }
.kontakt-info p { font-size: 16px; line-height: 1.55; margin-bottom: 20px; }
.kontakt-info .kontakt-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--bark); text-decoration: none; font-size: 16px; }
.kontakt-info .kontakt-line:hover { color: var(--hedge); }
.kontakt-info .kontakt-line img { width: 18px; height: 18px; }

/* ---------- Quote form (vanilla port) ---------- */
.stqf { background: var(--bone); border: none; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); }
.stqf h3 { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--forest); margin: 0 0 8px; letter-spacing: -0.015em; }
.stqf > p { font-size: 15px; color: var(--stone); margin: 0 0 20px; }
.stqf label { display: block; font-size: 13px; font-weight: 500; color: var(--bark); margin-bottom: 14px; }
.stqf label span { font-weight: 400; color: var(--stone); }
.stqf input, .stqf textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--stone-25); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; color: var(--bark); }
.stqf input:focus, .stqf textarea:focus { outline: 2px solid var(--hedge); outline-offset: 1px; border-color: var(--hedge); background: var(--sage-light); }
.stqf textarea { resize: vertical; min-height: 110px; }
.stqf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .stqf-row { grid-template-columns: 1fr; } }
.stqf-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.stqf-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--cream); border: 1.5px solid var(--stone-25); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 14px; color: var(--bark); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); user-select: none; }
.stqf-pill img { width: 16px; height: 16px; }
.stqf-pill:hover { border-color: var(--hedge); }
.stqf-pill.is-on { background: var(--hedge); color: #fff; border-color: var(--hedge); }
.stqf-pill.is-on img { filter: brightness(0) invert(1); }
.stqf-phone-wrap { display: flex; gap: 8px; margin-top: 6px; }
.stqf-phone-wrap input { margin-top: 0; flex: 1; min-width: 0; }
.stqf-country { flex-shrink: 0; width: 88px; padding: 12px 8px; background: var(--cream); border: 1px solid var(--stone-25); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; color: var(--bark); cursor: pointer; }
.stqf-country:focus { outline: 2px solid var(--hedge); outline-offset: 1px; border-color: var(--hedge); }
.stqf-file-wrap { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.stqf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.stqf-file-btn { display: inline-flex; align-items: center; padding: 10px 16px; background: var(--cream); border: 1.5px solid var(--stone-25); border-radius: var(--radius-sm); font-size: 14px; color: var(--bark); cursor: pointer; white-space: nowrap; font-weight: 500; }
.stqf-file-btn:hover { border-color: var(--hedge); }
.stqf-file-hint { font-size: 13px; color: var(--stone); }
.stqf-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stqf-preview { position: relative; }
.stqf-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--stone-25); display: block; }
.stqf-preview-rm { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--bark); color: #fff; border: none; border-radius: 50%; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; padding: 0; }
.stqf-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.stqf-help { font-size: 13px; color: var(--stone); margin: 0 0 16px; }
.stqf-done { text-align: center; padding: 24px 16px; }
.stqf-done h3 { margin-bottom: 8px; }

@media (min-width: 768px) {
  :root {
    --fs-h1: 72px;
    --fs-h2: 48px;
    --fs-h3: 32px;
    --fs-display: 112px;
  }
}

/* =========================================================================
   Scroll-driven video (service page hero)
   Outer track defines scroll distance; inner is sticky and pinned.
   ========================================================================= */
.scrollvid { position: relative; width: 100%; height: 250vh; background: var(--moss-deep); }
.scrollvid-pin { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
.scrollvid-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.scrollvid-overlay { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; justify-content: center; pointer-events: none; }
.scrollvid-eyebrow {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); padding: 10px 18px; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.18);
  animation: scrollvid-pulse 2.4s ease-in-out infinite;
}
@keyframes scrollvid-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(4px); opacity: 1; }
}
.scrollvid-loader {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 32px; transition: opacity 360ms ease;
}
.scrollvid-loader.is-hidden { opacity: 0; pointer-events: none; }
.scrollvid-loader-bar { width: 180px; height: 2px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; }
.scrollvid-loader-fill { width: 0%; height: 100%; background: rgba(255,255,255,0.85); transition: width 220ms ease; }

/* Mobile fallback: shorter track, autoplay loop instead of scrub */
.scrollvid.is-fallback { height: 60vh; }
.scrollvid.is-fallback .scrollvid-pin { position: relative; height: 60vh; }
.scrollvid.is-fallback .scrollvid-overlay { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scrollvid { height: 60vh; }
  .scrollvid .scrollvid-pin { position: relative; height: 60vh; }
  .scrollvid .scrollvid-overlay { display: none; }
}

/* ---------- Hedge clipper ---------- */
.stclip { position: relative; }
.stclip-stage {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background: #1a3a22;
}
.stclip-clean {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  transition: transform 0.08s linear;
}
.stclip-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: none;
}
.stclip-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(19, 52, 36, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  color: var(--cream);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 300ms var(--ease-out);
}
.stclip-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 200ms var(--ease-out);
  will-change: transform;
}
.stclip-cursor.is-visible { opacity: 1; }
@media (pointer: coarse) {
  .stclip-canvas { cursor: crosshair; }
  .stclip-cursor { display: none; }
}
@media (max-width: 600px) {
  .stclip-stage { height: 320px; }
}

/* -------- Scroll reveal --------
   JS adds .sr-reveal / .sr-stagger on init, then .sr-visible on intersect.
   @media prefers-reduced-motion: JS skips adding classes entirely. */
.sr-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sr-reveal.sr-visible {
  opacity: 1;
  transform: none;
}
.sr-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sr-stagger.sr-visible > * { opacity: 1; transform: none; }
.sr-stagger.sr-visible > *:nth-child(1) { transition-delay:   0ms; }
.sr-stagger.sr-visible > *:nth-child(2) { transition-delay:  90ms; }
.sr-stagger.sr-visible > *:nth-child(3) { transition-delay: 180ms; }
.sr-stagger.sr-visible > *:nth-child(4) { transition-delay: 270ms; }
.sr-stagger.sr-visible > *:nth-child(5) { transition-delay: 360ms; }
.sr-stagger.sr-visible > *:nth-child(6) { transition-delay: 450ms; }