/* =====================================================================
   Paras Interiors — service-page content components   (2026-09-01)
   ---------------------------------------------------------------------
   The sub-service page copy was authored with a full set of semantic
   hooks — paras-challenges-*, paras-services-*, paras-why-*,
   paras-process-*, paras-nearby-* — and NOT ONE of them was ever styled.
   ~340 elements across 7 pages rendered as bare stacked <div>s: icons
   jammed against their own text with no gap, numbered cards with no
   card, a process with no steps, area links as a plain list.

   This is that missing layer. It uses only the existing design tokens
   and sets NO font-family anywhere, so the established type hierarchy
   is untouched — this adds structure, rhythm and colour, nothing else.
   ===================================================================== */

/* ---- opt these components out of the prose measure cap --------------
   typography.css caps .wpb_wrapper at --pi-measure (66ch / 610px) for
   readable prose. These are grids, not prose: capped, the six-across
   challenge grid was being squeezed into a 610px column inside a
   1250px row. */
.post_content .wpb_text_column > .wpb_wrapper:has(> [class*="paras-challenges"]),
.post_content .wpb_text_column > .wpb_wrapper:has(> [class*="paras-services-wrap"]),
.post_content .wpb_text_column > .wpb_wrapper:has(> [class*="paras-why"]),
.post_content .wpb_text_column > .wpb_wrapper:has(> [class*="paras-process"]),
.post_content .wpb_text_column > .wpb_wrapper:has(> [class*="paras-nearby"]){
  max-width:none !important;
}
.paras-challenges-wrap, .paras-services-wrap,
.paras-why-wrap, .paras-nearby-wrap{ max-width:none; }

/* ---- shared section head ------------------------------------------- */
.paras-challenges-label, .paras-services-label,
.paras-why-label, .paras-process-label, .paras-nearby-subtitle{
  font-size:12px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--pi-accent);
  margin:0 0 14px;
  line-height:1.2;
}
.paras-challenges-title, .paras-services-title,
.paras-why-title, .paras-process-heading, .paras-nearby-title{
  margin:0 0 20px;
  max-width:22ch;
}
.paras-nearby-title{ max-width:26ch; }

/* the little accent rule that follows each title */
.paras-challenges-rule, .paras-services-rule,
.paras-why-rule, .paras-nearby-line{
  width:60px;
  height:2px;
  background:var(--pi-accent);
  margin:0 0 30px;
  border:0;
}
.paras-nearby-line{ margin-bottom:22px; }

.paras-challenges-intro, .paras-services-intro, .paras-nearby-desc{
  max-width:68ch;
  margin:0 0 clamp(30px, 3.4vw, 46px);
  color:var(--pi-text-soft, var(--pi-text));
}

/* =====================================================================
   CHALLENGES — "the problems operators bring us"
   Six pain points. Each is a card with its icon in an accent disc, so
   the icon reads as a mark rather than a glyph glued to the sentence.
   ===================================================================== */
.paras-challenges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(14px, 1.6vw, 20px);
}
.paras-challenges-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:clamp(18px, 1.9vw, 24px);
  background:var(--pi-surface);
  border:1px solid var(--pi-line);
  border-left:2px solid var(--pi-accent);
  color:var(--pi-text) !important;
  font-size:15.5px;
  line-height:1.55;
  transition:border-color .18s ease, transform .18s ease;
}
.paras-challenges-card:hover{
  border-color:var(--pi-line-strong, var(--pi-accent));
  border-left-color:var(--pi-accent);
}
.paras-challenges-card i,
.paras-challenges-card .fas,
.paras-challenges-card .fa{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--pi-accent) 15%, transparent);
  color:var(--pi-accent);
  font-size:15px;
  margin:0;
}

/* the closing "book a consultation" note, given its own block so it
   stops reading as a sixth bullet in italics */
.paras-challenges-outro{
  margin:clamp(24px, 2.6vw, 34px) 0 0;
  padding:clamp(20px, 2.2vw, 28px);
  background:var(--pi-surface-2);
  border:1px solid var(--pi-line);
  border-left:2px solid var(--pi-accent);
  max-width:none;
}
.paras-challenges-outro em{ font-style:normal; }
.paras-challenges-outro a{
  color:var(--pi-accent) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =====================================================================
   SERVICES — numbered delivery cards
   ===================================================================== */
.paras-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(22px, 2.6vw, 40px);
}
.paras-services-card{
  border-top:1px solid var(--pi-line);
  padding-top:20px;
}
.paras-services-card > p:first-child{ margin:0 0 10px; }
.paras-services-number{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--pi-accent);
}
.paras-services-heading{ margin:0 0 10px; }
.paras-services-desc{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--pi-text-soft, var(--pi-text)) !important;
}

/* =====================================================================
   WHY — reasons to choose, as a hairline-ruled grid
   ===================================================================== */
.paras-why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(24px, 3vw, 44px);
}
.paras-why-item{
  border-top:1px solid var(--pi-line);
  padding-top:20px;
}
.paras-why-heading{ margin:0 0 10px; }
.paras-why-desc{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--pi-text-soft, var(--pi-text)) !important;
}
.paras-why-desc a{ color:var(--pi-accent) !important; }

