/* NOTE: these selectors are prefixed with .services-block, not .entry-content.

   .entry-content was the original prefix, chosen only to out-specify the shared rule
   `.entry-content p { font-size: 14px }` — and it worked on /services/, where this
   block sits inside an article. On the HOMEPAGE the same block sits inside #about,
   which has no .entry-content anywhere above it, so not one of these rules applied
   and "OUR SERVICES" rendered at 14px next to body copy. It had been that way since
   the homepage was built.

   .services-block is two classes, so it still beats `.entry-content p`, and it is
   present in both places. The original note follows.

   OLD NOTE: these selectors are prefixed with .entry-content deliberately. The
   shared rule `.entry-content p { font-size: 14px }` has specificity (0,1,1) and
   would otherwise flatten this whole block to body text — it silently did exactly
   that between the /about-christi/ build and the full re-verification.
   ==========================================================================
   /services/ — the "OUR SERVICES" block
   The original rendered this through Smart Slider 3, which generated its own
   typography and layout independent of the OnePress theme. Values below are
   transcribed from the page's inline <style> (preserved in
   reference/inline-css/services__index.inline.css) — see style-notes.md §2.

   Note this block uses Arial / Cabin / Roboto and NONE of the brand teal.
   It is a visually separate island inside the page. That is intentional and
   original; do not normalise it into the site palette.

   Smart Slider set a 16px base and expressed sizes as percentages of it:
     250%  = 40px      125%   = 20px
     93.75% = 15px     81.25% = 13px
   Those are written out in px here.
   ========================================================================== */

/* Smart Slider reserved a fixed 1000px-tall band at desktop widths and centred the
   content in it — that generous whitespace above and below is what visitors saw
   (measured: 1000px at both 1280px and 1440px viewports). Below its breakpoint the
   band became content-height, so the min-height is scoped to desktop only. */
/* Smart Slider capped the slide at 1200px (`.n2-ss-slide-limiter{max-width:1200px}`)
   and centred it, then took two nested 10px paddings off it — so the visible band
   is 1160px wide and escapes the 1110px article column. Reproduced with the two
   paddings merged into one 20px, which computes identically. */
/* Smart Slider's <ss3-force-full-width> set data-overflow-x="body" — it stretched
   the block to the viewport and suppressed the horizontal scrollbar that creates.
   Both halves are reproduced; html (not body) carries the overflow rule so the
   sticky header keeps the viewport as its scroll container. */
.services-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
html { overflow-x: hidden; }

.services-block {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 20px 0;
  background: #ffffff;
  text-align: center;
}
@media (min-width: 1200px) {
.services-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 1000px;
  }
}

/* ------------------------------------------------------------ headings --
   CLIENT-REQUESTED (August 2026): this header now matches the section headers used
   everywhere else on the homepage — "What they are saying. / TESTIMONIALS", "What
   We've Done. / OUR WORK". Same Raleway, same grey letter-spaced eyebrow, same
   heavy uppercase title, same rhythm.

   It previously used the slider's own Arial at a flat 40px, which read as a
   different site's furniture dropped into the middle of this one. The title is a
   step larger than a standard section title because Christi asked for it bigger,
   and because this block is a section in its own right rather than a heading over
   one.                                                                            */
.services-block .services-eyebrow {         /* "FRIENDLY BUDGET. SATISFACTION GUARANTEE." */
  display: block;
  margin: 0 0 0.8125rem;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaaaaa;
}

.services-block .services-title {           /* "OUR SERVICES" */
  position: relative;
  margin: 0;
  padding: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--heading);
}
@media (min-width: 768px)  { .services-block .services-title { font-size: 44px; letter-spacing: 3.5px; } }
@media (min-width: 1200px) { .services-block .services-title { font-size: 52px; letter-spacing: 4px; } }

/* The price line reads as the section's supporting sentence, the way .section-desc
   does under About Christi. */
.services-block .services-note {            /* "PAINT COLORS & DECORATING CONSULTATION …" */
  margin: 0 0 40px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: var(--text);
}
@media (min-width: 768px) { .services-block .services-note { font-size: 17px; } }

/* --------------------------------------------------------------- grid ---
   Transcribed from the slider's own box model, which is a stack of padded
   wrappers each cancelled by a negative margin on the flex row inside it:

     row      padding: 10px 5px 10px 55px   ->  row-inner  width:100%+20px  margin:-10px
     card     margin: 10px;  width: 50%;  max-width: 510px
     panel    padding: 0 10px 5px 10px
     card row padding: 10px                ->  cols       width:100%+20px  margin:-10px
     columns  margin: 10px;  width: 35% / 65%

   The columns overflow their line and flex-shrink back — that is what turns
   35%/65% of 490px into the 157.5px / 292.5px the live page measured, and what
   leaves the icon its full 150px. An earlier version collapsed these levels and
   came out 20px narrow everywhere. Panel and card-row padding are merged here
   (0+10 / 10+10 / 5+10 / 10+10), which computes the same.                    */
.services-row {
  display: flex;
  flex-wrap: nowrap;
  /* padding 10px 5px 10px 55px on the row, cancelled by margin:-10px and
     width:calc(100% + 20px) on the flex line inside it. Merged: the vertical
     paddings net to zero, and horizontally the line starts 45px in and runs 5px
     past the row's right edge. The cards sit flush at the start of the line —
     there is no centring, which is why the first card lands at x=115 and not the
     x=145 that justify-content:center produced. */
  padding-left: 45px;
  width: calc(100% + 5px);
}

