/* ==========================================================================
   / — the homepage
   Five sections: #hero, #about (testimonials, the Bark block and the services
   slider), #gallery, #team, #contact. Values transcribed from onepress/style.css,
   the page's own onepress-style inline block, strong-testimonials/templates/
   default/content.css and csshero.css.

   Two things here are not the theme:
   - the Strong Testimonials card (content.css), and
   - two CSS Hero rules the client set by hand, marked below. They are the reason
     the About Christi copy is Josefin Sans and the address block is teal.
   ========================================================================== */

/* ------------------------------------------------------------- sections -- */
.onepage-section { position: relative; overflow: hidden; }
.onepage-section > .container,
.onepage-section > .container-fluid { position: relative; z-index: 5; }

.section-padding { padding: 4.375rem 0; }
.section-meta    { background-color: var(--surface-alt); }

.section-title-area { margin-bottom: 60px; text-align: center; }
.section-title-area .section-title {
  position: relative;
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media screen and (min-width: 940px) {
  .section-title-area .section-title { font-size: 40px; letter-spacing: 3.5px; }
}
/* The eyebrow above each section title. It was an <h5> in the theme, which is where
   it took its Raleway, its 700 weight and its 1.1 line-height from; it is a <p> here
   because a kicker is not a heading and marking it as one put a false level under
   every h2. Those three inherited values are therefore written out explicitly — drop
   them and the line reverts to 400-weight Open Sans on a 1.7 line-height, which is
   9px taller and visibly different. */
.section-title-area .section-subtitle {
  display: inline-block;
  position: relative;
  margin: 0 0 0.8125rem;
  color: #aaaaaa;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media screen and (min-width: 940px) {
  .section-title-area .section-subtitle { font-size: 14px; }
}
.section-desc { margin-top: 2.5rem; font-size: 1.25rem; }

.section-about .section-title-area { margin-bottom: 30px; }
.section-about .row > div { margin-top: 30px; }

/* ----------------------------------------------------------------- hero -- */
/* The hero photograph, supplied by Christi in August 2026. The original
   (Christi-Main-Background.jpeg) was never archived and this replaces it, so nothing
   here is a reconstruction — see build-plan.md #14.

   Three widths rather than one: this is the largest image on the site and the LCP
   element, so a phone should not download the 2400px file. #222222 stays underneath
   as the colour that shows while the photograph loads. */
.hero-slideshow-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #222222;
  background-image: url("../images/hero-background-1920w.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .hero-slideshow-wrapper { background-image: url("../images/hero-background-1200w.jpg"); }
}
@media (min-width: 1921px) {
  .hero-slideshow-wrapper { background-image: url("../images/hero-background-2400w.jpg"); }
}

/* The scrim. The theme used a flat rgba(0,0,0,0.3), which was enough over whatever the
   old photograph was but not over this one — it is a bright, high-key shot and white
   type sat on it at roughly 2:1, well under the 4.5:1 minimum.

   A flat darker wash would fix the contrast and bury the photograph. Instead: a light
   flat pass over the whole image, plus a vertical gradient concentrated on the middle
   band where the type actually sits. The top and bottom of the picture stay bright,
   the words stay legible. Measured, not guessed — see build-plan.md #14 for the
   numbers. */
.hero-slideshow-wrapper::after {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.46) 32%,
    rgba(0, 0, 0, 0.52) 60%,
    rgba(0, 0, 0, 0.16) 100%
  );
  content: "";
}

.hero-slideshow-normal .container { position: relative; z-index: 80; padding: 10% 0; }