/* =====================================================================
   PROCESS — numbered steps with a connecting rule
   ===================================================================== */
.paras-process-top{ margin-bottom:clamp(30px, 3.4vw, 46px); }
.paras-process-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:clamp(22px, 2.6vw, 36px);
}
.paras-process-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.paras-process-number{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--pi-accent);
  color:var(--pi-accent);
  font-size:15px;
  font-weight:600;
}
.paras-process-line{
  flex:1 1 auto;
  height:1px;
  background:var(--pi-line);
}
/* the last step has nothing to connect to */
.paras-process-card.last .paras-process-line{ display:none; }
.paras-process-card h3{ margin:0 0 10px; }
.paras-process-card p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--pi-text-soft, var(--pi-text)) !important;
}

/* =====================================================================
   NEARBY — the area links, as tappable chips instead of a bare list
   ===================================================================== */
.paras-nearby-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
}
.paras-nearby-grid p{ margin:0; }
.paras-nearby-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;               /* comfortably over the 44px touch min */
  padding:12px 18px;
  border:1px solid var(--pi-line);
  color:var(--pi-text) !important;
  font-size:15px;
  text-decoration:none !important;
  transition:border-color .18s ease, background .18s ease;
}
.paras-nearby-card:hover,
.paras-nearby-card:focus-visible{
  border-color:var(--pi-accent);
  background:var(--pi-surface);
}
.paras-nearby-arrow{
  color:var(--pi-accent);
  transition:transform .18s ease;
}
.paras-nearby-card:hover .paras-nearby-arrow{ transform:translateX(3px); }

/* ---- mobile ---------------------------------------------------------- */
@media (max-width:767px){
  .paras-challenges-title, .paras-services-title,
  .paras-why-title, .paras-process-heading, .paras-nearby-title{ max-width:none; }
  .paras-challenges-grid, .paras-services-grid,
  .paras-why-grid, .paras-process-row{ grid-template-columns:1fr; }
  .paras-nearby-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  .paras-process-line{ display:none; }
}

/* =====================================================================
   §ONE RAIL, ONE RHYTHM  (2026-09-01)
   ---------------------------------------------------------------------
   Measured on the kitchen page: inside a single "Nearby Locations" block
   the kicker and description rendered text-align:center (inherited from
   the builder row), the h2 picked up margin-left:121px / margin-right:121px
   from the measure cap and floated to x=261, while the accent rule and the
   chip grid sat correctly on x=140. Three different alignments in one
   section, and different again from the section above it.

   Every one of these components is a left-aligned editorial block, so the
   rail is asserted once here for all five. !important is required: the
   centring comes from builder row classes that load after this sheet.
   ===================================================================== */
.paras-challenges-wrap, .paras-services-wrap,
.paras-why-wrap, .paras-nearby-wrap,
.paras-process-top, .paras-process-row{
  text-align:left !important;
}
.paras-challenges-label, .paras-services-label, .paras-why-label,
.paras-process-label, .paras-nearby-subtitle,
.paras-challenges-title, .paras-services-title, .paras-why-title,
.paras-process-heading, .paras-nearby-title,
.paras-challenges-intro, .paras-services-intro, .paras-nearby-desc,
.paras-challenges-rule, .paras-services-rule,
.paras-why-rule, .paras-nearby-line,
.paras-challenges-outro{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:auto !important;
}
/* the rule is a fixed-width mark, not a text block */
.paras-challenges-rule, .paras-services-rule,
.paras-why-rule, .paras-nearby-line{ margin-right:0 !important; }

/* identical head spacing in all five sections, so the blocks read as a set */
.paras-challenges-label, .paras-services-label, .paras-why-label,
.paras-process-label, .paras-nearby-subtitle{ margin-bottom:14px !important; }
.paras-challenges-title, .paras-services-title, .paras-why-title,
.paras-process-heading, .paras-nearby-title{ margin-bottom:20px !important; }
.paras-challenges-rule, .paras-services-rule,
.paras-why-rule, .paras-nearby-line{ margin-bottom:30px !important; }
.paras-challenges-intro, .paras-services-intro, .paras-nearby-desc{
  margin-bottom:clamp(30px, 3.4vw, 46px) !important;
}

/* the nearby copy carries authored <br> line breaks that only made sense
   while it was centred */
.paras-nearby-desc br{ display:none; }
.paras-nearby-desc{ max-width:68ch; }

/* ---- process: five steps must not orphan the fifth ------------------
   auto-fit at minmax(230px) fitted only four tracks in the 1000px column,
   so a five-stage process rendered 4 + 1, the last card alone on its own
   row with three empty columns beside it. */
.paras-process-row{
  /* 178px + a 30px gap only fitted FOUR tracks in the 1000px column, so a
     five-stage process rendered 4 + 1 with the last card stranded on its own
     row. 150/24 fits five. */
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:clamp(16px, 1.7vw, 24px);
  align-items:start;
}
/* keep the step heading from colliding with its own number */
.paras-process-card h3{ margin-top:0; }

