/* ==========================================================================
   GENIAL! Marketing - Design System v2
   Warm oat ground, deep pine fields, Norwegian grotesk display.
   Two languages, zero dependencies, no external requests.

   The bang: GENIAL!'s exclamation mark is abstracted into a small bar-and-dot
   rule that marks every kicker. It is the only decorative device on the site
   and it appears exactly once per section.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Ground and paper. Warm oat with real chroma, not a near-white cream. */
  --color-bg: #F4EEE2;
  --color-bg-alt: #FFFCF5;
  --color-bg-soft: #EBE2D2;
  --color-paper: #FFFCF5;

  /* Ink. Warm-biased near-black, never a neutral grey. */
  --color-ink: #15140E;
  --color-ink-soft: #3A3529;
  --color-muted: #5F5748;

  /* The accent, spent in one place: green. Pine carries the dark fields. */
  --color-pine: #0F3325;
  --color-pine-soft: #17452F;
  --color-primary: #2E6B4E;
  --color-primary-dark: #0F3325;
  --color-primary-bright: #6FBF92;
  --color-primary-tint: #E3E9DC;
  --color-primary-tint-2: #D6E1CF;

  --color-sand: #DDCFB4;
  --color-border: #DCCFB6;
  --color-border-strong: #C7B694;
  /* Interactive controls need 3:1 against their surface (WCAG 1.4.11), which
     the hairline sand does not reach. Structural rules keep the lighter tone. */
  --color-border-control: #8C8065;
  /* Lightest warm grey that still clears 4.5:1 on both grounds, for text that
     should sit back from the labels around it. */
  --color-muted-soft: #6F6656;
  --color-error: #A32A16;
  --color-error-tint: #F6E6DF;
  --color-white: #FFFCF5;

  /* Type: display is Schibsted Grotesk, drawn for a Norwegian newsroom.
     Body stays Inter, which sets better at 17px than any display face. */
  --font-display: 'Schibsted Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  --text-4xl: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);
  --text-5xl: clamp(2.875rem, 1.8rem + 4.6vw, 5rem);

  --leading-tight: 1.04;
  --leading-snug: 1.22;
  --leading-normal: 1.62;

  --tracking-display: -0.032em;
  --tracking-label: 0.14em;

  /* Space (4px base) - names kept, inline styles in generate.js depend on them */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-y: clamp(4rem, 7vw, 7rem);

  /* Shape: square-leaning. Nothing here is a pill except the language switch. */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 30px 70px rgba(15, 51, 37, 0.16);

  --container-w: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.75rem);
  --header-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  overflow-x: hidden;
  /* Norwegian compounds run long (personopplysningsloven, innholdsproduksjon).
     break-word only fires when a word genuinely cannot fit, so it costs nothing
     in English and stops the odd long noun pushing a phone screen sideways. */
  overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-pine :focus-visible,
.cta-banner :focus-visible,
.site-footer :focus-visible,
.hero__panel :focus-visible { outline-color: var(--color-primary-bright); }

/* ---- Type -------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-ink);
  text-wrap: balance;
}
h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.026em;
}
h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.014em;
}
h4 { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.01em; }
h5 { font-size: var(--text-sm); font-weight: 700; }

p { text-wrap: pretty; }

/* The bang. A 2px bar with a dot beneath it, the exclamation mark reduced to
   its two strokes. Marks every kicker, and nothing else on the site. */
.kicker {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
  padding-left: 15px;
  margin-bottom: var(--space-4);
}
.kicker::before,
.kicker::after {
  content: '';
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--color-primary);
}
.kicker::before { top: 0.28em; height: 0.72em; }
.kicker::after { top: 1.16em; height: 2px; }

.prose { max-width: 66ch; }
.prose p + p { margin-top: var(--space-5); }
.prose h3 { margin-top: var(--space-10); margin-bottom: var(--space-3); }
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-pine);
  color: var(--color-bg);
  font-weight: 600;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---- Layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-y); }
/* About, contact and privacy render the breadcrumb trail as the section's first
   child. Without this the trail sits under a full section pad and the page
   opens on ~170px of nothing. */
.section:has(> .breadcrumbs) { padding-top: var(--space-4); }
.section--soft { background: var(--color-bg-soft); }
.section--alt { background: var(--color-bg-alt); }

