/* ============================================================
   Virginia Storage Containers -- DESIGN SYSTEM
   virginiastoragecontainers.com
   Contact: (330) 510-5817 | info@virginiastoragecontainers.com

   Generated from templates/assets/styles.css.j2. Do not hand-edit
   a built site's css/styles.css: edit this template and rebuild.
   ============================================================ */

/* ============================================================
   PALETTE CONTRAST GATES
   Every pair below is computed at build time from this state's palette and
   must clear the stated ratio, or the build fails. Ratios shown are the
   measured values for the reference palette (navy #1B2A4A, accent #BF0A30).
   A state author picking a lighter accent or a darker navy silently breaks
   these, which is exactly why they are checked rather than assumed.

     accent      on --white           >= 4.5   body links            6.36
     --white     on accent            >= 4.5   trust bar, buttons    6.36
     accent_light on #0b1422          >= 3.0   hero price, large     3.81
     stars       on --white           >= 3.0   review star row       3.47
     navy        on --white           >= 4.5   headings             14.22
     navy        on --gray-100        >= 4.5   headings on alt      12.45

   The three pairs that used to be carried forward failing were closed on
   2026-08-09 after the Georgia QC measured them from rendered pixels:
     accent_light on navy      3.71 -> gated at 4.5, palette.accent_light lifted
     --gray-400   on white     2.84 -> .form-note / .hero-form-note now gray-600
     white @0.35 on navy-dark  3.07 -> footer legal microcopy now white @0.55
   --gray-400 is therefore body-copy-illegal on white. It survives only as a
   token for borders and non-text use.

   TEXT OVER THE HERO VIDEO is not a palette pair: the luminance behind the
   headline changes frame to frame, so a colour alone can never hold a ratio
   there. .hero::after is the scrim that puts a floor under it, and the hero
   pairs are measured against the brightest frame, not a lucky one.
   ============================================================ */

:root {
  --navy:        #0A2C5E;
  --navy-dark:   #05193A;
  --navy-light:  #1F4E8C;
  --orange:      #9E1B32;
  --orange-dark: #74121F;
  --orange-light:#EE7C90;
  /* Comma triplets. rgba() cannot read a hex custom property, so every
     translucent brand tint in this sheet derives from these two instead of
     hardcoding a colour. Must match --orange and --navy exactly. */
  --accent-rgb:  158,27,50;
  --navy-rgb:    10,44,94;
  --off-white:   #f5f5f0;
  --white:       #ffffff;
  --gray-100:    #f0f0ec;
  --gray-200:    #e0e0d8;
  --gray-400:    #9a9a90;
  --gray-600:    #5a5a52;
  --gray-800:    #2e2e28;
  --success:     #2e7d32;
  --error:       #c62828;
  /* Network-fixed status colours, triplet form for the same reason as above. */
  --success-rgb: 46,125,50;
  --error-rgb:   198,40,40;
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Roboto', sans-serif;
  --section-pad: 80px 0;
  --container:   1200px;
  --radius:      8px;
  --radius-lg:   16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--gray-800); background: var(--white); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange-dark); }
ul { list-style: none; }

h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { margin-bottom: 1rem; }

.text-orange { color: var(--orange); }
.text-white  { color: var(--white); }
.text-center { text-align: center; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--section-pad); }
.section-alt { background: var(--gray-100); }
.section-dark { background: var(--navy); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }

.section-header { text-align: center; margin-bottom: 48px; }
.section-header p { font-size: 1.1rem; color: var(--gray-600); max-width: 600px; margin: 12px auto 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all var(--transition); border: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-lg { padding: 18px 36px; font-size: 1.1rem; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-call { background: var(--success); color: var(--white); border-color: var(--success); }
.btn-call:hover { background: #1A5E2A; border-color: #1A5E2A; color: var(--white); }

/* NAVBAR */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--navy); padding: 0 20px; transition: box-shadow var(--transition); overflow: visible; }
#navbar.scrolled { background: var(--navy-dark); box-shadow: var(--shadow-lg); }

.nav-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 70px; overflow: visible; position: relative; z-index: 1; }
.nav-logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-logo span { color: var(--orange); }
.nav-logo:hover { color: var(--white); }
#navbar .nav-logo { z-index: 1002; }
#navbar .nav-logo img { height: 46px !important; width: auto !important; border-radius: 6px !important; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)) drop-shadow(0 2px 4px rgba(var(--accent-rgb),0.25)); transition: filter 0.3s ease; }
#navbar .nav-logo img:hover { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)) drop-shadow(0 2px 6px rgba(var(--accent-rgb),0.35)); }

/* Small circular logo next to Home */
.nav-mini-logo { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; border: 1.5px solid rgba(var(--accent-rgb),0.5); }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a { color: rgba(255,255,255,0.85); font-weight: 500; padding: 8px 8px; border-radius: var(--radius); font-size: 0.9rem; transition: all var(--transition); display: flex; align-items: center; }
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.1); }
/* Current-page marker. main.js adds .is-active by comparing resolved paths,
   so the styling lives here and the script carries no colour values. */
.nav-links a.is-active { color: var(--orange-light); background: rgba(var(--accent-rgb),0.15); }
.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-phone { color: var(--orange-light) !important; font-weight: 700 !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; transition: all var(--transition); }

/* HERO */
.hero { min-height: 100vh; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #0E3C77 100%); display: flex; align-items: center; padding-top: 70px; position: relative; overflow: hidden; }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; background: rgba(12, 22, 38, 0.72); z-index: 1; }
/* Contrast floor for text over video. Sits above .hero-overlay (z 1) and below
   the content (z 3). Without it the accent headline word measured 1.63:1 on a
   bright frame and 2.13:1 on an average one, against a 3:1 requirement, and no
   colour choice fixes a background that changes 30 times a second. */
.hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(11,20,34,0.38); }
.hero::before { display: none; }
/* .hero is display:flex, so .container is a flex item, and a flex item's
   default min-width:auto refuses to shrink below its own min-content width.
   One unbreakable phrase inside the price clause therefore held the whole
   column at 668px, and .hero{overflow:hidden} clipped the excess without
   producing a scrollbar, so a scrollWidth==innerWidth check still passed while
   the H1 read "Shipping Containers for S" on a 390px phone. min-width:0 has to
   be on EVERY flex and grid child in the chain or the innermost one still
   blocks the shrink. */
.hero > .container { min-width: 0; flex: 1 1 auto; }
.hero-content { position: relative; z-index: 3; max-width: 680px; min-width: 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--accent-rgb),0.2); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--white); font-size: 0.85rem; font-weight: 600; padding: 6px 16px; border-radius: 100px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em; }
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero h1 .highlight { color: var(--orange-light); text-shadow: 0 2px 12px rgba(11,20,34,0.9); }
.hero-sub { font-size: 1.15rem; color: rgba(255,255,255,0.8); margin-bottom: 36px; max-width: 540px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat strong { display: block; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--orange-light); text-shadow: 0 2px 10px rgba(11,20,34,0.9); }
.hero-stat span { font-size: 0.8rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.05em; }

/* TRUST BAR
   Build gate: palette.accent must clear 4.5:1 against #ffffff, because
   .trust-item is white text directly on this background. */
.trust-bar { background: var(--orange); padding: 18px 0; }
.trust-items { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 32px; }
.trust-item { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 600; font-size: 0.9rem; }

/* PRODUCT CARDS */
.product-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card-img { height: 200px; background: var(--gray-200); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; position: relative; overflow: hidden; }
.product-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-badge { position: absolute; top: 12px; right: 12px; background: var(--orange); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; }
.product-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.product-card-body h3 { margin-bottom: 8px; }
.product-card-body p { color: var(--gray-600); font-size: 0.95rem; flex: 1; }
.product-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.spec-tag { background: var(--gray-100); color: var(--gray-600); font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--gray-200); }

