/* Unitech Group India - templatized rebuild. Design direction (2026-09):
   the client explicitly moved away from pixel-cloning the old GoDaddy
   template and asked for a system referencing how real construction
   companies (Turner Construction, DPR Construction, L&T Construction)
   structure and style their sites - mostly neutral (white/light-gray/dark
   ink), the brand green used sparingly as an accent rather than flooded
   across alternating full-bleed bands, one clean type family instead of a
   heading/body pairing, and content organized as reusable page-building
   blocks (see src/_includes/partials/blocks/) rather than one-off markup.
   The type scale and spacing scale below are unchanged from the prior pass
   - keep extending them, never reintroduce a bare px magic number. */

:root {
  --color-green: #17402b;
  --color-green-dark: #0f3325;
  --color-gold: #fadb42;
  --color-accent: #fadb42;
  --color-accent-2: #fadb42;
  --color-red: #a8322a;
  --color-white: #f8fbf7;
  --color-ink: #1b1b1b;
  --color-ink-800: #23272b;
  --color-text: #333333;
  --color-muted: #666666;
  --color-border: #cfddd0;
  --color-bg-light: #d9e9d2;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Arial, Helvetica, sans-serif;
  --radius-card: 4px;
  --radius-pill: 48px;
  /* Large, soft, low-opacity shadows read as premium; tight/high-opacity
     ones read as cheap. Values checked directly against a real top-10
     global contractor's (Vinci) production CSS rather than guessed. */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.14);
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease-in-out;

  /* Type scale - every font-size in this file uses one of these 8 steps. */
  --text-xs: 13px; /* nav links */
  --text-sm: 14px; /* dates, captions, fine print */
  --text-base: 16px; /* body copy, buttons, form fields */
  --text-md: 18px; /* leads, form labels */
  --text-lg: 20px; /* card headings */
  --text-xl: 24px; /* subheadings */
  --text-2xl: 28px; /* section headings, post title */
  --text-3xl: 32px; /* hero heading, vertical card titles */

  /* Spacing scale (8px base) - every margin/padding/gap in this file uses
     one of these 11 steps, not an arbitrary value. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-11: 80px;
  --section-pad: var(--space-9);
}

* {
  box-sizing: border-box;
}

/* Buttons/inputs/selects/textareas do NOT inherit font-family from body in
   any browser by default - without this rule every .btn and every form
   field silently falls back to the OS's default UI font while the rest of
   the page renders in the site's real font, which is exactly the
   "scattered font" bug the client flagged. This one rule fixes every
   instance of it site-wide, rather than patching font-family onto each
   component. */
button,
input,
select,
textarea {
  font: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #f9fbf8;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* This project's real photography comes from mixed sources (WhatsApp
   exports, drone stills, stock photos) with no consistent color grading -
   rather than hand-grading each file, a single uniform filter applied to
   every content photo makes the set read as one cohesive collection
   instead of a grab-bag. Excludes the hero, which is large enough that a
   flat filter would visibly flatten it. */
.card__image img,
.news-card img,
.career-card img,
.post__image {
  filter: saturate(0.95) contrast(1.03);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  /* Tight negative tracking on display type is a standard premium-type
     technique (checked against Vinci's production CSS: -0.03em on their
     large headings) - default browser tracking on big bold text reads as
     loose/unrefined. */
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-7);
  border-radius: var(--radius-pill);
  border: none;
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--green {
  background: var(--color-green);
  color: #ffffff;
}

.btn--light {
  background: #f2f2f2;
  color: var(--color-ink);
}

.btn--gold {
  background: var(--color-gold);
  color: var(--color-green-dark);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}

.btn--block {
  width: 100%;
}

/* --- Header / Nav --- */

/* Sticky header: logo left, navigation right, kept at the top while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 247, 241, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(15, 51, 37, 0.08);
}

.site-header__inner {
  max-width: 1160px;
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.site-header__logo img {
  height: 56px;
  width: auto;
}

.site-header__nav-toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
}

.site-header__nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  margin: var(--space-1) 0;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-5);
  padding: 0;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-gold);
  transition: right var(--transition-base);
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-ink);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  right: 0;
}

/* --- Section heading component --- */

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  max-width: 900px;
  margin: 0 auto var(--space-7);
  padding: 0 var(--space-5);
}