/* Editorial section head: hairline above, kicker under it, heading left and
   the supporting line in a second column so the two never stack into a
   centered block. */
.section-head,
.section-head--center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: var(--space-4);
  align-items: end;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin-bottom: var(--space-12);
  text-align: left;
}
.section-head .kicker { grid-column: 1 / -1; margin-bottom: var(--space-2); }
.section-head h2 { grid-column: 1; }
.section-head > p {
  grid-column: 2;
  color: var(--color-muted);
  font-size: var(--text-lg);
  max-width: 46ch;
}
/* The process block has no supporting line, so its heading would wrap early
   against an empty second column. Let it use the full width instead. */
.section-head:not(:has(> p)) h2 { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .section-head, .section-head--center { grid-template-columns: 1fr; align-items: start; }
  .section-head h2, .section-head > p { grid-column: 1; }
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn .icon-arrow { transition: transform 0.22s var(--ease); }
.btn:hover .icon-arrow { transform: translateX(3px); }

.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-pine); }

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-control);
}
.btn-outline:hover { border-color: var(--color-ink); background: rgba(21, 20, 14, 0.04); }

.btn-on-dark { background: var(--color-bg); color: var(--color-pine); }
.btn-on-dark:hover { background: var(--color-primary-bright); color: var(--color-pine); }

.btn-sm { padding: 0.55rem 0.95rem; font-size: var(--text-xs); }
.btn-lg { padding: 0.95rem 1.5rem; font-size: var(--text-base); }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  background: rgba(244, 238, 226, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.site-header > .container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--color-ink);
  flex: none;
}
.brand .mark {
  margin-right: 0.5rem;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: var(--radius-sm);
  background: var(--color-pine);
  color: var(--color-bg);
  font-size: 0.9375rem;
  line-height: 1;
  padding-top: 1px;
}
.brand .bang { color: var(--color-primary); }

.main-nav { margin-left: auto; }
.main-nav__links { display: flex; align-items: center; gap: var(--space-6); }
.main-nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.main-nav__links a:hover { color: var(--color-ink); }
.main-nav__links a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.header-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-full);
  padding: 2px;
}
.lang-switch a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--color-muted);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.lang-switch a[aria-current="true"] { background: var(--color-pine); color: var(--color-bg); }
.lang-switch a:not([aria-current="true"]):hover { color: var(--color-ink); }

.nav-toggle { display: none; padding: 0.4rem; color: var(--color-ink); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }
body.nav-open .nav-toggle .icon-menu { display: none; }

.mobile-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--container-pad) var(--space-8);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.mobile-panel a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.mobile-panel .mobile-cta {
  margin-top: var(--space-5);
  border-bottom: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
body.nav-open .mobile-panel { display: flex; }

@media (max-width: 940px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-actions { margin-left: auto; }
  .header-actions .btn-primary { display: none; }
}

/* ---- Home hero --------------------------------------------------------- */
.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--color-border);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero h1 { max-width: 15ch; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  margin-bottom: var(--space-6);
}
.hero__badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}
.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 54ch;
  margin-top: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.hero__meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.hero__meta svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; }

/* The first dark field. Four services on pine, against the oat ground. */
.hero__panel {
  background: var(--color-pine);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.hero__panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-bright);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(244, 238, 226, 0.16);
}
.hero__panel-list { list-style: none; padding: 0; }
.hero__panel-list li + li { border-top: 1px solid rgba(244, 238, 226, 0.13); }
.hero__panel-list a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  text-decoration: none;
  transition: background-color 0.16s var(--ease), padding-left 0.16s var(--ease);
  border-radius: var(--radius-sm);
}
.hero__panel-list a:hover { background: rgba(244, 238, 226, 0.07); padding-left: var(--space-4); }
.hero__panel-list .ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: rgba(111, 191, 146, 0.14);
  color: var(--color-primary-bright);
}
.hero__panel-list .ico svg { width: 18px; height: 18px; }
.hero__panel-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.012em;
}
.hero__panel-list strong + span {
  display: block;
  font-size: var(--text-sm);
  color: rgba(244, 238, 226, 0.62);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 18ch; }
}