/* STEPS */
.step { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.step:hover { box-shadow: var(--shadow-md); }
.step-number { width: 52px; height: 52px; border-radius: 50%; background: var(--orange); color: var(--white); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-content h3 { margin-bottom: 6px; }
.step-content p { color: var(--gray-600); margin: 0; }

/* ============================================================
   THIRD-PARTY REVIEW BLOCK (prefix tpr-) + STATE FACTS (prefix sf-)
   ------------------------------------------------------------
   These styles serve shared/reviews/reviews-block.html and
   shared/reviews/state-facts-block.html, which replaced the
   testimonial section network-wide.

   The old .testimonial-* rules are deliberately NOT carried forward.
   A stray testimonial card left in any page therefore renders
   unstyled and gets caught in QC instead of quietly inheriting a
   trustworthy look. Do not re-add them.

   Contrast verified WCAG 2.2 AA against the two surfaces this block
   sits on, --white #ffffff (the cards) and --gray-100 #f0f0ec (the
   .section-alt band behind them):
     --gray-800 #2e2e28  13.7:1 on #ffffff   11.9:1 on #f0f0ec
     --gray-600 #5a5a52   7.0:1 on #ffffff    6.1:1 on #f0f0ec
     --navy     #1B2A4A  13.9:1 on #ffffff   12.4:1 on #f0f0ec
   --gray-400 #9a9a90 is 2.8:1 on white and FAILS. It is used nowhere
   in this block and must never be used on the disclosure or the
   attribution line, both of which are legally load-bearing.

   Sharp edges (border-radius 0) are required here, not cosmetic: the
   compliance ruling asks for a container treatment a fast skim cannot
   mistake for our own customer proof.
   ============================================================ */

/* --- Standing disclosure ------------------------------------------------- */
.tpr-disclosure {
  max-width: 860px;
  margin: 0 auto 40px;
  padding: 20px 24px;
  background: var(--white);
  border-left: 4px solid var(--navy);
  border-radius: 0;
}
.tpr-disclosure p {
  margin: 0 0 10px;
  color: var(--gray-800);
  font-size: 1rem;      /* body size. Never shrink this. */
  line-height: 1.65;
}
.tpr-disclosure p:last-child { margin-bottom: 0; color: var(--gray-600); }
.tpr-disclosure a { color: var(--navy); text-decoration: underline; }

/* --- Grid ---------------------------------------------------------------- */
.tpr-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

/* --- Card ---------------------------------------------------------------- */
.tpr-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--navy);
  border-radius: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Full width by default; two columns once the grid has room. This is the one
   min-width query in the sheet. It is kept inline rather than moved to the
   RESPONSIVE section because no max-width block touches .tpr-card--wide, so
   there is nothing here for the widest-to-narrowest ordering to resolve. */
.tpr-card--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .tpr-card--wide { grid-column: span 2; }
}

/* --- Rating -------------------------------------------------------------- */
/* The star row is a faithful reproduction of the rating the reviewer actually
   gave, on the scale they gave it, and the numeral sits beside it. It is
   aria-hidden because the numeral carries the meaning for assistive tech, so
   the rating is never conveyed by colour or glyph alone. It is NOT decoration:
   a five-star row that is not a real rating is a rating claim to a reasonable
   consumer and is forbidden outright. Never render stars for a review that
   carried no rating, and never render a section, page or site level average.

   Build gate: palette.stars must clear 3:1 against --white #ffffff. A sighted
   reader treats these as the rating, so a washed-out value understates a real
   one. The network reference value is #B4801A (3.5:1). #fbbf24, the value the
   old testimonial block used, is 1.7:1 and must not be reused. */
