/* ============================================================
   CLIENT REVISIONS — hand-written, loaded last.

   Everything here answers a specific item from Jennifer Mallers' pre-launch
   revision list (2026-08-18; the email and her screenshots are in
   remodel-with-icon/resources/new-jen-email.md).

   Why a separate file: convert-rwi.mjs REGENERATES global.css and
   assets/css/pages/*.css from Jeremy's export every time it runs, so a fix
   written into either of those disappears on the next reconvert. This file is
   never generated. It is enqueued after both of them, so it wins the cascade
   without needing !important — except against the export's own inline style
   attributes, which are called out where they occur.
   ============================================================ */


/* ---------- HOME: the hero clipped its last button on a laptop ----------
   "Currently having issues with the buttons on the homepage on my laptop, but
   if I drag the page over to my monitor it expands."

   .rhero.hsplit was height:92vh + overflow:hidden. On a laptop 92vh is shorter
   than the headline + four CTAs + "See the truth", so the button was cut off
   mid-row; on her external monitor there was room and it appeared. Keep 92vh as
   a FLOOR (the design wants the next section to peek) and let the hero grow
   past it whenever the content needs more than that. */
.rhero.hsplit {
  height: auto;
  min-height: max(660px, 92vh);
}

/* The dashed tail under "See the truth" hangs outside the button; give the
   stage room for it rather than letting overflow:hidden crop it. */
@media (min-width: 981px) {
  .rhero.hsplit .hs-left { padding-bottom: clamp(46px, 5vw, 92px); }
}


/* ---------- HOME: "read the case study" was not clickable ----------
   The caption is a real link (href="/project-lake-bluff/") sitting inside the
   before/after panel. The panel's drag handler calls setPointerCapture() +
   preventDefault() on pointerdown, which swallowed the click before it could
   become one. client-revisions.js stops the caption's own pointerdown from
   reaching that handler; this is just the cursor that says so. */
.hs-cap { cursor: pointer; }


/* ---------- HOME: the compass ----------
   "Add padding here under the compass, should not be touching the Lifetime
   Partnership box" + "Phase 7 needs to be on the outside of the compass in
   white."

   The Phase 07 arc moved outside the disc in the page markup (see
   patchCompassRim in build/convert-rwi.mjs), which widened the SVG's viewBox
   from 720 to 800 units. Scale max-width by the same ratio (520 x 800/720) so
   the compass keeps its drawn size instead of shrinking 10%. */
.compass-svg { max-width: 578px; }

/* Was margin-top:-12px, which pulled the callout up against the brass edge. */
.compass-stage .lifetime-callout { margin-top: 14px; }


/* ---------- HOME: "Behind every Icon remodel is a relationship" ----------
   "verbiage off to the side is disconnected. Can you help me readjust that to
   look like the below?" — her mock-up puts the headline across the full width
   with the lede beneath it, left aligned.

   The export ran them as a 5fr/7fr row with the lede pushed to the far right
   (margin-left:auto), which is what read as disconnected. Stack them. */
.tst-head {
  display: block;
  margin-bottom: 26px;
}
.tst-head h2 { text-wrap: balance; }
/* The export hard-wrapped this headline; she has already deleted that <br> in
   the editor. Kept so it cannot come back if the line is ever retyped. */
.tst-head h2 br { display: none; }
.tst-head .right { margin-top: 20px; }
.tst-head .right p.lede {
  margin-left: 0;
  max-width: 74ch;
}


/* ---------- HOME: "The most valuable thing we give away" ----------
   "same thing with the section right beneath that. Just very disconnected.
   Maybe add a line here and the text butts up next to it?" — she drew a white
   vertical rule between the headline and the paragraph.

   Below 1100px this row stacks to one column, where a left border would be a
   stray line across the page, so the rule only exists while the two are
   actually side by side. */
@media (min-width: 1101px) {
  .served-head {
    gap: 40px;
    align-items: stretch;
  }
  .served-head .right {
    margin-left: 0;
    max-width: none;
    border-left: 1px solid rgba(244, 239, 227, .55);
    padding-left: 40px;
    display: flex;
    align-items: center;
  }
  .served-head .right p { max-width: 60ch; }
}