/* pages.css carries SEVEN copy-pasted blocks of
   `.paras-process-top{text-align:center;max-width:620px;margin:0 auto 70px}`.
   Each was meant to be scoped to one page - the `body.page-id-…` prefix only
   ever landed on the comment above it - so an unscoped rule centred the
   process head on every page that has one, 190px off the rail its own step
   cards sit on. Higher specificity so it wins without another !important war. */
.post_content .paras-process-top,
.entry-content .paras-process-top{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}

/* On a phone the 150px track fits two columns, leaving 5 steps as 2+2+1.
   One per row keeps the sequence readable and the cards equal. */
@media (max-width:767px){
  .paras-process-row{ grid-template-columns:1fr !important; }
  .paras-process-line{ display:none; }
}

/* =====================================================================
   §PROCESS — rebuilt as a vertical timeline  (2026-09-01)
   ---------------------------------------------------------------------
   Five steps across a 1000px column gives each one ~150px. At that width
   the headings wrapped to three lines and the copy to eight, every card
   broke at a different height, and the descriptions started at five
   different baselines - the cards could not line up because the layout
   never had room to.

   A legacy `pages.css` block was also fighting it: one of the seven
   copies has no `body.page-id-` prefix at all, so its
   `display:flex; overflow-x:auto` horizontal scroller applied site-wide.

   Vertical is the right shape for this content: the number sits on a
   continuous rule, the copy gets full measure, every step aligns by
   construction, and it works for any number of stages.
   ===================================================================== */
.paras-process-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  overflow:visible !important;        /* kill the legacy overflow-x scroller */
  padding-bottom:0 !important;
}
.paras-process-card{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px, 2.4vw, 34px);
  row-gap:6px;
  flex:none !important;
  min-width:0 !important;
  padding:0 0 clamp(30px, 3.2vw, 44px) !important;
  position:relative;
}
.paras-process-card.last{ padding-bottom:0 !important; }

/* number + the rule that connects it to the next step */
.paras-process-card-top{
  grid-column:1;
  grid-row:1 / span 2;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  height:100%;
  margin-bottom:0 !important;
}
.paras-process-number{
  /* Appearance (54px, hairline ring, hover-fills-accent) belongs to
     area-pages.css, which loads after this sheet - only the flex behaviour
     the timeline needs is set here. The gold "1" seen in review was that
     sheet's :hover state, not a stuck class. */
  flex:0 0 auto;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.paras-process-line{
  display:block !important;
  width:1px !important;
  height:auto !important;
  flex:1 1 auto;
  min-height:18px;
  background:var(--pi-line) !important;
  margin:10px 0 0 !important;
}
.paras-process-card.last .paras-process-line{ display:none !important; }

/* copy sits beside the number, with room to breathe */
.paras-process-card h3{
  grid-column:2;
  grid-row:1;
  margin:0 0 8px !important;
  padding-top:9px;                    /* optically centres against the disc */
  max-width:34ch;
}
.paras-process-card p{
  grid-column:2;
  grid-row:2;
  margin:0 !important;
  max-width:68ch;
  font-size:15px;
  line-height:1.65;
  color:var(--pi-text-soft, var(--pi-text)) !important;
}

@media (max-width:767px){
  .paras-process-card{
    column-gap:16px;
    padding-bottom:26px !important;
  }
  .paras-process-card h3{ padding-top:7px; }
  /* the vertical rule stays on mobile - it is what makes it a sequence */
  .paras-process-line{ display:block !important; }
}

/* =====================================================================
   §SECTION TITLE MEASURE + RHYTHM
   ---------------------------------------------------------------------
   Measured: every section title capped at 582px (22ch) and wrapping to
   THREE lines at 40px, with the last line often a two-word orphan
   ("Approved. Ours Does."). 22ch is a body measure, not a display one.
   Widened to a display measure and balanced so the lines even out.
   ===================================================================== */
.paras-challenges-title, .paras-services-title, .paras-why-title,
.paras-process-heading, .paras-nearby-title{
  max-width:30ch !important;
  text-wrap:balance;
}
.paras-challenges-intro, .paras-services-intro, .paras-nearby-desc{
  max-width:72ch !important;
}
@media (max-width:1023px){
  .paras-challenges-title, .paras-services-title, .paras-why-title,
  .paras-process-heading, .paras-nearby-title{ max-width:none !important; }
}

/* The nearby title rendered 44px while its four sibling section titles sat
   at 40px. A stale duplicate of the old rule survives in
   assets/critical/home-rb.css (`font-size:48px !important`, plus the
   `margin:0 auto` that used to centre it), so editing the source sheet was
   not enough. Pinned to the same h2 scale the other four use. */
html body .post_content.entry-content h2.paras-nearby-title,
html body .post_content h2.paras-nearby-title{
  font-size:var(--pi-fs-h2) !important;
  line-height:1.22 !important;
  margin:0 0 20px !important;
}