.hero__content {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hero__content h1, .hero__content h2, .hero__content h3, .hero__content h4 {
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hero__content p { margin-bottom: 1.25rem; }
.hero__content a.btn { margin: 0.625rem 0.625rem 1.25rem 0; }

.hero-content-style1 { text-align: center; }
/* CLIENT-REQUESTED (August 2026): the headline is two lines now — the three kinds of
   work on top, what the work is underneath — replacing the single run-on line. The
   kinds line is the smaller of the two; "Cleaning Services" is the statement. */
.hero__content .hero-lead__kinds,
.hero__content .hero-lead__what { display: block; }
.hero__content .hero-lead__kinds {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.hero__content .hero-lead__what {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .hero__content .hero-lead__kinds { font-size: 18px; letter-spacing: 3.5px; }
  .hero__content .hero-lead__what  { font-size: 44px; letter-spacing: 4px; }
}
@media (min-width: 1200px) {
  .hero__content .hero-lead__kinds { font-size: 20px; letter-spacing: 4px; }
  .hero__content .hero-lead__what  { font-size: 56px; letter-spacing: 5px; }
}
/* The empty hero element was an <h2> and is now a <div>, so it no longer picks up the
   shared heading margin. Restored explicitly — without it everything below the hero
   moves up 15px, which is exactly the kind of drift a tag swap hides. */
.hero-content-style1 .hero-large-text { margin: 0 0 0.9375rem; }

/* The visible hero line is the page's h1. The theme sized it as an h3, so its h3
   metrics are pinned here — without this it would jump to the 2.5rem h1 size. */
.hero__content .hero-lead { margin: 0 0 0.9375rem; }
/* This is the rule that never found its target: the source nests the headline in
   an h3 inside the h2, which HTML5 splits apart, so the 75px styling lands on an
   empty element. Kept because removing it would be redesigning the page. */
.hero-content-style1 h2 {
  color: #ffffff;
  font-size: 35px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 720px) { .hero-content-style1 h2 { font-size: 60px; letter-spacing: 3px; } }
@media screen and (min-width: 940px) { .hero-content-style1 h2 { font-size: 75px; letter-spacing: 4px; } }
.hero-content-style1 p {
  color: #ffffff;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.4px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 940px)  { .hero-content-style1 p { font-size: 18px; } }
@media screen and (min-width: 1140px) { .hero-content-style1 p { font-size: 22px; } }
@media (max-width: 767px) { .hero-content-style1 .btn { display: inline-block; } }

#hero .btn { box-shadow: none; }
/* CSS Hero, verbatim: the client nudged the primary hero button on small screens. */
@media screen and (max-width: 480px) {
  #hero .hero-content-style1 > a.btn.btn-theme-primary.btn-lg {
    position: relative;
    right: -5px !important;
  }
}


/* Buttons live in site.css — every page loads it and the values are identical. */

/* ------------------------------------------------------- testimonials ---- */
.strong-view.wpmtst-default { display: block; width: 100%; }
.strong-view.wpmtst-default div { box-sizing: border-box; }
.strong-view.wpmtst-default .strong-content { margin: 20px auto 0; }
.strong-view.wpmtst-default .wpmtst-testimonial {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 20px auto;
  padding: 0;
  border: 1px solid #e6e6e6;
  text-align: left;
}
.strong-view.wpmtst-default .wpmtst-testimonial:first-child { margin-top: 0; }
.strong-view.wpmtst-default .wpmtst-testimonial:last-child  { margin-bottom: 0; }
.strong-view.wpmtst-default .wpmtst-testimonial-inner {
  display: block;
  width: 100%; height: 100%;
  padding: 20px;
  border: 1px solid #ffffff;
  text-align: left;
}
/* Verbatim from content.css, odd selector and all: everything in the card gets a
   5px gap EXCEPT the last two children (the attribution line and the clearfix). */
.strong-view.wpmtst-default .wpmtst-testimonial-inner > *:not(:nth-last-child(2)):not(:last-child) {
  margin-bottom: 5px;
}
/* The plugin's quote-mark graphic (templates/default/img/quotes.png) was never
   archived, so the 40px indent it reserved is kept and the mark itself is gone. */
.strong-view.wpmtst-default .wpmtst-testimonial-heading {
  margin-top: 0;
  padding-left: 40px;
  text-align: left;
}
.strong-view.wpmtst-default .wpmtst-testimonial-content p:first-child { margin-top: 0; padding-top: 0; }
.strong-view.wpmtst-default .wpmtst-testimonial-content p:last-child { margin-bottom: 0; padding-bottom: 0; }
.strong-view.wpmtst-default .wpmtst-testimonial-field { text-align: right; }
/* The plugin bolds '.wpmtst-testimonial-name', but the markup only ever carried
   'testimonial-name' — so the attribution rendered at normal weight. Kept keyed to
   the class the stylesheet actually names, which means it stays unbolded here too. */
.strong-view.wpmtst-default .wpmtst-testimonial-name { font-weight: bold; }
.strong-view .clear { clear: both; }
/* Not a clearfix, despite the name. It is the plugin's minimum-paragraph-width
   shim: a 6em block that stops short words stranding beside a floated image.
   Styling it as a full-width clear made it 1066px instead of 84px. */
.strong-view .maybe-clear,
.tst-slide .maybe-clear { width: 6em; display: block; overflow: hidden; }

/* ---------------------------------------------------------- work grid ---- */
/* The theme sets 10px here; the site's own inline block overrides it to 1px and
   pulls the wrap back by the same amount, so the twelve photographs sit almost
   edge to edge. Reproduced as it rendered, not as the theme intended. */
/* The gallery section runs its container edge to edge. */
.g-layout-full-width.container { width: 100%; max-width: none; margin: 0; padding: 0; }

.gallery-grid-wrap { margin-left: -1px; margin-right: -1px; }
.gallery-grid { }
.gallery-grid::after { content: ""; display: table; clear: both; }
.gallery-grid .g-item { float: left; padding: 1px; }
.g-zoom-in .g-item { display: block; overflow: hidden; }
.g-zoom-in .g-item .inner-content { display: block; width: 100%; height: 100%; overflow: hidden; }
.g-zoom-in .g-item img { display: block; width: 100%; height: auto; overflow: hidden; transition: all 0.5s linear; }
.g-zoom-in .g-item:hover img { transform: scale(1.5, 1.5); }
.g-col-4 .g-item { width: 25%; }
.g-col-4 .g-item:nth-child(4n+1) { clear: left; }
.all-gallery { display: block; margin-top: 40px; text-align: center; }

/* --------------------------------------------------------------- team ---- */
.team-members.row { margin-left: 0; margin-right: 0; }
.section-team .team-member { padding: 0 0.5px; text-align: center; }
/* CSS Hero, verbatim. Every paragraph of the About Christi copy — including the
   signature block — is Josefin Sans 18px in the brand teal, not the theme's
   14px Open Sans grey. The !important on font-family is the client's own. */
#team .section-desc > p {
  border-style: solid !important;
  border-width: 0;
  color: rgba(70, 183, 191, 1);
  font-family: Josefin Sans !important;   /* no fallback stack — the client's rule
                                             names one face, and that is what the
                                             live page computed */
  font-size: 18px;
}

/* ------------------------------------------------------------ contact ---- */
.section-contact input, .section-contact textarea { width: 100%; }
.section-contact textarea { max-height: 190px; }
.section-contact .address-contact { margin-top: 5px; margin-bottom: 15px; }
.section-contact .address-contact span { float: left; color: #aaaaaa; }
.section-contact .address-contact .address-content {
  display: block;
  padding-left: 45px;
  font-style: italic;
  line-height: 2;
}
.section-contact .address-contact .fa-inverse { font-size: 12px; }
.section-contact .address-box::after { content: ""; display: table; clear: both; }
/* CSS Hero, verbatim: the address lines and the mailto link are Arial, upright,
   and the lines themselves are teal.

   CSS Hero wrote these as a chain of child combinators, so they break the moment
   anything is inserted between .wow and .address-box. The August 2026 CTA does
   exactly that — the details now sit inside .home-cta — and the lines silently
   fell back to grey Open Sans. The second selector restores them; the original is
   left untouched beside it. See build-plan.md #37. */
#contact .row > .wow > .address-box > .address-contact > .address-content,
#contact .row > .wow > .home-cta > .address-box > .address-contact > .address-content {
  color: rgba(70, 183, 191, 1);
  font-family: Arial;
  font-style: normal;
}
#contact .row > .wow > .address-box > .address-contact > .address-content > a,
#contact .row > .wow > .home-cta > .address-box > .address-contact > .address-content > a {
  font-family: Arial;
  font-style: normal;
}

.section-contact iframe { max-width: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   CLIENT-REQUESTED DEPARTURE (August 2026).
   The original left the contact column at Bootstrap's col-sm-6 — a 50% block
   pinned to the left half of the section, with the form sitting in it at a fixed
   640px. Christi asked for it centred and a little larger.

   The rule starts at 576px, which is exactly where col-sm-6 begins halving the
   column, so there is no width at which the form is still pinned to the left of a
   half-empty section. Below 576px the column is already full width and nothing
   changes. The extra iframe height is desktop-only: a wider form wraps less, but
   only once there is real width to spend.

   Logged in build-plan.md. To revert: delete this block.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 576px) {
  .section-contact .row > .col-sm-6 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    margin-left: auto;
    margin-right: auto;
  }
  .section-contact iframe { width: 100%; }
  /* The intro lines centre with the column. Not the address box — its rows are a
     floated icon plus a 45px-indented line, and centring those breaks them. */
  .section-contact .row > .col-sm-6 > h3,
  .section-contact .row > .col-sm-6 > h4,
  .section-contact .row > .col-sm-6 > p { text-align: center; }
}
@media screen and (min-width: 940px) {
  /* Full container width on desktop — Christi asked for the form to fill more of the
     page. The Google embed scales its card with the iframe, so this makes the form
     itself bigger rather than just adding grey around it. */
  .section-contact .row > .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  .section-contact iframe { height: 900px; }
  /* The address block does not want to be 1110px wide — three short lines stranded on
     one edge of a very wide row. Held to a readable measure and centred under the form. */
  .section-contact .address-box { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* The Bark call to action. It used to be a bordered testimonial card sitting under
   the carousel, which made it read as an eleventh testimonial instead of a link out
   of the page. Now it is what it is: a short line and a button, separated from the
   testimonials by a rule rather than boxed in with them.

   The badge the copy used to reference was drawn by bark.com's widget script, which
   was never archived. Noted in handoff.md. */
.bark-cta {
  margin: 30px auto 0;
  padding: 26px 20px 4px;
  max-width: 620px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.bark-cta__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--heading);
}
.bark-cta__text {
  margin: 0 0 18px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text);
}
.bark-cta__btn { display: inline-block; }

