/* Additions on top of the ported Webflow stylesheet: mobile nav toggle,
   contact form, and small structural bits not present in the original CSS. */

/* Homepage FAQ section — new content added for AEO (Answer Engine
   Optimization): FAQPage schema needs matching *visible* content, so this is
   a real, always-on section, not hidden markup. Native <details>/<summary>
   for the expand/collapse so it works with zero JS. */
.section-faq {
  background-color: #fff;
  color: #333;
}

.faq-list {
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid rgba(51, 51, 51, 0.15);
  padding: 1rem 0;
}

.faq-question {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::before {
  content: "+";
  display: inline-block;
  width: 1.25rem;
  color: #033d71;
  font-weight: 700;
}

.faq-item[open] .faq-question::before {
  content: "\2212";
}

.faq-answer {
  margin-top: 0.75rem;
  margin-left: 1.25rem;
  color: #555;
  line-height: 1.5;
}

/* Long-form legal pages (Terms, Privacy) — an Impeccable critique (two
   independent assessments) found real defects here: the content column ran
   to ~150 characters/line (no measure constraint anywhere in the ported
   CSS), paragraphs/headings had architecturally zero vertical margin
   (l-n-dawkins.css's bare h1-h6/p rules are all margin:0), and body links
   were invisible (global `a{color:inherit}` with no scoped exception). The
   fix for the missing rhythm turned out to already exist in the ported
   CSS — `.text-rich-text` has exactly the right heading/paragraph spacing —
   it just wasn't wired to the `.w-richtext` wrapper these pages actually
   use, so it silently did nothing. Added alongside `.w-richtext` (kept, for
   its real Webflow structural/clearfix rules) rather than replacing it. */
.legal-content {
  max-width: 46rem;
}

.text-rich-text a,
.w-richtext a {
  color: #1967ac;
  text-decoration: underline;
}

.text-rich-text a:hover,
.w-richtext a:hover {
  color: #033d71;
}

/* Simple in-page nav for a 9+ section reference document — the headings
   already had auto-generated ids (Astro's markdown renderer adds them by
   default), just nothing surfaced them. */
.legal-toc {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.5rem;
  background: #f7f7f7;
  border-radius: 4px;
}

.legal-toc ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc a {
  font-size: 0.9375rem;
}

/* Service detail pages (machining/industrial/automotive): the hero banner's
   dark overlay box (.header-black-overlay is a real ported class,
   rgba(0,0,0,0.16) background, but had no image/centering context wired to
   it), the per-subsection representative images (image field added to each
   service's sections[] — content previously had no images at all despite the
   original showing one per subsection), and the "other services" thumbnails
   (.other-services-link is real/ported, just never used — links were plain
   text). Matched against the live original's actual rendered pages. */
.header-banner-image {
  position: relative;
  min-height: 16rem;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .header-banner-image {
    min-height: 11rem;
  }
}

.header-black-overlay {
  text-align: center;
  justify-content: center;
}

.header-black-overlay h1 {
  font-size: 1.75rem;
  margin: 0;
}

.service-summary {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.service-subsections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.service-subsection {
  text-align: center;
}

.service-subsection .service-gallery-item {
  margin-bottom: 1rem;
}

.service-subsection img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.service-subsection h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 767px) {
  .service-subsections-grid {
    grid-template-columns: 1fr;
  }
}

.other-services-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

.other-services-link {
  width: 10rem;
}

.other-services-link span {
  display: block;
  padding: 0.75rem 0.75rem 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
}

.other-services-link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Homepage services intro ("Services" / "Precise. Experienced. Capable").
   .text-style-caption is white-on-85%-opacity by design — correct on the
   dark-blue testimonials section, but .section-services has a WHITE
   background, so the caption was rendering as barely-visible white-on-white.
   Scoped to this section only so the testimonials caption stays untouched. */
.section-services .text-style-caption {
  color: #033d71;
  margin-bottom: 0.75rem;
}

.section-services h2 {
  /* Smaller and bolder per feedback — the ported h2 default (2rem, weight
     400) reads as a large, thin display line; tightening the size while
     adding real weight gives it more presence per pixel instead of just
     occupying more space. */
  font-size: 1.75rem;
  font-weight: 700;
  /* Was 3rem — overcorrected on breathing room; halved so the heading still
     has room to breathe without pushing the cards too far away. */
  margin-bottom: 1.5rem;
}

/* Design tweaks on top of the (correctly ported) originals, per direct
   feedback: the footer CTA heading read too large at 2rem even though that's
   the real value from the source CSS. Trimmed further here as part of a
   general footer type-scale reduction — still the largest, most prominent
   text in the footer (it's the primary ask), just not competing with body
   copy in scale the way 1.5rem still did. */
.footer_question-statement {
  font-size: 1.375rem;
  margin-bottom: 0.5em;
}

/* Bug in the ported source: the mobile (<=479px) rule for this wrapper sets
   justify-content: center on a column flex container, which only centers
   vertically — align-items (horizontal centering) was never set, so the
   heading read centered (via its own text-align) while the "Get a Quote"
   button sat left-aligned beneath it. */
@media screen and (max-width: 479px) {
  .footer-heading_wrapper.margin-bottom.margin-medium {
    align-items: center;
  }
}

/* General footer type-scale reduction, and using scale + treatment (not just
   opacity) to make Gestalt grouping-by-purpose legible: "contact us" is a
   category LABEL for the info below it, not more body content at the same
   size — reusing .text-style-caption's uppercase/letter-spaced treatment
   (already used for "Services"/"Testimonials" section labels elsewhere on
   the site) makes it read as a label at a glance, consistent with the rest
   of the design system, instead of just a smaller sentence. */
.footer_contact-info {
  font-size: 0.875rem;
}

/* Footer de-emphasized text (privacy/terms links, copyright line, "contact us"
   label) all render as white at reduced opacity over the #033d71 footer
   background. Confirmed by an Impeccable critique (two independent
   assessments) that opacity:0.5 computes to ~3.9-4.1:1 against that
   background — below WCAG AA's 4.5:1 for normal-size text. 0.65 clears it
   with a comfortable margin (~5.5:1) while still reading as visually
   secondary. Also confirmed via the same critique: the footer's blue
   background is the deliberate, correct look — the ported CSS has a dead
   `.footer.page-padding { background-color: #000; ... }` rule (l-n-dawkins.css)
   that can never match current markup (the two classes land on different
   elements), which is inert leftover from the Webflow port, not a bug to
   "fix" by turning the footer black. */
.privacy-links.text-style-muted {
  font-size: 0.75rem;
  opacity: 0.65;
}

/* .footer_privacy-terms's ported grid (grid-template-columns: 4.75fr
   minmax(81px,1fr) minmax(100px,1fr)) gives the Privacy and Terms links their
   own wide grid cells at container width — each link's text sits at the left
   edge of a ~190px-wide column, so the empty cell space between "Privacy" and
   "Terms and Conditions" read as a gap between them, not two legal links
   grouped together. Overridden as a flex row: copyright on the left, Privacy
   + Terms as one tightly-gapped group on the right. */
.footer_privacy-terms {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 0.75rem;
  /* A hairline divider gives the legal bar its own Gestalt boundary —
     visually demoting it below the CTA/contact/nav content above as a
     distinct, lower-priority group, the way most footers separate legal
     info from primary content. */
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.legal-links-group {
  display: flex;
  gap: 1.5rem;
}

.copyright-notice {
  opacity: 0.65;
}

/* .footer_contact was promoted from a plain <div> to an <h4> so screen-reader
   users navigating by heading structure can reach the contact block (they
   previously could only land on the CTA h3). Given the caption treatment
   below instead of just inheriting body-text styling at reduced opacity, so
   it reads as a section label — the same role .text-style-caption plays for
   "Services"/"Testimonials" elsewhere on the site — clearly separating it
   from the contact details it introduces. */
/* Shared caption-label device, used everywhere a footer group needs a name:
   the contact block ("contact us") and, below, the two nav columns
   ("Company" / "Services"). One consistent treatment across all three is
   what makes the footer read as a set of labeled, purposeful groups instead
   of loose links with no clear home. */
.footer-caption-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, 0.65);
  margin-bottom: 0.75rem;
}