/* ---- Inner page hero --------------------------------------------------- */
.service-hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-10);
}
.service-hero h1 { margin-top: var(--space-1); }
.service-hero .hero__lede { margin-top: var(--space-5); }
.service-hero .service-card__icon { background: var(--color-pine); color: var(--color-primary-bright); border-color: transparent; }

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.breadcrumbs a { text-decoration: none; color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs .sep { color: var(--color-muted-soft); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); }

/* ---- Service cards ----------------------------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 1080px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }
/* Subgrid, so the icon, title, summary, bullet list and link each occupy a
   shared row across all four cards. Without it a longer summary pushes that
   card's divider out of line with its siblings, which previously made summary
   length a layout constraint on the copy. It no longer is. */
.service-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.service-card:hover { border-color: var(--color-primary); }
.service-card h3 { margin-top: var(--space-5); }
.service-card > p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.service-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-tint-2);
  color: var(--color-primary-dark);
}
.service-card__icon svg { width: 21px; height: 21px; }
.service-card__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.service-card__list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--text-sm); }
.service-card__list svg { width: 15px; height: 15px; color: var(--color-primary); flex: none; margin-top: 4px; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-4);
  padding-block: 0.4rem;
  min-height: 30px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  justify-self: start;
  align-self: end;
  transition: color 0.16s var(--ease);
}
.service-card__link svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.service-card__link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.service-card__link:hover svg { transform: translateX(3px); }

/* ---- Process ----------------------------------------------------------- */
.process-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
@media (max-width: 700px) { .process-list { grid-template-columns: 1fr; } }
.process-step { border-top: 1px solid var(--color-border-strong); padding-top: var(--space-4); }
.process-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.process-step__num::before { content: '0'; }
.process-step h3 { font-size: var(--text-lg); }
.process-step p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2); }

/* ---- Accordion --------------------------------------------------------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item h3 { font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  text-align: left;
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--color-ink);
  transition: color 0.15s var(--ease);
}
.accordion-trigger:hover { color: var(--color-primary); }
.accordion-trigger .plus {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.accordion-trigger .plus::before,
.accordion-trigger .plus::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--color-primary);
  transform: translateY(-50%);
}
.accordion-trigger .plus::after { transform: translateY(-50%) rotate(90deg); }
.accordion-item[data-open="true"] .plus { transform: rotate(135deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.accordion-panel__inner { padding-bottom: var(--space-6); }
.accordion-panel__inner p { color: var(--color-muted); max-width: 68ch; }

/* ---- CTA banner: the second dark field --------------------------------- */
.cta-banner {
  background: var(--color-pine);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: var(--space-6);
}
.cta-banner h2 { color: var(--color-bg); max-width: 20ch; }
.cta-banner p {
  grid-column: 1;
  color: rgba(244, 238, 226, 0.72);
  max-width: 52ch;
}
.cta-banner__actions { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 780px) {
  .cta-banner { grid-template-columns: 1fr; }
  .cta-banner__actions { grid-column: 1; grid-row: auto; }
}

/* ---- Service detail ---------------------------------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.detail-grid > div > h2 { letter-spacing: -0.018em; }
.detail-side { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--header-h) + var(--space-6)); }
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}

.check-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 68ch; }
.check-list svg { width: 19px; height: 19px; color: var(--color-primary); flex: none; margin-top: 5px; }
.check-list strong { font-weight: 650; }
.check-list span { color: var(--color-muted); }
.check-list strong { color: var(--color-ink); }

.side-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.side-card h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.side-card ul { list-style: none; padding: 0; }
.side-card li + li { border-top: 1px solid var(--color-border); }
.side-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  font-weight: 550;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.side-card a:hover { color: var(--color-primary); }
.side-card a svg { width: 15px; height: 15px; color: var(--color-primary); transition: transform 0.2s var(--ease); }
.side-card a:hover svg { transform: translateX(3px); }

.mini-cta {
  background: var(--color-pine);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.mini-cta p { margin-bottom: var(--space-5); font-size: var(--text-sm); color: rgba(244, 238, 226, 0.78); }
.mini-cta .btn { width: 100%; background: var(--color-bg); color: var(--color-pine); }
.mini-cta .btn:hover { background: var(--color-primary-bright); }

/* ---- About ------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

.founder-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
}
@media (max-width: 900px) { .founder-card { position: static; } }
.founder-card__avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  background: var(--color-pine);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.founder-card h3 { font-size: var(--text-xl); }
.founder-card .role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: var(--space-1);
}
.founder-card__meta {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.founder-card__meta li { display: flex; align-items: center; gap: 0.6rem; min-height: 30px; font-size: var(--text-sm); color: var(--color-muted); }
/* Same 24px tap-target floor as the footer. This is the email address on the
   About page, so it is a link people actually reach for on a phone. */