/* ---------------------------------------------------------- bootstrap ---- */
.col-lg-12 { position: relative; width: 100%; padding: 0 15px; }
.col-sm-6  { position: relative; width: 100%; padding: 0 15px; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 50%; max-width: 50%; } }

/* ==========================================================================
   Motion

   The original had exactly two entrance animations and this rebuild reproduced
   neither, because both were driven by libraries that were never archived:
   WOW.js watched for elements entering the viewport, and animate.css supplied the
   keyframes. The markup still carries the hooks — two `.wow.slideInUp` blocks and
   the hero's staggered reveal — doing nothing.

   Both are restored below in CSS, driven by the IntersectionObserver already on the
   page for the back-to-top flash. No library, about 1KB, no layout thrash: only
   `opacity` and `transform` are animated, both of which the compositor handles
   without re-laying-out the page.

   One deliberate difference. animate.css's `slideInUp` translates an element by
   100% of ITS OWN height. On the testimonials column — roughly 3,000px tall — that
   is a 3,000px slide, which is why it read as a lurch rather than an entrance. The
   distance here is a flat 24px. Same intent, same trigger, sane distance.
   ========================================================================== */

/* Hero: the theme hid these three and faded them in on load with staggered delays
   of 0.7s / 0.8s / 1s. Transcribed, with the transform reduced from the theme's
   100px to 24px for the same reason as above. */