h4.footer_contact {
  margin-top: 0;
}

/* The footer nav previously mixed top-level pages (Home/About/Contact) and
   Services sub-pages (Machining/Industrial/Automotive) in one flat 6-item
   grid, treating a primary page and a service sub-page as the same kind of
   link. Split into two labeled columns so the distinction — and the nav's
   own identity as a "sitemap" group, not a handful of stray links — is
   visible at a glance. */
.footer-nav-columns {
  display: flex;
  gap: 3rem;
}

.footer-nav-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-nav-column .footer_link {
  /* The ported .footer_link has align-self:center, meant to vertically
     center it in the original's horizontal row layout. In this vertical
     column, that axis flips to horizontal — so it was centering each link
     under its label instead of keeping them flush left. */
  align-self: flex-start;
  padding-left: 0;
  padding-right: 0;
  /* Noise reduction: an uppercase, letter-spaced label directly above an
     uppercase link list stacked two uppercase devices on top of each other.
     Keeping uppercase as the label's device only and letting the links
     underneath read in normal case gives the eye one thing to anchor on
     instead of two competing all-caps blocks. */
  text-transform: none;
  font-size: 0.9375rem;
}

/* .footer-contact-details-block only has a horizontal gap between its own
   icon+text (it's a row flex), not a vertical gap between one block and the
   next. Tight (not the earlier 0.5rem) since these three lines — email,
   phone, hours — are one Gestalt group by proximity: closely related "how to
   reach us" facts, not separate topics that need generous separation. */
