/* ============================================
   ContractorsClasses.com - Modern Redesign
   Homepage Styles
   ============================================ */

:root {
  --burgundy: #844104;
  --burgundy-dark: #5C2D03;
  --navy: #1A2A4A;
  --navy-light: #2C3E6B;
  --blue: #2563EB;
  --blue-hover: #1D4ED8;
  --blue-light: #EFF6FF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --white: #FFFFFF;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--blue-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.logo-tagline {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
}

.header-phone {
  text-align: right;
}

.header-phone .number {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  display: block;
  line-height: 1.2;
}

.header-phone .call-label {
  font-size: 13px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.header-phone a {
  color: inherit;
  text-decoration: none;
}

.header-phone a:hover {
  color: var(--blue);
}

/* ---------- Navigation ---------- */
.main-nav {
  background: var(--burgundy);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}

.nav-inner a {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 14px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  border-radius: 4px;
}

.nav-inner a:hover,
.nav-inner a.active {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}

.nav-divider {
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  user-select: none;
}

/* ---------- Hero ---------- */
.hero {
  /* Tightened 8/13/2026 (was 64px top / 56px bottom). The hero was leaving a
     large empty band between the headline and whatever followed, on every
     page. Less air above the headline gets the reader to the substance
     sooner, which matters most on a phone where that space is a whole thumb
     swipe. Sides and max-width unchanged. */
  padding: 36px 24px 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}

.hero h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  max-width: 720px;
}

.hero-sub {
  font-size: 18px;
  color: var(--gray-600);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 2px solid transparent;
  text-align: center;
  line-height: 1.25;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn-primary:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: var(--white);
}

.btn-primary .btn-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 2px;
}

.btn-outline {
  background: var(--white);
  color: var(--blue);
  border-color: var(--blue);
}

.btn-outline:hover {
  background: var(--blue-light);
  color: var(--blue-hover);
}

.hero-link {
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Sections ---------- */
.section {
  padding: 56px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.section + .section {
  border-top: 1px solid var(--gray-200);
}

.section h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 16px;
}

.section h2.burgundy {
  color: var(--burgundy);
}

.section p {
  font-size: 16px;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 720px;
}

.section p strong {
  color: var(--gray-900);
}

/* Highlight card */
.highlight-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--burgundy);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 720px;
}

.highlight-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #fdf6ee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--burgundy);
}

.highlight-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--burgundy);
  margin-bottom: 6px;
}

.highlight-card p {
  font-size: 15px;
  margin-bottom: 4px;
  max-width: none;
}

/* Feature list */
.feature-list {
  list-style: none;
  margin: 28px 0 32px;
  display: grid;
  gap: 18px;
  max-width: 640px;
}

.feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--blue-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.feature-item strong {
  display: block;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 2px;
}

.feature-item span {
  font-size: 14px;
  color: var(--gray-600);
}

/* CTA band */
.cta-band {
  text-align: center;
  padding: 48px 24px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.cta-band h2 {
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 12px;
}

.cta-band p {
  color: var(--gray-600);
  margin-bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Guarantee / final sections */
.guarantee-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 24px;
  max-width: 720px;
}

.guarantee-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 8px;
}

.guarantee-box p {
  font-size: 15px;
  color: #166534;
  margin: 0;
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.8);
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
}

.site-footer a {
  color: rgba(255,255,255,0.9);
}

.site-footer a:hover {
  color: var(--white);
}