/* ---------- HOME: the trade strip headline ---------- "Clean this section up
   please!" — the export breaks it as "Built on the best relationships with
   the / highest quality partners in the / region.", leaving "the" stranded at
   the end of a line and "region." alone on the last one.

   Drop the hard break and let the browser balance the lines; give the copy
   column a little more room so the balance has something to work with. */
.trade-copy h4 br { display: none; }
.trade-copy h4 {
  text-wrap: balance;
  line-height: 1.12;
}
@media (min-width: 1101px) {
  .trade-strip .inner {
    grid-template-columns: 1.25fr .75fr;
    gap: 64px;
  }
}


/* ---------- PORTFOLIO: the tiles are photographs, not links ----------
   "Our Portfolio page will be just a gallery of project images: Remove
   clickable links on the images."

   The href is stripped server-side in the theme (rwi_portfolio_unlink) rather
   than in the export, because the client has removed 70 tiles on this page and
   every removal is keyed to the tile's exact markup — rewriting the anchors
   would orphan all of them. The tiles stay <a> elements with no href: not
   links, not focusable, still hoverable, design untouched. */
.pfd-item:not([href]) { cursor: default; }


/* ---------- OUR TEAM: square portraits, larger ----------
   "Can we place the images in a square space instead of a circular one? Heads
   are being cut off. Can we also make the pictures a bit larger?"

   80px circle -> 150px square, and object-fit goes cover -> contain so the
   whole portrait is inside the frame and nothing can be cropped off the top.
   The !important flags are not decoration: the export sets border-radius:50%,
   object-fit and the sizing in a style="" attribute on every <img>, which no
   stylesheet rule can outrank. */