.tpr-rating { margin: 0; display: flex; align-items: center; gap: 10px; }
.tpr-stars { color: #8A6A00; font-size: 1rem; letter-spacing: 2px; }
.tpr-rating-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--gray-800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Quote --------------------------------------------------------------- */
.tpr-quote { margin: 0; }
.tpr-quote p {
  margin: 0 0 10px;
  color: var(--gray-800);
  line-height: 1.7;
}
.tpr-quote p:last-child { margin-bottom: 0; }
/* Quotation marks are generated, not typed, so the quoted string in the HTML
   stays byte-identical to the source review. */
.tpr-quote p:first-child::before { content: '\201C'; }
.tpr-quote p:last-child::after   { content: '\201D'; }

/* --- Attribution --------------------------------------------------------- */
.tpr-attrib {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin-top: auto;
}
.tpr-attrib strong { color: var(--navy); font-weight: 700; }
.tpr-attrib a { color: var(--navy); text-decoration: underline; }
.tpr-attrib a:hover { color: var(--orange); }

/* --- Footnote ------------------------------------------------------------ */
.tpr-footnote {
  max-width: 860px;
  margin: 32px auto 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gray-600);
  text-align: center;
}

/* --- State facts block --------------------------------------------------- */
/* Reuses .tpr-grid and .tpr-card so the two sections read as one system, but
   the accent bar is the brand accent rather than navy: accent = our own
   claims, navy = third-party content. */
#state-facts .tpr-card { border-top-color: var(--orange); }
.sf-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}
.sf-body   { margin: 0; color: var(--gray-800); line-height: 1.7; }
.sf-source {
  margin: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--gray-600);
}

/* FAQ */
.faq-item { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.faq-question { width: 100%; background: var(--white); border: none; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--navy); text-align: left; transition: background var(--transition); }
.faq-question:hover { background: var(--gray-100); }
.faq-question.open { background: var(--navy); color: var(--white); }
.faq-icon { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; transition: transform var(--transition); }
.faq-question.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 18px 22px; color: var(--gray-600); background: var(--off-white); line-height: 1.7; font-size: 0.95rem; }
.faq-answer.open { display: block; }

/* FORMS */
.quote-form { background: var(--white); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
/* Same min-width:auto trap as the hero column. A text input carries an
   intrinsic ~20-character min-content width, so inside a grid or flex parent it
   refuses to shrink and pushes the card past the viewport. */
.form-grid > *, .form-group { min-width: 0; }
.form-group input, .form-group select, .form-group textarea { min-width: 0; }
.form-group label { font-weight: 600; font-size: 0.88rem; color: var(--gray-800); }
.form-group input, .form-group select, .form-group textarea { padding: 11px 14px; border: 2px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; color: var(--gray-800); background: var(--white); transition: border-color var(--transition); width: 100%; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1); }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-submit { margin-top: 8px; }
.form-submit .btn { width: 100%; justify-content: center; }
.form-note { text-align: center; font-size: 0.82rem; color: var(--gray-600); margin-top: 10px; }

/* Submit feedback. main.js only toggles these classes, so no colour value
   lives in the script. Both states clear 4.5:1 on their own tinted panel. */
.form-feedback { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; border: 1px solid transparent; }
.form-feedback.is-success { background: rgba(var(--success-rgb),0.1); color: var(--success); border-color: rgba(var(--success-rgb),0.3); }
.form-feedback.is-error   { background: rgba(var(--error-rgb),0.1);   color: var(--error);   border-color: rgba(var(--error-rgb),0.3); }

