/* Copyright (c) 2026 Timothy Parks. All rights reserved. Proprietary and confidential.
   tprci.com stylesheet -- v3, "Authority with heat", widened.

   WHY v3. The owner looked at v2 on a wide monitor and asked: "the theme is very narrow why?
   mobile responsiveness? speed to load?" NEITHER. The 66ch measure is a READING rule (45-75
   characters per line) and it was not the mistake. THE MISTAKE WAS LEAVING THE REST OF THE SCREEN
   EMPTY. On a lead engine, the space beside the reading column is the most valuable unused surface
   on the page, and v2 spent it on nothing.

   So v3 keeps the measure and fills the page around it:
     - a full-bleed HERO band, so the first screen states the claim, proves the licences and offers
       the two actions instead of opening on a headline floating in white;
     - a STICKY CONVERSION RAIL beside the copy on desktop, carrying the ask at every scroll
       position;
     - the reading column itself untouched at ~68ch, because widening body copy to fill a monitor
       is how you make a page harder to read, not easier.

   NNCPP DEVICES MADE VISUAL (the owner asked for more, and these are structure, not new claims):
     1. CREDENTIAL CHIPS in the hero. Three licences is the differentiator and it was previously
        13px grey text nobody has ever read. Proof belongs above the fold, not in a footnote.
     2. NUMBERED SECTIONS. A counter on every H2 turns a 3,000-word page into a visible sequence.
        Progress is legible, so the reader keeps going -- and a numbered list of answers reads as a
        method rather than an essay.
     3. THE RAIL SPEAKS IN THE OWNER'S VOICE. "Not a call centre. Not a salesman." is positioning
        against the storm-chaser competition, which is the actual differentiator in this market.
     4. ONE WARM ACTION COLOUR on a cold page, so the eye finds the ask without being told.
     5. URGENCY RESERVED. Alarm red appears on exactly one page. If everything is urgent, nothing is.

   Nothing here invents a claim. The hero subline reuses metaDescription -- copy already published
   on that page -- and licences and phone come from the same constants the schema and footer use.

   No webfonts: zero external requests, nothing to block, nothing to leak, survives the CSP.

   EMOTION-COLOUR (NNCPP) keys off ANY ancestor carrying data-kind, so a fragment can be previewed
   in isolation without the accent silently falling back to default:
     money / trade  navy + amber   |  conversion  navy + green (CONFIRM, not START OVER)
     legal          navy, muted    |  emergency   alarm red -- water coming in NOW, and only there */

:root {
  --paper: #faf8f5;
  --surface: #ffffff;
  --wash: #f2ece4;
  --line: #e4dbd0;
  --line-strong: #cdbfae;

  --ink: #1a1614;
  --ink-soft: #5c5349;

  --navy: #10243a;
  --navy-deep: #0a1826;
  --navy-soft: #1d3f61;

  --amber: #b45309;
  --amber-dark: #8f3f06;
  --amber-lift: #ffd9a8;
  --green: #15693f;
  --green-dark: #0f5230;
  --alarm: #a4241b;
  --alarm-dark: #7d1a13;
  --focus: #2563eb;

  --action: var(--amber);
  --action-dark: var(--amber-dark);

  --measure: 68ch;
  --shell: 1180px;
  --rail-w: 318px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(16,36,58,.06), 0 6px 18px -6px rgba(16,36,58,.14);
  --shadow-lg: 0 2px 4px rgba(16,36,58,.07), 0 18px 44px -12px rgba(16,36,58,.22);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-kind="conversion"] { --action: var(--green); --action-dark: var(--green-dark); }
[data-kind="legal"] { --action: var(--navy-soft); --action-dark: var(--navy); }
[data-kind="money"][data-slug="emergency-roof-repair"] { --action: var(--alarm); --action-dark: var(--alarm-dark); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17.5px/1.7 var(--sans); font-synthesis-weight: none; -webkit-font-smoothing: antialiased;
}
::selection { background: #ffe0b8; color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-deep); color: #fff; padding: 13px 20px;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- header ---------- */
header { background: var(--navy-deep); padding: 15px 22px; }
header nav {
  max-width: var(--shell); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
}
.brand {
  color: #fff; text-decoration: none; margin-right: auto;
  font-family: var(--serif); font-size: 1.14rem; font-weight: 700; letter-spacing: .2px;
}
.brand:hover { color: var(--amber-lift); }
header ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; }
header a { color: #b9cadb; text-decoration: none; font-size: .85rem; letter-spacing: .2px; }
header a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- HERO -- the first screen does a job now ---------- */
.hero {
  background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 62%);
  border-bottom: 4px solid var(--action);
  padding: 60px 22px 52px;
}
/* TWO COLUMNS on wide screens. A headline held to a readable measure leaves the right third of the
   first screen empty, which is what the owner circled. The proof column fills it with the licences
   -- the one thing that separates this business from a storm-chaser -- instead of whitespace. */