.footer-phone {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .header-phone {
    text-align: center;
  }

  .header-phone .call-label {
    justify-content: center;
  }

  .nav-inner {
    justify-content: flex-start;
    padding: 0 12px;
  }

  .nav-inner a {
    padding: 12px 10px;
    font-size: 13px;
  }

  .hero {
    padding: 40px 20px 36px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero-sub {
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .section {
    padding: 40px 20px;
  }

  .section h2 {
    font-size: 24px;
  }

  .highlight-card {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 26px;
  }
}

/* ==========================================================================
   PACKAGE CARDS  (added 8/13/2026)

   The four packages used to be four full-width blocks separated only by a
   pale hairline -- they read as paragraphs rather than as things you buy,
   and stacked they made the page long.

   Side by side they also make the pricing obvious at a glance: three
   classifications are the SAME price and roofing costs more. That comparison
   is the whole point of the page and it was invisible when stacked.

   Four across on a wide screen, two on a tablet, one on a phone.
   ========================================================================== */
.pkg-grid{
  display:grid; gap:18px; margin:0 0 18px;
  grid-template-columns:repeat(4, 1fr);
}

/* The hero already ends with 56px of space, and the section that follows added
   another 56 on top -- so the cards sat a long way below the intro with nothing
   in between. This pulls just THAT section up; every other section on the site
   keeps its normal rhythm. */
.section:has(.pkg-grid){ padding-top:20px; }
@media (max-width: 980px){ .pkg-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .pkg-grid{ grid-template-columns:1fr; } }

.pkg{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e8ded2; border-radius:10px;
  overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.07);
  transition:box-shadow .15s ease, transform .15s ease;
}
.pkg:hover{ box-shadow:0 8px 20px rgba(0,0,0,.13); transform:translateY(-3px); }

/* the brand-coloured band that makes each one read as a product */
.pkg-head{
  background:#844104; color:#fff;
  font-size:15px; font-weight:700; line-height:1.25;
  padding:12px 10px; text-align:center;
  /* "Residential Contractor" is the longest name and wrapped to two lines,
     which made that one card taller than its neighbours. Centring the text in
     a fixed height keeps all four headers level whether they wrap or not. */
  min-height:52px; display:flex; align-items:center; justify-content:center;
}
.pkg-body{ padding:16px; display:flex; flex-direction:column; flex:1 1 auto; }
.pkg-price{ font-size:30px; font-weight:700; color:#844104; line-height:1.1; margin-bottom:10px; }
.pkg-scope{ font-size:15px; line-height:1.5; margin:0 0 16px; }
/* pushes every button to the bottom so they line up across the row */
.pkg-btn{ margin-top:auto; align-self:flex-start; }

.pkg-help{ font-size:15px; color:#4b5563; max-width:70ch; }

/* ==========================================================================
   MOBILE MENU  (added 8/13/2026)

   THE PROBLEM IT SOLVES
   The seven menu items are 615px wide. On a 390px phone the last three --
   Compare, Questions and Contact -- ran off the edge and were simply
   unreachable. The bar did not scroll and did not wrap; the links were
   clipped. On a site where most visitors are on a phone, three sections had
   no way in.

   HOW IT WORKS
   Above 800px nothing changes at all -- the menu is the same one row it has
   always been, and the button is hidden.
   Below 800px the row is hidden and a "Menu" button appears. Tapping it adds
   the class "open" to the nav, which drops the links down as a full-width
   stacked list with big tap targets.

   The links are always present in the page. CSS hides them, JavaScript only
   toggles a class -- so if the script fails, nothing is lost that a search
   engine or a screen reader needs.
   ========================================================================== */

.nav-toggle{ display:none; }

@media (max-width: 800px){

  /* the button */
  .nav-toggle{
    display:flex; align-items:center; gap:9px;
    width:100%; box-sizing:border-box;
    background:transparent; border:0; cursor:pointer;
    color:#fff; font:700 16px/1 inherit;
    padding:14px 20px; text-align:left;
  }
  /* the three bars, drawn in CSS so there is no icon file to load */
  .nav-toggle-bars{
    display:inline-block; width:20px; height:2px; background:#fff;
    box-shadow:0 6px 0 #fff, 0 -6px 0 #fff;
  }

  /* the row of links: hidden until the button is tapped */
  .main-nav .nav-inner{
    display:none;
    flex-direction:column; align-items:stretch;
    padding:0 0 8px;
  }
  .main-nav.open .nav-inner{ display:flex; }

  /* each link becomes a full-width row that is easy to hit with a thumb */
  .main-nav .nav-inner a{
    display:block; padding:13px 20px; font-size:16px;
    border-top:1px solid rgba(255,255,255,.16);
  }
  /* the "|" separators make no sense once the links are stacked */
  .main-nav .nav-divider{ display:none; }
}


/* ============================================================================
   QUESTIONS PAGE (FAQ)
   ============================================================================

   TWO THINGS THIS FIXES.

   1. PAIRING. The default .section p rule puts the same 16px under every
      paragraph, so a question sat exactly as far from its own answer as it did
      from the next question and you could not tell at a glance which answer
      belonged to which question. The question is now pulled tight to its answer
      and the gap is put AFTER the pair instead.

      ⚠ THE SELECTORS BELOW ARE WRITTEN `.section p.faq-q`, NOT `.faq-q`. A bare
      class LOSES to `.section p` -- a class plus an element beats a class on its
      own -- and the whole rule is then ignored with no error anywhere. That is
      exactly what happened the first time this was written. Do not "tidy" the
      `.section p` off the front of these selectors.

   2. FINDING THINGS. There are three dozen questions on this page and most of
      our readers are on a telephone. The jump list at the top is the index --
      big tap targets, two columns on a desktop, one on a phone.
   ============================================================================ */

/* -- the question, tight to the answer that follows it -- */
.section p.faq-q{
  margin-bottom:4px;          /* WAS 16px -- that is what broke the pairing */
  font-size:17px;
  color:var(--gray-900);
  line-height:1.45;
}

/* -- the answer, with the breathing room moved down here -- */
.section p.faq-a{
  margin-bottom:26px;
}
.section p.faq-a:last-child{ margin-bottom:0; }

/* -- anchors: stop the heading landing flush against the top of the window -- */
.section[id]{ scroll-margin-top:24px; }

/* ---------------------------------------------------------------------------
   THE JUMP LIST
   --------------------------------------------------------------------------- */
.faq-jump{ padding-bottom:36px; }

.faq-jump-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 32px;
  max-width:820px;
}
@media (max-width:700px){
  .faq-jump-list{ grid-template-columns:1fr; }
}

.faq-jump-list li{
  border-bottom:1px solid var(--gray-200);
}

.faq-jump-list a{
  display:block;
  padding:12px 2px;           /* A REAL TAP TARGET -- these get used on phones */
  font-size:17px;
  font-weight:600;
  color:var(--burgundy);
  text-decoration:none;
}
.faq-jump-list a:hover{ text-decoration:underline; }

.faq-count{
  color:var(--gray-500);
  font-size:15px;
}


/* ============================================================================
   PHONE GUTTER -- ONE MARGIN DOWN THE LEFT EDGE
   ============================================================================

   WHAT WAS WRONG. On a telephone the page had two different left margins and
   nothing said so out loud:

        wordmark, CTA band ....... 24px   (never got a mobile rule)
        headline, body text ...... 20px   (@media 768 drops these to 20)

   Four pixels. Not enough to name, but enough to see -- the wordmark did not
   sit over the headline underneath it, so the top of every page looked very
   slightly knocked out of true. Desktop was never affected: everything there
   is a 1100px box with 24px sides and it lines up exactly.

   THE FIX. Bring the two stragglers down to 20px so there is ONE margin.

   ⚠ .cta-band KEEPS ITS FULL-WIDTH BACKGROUND. Only its padding changes. The
   grey band with the rule above and below is meant to run the whole width of
   the window -- putting a max-width on it would shrink the grey to the middle
   of the screen and undo the effect on purpose.
   ============================================================================ */

@media (max-width: 768px) {

  .header-inner,
  .cta-band {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* --------------------------------------------------------------------------
     HERO SPACING ON PHONES -- finishing what was started on 8/13.

     The desktop hero was tightened to 36px top / 28px bottom, but the phone
     rule was left at 40 / 36 -- so a telephone was giving MORE dead space above
     the headline than a 27-inch monitor, which is backwards. Space is scarcest
     on the small screen, where that band is a whole thumb swipe before the
     reader sees anything worth reading.
     -------------------------------------------------------------------------- */
  .hero {
    padding-top: 28px;
    padding-bottom: 24px;
  }
}


/* ============================================================================
   BODY TYPE -- BIGGER, AND THE COLUMN WIDENED TO SUIT IT
   ============================================================================

   THE COMPLAINT THIS ANSWERS. The navigation runs the full 1100px but the
   paragraphs stopped at 720px, so the right-hand third of every page was
   empty and the page looked lopsided.

   ⚠ THE OBVIOUS FIX IS THE WRONG ONE. Simply stretching the paragraphs to
   1100px gives a line of 143 CHARACTERS. Comfortable reading is 70-80. At 143
   the eye loses its place coming back to the start of the next line, and it is
   worst for exactly the people who read this site -- contractors in their
   fifties and sixties, often on a telephone, often without their glasses.

   WHAT IS DONE INSTEAD. The type is made BIGGER and the column is widened to
   match it, so the line length in characters barely moves:

        before .... 16px type in a 720px column ....  93 characters
        after ..... 20px type in a 900px column ....  93 characters

   Same measure. 25% larger print. 180px more width used. The page fills out
   because the words got bigger, not because the lines got longer.

   AND IT SETTLES SOMETHING ELSE. 16px is 12pt. This site is read by people
   with ageing eyes and it was set below large-print size. 20px is 15pt.
   ============================================================================ */

.section p {
  font-size: 20px;              /* WAS 16px (12pt) -- below large-print size */
  line-height: 1.6;
  max-width: 900px;             /* WAS 720px -- widened to hold the measure */
}

.hero-sub {
  font-size: 21px;              /* WAS 18px */
  line-height: 1.5;
  max-width: 760px;             /* WAS 640px */
}

/* the questions page: keep the question a step above its answer */
.section p.faq-q { font-size: 21px; }

.feature-list   { max-width: 800px; }   /* WAS 640px */
.highlight-card { max-width: 900px; }   /* WAS 720px */

/* ----------------------------------------------------------------------------
   ⚠ HANDS OFF THE PACKAGE CARDS AND THE HELP LINE.

   `.section p` is a class AND an element, which outranks a plain `.pkg-scope`
   class -- so the rule above would have reached inside the four package cards
   and set their scope text to 20px, breaking a row that is carefully sized to
   keep all four cards level. These put it back. Do not delete them.
   ---------------------------------------------------------------------------- */
.section .pkg-scope { font-size: 15px; line-height: 1.5; }
.section .pkg-help  { font-size: 15px; }

/* ----------------------------------------------------------------------------
   PHONES. A 20px body is right on a phone too -- it is the screen where the
   large print matters most -- but the column cap is irrelevant there (the
   screen is narrower than any of these numbers) and the hero sub can come
   down a touch so the headline still leads.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section p  { font-size: 19px; }
  .hero-sub   { font-size: 19px; }
  .section p.faq-q { font-size: 20px; }
}

/* ----------------------------------------------------------------------------
   THE HERO MUST USE THE SAME COLUMN AS THE BODY COPY BELOW IT

   Steve spotted this: the headline and its opening paragraph wrapped ~140px
   earlier than every paragraph further down the page, so the top of the page
   looked pinched while the rest ran wider. Three different caps were in play --
   h1 at 720, hero-sub at 760, and body copy at 900.

   One measure now. 900px everywhere.
   ---------------------------------------------------------------------------- */
.hero h1   { max-width: 900px; }
.hero-sub  { max-width: 900px; }


/* ============================================================================
   THE BUY NOTES AND THE STICKY PHONE BAR
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BUY NOTES -- the timing warning and the guarantee, side by side on a desktop,
   stacked on a phone. Deliberately quiet: these are the honest, useful notes a
   careful buyer wants, not another sales pitch. The guarantee gets the green
   edge because it is the reassuring one.
   --------------------------------------------------------------------------- */
.buy-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .buy-notes { grid-template-columns: 1fr; gap: 18px; }
}

.buy-note {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 24px;
}
.buy-note--guarantee { border-left-color: #166534; background: #F6FBF7; }

.buy-note h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
.section .buy-note p {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: none;                /* it is already in a narrow column */
}
.section .buy-note p.buy-note-sub {
  font-size: 16px;
  color: var(--gray-500);
  margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   STICKY BAR -- phones and small tablets only.

   ⚠ THE body PADDING BELOW IS NOT DECORATION. The bar is position:fixed, so
   without it the foot of every page is hidden underneath the bar.
   --------------------------------------------------------------------------- */
.sticky-bar { display: none; }

@media (max-width: 800px) {

  body { padding-bottom: 68px; }   /* == the bar's height. Keep them in step. */

  .sticky-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    height: 68px;
    box-shadow: 0 -3px 14px rgba(0,0,0,0.20);
  }

  .sticky-bar a {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.15;
  }

  .sticky-demo {
    background: var(--blue);
    color: #fff;
  }

  .sticky-call {
    background: #14203B;           /* matches the footer, so it reads as ours */
    color: #fff;
    font-size: 18px;
  }
  .sticky-call-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.75;
    margin-bottom: 2px;
  }
}

/* very narrow phones: keep both labels on one line each */
@media (max-width: 360px) {
  .sticky-bar a  { font-size: 17px; }
  .sticky-call   { font-size: 16px; }
}

/* ----------------------------------------------------------------------------
   THE MENU FOLDS EARLIER NOW -- 900px, WAS 800px

   Adding "Videos" made nine items. Measured, the row needs ~842px of the 1052
   available, which is comfortable on a desktop but left only 25px of slack at
   830px -- the old breakpoint sat right where the bar was about to burst.
   Folding to the button at 900px keeps the one-row bar in the widths where it
   genuinely fits, instead of the widths where it only just does.

   ⚠ THE MOBILE-MENU RULES BELOW IN THIS FILE ARE @media (max-width:800px).
   This raises the two that decide fold-or-not. Keep them in step.
   ---------------------------------------------------------------------------- */
@media (min-width: 801px) and (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav .nav-inner { display: none; }
  .main-nav.open .nav-inner { display: flex; flex-direction: column; align-items: stretch; }
  .main-nav .nav-inner a { padding: 14px 20px; text-align: left; }
  .main-nav .nav-divider { display: none; }
}


/* ============================================================================
   THE VIDEO PAGE
   ============================================================================
   Three across on a desktop, two on a tablet, one on a phone. The whole card
   is the link -- on a phone a small "watch" link is a poor target, a card is
   a good one.
   ============================================================================ */

.vid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 6px;
  max-width: 1100px;
}
@media (max-width: 900px) { .vid-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } }
@media (max-width: 600px) { .vid-grid { grid-template-columns: 1fr; } }