.footer-contact-details-block {
  margin-bottom: 0.375rem;
}

.footer-contact-details-block:last-child {
  margin-bottom: 0;
}

/* Footer contact links (email/phone) were visually identical to the static
   address text next to them, since .footer_contact-info styles both and the
   global `a{color:inherit}` reset removes all link affordance. Distinguish
   them without a full color change so they still read as part of the same
   contact block. */
.footer_contact-info[href] {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}

.footer_contact-info[href]:hover {
  text-decoration-color: currentColor;
}

/* No :hover rule existed anywhere for the footer's primary nav or legal
   links — mouse users got no feedback at all (keyboard users at least had
   the global :focus-visible outline). Reuses the accent color the ported CSS
   already defines for .footer_social-link:hover, for consistency. */
.footer_link:hover,
.privacy-links:hover {
  color: #ff6433;
}

/* Social icons had no base rule anywhere (only a stray tablet-breakpoint
   tweak), so the <a> wrapped a bare 20x20 SVG with no extra hit area —
   under WCAG 2.5.8's 24x24 minimum. Padding grows the tap target without
   changing the visible icon size. */
.social-links-box a {
  display: inline-flex;
  padding: 0.5rem;
  margin: -0.5rem;
}

/* The three linked stylesheets reference these as var(--image-...) in several
   places (.section-services, .home-cta_content-left, decorative backgrounds,
   etc.) — on the original site each PAGE set them inline in a <style> block
   Webflow generates per-page, which we never carried over, so every one of
   these backgrounds was silently rendering blank. Defined once, globally,
   instead of patching each consuming selector individually. A few of the
   original's decorative pattern/texture assets (steadydrummer-pattern.png,
   27.png, living-1.svg, cta-bg.png, white-pattern-bg.png, kcl-color.svg) have
   been removed from the live site entirely (404 now) and are omitted below —
   low-impact decorative fills, not core to the brand identity like the
   symbol watermark or photography is. */
:root {
  --image-i12c18793: url("/assets/images/symbol.png");
  --image-245c5dbf: url("/assets/images/cta-image.png");
  --image-46371529: url("/assets/images/services-industrial.png");
  --image-ec2c3a5: url("/assets/images/services-automotive.png");
  --image-78d28efb: url("/assets/images/dawkins-tractor-scoop.png");
  --image-i656b5bd3: url("/assets/images/services-machine.png");
  --image-47cdbc95: url("/assets/images/background-rocket-meteors2.svg");
  --image-46d5db78: url("/assets/images/cta-worker.jpeg");
  --image-18340cda: url("/assets/images/required-circle.svg");
  --image-i1a18f4ef: url("/assets/images/colourdefault.svg");
  --image-503b1214: url("/assets/images/favicon256.png");
  --image-i4d2e848: url("/assets/images/cta-right.jpg");
  --image-i6809e0ee: url("/assets/images/services-industrial2.jpeg");
}