.js .hero__content .hero-lead,
.js .hero__content .hero-small-text,
.js .hero__content > .btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s linear, transform 0.5s linear;
}
.js .hero__content .hero-lead        { transition-delay: 0.7s; }
.js .hero__content .hero-small-text  { transition-delay: 0.8s; }
.js .hero__content > .btn            { transition-delay: 1s; }
.hero-slideshow-wrapper.loaded .hero__content .hero-lead,
.hero-slideshow-wrapper.loaded .hero__content .hero-small-text,
.hero-slideshow-wrapper.loaded .hero__content > .btn {
  opacity: 1;
  transform: none;
}

/* The two blocks the original marked .wow.slideInUp: the testimonials column and
   the contact column. They reveal when scrolled into view, once. */
.js .wow.slideInUp {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.js .wow.slideInUp.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Nothing above should run for anyone who has asked for less motion, and nothing
   should stay invisible if it does not run. */
@media (prefers-reduced-motion: reduce) {
  .js .hero__content .hero-lead,
  .js .hero__content .hero-small-text,
  .js .hero__content > .btn,
  .js .wow.slideInUp {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

}

/* CLIENT-REQUESTED (August 2026): Christi asked for the closing "Let's Get Started!"
   in the brand blue-green rather than the heading grey the other section titles use.
   Scoped to #contact so the rest of the section titles keep matching each other. */
#contact .section-title { color: var(--accent); }

/* ------------------------------------------------------------- home CTA ---
   August 2026, client-requested: the homepage's copy of the contact form is a
   call to action instead. /request-a-quote/ collects the same enquiry, and two
   forms meant two inboxes to watch.

   The panel borrows the card treatment .services-consult uses further up the
   page, so it reads as part of the page rather than as something bolted on.
   The contact details are folded inside it — the footer has social links only,
   so this is the homepage's only phone number. See build-plan.md #37. */
.home-cta {
  max-width: 560px;
  margin: 26px auto 0;
  padding: 34px 30px 26px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
  text-align: center;
}
@media (max-width: 600px) { .home-cta { padding: 26px 20px 20px; } }

.home-cta__actions { margin: 0; }
.home-cta__actions .btn { min-width: 240px; }
@media (max-width: 480px) {
  .home-cta__actions .btn { min-width: 0; width: 100%; }
}

/* "or reach us directly", with a rule running out to each edge. */
.home-cta__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8c8c8c;
}
.home-cta__or::before,
.home-cta__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.home-cta__or span { flex: none; }

/* The details keep the theme's .address-* markup, so they inherit the icon
   treatment this section already defines. Only the alignment changes: the
   block centres, the lines inside it stay left-aligned against their icons. */
.home-cta .address-box {
  display: inline-block;
  text-align: left;
  max-width: 100%;
}
.home-cta .address-contact:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- work cards ---
   The "Our Work" section, August 2026, client-requested. One photograph from
   each gallery tab instead of the twelve room-*.jpeg tiles left over from the
   old website. The whole card is the link and the label names the tab it opens,
   so the destination is legible before the click. See build-plan.md #38. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 0 0 34px;
}
@media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 560px)  { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.work-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.work-card:hover,
.work-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transform: translateY(-2px);
}
.work-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The tabs hold both 3:4 and square photographs. A fixed ratio on the frame with
   object-fit on the image keeps all five cards the same height regardless. */