.vid-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.13);
}

/* the still sits in a fixed 4:3 window; object-fit stops odd sizes squashing */
.vid-thumb {
  position: relative;
  display: block;
  background: #2c2c2c;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.vid-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.vid-card:hover .vid-thumb img { transform: scale(1.04); }

.vid-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.vid-badge svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); transition: transform .18s ease; }
.vid-card:hover .vid-badge svg { transform: scale(1.1); }

.vid-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
}

.vid-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 6px;
}

.vid-desc {
  font-size: 16px;
  color: var(--gray-600);
  line-height: 1.45;
  margin-bottom: 14px;
}

/* pushed to the bottom so it lines up across a row of uneven cards */
.vid-play {
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
}
.vid-card:hover .vid-play { text-decoration: underline; }

/* ============================================================================
   THE GAP UNDER THE HERO
   ============================================================================
   Steve spotted a big empty band between the hero paragraph and the first
   heading on /videos/. Measured at 1280px it was 116px, made of THREE separate
   spacings stacking up and none of them obviously wrong on its own:

        .hero-sub margin-bottom ...... 32px   (space before the buttons -- but
                                               the videos hero has no buttons)
        .hero padding-bottom ......... 28px
        .section padding-top ......... 56px
                                      -----
                                       116px

   The home page came to 89px because its trust line and "view all packages"
   link sit in that space and fill it. Where the hero ends on a paragraph,
   nothing does, and it reads as a hole.

   FIX: drop the trailing margin from whatever the hero ends on, and close up
   the join between the hero and the section that follows it. 28 + 24 = 52px.
   Applied site-wide so every page tops out the same.
   ============================================================================ */