.ot-portrait {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  background: var(--white, #FFFFFF);
  overflow: hidden;
  font-size: 44px;
}
.ot-portrait img {
  border-radius: 4px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}
/* A 150px portrait wants a slightly wider card than the export's 220px track. */
.ot-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

@media (max-width: 560px) {
  .ot-portrait { width: 128px; height: 128px; }
  .ot-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}


/* ---------- "Make sure the website adjusts properly to desktop, mobile and
   tablet." ----------
   The reported case was the hero, fixed above. These are the two remaining
   places where a track stays wider than the screen it is on.

   The stats strip is styled from a <style> block inside the page body, which
   comes after every stylesheet in document order and therefore wins any tie —
   so the phone rule has to be !important to be heard at all. The tablet rule
   fills a gap the export left (it holds four columns until 900px) and needs no
   such help, because nothing else claims that range. */
@media (max-width: 1100px) {
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- CASE STUDIES: the hero headline ran into the town name ----------
   The export writes the h1 as "<h1>Name<em>Town, IL</em></h1>" with no
   separator, and .page-hero h1 em (in the generated per-page CSS) sets only
   font-style and colour — so it stays inline and ten of the eleven case
   studies opened with "The Chain O'Lakes LakehouseAntioch, IL". Lincolnshire
   happens to carry a space, which reads as one long line rather than a break.
   Either way it is the first line a prospect reads on the page.

   Scoped to the eleven case studies BY PAGE ID on purpose. The same
   .page-hero h1 em selector is used sitewide for emphasis *inside* a phrase —
   "The Real <em>Cost Guide.</em>" — where display:block would break the
   headline in half. Do not generalise this rule. */
.page-id-5829 .page-hero h1 em, .page-id-5830 .page-hero h1 em,
.page-id-5831 .page-hero h1 em, .page-id-5832 .page-hero h1 em,
.page-id-5833 .page-hero h1 em, .page-id-5834 .page-hero h1 em,
.page-id-5835 .page-hero h1 em, .page-id-5836 .page-hero h1 em,
.page-id-5837 .page-hero h1 em, .page-id-5838 .page-hero h1 em,
.page-id-5840 .page-hero h1 em {
  display: block;
  margin-top: .12em;
}


/* ---------- HOME: the page has two vertical rhythms, not one ----------
   Section padding on the home page runs from 26px to 64px with no scale, and it
   is not random — it is two eras. The older sections sit at 28-36px:

     section.team 32/28 · section.compare 30/26 · section.testimonials 32/28
     section.categories 32 · section.compass 36/32

   while everything added later sits at 60-64px:

     section.happiness 64 · section.compass-flow 62 · section.cc-intro 62
     section.wwb 60 · section.lifetime-band 60 · .cc.ht / .cc.po 60

   So the page alternates between compressed and roomy as you scroll, and the
   alternating blue/paper backgrounds hide the cause. The interior pages feel
   calmer than the home page for exactly this reason — their hero template uses
   84/80 throughout.

   Lifting the older group to 52/48, deliberately BELOW the 60-64 group so the
   page keeps three intentional tiers instead of flattening to one:

     thin bands (~30px)  <  content sections (52/48)  <  feature sections (60-64)

   Only ever increasing, never reducing — extra section padding cannot cause
   overlap, which is what makes this safe to apply without seeing the page.

   NOT touching .ecc-band, .ecc-thin or .trade-strip: those are deliberately thin
   bands, and giving them section padding would change what they are.

   THIS IS THE ONE CHANGE MADE WITHOUT VISUAL VERIFICATION. If the home page reads
   loose or gappy, delete this block first — it reverts cleanly and touches
   nothing else. */
section.team         { padding: 52px 0 48px; }
section.compare      { padding: 52px 0 48px; }
section.testimonials { padding: 52px 0 48px; }
section.categories   { padding: 52px 0; }
section.compass      { padding: 52px 0 48px; }

@media (max-width: 900px) {
  section.team, section.compare, section.testimonials,
  section.categories, section.compass { padding: 38px 0 34px; }
}


/* ---------- HOME: the "See the truth" button had three loops running ----------
   .hs-truth carried truthBob (a 2.8s vertical bob), truthGlow (a box-shadow
   pulse) and truthSheen (a sweeping highlight on ::before) all running
   infinitely, on the primary hero CTA. Perpetual shimmer is direct-response
   styling; this audience is buying a $200K-$1M remodel and skews older, and
   the rest of the page is deliberately quiet.

   Keeping the bob — one resting motion is an invitation. Dropping the sheen
   and the glow, which are the two that read as an ad. Revert by deleting this
   block; the keyframes themselves still live in the generated home.css. */
.hs-truth { animation: truthBob 2.8s ease-in-out infinite; }
.hs-truth::before { display: none; }


/* ---------- Reduced motion was only honoured for one element ----------
   home.css guards .hero-scroll .hs-dot and nothing else, so a visitor who has
   asked their OS to reduce motion still got the bobbing CTA, the sweeping
   sheen and the dropping chevrons. Honour the preference properly. */
@media (prefers-reduced-motion: reduce) {
  .hs-truth,
  .hs-truth::before,
  .hs-truth *,
  .hero-scroll .hs-dot,
  .hero-scroll * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 620px) {
  .pf-stats { grid-template-columns: 1fr !important; }
  .served-divider .label { font-size: 19px; }
}


/* ---------- HOME: the hero overflowed the screen on a phone ----------
   Found 02.09 by screenshotting the page at real device widths, which no review
   had done before — every previous pass read HTML, and HTML cannot show you
   that the page is 130px wider than the phone.

   At 414px and below the hero ran off the right edge: the CTA descriptions were
   cut mid-word, the case-study caption was cut, and the header's hamburger was
   pushed off-screen entirely — so a phone visitor had NO navigation at all.
   At 768px everything is fine, which is why it survived: the 980px breakpoint
   stacks the hero correctly and the failure only appears two breakpoints later.

   CAUSE, and it is a one-line CSS bug. home.css sets

       .hs-cta em { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

   which LOOKS like it truncates. It does not. A flex item's default is
   min-width:auto, so `em` refuses to shrink below its own text and the ellipsis
   never engages — the row just gets wider than its parent. Measured at 414px the
   row wants ~504px against ~370px of available width.

   min-width:0 restores the intended truncation at every size. Below 560px the
   description is dropped instead of ellipsed: "The seven phases, start to fin…"
   is worse than nothing, and the destination already says it. */
.hs-cta em { min-width: 0; }

@media (max-width: 560px) {
  .hs-ctas { max-width: none; }
  .hs-cta { justify-content: space-between; }
  .hs-cta em { display: none; }
  .hs-truth { max-width: none; }
}


/* ==== LAUNCH PASS - 2026-09-21 ==============================================
   MIRROR. This file is served at ?ver=0.5.0 and edge-cached for a year, so
   the live copy of every rule below is the <style id="icon-0921-launch">
   block in the jamify_hfs_insert_footer option (dynamic, reaches a browser
   today). This copy is the one that survives the agency's version bump;
   delete the option copy when that bump ships. WHY !important: page style
   blocks live in post_content, after every stylesheet in document order, and
   win any tie. */

/* ---- 1. ONE ALIGNMENT, LEFT (Jeremy, 09-21) --------------------------------
   Measured: 27 of 35 headings were left; the centred exceptions were section
   openers, ledes, closing bands and CTA rows. Census of every pages/*.css
   rule that sets text-align:center on a heading, lede, section head or CTA
   row. Left alone on purpose: labels, chips, buttons, pull quotes
   (.os-callout, .cc-agree, .lifetime-callout), stat cells, dividers, the
   accordion "+" (.cc-pl), cards, nav and footer. margin-left:0 only where a
   lede-width block (760-840px) sat on margin:auto, so it meets the column
   edge instead of floating; container-width blocks (1040-1320px) keep their
   auto margin so they stay in line with the sections above them. */
section.cc-intro, .cf-head, .po-head, .po-closer,
.ov-sechead, .ov-cta,
.is-lede, .is-sec-divider, .is-closing, .is-awards-feature, .is-affil,
.page-id-4286 section[style*="text-align:center"],
.qeb-lede, .qeb-closing, .bec-lede, .bec-closing,
.ll-lede, .ll-cta-box, .sp-lede, .sp-cta-box,
.cg-lede, .cg-closing, .rf-lede, .rf-closing,
.cc-eyebrow, .cc-h2, .cc-lede, .cc-acc-h, .cc-acc-s,
.wd-cta, .aia-foot-cta, .pf-tail-inner { text-align: left !important; }

/* ---- 1a. /the-compass/: .ov-sechead takes the .ov-matrix box ---------------
   Left-aligned by rule 1, .ov-sechead has no max-width and padding 0, so the
   h2 sat flush at x=0. Same box as the matrix below it: left edges meet at
   1440 and the 30px gutter holds at 390. */
.page-id-5848 .ov-sechead{max-width:1260px;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;box-sizing:border-box}

/* ---- 1b. /the-compass/: the "Hartwell Residence" note meets the h2 ----------
   Rule (7) margins body.page-id-5848 > p to the 1336/38 matrix WRAPPER
   (x=90 at 1440, 38 at 390); rule 1a put the h2 in the 1260/30 box (x=120,
   30). Same box math as 1a, kept as a margin so the note keeps its 760px
   reading measure (an inline style). Same specificity as (7), later in the
   document, so it wins. */
body.page-id-5848 > p { margin-left: max(calc((100% - 1260px) / 2 + 30px), 30px) !important; }

/* ---- 5b-2. /our-story/ stats: the word cells take the digit-cell box -------
   (5b) sizes "Hundreds of" / "Dozens of" at clamp(24px,2.4vw,34px) with
   line-height 2.1, a 71.4px box at 1440 (50.4 at 390) beside 54px digit
   cells, so those two labels sat 17px low. Measured 09-21: every digit cell
   is font-size 54px / line-height 54px / height 54px at both widths. */
.page-id-4286 .os-stat:nth-child(3) .os-stat-num,
.page-id-4286 .os-stat:nth-child(5) .os-stat-num { height: 54px; line-height: 54px; }

.po-head, .po-closer, .is-lede, .qeb-lede, .bec-lede, .ll-lede, .ll-cta-box,
.sp-lede, .sp-cta-box, .cg-lede, .rf-lede, .cc-lede { margin-left: 0 !important; }

/* ---- 2. /the-compass/: the Discovery Summary mock is shown as a document ----
   The export's own style#artcss tilts .doc by -1.3deg and stamps
   "ILLUSTRATIVE OF METHOD" across it via .doc::after. The copy beside it now
   says "This is its contents page", so it is shown straight and unstamped. */
.page-id-5848 .doc { transform: none !important; }
.page-id-5848 .doc::after { display: none !important; }

/* ---- 6. /awards/ hero: the summary stacks under the headline ---------------
   awards.css runs the hero as a 1.2fr/1fr grid with the summary in a
   left-bordered right rail; with the site left-aligned the rail read as a
   second column. One column, rule above, 60ch measure. */
.page-id-5794 .page-hero-inner { grid-template-columns: 1fr !important; }
.page-id-5794 .page-hero .right-rail {
  border-left: 0; padding-left: 0;
  border-top: 2px solid var(--tan); padding-top: 18px; max-width: 60ch;
}