/*
Theme Name: Street Consulting Group
Theme URI: https://www.streetconsultinggrp.com
Author: The Street Consulting Group
Description: Custom block theme for The Street Consulting Group - healthcare staffing and consulting. Built around the road-marking motif in the company wordmark.
Version: 1.26.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scg
*/

/* --------------------------------------------------------------------------
   The wordmark is two solid rules with a dashed line between them: a road.
   That is the only real idea in the existing brand and the old site did
   nothing with it, so it becomes the site's connective tissue - section
   breaks, the careers path, hover states. Everything else stays quiet so the
   photography and the words carry the page.
   -------------------------------------------------------------------------- */

:root {
  --scg-rule: 1px solid var(--wp--preset--color--rule);
  --scg-dash-gap: 14px;
  --scg-dash-len: 22px;
}

/* The road divider. Two solid rules with dashes between, exactly like the logo. */
.scg-road {
  --dash-color: var(--wp--preset--color--ink);
  border-top: 2px solid var(--dash-color);
  border-bottom: 2px solid var(--dash-color);
  height: 26px;
  position: relative;
  margin-block: var(--wp--preset--spacing--40);
}

.scg-road::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-image: linear-gradient(
    to right,
    var(--dash-color) 0 var(--scg-dash-len),
    transparent var(--scg-dash-len) calc(var(--scg-dash-len) + var(--scg-dash-gap))
  );
  background-size: calc(var(--scg-dash-len) + var(--scg-dash-gap)) 100%;
  background-repeat: repeat-x;
}

/* Inverted, for use on dark sections. */
.scg-road.is-light { --dash-color: var(--wp--preset--color--paper); }

/* A lighter weight version for in-page separation. */
.scg-road.is-slim {
  height: 0;
  border-bottom: 0;
  border-top: 0;
}
.scg-road.is-slim::before { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Hero photograph. The palette is restrained on purpose, so the photography is
   what stops the page feeling cold. Full-bleed within the content width, with
   a fixed aspect so the layout does not jump while it loads.
   -------------------------------------------------------------------------- */
.scg-hero-image {
  margin: var(--wp--preset--spacing--40) 0 0;
  border-radius: 3px;
  overflow: hidden;
}

.scg-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
}

@media (min-width: 900px) {
  .scg-hero-image img { aspect-ratio: 5 / 2; }
}

/* --------------------------------------------------------------------------
   The two doors. Almost everyone arriving is one of two people: a clinician
   after a job, or a manager who is short-staffed. Asking them to pick is
   faster than trying to write one message that serves both, and it means the
   rest of the page can stop hedging.

   Navy for the client side, clay for the candidate side - the two accents
   finally doing a job rather than just decorating.
   -------------------------------------------------------------------------- */
.scg-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-block: var(--wp--preset--spacing--40);
}

@media (min-width: 760px) {
  .scg-doors { grid-template-columns: 1fr 1fr; }
}

.scg-door {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1.9rem 1.75rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--wp--preset--color--paper);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.scg-door:hover,
.scg-door:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(28, 26, 23, 0.16);
}

.scg-door--candidate { background: var(--wp--preset--color--clay); }
.scg-door--client    { background: var(--wp--preset--color--navy); }

.scg-door__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.scg-door__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

.scg-door__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.92;
}