.hero > *:last-child { margin-bottom: 0; }

.hero + .section { padding-top: 24px; }

@media (max-width: 768px) {
  .hero + .section { padding-top: 18px; }
}


/* ============================================================================
   STUDENT REFERENCES
   ============================================================================
   The page shows TWELVE comments drawn at random from 268, with a button to
   draw another twelve. There is no state grouping and no jump list -- both
   were removed on 13 Aug 2026 when the page went from "all of them" to "a
   readable dozen".
   ============================================================================ */

/* ---------------------------------------------------------------------------
   THE "TWELVE AT RANDOM" NOTE

   This line is doing real work: without it, a dozen comments reads as though a
   dozen is all we have -- which undersells it by 256. Set as a statement, not
   as small print.
   --------------------------------------------------------------------------- */
.section p.ref-note {
  font-size: 19px;
  line-height: 1.55;
  color: var(--gray-900);
  background: #fdf8f2;
  border-left: 4px solid var(--burgundy);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 0 0 28px;
  max-width: 900px;
}
.section p.ref-note strong { color: var(--burgundy); }

/* ---------------------------------------------------------------------------
   THE TWELVE

   Multi-column rather than a grid: the comments vary from one line to several
   paragraphs, and columns let each take the height it needs instead of padding
   every card out to match the tallest in its row.
   --------------------------------------------------------------------------- */
