/* ============================================================
   ProGrade brand layer over the SummitRoof design system.
   Loaded last. Recolours the template from ember-orange to the
   ProGrade logo (black, yellow-gold, galvanised silver) and adds
   the few components the plan needs that the template lacks.
   ============================================================ */

:root,
.dark {
  /* Logo gold, sampled from his logo (#F8E040 → #F8D828). */
  --gold-300: #fbe57a;
  --gold-400: #f8dc3c;
  --gold-500: #f2c81b;
  --gold-600: #d9ab06;
  --gold-ink: #7a5b00; /* gold text on white: 6.4:1 */
  --ink: #0d0d0d;

  --cta: var(--gold-500);
  --cta-hover: var(--gold-400);
  --on-cta: var(--ink);
  --ring: var(--gold-600);
  --glow-cta: 0 10px 28px rgba(242, 200, 27, 0.32);
  --link: #1f2933;

  /* Silver-steel neutrals instead of the template's blue slate. */
  --slate-900: #16181b;
  --slate-925: #111315;
  --slate-950: #0b0c0d;
}
:root {
  --accent-ink: var(--gold-ink);
}
/* The site is light-only: the logo and job photos were shot for white. */
.dark {
  --bg: #ffffff; --bg-soft: #f4f5f6; --surface: #ffffff; --surface-2: #f4f5f6;
  --text: #141619; --text-muted: #555d66; --border: #e3e6ea; --border-strong: #c9ced4;
  --accent-ink: var(--gold-ink);
}
body { background: var(--bg); }

/* ---- Buttons on gold need dark text everywhere ---- */
.sr-btn--accent, .sr-btn--accent:hover { color: var(--ink); }
.sr-btn--white { color: var(--ink); }
.sr-btn--dark { background: var(--ink); color: #fff; }
.sr-btn--dark:hover { background: #26292d; }
.sr-step__num, .sr-top, .sr-badge--accent { color: var(--ink); }
.sr-rating { color: var(--gold-600); }

/* Template glyphs replaced with drawn icons (phones turn ✓ / ⇄ into emoji). */
.sr-pricing li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px;
  background: var(--gold-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg-list--x li::before {
  background: #b42318;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.sr-ba__handle::after {
  content: "";
  background: var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---- Icons ---- */
.pg-icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }
.sr-service__icon { color: var(--ink); background: var(--gold-300); }
.sr-service__icon .pg-icon { width: 24px; height: 24px; }

/* ---- Topbar + nav ---- */
.sr-topbar a { color: var(--gold-400); }
.sr-topbar .sr-container { display: flex; align-items: center; gap: 24px; padding-block: 9px; }
.sr-topbar .pg-icon { margin-right: 6px; }
.sr-logo img { height: 52px; width: auto; }
.sr-nav .sr-container { min-height: 76px; }
.sr-nav-phone { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1180px) and (min-width: 1025px) { .sr-nav-phone { display: none; } }
.sr-drop-toggle .pg-icon { width: 14px; height: 14px; transition: transform var(--dur-base); }
.sr-drop:hover .sr-drop-toggle .pg-icon, .sr-drop.is-open .sr-drop-toggle .pg-icon { transform: rotate(180deg); }

/* ---- Hero ---- */
.sr-hero--full .sr-hero__bg::after {
  background: linear-gradient(90deg, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.76) 48%, rgba(8, 9, 10, 0.35) 100%);
}
.pg-hero-eyebrow { color: var(--gold-400) !important; }
.sr-hero--full h1 em { font-style: normal; color: var(--gold-400); }
.pg-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sr-hero--full .sr-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.sr-hero--full .sr-btn--outline:hover { color: var(--gold-400); border-color: var(--gold-400); }

/* Inner page hero: dark band so every page opens on brand. */
.pg-page-hero { background: var(--slate-950); color: #fff; padding-block: 72px 80px; position: relative; overflow: hidden; }
.pg-page-hero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 28px);
}
.pg-page-hero h1 { color: #fff; }
.pg-page-hero .sr-lead { color: rgba(255, 255, 255, 0.8); }
.pg-page-hero .sr-caption, .pg-page-hero .sr-caption a { color: rgba(255, 255, 255, 0.65); }
.pg-page-hero .sr-caption a:hover { color: var(--gold-400); }
.pg-page-hero .sr-eyebrow { color: var(--gold-400); }
.pg-page-hero__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); aspect-ratio: 4 / 3; }
.pg-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-page-hero .sr-split { align-items: center; margin-top: 16px; }
.pg-page-hero--text .sr-split { grid-template-columns: 1fr; max-width: 860px; }