.section-heading h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-green);
  text-align: center;
  white-space: nowrap;
}

.section-heading--red h2 {
  color: var(--color-red);
}

.section-heading--on-dark h2 {
  color: #ffffff;
}

.section-heading__rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  color: #a9c98d;
  opacity: 1;
  min-width: var(--space-5);
}

.section-heading--red .section-heading__rule {
  color: var(--color-red);
}

.section-heading--on-dark .section-heading__rule {
  color: #ffffff;
}

/* --- Section wrapper --- */

/* Full-width sections: the background spans the page, content sits on the
   1160px grid (same rule as the stirrups page). */
.section {
  padding: var(--section-pad) max(var(--space-5), calc((100% - 1160px) / 2));
  max-width: none;
  margin: 0;
}

.section--green {
  max-width: none;
  background: var(--color-green);
  padding-left: 0;
  padding-right: 0;
}

.section--green > .section-heading,
.section--green .career-apply__intro,
.section--green .career-apply__body,
.section--green .career-apply-form,
.section--green.cta-banner > * {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.section__cta {
  text-align: center;
  margin-top: var(--space-6);
}

/* Optional extra photos/video/link an editor can attach to any home-page
   block via the CMS (block.extraPhotos / extraVideo / extraLink), rendered
   by the shared partials/blocks/_extraMedia.njk include. Renders nothing
   (no empty gap) when a block has none of the three set. */
.extra-media {
  max-width: 1160px;
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
}

.extra-media__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.extra-media__photo {
  flex: 0 1 280px;
}

.extra-media__photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.extra-media__video {
  max-width: 800px;
  margin: 0 auto;
}

.extra-media__video video {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.extra-media__photos + .extra-media__video,
.extra-media__video + .extra-media__link,
.extra-media__photos + .extra-media__link {
  margin-top: var(--space-5);
}

.extra-media__link {
  text-align: center;
}

/* --- Hero --- */

.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Green wash so white copy reads over any photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(15, 51, 37, 0.94) 0%, rgba(15, 51, 37, 0.8) 42%, rgba(15, 51, 37, 0.3) 100%);
}

.hero__card {
  position: relative;
  z-index: 2;
  background: none;
  max-width: 680px;
  width: 100%;
  padding: 0 var(--space-5);
  margin-left: max(var(--space-5), calc((100% - 1160px) / 2));
  text-align: left;
}

.hero__card::before {
  content: "";
  display: block;
  width: 68px;
  height: 2px;
  background: var(--color-accent-2);
  margin-bottom: var(--space-5);
}

/* Left-aligned hero, matching how Turner/DPR/L&T lean their hero copy
   rather than centering it - the default; .hero--center opts back in. */
.hero--left {
  justify-content: flex-start;
}

.hero--left .hero__card {
  text-align: left;
}

.hero__heading {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-5);
  line-height: 1.12;
}

.hero__sub {
  color: #eff6f1;
  font-size: var(--text-md);
  max-width: 560px;
  margin-bottom: var(--space-6);
}

.hero__card .btn--light {
  background: var(--color-accent);
  color: var(--color-green-dark);
}

.hero__card .btn {
  margin-top: var(--space-2);
}

/* --- Shared card + grid system ---
   One base component (.card) used by the Services Grid, Project Grid and
   News Grid blocks, so every card-based section shares the same shape,
   shadow, radius and internal rhythm instead of each inventing its own
   (this is what "sizings and spacings are all off" was really pointing
   at - no shared component to begin with). Grid column counts are a
   modifier on .card-grid, not baked into each block's own CSS. */

.card-grid {
  display: grid;
  gap: var(--space-5);
}

.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: block;
  background: rgba(246, 250, 245, 0.85);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-light);
}

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

.card__body {
  padding: var(--space-5);
}

.card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.card__text {
  color: var(--color-muted);
  margin: 0;
}

.section-intro {
  text-align: center;
  color: var(--color-muted);
  max-width: 700px;
  margin: calc(var(--space-7) * -1) auto var(--space-7);
}

/* Used when a .section-intro follows a card-grid rather than a heading -
   needs real top spacing instead of the negative margin above, which
   exists only to pull an intro closer under a heading. */