/* CONTACT METHODS */
.contact-method { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--gray-800); transition: all var(--transition); border: 2px solid transparent; margin-bottom: 12px; }
.contact-method:hover { border-color: var(--orange); transform: translateX(4px); color: var(--gray-800); }
.contact-method-icon { width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.contact-method-text strong { display: block; font-weight: 700; color: var(--navy); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.contact-method-text span { font-size: 0.95rem; font-weight: 600; }

/* CTA SECTION */
.cta-section { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); color: var(--white); padding: 80px 0; text-align: center; }
.cta-section h2 { color: var(--white); margin-bottom: 14px; }
.cta-section p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 480px; margin: 0 auto 32px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* PAGE HEADER */
.page-header { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); padding: 120px 0 56px; text-align: center; }
.page-header h1 { color: var(--white); }
.page-header p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 540px; margin: 10px auto 0; }
.page-hero { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); padding: 120px 0 56px; text-align: center; }
.page-hero h1 { color: var(--white); }
.page-hero p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 600px; margin: 10px auto 0; }
.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.breadcrumb a { color: rgba(255,255,255,0.65); }
.breadcrumb a:hover { color: var(--orange-light); }

/* BADGE */
.badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-orange { background: rgba(var(--accent-rgb),0.1); color: var(--orange-dark); }
/* DARK-CONTEXT VARIANT. accent_dark on a 10% accent tint measures 7.07:1 to
   8.07:1 on the light sections the class was designed for, and 1.62:1 on the
   navy interior hero, where it shipped on 19 of 21 pages. The light appearance
   is correct and is left alone; the dark surface gets its own rule. */
.page-hero .badge-orange, .page-header .badge-orange, .hero .badge-orange {
  background: rgba(var(--accent-rgb),0.28); border: 1px solid rgba(var(--accent-rgb),0.55);
  color: var(--white);
}
.badge-navy   { background: rgba(var(--navy-rgb),0.1); color: var(--navy); }

/* FOOTER */
footer { background: var(--navy-dark); color: rgba(255,255,255,0.7); padding: 56px 0 24px; position: relative; overflow: hidden; }

footer .container, footer .footer-grid, footer .footer-bottom { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
.footer-brand .nav-logo { margin-bottom: 14px; display: inline-flex; }
.footer-brand p { font-size: 0.88rem; line-height: 1.7; max-width: 260px; }
.footer-col h4 { color: var(--white); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a { color: rgba(255,255,255,0.6); font-size: 0.88rem; transition: color var(--transition); }
.footer-col ul a:hover { color: var(--orange); }
.footer-markets { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 0 12px; margin-bottom: 12px; text-align: center; }
.footer-markets a:hover { color: rgba(255,255,255,0.9) !important; }
/* 0.35 measured 3.07:1 on navy-dark. 0.55 measures 5.8:1 and still sits a
   clear step below the 0.7 footer body, so the hierarchy survives. */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.55); }

/* REGION ROWS (service areas) */
.region-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 56px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--white); }
.region-row:last-child { margin-bottom: 0; }
.region-row.reverse .region-img { order: 2; }
.region-row.reverse .region-content { order: 1; }
.region-img { position: relative; min-height: 360px; overflow: hidden; }
.region-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.region-row:hover .region-img img { transform: scale(1.05); }
.region-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,22,38,0.8) 0%, rgba(12,22,38,0.15) 50%); }
.region-img-title { position: absolute; bottom: 24px; left: 24px; right: 24px; }
.region-img-title h2 { color: white; margin: 0 0 6px; font-size: 1.6rem; }
.region-img-title p { color: rgba(255,255,255,0.8); margin: 0; font-size: 0.88rem; font-weight: 500; }
.region-content { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.region-content .city-grid { margin-top: 0; }
.region-content > p { margin-top: 16px; color: var(--gray-600); font-size: 0.92rem; line-height: 1.7; }

/* PHOTO HOVER EFFECTS */
.photo-hover { overflow: hidden; }
.photo-hover img { transition: transform 0.5s ease; }
.photo-hover:hover img { transform: scale(1.04); }

/* CITY PAGE SPECIFICS */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 32px; }
.city-chip { padding: 10px 8px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); font-size: 0.82rem; font-weight: 600; color: var(--navy); text-align: center; transition: all var(--transition); text-decoration: none; display: flex; align-items: center; justify-content: center; min-height: 44px; white-space: nowrap; }
.city-chip:hover { border-color: var(--orange); color: var(--orange); background: rgba(var(--accent-rgb),0.05); }