/* ---- Trust bar (template cert strip) ---- */
.sr-cert { background: var(--ink); border: 0; }
.sr-cert .sr-container { gap: 14px 32px; padding-block: 18px; }
.sr-cert span { color: #e8eaed; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; }
.sr-cert .pg-icon { color: var(--gold-400); width: 18px; height: 18px; }

/* ---- CTA band on gold: dark text ---- */
.sr-cta-band h2 { color: var(--ink); }
.sr-cta-band p { color: rgba(13, 13, 13, 0.78); }
.sr-cta-band .pg-hero-ctas { flex: none; }

/* ---- Stats band ---- */
.sr-stats-band .sr-stat__num { color: var(--gold-400); }

/* ---- Lists ---- */
.pg-list { list-style: none; padding: 0; margin: 0; }
.pg-checks { background: var(--surface-2); border-radius: var(--radius-lg); padding: 28px; border: 0; }
.pg-checks ul { margin: 0; }
.pg-checks li { font-size: 1rem; padding: 6px 0; }

/* ---- Fit table (coat vs replace) ---- */
.pg-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-fit > div { border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--border); background: var(--surface); }
.pg-fit h3 { font-size: 1.15rem; margin-bottom: 8px; }
.pg-fit__good { border-top: 4px solid var(--gold-500) !important; }
.pg-fit__bad { border-top: 4px solid #b42318 !important; }
@media (max-width: 700px) { .pg-fit { grid-template-columns: 1fr; } }

/* ---- Comparison table ---- */
.pg-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: 0.975rem; }
.pg-compare th, .pg-compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.pg-compare tr:last-child th, .pg-compare tr:last-child td { border-bottom: 0; }
.pg-compare thead th { background: var(--ink); color: #fff; font-family: var(--font-display); }
.pg-compare thead th:nth-child(2) { color: var(--gold-400); }
.pg-compare tbody th { font-weight: 600; width: 28%; }
.pg-compare td:nth-child(2) { background: #fffbe6; font-weight: 500; }
@media (max-width: 640px) {
  .pg-compare thead { display: none; }
  .pg-compare, .pg-compare tbody, .pg-compare tr, .pg-compare th, .pg-compare td { display: block; width: 100%; }
  .pg-compare tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .pg-compare tbody th { border: 0; padding-bottom: 4px; width: auto; font-size: 1.05rem; }
  .pg-compare td { border: 0; padding-top: 4px; padding-bottom: 4px; }
  .pg-compare td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text-muted); }
}

/* ---- Reels ---- */
.pg-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pg-reel { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); position: relative; display: flex; flex-direction: column; }
.pg-reel figcaption { flex: 1; }
.pg-reel video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.pg-reel figcaption { padding: 12px 14px; background: var(--surface); color: var(--text); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@media (max-width: 900px) { .pg-reels { grid-template-columns: repeat(2, 1fr); } }
.pg-reels--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }
@media (max-width: 700px) {
  .pg-reels, .pg-reels--3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .pg-reel { scroll-snap-align: start; }
}

/* ---- Gallery caption ---- */
.sr-gallery-item__cap strong { color: var(--text); font-weight: 600; }

/* ---- Area cards ---- */
.pg-area-card { display: block; padding: 28px; color: var(--text); }
.pg-area-card h3 { margin: 4px 0 8px; font-size: 1.25rem; }
.pg-area-card p { color: var(--text-muted); font-size: 0.95rem; }
.pg-area-card .pg-more { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; color: var(--gold-ink); font-weight: 600; }

/* ---- Form extras ---- */
.sr-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555d66' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.sr-field input[type="file"] { padding: 10px; font-size: 0.9rem; }
.sr-field .pg-opt { font-weight: 400; color: var(--text-muted); }
.pg-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-radio-row label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-weight: 500; cursor: pointer; }
.pg-radio-row input { accent-color: var(--ink); width: auto; }
.pg-radio-row label:has(input:checked) { border-color: var(--ink); background: #fffbe6; }
.sr-form-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px; text-align: center; }
.pg-form-fallback { text-align: center; }
.pg-form-fallback .pg-hero-ctas { justify-content: center; margin-top: 16px; }
.sr-form-status__icon .pg-icon { width: 26px; height: 26px; }

