/* =============================================================
   NH-Web — Swiss Precision / Editorial design system
   Monochrome paper + ink, one committed accent (Swiss red).
   One family (Archivo, variable) carried by weight + width.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Surface */
  --paper: #ffffff;
  --bg: #f6f6f4;          /* near-neutral off-white, not warm cream */
  --bg-2: #eeeeec;
  --ink: #101010;         /* near-black */
  --ink-soft: #2c2c2c;
  --muted: #5b5b58;       /* 7:1 on paper */
  --line: #e3e3df;        /* hairline */
  --line-strong: #111111; /* editorial rule */

  /* Dark surface (inverted sections) */
  --ink-bg: #0c0c0c;
  --ink-surface: #161615;
  --ink-line: rgba(255,255,255,0.14);
  --ink-paper: #f4f4f1;
  --ink-muted: #a3a39e;

  /* Accent — Swiss red, committed */
  --accent: #da251d;
  --accent-strong: #b3180f;  /* for red text on light */
  --accent-contrast: #ffffff;

  /* Type */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.85rem, 7.2vw, 6rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.35rem);
  --fs-h3: clamp(1.18rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.06rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.8125rem;

  /* Space (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --container: min(1180px, 100% - 3rem);
  --container-wide: min(1320px, 100% - 3rem);

  --radius: 4px;        /* Swiss = crisp, minimal rounding */
  --radius-lg: 8px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo-ish */
  --dur: 0.6s;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(16,16,16,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--accent); color: #fff; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout helpers ---------- */
.container { width: var(--container); margin-inline: auto; }

main > section { padding-block: var(--section-y); }

/* Editorial kicker — one deliberate system, not scaffold noise */
.section-kicker,
.package-card__eyebrow,
.cookie-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.section-kicker::before,
.package-card__eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: var(--accent);
}

.section-intro { max-width: 56ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-intro h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.section-intro h2::after {
  content: ".";
  color: var(--accent);
}
.section-intro p { font-size: var(--fs-lead); color: var(--muted); max-width: 52ch; }

/* ---------- Buttons ---------- */
.button {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  border: 1.5px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-align: center;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
}
.button--primary:hover { --btn-bg: var(--accent-strong); }

.button--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.button--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }

.button--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.button--ghost-light:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }

.button--lg { padding: 1.05rem 1.9rem; font-size: 1.0625rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);  /* fallback */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  min-height: 72px;
}
.logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.logo__img { width: 28px; height: 28px; }
.logo__text {
  font-weight: 900; font-size: 1.25rem; letter-spacing: -0.03em;
}
.logo__text::after { content: "."; color: var(--accent); }

.header-right { display: flex; align-items: center; gap: var(--s-3); }

.language-switcher select {
  font: inherit; font-size: 0.9rem; font-weight: 500;
  padding: 0.4rem 1.8rem 0.4rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
  -webkit-appearance: none; appearance: none;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.language-switcher select:hover { border-color: var(--ink); }

.primary-nav ul {
  list-style: none; padding: 0;
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
}
.primary-nav a {
  font-weight: 500; font-size: 0.975rem; position: relative; padding: 0.3rem 0;
  transition: color 0.2s ease;
}
.primary-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.primary-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.primary-nav .nav-cta {
  background: var(--ink); color: var(--paper);
  padding: 0.55rem 1.1rem; border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.2s ease;
}
.primary-nav .nav-cta:hover { background: var(--accent); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
}
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(3.5rem, 8vw, 7rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);   /* solid so the body grid hides under the live canvas */
}
.hero__bg, .hero__overlay { display: none; }  /* editorial: typographic, no stock overlay */

/* interactive generative background */
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  /* fade out toward the bottom so the hairline + content stay crisp */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero__content { position: relative; z-index: 1; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-small); font-weight: 600; color: var(--muted);
  letter-spacing: 0.01em; margin-bottom: var(--s-3);
}
.hero__eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--accent); }

.hero__title, #hero-title {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-stretch: 115%;
  max-width: 16ch;
}

.hero__description {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 54ch;
}
.hero__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }

.hero__meta {
  list-style: none; padding: 0;
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--line-strong);
  max-width: 640px;
}
.hero__meta li {
  flex: 1 1 200px;
  padding: var(--s-3) var(--s-3) 0 0;
  font-size: 0.95rem; color: var(--muted);
}
.hero__meta strong {
  display: block; font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}

/* ---------- Services (editorial list, not identical cards) ---------- */
.services__layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.services__image { display: none; } /* drop decorative stock; let type lead */
.services__grid { display: grid; gap: 0; }
.service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease);
}
.services__grid .service-card:last-child { border-bottom: 1px solid var(--line); }
.service-card:hover { padding-left: var(--s-2); }
.service-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  color: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); grid-column: 2; }
.service-card p { grid-column: 2; color: var(--muted); max-width: 60ch; margin-top: 0.4rem; }

/* ---------- Portfolio / process bausteine ---------- */
.portfolio { background: var(--paper); border-block: 1px solid var(--line); }
.portfolio__showcase { display: none; } /* replace heavy stock hero img */
.portfolio__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.portfolio-card { background: var(--paper); }
.portfolio-card__body { padding: clamp(1.75rem, 3vw, 2.5rem); height: 100%; }
.portfolio-card__step-num {
  display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
  letter-spacing: -0.04em; color: var(--ink);
  -webkit-text-stroke: 1.5px var(--ink); -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: var(--s-3);
}
.portfolio-card:hover .portfolio-card__step-num { -webkit-text-fill-color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.portfolio-card__eyebrow {
  display: inline-block; font-size: var(--fs-small); font-weight: 600;
  color: var(--accent-strong); margin-bottom: 0.4rem;
}
.portfolio-card h3 { font-size: 1.35rem; margin-bottom: var(--s-2); }
.portfolio-card p { color: var(--muted); margin-bottom: var(--s-3); }
.portfolio-card__list { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin-bottom: var(--s-3); }
.portfolio > .container { display: grid; gap: var(--s-4); align-items: start; }
.portfolio .section-intro { margin-bottom: 0; }
.portfolio-card__list li {
  position: relative; padding-left: 1.4rem; font-size: 0.95rem; color: var(--ink-soft);
}
.portfolio-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; background: var(--accent);
}

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; gap: var(--s-3); align-items: stretch; }
.package-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.package-card--featured {
  border: 1.5px solid var(--ink);
  position: relative; z-index: 2;
}
.package-card--featured::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--accent); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (min-width: 768px) {
  .package-card--featured { transform: translateY(-14px); box-shadow: 0 24px 50px -24px rgba(16,16,16,0.45); }
  .package-card--featured .package-card__button { padding-block: 1.05rem; }
}
.package-card__badge {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; border-bottom-left-radius: var(--radius);
}
.package-card__header { border-bottom: 1px solid var(--line); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.package-card h3 { font-size: 1.5rem; }
.package-card__fit { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; }
.package-card__price {
  display: flex; align-items: baseline; gap: 0.4rem; margin-top: var(--s-3);
}
.package-card__price span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.package-card__price strong { font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 900; letter-spacing: -0.04em; }
.package-card__tax { font-size: var(--fs-small); color: var(--muted); margin-top: 0.4rem; }
.package-card__list { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-bottom: var(--s-4); }
.package-card__list li { position: relative; padding-left: 1.7rem; font-size: 0.95rem; }
.package-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 1.1rem; height: 1.1rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.package-card__button { margin-top: auto; width: 100%; }

.pricing-details {
  display: grid; gap: var(--s-4);
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}
.pricing-details h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
.pricing-details p { color: var(--muted); font-size: 0.95rem; }
.pricing-details strong { color: var(--ink); }

/* ---------- SEO content ---------- */
.seo-content { background: var(--paper); border-block: 1px solid var(--line); }
.seo-content__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.seo-content__intro h2 { font-size: var(--fs-h2); margin-block: var(--s-2) var(--s-3); }
.seo-content__intro p { color: var(--muted); font-size: var(--fs-lead); }
.seo-content__points { display: grid; gap: var(--s-4); }
.seo-content__points article { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.seo-content__points h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.seo-content__points p { color: var(--muted); font-size: 0.95rem; }

/* ---------- About ---------- */
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.about__content { max-width: 760px; }
.about__content h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.about__content p { color: var(--muted); margin-bottom: var(--s-2); max-width: 60ch; font-size: var(--fs-lead); }
.about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.stat-card { padding: var(--s-3) var(--s-2) 0 0; }
.stat-card__value { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -0.03em; color: var(--accent-strong); }
.stat-card__label { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------- Why (editorial two-col) ---------- */
.why__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.why__grid h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.why__grid > div p { color: var(--muted); font-size: var(--fs-lead); }
.why__list { list-style: none; padding: 0; display: grid; gap: 0; }
.why__list li {
  padding: var(--s-3) 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 1rem;
}
.why__list li:last-child { border-bottom: 1px solid var(--line); }
.why__list strong { color: var(--ink); font-weight: 700; }

/* ---------- Process ---------- */
.process__steps { display: grid; gap: var(--s-3); counter-reset: step; }
.process-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.process-card__step {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s-3);
  background: var(--ink); color: var(--paper);
  font-weight: 800; border-radius: 50%;
}
.process-card h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
.process-card p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Badges (dark) ---------- */
.badges { background: var(--ink-bg); color: var(--ink-paper); }
.badges__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.badges__grid h2 { font-size: var(--fs-h2); }
.badges__grid h2::after { content: "."; color: var(--accent); }
.badges__grid > div p { color: var(--ink-muted); margin-top: var(--s-2); }
.badge-list { display: flex; flex-wrap: wrap; gap: 0.7rem; align-content: start; }
.badge {
  border: 1px solid var(--ink-line); border-radius: 999px;
  padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 500;
  color: var(--ink-paper);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.badge:hover { border-color: var(--accent); color: #fff; }

/* ---------- Testimonials (dark) ---------- */
.testimonials { background: var(--ink-surface); color: var(--ink-paper); }
.testimonials .section-intro h2 { color: var(--ink-paper); }
.testimonials .section-intro p { color: var(--ink-muted); }
.testimonials__slider { position: relative; }
.testimonials__track-wrap { overflow: hidden; }
.testimonials__track { display: flex; transition: transform 0.6s var(--ease); }
.testimonial-card {
  flex: 0 0 100%; min-width: 100%;
  padding-right: clamp(0rem, 4vw, 3rem);
}
.testimonial-card__stars { color: var(--accent); font-size: 1.2rem; letter-spacing: 0.15em; margin-bottom: var(--s-3); }
.testimonial-card__quote {
  font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em; max-width: 30ch;
}
.testimonial-card__footer { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: contain; background: #fff; padding: 4px; }
.testimonial-card__name { display: block; font-weight: 700; }
.testimonial-card__link { font-size: 0.9rem; color: var(--ink-muted); }
.testimonial-card__link:hover { color: var(--accent); }
.testimonials__nav { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.testimonials__btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--ink-line); border-radius: 50%; color: var(--ink-paper);
  background: transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.testimonials__btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.testimonials__dots { display: flex; gap: 0.5rem; margin-inline: 0.5rem; }
.testimonials__dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: var(--ink-line); border: 0; transition: background 0.2s ease, transform 0.2s ease;
}
.testimonials__dot--active { background: var(--accent); transform: scale(1.25); }

/* ---------- FAQ ---------- */
.faq__list { border-top: 1px solid var(--line-strong); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-weight: 400; font-size: 1.6rem; color: var(--accent);
  transition: transform 0.3s var(--ease); line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding-bottom: var(--s-3); color: var(--muted); max-width: 70ch; }
.faq-item__answer a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CTA banner (dark, typographic) ---------- */
.cta-banner { position: relative; background: var(--ink-bg); color: var(--ink-paper); overflow: hidden; }
.cta-banner__bg { display: none; }
.cta-banner__overlay { display: none; }
.cta-banner__content {
  position: relative;
  display: grid; gap: var(--s-4); align-items: center;
}
.cta-banner h2 { font-size: clamp(1.9rem, 4.5vw, 3.25rem); letter-spacing: -0.03em; }
.cta-banner p { color: var(--ink-muted); margin-top: var(--s-2); max-width: 50ch; font-size: var(--fs-lead); }

/* ---------- Contact + form ---------- */
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__grid h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.contact__grid > div > p { color: var(--muted); font-size: var(--fs-lead); max-width: 48ch; }
.contact__intro { position: static; }
.contact__grid .contact__kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: var(--s-2); color: var(--accent-strong);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.contact__kicker::before { content: ""; width: 1.8rem; height: 2px; background: var(--accent); }
.contact__details { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: 0; }
.contact__details li { padding: var(--s-2) 0; border-top: 1px solid var(--line); color: var(--muted); }
.contact__details li:last-child { border-bottom: 1px solid var(--line); }
.contact__details strong { color: var(--ink); }
.contact__details a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

.contact-form {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; gap: var(--s-3);
}
.contact-form::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: var(--accent);
}
.contact-form__head { padding-bottom: var(--s-2); }
.contact-form__head h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.contact-form__head p { color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; }
.form-honeypot {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}
.package-picker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem;
  margin: 0; padding: 0; border: 0;
}
.package-picker legend { grid-column: 1 / -1; width: 100%; margin-bottom: 0.25rem; font-weight: 700; font-size: 0.95rem; }
.package-option { position: relative; cursor: pointer; min-width: 0; }
.package-option input { position: absolute; opacity: 0; pointer-events: none; }
.package-option span {
  display: flex; flex-direction: column; gap: 0.2rem; height: 100%; padding: 0.9rem;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.package-option strong { font-size: 0.86rem; line-height: 1.2; }
.package-option small { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.package-option:hover span { transform: translateY(-2px); border-color: var(--ink); }
.package-option input:checked + span { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--ink-paper); }
.package-option input:checked + span small { color: var(--ink-paper); }
.package-option input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.package-picker__error { grid-column: 1 / -1; }
.contact-form__row { display: grid; gap: var(--s-3); }
.form-field { display: grid; gap: 0.4rem; }
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-field input, .form-field textarea {
  font: inherit; width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: var(--accent); }
.form-error { color: var(--accent-strong); font-size: 0.85rem; min-height: 1em; }
.form-error:empty { min-height: 0; }
.contact-form .button { width: 100%; }
.contact-form__submit { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; }
.contact-form__privacy { color: var(--muted); font-size: 0.78rem; text-align: center; max-width: 58ch; margin-inline: auto; }
.form-status { font-size: 0.95rem; text-align: center; min-height: 1em; }
.form-status[data-state="success"] { color: #0b7a3b; font-weight: 600; }
.form-status[data-state="error"] { color: var(--accent-strong); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-bg); color: var(--ink-paper); padding-block: var(--s-6) var(--s-4); }
.site-footer .container { display: grid; gap: var(--s-4); }
.site-footer__brand h2 { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; }
.site-footer__brand h2::after { content: "."; color: var(--accent); }
.site-footer__brand p { color: var(--ink-muted); margin-top: var(--s-2); max-width: 40ch; }
.site-footer__links { display: grid; gap: 0.7rem; align-content: start; }
.site-footer__links a, .site-footer__button-link {
  color: var(--ink-muted); background: none; border: 0; padding: 0; text-align: left;
  font: inherit; transition: color 0.2s ease; width: fit-content;
}
.site-footer__links a:hover, .site-footer__button-link:hover { color: var(--accent); }
.site-footer__contact p { color: var(--ink-muted); }
.site-footer__contact a { color: var(--ink-paper); }
.site-footer__contact a:hover { color: var(--accent); }
.site-footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.site-footer__social a { color: var(--ink-muted); }
.site-footer__social a:hover { color: var(--accent); }
.site-footer__legal {
  width: var(--container); margin: var(--s-5) auto 0; padding-top: var(--s-3);
  border-top: 1px solid var(--ink-line); color: var(--ink-muted); font-size: var(--fs-small);
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; inset: auto 1rem 1rem; z-index: 150;
  max-width: 440px;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius-lg);
  box-shadow: 10px 10px 0 rgba(16,16,16,0.18);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__content { padding: var(--s-3); display: grid; gap: var(--s-3); }
.cookie-banner h2 { font-size: 1.2rem; }
.cookie-banner__content > div:first-child p { color: var(--muted); font-size: 0.92rem; margin-top: 0.4rem; }
.cookie-banner__settings[hidden] { display: none; }
.cookie-banner__settings { display: grid; gap: var(--s-2); }
.cookie-option { display: flex; gap: 0.7rem; align-items: start; }
.cookie-option input { margin-top: 0.25rem; accent-color: var(--accent); width: 18px; height: 18px; }
.cookie-option strong { display: block; font-size: 0.95rem; }
.cookie-option small { color: var(--muted); font-size: 0.85rem; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cookie-banner__actions .button { flex: 1 1 auto; padding: 0.7rem 1rem; font-size: 0.92rem; }
.cookie-banner__actions .button[hidden] { display: none; }

/* ---------- Legal pages ---------- */
.legal-page { padding-block: clamp(3rem, 7vw, 6rem); }
.legal-page .container { max-width: 760px; }
.legal-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--s-4); }
.legal-page h1::after { content: "."; color: var(--accent); }
.legal-page h2 { font-size: 1.4rem; margin-block: var(--s-4) var(--s-2); }
.legal-page p { color: var(--ink-soft); margin-bottom: var(--s-2); max-width: 70ch; }
.legal-page a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* Content stays visible without scroll-triggered reveals. */

/* =============================================================
   Responsive
   ============================================================= */
@media (min-width: 768px) {
  .portfolio > .container { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-details { grid-template-columns: repeat(3, 1fr); }
  .seo-content__grid { grid-template-columns: 1fr 1fr; }
  .seo-content__points { grid-template-columns: 1fr 1fr; }
  .why__grid { grid-template-columns: 0.8fr 1.2fr; }
  .process__steps { grid-template-columns: repeat(3, 1fr); }
  .badges__grid { grid-template-columns: 0.8fr 1.2fr; }
  .cta-banner__content { grid-template-columns: 1.4fr auto; }
  .cta-banner .button { justify-self: end; }
  .contact__grid { grid-template-columns: 1fr 1.1fr; }
  .contact__intro { position: sticky; top: 7rem; }
  .contact-form__row { grid-template-columns: 1fr 1fr; }
  .site-footer .container { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .hero__title, #hero-title { font-size: clamp(4rem, 7vw, 6.25rem); }
}

/* Mobile nav */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--s-2) 0;
    transform-origin: top;
    transform: translateY(-8px) scaleY(0.98); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .primary-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: var(--container); margin-inline: auto; }
  .primary-nav li { border-top: 1px solid var(--line); }
  .primary-nav li:first-child { border-top: 0; }
  .primary-nav a { display: block; padding: 0.9rem 0; }
  .primary-nav a:not(.nav-cta)::after { display: none; }
  .nav-cta { display: inline-block; margin-top: 0.5rem; text-align: center; }
}

@media (max-width: 560px) {
  :root { --container: min(1180px, 100% - 2rem); }
  .about__stats { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .cookie-banner { inset: auto 0.75rem 0.75rem; }
  .hero__meta li { flex-basis: 100%; }
  .package-picker { grid-template-columns: 1fr; }
  .package-option span { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js main > section,
  .js .hero__title, .js .hero__description, .js .hero__actions, .js .hero__meta, .js .hero__eyebrow,
  .js .section-intro > *, .js .service-card, .js .portfolio-card, .js .package-card,
  .js .seo-content__points article, .js .why__list li, .js .process-card,
  .js .badge, .js .stat-card, .js .faq-item, .js .contact-form {
    opacity: 1 !important; transform: none !important;
  }
}