.hero-in {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .8fr);
  gap: 46px; align-items: center;
}
.hero h1 {
  font-family: var(--serif); color: #fff; text-wrap: balance;
  font-size: clamp(2.1rem, 4.6vw, 3.15rem); line-height: 1.06; letter-spacing: -.6px;
  font-weight: 700; margin: 0 0 .42em;
}
.hero-sub {
  color: #cfdcea; font-size: clamp(1.06rem, 2vw, 1.22rem); line-height: 1.6;
  margin: 0 0 1.6em; max-width: 54ch;
}
.hero-proof {
  border: 1px solid rgba(255,255,255,.2); border-left: 4px solid var(--action);
  border-radius: var(--radius-lg); background: rgba(255,255,255,.055);
  padding: 20px 20px 18px;
}
.hp-k {
  margin: 0 0 .85em; font-size: .72rem; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--amber-lift);
}
.hp-note {
  margin: 1.1em 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .84rem; line-height: 1.55; color: #cfdcea;
}
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li {
  margin: 0; padding: 7px 14px 7px 30px; position: relative;
  border: 1px solid rgba(255,255,255,.26); border-radius: 100px;
  background: rgba(255,255,255,.05);
  color: #e3ecf5; font-size: .82rem; font-weight: 600; letter-spacing: .2px;
}
/* a tick, drawn in CSS -- no icon font, no image request */
.chips li::before {
  content: ""; position: absolute; left: 13px; top: 50%;
  width: 5px; height: 9px; margin-top: -6px;
  border: solid var(--amber-lift); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.5); box-shadow: none;
}
.cta-ghost:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }

/* ---------- SHELL: reading column + sticky conversion rail ---------- */
.shell {
  max-width: var(--shell); margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: 54px; align-items: start;
}
main { max-width: var(--measure); padding: 46px 0 8px; min-width: 0; }

.rail { position: sticky; top: 22px; padding-top: 46px; }
.rail-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 5px solid var(--action); border-radius: var(--radius-lg);
  padding: 22px 20px 20px; box-shadow: var(--shadow-lg);
}
.rail-k {
  margin: 0 0 .35em; font-size: .74rem; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--action-dark);
}
.rail-h {
  margin: 0 0 1.1em; font-family: var(--serif); font-size: 1.16rem; line-height: 1.32;
  color: var(--navy-deep); font-weight: 700;
}
.rail-cta { width: 100%; margin-bottom: 9px; font-size: .98rem; padding: 13px 18px; min-height: 48px; }
.rail-card .cta-ghost { color: var(--navy-deep); border-color: var(--line-strong); }
.rail-card .cta-ghost:hover { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.rail-note {
  margin: 16px 0 .5em; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--ink-soft);
}
.rail-lic { list-style: none; margin: 0; padding: 0; }
.rail-lic li {
  margin: 0; padding: 4px 0 4px 17px; position: relative;
  font-size: .84rem; color: var(--navy-deep); font-weight: 650;
}
.rail-lic li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 7px; height: 2px; background: var(--action);
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); color: var(--navy-deep); text-wrap: balance; }

/* NUMBERED SECTIONS -- a long page becomes a visible sequence */
main { counter-reset: sec; }
main > section > h2 {
  counter-increment: sec;
  font-size: clamp(1.42rem, 3.2vw, 1.78rem); line-height: 1.24; font-weight: 700;
  letter-spacing: -.2px; margin: 2.5em 0 .55em; padding-top: .75em;
  border-top: 1px solid var(--line);
}
main > section > h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block; margin-bottom: .35em;
  font-family: var(--sans); font-size: .76rem; font-weight: 800; letter-spacing: 1.6px;
  color: var(--action);
}
main > section:first-of-type > h2 { margin-top: 1.1em; }

h3 { font-size: 1.15rem; font-weight: 700; color: var(--navy-soft); margin: 1.7em 0 .4em; }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; color: var(--navy-deep); }
a { color: #9a4408; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-deep); }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin: .45em 0; padding-left: .15em; }
li::marker { color: var(--action); font-weight: 700; }
section { margin-bottom: .5em; }
:target { scroll-margin-top: 20px; }

blockquote {
  margin: 1.7em 0; padding: 18px 22px; background: var(--wash);
  border-left: 4px solid var(--action); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink); font-size: 1.05rem;
}
blockquote p:last-child { margin-bottom: 0; }

/* FAQ as cards -- scannable, and each one is an objection handled */
.faq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px 19px; margin: 12px 0;
}
.faq h3 { margin: 0 0 .4em; color: var(--navy-deep); font-size: 1.08rem; }
.faq p:last-child { margin-bottom: 0; }

/* ---------- shared blocks ---------- */
.trustband, .ctaband, .consent, .crosslinks, .leadform { width: 100%; }

.trustband {
  padding: 17px 20px; background: var(--surface);
  border: 1px solid var(--line); border-left: 5px solid var(--navy);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.trustband p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--ink-soft); }
.trustband strong { color: var(--navy-deep); }