/* ---- Prose (privacy) ---- */
.pg-prose { max-width: 760px; }
.pg-prose h2 { font-size: 1.4rem; margin: 32px 0 10px; }
.pg-prose p, .pg-prose li { color: var(--text-muted); }
.pg-prose ul { padding-left: 20px; list-style: disc; }

/* ---- Footer ---- */
.sr-footer .sr-logo img { height: 72px; width: auto; }
.sr-footer__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; }
.sr-footer__social .pg-icon { width: 20px; height: 20px; }
.sr-footer li .pg-icon { margin-right: 8px; color: var(--gold-400); }

/* ---- Sticky mobile action bar (plan, section 3) ---- */
.pg-mobile-bar { display: none; }
@media (max-width: 768px) {
  .pg-mobile-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--ink); border-top: 1px solid #2a2d31; padding-bottom: env(safe-area-inset-bottom);
  }
  .pg-mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; color: #fff; font-size: 0.8rem; font-weight: 600; }
  .pg-mobile-bar a + a { border-left: 1px solid #2a2d31; }
  .pg-mobile-bar a.is-primary { background: var(--gold-500); color: var(--ink); }
  .pg-mobile-bar .pg-icon { width: 20px; height: 20px; }
  body { padding-bottom: 60px; }
  .sr-top { bottom: 76px; }
}

/* ---- Landing page (ad traffic): bare header ---- */
.pg-lp-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.pg-lp-bar .sr-container { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.pg-lp-bar img { height: 48px; width: auto; }

/* ---- Mobile nav: link list fits the drawer ---- */
@media (max-width: 1024px) {
  .sr-nav-links.is-open { max-height: calc(100vh - 80px); overflow-y: auto; }
  .sr-nav-right .sr-btn { display: none; }
}
@media (max-width: 420px) { .sr-logo img { height: 44px; } }

/* Outline buttons sit on the dark page hero */
.pg-page-hero .sr-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.pg-page-hero .sr-btn--outline:hover { color: var(--gold-400); border-color: var(--gold-400); }

/* Square corners everywhere (Marc, 8 Oct 2026). Zeroing the template's radius
   tokens squares every card, button, field, photo and chip in one place. */
:root,
.dark {
  --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0;
}

/* Service card with no job photo yet: brand panel instead of an image. */
.pg-card-panel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gold-400);
  background: var(--slate-950) repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px); }
.pg-card-panel .pg-icon { width: 64px; height: 64px; stroke-width: 1.5; }

