/* 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: Your Brand, Modernized. Built from the original site's own
   typefaces and colours, applied to the modern layout.
   - background #ffffff kept from the old site; text #1a1917 (softened from pure black)
   - accent #e07a5f from the old site
   - headline typeface Barlow kept (the old site used "Barlow")
   - body typeface Barlow kept
   - corner radius 0px from the old site's buttons */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f3;
  --line: #dadada;
  --line-strong: #aaaaa9;

  --text: #1a1917;
  --text-2: #8d8c8b;

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

  --dark-bg: #1a1917;
  --dark-text: #ffffff;
  --dark-text-2: #afafae;

  --font-display: 'Barlow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-eyebrow: 'Barlow', system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --display-transform: none;
  --display-size: 4.6rem;
  --h1-size: 3.2rem;
  --h2-size: 2.3rem;
  --h3-size: 1.3rem;
  --body-size: 1.0625rem;
  --lead-size: 1.22rem;
  --eyebrow-size: 0.76rem;
  --eyebrow-tracking: 0.12em;
  --eyebrow-transform: uppercase;
  --btn-size: 0.92rem;
  --btn-tracking: 0.01em;
  --btn-transform: none;
  --btn-pad: 14px 26px;

  --radius-control: 0px;
  --radius-card: 10px;
  --radius-image: 4px;
  --gutter: 24px;
  --gap: 24px;
  --gap-lg: 60px;
  --section-pad: clamp(72px, 10vw, 132px);
  --content-max: 1160px;
  --content-max-wide: 1400px;

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

  --hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 55%, 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 1: their own site on a better day ----
   White page, black bands, coral square buttons, Barlow bold: all theirs.
   The grey statement blocks over the bathroom photo are theirs too. */
:root {
  --display-size: 4.2rem;
  --text-2: #5d5c5a;
  --values-bg: #121212;
  --values-text: #ffffff;
  --values-text-2: rgba(255, 255, 255, 0.82);
  --values-photo-opacity: 0.55;
  --value-bg: rgba(84, 84, 84, 0.88);
  --value-rule: 0;
  --dark-bg: #000000;
  --resource-bg: #121212;
  --hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.3) 100%);
}
:root {
  --resource-bg: #f4f4f3;
  --resource-text: #1a1917;
  --resource-text-2: #5d5c5a;
  --footer-bg: #121212;
}