.scg-door__go {
  margin-top: 0.6rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Sticky action dock, PHONES ONLY.

   Deliberately not shown on desktop: the header already follows you down the
   page there, so a second fixed bar would only eat reading space. On a phone
   the nav is cramped and the page is long, so having jobs, hiring and the
   phone number permanently within thumb reach is worth the strip.
   -------------------------------------------------------------------------- */
.scg-dock { display: none; }

@media (max-width: 767px) {
  .scg-dock {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: var(--wp--preset--color--ink);
    /* Clear of the home indicator on iPhones. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 16px rgba(28, 26, 23, 0.18);
  }

  .scg-dock__link {
    padding: 0.95rem 0.5rem;
    text-align: center;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--wp--preset--color--paper);
  }

  .scg-dock__link--jobs { background: var(--wp--preset--color--clay); }
  .scg-dock__link--hire { background: var(--wp--preset--color--navy); }
  .scg-dock__link--call { padding-inline: 1.25rem; }

  /* Stop the dock covering the end of the page. */
  body { padding-bottom: 3.75rem; }
}

/* --------------------------------------------------------------------------
   Client call-to-action band. Sits above the footer, so it appears on every
   page without needing to be added to each template - a visitor who decides to
   call never has to go looking for how.

   Clay rather than navy: the footer below it is near-black, and two dark bands
   stacked would read as one heavy slab.
   -------------------------------------------------------------------------- */
.scg-cta-band {
  background: var(--wp--preset--color--clay);
  color: var(--wp--preset--color--paper);
  margin-top: var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.scg-cta-band__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.scg-cta-band__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

.scg-cta-band__body {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.92;
  max-width: 46ch;
}

.scg-cta-band__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.scg-cta-band__button {
  display: inline-block;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--clay);
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  white-space: nowrap;
}

.scg-cta-band__button:hover,
.scg-cta-band__button:focus-visible {
  background: var(--wp--preset--color--bone);
  color: var(--wp--preset--color--ink);
}

.scg-cta-band__phone {
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.scg-cta-band__phone:hover,
.scg-cta-band__phone:focus-visible { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   Social links in the footer.
   -------------------------------------------------------------------------- */
.scg-social {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.scg-social a {
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 1px;
}

.scg-social a:hover,
.scg-social a:focus-visible {
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   Three-up cards. Columns of bare text go ragged as soon as the copy is
   uneven, which looked accidental. Equal-height cards on a tint read as
   deliberate and stay symmetrical whatever the wording does.
   -------------------------------------------------------------------------- */
.scg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-block: var(--wp--preset--spacing--40);
}

.scg-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule);
  border-top: 3px solid var(--wp--preset--color--clay);
  border-radius: 3px;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.scg-card h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0;
  /* Reserve two lines so the body copy starts at the same height in every card
     even when one heading wraps and another does not. */
  min-height: 2.6em;
}

.scg-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   Text beside a tall photograph. Breaks up long runs of prose and gives the
   warm sections something to hold onto.
   -------------------------------------------------------------------------- */
.scg-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: var(--wp--preset--spacing--30);
}

@media (min-width: 820px) {
  .scg-split { grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: start; }
}

.scg-split__text h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
}

.scg-split__text h3 + p { margin-top: 0; }
.scg-split__text h3:not(:first-child) { margin-top: 2rem; }

.scg-split__photo {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
}

.scg-split__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Inline photography on interior pages.
   -------------------------------------------------------------------------- */
.scg-photo {
  margin: var(--wp--preset--spacing--40) 0;
  border-radius: 3px;
  overflow: hidden;
}

.scg-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 35%;
}

/* --------------------------------------------------------------------------
   Navigation. Plain links rather than the navigation block - see the comment
   in parts/header.html for why.
   -------------------------------------------------------------------------- */
/* The header follows you down the page, so Careers and Hire staff are always
   one click away rather than a scroll back to the top.

   The sticky has to go on the TEMPLATE PART WRAPPER, not on .scg-header
   itself. WordPress wraps a template part in its own element, and a sticky
   child only sticks within its parent - a parent that is exactly as tall as
   the header, so it never moves. Targeting the wrapper was the fix. */
header.wp-block-template-part,
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.scg-header {
  background: var(--wp--preset--color--paper);
  /* Slightly tighter than the static version - a sticky bar that takes a third
     of a phone screen is worse than no sticky bar. */
  padding-top: 0.9rem !important;
  padding-bottom: 0.9rem !important;
  box-shadow: 0 1px 0 var(--wp--preset--color--rule), 0 6px 18px rgba(28, 26, 23, 0.05);
}

/* WordPress's own toolbar is fixed at the top for logged-in admins, so the
   header has to start below it or the two overlap. */
.admin-bar header.wp-block-template-part,
.admin-bar .wp-site-blocks > header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar header.wp-block-template-part,
  .admin-bar .wp-site-blocks > header { top: 46px; }
}

/* Anchor links (the Apply button on a job page) must not land under the
   sticky header. */
:target { scroll-margin-top: 6.5rem; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.scg-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.scg-nav a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.scg-nav a:hover,
.scg-nav a:focus-visible {
  border-bottom-color: var(--wp--preset--color--clay);
  color: var(--wp--preset--color--clay);
}

/* Careers is the page that earns the traffic and most of the visitors want it,
   so it gets weight the other links do not. */
.scg-nav a[href="/careers/"] {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}

/* Employee login. Placed employees enter their hours here every week, and Kyle
   could not find it when it was a footer link - so if he could not, they never
   would. Outlined rather than solid so it does not compete with Hire staff,
   and the address is shown underneath because people recognise the address
   they have been told to go to. */
.scg-nav a.scg-nav__login {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 0.45rem 1rem;
  border: 1px solid var(--wp--preset--color--navy);
  border-radius: 2px;
  color: var(--wp--preset--color--navy);
}

.scg-nav a.scg-nav__login:hover,
.scg-nav a.scg-nav__login:focus-visible {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--paper);
  border-bottom-color: var(--wp--preset--color--navy);
}

