/* Good To Go Building Services — the public site.
   The same tokens as By the Square and the Roof Record, so a customer moving from
   the home page to their estimate never feels they changed companies. */

/* Black and gold, like the logo (owner, 7 Oct 2026). One palette on every screen:
   near-black grounds, warm off-white text, the logo's gold for anything you can
   press or follow. Gold on black passes AA for text at these values. Print stays
   white (bottom of the file) so an estimate prints like paper. */
:root {
  --paper:   #0B0C0E;      /* page */
  --card:    #15171A;      /* raised panels */
  --sunk:    #0F1113;      /* wells */
  --ink:     #F1EEE7;      /* warm off-white */
  --dim:     #ADA79C;
  --faint:   #77726A;
  --line:    #2C2922;      /* warm, so borders read as part of the gold family */
  --gold-line: #5A4A2E;    /* a gold rule where a hairline should be seen */
  --accent:  #C9A15E;      /* the logo's gold, lifted to read on black */
  --accent-ink: #14100A;   /* text on a gold button */
  --brand-gold: #B8914F;   /* the mark itself */
  --good:    #6BC79A;
  --warn:    #E0B04A;
  --bad:     #FF8A76;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
       font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 64rem; margin: 0 auto; padding-inline: 16px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Header ---------------------------------------------------------------- */
.site-head { border-bottom: 2px solid var(--brand-gold); background: #000; }
.site-head .wrap { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding-block: 12px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.gtg-mark { display: block; height: auto; color: var(--ink); }
.gtg-mark .gold { fill: var(--brand-gold); }
.lockup .w { font-family: "Russo One", var(--display); font-size: 1.15rem; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.lockup .s { font-family: Montserrat, var(--body); font-weight: 700; font-size: .52rem; letter-spacing: .28em; margin-top: 4px; white-space: nowrap; color: var(--dim); }
/* Nav wraps; it never scrolls behind a hidden scrollbar. */
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: auto; }
.site-nav a { font: 600 .9rem/1 var(--body); color: var(--dim); text-decoration: none; padding: 9px 10px; border-radius: 4px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background: var(--sunk); }
.site-nav a.cta { background: var(--accent); color: var(--accent-ink); }

/* --- Type ------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.005em; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }
.eyebrow { font: 700 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
/* A short gold rule under a section heading, like the line in the logo's roof. */
section h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--brand-gold); margin-top: 10px; border-radius: 2px; }
.tagline { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.35rem; margin: 0 0 14px; }
.lede { font-size: 1.1rem; color: var(--dim); max-width: 40rem; }
p { max-width: 42rem; }

/* --- Sections -------------------------------------------------------------- */
section { padding-block: 44px; }
section + section { border-top: 1px solid var(--line); }
.hero { padding-block: 56px 44px;
        background: radial-gradient(ellipse 70% 90% at 85% 0%, rgba(184, 145, 79, .16), transparent 60%), var(--paper); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold-line); border-radius: 6px; padding: 16px; }
a.card:hover, .card:focus-within { border-color: var(--gold-line); }
.card b.k { font-family: Montserrat, var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .18em; }
.card p { font-size: .95rem; color: var(--dim); margin: 6px 0 0; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: 10px; }
.steps li::before { content: counter(step); font: 700 1.4rem/1 var(--display); color: var(--accent); }

/* --- Buttons and forms ----------------------------------------------------- */
.btn { display: inline-block; font: 700 1rem/1 var(--body); padding: 14px 18px; border-radius: 6px; border: 1px solid var(--accent);
       background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer; }
.btn.quiet { background: transparent; color: var(--accent); }
.btn:disabled { opacity: .55; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
form.stack { display: grid; gap: 14px; max-width: 36rem; }
label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
label small { font-weight: 400; color: var(--dim); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px; width: 100%; }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 400; font-size: .9rem; color: var(--dim); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }  /* spam trap */
.note { font-size: .9rem; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--sunk); }
.note.good { border-color: var(--good); }
.note.bad { border-color: var(--bad); }

/* --- Footer ---------------------------------------------------------------- */
.site-foot { border-top: 2px solid var(--brand-gold); background: #000; padding-block: 28px 40px; font-size: .88rem; color: var(--dim); }
.site-foot .wrap { display: grid; gap: 10px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-foot a { color: var(--dim); }
.legal { font-size: .82rem; color: var(--dim); line-height: 1.5; max-width: 46rem; }

/* --- Print: paper, not a screen --------------------------------------------- */
@media print {
  :root { --paper: #fff; --card: #fff; --sunk: #f3f3f3; --ink: #000; --dim: #444; --faint: #777; --line: #ccc; --accent: #6E5329; color-scheme: light; }
  .site-head, .site-foot { background: #fff; }
  .hero { background: #fff; }
}

/* The Team sign-in sits in the header, small and gold-outlined, so the team can
   find it on a phone without it competing with "Request an inspection". */
.site-nav a.team { border: 1px solid var(--gold-line); color: var(--accent); }
.site-nav a.team:hover { border-color: var(--accent); background: transparent; color: var(--accent); }