.section-intro--after-grid {
  margin: var(--space-8) auto 0;
}

.project-group + .project-group {
  margin-top: var(--space-8);
}

.project-group__title {
  font-size: var(--text-md);
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

/* --- Stats / credibility bar --- */

.stats-bar {
  text-align: center;
}

.stats-bar__statement {
  font-size: var(--text-md);
  color: var(--color-text);
  max-width: 700px;
  margin: 0 auto var(--space-6);
}

.stats-bar__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.stats-bar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stats-bar__value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-green);
}

.stats-bar__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- CTA banner --- */

.cta-banner {
  text-align: center;
}

.cta-banner__heading {
  color: #ffffff;
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.cta-banner__body {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto var(--space-6);
}

/* --- Profile viewer --- */

.profile-viewer {
  text-align: center;
  background: var(--color-bg-light);
  padding: var(--space-7) var(--space-5);
}

.profile-viewer iframe {
  width: 100%;
  max-width: 509px;
  height: 720px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.profile-viewer__note {
  margin-top: var(--space-4);
}

.profile-viewer__note a {
  color: var(--color-green);
  font-weight: 600;
}

/* --- News grid --- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.news-card {
  background: rgba(246, 250, 245, 0.85);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* Not a lift-on-hover like .card - the whole article isn't a link here
     (only the headline and "Continue Reading" are), so a translateY would
     imply clickability the element doesn't have. Shadow-only on the
     container; the real interactive elements inside get their own hover. */
  transition: box-shadow var(--transition-base);
}

.news-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.news-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-card__body {
  padding: var(--space-5);
}

.news-card__date {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.news-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.news-card h3 a:hover {
  color: var(--color-green);
}

.news-card__excerpt {
  color: var(--color-muted);
}

.news-card__more {
  color: var(--color-green);
  font-weight: 600;
}

/* --- Contact --- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-7);
}

.contact-col__heading {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.contact-col__body {
  color: var(--color-muted);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form input,
.contact-form textarea,
.career-apply-form input,
.career-apply-form textarea {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--text-base);
}

.contact-col .btn--gold {
  margin: var(--space-4) 0 var(--space-6);
}

.contact-col__label {
  font-size: var(--text-md);
  margin: var(--space-5) 0 var(--space-2);
}

.contact-col__phone a {
  color: var(--color-green);
  font-weight: 600;
}

.contact-map {
  position: relative;
}

.contact-map iframe {
  width: 100%;
  height: 420px;
  display: block;
  border-radius: var(--radius-card);
}

.contact-map__placeholder {
  width: 100%;
  height: 420px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(#eef0ea, #eef0ea),
    repeating-linear-gradient(0deg, #edf0ea 0, #edf0ea 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, #edf0ea 0, #edf0ea 1px, transparent 1px, transparent 40px);
}

.contact-map__directions {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

/* Full-bleed band like the other sections; text stays on the 1160px grid */
.vendor-lane {
  text-align: center;
  background: var(--color-bg-light);
  padding: var(--space-7) max(var(--space-5), calc((100% - 1160px) / 2));
  margin: var(--space-7) calc(50% - 50vw) 0;
  width: 100vw;
}

.vendor-lane__heading {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.vendor-lane__body {
  color: var(--color-muted);
  max-width: 500px;
  margin: 0 auto var(--space-4);
}

/* --- Footer --- */

/* Dark neutral, not brand-color-flooded - matches how Turner/DPR/L&T
   actually treat their footers (green is reserved for the CTA banner and
   small accents, not another full-bleed color band). */
.site-footer {
  background: var(--color-green-dark);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: var(--space-8) var(--space-5) var(--space-6);
}

.site-footer__columns {
  display: flex;
  justify-content: center;
  gap: var(--space-11);
  max-width: 700px;
  margin: 0 auto var(--space-7);
  text-align: left;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__col-heading {
  color: #ffffff;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.site-footer__col a {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__col a:hover {
  color: var(--color-gold);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-green);
  font-size: var(--text-md);
  margin-bottom: var(--space-5);
}

.site-footer__copyright {
  opacity: 0.75;
}

/* --- Career --- */

.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
}

.career-card {
  text-align: center;
}

.career-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.career-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: var(--space-4);
}

.career-card p {
  color: var(--color-muted);
}

.career-apply__intro {
  text-align: center;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin: 0 auto var(--space-2);
}

.career-apply__body {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto var(--space-6);
}

.career-apply-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 auto;
}