.scg-nav__login-label { font-weight: 700; font-size: 0.9375rem; }
.scg-nav__login-url   { font-size: 0.6875rem; opacity: 0.75; letter-spacing: 0.01em; }

@media (max-width: 640px) {
  /* The mobile dock already carries the main actions, and the address is too
     wide for a phone header. */
  .scg-nav__login-url { display: none; }
}

/* The client-side action is the one that earns money, so it is the only link
   that looks like a button. */
.scg-nav a.scg-nav__cta {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--paper);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  border-bottom: 0;
}

.scg-nav a.scg-nav__cta:hover,
.scg-nav a.scg-nav__cta:focus-visible {
  background: var(--wp--preset--color--navy-deep);
}

/* Open jobs is the first thing in the header (Kyle 2026-10-08: "the open jobs
   should be a button or visible at the very top"). Clay, so it reads apart
   from Hire staff; paper on the green accent measured 5.1:1 (AA). */
.scg-nav a.scg-nav__cta--jobs { background: var(--wp--preset--color--clay); font-weight: 700; }
.scg-nav a.scg-nav__cta--jobs:hover,
.scg-nav a.scg-nav__cta--jobs:focus-visible { background: var(--wp--preset--color--clay); filter: brightness(0.88); }

@media (max-width: 640px) {
  .scg-nav { gap: 1rem; font-size: 0.875rem; width: 100%; }
}

/* --------------------------------------------------------------------------
   Eyebrow label. Small caps above a heading - used to orient the reader
   without another heading level competing with the h2.
   -------------------------------------------------------------------------- */
.scg-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Clay rather than grey. These labels appear at the top of every section, so
     colouring them is the cheapest way to get warmth through the whole site
     without shouting. */
  color: var(--wp--preset--color--clay);
  margin-bottom: 0.5rem;
  display: block;
}

/* A short clay rule under section headings - carries the accent down the page
   rather than leaving it only at the top of each block. */
.scg-eyebrow::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--wp--preset--color--clay);
  margin-top: 0.45rem;
}

/* --------------------------------------------------------------------------
   Job listings. The single most important content on the site - these pages
   are what Indeed scrapes and Google for Jobs indexes, and they are where the
   traffic will come from.
   -------------------------------------------------------------------------- */
.scg-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--scg-rule);
}

.scg-job {
  border-bottom: var(--scg-rule);
}

.scg-job a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start 160ms ease, background-color 160ms ease;
}

.scg-job a:hover,
.scg-job a:focus-visible {
  background: var(--wp--preset--color--bone);
  padding-inline-start: 0.85rem;
}

.scg-job__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.scg-job__meta {
  font-size: 0.9375rem;
  color: var(--wp--preset--color--muted);
  grid-column: 1;
}

.scg-job__cta {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
  white-space: nowrap;
}

.scg-jobs__empty {
  padding: 2rem 0;
  color: var(--wp--preset--color--muted);
}

/* Key facts strip on a single job page. */
.scg-job-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: var(--scg-rule);
  border-bottom: var(--scg-rule);
  margin-block: var(--wp--preset--spacing--30);
}

.scg-job-facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.2rem;
}

.scg-job-facts dd {
  margin: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Testimonials. Quiet and typographic - a wall of star ratings reads as
   marketing, a well-set quote reads as true.
   -------------------------------------------------------------------------- */
.scg-quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem 2.5rem;
  margin-top: var(--wp--preset--spacing--30);
}

.scg-quote {
  /* Clay rather than navy: the warm accent is reserved for the human parts of
     the site, navy for the functional ones. */
  border-inline-start: 3px solid var(--wp--preset--color--clay);
  padding-inline-start: 1.5rem;
  margin: 0;
}

.scg-quote p {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  line-height: 1.6;
}

.scg-quote cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
}

.scg-quote cite strong { color: var(--wp--preset--color--ink); }

/* --------------------------------------------------------------------------
   Forms. Candidate applications and client enquiries. Deliberately plain:
   people abandon forms that feel like a sales funnel.
   -------------------------------------------------------------------------- */