.founder-card__meta a { display: inline-flex; align-items: center; min-height: 30px; }
.founder-card__meta svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; }
.founder-card__meta a { text-decoration: none; }
.founder-card__meta a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.value-card > svg { width: 22px; height: 22px; color: var(--color-primary); margin-bottom: var(--space-4); }
.value-card h4 { font-size: var(--text-base); }
.value-card p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }

/* ---- Contact ----------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.contact-info-item { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact-info-item .ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}
.contact-info-item .ico svg { width: 17px; height: 17px; }
.contact-info-item .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.contact-info-item .value { font-weight: 550; margin-top: 1px; }
.contact-info-item .value a { display: inline-flex; align-items: center; min-height: 30px; text-decoration: none; }
.contact-info-item .value a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.form-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: var(--text-base);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46, 107, 78, 0.16);
}
.field-error { font-size: var(--text-sm); color: var(--color-error); min-height: 0; }
.field-error:empty { display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-error); background: var(--color-error-tint); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: var(--text-sm); font-weight: 550; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: var(--color-error); }
.form-status[data-state="success"] { color: var(--color-primary-dark); }

.form-note { font-size: var(--text-xs); color: var(--color-muted); }
.form-note a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Footer: the third dark field -------------------------------------- */
.site-footer {
  background: var(--color-pine);
  color: rgba(244, 238, 226, 0.72);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
  font-size: var(--text-sm);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(244, 238, 226, 0.14);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand .brand { color: var(--color-bg); font-size: var(--text-lg); }
.footer-brand .brand .mark { background: var(--color-bg); color: var(--color-pine); }
.footer-brand .brand .bang { color: var(--color-primary-bright); }
.footer-brand p { margin-top: var(--space-4); max-width: 34ch; }

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-bright);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.footer-col li { display: flex; }
/* Tap targets: an inline link here measured 16px tall, under the 24px WCAG 2.2
   floor. Padding replaces most of the list gap, so the footer keeps its height
   and the rows become comfortably tappable on a phone. */
.footer-col a,
.footer-col .link-button,
.footer-col li { min-height: 30px; align-items: center; }
.footer-col a,
.footer-col .link-button { display: inline-flex; align-items: center; text-decoration: none; transition: color 0.15s var(--ease); }
/* The cookie control does nothing without JS, so it is a button, not a link.
   It has to read as one of the footer links regardless. */
.link-button {
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.footer-col .link-button:hover { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }
.footer-col a:hover { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: rgba(244, 238, 226, 0.55);
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Cookie banner ----------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 150;
  background: var(--color-paper);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 680px;
  margin-inline: auto;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
}
.cookie-banner__text { font-size: var(--text-sm); color: var(--color-ink-soft); flex: 1 1 300px; }
.cookie-banner__text a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; gap: var(--space-3); flex: none; }

/* ---- Legal prose (privacy) --------------------------------------------- */
.legal-prose { max-width: 74ch; }
.legal-prose h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.018em;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-prose p,
.legal-prose li { color: var(--color-ink-soft); margin-bottom: var(--space-4); }
.legal-prose ul { list-style: disc; padding-left: 1.4em; }
.legal-prose strong { color: var(--color-ink); font-weight: 650; }
.legal-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Policy text carries bare URLs and mail addresses. Without this they push
     the page sideways on a 390px screen. */
  overflow-wrap: anywhere;
}

/* ---- Reveal ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- 404 --------------------------------------------------------------- */
.error-page { display: grid; place-items: center; text-align: center; padding-block: var(--space-32); }
.error-page .code {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
}
.error-page h1 { margin-top: var(--space-6); }
.error-page p { color: var(--color-muted); margin-top: var(--space-4); max-width: 44ch; }
.error-page .btn { margin-top: var(--space-8); }