.ref-list {
  columns: 3;
  column-gap: 32px;
  max-width: 1100px;
}
@media (max-width: 1000px) { .ref-list { columns: 2; } }
@media (max-width: 700px)  { .ref-list { columns: 1; } }

.ref-item {
  break-inside: avoid;               /* never split one person's comment */
  -webkit-column-break-inside: avoid;
  margin: 0 0 24px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--burgundy);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.section .ref-item p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 10px;
  max-width: none;                   /* already inside a narrow column */
}

.ref-item cite {
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  color: var(--burgundy);
}

/* ---------------------------------------------------------------------------
   DRAW ANOTHER TWELVE -- a plain link back to this same page. No JavaScript:
   it loads again and PHP shuffles again.
   --------------------------------------------------------------------------- */
.ref-more { text-align: center; margin-top: 32px; }

@media (max-width: 768px) {
  .section p.ref-note { font-size: 17px; padding: 14px 16px; }
  .ref-item { padding: 16px 17px; }
}

/* the continuing-education line in the footer -- present, not shouted */
.footer-ce { margin-top: 14px; font-size: 15px; opacity: 0.85; }
.footer-ce a { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   THE STAFF SHORTCUT IN THE FOOTER

   The copyright line is a link to the store admin. It must look EXACTLY like
   the plain text around it -- inheriting colour, no underline. The pointer
   cursor is the only thing that gives it away, and that is the intention.
   --------------------------------------------------------------------------- */
.footer-admin-link {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}
.footer-admin-link:hover { color: inherit; text-decoration: none; }


/* ============================================================================
   THE DEMO BUTTON, THE TRUST LINE, AND A FOOTER THAT ENDS THE PAGE
   ============================================================================

   ONE. THE DEMO BUTTON IS THE LOUDEST THING ON EVERY PAGE.

   The free demo is the whole argument. It costs a stranger nothing, it is the
   thing our competitors cannot show, and somebody who is not ready to telephone
   a salesperson will still open it. It was previously the same size and weight
   as the outline button beside it, so the two read as equal choices.

   `.btn-hero` makes it plainly bigger. It is on all eight demo buttons across
   the site, so the same thing looks the same everywhere.

   ⚠ The body type went up to 20px, which made every 16px button look
   undersized next to the words around it. Both button styles grow here.

   TWO. THE TRUST LINE. One quiet line under the top buttons, answering the
   three things a stranger wants to know before clicking anything.

   THREE. THE FOOTER. It was 14px grey-on-navy at 80% opacity -- it faded out
   rather than finished. Darker ground, brighter text, and the telephone number
   made big enough to be the point of it, because on this site the telephone
   number IS the point.
   ============================================================================ */

/* ---------- buttons keep pace with the bigger body type ---------- */
.btn {
  font-size: 17px;
  padding: 15px 30px;
}

/* ---------- the demo button: deliberately the biggest thing here ---------- */
.btn-hero {
  font-size: 20px;
  padding: 19px 40px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.30);
}
.btn-hero:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.42);
  transform: translateY(-1px);
}
.btn-hero .btn-sub {
  font-size: 14px;              /* WAS 12px -- unreadably small under 20px type */
  opacity: 0.95;
}