.scg-form {
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
}

.scg-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.scg-form .scg-form__hint {
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}

.scg-form input[type="text"],
.scg-form input[type="email"],
.scg-form input[type="tel"],
.scg-form input[type="file"],
.scg-form textarea,
.scg-form select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  font: inherit;
  background: var(--wp--preset--color--paper);
}

.scg-form input:focus-visible,
.scg-form textarea:focus-visible,
.scg-form select:focus-visible {
  outline: 2px solid var(--wp--preset--color--navy);
  outline-offset: 1px;
}

.scg-form textarea { min-height: 8rem; resize: vertical; }

.scg-form__error {
  background: #fdeaea;
  border: 1px solid #e6a0a0;
  color: #8a0016;
  padding: 0.8rem 1rem;
  border-radius: 2px;
  font-size: 0.9375rem;
}

.scg-form__success {
  background: #e7f3ea;
  border: 1px solid #9ec8a9;
  color: #17532b;
  padding: 1rem 1.15rem;
  border-radius: 2px;
}

/* Spam honeypot. Hidden from people, visible to bots that fill everything in.
   Kept out of the tab order and hidden from screen readers. */
.scg-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
/* The skip link. Off screen until it is focused, then the first thing on the
   page. Sits above the sticky header's z-index, or it would appear underneath
   the very thing it exists to skip past. */
.scg-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 200;
}
.scg-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--navy);
  outline-offset: 2px;
}

/* WCAG 2.2, 2.4.11 Focus Not Obscured. A sticky header introduces this problem:
   tab down the page and the browser scrolls the focused element to the very top
   of the viewport, which is underneath the header. scroll-padding-top reserves
   that strip, so whatever has focus is always visible. Same value as the anchor
   scroll-margin above, and it has to track the header's height. */
html {
  scroll-padding-top: 6.5rem;
}

/* The mobile dock is fixed to the bottom, so it can hide a focused link at the
   end of the page for exactly the same reason. */
@media (max-width: 767px) {
  html { scroll-padding-bottom: 4.5rem; }
}

/* WCAG 2.2, 2.5.8 Target Size (Minimum): anything you have to press is at least
   24 by 24. The nav, buttons and dock are already well clear of this; the rule
   is a floor so a future addition cannot quietly fall below it. Links inside a
   sentence are exempt by the guideline and excluded here. */
.scg-nav a,
.scg-dock__link,
.wp-element-button,
.scg-cta-band__button,
.scg-social a {
  min-height: 24px;
  min-width: 24px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* The site logo is a JPG with a white background rather than a transparent
   PNG or SVG, so it can only sit on white. If a vector version ever turns up,
   remove this and the constraint goes with it. */
.custom-logo { background: #fff; }























/* --------------------------------------------------------------------------
   Careers list as separate cards (Kyle 2026-10-08: "it's all the same color,
   no separation, it's like reading a book"). Each job is its own block with
   space around it, a navy title and a clear "View and apply" button.
   -------------------------------------------------------------------------- */
.scg-jobs__heading { margin-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--30); }
.scg-jobs__heading::after { content: " \2193"; color: var(--wp--preset--color--clay); }
.scg-jobs .wp-block-post-template { display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.scg-job-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule);
  border-left: 5px solid var(--wp--preset--color--clay);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
}
.scg-job-card .wp-block-post-title { margin: 0 0 0.5rem; line-height: 1.25; }
.scg-job-card .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.scg-job-card .wp-block-post-title a:hover,
.scg-job-card .wp-block-post-title a:focus-visible { text-decoration: underline; }
.scg-job-card .wp-block-post-excerpt { margin: 0 0 1rem; color: var(--wp--preset--color--muted); line-height: 1.6; }
.scg-job-card .wp-block-post-excerpt__more-text { display: none; }
.scg-job-card a.wp-block-read-more {
  display: inline-block;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--paper);
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
  min-height: 24px;
}
.scg-job-card a.wp-block-read-more:hover,
.scg-job-card a.wp-block-read-more:focus-visible { background: var(--wp--preset--color--navy-deep); }

.scg-job-card a.wp-block-read-more::after { content: " \2192"; }

/* Contact us in the header on every page (Kyle 2026-10-08) - the sticky header
   keeps it on screen. Outlined so it doesn't compete with the two filled buttons. */
