/* MARLER FABRICATION - shared styles for every page.
   Every page loads this file, so a change here updates the whole site. */

/* ===== COLORS =====
   Change a color here and it changes everywhere on the page. */
:root {
  /* Dark theme */
  --page: #0f0f0f;         /* main page background */
  --surface: #191919;      /* header, cards, and every other home section */
  --deep: #080808;         /* darkest black (top banner, footer) */
  --heading: #ffffff;      /* titles */
  --text: #cfcfcf;         /* body text */
  --muted: #9a9a9a;        /* small, quieter text */
  --line: #2f2f2f;         /* thin divider lines */
  --logo-red: #ec3436;     /* red from the "M" (buttons, accents) */
  --red-dark: #c4222a;     /* deeper red (button hover) */
  --red-text: #ff5a5e;     /* brighter red, easier to read as small text on dark */
  --white: #ffffff;
  color-scheme: dark;      /* dark scrollbars and form controls */
}

/* ===== BASIC SETUP ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: var(--page);
  /* Keeps the footer at the bottom of the screen on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--page);
}

h1, h2, h3 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  line-height: 1.1;
  color: var(--heading);
  margin: 0 0 0.5em;
}

img { max-width: 100%; }

/* Keeps content from stretching too wide on big screens */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== HEADER / NAVIGATION ===== */
header {
  background: var(--surface);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  /* Pins the header to the top so it stays in view while scrolling */
  position: sticky;
  top: 0;
  z-index: 10;
}

/* The header logo: the hex-nut badge (drawn in each page's HTML).
   Width and height keep the badge's shape. */
.logo { display: block; }

.logo img,
.logo .logo-badge {
  display: block;
  height: 100px;
  width: 115px;
}

header .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

nav a {
  color: var(--heading);
  text-decoration: none;
  margin-left: 20px;
  font-weight: 600;
}

nav a:hover { color: var(--red-text); }

/* Pushes the menu and social icons to the right side of the header */
nav { margin-left: auto; }

/* ===== SOCIAL MEDIA ICONS (in the header) ===== */
.social {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.social a {
  display: block;
  color: var(--heading);
}

.social a:hover { color: var(--red-text); }

.social svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Red call button at the end of the social icons */
.social .call-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 8px 14px;
  background: var(--logo-red);
  color: var(--white);
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.social .call-btn:hover { background: var(--red-dark); color: var(--white); }

.social .call-btn svg { width: 18px; height: 18px; }

/* Shows the full number on computers, just "Call" on phones */
.call-short { display: none; }

@media (max-width: 600px) {
  .call-full { display: none; }
  .call-short { display: inline; }
}

/* On phones: a compact pinned header. Logo, social icons and the call button
   share the top row, and the menu links sit in one row underneath.
   (This comes after the header rules above so it overrides them.) */
@media (max-width: 600px) {
  header { padding: 10px 0 12px; }
  header .container { gap: 8px 12px; }
  .logo img,
  .logo .logo-badge { height: 64px; width: 74px; }
  .social {
    order: 2;
    margin-left: auto;
    padding-left: 0;
    border-left: none;
  }
  nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 10px;
  }
  nav a { margin-left: 0; font-size: 15px; }
}

/* Underlines the menu link for the page you're on */
nav a[aria-current="page"] {
  color: var(--red-text);
  border-bottom: 3px solid var(--logo-red);
  padding-bottom: 4px;
}

/* ===== HERO (the big top section) ===== */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--deep);
  color: var(--white);
  padding: 90px 0;
  border-bottom: 4px solid var(--logo-red);
}

/* Keeps the banner text above the background photos */
.hero .container {
  position: relative;
  z-index: 2;
}

/* ===== HERO BACKGROUND SLIDESHOW =====
   Four photos stacked on top of each other. Each one fades in, slowly
   zooms, then fades out, one after another, every 6 seconds. */
.hero-bg span {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-fade 24s infinite;
}

.hero-bg span:nth-child(2) { animation-delay: 6s; }
.hero-bg span:nth-child(3) { animation-delay: 12s; }
.hero-bg span:nth-child(4) { animation-delay: 18s; }

@keyframes hero-fade {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; }
}

/* The welding video sits on top of the photo slideshow. While it loads,
   or if it can't play, the photos show through instead. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The "shadow": a dark layer over the video and photos, darkest on the left behind
   the text */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.78) 55%, rgba(8,8,8,0.6) 100%);
}

/* For visitors who've turned off motion on their device: show one still photo */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-bg span { animation: none; }
  .hero-bg span:first-child { opacity: 1; }
}

