/* NSJ Remodeling: brand style sheet
   Colours, type, spacing and shape for the whole site, in one file.
   Change a value here and it changes everywhere.
   Generated by John Kaplar (johnkaplar.ai) from the original site and the chosen design. */

/* Theme: Light and Bright. The same brand taken somewhere new.
   - brand accent #e07a5f; brand light tone #f3f0e9
   - headlines in Barlow (theirs); body in Barlow (used on the old site)
   - daylight page #fdfcfb; ink #3a2019 drawn from the accent; pale wash #fbefec for bands */

:root {
  --bg: #fdfcfb;
  --surface: #ffffff;
  --surface-2: #fbefec;
  --line: #f8dfd9;
  --line-strong: #f0bdaf;

  --text: #3a2019;
  --text-2: #806f6a;

  --accent: #e07a5f;
  --accent-deep: #bc6650;
  --accent-soft: rgba(224, 122, 95, 0.14);
  --on-accent: #ffffff;

  --dark-bg: #3a2019;
  --dark-text: #fdfcfb;
  --dark-text-2: #afa4a1;

  /* Contrast bands: sections that flip to the other side of the palette. */
  --band-bg: #fbefec;
  --band-surface: #ffffff;
  --band-text: #3a2019;
  --band-text-2: #806f6a;
  --band-line: #f6d7cf;
  --band-accent: #e07a5f;

  --font-display: 'Barlow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-eyebrow: 'Barlow', system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.03em;
  --display-transform: none;
  --display-size: 5.4rem;
  --h1-size: 3.6rem;
  --h2-size: 2.7rem;
  --h3-size: 1.4rem;
  --body-size: 1.0625rem;
  --lead-size: 1.2rem;
  --eyebrow-size: 0.9rem;
  --eyebrow-tracking: 0;
  --eyebrow-transform: none;
  --btn-size: 0.95rem;
  --btn-tracking: 0;
  --btn-transform: none;
  --btn-pad: 15px 28px;

  --radius-control: 999px;
  --radius-card: 22px;
  --radius-image: 24px;
  --gutter: 24px;
  --gap: 24px;
  --gap-lg: 64px;
  --section-pad: clamp(80px, 11vw, 148px);
  --content-max: 1180px;
  --content-max-wide: 1440px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-duration: 0ms;

  --hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
}

/* ---- Captured from the original site (reference only) ----
   platform: unknown
   fonts: Noto Sans | Barlow | Noto Sans JP
   colours: rgb(0, 0, 0) | rgb(255, 255, 255) | rgb(18, 18, 18) | rgb(224, 122, 95) | rgb(120, 136, 155) | rgb(34, 34, 34) | rgb(167, 128, 128) | rgb(240, 242, 244)
   Use the brand colour above as --accent if the designer has one. */

/* ---- NSJ Remodeling, version 2: daylight ----
   Their own second palette, the slate and pale grey of the gallery page,
   becomes the page; coral stays for the one thing to press. Headlines move
   to Marcellus, a roman face cut like the REMODELING wordmark in the logo;
   Barlow, their face, stays for everything read at length. */
:root {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #e8edf2;
  --line: #dbe2e9;
  --line-strong: #b9c4d0;
  --text: #1c2733;
  --text-2: #55647a;
  --accent: #e07a5f;
  --accent-deep: #cf6a4f;
  --accent-ink: #b24a30;
  --accent-soft: rgba(224, 122, 95, 0.14);
  --on-accent: #1c2733;
  --dark-bg: #1c2733;
  --dark-text: #f6f8fa;
  --dark-text-2: #a9b6c4;
  --band-bg: #e8edf2;
  --band-surface: #ffffff;
  --band-text: #1c2733;
  --band-text-2: #55647a;
  --band-line: #c6d0da;
  --band-accent: #b24a30;
  --font-display: 'Marcellus', 'Times New Roman', serif;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --display-size: 4.6rem;
  --h1-size: 3.3rem;
  --h2-size: 2.5rem;
  --radius-image: 14px;
  --radius-card: 14px;
  --values-bg: #1c2733;
  --values-text: #f6f8fa;
  --values-text-2: #b7c2ce;
  --value-rule: 2px solid #e07a5f;
  --resource-bg: #f6f8fa;
  --resource-text: #1c2733;
  --resource-text-2: #55647a;
  --pair-shadow: 0 24px 44px -24px rgba(28, 39, 51, 0.55);
}
.eyebrow,
.pair-after figcaption {
  color: var(--accent-ink);
}
.resource {
  border-top: 1px solid var(--line);
}
body .contact-form textarea {
  border-radius: 18px;
}