.service-card {
  display: flex;
  width: 50%;
  max-width: 510px;
  margin: 10px;
}

.service-card__inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px 15px 20px;
  background: rgba(249, 249, 249, 0.87);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s ease-out;
}
.service-card__inner:hover {
  box-shadow: 5px 5px 5px 5px rgba(0, 193, 196, 1);
}

.service-card__cols {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(100% + 20px);
  margin: -10px;
}

.service-card__media {
  display: flex;
  justify-content: center;
  width: 35%;
  margin: 10px;
}
.service-card__body {
  width: 65%;
  margin: 10px;
  padding: 10px;
  text-align: left;
}
/* Reproduced, not tidied: the second card's body column alone carries
   'padding:10px 10px 50px 10px' in the slider data. It is what makes the first
   row 18px taller than the other two on the live page. */
.services-row:first-of-type .service-card:nth-child(2) .service-card__body {
  padding-bottom: 50px;
}

.service-card__media img {
  width: 150px;            /* inline style on the original <img> */
  height: 150px;
  max-width: none;
}

.services-block .service-card__body .service-card__title {
  margin: 0;
  /* Was hard-coded "Cabin" — a third font nobody chose, which also outranked the
     new display rule on specificity. Christi's pick now applies here. */
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  text-align: left;
}

/* Pet & House Sitting is the only card with two paragraphs; without this they run
   together into one block. */
.services-block .service-card__body p:not(.service-card__title) + p { margin-top: 0.75em; }

/* scoped so it cannot override the title above it */
.services-block .service-card__body p:not(.service-card__title) {
  margin: 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #565656;
  text-align: left;
}
.service-card__body p a { color: #1890d7; }

/* --------------------------------------------------------- responsive --- */
/* Smart Slider collapsed the two-up grid below its "tablet" breakpoint:
   (landscape max-width 900px) or (portrait max-width 700px).               */
@media (orientation: landscape) and (max-width: 900px),
       (orientation: portrait)  and (max-width: 700px) {
  /* CLIENT-REQUESTED FIX (August 2026). The slider's mobile block re-pads rows 2 and
     3 to 30px all round but never touches row 1, so the first pair kept its desktop
     'padding:10px 5px 10px 55px' on a phone: the first two cards sat 45px to the
     right of the other four and overflowed the screen edge. The rebuild reproduced
     that faithfully and it reads as broken, which is what Christi reported.

     All three rows now share the 30px the original gives rows 2 and 3 — the fix uses
     the original's own value rather than a new one. To restore the inconsistency,
     put back the ':first-of-type' rule this replaced. */
  .services-row { padding: 30px; width: 100%; flex-wrap: wrap; }
  .service-card { width: auto; max-width: none; margin: 8px; }
  .service-card__inner { padding: 40px 20px 10px 20px; }
  .service-card__cols { flex-wrap: wrap; }
  .service-card__media,
  .service-card__body { width: calc(100% - 20px); }
  /* The slider CSS has no mobile text-align override, so the title and body copy
     stay left-aligned at every width, exactly as the font rules specify. Only the
     image centres (inherited from .services-block). Nor is there a font-size
     override: "OUR SERVICES" stayed 40px on a phone. An earlier version shrank
     it to 30px, which nothing in the source asks for. */
}

/* The link out to the residential cleaning checklist. Sits under the services band on
   its own, in the site's own type, because it is the one thing on this page that leads
   somewhere. */
.services-block .services-more {
  margin: 0;
  padding: 34px 20px 4px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.services-block .services-more a {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  color: var(--heading);
  text-decoration: none;
}
.services-block .services-more a:hover { color: var(--accent); text-decoration: none; }

/* -------------------------------------------- consultation, client copy ---
   Replaces the single line "PAINT COLORS & DECORATING CONSULTATION STARTING AT
   $300.00." with Christi's fuller wording, August 2026. Reproduced verbatim; the
   only decisions here are typographic. Sits under the services band as its own
   block because it is an offer with terms, not a strapline.                     */
.services-consult {
  max-width: 720px;
  margin: 4px auto 40px;
  padding: 22px 26px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  background: #ffffff;
  text-align: center;
}
.services-block .services-consult__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.3;
  color: var(--heading);
}
.services-block .services-consult__price {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
}
.services-block .services-consult__body {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--text);
  text-align: left;
}
.services-block .services-consult__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.6;
  color: #8c8c8c;
}
@media (min-width: 768px) {
  .services-block .services-consult__title { font-size: 21px; }
}

/* CLIENT-REQUESTED (August 2026): on the homepage this block sat almost directly
   under the Bark call to action, so the eyebrow and "OUR SERVICES" read as the tail
   of the testimonials rather than as the start of a new section.

   Scoped to .services-fullwidth, which only the homepage has. /services/ opens with
   this block directly under the breadcrumbs and needs no extra room above it.
   See build-plan.md #42. */
.services-fullwidth .services-block { padding-top: 72px; }
@media (max-width: 767px) { .services-fullwidth .services-block { padding-top: 46px; } }