/* RedStone Recruiting: shared page styles for every page on the site.
   Load order: globals.css (design system), redstone-theme.css
   (RedStone colours), then this file. Every value is a design-system token. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--spacing-96); }
body {
  margin: 0;
  background: var(--color-surface-base);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-stroke-focus); outline-offset: 2px; }

/* Text links: darkest neutral and underlined (red is reserved for errors) */
a { color: var(--color-text-strong); text-decoration: underline; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
.standalone-link { display: inline-flex; align-items: center; min-height: var(--min-target-size); }

.skip-link { position: absolute; left: -9999px; top: var(--spacing-16); z-index: 20; background: var(--color-surface-raised); padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.skip-link:focus { left: var(--spacing-16); }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.section { padding-block: var(--spacing-96); scroll-margin-top: var(--spacing-96); }
.section-alt { background: var(--color-surface-sunken); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-24 { margin-top: var(--spacing-24); }
.mt-32 { margin-top: var(--spacing-32); }
.mt-48 { margin-top: var(--spacing-48); }

/* Type: named styles only, weights 400 and 600 */
h1 { font-size: var(--text-heading1); line-height: var(--text-heading1--line-height); letter-spacing: var(--text-heading1--letter-spacing); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--text-heading2); line-height: var(--text-heading2--line-height); letter-spacing: var(--text-heading2--letter-spacing); font-weight: var(--font-weight-semibold); max-width: 22ch; }
h3 { font-size: var(--text-heading4); line-height: var(--text-heading4--line-height); font-weight: var(--font-weight-semibold); }
/* Even line lengths in headings, and no single word stranded on the last line of a paragraph */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.tiny { font-size: var(--text-tiny); line-height: var(--text-tiny--line-height); }
.weak { color: var(--color-text-weak); }
.strong { font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.body { max-width: 60ch; color: var(--color-text-weak); }
/* Eyebrow labels are not interactive, so they take no brand colour */
.eyebrow { color: var(--color-text-weak); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-16); }

/* Buttons: Button spec, tone "neutral" (brand red already means error) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  min-height: var(--min-target-size); padding: 0 var(--spacing-16);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--text-small--line-height);
  font-weight: var(--font-weight-semibold); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-raised);
}
.btn-lg { min-height: var(--spacing-56); padding: 0 var(--spacing-24); font-size: var(--text-heading4); line-height: var(--text-heading4--line-height); }
.btn-primary { background-color: var(--color-fill-strong); color: var(--color-text-inverse-strong); }
.btn-primary:hover { background-image: linear-gradient(var(--color-fill-inverse-hover), var(--color-fill-inverse-hover)); }
.btn-primary:active { background-image: linear-gradient(var(--color-fill-inverse-press), var(--color-fill-inverse-press)); }
.btn-secondary { background-color: transparent; color: var(--color-text-strong); border-color: var(--color-stroke-strong); }
.btn-secondary:hover { background-image: linear-gradient(var(--color-fill-hover), var(--color-fill-hover)); }
.btn-secondary:active { background-image: linear-gradient(var(--color-fill-press), var(--color-fill-press)); }
.btn-block { width: 100%; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--color-surface-base); border-bottom: 1px solid var(--color-stroke-weak); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-24); min-height: var(--spacing-80); }
.brand { display: inline-flex; align-items: center; min-height: var(--min-target-size); }
.brand img { height: 36px; width: auto; }
.site-nav { display: flex; gap: var(--spacing-32); }
.site-nav a, .header-phone { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--min-target-size); white-space: nowrap; }
.site-nav a:hover, .header-phone:hover { text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: var(--spacing-24); }

/* Hero: who we are, the result, one action, proof right under the action */
.hero { padding-block: var(--spacing-80) var(--spacing-64); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--spacing-64); align-items: center; }
.hero h1 { max-width: 16ch; }
.lead { margin-top: var(--spacing-24); max-width: 44ch; color: var(--color-text-weak); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin-top: var(--spacing-32); }
.proof-line { display: flex; gap: var(--spacing-12); align-items: flex-start; margin-top: var(--spacing-24); max-width: 52ch; color: var(--color-text-weak); }
.proof-line svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-icon-neutral); }
.photo-slot {
  aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius-lg);
  border: 1px dashed var(--color-stroke-strong); background: var(--color-surface-sunken);
  display: flex; align-items: center; justify-content: center; padding: var(--spacing-24);
  text-align: center; color: var(--color-text-weak); font-size: var(--text-tiny); line-height: var(--text-tiny--line-height);
}
.trust { margin-top: var(--spacing-64); padding-top: var(--spacing-32); border-top: 1px solid var(--color-stroke-weak); }
/* Client logos: one-colour marks on equal 168 x 56 canvases, so a plain grid lines them up.
   The marks are drawn in text-weak's colour; opacity supplies its alpha. */
.logo-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: var(--spacing-32); margin-top: var(--spacing-24); }
.logo-row img { display: block; width: 100%; max-width: 168px; height: auto; opacity: .65; }
.proof-strip .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-theme="dark"] .logo-row img { filter: brightness(0) invert(1); opacity: .78; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-row img { filter: brightness(0) invert(1); opacity: .78; }
}
@media (max-width: 1279px) {
  .logo-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof-strip .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .proof-strip .logo-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .logo-row, .proof-strip .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); } }
@media (max-width: 479px) { .logo-row, .proof-strip .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Problem */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-64); align-items: start; }

/* Value cards */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-24); margin-top: var(--spacing-48); }
.card { background: var(--color-surface-raised); border: 1px solid var(--color-stroke-weak); border-radius: var(--radius-lg); padding: var(--spacing-32); box-shadow: var(--shadow-raised); }
.card h3 { margin-top: var(--spacing-24); }
.card p { margin-top: var(--spacing-12); color: var(--color-text-weak); }
.icon-badge { width: var(--min-target-size); height: var(--min-target-size); border-radius: var(--radius-full); background: var(--color-fill-weak); color: var(--color-icon-neutral); display: grid; place-items: center; }
.icon-badge svg { width: 24px; height: 24px; }

/* Steps + mid-page action */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48); margin-top: var(--spacing-48); }
.step-num { display: block; font-size: var(--text-heading2); line-height: var(--text-heading2--line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.step h3 { margin-top: var(--spacing-16); }
.step p { margin-top: var(--spacing-8); color: var(--color-text-weak); max-width: 36ch; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16) var(--spacing-24); margin-top: var(--spacing-48); }

/* Doug */
.person { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--spacing-64); align-items: center; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-12); }
.tag { display: inline-flex; align-items: center; min-height: var(--spacing-32); padding: var(--spacing-4) var(--spacing-12); border-radius: var(--radius-full); border: 1px solid var(--color-stroke-weak); background: var(--color-fill-weak); font-size: var(--text-tiny); line-height: var(--text-tiny--line-height); }

/* FAQ: Accordion spec (small semibold label, chevron, hover fill, 600px) */
.faq { margin-top: var(--spacing-48); max-width: 600px; border-bottom: 1px solid var(--color-stroke-weak); }
.faq details { border-top: 1px solid var(--color-stroke-weak); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: var(--spacing-56); padding: var(--spacing-16); font-weight: var(--font-weight-semibold); }
.faq summary:hover { background: var(--color-fill-hover); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 24px; height: 24px; flex: none; color: var(--color-icon-neutral); transition: transform .15s ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .answer { padding: var(--spacing-8) var(--spacing-32) var(--spacing-24) var(--spacing-16); color: var(--color-text-weak); }
/* Heading on the left, questions on the right, like the problem section */
.split .faq { margin-top: 0; max-width: none; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-64); align-items: start; }
.next-steps { margin-top: var(--spacing-32); }
.next-steps li { display: grid; grid-template-columns: var(--spacing-32) 1fr; gap: var(--spacing-12); padding-block: var(--spacing-12); }
.next-steps .n { font-weight: var(--font-weight-semibold); }
.direct { margin-top: var(--spacing-40); display: grid; gap: var(--spacing-8); }
.direct li { display: flex; align-items: center; gap: var(--spacing-12); min-height: var(--min-target-size); }
.direct svg { width: 20px; height: 20px; color: var(--color-icon-neutral); flex: none; }

/* Form: one column, labels on top, hint then error above the control */
.form-card { background: var(--color-surface-raised); border: 1px solid var(--color-stroke-weak); border-radius: var(--radius-lg); padding: var(--spacing-40); box-shadow: var(--shadow-raised); }
.form { display: grid; gap: var(--spacing-32); }
.field { display: grid; gap: var(--spacing-8); }
/* Two fields side by side. Subgrid keeps both inputs level when only one shows an error;
   spacing comes from margins so the empty error row adds no gap. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: var(--spacing-16); }
.field-row .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.field-row .error { grid-row: 2; margin-top: var(--spacing-8); }
.field-row .input { grid-row: 3; margin-top: var(--spacing-8); }
@media (max-width: 479px) {
  .field-row { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--spacing-32); }
  .field-row .field { grid-row: auto; grid-template-rows: none; row-gap: var(--spacing-8); }
  .field-row .error, .field-row .input { grid-row: auto; margin-top: 0; }
}
.field > label, .field legend { font-weight: var(--font-weight-semibold); padding: 0; }
.hint { font-size: var(--text-tiny); line-height: var(--text-tiny--line-height); color: var(--color-text-weak); }
.error { display: none; align-items: flex-start; gap: var(--spacing-8); font-size: var(--text-tiny); line-height: var(--text-tiny--line-height); color: var(--color-text-error); font-weight: var(--font-weight-semibold); }
.error svg { width: 20px; height: 20px; flex: none; color: var(--color-icon-error); }
.is-invalid .error { display: flex; }
.input {
  width: 100%; min-height: var(--min-target-size); padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-stroke-strong); border-radius: var(--radius-md);
  background: var(--color-surface-base); color: var(--color-text-strong);
  font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--text-small--line-height);
}
.input:focus { outline: 2px solid var(--color-stroke-focus); outline-offset: 0; }
/* Error: red + icon + thicker border + background shade, never colour alone */
.is-invalid .input { border: 2px solid var(--color-stroke-error-strong); background: var(--color-fill-error-weak); }

.radio-list { display: grid; gap: var(--spacing-4); }
.radio { display: flex; align-items: center; gap: var(--spacing-12); min-height: var(--min-target-size); cursor: pointer; }
.radio input { appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; flex: none; border: 1px solid var(--color-stroke-strong); border-radius: var(--radius-full); background: var(--color-surface-base); display: grid; place-items: center; cursor: pointer; }
.radio input::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-fill-selected); transform: scale(0); }
.radio input:checked { border-color: var(--color-stroke-selected); }
.radio input:checked::before { transform: scale(1); }
.is-invalid .radio input { border: 2px solid var(--color-stroke-error-strong); }

.error-summary { padding: var(--spacing-16) var(--spacing-24); border: 2px solid var(--color-stroke-error-strong); background: var(--color-fill-error-weak); border-radius: var(--radius-md); }
.error-summary:focus { outline: 2px solid var(--color-stroke-focus); outline-offset: 2px; }
.error-summary .head { display: flex; gap: var(--spacing-8); align-items: center; color: var(--color-text-error); }
.error-summary .head svg { width: 20px; height: 20px; flex: none; color: var(--color-icon-error); }
.error-summary h3 { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-text-error); }
.error-summary ul { margin-top: var(--spacing-8); display: grid; gap: var(--spacing-4); padding-left: var(--spacing-32); }
.error-summary a { color: var(--color-text-error); }

.form-proof { color: var(--color-text-weak); }
.form-thanks h3 { margin-top: var(--spacing-16); }
.form-thanks h3:focus { outline: none; }
.form-thanks p { margin-top: var(--spacing-8); color: var(--color-text-weak); }
.form-thanks .icon-badge { color: var(--color-icon-success); background: var(--color-fill-success-weak); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-stroke-weak); padding-block: var(--spacing-64) var(--spacing-32); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--spacing-48); }
.footer-grid img { height: 36px; width: auto; }
.footer-grid h2 { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-text-weak); margin-bottom: var(--spacing-12); }
.footer-grid ul { display: grid; gap: var(--spacing-8); }
.footer-grid ul a { text-decoration: none; }
.footer-grid ul a:hover { text-decoration: underline; }
.footer-legal { margin-top: var(--spacing-48); padding-top: var(--spacing-24); border-top: 1px solid var(--color-stroke-weak); display: flex; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; color: var(--color-text-weak); font-size: var(--text-tiny); line-height: var(--text-tiny--line-height); }

/* Tablet */
@media (max-width: 1023px) {
  .container { padding-inline: var(--spacing-48); }
  .hero-grid, .split, .person, .contact-grid { grid-template-columns: 1fr; gap: var(--spacing-48); }
  .hero h1 { max-width: none; }
  .photo-slot { aspect-ratio: 16 / 10; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .step p { max-width: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Phone (grid spec: 32px margins) */
@media (max-width: 767px) {
  .container { padding-inline: var(--spacing-32); }
  .section { padding-block: var(--spacing-64); scroll-margin-top: var(--spacing-80); }
  .hero { padding-block: var(--spacing-48); }
  h1 { font-size: var(--text-heading2); line-height: var(--text-heading2--line-height); letter-spacing: 0; }
  h2 { font-size: var(--text-heading3); line-height: var(--text-heading3--line-height); letter-spacing: 0; }
  .site-nav, .header-phone { display: none; }
  .header-inner { min-height: var(--spacing-64); }
  .brand img { height: 32px; }
  .cta-row { flex-direction: column; }
  .cta-row .btn-lg, .inline-cta .btn-lg { width: 100%; }
  .photo-slot { aspect-ratio: 4 / 3; }
  .trust { margin-top: var(--spacing-48); }
  .split { gap: var(--spacing-24); }
  .grid-4 { grid-template-columns: 1fr; margin-top: var(--spacing-32); }
  .form-card { padding: var(--spacing-24); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Large screens: the headline takes the display size */
@media (min-width: 1024px) {
  h1 { font-size: var(--text-display); line-height: var(--text-display--line-height); letter-spacing: var(--text-display--letter-spacing); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faq summary svg { transition: none; } }

/* ---- Shared additions for the About us and Our team pages ---- */

/* Navigation header spec: the active link is underlined */
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Text block grid (Text block component: icon, heading4, small body).
   No card boxes: proximity groups them, per spacing-layout.md. */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48) var(--spacing-40); margin-top: var(--spacing-48); }
.text-block h3 { margin-top: var(--spacing-16); }
.text-block p { margin-top: var(--spacing-8); color: var(--color-text-weak); max-width: 40ch; }

/* Values: two columns of check-marked statements */
.values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-32) var(--spacing-48); margin-top: var(--spacing-48); }
.values li { display: grid; grid-template-columns: 24px 1fr; gap: var(--spacing-16); }
.values svg { width: 24px; height: 24px; color: var(--color-icon-neutral); margin-top: 2px; }
.values p { margin-top: var(--spacing-4); color: var(--color-text-weak); max-width: 48ch; }

/* Proof strip used on inner pages */
.proof-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-48); align-items: start; }

/* Portrait photo slot on the team page */
.photo-slot.portrait { aspect-ratio: 4 / 5; }

@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .proof-strip { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .photo-slot.portrait { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .grid-3, .values { grid-template-columns: 1fr; gap: var(--spacing-32); margin-top: var(--spacing-32); }
}

/* Navigation header, mobile variant: links collapse behind a menu button.
   Phone header = logo, one-tap call, menu. "Request a call" leads the menu. */
.btn-icon { width: var(--min-target-size); padding: 0; }
.btn-icon svg { width: 24px; height: 24px; }
.mobile-only { display: none; }
[data-menu-toggle] .icon-close { display: none; }
[data-menu-toggle][aria-expanded="true"] .icon-open { display: none; }
[data-menu-toggle][aria-expanded="true"] .icon-close { display: block; }
.mobile-menu { border-top: 1px solid var(--color-stroke-weak); padding-block: var(--spacing-8) var(--spacing-24); background: var(--color-surface-base); }
.mobile-menu li a { display: flex; align-items: center; min-height: var(--min-target-size); text-decoration: none; font-weight: var(--font-weight-semibold); }
.mobile-menu li a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mobile-menu .btn { margin-top: var(--spacing-16); }
@media (max-width: 767px) {
  .header-cta { display: none; }
  .mobile-only { display: inline-flex; }
  .header-actions { gap: var(--spacing-8); }
}
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* ---- Live site additions ---- */

/* Photos fill the same frames as the photo slots they replaced */
.photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 55% 40%; border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.photo.portrait { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) {
  .photo { aspect-ratio: 16 / 10; }
  .photo.portrait { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) { .photo, .photo.portrait { aspect-ratio: 4 / 3; } }

/* Spam trap: hidden from people and screen readers, bots fill it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sending state and the send-failure message (same alert style as the error summary) */
.btn:disabled { cursor: progress; }
.error-summary p { margin-top: var(--spacing-8); }