/* The original site set this globally via an inline per-page style embed
   (Webflow's "global styles" snippet) that never got carried over when we
   ported the three linked stylesheets — links were falling back to the
   browser's default blue + underline instead of inheriting their
   surrounding text color. Same embed also defined this 3-line-clamp
   utility, used on the homepage service card summaries below. */
a {
  color: inherit;
  text-decoration: none;
}

.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Homepage service cards: progressive disclosure. The original reveals each
   card's summary on hover via a Webflow IX2 interaction (JS-driven height
   animation, not reproducible from the exported CSS alone) — the description
   is hidden by default, and revealing it visually shrinks the image because
   the blue text panel grows from the bottom of a fixed-height card. Reproduced
   with a plain CSS max-height transition, gated on :hover/:focus-within so it
   still works for keyboard users. */
.home-benefits_summary {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    margin-top 0.3s ease;
}

.home-benefits_item:hover .home-benefits_summary,
.home-benefits_item:focus-within .home-benefits_summary {
  max-height: 4.5em;
  opacity: 1;
  margin-top: 0.5rem;
}

/* Hero video: the ported .home-header-background-video / .home-header-symbol_image_layer
   rules assume Webflow's runtime-generated CSS custom properties and w-background-video
   plumbing, neither of which we're running. Reproduce the same result (blue gradient tint
   over the video, watermark logo layered on top) with plain positioning. */
.section-home-header {
  position: relative;
  overflow: hidden;
}

.home-header-background-video {
  position: relative;
  z-index: 0;
}

.home-header-background-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-header-symbol_image_layer {
  /* In the live site this element is nested INSIDE .home-header-background-video,
     directly after the <video>, so it's sized by its own content (the text/CTA
     block) and simply sits at the top of the 110vh hero — it is NOT stretched
     to the video's full height. Our DOM has it as a sibling of the video
     instead, so we anchor top/left/right (not `inset:0`/bottom) to reproduce
     that same auto-height, content-sized box while still overlaying the video.
     The gradient tint is intentionally NOT duplicated here — the ported
     .home-header-background-video rule (l-n-dawkins.css) already paints it
     across the full 110vh video box; repeating it on this shorter box was
     double-darkening the top of the hero and burying the watermark further. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* The text content must be explicitly stacked above .hero-watermark: both are
   absolutely-positioned/positioned descendants of the same stacking context,
   and DOM order alone doesn't guarantee the watermark stays behind the text. */
.home-header-symbol_image_layer > .page-padding {
  position: relative;
  z-index: 2;
}

/* Real DOM node (rather than a background-image on .home-header-symbol_image_layer
   itself) so opacity/inspection stays simple. It fills the now content-sized
   parent box (inset:0) and reproduces the ported .home-header-symbol_image_layer
   background rule exactly: background-size:contain against that box, anchored
   bottom-right. No opacity reduction — the original has none; symbol.png's own
   paleness (light blue/white) is what makes it read as a subtle watermark. */
.hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("/assets/images/symbol.png");
  background-position: 100% 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

.nav_menu-button {
  background: none;
  border: none;
  cursor: pointer;
}

.nav_menu-button-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.nav_menu-button-icon::before,
.nav_menu-button-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.nav_menu-button-icon::before {
  top: -8px;
}

.nav_menu-button-icon::after {
  top: 8px;
}

/* Services dropdown: hidden until toggled open (matches .w-dropdown-list.w--open
   behaviour already defined in the ported CSS, just needs a real trigger). */
.navbar_dropdown-toggle {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* normalize.css resets text-transform on <button> specifically (to fix
     inconsistent browser defaults), which strips the uppercase this was
     otherwise inheriting from .nav_link since it became a real <button>. */
  text-transform: uppercase;
}

.content-todo {
  background: #fff4e5;
  border: 1px dashed #b54100;
  color: #7a3400;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin: 16px 0;
}

#contact-form .field {
  margin-bottom: 20px;
}

#contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: 2px solid #b54100;
  outline-offset: 1px;
}

#form-success {
  color: #1a7f37;
  margin-top: 12px;
}

#form-error {
  color: #c0341d;
  margin-top: 12px;
}

/* .footer-components_wrapper's desktop-width, side-by-side layout in the original
   was driven entirely by Webflow's auto-generated per-node CSS grid placement
   (#w-node-... selectors tied to element IDs Webflow stamps on export). Our
   hand-written markup never had those IDs, so the two columns (contact info /
   links+social) were collapsing to a single full-width stack with huge gaps
   between children instead of sitting side by side. Rebuilt as a plain two-column
   flex layout instead of trying to reproduce the node-ID system.

   justify-content:flex-start (not space-between): with only two lightweight
   content blocks inside an 80rem container, space-between pushed them to the
   far left and far right edges, leaving a huge dead gap between them that read
   as two disconnected islands rather than one composed footer. flex-start lets
   the links column sit right after the contact column at a fixed `gap`, so any
   leftover container width collects once, on the trailing edge, instead of
   being the thing separating the two groups. */
.footer-components_wrapper {
  display: flex;
  /* nowrap, not wrap: the original only stacks these two columns at its own
     explicit 767px breakpoint below. flex-wrap:wrap let them wrap onto
     separate lines organically any time they didn't quite fit side by side
     between 768px and wide desktop, producing a broken-looking single-column
     stack with huge gaps well above the intended mobile breakpoint. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5rem;
}

.footer_contact-box {
  max-width: 28rem;
  flex-shrink: 0;
}

.footer-links-wrapper {
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

@media screen and (max-width: 767px) {
  .footer-components_wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-links-wrapper {
    align-items: flex-start;
    width: 100%;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin: 32px 0;
}

.team-card {
  text-align: center;
}

.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #b54100;
  outline-offset: 2px;
}

.field-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.testimonial-quote-trigger {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
}

.testimonial-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.testimonial-modal[open] {
  display: flex;
}

.testimonial-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.testimonial-modal-content {
  position: relative;
  background: #fff;
  color: #333;
  max-width: 34rem;
  width: 100%;
  padding: 3rem 1.75rem 2rem;
  border-radius: 12px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .testimonial-modal-content {
    padding: 3rem 3rem 2.5rem;
  }
}

/* .testimonial-quote/.testimonial-text/.testimonial-company are shared with the small
   card preview (client_quote_component), whose sizing is tuned for a 2-3 line teaser —
   far too large once it's the full multi-paragraph quote in the modal, which was rendering
   as an oversized wall of text. These scope a modal-only reading size instead of touching
   the shared base rules. */
.testimonial-modal-content .testimonial-quote {
  position: static;
  width: 2.25rem;
  margin: 0 0 1rem;
  opacity: 0.85;
}

.testimonial-modal-content .testimonial-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin: 0 0 1.5rem;
}

.testimonial-modal-content .testimonial-company {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1967ac;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.testimonial-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #777;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.testimonial-modal-close:hover {
  background: #f2f2f2;
  color: #333;
}

/* Bug in the ported source: the mobile (<=479px) .text-rich-text rule sets
   text-align: justify, and only <p> gets un-justified back to left — legal
   pages (privacy, terms) use this class for their whole body, so every
   heading inherited justify too. Barely visible on body copy, but glaring
   on h2 specifically: it's 2rem, uppercase, and condensed (Oswald), so a
   short heading spread to full justified width produces very visible
   word-spacing "rivers". Left-aligns every heading level and trims h2 down
   a notch so it reads as a heading, not a shouted headline, on small
   screens. */
@media screen and (max-width: 479px) {
  .text-rich-text h1,
  .text-rich-text h2,
  .text-rich-text h3,
  .text-rich-text h4,
  .text-rich-text h5,
  .text-rich-text h6 {
    text-align: left;
  }

  .text-rich-text h2 {
    font-size: 1.5rem;
  }
}