/* ===== PAGE BANNERS (Services, Our Work, Contact, About) =====
   A shorter version of the home banner: the page title over a darkened
   stock photo or video. */
.page-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--deep);
  padding: 76px 0 68px;
  border-bottom: 4px solid var(--logo-red);
}

.page-banner .container {
  position: relative;
  z-index: 2;
}

.page-banner h1 {
  color: var(--white);
  font-size: clamp(44px, 7vw, 64px);
  margin: 0;
  width: fit-content;   /* so the red bar below matches the title's width */
}

/* Red bar the full width of the title */
.page-banner h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 12px;
  background: var(--logo-red);
}

/* The photo is set on .banner-bg in the HTML. A video, if there is one,
   plays on top of it. */
.banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.banner-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The "shadow" over the banner photo or video */
.banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.7) 60%, rgba(8,8,8,0.55) 100%);
}

/* Less space above the page content, since the banner already gives room */
.page-banner + section { padding-top: 56px; }

@media (max-width: 600px) {
  .page-banner { padding: 52px 0 44px; }
}

/* For visitors who've turned off motion on their device: show the still photo */
@media (prefers-reduced-motion: reduce) {
  .banner-bg video { display: none; }
}

/* A section with a darkened photo behind it. The photo is set on the
   section itself in the HTML, with style="--bg-photo: url('...')" */
section.photo-bg {
  background-image:
    linear-gradient(rgba(15,15,15,0.88), rgba(15,15,15,0.88)),
    var(--bg-photo);
  background-size: cover;
  background-position: center;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(48px, 9vw, 104px);  /* shrinks on phones */
  margin-bottom: 16px;
}

.hero p {
  font-size: 22px;
  max-width: 40ch;
  margin: 0 0 32px;
}

.button {
  display: inline-block;
  background: var(--logo-red);
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  padding: 14px 28px;
  text-decoration: none;
  border-radius: 4px;
}

.button:hover { background: var(--red-dark); }

/* "Proudly made in the USA" line with the flag */
.usa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.usa svg {
  width: 57px;
  height: 30px;
  flex-shrink: 0;
}

/* ===== SECTIONS ===== */
section { padding: 80px 0; }

section h1 { font-size: 56px; }

section h2 { font-size: 44px; }

/* Titles only take up as much width as their words,
   so the red bar below matches the title's width */
section h1,
section h2 { width: fit-content; }

/* Red bar the full width of each page and section title */
section h1::after,
section h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 12px;
  background: var(--logo-red);
}

.intro {
  max-width: 60ch;
  margin-bottom: 40px;
}

/* Slightly lighter background for every other section on the home page */
.alt { background: var(--surface); }

/* Black button, used on the red call-to-action band */
.button-dark { background: var(--deep); }

.button-dark:hover { background: #2a2a2a; }

.section-link { margin-top: 36px; }

.section-link .button { margin: 0 8px 8px 0; }

/* ===== HOME: SERVICE CARDS ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--logo-red);
  padding: 24px;
  color: var(--text);
  text-decoration: none;
}

.card:hover { border-color: #555555; border-top-color: var(--logo-red); }

.card h3 { font-size: 26px; }

.card p { margin: 0 0 16px; }

.card .more { color: var(--red-text); font-weight: 600; }

/* ===== HOME: RECENT WORK PREVIEW ===== */
.work-preview {
  display: block;
  color: var(--heading);
  text-decoration: none;
}

.work-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.work-preview span {
  display: block;
  padding-top: 10px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.work-preview:hover span { color: var(--red-text); }

/* Home page Recent Work: up to five projects fit in one row on computers,
   two per row on phones */
.gallery-grid.recent-work {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.recent-work .work-preview span { font-size: 21px; }

@media (max-width: 600px) {
  .gallery-grid.recent-work { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .recent-work .work-preview span { font-size: 18px; }
}

/* ===== HOME: WHY CHOOSE US ===== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.why-item svg {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

.why-item h3 { font-size: 26px; }

.why-item p { margin: 0; }

/* ===== HOME: REVIEWS ===== */
.review-placeholder {
  border: 2px dashed #444444;
  background: var(--page);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}

/* ===== TESTIMONIALS PAGE ===== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.testimonial {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--logo-red);
  padding: 24px;
}

.testimonial .stars {
  color: #f5b301;   /* gold, like review stars */
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.testimonial blockquote {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--heading);
}

.testimonial figcaption {
  font-weight: 600;
  color: var(--heading);
}

.testimonial figcaption span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 15px;
}

/* "Worked with us?" box under the testimonials */
.review-cta {
  margin-top: 56px;
  padding: 32px;
  background: var(--surface);
  border-left: 5px solid var(--logo-red);
}

.review-cta h2 { font-size: 34px; }

.review-cta h2::after { display: none; }

.review-cta p { max-width: 60ch; margin: 0 0 20px; }

.review-cta .button { margin: 0 8px 8px 0; }

/* Hides the testimonial card area until it has cards in it */
.testimonial-grid:empty { display: none; }

/* No extra gap above the review box while there are no cards yet */
.testimonial-grid:empty + .review-cta { margin-top: 0; }

/* Three numbered "how to leave a review" steps, side by side (stacked on phones) */
.review-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
}

.review-steps li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The red number circle before each step */
.review-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--logo-red);
  color: var(--white);
  font-weight: 700;
}

