/* Bayou City Containers — 2026-09-14 */
:root{
  --steel:#1b2733;
  --steel-2:#24313f;
  --line:#33424f;
  --orange:#e2660f;
  --orange-d:#c25409;
  --ink:#16202a;
  --body:#3d4c59;
  --muted:#697987;
  --bg:#ffffff;
  --bg-alt:#f4f6f8;
  --radius:4px;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--body);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%;height:auto}
a{color:var(--orange-d)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---- top call bar ---- */
.callbar{background:var(--orange);color:#fff;text-align:center;font-weight:700;font-size:15px;padding:9px 16px;letter-spacing:.2px}
.callbar a{color:#fff;text-decoration:none}
.callbar a:hover{text-decoration:underline}

/* ---- header ---- */
header{background:var(--steel);color:#fff;border-bottom:3px solid var(--orange)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;max-width:var(--wrap);margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
/* real logo mark (was a CSS placeholder square until 2026-09-16) */
.mark{width:46px;height:46px;flex:none;display:block}
@media (max-width:640px){.mark{width:40px;height:40px}}
.bname{font-weight:800;font-size:19px;letter-spacing:-.3px;line-height:1.15}
.btag{font-size:11px;color:#9fb0bf;letter-spacing:1.4px;text-transform:uppercase;font-weight:600}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{color:#c8d4de;text-decoration:none;font-size:14.5px;font-weight:600}
nav a:hover{color:#fff}

/* ---- hero ---- */
.hero{background:var(--steel-2);color:#fff;padding:60px 0 56px;border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 16px;font-size:41px;line-height:1.12;letter-spacing:-.8px;color:#fff;font-weight:800}
.hero p.lede{font-size:19px;color:#c4d1dc;margin:0 0 28px;max-width:640px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:var(--radius);font-size:17px;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--orange-d)}
.btn-ghost{background:transparent;border:2px solid #56697a;color:#fff;padding:12px 24px}
.btn-ghost:hover{background:#2d3d4c;border-color:#7d8f9e}
.hero-note{margin-top:20px;font-size:14.5px;color:#93a4b3}

/* ---- sections ---- */
section{padding:56px 0}
section.alt{background:var(--bg-alt);border-top:1px solid #e3e8ec;border-bottom:1px solid #e3e8ec}
h2{font-size:29px;color:var(--ink);margin:0 0 10px;letter-spacing:-.4px;font-weight:800;line-height:1.2}
h3{font-size:18px;color:var(--ink);margin:0 0 8px;font-weight:700}
.sub{color:var(--muted);margin:0 0 30px;font-size:17px;max-width:680px}

/* ---- grade cards ---- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{background:#fff;border:1px solid #dde3e8;border-radius:var(--radius);padding:22px}
.card .size{font-size:12px;font-weight:800;letter-spacing:1.3px;color:var(--orange-d);text-transform:uppercase;margin-bottom:7px}
.card ul{margin:12px 0 0;padding-left:19px;font-size:15.5px}
.card li{margin-bottom:5px}

/* ---- checklist ---- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.checks li{padding-left:30px;position:relative;font-size:16px}
.checks li:before{content:"";position:absolute;left:2px;top:8px;width:12px;height:12px;background:var(--orange);border-radius:2px}

/* ---- delivery spec table ---- */
.spec{width:100%;border-collapse:collapse;margin-top:6px;font-size:16px}
.spec th,.spec td{text-align:left;padding:13px 14px;border-bottom:1px solid #dde3e8;vertical-align:top}
.spec th{width:220px;color:var(--ink);font-weight:700;background:#eef1f4}
.tablewrap{overflow-x:auto}

/* ---- areas ---- */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px;padding:0;list-style:none}
.areas a{display:inline-block;background:#fff;border:1px solid #d3dbe1;border-radius:var(--radius);padding:9px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.areas a:hover{border-color:var(--orange);color:var(--orange-d)}

/* ---- quote form ---- */
.quote{background:var(--steel);color:#fff}
.quote h2{color:#fff}
.quote .sub{color:#b3c1cd}
.form{display:grid;gap:14px;grid-template-columns:1fr 1fr;max-width:720px;margin-top:6px}
.form label{display:block;font-size:13px;font-weight:700;color:#c8d4de;margin-bottom:5px;letter-spacing:.3px}
.form input,.form select,.form textarea{
  width:100%;padding:12px 13px;border:1px solid #4a5b6b;border-radius:var(--radius);
  background:#f8fafb;color:var(--ink);font-size:16px;font-family:inherit
}
.form textarea{min-height:92px;resize:vertical}
.full{grid-column:1/-1}
.formnote{font-size:13.5px;color:#93a4b3;margin-top:14px}

/* ---- footer ---- */
footer{background:var(--ink);color:#8b9aa7;padding:38px 0 42px;font-size:14.5px}
footer a{color:#b9c6d1;text-decoration:none}
footer a:hover{color:#fff}
.fgrid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:26px}
.fgrid strong{color:#fff;display:block;margin-bottom:9px;font-size:15px}
.legal{border-top:1px solid #2b3742;padding-top:20px;font-size:13.5px;line-height:1.7}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:44px 0 40px}
  .hero h1{font-size:31px}
  .hero p.lede{font-size:17.5px}
  h2{font-size:24px}
  section{padding:42px 0}
  .form{grid-template-columns:1fr}
  nav{gap:16px}
  .btn{width:100%;text-align:center}
  .cta-row{flex-direction:column;align-items:stretch}
  /* stack the delivery spec table so the answers aren't squeezed into a gutter */
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto}
  .spec tr{border-bottom:1px solid #dde3e8;padding:4px 0 12px}
  .spec tr:last-child{border-bottom:none}
  .spec th{background:none;padding:12px 0 2px;border:none;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--orange-d)}
  .spec td{padding:0;border:none}
}

/* ---- figures ---- */
.figure{margin:30px 0 0}
.figure svg{width:100%;height:auto;display:block}
.lbl-b{font:700 15px -apple-system,"Segoe UI",Arial,sans-serif;fill:#16202a}
.lbl-s{font:500 13px -apple-system,"Segoe UI",Arial,sans-serif;fill:#697987}
.figcap{margin:12px 0 0;font-size:14.5px;color:var(--muted);font-style:italic;max-width:640px}
@media (max-width:640px){.lbl-b{font-size:22px}.lbl-s{font-size:19px}}

/* ---- hero with photo ---- */
.hero-img{background-size:cover;background-position:center right;padding:76px 0 70px}
@media (max-width:760px){
  .hero-img{background-position:center;padding:52px 0 46px}
}

/* ---- use-case photo strip ---- */
.uses{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:34px}
.use{margin:0;background:#fff;border:1px solid #dde3e8;border-radius:var(--radius);overflow:hidden}
.use img{width:100%;height:190px;object-fit:cover;display:block;background:#dfe5ea}
.use figcaption{padding:16px 18px 18px;font-size:15px;color:var(--body);line-height:1.55}
.use figcaption strong{display:block;color:var(--ink);font-size:16.5px;margin-bottom:5px}

/* ---- FAQ ----
   <details> rather than a JS accordion on purpose: it is keyboard and
   screen-reader accessible for free, it works with JS disabled, and the
   answer text is in the DOM whether or not it is expanded — which is what
   matters for crawlers and answer engines. A JS accordion that injects
   answers on click hides the content from exactly the thing we built it for.
   Touch targets are 44px minimum per WCAG. */
.faq{border:1px solid #dde3e8;border-radius:var(--radius);background:#fff;margin-top:12px}
.faq+.faq{margin-top:10px}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 52px 17px 20px;position:relative;
  font-weight:700;font-size:17.5px;color:var(--ink);line-height:1.4;min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:24px;width:9px;height:9px;
  border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq[open] summary::after{transform:rotate(-135deg);top:28px}
.faq summary:hover{color:var(--orange-d)}
.faq summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:var(--radius)}
.faq p{margin:0;padding:0 20px 20px;font-size:16.5px;line-height:1.62;color:var(--body);max-width:68ch}
@media (max-width:640px){
  .faq summary{font-size:16.5px;padding:16px 46px 16px 16px}
  .faq p{padding:0 16px 18px;font-size:16px}
}

/* ---------------------------------------------------------------------
   Breadcrumb trail (city pages)

   Kept deliberately quiet: this exists so the BreadcrumbList schema
   describes something a visitor can actually see, which is what Google's
   structured-data guidance requires. It is orientation, not navigation —
   nobody lands on /conroe.html and wants a breadcrumb to shout at them.

   Links get 44px of vertical tap room via padding on the row rather than
   on each link, so the trail stays one visual line while the touch
   targets stay honest on a phone.
   --------------------------------------------------------------------- */
.crumbs{background:#f3f5f7;border-bottom:1px solid #e2e7ec;font-size:.86rem}
.crumbs .wrap{padding-top:13px;padding-bottom:13px;color:#5a6570}
.crumbs a{color:#3d4a57;text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover,.crumbs a:focus-visible{color:#1b2733;border-bottom-color:#9aa6b2}
.crumbs span{color:#6c7783}
.crumbs [aria-current="page"]{color:#1b2733;font-weight:600}

/* ---------------------------------------------------------------------
   SMS consent checkbox (quote form)

   Sits on the dark quote panel, so it inherits light text. Deliberately
   NOT shrunk to fine print: carrier reviewers look at a screenshot of this
   form and reject consent language they can't read, and a customer who
   can't read it hasn't consented to anything either. 12.5px is the floor.

   The box itself is scaled up to a real target rather than relying on the
   label alone, because the label is four lines long and a mis-tap on it
   toggles consent the person didn't intend either way.
   --------------------------------------------------------------------- */
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:4px}
.consent input[type=checkbox]{
  flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--orange);cursor:pointer}
.consent label{
  font-size:12.5px;line-height:1.5;color:#cfd8de;font-weight:400;
  letter-spacing:0;text-transform:none;cursor:pointer}
.consent a{color:#fff;text-decoration:underline}
.consent a:hover{color:var(--orange)}