.scg-nav a.scg-nav__contact {
  border: 2px solid var(--wp--preset--color--clay);
  color: var(--wp--preset--color--clay);
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-weight: 700;
}
.scg-nav a.scg-nav__contact:hover,
.scg-nav a.scg-nav__contact:focus-visible {
  background: var(--wp--preset--color--clay);
  color: var(--wp--preset--color--paper);
}

/* A gentle nudge toward the jobs (Kyle 2026-10-08: "gently blink or pop up
   like open jobs with the arrow down"). Plays three times on page load and
   stops - under five seconds, so it never needs a pause control (WCAG 2.2.2) -
   and not at all for anyone who has asked their device for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .scg-jobs__heading::after {
    display: inline-block;
    animation: scg-nudge-down 1.2s ease-in-out 0.6s 3;
  }
  .scg-nav a.scg-nav__cta--jobs {
    animation: scg-soft-glow 1.4s ease-in-out 0.8s 2;
  }
}
@keyframes scg-nudge-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes scg-soft-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--clay) 35%, transparent); }
}
/* --------------------------------------------------------------------------
   Breathing room (Kyle 2026-10-08, About page screenshot: "it looks so
   jumbled"). Headings sat right on the text above them, the big intro line
   was double-spaced, and the page could scroll sideways a little, which cut
   off the logo and the green band on the left.
   -------------------------------------------------------------------------- */
html, body { overflow-x: clip; }

main .wp-block-heading:where(h2) { margin-top: 3rem; margin-bottom: 0.85rem; line-height: 1.2; }
main .wp-block-heading:where(h3) { margin-top: 2rem; margin-bottom: 0.5rem; }
main > .wp-block-heading:first-child,
main h1 + .wp-block-heading { margin-top: 0; }

/* The large grey intro line: a lead, not a paragraph spread over four rows. */
main p.has-large-font-size { line-height: 1.45; max-width: 46ch; margin-bottom: 1.5rem; }

main p { max-width: 68ch; }
main figure, main .wp-block-image, main .scg-photo { margin-block: 2rem; }

/* Header: the buttons share the row with the logo instead of pushing past
   the edge of the screen; they wrap under it on narrower windows. */
.scg-header > .wp-block-group { gap: 1rem 2rem; align-items: center; }
.scg-nav { gap: 1.1rem 1.4rem; justify-content: flex-end; }
/* --------------------------------------------------------------------------
   Side-by-side rows (Kyle 2026-10-08: "use left and right side ... pictures
   on one side and words on another ... uniform"). Every row is the same width
   (1180px), photo and text vertically centred, photos all the same shape.
   Rows alternate with --flip. On phones they stack, photo first.
   -------------------------------------------------------------------------- */
.scg-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  margin-block: var(--wp--preset--spacing--50);
}
@media (min-width: 860px) {
  .scg-row { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .scg-row--flip .scg-row__media { order: -1; }
}
.scg-row__text { min-width: 0; }
.scg-row__text > :first-child { margin-top: 0; }
.scg-row__text h2 { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; margin: 2rem 0 0.75rem; }
.scg-row__text p { max-width: 60ch; }
.scg-row__media { margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 36px -18px rgba(18, 53, 90, 0.45); }
.scg-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.scg-row__media--seal { box-shadow: none; max-width: 320px; justify-self: center; }
.scg-row__media--seal img { aspect-ratio: 1 / 1; object-fit: contain; background: var(--wp--preset--color--paper); }

.scg-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.45; color: var(--wp--preset--color--muted); margin: 0 0 1.25rem; }
@media (min-width: 860px) { .scg-lead { font-size: 1.5rem; } }

.scg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.scg-actions--center { justify-content: center; margin-block: var(--wp--preset--spacing--40); }
a.scg-button-outline {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--wp--preset--color--navy);
  color: var(--wp--preset--color--navy);
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
}
a.scg-button-outline:hover, a.scg-button-outline:focus-visible { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--paper); }

/* Cards: three across, or two across with --two; all the same height. */
.scg-cards.alignwide { margin-block: var(--wp--preset--spacing--50); }
@media (min-width: 860px) {
  .scg-cards.alignwide { grid-template-columns: repeat(3, 1fr); }
  .scg-cards--two.alignwide { grid-template-columns: repeat(2, 1fr); }
}
.scg-card { border-top-color: var(--wp--preset--color--clay); }
.scg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.9375rem; }
.scg-checks li { padding-left: 1.6rem; position: relative; }
.scg-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--clay); font-weight: 700; }