/* ---------- the trust line under the top buttons ---------- */
.trust-line {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.01em;
}
.trust-line span {
  color: var(--gray-200);       /* the separators recede; the words carry it */
  margin: 0 6px;
}

/* ---------- a footer that ends the page instead of fading out ---------- */
.site-footer {
  background: #14203B;          /* WAS var(--navy) #1A2A4A -- a shade deeper */
  color: rgba(255,255,255,0.85);/* WAS 0.8 */
  font-size: 16px;              /* WAS 14px */
  padding: 44px 24px;
  border-top: 4px solid var(--burgundy);   /* the brand, closing the page */
}
.site-footer a { color: #fff; }

.footer-phone {
  font-size: 30px;              /* WAS 18px -- this is what we want them to do */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}
.footer-phone a { text-decoration: none; }
.footer-phone a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .btn-hero      { font-size: 19px; padding: 17px 28px; }
  .footer-phone  { font-size: 27px; }
  .trust-line    { font-size: 15px; line-height: 1.7; }
}

/* the trust line and the "view all packages" link were sitting on top of each
   other -- .hero-link is inline, so it ignored the margin above it */
.trust-line + .hero-link {
  display: inline-block;
  margin-top: 14px;
}


/* ============================================================================
   PACKAGE CARDS, THE INCLUDES STATEMENT, AND THE COMPARISON TABLE
   ============================================================================

   ALL THREE DO THE SAME JOB: make "you get everything, in this price" the
   thing a stranger cannot miss. That is the one claim that separates us from
   schools which quote a lower headline number and sell the five study-only
   titles as an add-on afterwards.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. THE LINE UNDER EACH PRICE

   A price on its own invites "and what does that NOT include?". This answers
   it in the same glance, on all four cards, before the scope description.

   ⚠ `.section p.pkg-includes`, NOT `.pkg-includes`. A bare class loses to
   `.section p` and the line renders at full 20px body size, swamping the price
   it is meant to sit under. This has now caught us twice in this stylesheet.
   --------------------------------------------------------------------------- */
