/* Beyond Stays shared components.
   Loaded by every page on the Group estate, after tokens.css.

   This file exists because the same 29 CSS variables and the same button
   rules were re-declared inside 41 separate <style> blocks, in three forks.
   Fixes landed on core pages and never reached the 23 SEO and location pages,
   which is how the header CTA came to render as plain text across the entire
   paid and organic acquisition surface.

   Rules defined here must not be redefined in a page's inline <style>. */


/* ---------------------------------------------------------------- BUTTONS */
/* Geometry preserved exactly from the dominant fork so nothing shifts. */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all .25s var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--accent); transform: translateY(-2px); }

.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover{ border-color: var(--ink); background: var(--paper-2); }

/* Was a raw #1E6BC4 in 36 files, hovering to #1c74e0, which was lighter than
   its own rest state. Now tokenised, so it darkens on hover as intended. */
.btn-accent{
  background: var(--accent);
  color: var(--paper);
  padding: 18px 36px;
  font-size: 16px;
}
.btn-accent:hover{
  background: var(--accent-2);
  transform: translateY(-2px);
}


/* ------------------------------------------------------------- BODY LINKS */
/* a { color: inherit; text-decoration: none } is global on 38 pages, so every
   inline link in body copy was invisible. That removed every mid-page
   conversion path that is not a button, and suppressed internal link signals
   on the SEO pages. Buttons and navigation opt out. */

.prose a,
.post-body-inner a,
.lp-body a,
.sp-body a,
.pol-body a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.post-body-inner a:hover,
.lp-body a:hover,
.sp-body a:hover,
.pol-body a:hover{
  text-decoration-thickness: 2px;
}

.prose a.btn, .post-body-inner a.btn, .lp-body a.btn,
.sp-body a.btn, .pol-body a.btn{ text-decoration: none; }


/* ------------------------------------------------------------------ FOCUS */
/* Visible focus ring, matching the pattern already used on the paid landing
   pages. Applies to every interactive element, not only the contact form. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 4px;
}

input:focus, select:focus, textarea:focus{
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}


/* ------------------------------------------------------- PHOTOGRAPHY, P7 */
/* Group register runs 60% saturation. Tested against the real portfolio
   images: near-monochrome killed the warmth of the interiors, which is the
   only thing making the buildings read as occupied rather than vacant. 60%
   keeps the material read of brick, timber and brass while separating the
   Group register from the guest one.

   One class, so it changes in one place. Never applied per image. */

.img-group{ filter: saturate(0.6); }

/* Evidence photography runs untreated. Before-and-after pairs and anything in
   a case study. A desaturated "after" shot undermines the point it is making.
   Tag these explicitly rather than relying on the author to remember. */
.img-evidence{ filter: none; }


/* ------------------------------------------------------------------- MISC */
/* .mp-logo-word used a stack that excluded Inter, so platform wordmarks
   rendered in the OS UI font on nine pages. */
.mp-logo-word{ font-family: var(--sans); }

/* Missing from 25 of the 40 pages carrying the footer. */
.footer .logo em{ color: var(--accent); font-style: normal; }


/* ------------------------------------------------------------ TYPOGRAPHY */
/* Fraunces is the canonical display face. Group tuning is SOFT 0, WONK 0,
   weights 400 to 600, per the decisions log of 20 Aug 2026. Inter remains the
   single sans and carries all body copy, labels and UI.

   h4 stays on Inter deliberately: it is a letterspaced uppercase eyebrow, not
   a heading, and a serif reads badly at 12px in caps.

   No page sets font-family on its headings, so this applies everywhere without
   fighting the 41 inline blocks. */

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-optical-sizing: auto;
}


/* --------------------------------------------------- EMPHASIS ON DARK, fix */
/* These <em> spans sit inside headings on ink-backed sections and were set in
   petrol, which measures under 2:1 there and reads as almost black on black.
   Petrol is a dark accent by design, so it cannot carry emphasis on dark. */

.case-headline em,
.case-meta h3 em,
.case-meta-num em,
.case-metric-num em,
.ap-hero h1 em,
.ap-step h2 em,
.ap-between-header h2 em,
.ap-notdo-header h2 em,
.ap-midcta-copy h3 em,
.ap-timeline-num em,
.about-hero-inner h1 em {
  color: var(--accent-on-dark);
}


/* --------------------------------------------------- DARK SECTIONS, petrol */
/* Petrol #226F80 is a dark accent. That is why it passes on paper. On the
   ink-backed sections it measures under 2:1 and reads as black on black:
   the case-study eyebrow, the "01", the emphasis word in the headline, the
   WhatsApp float.
 
   Rescoping the variable rather than chasing individual rules. Every
   descendant of a dark container inherits the on-dark value automatically,
   so this works regardless of the 41 inline blocks and their load order, and
   any rule added later inherits the fix for free.
 
   Pills and rules that use --blue as a FILL inside these sections keep petrol
   via --blue-fill, since a pale fill with white text on it would be worse
   than the problem being solved. */

.case, .ap-between, .ap-hero, .who-for, .pf-why,
.sp-cta-inner, .sp-proof, .multi-platform, .cta-inner,
.ct-commit, .mp-inner, .lp-sticky-form, .wa-float {
  --blue-fill: #226F80;
  --blue: var(--accent-on-dark);
  --blue-dark: var(--accent-on-dark);
}

.case-photo-pill-blue,
.mp-float-pill { background: var(--blue-fill); color: var(--paper); }

.ap-notdo-item::before,
.case-works-list li::before,
.mp-powered::before { background: var(--accent-on-dark); }

/* The float sits on its own dark chip, so it needs paper text, not accent. */
.wa-float { color: var(--paper); }
.wa-float:hover { color: var(--paper); }


/* ------------------------------------------------- PHOTOGRAPHY, applied */
/* Brand book, Part 08: "Treatment. Saturation 60%. Enough to keep Manchester
   brick warm." Hero grade and supporting imagery run at 60%. Evidence grade,
   meaning before-and-after pairs and case-study proof, runs untreated, because
   a desaturated "after" undermines the point it is making.

   Applied by default to every content image rather than per image, so nothing
   is missed and there is one place to change it. Logos, icons and evidence
   opt out. */

img { filter: saturate(0.6); }

.logo img, .nav img, .footer img,
img[src$=".svg"],
.ba-slider-img,
.img-evidence,
.case-photo img,
[class*="before"] img, [class*="after"] img { filter: none; }