.scg-section-title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); margin: var(--wp--preset--spacing--50) auto 0; }

/* Header: logo never shrinks or slides off the left edge; the buttons take
   the rest of the row and wrap under it when the window is narrow. */
.scg-header > .wp-block-group { flex-wrap: wrap; }
.scg-header .wp-block-site-logo { flex: 0 0 auto; }
.scg-header .scg-nav { flex: 1 1 auto; min-width: 0; }.scg-header > .wp-block-group { max-width: var(--wp--style--global--wide-size, 1180px); width: 100%; padding-inline: 1.25rem; box-sizing: border-box; }
.scg-small { font-size: 0.875rem; color: var(--wp--preset--color--muted); margin-top: 1rem; }

/* Resume on Looking for work: a drop zone (click or drag) and a paste box. */
.scg-resume { display: grid; gap: 0.5rem; }
.scg-resume__title { margin: 0; font-weight: 600; }
.scg-drop {
  display: grid; gap: 0.25rem; justify-items: center; text-align: center;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--wp--preset--color--rule);
  border-radius: 6px;
  background: var(--wp--preset--color--paper);
  cursor: pointer;
}
.scg-drop:hover, .scg-drop.is-over, .scg-drop:focus-within { border-color: var(--wp--preset--color--clay); background: var(--wp--preset--color--clay-soft); }
.scg-drop.has-file { border-style: solid; border-color: var(--wp--preset--color--clay); }
.scg-drop__big { font-weight: 700; color: var(--wp--preset--color--navy); }
.scg-drop input[type="file"] { max-width: 100%; font-size: 0.875rem; }
.scg-resume__or { font-weight: 600; margin-top: 0.5rem; }
/* --------------------------------------------------------------------------
   Homepage, side by side like the other pages (Kyle 2026-10-08).
   -------------------------------------------------------------------------- */
.scg-hero { margin-top: var(--wp--preset--spacing--40); }
.scg-hero__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  margin: 0.4rem 0 1rem;
  text-wrap: balance;
}

/* Trust strip: four facts in a row, all the same size. */
.scg-trust {
  list-style: none; margin: 0 auto; padding: 1.25rem 1.5rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 6px;
}
@media (min-width: 860px) { .scg-trust { grid-template-columns: repeat(4, 1fr); } }
.scg-trust li { display: grid; gap: 0.15rem; padding-left: 0.9rem; border-left: 3px solid var(--wp--preset--color--clay); }
.scg-trust strong { color: var(--wp--preset--color--navy); font-size: 1.0625rem; }
.scg-trust span { color: var(--wp--preset--color--muted); font-size: 0.875rem; }

.scg-doors.alignwide { margin-block: var(--wp--preset--spacing--50); }

/* Hiring now: the job list as cards, three across. */
.scg-home-jobs__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; }
.scg-home-jobs__head .scg-section-title { margin: 0.2rem 0 0; }
.home .scg-jobs {
  max-width: var(--wp--style--global--wide-size, 1180px);
  margin: 1.25rem auto var(--wp--preset--spacing--50);
  border-top: 0;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 760px) { .home .scg-jobs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .home .scg-jobs { grid-template-columns: repeat(3, 1fr); } }
.home .scg-job { border: 1px solid var(--wp--preset--color--rule); border-left: 5px solid var(--wp--preset--color--clay); border-radius: 4px; background: var(--wp--preset--color--paper); }
.home .scg-job a { padding: 1.1rem 1.25rem; height: 100%; box-sizing: border-box; }
.home .scg-job a:hover, .home .scg-job a:focus-visible { padding-inline-start: 1.25rem; background: var(--wp--preset--color--clay-soft); }

/* How it works: three numbered steps across. */
.scg-steps { margin-block: var(--wp--preset--spacing--50); }
.scg-steps__list { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .scg-steps__list { grid-template-columns: repeat(3, 1fr); } }
.scg-steps__list li { counter-increment: step; display: grid; gap: 0.4rem; padding: 1.5rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: 6px; }
.scg-steps__list li::before {
  content: counter(step);
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--paper);
  font-weight: 700;
}
.scg-steps__list strong { font-size: 1.125rem; color: var(--wp--preset--color--navy); }
.scg-steps__list span { color: var(--wp--preset--color--muted); }

