/* ===== FONTS ===== */
@font-face {
  font-family: 'Square721BT';
  src: url('../Fonts/tt0246m_.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #060d07;
  --bg-card:      #131f14;
  --bg-card-alt:  #192b1a;
  --accent:       #5dbf35;
  --accent-dark:  #3d8a1f;
  --text:         #ffffff;
  --text-muted:   #8aab8a;
  --nav-h:        70px;
  --radius:       8px;
  --radius-lg:    14px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===== TYPOGRAPHY ===== */
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; }

.accent { color: var(--accent); }

/* Visually hidden, still read by screen readers. Used to give content sections
   a heading of their own when the visible h1 lives in the hero above them. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== LAYOUT ===== */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 90px 0; }

/* ===== NAV ===== */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--nav-h);
  background: transparent;
}

/* Scroll-fade: content fades into the page bg as it passes under the nav */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + 28px);
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 42%, transparent 100%);
  z-index: 9998;
  pointer-events: none;
}

.nav-inner {
  position: relative;
  height: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Square721BT', 'Inter', sans-serif;
  font-size: 30px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #ffffff;
}


.nav-logo img { height: 44px; width: 44px; max-height: 44px; max-width: 44px; object-fit: contain; display: block; flex-shrink: 0; }

.logo-tech { color: #ffffff; }
.logo-garrison { color: var(--accent); }

.nav-links {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--text); }

/* Hamburger */
.nav-toggle {
  display: none;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover { background: #6ed440; }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--text);
}
.btn-outline:hover { background: var(--accent); color: var(--bg); }

/* ===== HERO ===== */
/* Deliberately not min-height: 100vh — on tall screens that stretched the hero
   past its content and left a growing void above the testimonials card. Height
   now follows the content, so the gap below the chips is consistent. */
.hero {
  padding-top: calc(var(--nav-h) + 160px);
  padding-bottom: 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(93,191,53,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 600;
}

.hero h1 { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 28px; }

.hero-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  line-height: 2;
  /* Wide enough for the longest line to sit unbroken at this letter-spacing.
     Narrow screens still wrap normally, which is what we want there. */
  max-width: 620px;
  margin: 0 auto 36px;
}

.hero-cta { margin-bottom: 60px; }

/* Scaled up from the shared .btn. This is the one thing the page is actually
   asking a visitor to do, so it should not sit at the same weight as the
   secondary buttons further down the page. Scoped to the hero so the CTA strips
   and the contact form button keep the base size. */
.hero-cta .btn {
  padding: 17px 40px;
  font-size: 1.05rem;
}

.hero-tagline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
}

/* Trusted bar */
.trusted-bar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.trusted-label {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.trusted-label::before,
.trusted-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-dark), transparent);
}

.industry-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.industry-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid rgba(93,191,53,0.15);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s;
}

.industry-chip:hover { border-color: var(--accent); color: var(--text); }
.industry-chip svg { width: 20px; height: 20px; opacity: 0.7; }

/* The chips are buttons rather than divs so they are keyboard operable and
   announce their expanded state. These resets keep them rendering exactly as
   the div version did. */
button.industry-chip {
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.industry-chip[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }

.industry-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* One detail panel below the grid, so expanding never reflows the chips.
   All nine panels ship in the HTML and are toggled with the hidden attribute:
   crawlers do not click, so anything built on demand would be invisible. */
.industry-panels { margin-top: 20px; }

.industry-panel {
  background: var(--bg-card);
  border: 1px solid rgba(93,191,53,0.15);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  text-align: left;
  animation: industryPanelIn 0.25s ease;
}

.industry-panel p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.8;
}

@keyframes industryPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .industry-panel { animation: none; }
}

/* ===== HOW WE WORK ===== */
.how-section { background: var(--bg-card); }

.how-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.how-label {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}

.how-right p {
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.8;
}

/* ===== SERVICES GRID ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.service-card { text-align: left; }

.service-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(93,191,53,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-icon svg { width: 30px; height: 30px; color: var(--accent); }

.service-card h3 { margin-bottom: 10px; font-size: 1.05rem; }

.service-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ===== SECTION HEADERS ===== */
.section-header { text-align: center; margin-bottom: 16px; }
.section-label {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}

/* ===== TESTIMONIALS PAGE ===== */
/* Stacked one per row, so nothing stretches to match a taller neighbour and the
   uneven quote lengths stop creating dead space. The track is capped and centred
   rather than filling the container — at full width the lines run past a
   comfortable measure. Handles every width on its own, hence no
   testimonials-grid overrides in the media queries below. */
.testimonials-grid {
  display: grid;
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

/* Wider and shorter than the shared card: the extra width lets each quote wrap
   in fewer lines, and trimming the vertical rhythm takes the rest of the height
   out. Scoped to the grid so the home carousel card is left alone. */
.testimonials-grid .testimonial-card { padding: 26px 32px; }
.testimonials-grid .testimonial-card .stars { margin-bottom: 10px; }

.testimonials-grid .testimonial-card blockquote {
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ===== GLASS CARDS =====
   Shared frosted treatment matching the home testimonials carousel card. The
   green radial is baked into the background here because these cards sit on a
   flat page — unlike the carousel card there is no glow behind them for
   backdrop-filter to pick up. */
.testimonial-card,
.value-card,
.team-card-face,
.blog-card,
.service-page-card {
  position: relative;
  border-radius: clamp(14px, 1.4vw, 20px);
  background:
    radial-gradient(circle at 20% 10%, rgba(93,191,53,0.10) 0, transparent 55%),
    linear-gradient(155deg, rgba(38,62,40,0.55), rgba(19,31,20,0.42));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 16px 36px rgba(0,0,0,0.40),
    0 0 44px rgba(93,191,53,0.08);
}

/* Rim light — 1px gradient border, brightest at the top-left */
.testimonial-card::after,
.value-card::after,
.team-card-face::after,
.blog-card::after,
.service-page-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04) 45%, rgba(93,191,53,0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Glass icon tile, shared by the Services and Our Values cards. Dark tinted
   glass rather than a green block: a tile darker than the card it sits on, so
   it reads as recessed glass. The glyph keeps the accent colour. */
.service-page-card .icon,
.value-card .value-icon {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(12,20,13,0.72), rgba(6,11,7,0.52));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

/* Rim light on the tile itself, dimmer than the card's so it stays subordinate */
.service-page-card .icon::after,
.value-card .value-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 50%, rgba(93,191,53,0.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.service-page-card .icon svg,
.value-card .value-icon svg { width: 24px; height: 24px; color: var(--accent); }

.testimonial-card { padding: 32px; }

.testimonial-card .stars {
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.testimonial-card blockquote {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author strong { display: block; font-size: 0.9rem; }
.testimonial-author span { font-size: 0.8rem; color: var(--text-muted); }

/* ===== HOME TESTIMONIALS CAROUSEL ===== */
/* A frosted glass card floating on an ambient accent glow. The glow is what
   the card's backdrop-filter diffuses — there is nothing to blur otherwise. */
.home-testimonials {
  position: relative;
  padding: clamp(28px, 3vw, 44px) 0;
}

.home-testimonials .container { position: relative; isolation: isolate; }

/* Glow sits directly behind the card, not across the section, so the frost has
   something to diffuse while the surrounding page stays dark */
.home-testimonials .container::before {
  content: '';
  position: absolute;
  inset: 0 24px;
  z-index: -1;
  pointer-events: none;
  border-radius: clamp(18px, 2vw, 28px);
  background:
    radial-gradient(circle at 22% 15%, rgba(93,191,53,0.32) 0, transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(93,191,53,0.22) 0, transparent 50%);
}

.testimonials-glass {
  position: relative;
  --card-pad-x: clamp(18px, 2.2vw, 36px);
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(24px, 2.8vw, 40px) var(--card-pad-x);
  background: linear-gradient(155deg, rgba(38,62,40,0.55), rgba(19,31,20,0.42));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.45),
    0 0 60px rgba(93,191,53,0.13);
}

/* Rim light — a 1px gradient border, brightest at the top-left */
.testimonials-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,0.24), rgba(255,255,255,0.05) 45%, rgba(93,191,53,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.home-testimonials .section-header { margin-bottom: clamp(20px, 2.2vw, 32px); }

/* Fluid width — fills the container and scales with the page. Deliberately
   not positioned: the arrows resolve against .testimonials-glass so they
   centre on the whole card rather than on the carousel below the header. */
.carousel {
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(40px, 5vw, 72px);
}

.carousel-viewport { overflow: hidden; }

.carousel-track { display: flex; transition: transform 0.5s ease; }

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
}

/* The frosted panel is the surface, so the card itself stays transparent */
/* Inside the carousel the surrounding glass card is the surface, so the
   testimonial itself opts out of the shared glass treatment */
.home-testimonials .testimonial-card {
  height: 100%;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.home-testimonials .testimonial-card::after { content: none; }

.home-testimonials .testimonial-card .stars { margin-bottom: 10px; }

.home-testimonials .testimonial-card blockquote {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  max-width: 76ch;
  margin: 0 auto clamp(16px, 1.8vw, 24px);
}

/* Bare glyphs — the box is kept only as a comfortable click target */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(34px, 3.4vw, 44px);
  aspect-ratio: 1;
  border: none;
  background: none;
  color: var(--accent);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s, color 0.2s;
}
.carousel-btn:hover { color: #6ed440; }

/* Revealed on card hover, and on keyboard focus so they stay reachable */
.testimonials-glass:hover .carousel-btn,
.carousel-btn:focus-visible { opacity: 1; }

/* The browser's default focus ring draws a box that clashes with the bare
   chevrons — replace it with a glow that still reads as focused */
.carousel-btn:focus { outline: none; }
.carousel-btn:focus-visible {
  color: #6ed440;
  text-shadow: 0 0 12px rgba(93,191,53,0.95);
}

/* Touch devices never hover, so keep them visible there */
@media (hover: none) {
  .carousel-btn { opacity: 1; }
}
.carousel-prev { left: var(--card-pad-x); }
.carousel-next { right: var(--card-pad-x); }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.carousel-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(93,191,53,0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active { background: var(--accent); transform: scale(1.2); }

/* ===== ABOUT PAGE ===== */
.about-hero { text-align: center; }
.about-hero p { color: var(--text-muted); max-width: 640px; margin: 20px auto 0; line-height: 1.8; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

/* Icon and heading share the top row; the description spans beneath both */
.value-card {
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
}

.value-card p { grid-column: 1 / -1; }

/* .value-icon is styled with the shared glass icon tile rule above */
.value-card h3 { margin-bottom: 0; }
.value-card p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; }

/* Flex rather than grid so the row stays balanced whatever the head count. A
   hard column count strands empty space the moment someone joins or leaves,
   and grid's justify-content centres the track set but leaves a short final
   row hanging left — flex centres every row, orphans included. Wrapping is
   handled here, so there are no team-grid overrides in the media queries. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 60px;
}

/* Flip card. The glass and rim light live on the faces rather than on .team-card
   so they rotate with it instead of hanging static in front. Faces are absolutely
   positioned and so contribute no height — hence the explicit height here, which
   also keeps every card in the row the same size whatever the title length. */
.team-card {
  flex: 0 1 255px;
  height: 230px;
  border-radius: clamp(14px, 1.4vw, 20px);
  perspective: 1000px;
}

.team-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Only cards with a photo flip. :focus-within covers keyboard users, since
   hover alone would hide the photo from anyone not using a mouse. */
.team-card--flip:hover .team-card-inner,
.team-card--flip:focus-within .team-card-inner {
  transform: rotateY(180deg);
}

/* The shared glass rule sets backdrop-filter, but that forces its own rendering
   context, which makes backface-visibility ineffective — the back face paints
   over the front at rest instead of being culled. These cards bake the green
   radial into their background rather than sampling what is behind them, so
   turning the blur off here costs nothing visually. */
.team-card-face {
  position: absolute;
  inset: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.team-card-front { padding: 28px 20px; }

.team-card-back {
  transform: rotateY(180deg);
  overflow: hidden;
}

/* The shared rim light reads as a green outline drawn around the headshot
   rather than a highlight on a glass edge, so the photo face goes without it. */
.team-card-back::after { content: none; }

.team-card-back img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

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

/* People stay circular while the icon tiles are rounded squares — the shape
   difference is the cue. */
.team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(93,191,53,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

.team-card h3 { font-size: 1rem; margin-bottom: 4px; }
.team-card span { font-size: 0.8rem; color: var(--text-muted); }

/* ===== SERVICES PAGE ===== */
.page-hero.page-hero--tight { padding-bottom: 30px; }
.services-section { padding-top: 45px; }
.testimonials-section { padding-top: 45px; }

.services-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 80px;
  margin-top: 30px;
}

/* Same treatment as the Our Values cards: glass panel, icon and heading on the
   top row, description and feature list spanning beneath */
.service-page-card {
  text-align: left;
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
}

.service-page-card p,
.service-page-card .service-features { grid-column: 1 / -1; }

/* .icon is styled with the shared glass icon tile rule further up */
.service-page-card h3 { margin-bottom: 0; }
.service-page-card p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; margin-bottom: 0; }

.service-features { list-style: none; }
.service-features li {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-features li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ===== BLOG ===== */
.blog-section { padding-top: 45px; }

/* Same stacked, centred, capped-width treatment as the testimonials list */
.blog-list {
  display: grid;
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.blog-card { padding: 28px 32px; }

.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.blog-dot { color: var(--accent); }

.blog-card h2,
.blog-card h3 { font-size: 1.35rem; line-height: 1.3; margin-bottom: 12px; }
.blog-card h2 a,
.blog-card h3 a { color: var(--text); }
.blog-card h2 a:hover,
.blog-card h3 a:hover { color: var(--accent); }

.blog-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.blog-more {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}
.blog-more:hover { color: #6ed440; }

/* ===== BLOG POST ===== */
/* Body copy is capped in ch rather than px so the measure holds if the font
   size changes — long-form reading is the one place line length really matters. */
.post { padding-top: calc(var(--nav-h) + 60px); padding-bottom: 80px; }

.breadcrumb {
  max-width: 68ch;
  margin: 0 auto 28px;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { color: #6ed440; }

.post-header {
  max-width: 68ch;
  margin: 0 auto 36px;
}

.post-header h1 { margin-bottom: 20px; line-height: 1.15; }

.post-standfirst {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.post-body {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-muted);
}

.post-body h2 {
  font-size: 1.3rem;
  color: var(--text);
  margin: 40px 0 14px;
}

.post-body p { margin-bottom: 20px; }
.post-body strong { color: var(--text); }

.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-body a:hover { color: #6ed440; }

.post-body ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.post-body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.post-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.post-footer {
  max-width: 68ch;
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(93,191,53,0.15);
}

/* ===== CTA STRIP ===== */
.cta-strip {
  background: linear-gradient(135deg, var(--bg-card-alt), var(--bg-card));
  border-top: 1px solid rgba(93,191,53,0.15);
  border-bottom: 1px solid rgba(93,191,53,0.15);
  text-align: center;
  padding: 80px 0;
}

.cta-strip h2 { margin-bottom: 16px; }
.cta-strip p { color: var(--text-muted); max-width: 500px; margin: 0 auto 36px; }

/* ===== CONTACT / FOOTER ===== */
.contact-section { background: var(--bg-card); }

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-info h2 { margin-bottom: 16px; }
.contact-info p { color: var(--text-muted); line-height: 1.8; margin-bottom: 32px; }

.contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.contact-detail svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.contact-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; }

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--bg);
  border: 1px solid rgba(93,191,53,0.2);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--accent); }

.form-hint { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.02em; }

.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { appearance: none; cursor: pointer; }
.form-group select option { background: var(--bg); }

footer {
  background: var(--bg);
  border-top: 1px solid rgba(93,191,53,0.08);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy { color: var(--text-muted); font-size: 0.8rem; }

/* Service area and phone sit above the footer row so the NAP details appear
   on every page, not just the contact page. */
.footer-nap { margin: 0 0 16px; }
.footer-nap a { color: var(--text-muted); transition: color 0.2s; }
.footer-nap a:hover { color: var(--text); }

.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--text-muted); font-size: 0.8rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }

/* ===== CHOICE TILES (add.html, staff.html) ===== */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

/* Three-up variant needs more room before the tiles get cramped. */
.choice-grid--three { max-width: 1020px; }

.choice-card {
  display: block;
  text-align: center;
  padding: 40px 32px;
  background: var(--bg-card);
  border: 1px solid rgba(93,191,53,0.15);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s, transform 0.2s;
}

.choice-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.choice-card h2 {
  font-size: 1.5rem;
  margin: 0 0 8px;
}

.choice-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0 0 24px;
}

.choice-icon svg {
  width: 48px;
  height: 48px;
  color: var(--accent);
  margin: 0 auto 20px;
}

.choice-cta {
  display: inline-block;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.choice-card:hover .choice-cta { color: #6ed440; }

.choice-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero {
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 60px;
  text-align: center;
}

.page-hero h1 { margin-bottom: 16px; }
.page-hero p { color: var(--text-muted); max-width: 560px; margin: 0 auto; line-height: 1.8; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .how-inner { grid-template-columns: 1fr; gap: 40px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .services-page-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* The logo and the nav links are both absolutely positioned, so nothing stops
   them colliding, so this threshold has to stay ahead of their combined width.
   With four links that was ~717px (333 logo + 336 links + 48 padding) and 780
   was comfortable. Adding Blog pushes the links to roughly 407px, so the floor
   is now about 788px — past where 780 would have collapsed, which would have
   let them overlap in a narrow band. 860px restores the headroom.

   Estimated rather than measured: re-measure and tighten if the gap looks
   excessive. Erring high is the safe direction — collapsing a little early
   costs nothing, collapsing late overlaps the logo. */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    /* The desktop rule centres the links with top: 50% and a -50% translate.
       Switching to a top-anchored panel has to clear that translate too, or it
       still pulls the panel up by half its own height and the first link ends
       up above the viewport. */
    transform: none;
    left: 0; right: 0;
    background: var(--bg-card);
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid rgba(93,191,53,0.1);
  }
}

/* At 30px the wordmark is 333px wide and runs into the menu button on phones.
   Scaled fluidly rather than by a fixed step, so it clears the button at every
   width down to 320px. */
@media (max-width: 480px) {
  .nav-logo { font-size: clamp(17px, 5.5vw, 22px); gap: 8px; }
  .nav-logo img { height: 36px; width: 36px; max-height: 36px; max-width: 36px; }
}

@media (max-width: 640px) {
  section { padding: 60px 0; }
  .carousel { padding: 0 34px; }
  .home-testimonials .testimonial-card blockquote { text-align: left; }
  .services-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== STAFF REQUEST FLOW (staff.html) =====
   One question at a time, so the card is narrow on purpose: a single question
   reading edge-to-edge on a wide monitor is harder to scan than one that stays
   in a column. Inputs borrow the .form-group treatment from the contact form so
   the two forms on the site do not look like they came from different places. */

/* Wide enough for the three request tiles to sit in one row, as they did when
   they were links to the old forms. Individual question cards opt back down to a
   readable column via .staff-narrow. */
.staff-app { max-width: 1020px; margin: 0 auto; }

.staff-narrow { max-width: 640px; margin: 0 auto; }

/* The hidden attribute is how every step and the conditional "Other" box are
   toggled, but it only carries display:none from the UA stylesheet — any author
   display rule outranks it, and .staff-input below sets display:block. Without
   this the free-text box sits open under an unselected "Other". */
.staff-app [hidden] { display: none !important; }

.staff-app .choice-grid { max-width: none; }

.staff-card {
  background: var(--bg-card);
  border: 1px solid rgba(93,191,53,0.15);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
}

/* The tiles are buttons here rather than links, because picking a request kind
   fetches a schema instead of navigating. Buttons need the inherited typography
   and full width that anchors got for free. */
.staff-app .choice-card {
  width: 100%;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.staff-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.staff-field { display: block; }

.staff-input {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(93,191,53,0.2);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s;
  outline: none;
}

.staff-input:focus { border-color: var(--accent); }
.staff-input[readonly] { color: var(--text-muted); cursor: not-allowed; }
.staff-textarea { resize: vertical; min-height: 110px; }

/* Verification codes are read digit by digit off a phone, so they get the
   tracking and size that makes six characters easy to check mid-typing. */
.staff-input--code {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-weight: 700;
}

.staff-help {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 8px 0 0;
}

.staff-fieldset { border: 0; padding: 0; margin: 0; }
.staff-fieldset legend { padding: 0; }

.staff-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 10px;
  background: var(--bg);
  border: 1px solid rgba(93,191,53,0.2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 0.2s;
}

.staff-option:hover { border-color: var(--accent); }
.staff-option input { accent-color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.staff-option:has(input:checked) { border-color: var(--accent); }
.staff-option:focus-within { border-color: var(--accent); }

.staff-other { margin-top: 10px; }

.staff-req {
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: none;
}

.staff-submit { margin-top: 24px; width: 100%; }

.staff-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Back and Sign out are secondary by role, so they read as text rather than
   competing with the primary button for attention. */
.staff-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.staff-link:hover { color: var(--text); }
.staff-actions .staff-submit { margin-top: 0; flex: 1; min-width: 160px; }
.staff-actions .staff-link { order: -1; }

.staff-error {
  margin: 14px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff8f7a;
}

.staff-sent { margin: 0 0 20px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

.staff-progress {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.staff-question-section {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(93,191,53,0.12);
}

.staff-identity { margin-bottom: 24px; }

.staff-whoami {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.staff-whoami strong { color: var(--text); font-weight: 600; }

/* An unauthorized requester is told before they start, not after they submit —
   finding out at the end that the request needs someone else's sign-off is worse
   than knowing going in. Amber rather than red: it is a caveat, not an error. */
.staff-flag {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(240,180,40,0.35);
  border-left: 3px solid #f0b428;
  border-radius: var(--radius);
  background: rgba(240,180,40,0.06);
  font-size: 0.8rem;
  line-height: 1.6;
  color: #e8d9ae;
}

.staff-review-title { font-size: 1.4rem; margin: 0 0 6px; }
.staff-review { margin: 24px 0 0; }

.staff-review-section {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 10px;
}

.staff-review-section:first-child { margin-top: 0; }

.staff-review-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 8px 20px;
  padding: 10px 0;
  border-top: 1px solid rgba(93,191,53,0.1);
  font-size: 0.85rem;
}

.staff-review-row dt { color: var(--text-muted); margin: 0; }
.staff-review-row dd { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

.staff-card--done { text-align: center; }
.staff-card--done h2 { font-size: 1.6rem; margin: 0 0 10px; }
.staff-card--done p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin: 0 0 24px; }

.staff-done-icon svg {
  width: 52px;
  height: 52px;
  color: var(--accent);
  margin: 0 auto 20px;
}

@media (max-width: 560px) {
  /* Stacked label-over-value reads better than a squeezed two-column grid. */
  .staff-review-row { grid-template-columns: 1fr; gap: 4px; }
  .staff-actions .staff-submit { width: 100%; flex: none; }
}