/* ============================================================
   MOBILE OVERFLOW CONTAINMENT
   Stops horizontal scroll at narrow viewports by letting the nav,
   quote form, and contact blocks shrink to the screen. Root-cause
   constraints only; the rules live in the 768px block below.
   ============================================================ */
/* ============================================================
   CRO CONVERSION LAYER
   Hero price + quick-quote form card, sticky mobile CTA bar.
   Reuses the site's navy/accent palette, Inter headings, and the
   existing .btn / card / form components.
   ============================================================ */

/* Two-column hero: value + price (left), quick-quote card (right).
   position + z-index lift the whole grid above .hero-overlay (z-index:1),
   otherwise the non-positioned form card paints behind the dark overlay. */
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; width: 100%; min-width: 0; }
.hero-grid > * { min-width: 0; }
.hero-grid .hero-content { max-width: 620px; }

/* Price callout. Dark translucent panel guarantees text contrast over the video. */
.hero-price { display: inline-block; background: rgba(11,20,34,0.95); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 14px 20px; margin-bottom: 22px; }
/* Build gate: the numbers use --orange-light on this panel. At >=20px bold
   they are WCAG large text, so palette.accent_light must clear 3:1 against
   #0b1422. Verify per state, do not assume. */
.hero-price-line { margin: 0; font-family: var(--font-heading); font-weight: 800; color: var(--white); font-size: clamp(1.25rem, 3vw, 1.55rem); line-height: 1.3; }
.hero-price-line strong { color: var(--orange-light); font-weight: 800; }
/* The clause WRAPS. Only the phrases inside it are atomic, so a break can land
   between phrases but never inside "Wind and Water Tight" and never between a
   number and its unit. nowrap on the whole clause is what made the hero
   unshrinkable: "20ft Wind and Water Tight starting at $2,067 delivered to
   Savannah" is one 668px word to a layout engine. */
.hero-price-clause { white-space: normal; }
.nowrap-phrase { white-space: nowrap; }
.hero-price-note { margin: 9px 0 0; color: rgba(255,255,255,0.9); font-size: 0.92rem; font-weight: 500; line-height: 1.6; }
.hero-price-dot { color: rgba(255,255,255,0.45); margin: 0 6px; }
/* White + bold so it stands out and clears 4.5:1 (small-text) contrast. */
.hero-rto { color: var(--white); font-weight: 800; white-space: nowrap; }

.hero .hero-sub { margin-bottom: 24px; }

/* Quick-quote card (matches .quote-form styling, tuned for the hero) */
.hero-form-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); border-top: 4px solid var(--orange); }
.hero-form-title { font-size: 1.4rem; margin-bottom: 4px; color: var(--navy); }
.hero-form-sub { color: var(--gray-600); font-size: 0.92rem; margin-bottom: 18px; line-height: 1.5; }
.hero-form-card .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.hero-form-card .form-group label { font-weight: 600; font-size: 0.85rem; color: var(--gray-800); }
.hero-form-card .form-group input, .hero-form-card .form-group select { padding: 12px 14px; border: 2px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; color: var(--gray-800); background: var(--white); width: 100%; transition: border-color var(--transition); }
.hero-form-card .form-group input:focus, .hero-form-card .form-group select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }
.hero-form-btn { width: 100%; justify-content: center; margin-top: 4px; }
.hero-form-note { text-align: center; font-size: 0.8rem; color: var(--gray-600); margin: 12px 0 0; }