/* Stock photo credit (required by CC BY-SA; also marks it as not his job). */
.pg-stock__cap { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.pg-stock__cap a { color: inherit; text-decoration: underline; }
/* His branded before/after graphics are portrait: show them whole. */
.pg-graphic .sr-ba { aspect-ratio: 4 / 5; }

/* ============================================================
   Mobile fixes (Oct 2026 audit at 360-390px)
   ============================================================ */

/* Before/after labels were 11px. */
.sr-ba__tag { font-size: 0.78rem; }

/* 16px+ in every field so iOS Safari doesn't zoom the page on focus. */
.sr-field input, .sr-field select, .sr-field textarea, .sr-field input[type="file"] { font-size: 16px; }

/* Lightbox open button: 44px tap target. */
.sr-lb-btn { min-width: 44px; min-height: 44px; }

@media (max-width: 1024px) {
  /* Header phone: real tap target. */
  .sr-nav-phone { min-height: 44px; padding: 0 4px; }

  /* Drawer: every item left-aligned, full-width rows with dividers. */
  .sr-nav-links.is-open { align-items: stretch; gap: 0; padding: 8px 20px 16px; }
  .sr-nav-links.is-open > a,
  .sr-nav-links.is-open .sr-drop-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; font-size: 1.05rem; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
  .sr-nav-links.is-open .sr-drop { width: 100%; }
  .sr-nav-links.is-open .sr-drop-menu { padding: 4px 0 8px 12px; border-bottom: 1px solid var(--border); }
  .sr-nav-links.is-open .sr-drop-menu a { min-height: 44px; display: flex; align-items: center; font-size: 1rem; padding: 0 8px; }
  .sr-nav-links.is-open .sr-drop:has(.sr-drop-menu) > .sr-drop-toggle { border-bottom: 0; }
}

@media (max-width: 768px) {
  /* The sticky Call/Text/Inspection bar replaces back-to-top on phones; the
     floating button sat over form buttons and body text. */
  .sr-top { display: none; }

  /* Footer links: 44px rows. */
  .sr-footer li { margin-bottom: 0; }
  .sr-footer li a, .sr-footer__social { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 600px) {
  /* Hero and CTA buttons: full width, stacked, allowed to wrap. */
  .pg-hero-ctas, .sr-hero__ctas { flex-direction: column; align-items: stretch; }
  .pg-hero-ctas .sr-btn, .sr-hero__ctas .sr-btn { width: 100%; white-space: normal; text-align: center; }
  .sr-btn { white-space: normal; }
  .sr-cta-band .sr-btn { width: 100%; }

  /* Trust bar: tidy two-column list instead of a ragged centred wrap. */
  .sr-cert .sr-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; justify-content: stretch; padding-block: 16px; }
  .sr-cert span { font-size: 0.82rem; align-items: flex-start; line-height: 1.35; }
  .sr-cert .pg-icon { margin-top: 1px; }

  /* Inline "More on..." and sitemap links: taller tap area. */
  .pg-area-card .pg-more, .sr-section a[style*="inline-flex"] { min-height: 44px; }
  .pg-list li a { min-height: 44px; }
}
.pg-radio-row label { min-height: 44px; padding: 8px 16px; }
@media (max-width: 1024px) { .sr-nav-links.is-open .sr-drop-menu { width: 100%; } }

/* ============================================================
   Mobile polish (second pass): shorter pages, tidier rhythm
   ============================================================ */
.pg-gallery-more { display: none; }

@media (max-width: 600px) {
  /* Headings and section rhythm. */
  h1 { font-size: 2rem; }
  .sr-section-head { margin-bottom: 28px; }
  .sr-section { padding-block: 52px; }
  .pg-page-hero { padding-block: 40px 48px; }

  /* Every in-content button: full width, label centred on one line. */
  main .sr-btn { width: 100%; justify-content: center; }

  /* Galleries: first 3 jobs, then "Show more". */
  .pg-gallery:not(.is-all) > :nth-child(n + 4) { display: none; }
  .pg-gallery-more { display: block; margin-top: 20px; }

  /* Home service cards: photo left, text right (was a full-width photo,
     an icon and padding per card: ~2 screens for 6 cards). */
  .sr-service--photo { display: grid; grid-template-columns: 112px 1fr; }
  .sr-service--photo .sr-service__media { aspect-ratio: auto; height: 100%; min-height: 128px; }
  .sr-service--photo .sr-service__body { padding: 14px 16px; }
  .sr-service--photo .sr-service__icon { display: none; }
  .sr-service--photo h3 { font-size: 1.05rem !important; margin-bottom: 4px; }
  .sr-service--photo p { font-size: 0.875rem; line-height: 1.5; margin-bottom: 6px; }
  .pg-card-panel .pg-icon { width: 36px; height: 36px; }

  /* Process steps: number beside the title, tighter cards. */
  .sr-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .sr-step__num { grid-row: span 2; margin-bottom: 0; }
  .sr-step h4 { margin: 8px 0 4px; }
  .sr-grid { gap: 12px; }

  /* Icon cards (flat page, landing page): icon beside the title. */
  .sr-service:not(.sr-service--photo) { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; }
  .sr-service:not(.sr-service--photo) .sr-service__icon { width: 44px; height: 44px; grid-row: span 2; margin: 0; }
  .sr-service:not(.sr-service--photo) h3 { font-size: 1.1rem; margin: 2px 0 4px; }
  .sr-service:not(.sr-service--photo) p { margin: 0; font-size: 0.9rem; }

  /* Forms: no double gap between stacked fields. */
  .sr-field-row { gap: 0; }
  .sr-form-card { padding: 22px 18px; }

  /* Footer: services and areas side by side. */
  .sr-footer { padding-block: 48px 24px; }
  .sr-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .sr-footer__top > div:first-child, .sr-footer__top > div:last-child { grid-column: 1 / -1; }
  .sr-footer h4 { margin-bottom: 4px; }
  .sr-footer li a { font-size: 0.9rem; }
}
@media (max-width: 600px) {
  .pg-fit > div { padding: 20px 18px; }
  .pg-fit .pg-checks { padding: 0; background: none; }
}