.work-card__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-alt);
}
.work-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease-out;
}
.work-card:hover .work-card__media img { transform: scale(1.05); }

.work-card__label {
  display: block;
  padding: 13px 12px 14px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.work-card__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--heading);
  transition: color 0.2s;
}
.work-card:hover .work-card__name { color: var(--accent); }
.work-card__count {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #8c8c8c;
}

/* Motion is opt-in for anyone who has asked their system to reduce it. */
@media (prefers-reduced-motion: reduce) {
  .work-card,
  .work-card__media img { transition: none; }
  .work-card:hover { transform: none; }
  .work-card:hover .work-card__media img { transform: none; }
}

/* The trust line under "Dirt Doesn't Stand a Chance!" — client-supplied, August 2026.
   Pitched deliberately below the headline: same letter-spaced treatment as the hero's
   "Commercial • Post-Construction • Residential" line but smaller and dimmer, so it
   reads as a footnote to the headline rather than competing with it.
   See build-plan.md #48. */
.hero__content .hero-trust {
  margin: 14px 0 18px;
  /* It runs nearly the full width at 500px, so it needs its own inset — without this
     it touches both screen edges on a phone before it wraps. */
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  /* .hero-small-text is italic by the theme's design — right for the tagline and the
     Call Now! button, wrong here. This is a factual claim, not a slogan, so it stands
     upright and is the one thing in this block that does. */
  font-style: normal;
  letter-spacing: 1.8px;
  line-height: 1.7;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 400px) {
  /* Tighter tracking so it breaks over two lines cleanly instead of three. */
  .hero__content .hero-trust { font-size: 10.5px; letter-spacing: 1.1px; }
}
@media (min-width: 768px) {
  .hero__content .hero-trust { font-size: 12.5px; letter-spacing: 2.4px; }
}
@media (min-width: 1200px) {
  .hero__content .hero-trust { font-size: 13.5px; letter-spacing: 3px; }
}

/* Section titles lose their capitals now they are set in Lora Italic.

   A serif italic in wide-tracked capitals reads as a 1970s logotype, not as
   elegant — and the flyer sets these same headings in title case ("Chic
   Decorating", "About Christi"), so the site follows it. Dropping the uppercase
   is what actually makes the printed piece and the site match.

   This lives in home.css, not site.css, because home.css loads last: the same
   rule in site.css was silently outranked by the uppercase declaration here at
   equal specificity. See build-plan.md #52. */
.section-title-area .section-title {
  text-transform: none;
  letter-spacing: 0.5px;
}
@media screen and (min-width: 940px) {
  .section-title-area .section-title { letter-spacing: 1px; }
}