.career-apply-form h4 {
  color: #ffffff;
  text-align: center;
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.career-apply-form input,
.career-apply-form textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.career-apply-form input::placeholder,
.career-apply-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.career-apply-form__attach {
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.career-apply-form__attach input[type="file"] {
  color: #ffffff;
  font-size: var(--text-sm);
}

.career-apply-form .btn {
  align-self: center;
  margin-top: var(--space-2);
}

/* --- Individual post page --- */

.post__inner {
  max-width: 760px;
  margin: 0 auto;
}

.post__image {
  width: 100%;
  border-radius: var(--radius-card);
  margin-bottom: var(--space-5);
}

.post__date {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.post h1 {
  font-size: var(--text-2xl);
  color: var(--color-green);
  margin-bottom: var(--space-5);
}

.post__content p {
  color: var(--color-text);
}

.post__back {
  margin-top: var(--space-6);
}

.post__back a {
  color: var(--color-green);
  font-weight: 600;
}

/* --- Responsive --- */

@media (max-width: 900px) {
  .card-grid--3,
  .card-grid--2,
  .news-grid,
  .contact-grid,
  .career-grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__grid {
    gap: var(--space-6);
  }

  .hero {
    min-height: 480px;
  }

  .hero--left .hero__card {
    margin-left: var(--space-5);
  }

  .hero__heading {
    font-size: var(--text-xl);
  }
}

@media (max-width: 700px) {
  .site-header__nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: var(--space-1);
    text-align: center;
  }

  .site-nav.is-open {
    display: flex;
  }

  :root {
    --section-pad: var(--space-7);
  }

  .site-footer__columns {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
  }

  .site-footer__col {
    align-items: center;
  }
}

/* --- Stirrups page (src/stirrups.njk) ---
   Follows the supplied reference design: muted greens, pale accent lines,
   translucent light cards and photo backgrounds with a green wash. */

.st-kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-4);
}

.st-kicker--center {
  text-align: center;
}

/* Hero: rebar photo under the reference green wash */
.st-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-green-dark);
  background-size: cover;
  background-position: center right;
}

.st-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 51, 37, 0.97) 0%, rgba(15, 51, 37, 0.92) 42%, rgba(15, 51, 37, 0.72) 68%, rgba(15, 51, 37, 0.55) 100%);
}

.st-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 70px;
  align-items: center;
}

.st-hero .st-kicker {
  color: var(--color-accent);
}

.st-hero__heading {
  color: var(--color-white);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

.st-hero__heading span {
  color: var(--color-accent);
}

.st-hero__sub {
  color: #eff6f1;
  font-size: var(--text-md);
  max-width: 600px;
  margin-bottom: var(--space-6);
}

.st-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.st-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.st-benefits__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.st-benefits strong {
  display: block;
  color: var(--color-white);
  font-size: var(--text-base);
}

.st-benefits small {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
}

/* Quote card */
.st-quote {
  background: rgba(246, 250, 246, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  padding: var(--space-6);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.st-quote h2 {
  font-size: var(--text-3xl);
  color: var(--color-green-dark);
}

.st-quote__body {
  color: var(--color-muted);
  margin: var(--space-2) 0 var(--space-5);
}

.st-quote__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.st-quote__form input,
.st-quote__form select,
.st-quote__form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #c9d9c9;
  border-radius: 6px;
  font-size: var(--text-base);
  background: #ffffff;
}

.st-quote__form textarea {
  resize: vertical;
}

.st-quote__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.st-quote__fine {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
  margin: var(--space-2) 0 0;
}

.st-quote__fine a {
  color: var(--color-green);
  font-weight: 700;
}

/* Strip under the hero (light band, deep green text) */
.st-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-7);
  padding: var(--space-5);
  background: #e8f1e7;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-green-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.st-strip span {
  position: relative;
  padding-left: var(--space-4);
}

.st-strip span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--color-accent-2);
  transform: translateY(-50%);
}

/* Full-width section bands; content stays on the 1160px grid */
.st-why,
.st-video,
.st-apps,
.st-shapes,
.st-faq {
  max-width: none;
  padding-left: max(var(--space-5), calc((100% - 1160px) / 2));
  padding-right: max(var(--space-5), calc((100% - 1160px) / 2));
}

/* Why section */
.st-why {
  background: #eff6ee;
}

.st-why .card {
  background: rgba(246, 250, 245, 0.82);
}

.st-why .section-intro {
  margin-top: 0;
}

.st-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-7);
}

.st-table {
  width: 100%;
  border-collapse: collapse;
  background: #f6faf5;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--text-base);
}

.st-table th,
.st-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.st-table thead th {
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.st-table thead th:last-child {
  background: var(--color-gold);
  color: var(--color-green-dark);
}

.st-table tbody th {
  font-family: var(--font-heading);
  color: var(--color-ink);
  width: 18%;
}

.st-table__machine {
  color: var(--color-ink);
}

.st-check {
  color: var(--color-green);
  font-weight: 700;
  margin-right: var(--space-1);
}

.st-center {
  text-align: center;
  margin-top: var(--space-7);
}

/* Video: reference tape border, toned down */
.st-video__frame {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px;
  background: repeating-linear-gradient(135deg, #fadb42 0 18px, #0f3b2a 18px 36px);
  box-shadow: 0 20px 50px rgba(25, 49, 39, 0.12);
}

.st-video__frame video {
  display: block;
  width: 100%;
  background: #101b15;
}

/* Placeholders for photos and video not supplied yet */
.st-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: var(--space-5);
  background: repeating-linear-gradient(135deg, #f3f8f3 0 12px, #ebf3eb 12px 24px);
  border: 1px dashed #9fbca3;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.st-placeholder--video {
  min-height: 360px;
  background: #101b15;
  border-color: #3b4a3e;
  color: rgba(255, 255, 255, 0.8);
}

/* Applications and gallery */
.st-apps__grid {
  grid-template-columns: repeat(4, 1fr);
}

.st-apps .card {
  background: #f3f8f3;
}

/* Stirrups gallery grid */
.st-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.st-gallery__item {
  margin: 0;
  background: #f3f8f3;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

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

.st-gallery__item .st-placeholder {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
}

.st-gallery__item figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink);
  border-top: 3px solid var(--color-gold);
}

/* Gallery carousel (home project group): fixed-height frames, each photo
   fits at its own aspect ratio. */
.gallery-carousel {
  position: relative;
  margin-top: var(--space-5);
}

.gallery-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.gallery-carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-green);
  background: #ffffff;
  color: var(--color-green);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.gallery-carousel__btn:hover,
.gallery-carousel__btn:focus-visible {
  background: var(--color-green);
  color: #ffffff;
}

.gallery-carousel__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}

.gallery-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Each slide is as wide as its photo at the fixed frame height */
.gallery-carousel__slide {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  background: rgba(246, 250, 245, 0.85);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.gallery-carousel__frame {
  height: 300px;
  background: #eef6ec;
}

.gallery-carousel__frame img {
  display: block;
  height: 100%;
  width: auto;
  max-width: min(640px, 80vw);
  object-fit: contain;
}

/* Caption wraps to the photo's width, not the other way round */
.gallery-carousel__slide figcaption {
  width: 0;
  min-width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* Sizes & shapes (reference: pale field, line icons, outlined cards) */
.st-shapes {
  background: #f5faf3;
}

.st-shapes__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}

.st-shapes__heading .st-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  letter-spacing: 0.32em;
}

.st-shapes__heading .st-kicker::before,
.st-shapes__heading .st-kicker::after {
  content: "";
  width: 86px;
  height: 2px;
  background: #a9c98d;
  border-radius: 10px;
}

.st-shapes__heading h2 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #0a4a32;
}

.st-shapes__heading .section-intro {
  margin: var(--space-4) auto 0;
}

.st-shapes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 1000px;
  margin: 0 auto;
}

.st-shape {
  background: rgba(245, 250, 243, 0.34);
  border: 1px solid rgba(79, 142, 103, 0.48);
  border-radius: 10px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.st-shape__icon {
  display: block;
  height: 72px;
  margin-bottom: var(--space-5);
  color: #0b4a32;
}

.st-shape__icon svg {
  width: 66px;
  height: 66px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-shape h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: #0b4a32;
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.st-shape p {
  color: #3f6255;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* FAQ over the construction photo, with the reference green wash */
.st-faq {
  position: relative;
  overflow: hidden;
  background-color: #f0f6ef;
  background-size: cover;
  background-position: center;
}

.st-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(240, 246, 239, 0.88) 0%, rgba(240, 246, 239, 0.82) 38%, rgba(240, 246, 239, 0.62) 68%, rgba(240, 246, 239, 0.75) 100%);
}

.st-faq > * {
  position: relative;
  z-index: 1;
}

.st-faq__grid {
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: start;
}

.st-faq h2 {
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.15;
  color: #0a4a32;
}

.st-faq .st-kicker {
  color: #0d4b34;
}

.st-faq .section-intro {
  margin: var(--space-4) 0 0;
  text-align: left;
  color: #4e6658;
}

.st-faq__item {
  background: rgba(246, 250, 245, 0.82);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: var(--space-3);
  box-shadow: 0 8px 24px rgba(25, 49, 39, 0.04);
}

.st-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.st-faq__item summary::-webkit-details-marker {
  display: none;
}

.st-faq__num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8f1e7;
  color: var(--color-green);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.st-faq__plus {
  margin-left: auto;
  color: var(--color-green);
  font-size: var(--text-xl);
  line-height: 1;
  font-weight: 400;
  transition: transform var(--transition-fast);
}

.st-faq__item[open] .st-faq__plus {
  transform: rotate(45deg);
}

.st-faq__item p {
  padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 36px + var(--space-4));
  margin: 0;
  color: var(--color-muted);
}

/* Closing bar (reference: soft gradient card on a pale band) */
.st-mini-cta {
  max-width: 1120px;
  margin: var(--space-8) auto;
  padding: 22px 26px;
  border: 1px solid rgba(31, 92, 61, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #f0f7f2, #e8f2eb);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.st-mini-cta strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-green-dark);
}

.st-mini-cta span {
  color: var(--color-muted);
}

.st-mini-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.st-mini-cta .btn--light {
  background: #ffffff;
  color: var(--color-green-dark);
}

/* Stirrups responsive */
@media (max-width: 1000px) {
  .st-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .st-apps__grid,
  .st-shapes__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .st-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .st-faq__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 700px) {
  .st-apps__grid {
    grid-template-columns: 1fr;
  }

  .st-shapes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .st-shape {
    padding: var(--space-5) var(--space-3);
  }

  .st-shape__icon {
    height: 56px;
    margin-bottom: var(--space-3);
  }

  .st-shape__icon svg {
    width: 52px;
    height: 52px;
  }

  .st-shape h3 {
    font-size: var(--text-md);
  }

  .st-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .st-gallery__item figcaption {
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
  }

  .gallery-carousel__frame {
    height: 240px;
  }

  .st-hero__inner {
    padding: var(--space-7) var(--space-4);
  }

  .st-quote {
    padding: var(--space-5);
  }

  .st-faq__item p {
    padding-left: var(--space-5);
  }
}

/* Long section headings wrap on phones instead of overflowing the screen */
@media (max-width: 700px) {
  .section-heading h2 {
    white-space: normal;
    font-size: var(--text-xl);
  }
}

/* Comparison table stacks into labelled rows on phones */
@media (max-width: 700px) {
  .st-table thead {
    display: none;
  }

  .st-table,
  .st-table tbody,
  .st-table tr,
  .st-table th,
  .st-table td {
    display: block;
    width: 100%;
  }

  .st-table tr {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .st-table th,
  .st-table td {
    border: 0;
    padding: var(--space-1) 0;
  }

  .st-table tbody th {
    width: 100%;
    margin-bottom: var(--space-2);
  }

  .st-table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
  }
}

/* Header below 1000px: the navigation collapses behind the menu button */
@media (max-width: 1000px) {
  .site-header {
    padding: 0 var(--space-4);
  }

  .site-header__inner {
    min-height: 64px;
  }

  .site-header__logo img {
    height: 44px;
  }

  .site-header__nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: rgba(241, 247, 241, 0.98);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: var(--space-3) 0;
  }
}