.review-steps strong { color: var(--heading); }

.review-cta .review-note {
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--muted);
}

.review-note a { color: var(--red-text); font-weight: 600; }

/* ===== PAGE NOT FOUND (404.html) ===== */
.not-found { padding: 110px 0; }

.not-found-code {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(90px, 18vw, 160px);
  font-weight: 700;
  line-height: 1;
  color: var(--logo-red);
}

.not-found .button { margin: 0 8px 8px 0; }

/* ===== HOME: "Be one of our first reviews" box ===== */
.first-review {
  background: var(--page);
  border-left: 5px solid var(--logo-red);
  padding: 28px 32px;
}

.first-review h3 { font-size: 30px; }

.first-review p { max-width: 60ch; margin: 0 0 20px; }

.first-review .button { margin: 0 8px 8px 0; }

/* ===== HOME: CALL TO ACTION (red band) ===== */
.cta {
  background: var(--logo-red);
  color: var(--white);
  text-align: center;
  padding: 72px 0;
}

.cta h2 { color: var(--white); font-size: 48px; }

.cta h2::after { display: none; }

.cta p { font-size: 20px; margin: 0 0 8px; }

.cta-phone {
  display: inline-block;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  margin-bottom: 24px;
}

.cta .button { margin: 6px; }

/* A white keyboard outline, since red wouldn't show on the red band */
.cta a:focus-visible { outline-color: var(--white); }

/* ===== ABOUT ===== */
.about-text { max-width: 65ch; }

.about-text p { margin: 0 0 1em; }

/* ===== ABOUT: IN MEMORY OF RUGER =====
   A quiet, centered tribute at the end of the About page */
.memorial {
  border-top: 1px solid var(--line);
  text-align: center;
}

.memorial figure {
  margin: 0 auto;
  max-width: 340px;
}

.memorial img {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.memorial figcaption {
  margin-top: 20px;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
}

.memorial-name {
  display: block;
  margin-bottom: 6px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: normal;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--heading);
}

.memorial-dates {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ===== SERVICES ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-top: 2px solid #555555;
}

.service {
  padding: 28px 24px 28px 0;
  border-bottom: 1px solid var(--line);
}

.service h3 { font-size: 28px; }

.service p { margin: 0; }

/* ===== GALLERY ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* ===== OUR WORK: PROJECTS ===== */
.project { margin-top: 64px; }

.project h2 { font-size: 36px; }

.project-text {
  max-width: 65ch;
  margin: 0 0 24px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.photo-grid a { display: block; }

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.photo-grid a:hover img { opacity: 0.85; }

/* For wide (landscape) photos: add class="wide" to the photo's link
   so it takes up two spaces and isn't cropped to a tall shape */
.photo-grid a.wide { grid-column: span 2; }

.photo-grid a.wide img { aspect-ratio: 4 / 3; }

/* For very wide, short photos: add "natural" too (class="wide natural")
   so the whole photo shows at its own shape with nothing cropped */
.photo-grid a.natural { align-self: center; }

.photo-grid a.natural img { aspect-ratio: auto; height: auto; }

/* Two photos side by side on phones, so the page isn't one long scroll */
@media (max-width: 600px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ===== OUR WORK: "MORE FROM THE SHOP" GALLERY ===== */
/* Category buttons */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.gallery-filters button {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #444444;
  background: transparent;
  color: var(--heading);
  cursor: pointer;
}

.gallery-filters button:hover { border-color: var(--logo-red); }

.gallery-filters button.is-active {
  background: var(--logo-red);
  border-color: var(--logo-red);
  color: var(--white);
}

/* Square thumbnails in a tight grid: 5 across on computers, 3 on phones */
.shop-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

@media (max-width: 600px) {
  .shop-gallery { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

.shop-gallery a { display: block; overflow: hidden; }

.shop-gallery a[hidden] { display: none; }

.shop-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.25s, opacity 0.25s;
}

.shop-gallery a:hover img { transform: scale(1.04); opacity: 0.9; }

.gallery-more { margin-top: 28px; text-align: center; }

.gallery-more[hidden] { display: none; }

.gallery-more .button { border: none; cursor: pointer; font-family: inherit; }

/* Large photo viewer */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 56px 64px;
}

.lightbox[hidden] { display: none; }

.lightbox {
  /* The viewer handles its own pinch and swipe, so the page behind doesn't zoom */
  touch-action: none;
  overflow: hidden;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

/* While zoomed: the photo can be dragged, and the arrows and counter step aside */
.lightbox.zoomed img { cursor: grab; position: relative; z-index: 2; }

.lightbox.zoomed .lightbox-prev,
.lightbox.zoomed .lightbox-next,
.lightbox.zoomed .lightbox-count { display: none; }

.lightbox.zoomed .lightbox-close { z-index: 3; }

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  line-height: 1;
  opacity: 0.85;
}

.lightbox button:hover { opacity: 1; color: var(--red-text); }

/* Outline only for keyboard users, not after a mouse click */
.lightbox button:focus { outline: none; }

.lightbox button:focus-visible { outline: 2px solid var(--logo-red); outline-offset: 2px; }

.lightbox-close { top: 12px; right: 18px; font-size: 44px; }

.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); font-size: 64px; padding: 10px; }

.lightbox-prev { left: 8px; }

/* No arrows or counter when a project has only one photo */
.lightbox.single .lightbox-prev,
.lightbox.single .lightbox-next,
.lightbox.single .lightbox-count { display: none; }

.lightbox-next { right: 8px; }

.lightbox-count {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* Stops the page behind the viewer from scrolling */
body.lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox { padding: 56px 8px; }
  .lightbox-prev,
  .lightbox-next { font-size: 48px; top: auto; bottom: 0; transform: none; }
}

/* ===== CONTACT ===== */
.contact-info p { margin: 0 0 8px; }

.contact-info a { color: var(--red-text); font-weight: 600; }

/* Form on the left, contact details on the right (stacks on phones) */
.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 800px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* After-hours emergency note, set off with a red bar on the left */
.contact-info .emergency {
  margin: 16px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--logo-red);
  background: var(--surface);
  color: var(--heading);
}

/* "Reach us directly" heading: smaller, and no red bar under it */
.contact-info h2 { font-size: 30px; }

.contact-info h2::after { display: none; }

/* ===== CONTACT FORM ===== */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--logo-red);
  padding: 28px;
}

.form-row { margin-bottom: 18px; }

/* Puts Phone and Email side by side (stacks on phones) */
.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 600px) {
  .form-pair { grid-template-columns: 1fr; }
  .contact-form { padding: 20px; }
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--heading);
}

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

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;   /* 16px or more stops iPhones from zooming in when you tap a box */
  color: var(--heading);
  background: var(--page);
  border: 1px solid #444444;
  border-radius: 4px;
}

.contact-form textarea { resize: vertical; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--logo-red);
  box-shadow: 0 0 0 3px rgba(236, 52, 54, 0.3);
}

.contact-form ::placeholder { color: #777777; }

.contact-form .button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Small privacy note under the Send button */
.form-privacy {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* Hides the spam trap field from real visitors */
.honey { display: none; }

/* ===== FOOTER ===== */
footer {
  background: var(--deep);
  color: var(--muted);
  padding: 24px 0;
  font-size: 15px;
  border-top: 4px solid var(--logo-red);
}

footer a { color: var(--heading); font-weight: 600; }

footer a:hover { color: var(--red-text); }

/* Quick links on the left, social icons on the right (stacks on phones) */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
}

.footer-nav a { font-size: 16px; text-decoration: none; margin-left: 0; }

.footer-social { display: flex; gap: 16px; }

.footer-social svg { display: block; width: 22px; height: 22px; }

/* Keeps the phone header's menu layout from applying to the footer links */
@media (max-width: 600px) {
  .footer-nav {
    order: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 10px 22px;
  }
  .footer-nav a { font-size: 16px; }
}

/* Shows a clear outline when someone uses the keyboard to move around */
a:focus-visible {
  outline: 3px solid var(--logo-red);
  outline-offset: 3px;
}