/* ==========================================================================
   Alpha Petroleum - QA revision pass overrides
   Loaded LAST on every page, after each page's inline <style> block, so these
   rules win without editing the duplicated per-page styles in 19 templates.
   Keep sitewide QA changes here so there is one place to review and revert.
   ========================================================================== */

/* --- 2: service-page FAQ headline is centered; align it with the accordion --- */
.sec .container > h2.p-h2[style*="text-align:center"],
.sec .container > h2.p-h2[style*="text-align: center"]{text-align:left !important}

/* --- 3: stewardship-style callouts get an intentional red rounded border --- */
.prose .prose__note{
  border:1px solid var(--red, #C21F2A);
  border-radius:var(--r, 14px);
  padding:16px 18px;
  background:rgba(194,31,42,.04);
  color:var(--t-on-light, #14161A);
}
/* the same callout on dark sections keeps legible contrast */
.sec--dark .cmp-note.prose__note,
.sec--ink2 .cmp-note.prose__note{background:rgba(194,31,42,.10);color:#E7E9EC}

/* --- 4: space between action buttons and the line of text beneath them ------
   .hero-emg is the text that sits under .phero__cta / .final__cta. It was an
   inline-flex single line hard against the buttons. Give it breathing room and
   let it wrap to 2-3 lines instead of one long run. */
.phero__cta + .hero-emg,
.final__cta + .hero-emg,
.hero-emg{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:26px;
  line-height:1.65;
  max-width:46ch;
}
.final .hero-emg{margin-top:28px;margin-left:auto;margin-right:auto;text-align:center;justify-content:center}
.hero-emg .pip{flex:none;margin-top:.45em}
/* explicit line breaks used by the QA copy blocks */
.hero-emg .lb{flex-basis:100%;height:0}

/* --- 5: bullets standardised ------------------------------------------------
   Red square markers for prose lists, check marks where the list is a
   "what you get / what to prepare" style list (.checklist already uses SVG
   ticks, so it is left alone and only normalised for spacing). */
.prose ul.p-ul{list-style:none;padding-left:0}
.prose ul.p-ul > li{position:relative;padding-left:1.6em;margin-bottom:.55em}
.prose ul.p-ul > li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;background:var(--red, #C21F2A);border-radius:2px;
}
/* article/blog body lists match the same red square */
.article ul:not(.p-ul):not(.checklist):not(.ssel__links):not(.faq__grid):not(.dlist){list-style:none;padding-left:0}
.article ul:not(.p-ul):not(.checklist):not(.ssel__links):not(.dlist) > li{position:relative;padding-left:1.6em;margin-bottom:.55em}
.article ul:not(.p-ul):not(.checklist):not(.ssel__links):not(.dlist) > li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;background:var(--red, #C21F2A);border-radius:2px;
}

/* --- 6: even box rows -------------------------------------------------------
   Sections flagged for 2-per-row on desktop, stacked on mobile. */
.relgrid.rg-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.relgrid.rg-2{grid-template-columns:1fr}}
@media(max-width:560px){.relgrid.rg-2{grid-template-columns:1fr}}

/* ==========================================================================
   BATCH 3 - footer restructure
   Column 1 now carries logo -> mission -> contact -> latest from the blog.
   The standalone "Contact" and "Latest from the blog" columns were removed by
   build-footer.mjs, which leaves the grid at exactly 5 children again.
   Styling lives here because only 2 of the 76 pages carried the .foot__recent
   rules inline; qa-overrides.css is the one file loaded on all of them.
   ========================================================================== */

/* 2026-09-29: four columns (brand, Services, Company, latest from the blog).
   Brand and blog sit on the outside at matching widths so the grid reads
   symmetrically; on tablets brand and blog each take a full row. */
.foot__main--wide{grid-template-columns:1.35fr .85fr .85fr 1.35fr;gap:48px;align-items:start}
@media(max-width:1000px){.foot__main--wide{grid-template-columns:1fr 1fr}
  .foot__main--wide>.foot__brand,.foot__main--wide>.foot__col--latest{grid-column:1/-1}}
@media(max-width:440px){.foot__main--wide{grid-template-columns:1fr}}
.foot__col--latest .foot__latest{margin-bottom:0}
/* Inside a .foot__col the generic `.foot__col a/span{display:block;padding}`
   rule outranks .foot__recent and collapses the thumb-and-title grid. */
.foot__col--latest a.foot__recent{display:grid;padding:10px 0;font-size:inherit}
.foot__col--latest .foot__recent span{padding:0}
.foot__col--latest h4{margin-bottom:8px}

/* column-1 sub-headings match the nav column headings exactly */
.foot__brand h4{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel-soft);margin:0 0 12px;
}
.foot__brand > p{margin-bottom:22px}

.foot__contact{margin-bottom:26px}
.foot__contact a,.foot__contact > span{
  display:block;color:#C4C8CD;font-size:.96rem;padding:5px 0;transition:color .2s;
}
.foot__contact a:hover{color:#fff}
.foot__contact .em{display:inline-flex;align-items:center;gap:.5em}
.foot__contact span a{display:inline}
.foot__contact .foot__addr{margin-top:12px;padding:0}
.foot__contact .foot__addr a{display:inline;padding:0;font-size:inherit;color:inherit}

/* latest-from-the-blog: compact thumb + title rows so column 1 stays short.
   Each entry has THREE children (thumb, title, date) in a two-column grid, so
   auto-placement previously dropped the date into row 2 column 1, under the
   thumbnail rather than under its own title. Visually the date detached from
   its post and floated between entries, which read as the wrong date being
   shown against a post. Every cell is now placed explicitly. */
.foot__latest{margin-bottom:24px}
.foot__recent{
  display:grid;
  grid-template-columns:74px 1fr;
  grid-template-rows:auto auto;
  column-gap:12px;row-gap:2px;
  align-items:start;
  text-decoration:none;color:inherit;padding:8px 0;
}
.foot__recent + .foot__recent{border-top:1px solid var(--line-dark,#23262B)}
.foot__recent .foot__recent-thumb{
  grid-column:1;grid-row:1 / span 2;
  display:block;width:74px;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:6px;margin:0;align-self:start;
}
.foot__recent-title{
  grid-column:2;grid-row:1;
  display:block;font:700 13px/1.4 Archivo,system-ui,sans-serif;
  color:#C4C8CD;margin:0 0 3px;transition:color .2s;
}
.foot__recent-date{grid-column:2;grid-row:2}
.foot__recent:hover .foot__recent-title{color:#fff;text-decoration:underline}
.foot__recent-date{display:block;font:500 11.5px/1.3 Inter,system-ui,sans-serif;color:var(--steel-soft);opacity:.85}

.foot__brand .foot__social{margin-top:4px}

/* ==========================================================================
   BATCH 4 - button/text spacing and even box rows
   ========================================================================== */

/* Stacked call-out under a button pair: each .he-l is its own centred line,
   with real space between the buttons above and the first line. Replaces the
   single ragged run that wrapped mid-phrase in the client screenshots. */
.hero-emg--stack{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.42em;
  max-width:none;
  margin-top:30px;
}
.hero-emg--stack .he-l{
  display:flex;align-items:center;justify-content:center;
  gap:.5em;flex-wrap:wrap;
}
.hero-emg--stack .pip{margin-top:0}
.hero-emg--stack .he-sep{opacity:.45;padding:0 .15em}
/* on a light section the same block still needs the gap above it */
.final__cta + .hero-emg--stack{margin-top:30px}

/* even box rows: 2 per row on desktop, stacked on mobile. .rg-2 is applied to
   the grids the client flagged where the last row was left short (3+1). */
.relgrid.rg-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.relgrid.rg-2{grid-template-columns:1fr}}

/* --- reviews + blog filters did not filter -------------------------------
   Both grids set `display:flex` on the card class. An author class rule beats
   the UA stylesheet's `[hidden]{display:none}`, so the JS setting `card.hidden
   = true` updated the attribute but the card stayed on screen: sorting worked,
   filtering appeared to do nothing. Re-assert the hidden state above the card
   rules. Same defect on .rv-card (/reviews/) and .bcard (/blog/). */
.rv-card[hidden],
.bcard[hidden]{display:none !important}

/* --- contact / quote form: bullet field labels in the message box ---------
   The message textarea ships with one labelled line per detail, each ending
   in ":", so the visitor fills in or edits rather than facing a blank box.
   Monospace keeps the labels aligned as they type. */
.field__hint{
  font-size:.84rem;color:var(--t-on-dark-mute,#8A9099);
  margin:0 0 2px;line-height:1.5;
}
.field textarea[name="message"]{
  font-family:var(--body,Inter,system-ui,sans-serif);
  font-size:.93rem;line-height:1.85;
}

/* --- service-areas line: pipe separators, each city links to its page ----- */
.locsa a{color:var(--red,#C21F2A);text-decoration:underline;text-underline-offset:3px}
.locsa a:hover{color:var(--t-on-light,#14161A)}
.locsa__sep{opacity:.4;padding:0 .3em}

/* ==========================================================================
   BATCH 5 - blog posts brought up to the reference post
   ========================================================================== */

/* Key Takeaways cards. Only 3 of the 28 posts carried these rules inline, so
   they live here now that every post renders the block. */
.kt{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:1.4em 0 2em}
@media(max-width:800px){.kt{grid-template-columns:1fr}}
.kt__card{
  background:#fff;border:1px solid #e4e6e9;border-left:4px solid var(--red,#C21F2A);
  border-radius:12px;padding:20px 22px;box-shadow:0 12px 30px -22px rgba(0,0,0,.35);
}
.kt__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--red,#C21F2A);margin-bottom:8px}
.kt__card p{margin:0;color:#2a2d31;font-size:1rem;line-height:1.5}

/* --- white-on-white buttons ------------------------------------------------
   .btn--ghost is color:#fff on a near-transparent white fill, which is correct
   on the dark hero and invisible on a light section. Give it light-section
   colours wherever it sits on one. Reported on the crude-oil-delivery post. */
.sec--light .btn--ghost,
.sec--reviews .btn--ghost,
.article .btn--ghost{
  background:#fff;
  color:var(--t-on-light,#14161A);
  border-color:var(--line-light,#DDE0E4);
  backdrop-filter:none;
}
.sec--light .btn--ghost:hover,
.sec--reviews .btn--ghost:hover,
.article .btn--ghost:hover{background:var(--paper-2,#ECEEF0);color:#000}

/* ==========================================================================
   BATCH 6 - careers page
   ========================================================================== */

.jobpay{display:flex;flex-direction:column;gap:2px;margin:.6em 0 1em}
.jobpay b{font:800 clamp(1.5rem,3.4vw,2.1rem)/1.1 Archivo,system-ui,sans-serif;color:#fff}
.jobpay span{font-family:var(--mono);font-size:.95rem;color:var(--red-hot,#ff5a70);letter-spacing:.04em}

/* quick stats bar: even rows on desktop, clean stack on mobile */
.jstats{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){.jstats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.jstats{grid-template-columns:repeat(2,1fr)}}
.jstats li{background:#fff;border:1px solid var(--line-light,#e4e6e9);border-radius:12px;padding:16px 18px;text-align:center}
.jstats b{display:block;font:800 1.05rem/1.2 Archivo,system-ui,sans-serif;color:var(--t-on-light,#14161A)}
.jstats span{display:block;margin-top:4px;font-size:.82rem;color:var(--t-on-light-mute,#5C626B)}

/* three-step apply flow */
.jsteps{list-style:none;padding:0;margin:26px 0 34px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.jsteps{grid-template-columns:1fr}}
.jsteps li{background:#fff;border:1px solid var(--line-light,#e4e6e9);border-left:4px solid var(--red,#C21F2A);border-radius:12px;padding:20px 22px}
.jsteps__n{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--red,#C21F2A);margin-bottom:8px}
.jsteps li b{display:block;font:700 1.05rem/1.3 Archivo,system-ui,sans-serif;margin-bottom:6px;color:var(--t-on-light,#14161A)}
.jsteps li p{margin:0 0 14px;color:var(--t-on-light-mute,#5C626B);font-size:.95rem;line-height:1.6}

/* application form: the shared .cform is dark, so it reads on the light band */
.jform{max-width:720px}
.jform input[type="file"]{
  background:var(--ink-3,#16181B);border:1px dashed var(--line-dark,#2A2E33);
  border-radius:10px;padding:14px;color:#fff;width:100%;cursor:pointer;
}
.jform input[type="file"]::file-selector-button{
  background:var(--red,#C21F2A);color:#fff;border:0;border-radius:8px;
  padding:9px 14px;margin-right:12px;cursor:pointer;font:600 .9rem/1 Inter,system-ui,sans-serif;
}
.jform input:focus-visible,.jform select:focus-visible,
.jform button:focus-visible,.jform input[type="file"]:focus-visible{outline:2px solid var(--red-hot,#ff5a70);outline-offset:2px}
.jcheck{display:flex;gap:10px;align-items:flex-start;margin:6px 0 20px;color:var(--t-on-dark-mute,#8A9099);font-size:.93rem;line-height:1.55;cursor:pointer}
.jcheck input{margin-top:.25em;flex:none;width:17px;height:17px;accent-color:var(--red,#C21F2A)}
.fmsg{margin:6px 0 0;font-size:.87rem;color:var(--t-on-dark-mute,#8A9099);min-height:0}
.fmsg--ok{color:#5fd08a}
.fmsg--err{color:#ff6b7d}
.fmsg:empty{display:none}
.jform [aria-invalid="true"]{border-color:#ff6b7d}

/* what happens next */
.jnext{margin:1em 0 0;padding-left:1.3em}
.jnext li{margin-bottom:.5em}

/* ==========================================================================
   BATCH 6 - service-page situation selector
   ========================================================================== */

/* (a) The black results box carried min-height:100%, so it stretched to match
   the tall options column: at 1440px that left ~300px of empty black below a
   124px hint. Let it size to its own content. The columns are already
   align-items:start, so they simply stop at different heights. */
.ssel__result{min-height:0}

/* (b) iOS needed two taps to choose an option. Safari fires the first tap on a
   :hover-styled element as a hover, and only the second as the activation. The
   fix is to serve the hover styles only to devices that actually hover, so a
   touch device goes straight to activation on the first tap. */
@media (hover:hover) and (pointer:fine){
  .ssel__opt label:hover{border-color:var(--red);background:#202329}
  .sptl__tab:hover{color:var(--t-on-light)}
  .capx__sum:hover{color:var(--red)}
}
@media (hover:none),(pointer:coarse){
  /* Neutralise the base stylesheet's unconditional hover rule back to the
     label's resting values. Scoped to :not(:checked) so it can never win over
     the selected state, which shares the same specificity and would otherwise
     be beaten by source order from this later stylesheet. */
  .ssel__opt input:not(:checked)+label:hover{border-color:var(--line-dark);background:var(--ink-3)}
  .sptl__tab:hover{color:inherit}
  .capx__sum:hover{color:inherit}
  /* a real pressed state, so the tap still gives feedback */
  .ssel__opt input:not(:checked)+label:active{border-color:var(--red)}
  .ssel__opt label,.sptl__tab,.capx__sum{-webkit-tap-highlight-color:rgba(194,31,42,.18);touch-action:manipulation}
}

/* Coverage service-areas line on the dark homepage band */
.locsa--dark{margin:18px 0 22px;color:var(--t-on-dark-mute,#8A9099);font-size:.95rem}
.locsa--dark a{color:var(--red-hot,#ff5a70)}
.locsa--dark a:hover{color:#fff}

/* Homepage coverage map: pins that open a location landing page.
   Leaflet already sets cursor:pointer on .leaflet-interactive, but the class is
   applied explicitly so the linked pins are identifiable in the DOM without
   reaching for Leaflet internals. */
.leaflet-interactive.pin--linked{cursor:pointer}
.leaflet-popup-content a{text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Homepage coverage section: balance the map against the copy beside it.
   The grid was align-items:start with the map on its own clamped height, so at
   1440px the copy column ran 654px and the map stopped at 416px, leaving the
   pair 237px out of step at the bottom. Stretch the map to the row height so
   both columns share one top and one bottom edge.
   Desktop only: below 880px the grid is already a single column, where the map
   keeps its own intrinsic height and simply stacks.
   ========================================================================== */
@media(min-width:881px){
  .cov__grid{align-items:stretch}
  /* .mapwrap is position:relative already, so pinning #map to its box fills the
     stretched height without depending on percentage-height resolution. */
  .cov__grid > .mapwrap{min-height:clamp(380px,46vh,500px)}
  .cov__grid > .mapwrap > #map{position:absolute;inset:0;height:auto;width:auto}
}

/* ==========================================================================
   FOLLOW-UP FIXES
   ========================================================================== */

/* --- 1: blog body links were invisible ------------------------------------
   site.css sets a{color:inherit;text-decoration:none} globally, so an inline
   link inside a post rendered identically to the sentence around it. Brand red
   plus a persistent underline, so the cue is not carried by colour alone.
   #C21F2A on the light paper background measures 5.48:1, above the 4.5:1 AA
   threshold for body text. Buttons and the back-link keep their own styling. */
.article a:not(.btn):not(.backlink):not(.foot__recent){
  color:var(--red, #C21F2A);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:color .18s ease, text-decoration-thickness .18s ease;
}
.article a:not(.btn):not(.backlink):not(.foot__recent):hover{
  color:#8E1620;                 /* darker red: 8.9:1, still clearly the link */
  text-decoration-thickness:2px;
}
.article a:not(.btn):not(.backlink):not(.foot__recent):focus-visible{
  outline:2px solid var(--red, #C21F2A);
  outline-offset:2px;
  border-radius:2px;
}
/* on the dark related-services strip the same link needs the lighter red */
.sec--ink2 .article a:not(.btn),
.sec--dark .article a:not(.btn){color:#FF5A70}
.sec--ink2 .article a:not(.btn):hover,
.sec--dark .article a:not(.btn):hover{color:#fff}

/* --- 2: "Ready when you are" sub-button text must centre ------------------
   .hero-emg is display:flex + flex-wrap, so justify-content centred each whole
   flex item per line. As soon as the copy wrapped, the rendered lines read as
   left-aligned against the centred heading and buttons above them. Block-level
   with text-align:center centres every rendered line. The --stack variant is
   already a centred column and is left alone. */
.final .hero-emg:not(.hero-emg--stack){
  display:block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width:58ch;
}
.final .hero-emg:not(.hero-emg--stack) .pip{
  display:inline-block;
  vertical-align:middle;
  margin:0 .5em 0 0;
}

/* --- 3: careers page rendered ~26,500px tall -----------------------------
   /open-positions/ is generated by build-careers.mjs, which never carried the
   .checklist rules that every hand-built page has in its inline <style>. With
   no sizing, each inline check SVG expanded to its container: 1240x1240px per
   icon, 1273px per list item, two sections at 9,236px and 10,544px. The page
   was complete but padded with enormous blank gaps, which reads as "not
   finishing loading". Defined here so any page using .checklist is covered,
   including regenerated ones. */
.checklist{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 34px;max-width:none}
@media(max-width:820px){.checklist{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.checklist{grid-template-columns:1fr}}
.checklist li{position:relative;padding-left:1.9em;font-size:1.02rem;line-height:1.6;color:var(--t-on-light)}
.checklist li svg{position:absolute;left:0;top:.15em;width:18px;height:18px;flex:none;color:var(--red, #C21F2A)}
/* belt and braces: any stray inline icon in a prose list keeps a sane size */
.prose ul li > svg:first-child{width:18px;height:18px;flex:none}

/* --- card lists (.dlist): marker belongs to the heading, not the corner -----
   .dlist > li is a padded white card, but it was still matching the generic
   article-list marker rule, which absolutely positions a red square at the li's
   top-left. On a card that put the square in the card's corner at the very
   edge, detached from and above-left of its heading, while the inherited 1.6em
   indent pushed the heading 27px to its right. It read as an orphaned marker.
   Drop the corner square, give the card its own padding back, and render the
   marker inline at the head of the heading so the two read as one unit. The
   grid gap handles spacing, so the inherited margin-bottom goes too. */
.article ul.dlist > li > b{display:block}
.article ul.dlist > li > b::before{
  content:"";
  display:inline-block;
  width:9px;height:9px;
  background:var(--red, #C21F2A);
  border-radius:2px;
  margin-right:.6em;
  vertical-align:middle;
  position:relative;
  top:-1px;
}

/* --- "Ready when you are": the stacked variant was never actually centred ---
   The Batch 4 base rule is a GROUPED selector, and one member of that group is
   `.final__cta + .hero-emg` at two classes. The stacked block sits directly
   after the button row, so it matches that member, which outranks the
   single-class `.hero-emg--stack` and reinstated align-items:flex-start and
   max-width:46ch. Combined with flex-direction:column that packed both lines
   against the left edge of a 490px box which was itself centred by auto
   margins, so the block measured centred while the visible text sat 88px and
   112px left of the section axis.

   Two changes, so this cannot regress on specificity again:
   1. match the offending selector's weight and come later in the file;
   2. give each line width:100% and centre it on its own, so the result no
      longer depends on the parent's align-items at all. */
.final__cta + .hero-emg--stack,
.phero__cta + .hero-emg--stack,
.final .hero-emg--stack{
  align-items:center;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.hero-emg--stack > .he-l{
  width:100%;
  justify-content:center;
  text-align:center;
}

/* --- Header nav, 2026-09-29: matches the reference site's menu -------------
   Generated by tooling/build-nav.mjs. Plain top-level links sit beside the
   dropdown items; Services opens a 3-column panel centred on the header
   container rather than on its own label, so it never runs off the right edge
   between 1000px and 1200px. */
.hdr .container{position:relative}
.hdr__nav{gap:24px}
.hdr__nav>a.link{white-space:nowrap}
.hdr__nav .navitem--mega{position:static}
.hdr__nav .navitem--mega>.hdr__mega{
  left:50%;width:min(860px,calc(100% - 32px));min-width:0;
  display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:4px 22px;padding:18px 18px 16px}
/* Longer hover bridge: the panel hangs off the container, not the label. */
.hdr__mega::before{top:-30px;height:30px}
.hdr__col{display:flex;flex-direction:column;min-width:0}
.hdr__mega a{white-space:normal;line-height:1.35}
.hdr__mega a.hdr__colhead{font-weight:800;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;border-bottom:1px solid var(--line-dark);border-radius:0;margin-bottom:6px;padding-bottom:10px}
.hdr__mega a.hdr__colhead:hover{background:none;color:var(--red,#C21F2A)}
/* Mobile: the three Services columns become labelled runs inside one group. */
.mmenu__sub a.mmenu__subhead{font-family:var(--disp);font-weight:800;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;padding:14px 0 4px}
.mmenu__sub a.mmenu__subhead:first-child{padding-top:6px}
@media (max-width:1180px){.hdr__nav{gap:18px}.hdr__nav a.link{font-size:.88rem}}
.hdr__nav .navitem>.link,.hdr__phone{white-space:nowrap}
/* Six top-level items plus phone and the emergency button need about 1080px,
   so the burger takes over at 1100px instead of the template's 1000px. */
@media (max-width:1100px){.hdr__nav{display:none}.burger{display:flex}}

/* --- Remediation "From our job sites" strip, 2026-09-29 --------------------
   Three of Pete's field photos, one per project category, each linking to its
   full gallery on /recent-work/. Light section to break up the dark run. */
.fieldstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.fieldstrip__card{display:block;position:relative;border-radius:var(--r,14px);overflow:hidden;color:#fff;text-decoration:none;background:#111}
.fieldstrip__card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.fieldstrip__card span{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-family:var(--disp);font-weight:700;font-size:1.02rem;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.fieldstrip__card:hover img,.fieldstrip__card:focus-visible img{transform:scale(1.04)}
.fieldstrip__card:focus-visible{outline:3px solid var(--red,#C21F2A);outline-offset:3px}
@media(max-width:760px){.fieldstrip{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fieldstrip__card img{transition:none}}

/* --- Homepage alignment fixes, 2026-09-29 ----------------------------------
   Division cards anchor their copy to the bottom, so a description that wraps
   to four lines lifted that card's number and title above its neighbours.
   Reserve four lines for every description so numbers, titles and links share
   one line across the row. */
.dcard p{min-height:6.4em}
/* "How a job runs" steps: the red bar followed the text, so a longer step
   pushed its bar lower. Pin the bar to the foot of each equal-height card. */
.pstep{display:flex;flex-direction:column}
.pstep p{flex:1 1 auto}
.pstep .pstep__bar{margin-top:auto;flex:none}
/* Fleet band CTA: the copy column is a stretching flex column, which drew the
   button the full column width. Size it to its label like every other CTA. */
.band__copy > .btn{align-self:flex-start}

/* --- "Service areas" line, 2026-09-29 ---------------------------------------
   Label on its own line, city links beneath. Each link draws its divider in
   front of itself; the row is pulled left by one divider width inside a
   clipping box, so whichever link starts a line has its divider cut off and no
   line ever opens with an orphaned "|". */
.locsa .locsa__label{display:block;margin-bottom:4px}
.locsa .locsa__links{display:block;overflow:hidden}
.locsa .locsa__row{display:flex;flex-wrap:wrap;row-gap:4px;margin-left:-1.5em}
.locsa .locsa__row a::before{content:"|";display:inline-block;width:1.5em;text-align:center;
  color:currentColor;opacity:.35;text-decoration:none}
.locsa--dark .locsa__row a::before{color:var(--t-on-dark-mute,#8A9099);opacity:.6}
.locsa .locsa__row a{white-space:nowrap}

/* --- Compact hero, 2026-09-29 ------------------------------------------------
   Pages whose job starts below the hero (Documents first) do not need a
   full-screen banner. Scoped by class so every other hero keeps its size. */
.phero.phero--compact{min-height:clamp(320px,42svh,460px);padding-top:calc(56px + 64px);padding-bottom:44px}
.phero.phero--compact + .sec{padding-top:clamp(40px,4.5vw,64px)}
.phero.phero--compact .phero__inner{min-height:0}

/* Contact, quote, 24/7 and course forms: the grid column sized itself to the
   form's min-content width (368px) and pushed pages 11px wider than a 375px
   phone. Let grid children shrink to the column. */
.cgrid > *{min-width:0}
@media(max-width:880px){.cgrid{grid-template-columns:minmax(0,1fr)}}
/* Content directly under a compact hero is on screen at load. The reveal
   observer needs 12% of an element in view, which a very tall block (all six
   courses sit in one prose block) never reaches, so it stayed invisible until
   scrolled. Show it immediately instead of waiting on the observer. */
.phero.phero--compact + .sec .rv{opacity:1;transform:none}

/* Two-line call-outs (tooling/stack-cta-lines.mjs). Closing banners are
   centred, but hero copy is left-aligned, so under a hero the lines follow
   the buttons to the left instead of centring across the full width. */
.phero .hero-emg--stack{align-items:flex-start;text-align:left;max-width:60ch;margin-left:0}
.phero .hero-emg--stack > .he-l{justify-content:flex-start;text-align:left;width:auto}
.hero-emg--stack .he-l,.final h2,.final p,.phero h1,.phero__sub{text-wrap:balance}

/* Mega menu: long labels wrapped to two lines and knocked rows out of step
   across the three columns. Keep every label on one line and size the panel to
   its content (about 960px, inside the 1100px+ desktop range). */
.hdr__nav .navitem--mega>.hdr__mega{width:max-content;max-width:calc(100% - 32px);grid-template-columns:repeat(3,auto);gap:2px 30px;padding:20px 22px 18px}
.hdr__mega a{white-space:nowrap;padding:8px 12px}
.hdr__mega a.hdr__colhead{margin-bottom:8px}

/* 24/7 Emergency Contact hero: lead with the service, not "Contact Us". */
.emg247{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);flex-wrap:wrap;margin:6px 0 20px}
.emg247__badge{font-family:var(--disp);font-weight:900;font-size:clamp(3.4rem,8vw,6rem);line-height:.9;color:var(--red,#C21F2A);
  letter-spacing:-.03em;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.emg247__txt{font-family:var(--disp);font-weight:800;color:#fff;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.4;max-width:30ch;padding-left:clamp(20px,2.6vw,32px);border-left:2px solid rgba(255,255,255,.22)}
.emg247__calls{display:flex;gap:12px;flex-wrap:wrap}
.emg247__calls .btn{font-size:1.08rem}

/* Open Positions: real APT photos to break up the copy (careers-body.html). */
.cduo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center}
.cduo--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.cduo__media{margin:0;border-radius:var(--r,14px);overflow:hidden;box-shadow:0 24px 50px -28px rgba(0,0,0,.45)}
.cduo__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:880px){.cduo,.cduo--flip{grid-template-columns:1fr}}
.relcard.eqcard{padding:0 0 18px;overflow:hidden}
.relcard.eqcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px}
.relcard.eqcard b,.relcard.eqcard span{padding:0 20px}
.emg247__l{display:block}.emg247__txt{max-width:none}

/* --- Section H: light sections breaking dark runs (tooling/lift-dark-runs.mjs)
   These blocks were written for a dark background: inline white headings,
   pale notes and lists. Re-colour them for the light surface. Image cards
   (division cards, photos) keep their own dark treatment. */
.sec--lift{background:var(--paper,#F4F5F7)}
.sec--lift .cmp-intro h2,.sec--lift > .container > h2,.sec--lift .svc-duo__copy h2,.sec--lift .lead h2,.sec--lift .proof__grid h2{color:var(--t-on-light,#14161A)!important}
.sec--lift .cmp-note,.sec--lift .lead p,.sec--lift .proof__grid p{color:var(--t-on-light-mute,#4A5058)}
.sec--lift .trustlist li{color:var(--t-on-light,#14161A)}
.sec--lift .eyebrow:not(.on-light){color:var(--red,#C21F2A)}
.sec--lift .trust-locs a{color:var(--t-on-light,#14161A);border-color:rgba(20,22,26,.18)}
.sec--lift .svc-duo__media img{box-shadow:0 24px 50px -28px rgba(0,0,0,.45)}
.sec--lift .proof__grid :is(p,li,span,b,strong):not(figcaption *){color:var(--t-on-light,#14161A)!important}.sec--lift .proof__grid p{color:var(--t-on-light-mute,#4A5058)!important}

/* --- Section H: lighter forms ------------------------------------------------
   The contact, quote, 24/7, course and careers forms sat in a near-black card
   with dark fields. Soften to a white card with white fields so the forms feel
   open and easy to fill in. Same markup, same fields, same FormSubmit targets. */
.cform{background:#fff;border:1px solid var(--line-light,#DDE1E6);box-shadow:0 30px 60px -38px rgba(12,14,18,.35)}
.cform h3{color:var(--t-on-light,#14161A)}
.cform p.lead-sm,.cform .field__hint{color:var(--t-on-light-mute,#4A5058)}
.cform .field label{color:#5A616B}
.cform .field input,.cform .field select,.cform .field textarea{background:#fff;color:var(--t-on-light,#14161A);
  border:1px solid #C9CED5;color-scheme:light;transition:border-color .15s,box-shadow .15s}
.cform .field input::placeholder,.cform .field textarea::placeholder{color:#8A9099}
.cform .field input:hover,.cform .field select:hover,.cform .field textarea:hover{border-color:#A9B0B9}
.cform .field input:focus,.cform .field select:focus,.cform .field textarea:focus{border-color:var(--red,#C21F2A);box-shadow:0 0 0 3px rgba(194,31,42,.14)}
.cform .field select option{color:#14161A;background:#fff}

/* Northern California page: NRG Antioch project photos. */
.ncal-pano{margin:22px 0 0;border-radius:var(--r,14px);overflow:hidden}
.ncal-pano img{display:block;width:100%;height:auto}
.ncal-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.ncal-pair figure{margin:0;border-radius:var(--r,14px);overflow:hidden;background:#fff;border:1px solid var(--line-light,#DDE1E6)}
.ncal-pair img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ncal-pano figcaption,.ncal-pair figcaption{font-size:.86rem;color:var(--t-on-light-mute,#4A5058);padding:10px 14px}
@media(max-width:700px){.ncal-pair{grid-template-columns:1fr}}

/* Homepage map: OpenStreetMap tiles replace CARTO dark tiles (which now demand
   an API key). Darken them to the site's palette; markers and attribution sit
   outside the tile pane and keep their own colours. */
#map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.35)}
#map .leaflet-control-attribution a{color:#B9BEC6}

/* --- Round 2, 1.1: fields and pickers on dark backgrounds ---------------------
   Any selectable box or field sitting on a black section is a white box with
   black type. The red border on hover is unchanged (same --red). Covers the
   service-page pickers (.ssel__opt), the homepage job builder (.opt) and any
   plain field placed on a dark section. */
.ssel__opt label,.opt{background:#fff;color:var(--t-on-light,#14161A);border-color:#D5D9DF}
.ssel__opt label:hover,.opt:hover{background:#fff;border-color:var(--red,#C21F2A)}
.ssel__opt label .tag,.opt .tag{color:#5A616B}
.ssel__opt input:checked + label{background:#FFF5F5;border-color:var(--red,#C21F2A);color:var(--t-on-light,#14161A)}
.ssel__opt input:checked + label .tag{color:var(--red,#C21F2A)}
.ssel__opt input:focus-visible + label{outline-color:var(--red,#C21F2A)}
:is(.sec--dark,.sec--ink2,.builder,.band,.emg,.careers) :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=file]),select,textarea){
  background:#fff;color:var(--t-on-light,#14161A);border:1px solid #D5D9DF;color-scheme:light}
:is(.sec--dark,.sec--ink2,.builder,.band,.emg,.careers) :is(input,select,textarea):hover{border-color:var(--red,#C21F2A)}

/* --- Round 2, 1.3 / 6: breathing room between a bulleted list and the info box
   that follows it (the "details above form a useful summary" notes on 18 pages).
   Inline margins on individual notes still win where a page sets its own. */
:is(ul,ol) + :is(.prose__note,.cmp-note,.emg-note){margin-top:clamp(26px,3vw,38px)}
.checklist{margin-bottom:0}

/* Round 2, 2.4: the homepage Service areas line lists regions, and only
   Northern California has a page, so plain-text entries share the divider. */
.locsa .locsa__row > span::before{content:"|";display:inline-block;width:1.5em;text-align:center;opacity:.35}
.locsa--dark .locsa__row > span{color:#E7E9EC;white-space:nowrap}
.locsa--dark .locsa__row > span::before{color:var(--t-on-dark-mute,#8A9099);opacity:.6}

/* --- Round 2, 2.5: homepage reviews on white ---------------------------------- */
.sec.sec--reviews{background:#fff;color:var(--t-on-light,#14161A)}
.sec--reviews h2{color:var(--t-on-light,#14161A)}
.sec--reviews > .container > p{color:var(--t-on-light-mute,#4A5058)}
.sec--reviews .rv-card{background:var(--paper,#F4F5F7);border-color:var(--line-light,#DDE1E6)}
.sec--reviews .rv-card__reply{background:rgba(20,22,26,.04)}
.sec--reviews .rv-card__tag{background:rgba(20,22,26,.06)}
.sec--reviews .rv-card__full{color:var(--red,#C21F2A)}

/* --- Round 2, 3.2: About Us credential cards reversed: white cards, dark type,
   section background stays black. */
.credcard{background:#fff;border-color:#fff;color:var(--t-on-light,#14161A)}
.credcard h3,.credcard h4,.credcard b,.credcard strong{color:var(--t-on-light,#14161A)!important}
.credcard p,.credcard li,.credcard span{color:var(--t-on-light-mute,#4A5058)!important}
.credcard a:not(.btn){color:var(--red,#C21F2A)}

/* --- Round 2, 4: Documents intro spacing ----------------------------------------
   Space after headings, between paragraphs, and before and after the COI button.
   Several gaps are inline styles on the page, hence the !important. */
.coi-feature h2.p-h2{margin:.3em 0 .7em!important}
.coi-feature p{margin:0 0 1.2em!important;line-height:1.7}
.coi-feature .btn{margin-top:14px}
.coi-feature{margin-bottom:clamp(44px,5vw,64px)}
.coi-feature + .eyebrow{margin-top:0!important}
.coi-feature ~ h2.p-h2:not(.docsec){margin:.3em 0 .7em!important}
.coi-feature ~ p{margin:0 0 clamp(36px,4vw,52px)!important;line-height:1.7}
#docs > .docsec:first-child{margin-top:0}

/* --- Round 2, 9: red border on hover for the info cards on Oil Transport and
   Truckload Logistics, the same border-color the linked relcard/loccard cards
   use. No lift: these cards are not links. */
.wcard{transition:border-color .2s ease}
.wcard:hover{border-color:var(--red,#C21F2A)}

/* --- Round 2, 1.2: region names in the city chip strips. Regions without a page
   are plain text, so they get the chip shape but no hover or pointer. */
.trust-locs > span{font-family:var(--disp);font-weight:600;font-size:.9rem;color:#fff;background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);border-radius:999px;padding:.55em 1.05em;cursor:default}
.sec--light .trust-locs > span,.sec--lift .trust-locs > span{color:var(--t-on-light,#14161A);background:transparent;border-color:rgba(20,22,26,.18)}

/* --- Round 2, 1.4: in-text links look like links ---------------------------------
   Pages carried 14 to 47 internal links each, but most rendered exactly like body
   text. One subtle, consistent treatment for links inside paragraphs and list
   items: brand red text with a light underline, full red on hover. Buttons,
   chips, cards, menus, the footer and the Service areas lines are untouched. */
.sec :is(p,li) a:not(.btn):not(.locsa *):not(.ticket *){
  color:var(--maroon,#7A1620);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(122,22,32,.4);transition:color .15s,text-decoration-color .15s}
.sec :is(p,li) a:not(.btn):not(.locsa *):not(.ticket *):hover{color:var(--red,#C21F2A);text-decoration-color:currentColor}
:is(.sec--dark,.sec--ink2,.builder,.band,.emg,.careers) :is(p,li) a:not(.btn):not(.locsa *):not(.ticket *){
  color:#fff;text-decoration-color:rgba(255,255,255,.45)}
:is(.sec--dark,.sec--ink2,.builder,.band,.emg,.careers) :is(p,li) a:not(.btn):not(.locsa *):not(.ticket *):hover{color:var(--red-hot,#ff5a70);text-decoration-color:currentColor}

/* --- Round 2, 8: Bulk Trucking material types as a card grid ------------------ */
.matgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.matcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light,#DDE1E6);border-radius:var(--r,14px);
  padding:24px 24px 20px;transition:border-color .2s ease}
.matcard:hover{border-color:var(--red,#C21F2A)}
.matcard h3{font-family:var(--disp);font-weight:800;font-size:1.08rem;line-height:1.3;color:var(--t-on-light,#14161A);margin:0 0 .55em}
.matcard p{color:var(--t-on-light-mute,#4A5058);font-size:.97rem;line-height:1.65;margin:0 0 1.1em;flex:1}
.matcard__link{display:inline-flex;align-items:center;gap:.45em;font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--red,#C21F2A);text-decoration:none}
.matcard__link svg{width:1em;height:1em;transition:transform .2s}
.matcard__link:hover svg{transform:translateX(3px)}
@media(max-width:980px){.matgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.matgrid{grid-template-columns:1fr}}

/* --- Round 2, 7: Fuel Polishing page components ------------------------------ */
.fpgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.fpgal figure{margin:0;border-radius:var(--r,14px);overflow:hidden}
.fpgal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:760px){.fpgal{grid-template-columns:1fr}}

/* --- Font fixes, 2026-10-07 ----------------------------------------------------
   Running text set in the monospace label face read as a typewriter: the
   message box template lines, the footer address and the copyright line.
   Monospace stays for small uppercase labels only. */
.field textarea[name="message"]{font-size:1rem;line-height:1.7}
.foot__addr,.foot__contact .foot__addr{font-family:var(--body,Inter,system-ui,sans-serif);font-size:.92rem;line-height:1.6;letter-spacing:0}
.legal{font-family:var(--body,Inter,system-ui,sans-serif);font-size:.84rem;letter-spacing:0}

/* Services mega menu: three equal columns, like the reference site. Long labels
   wrap instead of widening their column. */
.hdr__nav .navitem--mega>.hdr__mega{width:min(940px,calc(100% - 32px));grid-template-columns:repeat(3,minmax(0,1fr))}
.hdr__mega a{white-space:normal}

/* Homepage division cards: the "01 / Environmental Services" label was small red
   monospace on a photo. White, normal face, stronger shadow; the number stays red. */
.dcard__num{font-family:var(--body,Inter,system-ui,sans-serif);font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
.dcard__num span{color:var(--red-hot,#ff5a70)}

/* Homepage reviews: five-star rating, confirmed by the client for these three
   reviews. Visual only; no aggregateRating or reviewRating schema. */
.rv-card__stars{display:flex;gap:3px;margin-bottom:-2px}
.rv-card__stars svg{width:18px;height:18px;fill:#F5B301}

/* Sticky mobile CTA bar is white: the ghost button needs dark text to be visible (2026-10-07). */
.mbar .btn--ghost{color:var(--t-on-light,#14161A);background:#fff;border-color:var(--line-light,#C9CED5)}
.mbar .btn--ghost:hover{border-color:var(--red,#C21F2A)}

/* Phone width: long content button labels wrap instead of running past the screen edge, where body overflow-x:hidden clipped them (pre-launch check 2026-10-16). Header and sticky bar buttons are not affected. */
@media (max-width:600px){.sec .btn,.final .btn,.phero .btn,.article .btn{white-space:normal;max-width:100%;line-height:1.25;text-align:center;justify-content:center}}

/* Real APT photos supplied at 640x480 (Outlook-compressed). Never stretch them past native width (2026-10-20). */
.afig.afig--native{max-width:640px;margin-inline:auto}

/* Form failure message (2026-10-30): shown when a submission fails or times out, with the call-or-text number. */
.form-fail{margin:14px 0 0;padding:12px 14px;border-left:4px solid var(--red,#C21F2A);background:#FFF5F5;color:#14161A;font-size:.95rem;line-height:1.5;border-radius:0 8px 8px 0}
.form-fail a{color:#C21F2A;font-weight:700;white-space:nowrap}
.form-fail[hidden]{display:none}