/* Sticky mobile CTA bar (shown on mobile only) */
.sticky-cta { display: none; }
.sticky-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--white); text-decoration: none; padding: 8px 10px; line-height: 1.15; text-align: center; }
.sticky-cta-btn svg { flex-shrink: 0; }
.sticky-cta-call { background: var(--success); }
.sticky-cta-quote { background: var(--orange); }
.sticky-cta-call:hover, .sticky-cta-call:active, .sticky-cta-quote:hover, .sticky-cta-quote:active { color: var(--white); }

/* ============================================================
   RESPONSIVE
   Source order is load-bearing. Blocks run widest to narrowest so a
   narrower breakpoint always wins. Do not sort, split, or concatenate
   these blocks in any other order, and do not reintroduce a second
   768px block later in the file.
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .city-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-grid .hero-content { max-width: 100%; }
}

@media (max-width: 768px) {
  :root { --section-pad: 52px 0; }
  .region-row { grid-template-columns: 1fr; }
  .region-row.reverse .region-img { order: 0; }
  .region-row.reverse .region-content { order: 0; }
  .region-img { min-height: 240px; }
  .region-content { padding: 24px; }
  #navbar .nav-logo img { height: 40px !important; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  #navbar.menu-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--navy-dark); padding: 14px; gap: 4px; border-top: 1px solid rgba(255,255,255,0.1); }
  #navbar.menu-open .nav-links a { padding: 12px 16px; }
  .nav-cta .btn { display: none; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .btn { white-space: normal; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-actions { flex-direction: column; align-items: center; }
  .hero-stats { gap: 20px; }
  .city-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }

  /* Nav: logo text must be allowed to shrink so logo + hamburger
     fit within the viewport instead of forcing a wider bar. */
  #navbar, .nav-inner { max-width: 100%; }
  .nav-logo { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .nav-logo span,
  .nav-logo { white-space: nowrap; text-overflow: ellipsis; }
  .nav-cta { flex-shrink: 0; }

  /* Quote form + contact grid: grid items default to min-width:auto, which
     prevents shrinking below their content. Allow them to shrink and keep
     the form padding inside the screen. */
  #quote .grid-2 { gap: 28px; }
  #quote .grid-2 > * { min-width: 0; max-width: 100%; }
  .quote-form { padding: 24px; max-width: 100%; }

  /* Long unbreakable strings (email address, etc.) must wrap so the contact
     rows do not force the column wider than the screen. */
  .contact-method { min-width: 0; max-width: 100%; }
  .contact-method-text { min-width: 0; }
  .contact-method-text span,
  .contact-method-text strong { overflow-wrap: anywhere; word-break: break-word; }

  /* CRO hero on mobile */
  .hero { min-height: auto; padding: 84px 0 40px; }
  .hero-actions { display: none; }
  .hero-stats { display: none; }
  /* Hide the descriptive sub on mobile so price + form sit near the top;
     the price panel already carries the key value props. */
  .hero .hero-sub { display: none; }
  .hero-price { display: block; }
  .hero-form-card { padding: 22px; }
  .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; box-shadow: 0 -4px 16px rgba(0,0,0,0.22); }
  /* Clearance for the bar, applied only on pages that actually ship it.
     A flat body rule put 64px of dead space under every mobile page. */
  body:has(.sticky-cta) { padding-bottom: 64px; }
}

@media (max-width: 480px) {
  #navbar .nav-logo img { height: 36px !important; }
  .city-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  /* The source sheet also set .hero { padding: 90px 0 52px } here, but its 480
     block sat BEFORE a second 768 block that set 84px 0 40px, so at 480px the
     768 rule always won and the 90px rule never rendered on any site. Putting
     the blocks in widest-to-narrowest order would have handed the 90px value a
     win it never had and changed the mobile hero on all 15 sites. The dead
     rule is dropped instead, which preserves what actually ships. Do not
     restore it. */
}

/* Link URLs must survive printing, or the review verification path breaks on paper. */
@media print {
  .tpr-attrib a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}