questions/custom.css

/* Klingenberg Bygg — brand skin over the default portal stylesheet.
   Loaded after portal's main.css (site.yaml `stylesheet`), so these
   rules win. The whole recolor rides portal's own CSS custom
   properties, so chrome stays consistent; fonts and a few section
   treatments do the rest. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

@font-face {
  font-family: "FuturaNow";
  font-weight: 800;
  font-display: swap;
  src: url("/site/fonts/futura-heavy.ttf") format("truetype");
}
@font-face {
  font-family: "FuturaNow";
  font-weight: 500;
  font-display: swap;
  src: url("/site/fonts/futura-medium.ttf") format("truetype");
}

:root {
  /* Brick red — the logo tile's own colour. */
  --accent: #8a1e12;
  --accent-soft: rgba(138, 30, 18, 0.12);
  --paper: #f6f5f3;
  --ink: #201a18;
  --ink-dim: #6b615c;
  --line: #ddd6d0;
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-bg-opaque: rgba(255, 255, 255, 0.9);
  --card-shadow: rgba(60, 30, 20, 0.14);
  --hero-glow: rgba(246, 245, 243, 0.85);
  --heading: "FuturaNow", var(--sans);
  --sans: "EB Garamond", Georgia, "Times New Roman", serif;
}

/* Display headings in heavy Futura, tightened. */
h1, h2, h3 {
  font-family: var(--heading);
  letter-spacing: -0.01em;
}
.hero-copy h1 { font-size: 2.6rem; }

/* Hero stack, left-aligned: wordmark, then the tagline description,
   then the big question - the description reordered to sit between
   them. */
.hero {
  align-items: flex-start;
  text-align: left;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.55rem;
}
.hero-copy .wordmark { order: 0; margin-bottom: 0.35rem; }
.hero-copy p { order: 1; margin: 0; }
.hero-copy h1 { order: 2; margin: 0.1rem 0 0; }

/* Body reads as Garamond serif. */
body { font-family: var(--sans); font-size: 1.06rem; }

/* The section rhythm of the original: the service cards alternate a
   dark, a plain, and a brick panel down the page. Text and controls
   invert on the dark and brick ones. */
.alt-card:nth-of-type(3n+1) {
  --card-bg: #1a1613;
  --card-bg-opaque: #1a1613;
  --ink: #f3efe9;
  --ink-dim: #cfc4b8;
  --line: #3a322c;
  /* Light terracotta so links, icons and encouragements read on the
     near-black panel (brick was invisible there). */
  --accent: #e2a99b;
  color: #f3efe9;
}
.alt-card:nth-of-type(3n) {
  --card-bg: #8a1e12;
  --card-bg-opaque: #8a1e12;
  --ink: #fdf3ef;
  --ink-dim: #f4dbd4;
  --line: #b2493d;
  --accent: #fdf3ef;
  color: #fdf3ef;
}
/* On the brick panel the primary button flips to ink-on-cream. */
.alt-card:nth-of-type(3n) .alt-submit {
  background: #fdf3ef;
  color: #8a1e12;
}

/* Form controls keep their light surface inside the dark and brick
   panels, so their text must NOT inherit the panel's light ink -
   pin it dark, and darken the placeholder, so nothing is light-on-
   light. The selected pill fills with the panel accent (terracotta /
   cream) and carries dark ink, which reads on either panel. */
.alt-card:nth-of-type(3n+1) .select-option,
.alt-card:nth-of-type(3n) .select-option,
.alt-card:nth-of-type(3n+1) input,
.alt-card:nth-of-type(3n) input,
.alt-card:nth-of-type(3n+1) textarea,
.alt-card:nth-of-type(3n) textarea {
  color: #201a18;
  background: #f6f5f3;
  border-color: #cabfb6;
}
.alt-card:nth-of-type(3n+1) .select-option.selected,
.alt-card:nth-of-type(3n) .select-option.selected {
  color: #201a18;
  background: var(--accent);
  border-color: var(--accent);
}
.alt-card:nth-of-type(3n+1) ::placeholder,
.alt-card:nth-of-type(3n) ::placeholder {
  color: #8a827b;
  opacity: 1;
}

/* Wordmark: the mark carries its own red ground, so just seat it. */
.wordmark img { border-radius: 0.35rem; }

/* Partner logos, when dropped into a feature as markdown images, sit
   quiet and small rather than full-bleed. */
.feature p img { max-width: 9rem; width: auto; border: none; }