.section p.pkg-includes {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--burgundy);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0e7db;
}

/* ---------------------------------------------------------------------------
   2. THE INCLUDES STATEMENT UNDER THE ROW OF CARDS

   This was 15px grey help text -- the visual weight of a disclaimer, for the
   single most important sentence on the page. It is now a statement.
   --------------------------------------------------------------------------- */
.section p.pkg-included-all {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-900);
  background: #fdf8f2;
  border-left: 4px solid var(--burgundy);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 4px 0 16px;
  max-width: 900px;
}

/* ---------------------------------------------------------------------------
   3. THE COMPARISON TABLE

   Was twenty-one hand-written inline style attributes at 15px. Now one place.
   --------------------------------------------------------------------------- */
.cmp-wrap {
  overflow-x: auto;              /* narrow phones scroll the table, not the page */
  margin-top: 24px;
  max-width: 900px;
}

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;               /* WAS 15px -- small beside 20px body copy */
  line-height: 1.45;
}

.cmp thead tr { background: var(--navy); color: #fff; }
.cmp th {
  text-align: left;
  padding: 15px 18px;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.cmp td { padding: 15px 18px; border-bottom: 1px solid var(--gray-200); }
.cmp tbody tr:nth-child(even) { background: var(--gray-50); }
.cmp tbody tr:last-child td { border-bottom: 0; }

.cmp-yes { color: #166534; font-weight: 700; }
.cmp-yes a { color: #166534; text-decoration: underline; }
.cmp-ask { color: var(--gray-500); }

/* -- the free-demo row: the one claim they can check themselves, for nothing -- */
.cmp tbody tr.cmp-star,
.cmp tbody tr.cmp-star:nth-child(even) {
  background: #FFF8E7;
  box-shadow: inset 4px 0 0 var(--burgundy);
}
.cmp tbody tr.cmp-star td { font-weight: 600; }

.cmp-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--burgundy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: 2px;
}

@media (max-width: 700px) {
  .cmp     { font-size: 16px; }
  .cmp th,
  .cmp td  { padding: 13px 14px; }
  /* on a phone the badge belongs on its own line, not shoved against the text */
  .cmp-badge { display: block; margin: 6px 0 0; width: fit-content; }
  .section p.pkg-included-all { font-size: 17px; padding: 14px 16px; }
}


/* ============================================================================
   QUESTIONS PAGE — ACCORDION
   ============================================================================

   Matches the look of the accordion on contractorclasses.com/site/faq.php, but
   built on the native <details> element instead of Bootstrap, because this site
   loads no Bootstrap and no JavaScript.

   WHY THAT MATTERS BEYOND WEIGHT: the answers inside a closed <details> are
   ordinary HTML. They are read by search engines and by screen readers whether
   the panel is open or shut. An accordion built in script would hide them.

   The `name` attribute on each <details> makes a group exclusive -- opening one
   closes the previous, which is what data-bs-parent does on the apex site.
   Browsers that do not support it simply allow several open at once, which is
   no loss at all.
   ============================================================================ */

.faq-item {
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--burgundy);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}

/* -- the question: the whole bar is the tap target -- */
.faq-item > summary {
  list-style: none;                 /* kill the default triangle... */
  cursor: pointer;
  padding: 16px 52px 16px 20px;     /* room on the right for our own chevron */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  position: relative;
  user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }   /* ...and in Safari */

.faq-item > summary:hover { background: var(--gray-50); }

/* -- the chevron, drawn in CSS so there is no icon file -- */
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--burgundy);
  border-bottom: 2.5px solid var(--burgundy);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

/* -- the open question, tinted like the apex site's -- */
.faq-item[open] > summary {
  background: #fdf8f2;
  color: var(--burgundy);
}

/* -- the answer -- */
.section .faq-item .faq-a {
  padding: 2px 22px 20px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--gray-600);
  max-width: 900px;
}
.section .faq-item .faq-a a { color: var(--blue); }