.ctaband { display: flex; flex-wrap: wrap; gap: 12px; padding: 30px 0 8px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; min-height: 52px; border-radius: var(--radius);
  background: var(--action); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 1.03rem; letter-spacing: .1px;
  border: 1px solid var(--action-dark); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cta:hover { background: var(--action-dark); color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta-sms { background: var(--navy); border-color: var(--navy-deep); }
.cta-sms:hover { background: var(--navy-deep); }
.cta-2 { background: transparent; color: var(--navy-deep); border: 1.5px solid var(--line-strong); box-shadow: none; }
.cta-2:hover { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } .cta:hover { transform: none; } }

/* ---------- lead form: the ask is a physical object ---------- */
.leadform {
  margin: 44px 0 0; padding: 30px 26px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 5px solid var(--action); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.leadform h2 { margin: 0 0 .2em; padding-top: 0; border-top: 0; font-size: clamp(1.35rem, 3vw, 1.62rem); }
.leadform h2::before { display: none; content: none; }
.lf-sub { margin: 0 0 1.3em; color: var(--ink-soft); font-size: 1rem; }
.leadform label {
  display: block; margin: 18px 0 6px; font-family: var(--sans);
  font-size: .87rem; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--navy-deep);
}
.lf-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.leadform input, .leadform textarea {
  width: 100%; padding: 14px 15px; min-height: 52px; font: inherit; font-size: 1.02rem;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .12s ease, background .12s ease;
}
.leadform input:hover, .leadform textarea:hover { border-color: #b3a495; }
.leadform input:focus, .leadform textarea:focus {
  background: var(--surface); border-color: var(--focus); outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.leadform textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
/* honeypot: off-screen, NEVER display:none -- bots skip hidden fields, so it must stay
   focusable-but-invisible rather than absent, or a naive filler never trips it */
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-consent {
  margin: 20px 0 16px; padding: 13px 15px; background: var(--wash);
  border-radius: var(--radius); font-size: .82rem; line-height: 1.6; color: var(--ink-soft);
}
.lf-go { border: 0; cursor: pointer; width: 100%; margin-top: 2px; font-size: 1.08rem; padding: 17px 30px; min-height: 56px; }
.lf-go[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: var(--shadow); }
.lf-status { margin: 14px 0 0; font-size: .96rem; font-weight: 600; color: var(--navy-deep); min-height: 1.3em; }
.lf-fallback { margin: 10px 0 0; font-size: .86rem; color: var(--ink-soft); }

.crosslinks { padding: 16px 0 4px; }
.crosslinks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.crosslinks li { margin: 0; padding: 0; }
.crosslinks a { font-size: .94rem; font-weight: 600; }
.consent { padding: 10px 0 26px; }
.consent p { font-size: .81rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---------- footer ---------- */
footer {
  background: var(--navy-deep); color: #a9bdd0; margin-top: 20px;
  padding: 34px 22px 38px; font-size: .87rem; line-height: 1.7;
  border-top: 4px solid var(--action);
}
footer p { max-width: var(--shell); margin: 0 auto; }
footer a { color: var(--amber-lift); }
footer a:hover { color: #fff; }

/* ---------- sticky mobile call bar ----------
   Roofing intent is phone-first and mobile-first. A homeowner standing in a wet hallway should
   never scroll to find the number. */
.callbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; }          /* the CTA band + call bar already carry the ask here */
  main { max-width: var(--measure); margin: 0 auto; }
}
@media (max-width: 700px) {
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10,24,38,.97); border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 -6px 20px rgba(0,0,0,.22);
  }
  .callbar a {
    flex: 1; display: flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 12px 10px; border-radius: var(--radius);
    text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 1rem;
  }
  .cb-call { background: var(--action); color: #fff; border: 1px solid var(--action-dark); }
  .cb-text { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
  body { padding-bottom: 76px; }
}
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 26px; }
  .hero-proof { order: 2; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  header { padding: 13px 16px; }
  header nav { gap: 8px 16px; }
  header ul { gap: 2px 15px; }
  .brand { font-size: 1.04rem; }
  .hero { padding: 40px 18px 36px; }
  .hero h1 { max-width: none; }
  .shell { padding: 0 18px; }
  main { padding: 30px 0 6px; }
  .cta { display: flex; width: 100%; }
  .leadform { padding: 25px 20px 26px; border-radius: var(--radius); margin-top: 34px; }
}

@media print {
  header, .ctaband, .crosslinks, .callbar, .leadform, .rail, .hero-cta { display: none; }
  body { font-size: 11.5pt; color: #000; background: #fff; padding-bottom: 0; }
  .hero { background: none; border-bottom: 2px solid #000; padding: 0 0 12pt; }
  .hero h1, .hero-sub { color: #000; }
  .chips li { color: #000; border-color: #999; }
  .shell { display: block; max-width: none; padding: 0; }
  main { max-width: none; }
  main > section > h2 { border-top: 1px solid #999; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }