/* ==========================================================================
   Reynolds Precision, site stylesheet
   Sections: 1 tokens, 2 reset, 3 base and typography, 4 layout,
             5 components, 6 page sections, 7 utilities
   Mobile-first. Breakpoints: 640px and 900px.
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
:root {
  --blue: #245B9A;
  --blue-dark: #183D67;
  --blue-ink: #0C1E33;
  --blue-light: #A9C7EB;
  --red: #E4342D;          /* large accents and graphics only */
  --red-text: #C21F1A;     /* small red text, passes WCAG AA on white */
  --ink: #171717;
  --grey-600: #515151;
  --grey-500: #767676; /* lightest grey that passes WCAG non-text contrast on white */
  --grey-400: #8B8B8B;
  --grey-200: #C5C5C5;
  --line: #E5E7EB;
  --surface: #F5F7FA;
  --white: #FFFFFF;

  --font-display: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-card: 12px;
  --radius-ui: 8px;
  --shadow-card: 0 1px 3px rgb(12 30 51 / 0.08);
  --shadow-lift: 0 8px 24px rgb(12 30 51 / 0.12);
  --container: 71.25rem; /* 1140px */
}

/* 2. Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4,
p, ul, ol, figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[class] {
  padding: 0;
  list-style: none;
}

/* 3. Base and typography
   ========================================================================== */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/work-sans-latin-200.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/figtree-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/figtree-latin-600.woff2") format("woff2");
}

html {
  scroll-behavior: smooth;
  /* Keeps anchor and focus scrolling clear of the sticky header,
     which wraps taller on narrow screens */
  scroll-padding-top: 8rem;
}

@media (min-width: 640px) {
  html {
    scroll-padding-top: 6rem;
  }
}

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

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.5vw, 4rem);
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
}

p {
  max-width: 65ch;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--blue-dark);
}

/* Two-ring focus indicator: dark inner ring plus white outer ring, so
   at least one ring is clearly visible on any background (white pages,
   the blue CTA band, the dark footer, and the scrimmed hero photo) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blue-ink);
}

::selection {
  background: var(--blue-light);
  color: var(--blue-ink);
}

/* 4. Layout
   ========================================================================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: clamp(3.5rem, 10vw, 6.5rem);
}

.section-alt {
  background: var(--surface);
}

.section-head {
  margin-bottom: var(--space-6);
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-text);
}

/* 5. Components
   ========================================================================== */

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--blue-ink);
  color: var(--white);
  border-radius: var(--radius-ui);
}

.skip-link:focus {
  left: var(--space-2);
  color: var(--white);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-3);
}

.logo-link {
  display: inline-flex;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}

.site-nav a {
  display: inline-block;
  padding: var(--space-1) 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--blue);
}

/* Active page underline, driven by the body class so the header
   markup stays identical on every page */
.page-home .site-nav a[href="/"],
.page-puma .site-nav a[href="/puma-machinery/"],
.page-contact .site-nav a[href="/contact/"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

@media (min-width: 640px) {
  .header-inner {
    justify-content: space-between;
    min-height: 72px;
  }
}

/* Buttons */
.button {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-ui);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button-primary {
  background: var(--blue);
  color: var(--white);
}

.button-primary:hover {
  background: var(--blue-dark);
  color: var(--white);
}

.button-inverse {
  background: var(--white);
  color: var(--blue-ink);
}

.button-inverse:hover {
  background: var(--blue-light);
  color: var(--blue-ink);
}

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-body {
  padding: var(--space-4);
}

.card-body h3 {
  margin-bottom: var(--space-1);
}

.card-body p {
  font-size: 0.9375rem;
  color: var(--grey-600);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .button {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

/* Contact form */
.contact-form {
  max-width: 640px;
}

.botcheck {
  display: none;
}

.form-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: none;
}

.form-field label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.req {
  color: var(--red-text);
}

.form-field input,
.form-field textarea {
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--grey-500);
  border-radius: var(--radius-ui);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--blue);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
  color: var(--grey-600);
}

.form-status {
  margin-top: var(--space-3);
  font-weight: 600;
}

.form-status.is-error {
  color: var(--red-text);
}

/* After a successful send, form.js adds .is-sent to the form:
   the fields hide and the status line shows the confirmation */
.contact-form.is-sent .form-grid,
.contact-form.is-sent .form-note,
.contact-form.is-sent button[type="submit"] {
  display: none;
}

.contact-form.is-sent .form-status {
  margin-top: 0;
  font-size: 1.25rem;
  color: var(--blue);
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-field-wide {
    grid-column: 1 / -1;
  }
}

/* Footer */
.site-footer {
  background: var(--blue-ink);
  color: var(--white);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
  font-size: 0.9375rem;
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer-nav a {
  color: var(--blue-light);
  text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

/* 6. Page sections
   ========================================================================== */

/* Hero (home) */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 65vh, 640px);
  color: var(--white);
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(12 30 51 / 0.65), rgb(12 30 51 / 0.35));
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-8);
}

.hero h1 {
  max-width: 18ch;
  margin-bottom: var(--space-5);
}

/* About (home) */
.about-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.about-copy p + p {
  margin-top: var(--space-4);
}

.about-copy .about-cta {
  margin-top: var(--space-5);
}

.about-photo img {
  width: 100%;
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Services (home) */
.card-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Page intro (PUMA, contact) */
.page-intro {
  padding-block: clamp(3rem, 8vw, 5rem);
  background: var(--blue-ink);
  color: var(--white);
}

.page-intro .lead {
  margin-top: var(--space-4);
  font-size: 1.125rem;
  color: var(--blue-light);
}

.caps {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Product strips (PUMA) */
.product {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.product + .product {
  border-top: 1px solid var(--line);
}

.product h2 {
  margin-bottom: var(--space-4);
}

.product-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Alternate the photo side on every second strip */
  .product:nth-of-type(even) .product-photo {
    order: -1;
  }
}

/* CTA band (PUMA) */
.cta-band {
  background: var(--blue);
  color: var(--white);
  text-align: center;
}

.cta-band h2 {
  margin-bottom: var(--space-5);
}

.cta-band p {
  margin-inline: auto;
}

/* Simple centred page (thanks, 404) */
.page-simple {
  padding-block: clamp(4rem, 12vw, 8rem);
  text-align: center;
}

.page-simple h1 {
  margin-bottom: var(--space-4);
}

.page-simple p {
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* 7. Utilities
   ========================================================================== */
.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;
}