@media (max-width: 768px) {
  .faq-item > summary        { font-size: 17px; padding: 15px 46px 15px 16px; }
  .section .faq-item .faq-a  { font-size: 17px; padding: 2px 18px 18px; }
}

/* ---------------------------------------------------------------------------
   EVERYTHING INSIDE AN ANSWER IS THE SAME SIZE

   Steve spotted the bullet list reading smaller than the paragraphs above it.
   Two separate causes, neither visible in the markup:

     1. `.section p { font-size: 20px }` -- the site-wide body rule -- reaches
        inside the answer and beats the container's 18px. So paragraphs came
        out 20px while plain-text answers and list items stayed 18px. Answers
        were inconsistent with each other across the whole page, not just here.

     2. The global `*{margin:0;padding:0}` reset had stripped <ul> of its
        indent AND its spacing, so the bullets sat flush left with no gaps.

   Everything in an answer is now 18px, and lists look like lists.
   --------------------------------------------------------------------------- */
.section .faq-item .faq-a p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 14px;
  max-width: none;
}
.section .faq-item .faq-a p:last-child { margin-bottom: 0; }

.section .faq-item .faq-a ul {
  list-style: disc;
  margin: 0 0 14px;
  padding-left: 26px;          /* the reset removed this -- put it back */
}
.section .faq-item .faq-a li {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.section .faq-item .faq-a li:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .section .faq-item .faq-a p,
  .section .faq-item .faq-a li { font-size: 17px; }
  .section .faq-item .faq-a ul { padding-left: 22px; }
}