/* ==========================================================================
   MVR Public Relations — additions for the service, industry, about and
   insights pages, plus targeted repairs to shared components.

   Loaded AFTER styles.css on every page. Uses only the existing design
   tokens (--red, --red-ink, --ink, --ivory, --rule, --gutter, --ease).
   No new colours, no new type stack, no new motion curves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   REPAIR: nav gutter.
   `.nav-row{padding:16px 0}` and `.wrap{padding-left/right:var(--gutter)}`
   have equal specificity, so the later `.nav-row` shorthand was resetting the
   horizontal gutter to zero and pinning the nav to the viewport edge.
   Restoring the gutter aligns the nav with every other `.wrap` on the page.
   -------------------------------------------------------------------------- */
.nav .nav-row{padding-left:var(--gutter);padding-right:var(--gutter)}

/* --------------------------------------------------------------------------
   REPAIR: screen-reader-only heading utility.
   /work/ used `.visually-hidden`, which was never defined, so its <h1>
   rendered as unstyled visible text. Pages now use the existing `.sr-only`;
   this alias keeps any stray markup safe.
   -------------------------------------------------------------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   Footer: five columns so services, work, studio and contact all fit.
   -------------------------------------------------------------------------- */
.footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}
@media (max-width:1100px){.footer-top{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr}}
/* Case-study footers use <h5>; give it the same label treatment as <h3>. */
.fcol h5{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);margin:0 0 18px}

/* --------------------------------------------------------------------------
   Guide rows: the linked list used on hub pages and in "relevant work".
   Built from the same rule + red-arrow language as `.cs-next`.
   -------------------------------------------------------------------------- */
.guide-list{border-top:1px solid var(--ink);margin:0 0 18px}
.guide-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--rule);
  transition:background .2s var(--ease),padding-left .2s var(--ease);
}
.guide-row:hover{background:linear-gradient(90deg,rgba(192,57,47,.05) 0%,transparent 60%);padding-left:12px}
.guide-row .gr-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.guide-row .gr-title{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.guide-row:hover .gr-title{color:var(--red)}
.guide-row .gr-desc{font-size:15px;font-weight:500;color:var(--ink-70);line-height:1.5}
.guide-row .gr-arrow{flex:none;font-size:18px;color:var(--red-ink);transition:transform .2s var(--ease)}
.guide-row:hover .gr-arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .guide-row,.guide-row .gr-arrow{transition:none}
  .guide-row:hover{padding-left:0}
  .guide-row:hover .gr-arrow{transform:none}
}

/* --------------------------------------------------------------------------
   Related links strip (bottom of a reading block or a case study).
   -------------------------------------------------------------------------- */
.page-related{
  margin:0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);
}
.page-related a{color:var(--red-ink)}
.page-related a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   FAQ block on a service / industry / insight page.
   Reuses `.faq` internals; this only sets the section rule and rhythm.
   -------------------------------------------------------------------------- */
.page-faq-sec{border-top:1px solid var(--rule);padding:clamp(56px,7vw,110px) 0}

/* --------------------------------------------------------------------------
   Insights teaser on the homepage.
   -------------------------------------------------------------------------- */
.insights-home{padding:var(--section-pad) 0;background:var(--ivory);border-top:1px solid var(--rule)}
.insights-home .guide-list{margin-top:44px}

/* --------------------------------------------------------------------------
   Homepage hero: secondary button beside the primary one.

   The hero is a full red drench (`.hero{background:var(--red)}`). Two earlier
   attempts failed the AA target for 13px label text:
     --red-ink on --red   about 1.3:1, effectively invisible
     --paper  on --red         4.32:1, AA Large only

   Filling the button with --red-ink and keeping the label white gives
   5.44:1, which clears AA for small text. The paper border keeps the button
   edge at 4.32:1 against the hero, well over the 3:1 needed for a
   non-text boundary. Padding, font size and tracking come from `.btn`
   unchanged, so layout and type are untouched: this rule only sets colour.

   Hover mirrors the existing `.btn-red:hover`, filling with --ink:
   white on --ink is 16.1:1.
   -------------------------------------------------------------------------- */
.hero .btn-ghost{background:var(--red-ink);color:var(--paper);border-color:var(--paper)}
.hero .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* --------------------------------------------------------------------------
   Measurement note under a case-study numbers band.
   -------------------------------------------------------------------------- */
.measurement-note{
  max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter) 0;
  font-size:13px;line-height:1.6;color:var(--ink-50);
}
.measurement-note b{font-weight:700;color:var(--ink-70)}

/* --------------------------------------------------------------------------
   Contact form: attribution fields, help text and the error/status region.
   Matches the existing `.cfield` treatment exactly.
   -------------------------------------------------------------------------- */
.cfield select{
  font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);
  background:var(--ivory);border:1px solid var(--rule);padding:14px 16px;border-radius:2px;
  transition:border-color .2s,background .2s;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.cfield select:focus{outline:none;border-color:var(--red);background-color:var(--paper)}
.cfield .cfield-help{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-50);line-height:1.5}

.cfield.has-error input,.cfield.has-error textarea,.cfield.has-error select{border-color:var(--red-ink);background:var(--red-20)}
.cfield-error{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--red-ink)}

.form-status{
  border:1px solid var(--red-ink);background:var(--red-20);
  padding:16px 18px;border-radius:2px;
  display:flex;flex-direction:column;gap:10px;
}
/* An author `display` declaration beats the UA stylesheet's [hidden] rule, so
   without this the empty red error box renders before the form is submitted. */
.form-status[hidden]{display:none}
.form-status p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.form-status a{align-self:flex-start}

/* --------------------------------------------------------------------------
   Reading pages: a slightly tighter rhythm than a case study, and a rule
   between blocks so a long guide stays scannable.
   -------------------------------------------------------------------------- */
.reading .cs-block{margin-bottom:clamp(40px,5vw,64px)}
.reading .cs-block + .cs-block{border-top:1px solid var(--rule);padding-top:clamp(40px,5vw,64px)}
.reading .cs-block h2{font-size:clamp(24px,3vw,38px)}
.reading .cs-block ol{margin:0 0 18px;padding:0 0 0 22px;display:flex;flex-direction:column;gap:12px}
.reading .cs-block ol li{font-size:16px;color:var(--ink-70);line-height:1.6}
.reading .cs-block ol li::marker{color:var(--red-ink);font-weight:800}
.reading .cs-block p a,.reading .cs-block li a{color:var(--red-ink);font-weight:700}
.reading .cs-block p a:hover,.reading .cs-block li a:hover{color:var(--ink)}

/* Mobile: keep long headings and rows from pushing the layout wide. */
@media (max-width:480px){
  .guide-row{gap:14px}
  .guide-row .gr-title{font-size:18px}
  .reading .cs-block h2{font-size:24px}
}