/* Testimonials side by side. */
.scg-quotes-wrap { margin-block: var(--wp--preset--spacing--50); }
.scg-quotes { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .scg-quotes { grid-template-columns: repeat(3, 1fr); } }
.scg-quotes .scg-quote { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-top: 4px solid var(--wp--preset--color--clay); border-radius: 6px; padding: 1.5rem; }
.scg-quotes .scg-quote p { font-size: 1rem; }
/* --------------------------------------------------------------------------
   You are here (Kyle 2026-10-15). The current section's link gets a clay line
   under it - the same line hover shows, but always on. Buttons get the line
   just below the button so their shape is unchanged. Home is a plain link
   because the logo alone was not obvious as the way back.
   -------------------------------------------------------------------------- */
.scg-nav a { position: relative; }
.scg-nav a[aria-current="page"]:not(.scg-nav__cta):not(.scg-nav__contact) {
  border-bottom-color: var(--wp--preset--color--clay);
  color: var(--wp--preset--color--clay);
  border-bottom-width: 3px;
}
.scg-nav a.scg-nav__cta[aria-current="page"]::after,
.scg-nav a.scg-nav__contact[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background: var(--wp--preset--color--clay);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Warmer and more alive (Kyle 2026-10-15: "a little more interactive and
   warmer ... more visually appealing"). Cream / warm sand backgrounds (in
   theme.json), softer rounded shapes, one warm "sun" accent for decoration
   only (never text on white), cards that lift when you point at them, photos
   that ease in, and sections that rise gently into view as you scroll.
   All motion is off for anyone who has asked their device for less motion,
   and the scroll effect only runs in browsers that support it natively - no
   script, so nothing to break or to slow the page.
   -------------------------------------------------------------------------- */
:root { --scg-sun: #e9a23b; --scg-radius: 14px; --scg-lift: 0 18px 38px -20px rgba(18, 53, 90, 0.38); }

/* Rounder, friendlier buttons */
.scg-nav a.scg-nav__cta,
.scg-nav a.scg-nav__contact,
.scg-nav a.scg-nav__login,
a.scg-button-outline,
.scg-job-card a.wp-block-read-more,
.wp-element-button { border-radius: 999px; }
.wp-element-button,
a.scg-button-outline { transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease; }
.wp-element-button:hover,
a.scg-button-outline:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(18, 53, 90, 0.55); }

/* Soft cards that lift */
.scg-door,
.scg-card,
.scg-job-card,
.home .scg-job,
.scg-steps__list li,
.scg-trust { border-radius: var(--scg-radius); }
.scg-card,
.scg-job-card,
.home .scg-job,
.scg-steps__list li {
  box-shadow: 0 2px 6px -3px rgba(18, 53, 90, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.scg-card:hover,
.scg-job-card:hover,
.home .scg-job:hover,
.home .scg-job:focus-within,
.scg-steps__list li:hover { transform: translateY(-4px); box-shadow: var(--scg-lift); }
.home .scg-job { overflow: hidden; }
.scg-door { padding: 2.25rem 2rem 2rem; position: relative; overflow: hidden; }
.scg-door::after {
  /* a soft warm glow in the corner of each door */
  content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
  transition: transform 300ms ease; pointer-events: none;
}
.scg-door:hover::after, .scg-door:focus-visible::after { transform: scale(1.35); }
.scg-door:hover, .scg-door:focus-visible { transform: translateY(-4px); box-shadow: var(--scg-lift); }
.scg-door__go { transition: letter-spacing 200ms ease; }
.scg-door:hover .scg-door__go { letter-spacing: 0.03em; }

/* Photos: rounded, with a slow zoom on hover */
.scg-row__media,
.scg-hero-image,
.scg-hero-image img { border-radius: var(--scg-radius); }
.scg-hero-image { overflow: hidden; }
.scg-row__media img,
.scg-hero-image img { transition: transform 600ms ease; }
.scg-row__media:hover img,
.scg-hero-image:hover img { transform: scale(1.04); }
.scg-row__media--seal:hover img { transform: none; }

/* Testimonials: warm cards with a big quote mark */
.scg-quote {
  position: relative;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule);
  border-inline-start: 4px solid var(--wp--preset--color--clay);
  border-radius: var(--scg-radius);
  padding: 2.4rem 1.6rem 1.4rem;
  box-shadow: 0 2px 6px -3px rgba(18, 53, 90, 0.12);
}
.scg-quote::before {
  content: "\201C"; position: absolute; top: -0.35rem; left: 1.1rem;
  font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; color: var(--scg-sun);
}
.scg-quote p { margin-top: 0; }

/* How it works: warm numbered circles */
.scg-steps__list li::before { background: var(--scg-sun); color: var(--wp--preset--color--ink); border-radius: 50%; }

/* Trust strip: warm accent lines */
.scg-trust { box-shadow: 0 2px 6px -3px rgba(18, 53, 90, 0.12); }
.scg-trust li { border-left-color: var(--scg-sun); }

/* Section labels get a short warm dash in front */
.scg-eyebrow::before {
  content: ""; display: inline-block; width: 1.6rem; height: 3px; margin-right: 0.55rem;
  vertical-align: middle; background: var(--scg-sun); border-radius: 2px;
}

/* Sections rise gently into view while scrolling (supported browsers only) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scg-door, .scg-card, .scg-quote, .scg-steps__list li, .scg-row, .home .scg-job, .scg-trust {
      animation: scg-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes scg-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scg-card:hover, .scg-job-card:hover, .home .scg-job:hover, .home .scg-job:focus-within,
  .scg-steps__list li:hover, .scg-door:hover, .scg-door:focus-visible,
  .wp-element-button:hover, a.scg-button-outline:hover { transform: none; }
  .scg-row__media:hover img, .scg-hero-image:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Careers filters (Kyle 2026-10-16: "is this too cluttered?"): search box and
   Area / Role buttons above the list. Built on the same pill shapes as the nav.
   -------------------------------------------------------------------------- */
.scg-jobfilter { display: grid; gap: 0.7rem; margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--rule); border-radius: var(--scg-radius, 14px); box-shadow: 0 2px 6px -3px rgba(18, 53, 90, 0.12); }
.scg-jobfilter__search input { width: 100%; box-sizing: border-box; padding: 0.7rem 1rem; font-size: 1rem; border: 1px solid var(--wp--preset--color--rule);
  border-radius: 999px; background: var(--wp--preset--color--bone); }
.scg-jobfilter__search input:focus { outline: 2px solid var(--wp--preset--color--clay); outline-offset: 1px; background: var(--wp--preset--color--paper); }
.scg-jobfilter__row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.scg-jobfilter__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); min-width: 3.5rem; }
.scg-chip { min-height: 32px; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink); font: inherit; font-size: 0.875rem; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.scg-chip:hover { border-color: var(--wp--preset--color--clay); color: var(--wp--preset--color--clay); }
.scg-chip.is-on { background: var(--wp--preset--color--clay); border-color: var(--wp--preset--color--clay); color: var(--wp--preset--color--paper); }
.scg-chip__n { display: inline-block; min-width: 1.3em; margin-left: 0.2rem; padding: 0 0.35em; border-radius: 999px; background: rgba(0, 0, 0, 0.07); font-size: 0.75rem; font-weight: 700; }
.scg-chip.is-on .scg-chip__n { background: rgba(255, 255, 255, 0.25); }
.scg-jobfilter__count { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.scg-jobfilter__none { margin: 0; padding: 0.8rem 1rem; border-radius: 10px; background: var(--wp--preset--color--clay-soft); }
.scg-jobs [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Google rating (Kyle 2026-10-16): 4.6 stars from 56 Google reviews, shown with
   the testimonials and in the footer, with a "leave a review" link. Numbers are
   typed in - refresh them when the count moves (or wire the Places API).
   -------------------------------------------------------------------------- */
.scg-greviews { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin: 0.4rem 0 1.4rem; }
.scg-greviews__badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px;
  background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); color: var(--wp--preset--color--ink);
  text-decoration: none; box-shadow: 0 2px 6px -3px rgba(18, 53, 90, 0.15); transition: transform 160ms ease, box-shadow 160ms ease; }
.scg-greviews__badge:hover, .scg-greviews__badge:focus-visible { transform: translateY(-2px); box-shadow: var(--scg-lift, 0 18px 38px -20px rgba(18, 53, 90, 0.38)); }
.scg-greviews__g { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff;
  border: 1px solid var(--wp--preset--color--rule); font-weight: 800; color: #4285f4; font-family: Arial, sans-serif; }
.scg-greviews__stars { color: #e9a23b; letter-spacing: 0.05em; font-size: 1.05rem; }
.scg-greviews__go { color: var(--wp--preset--color--clay); font-weight: 700; }
.scg-greviews__leave { color: var(--wp--preset--color--navy); font-weight: 600; }
.scg-greviews-foot { margin: 0.6rem 0; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .scg-greviews__badge:hover { transform: none; } }