/* =========================================================
   Leader — Stainless Steel Process Equipment & Fabrication
   Stylesheet adapted from a shared template.
   Palette: steel navy + amber, drawn from the pipe/tank logo
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --maroon-deep: #0b1720;
  --maroon: #122531;
  --maroon-light: #1c3a4d;
  --maroon-mid: #172e3d;
  --gold-bright: #ffd08a;
  --gold: #f2994a;
  --gold-deep: #c96f21;
  --cream: #eef3f6;
  --ink: #0a1318;
  --line: rgba(242, 153, 74, 0.28);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --radius: 2px;
  --maxw: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--maroon-deep);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 6vw;
}

@media (min-width:1300px) {
  .container {
    padding: 0 24px;
  }
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

h1,
h2,
h3,
h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color: var(--gold-bright);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

h1 {
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  letter-spacing: 0.01em;
}

h2 {
  font-style: normal;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  font-style: normal;
  color: var(--gold-bright);
}

p {
  margin: 0 0 1em;
}

.lede {
  font-size: 1.5rem;
  opacity: 0.9;
  max-width: 640px;
}

.muted {
  opacity: 0.75;
  font-size: 1.5rem
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  opacity: 0.85;
  margin: 0 0 26px;
}

.divider.center {
  justify-content: center;
}

.divider .line {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.divider svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  background: transparent;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
  white-space: nowrap;
}

.btn:hover {
  background: var(--gold);
  color: var(--maroon-deep);
  transform: translateY(-1px);
}

.btn.solid {
  background: var(--gold);
  color: var(--maroon-deep);
}

.btn.solid:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn.ghost {
  border-color: rgba(230, 238, 242, 0.4);
  color: var(--cream);
}

.btn.ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: transparent;
}

.btn svg {
  width: 14px;
  height: 14px;
}

/* ---------- Ring / emblem elements ---------- */
.ring-badge {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.ring-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.ring-badge span {
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  color: var(--gold-bright);
  font-size: 1.5rem;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  /* Must stay above .nav-links (120) and .nav-overlay (110) so the header —
     and the menu-toggle button inside it, which becomes the close (X) icon —
     stays visible and clickable while the mobile nav panel is open. The
     panel's own top padding (see .nav-links below) is sized to clear it.
     Also must beat the .wa-float / .to-top floating buttons (150) — they're
     siblings outside the header, and since the header establishes its own
     stacking context, its old z-index of 130 let those buttons paint on
     top of the open mobile nav panel and overlay (both nested inside the
     header). 160 clears them while staying below the lightbox (300). */
  z-index: 160;
  border-bottom: 1px solid var(--line);
}

/* The blurred background lives on a pseudo-element rather than directly on
   .site-header. backdrop-filter (like filter/transform) establishes a
   containing block for fixed-position descendants — putting it straight on
   the header would trap the mobile nav panel (.nav-links, position:fixed)
   inside the header's own box instead of the full viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 25, 0.86);
  backdrop-filter: blur(10px);
  z-index: -1;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Without this, flexbox was free to shrink the logo below its natural
     width on narrow screens (the "Let's Talk" button can't wrap or shrink
     below its text, so the logo absorbed the squeeze instead), stretching
     the wordmark out of proportion and crowding it right up against the
     button next to it. Keep it at its natural size and let the media
     queries below make room instead. */
  flex-shrink: 0;
}

.brand img {
  width: auto;
  height: 54px;
  border-radius: 0;
  border: none;
}

.brand-text {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  display: none;
}

@media (min-width:900px) {
  .brand-text {
    display: block;
  }
}

.brand-text small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  opacity: 0.8;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
}

@supports not (gap:1px) {
  .nav-links li+li {
    margin-left: 38px;
  }

  /* fallback for older engines without flex gap support */
}

.nav-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.82;
  position: relative;
  padding: 6px 0;
  transition: opacity .25s ease, color .25s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
  color: var(--gold-bright);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-call {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-call svg {
  width: 14px;
  height: 14px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  /* .nav-links is a sibling inside the same header and is position:fixed
     with its own z-index, so — even though the header sits above it —
     it will still paint over any non-positioned sibling like this button
     unless the button is given a stacking position of its own that beats
     .nav-links' z-index (120). Without this, the toggle (which becomes the
     close/X icon) disappears behind the open nav panel. */
  position: relative;
  z-index: 200;
}

.menu-toggle span {
  width: 24px;
  height: 1px;
  background: var(--gold-bright);
  display: block;
  transition: transform .25s ease, opacity .25s ease;
}

@media (max-width:980px) {
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: 78%;
    max-width: 340px;
    background: var(--maroon-deep);
    border-left: 1px solid var(--line);
    flex-direction: column;
    /* stretch (not flex-start): each <li> is a flex item here, and with
       flex-start it only sized to its own text width — so the row's
       border-bottom and the active/hover underline (both drawn full-width
       on the <a>, which is width:100% of its <li>) were only ever as wide
       as the word itself instead of spanning the drawer, making the whole
       panel look misaligned/ragged. Stretching the <li> to the full row
       width fixes both, and also gives each link a proper full-width tap
       target. */
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 100px 32px 32px;
    transform: translateX(100%);
    transition: transform .4s ease;
    z-index: 120;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .nav-links a {
    /* Anchors are inline by default, and width:100% has no effect on an
       inline element — display:block is what actually makes the link (and
       its border-bottom / active underline) span the full row width. */
    display: block;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-call {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .menu-toggle.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }

  .nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* On small phones the logo, the "Let's Talk" button and the hamburger
   button don't all fit at full desktop size on one row — the button's
   text can't wrap or shrink on its own (white-space:nowrap), so give it
   (and the logo) a smaller footprint instead of letting the row overflow
   or crowd together. */
@media (max-width:420px) {
  .brand img {
    height: 42px;
  }

  .nav-cta {
    gap: 10px;
  }

  .nav-cta .btn.solid {
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* ---------- Hero ---------- */
/*=========================================
HERO
=========================================*/

.hero {

  position: relative;

  background: linear-gradient(rgba(7, 15, 21, .88),
      rgba(7, 15, 21, .88)),
    url("../images/hero-bg.jpg") center/cover;

  padding: 120px 0;

  overflow: hidden;

}

.hero-wrapper {

  display: grid;

  grid-template-columns: 320px 1fr 320px;

  align-items: center;

  /* gap: 60px; */

}

.hero-content {

  text-align: center;

  max-width: 700px;

  margin: auto;

}

.hero-content h1 {

  margin: 20px 0;

}

.hero-content .lede {

  font-size: 1.2rem;

  margin: 25px auto 40px;

  max-width: 620px;

}

.hero-actions {

  display: flex;

  justify-content: center;

  gap: 18px;

  flex-wrap: wrap;

}

.hero-image {

  display: flex;

  justify-content: center;

}

.hero-image img {

  width: 100%;

  max-width: 320px;

  border-radius: 20px;

  object-fit: cover;

  transition: .4s;

  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);

}

.hero-image img:hover {

  transform: translateY(-8px);

}

.hero-left {

  justify-content: flex-start;

}

.hero-right {

  justify-content: flex-end;

}

/* Tablet */

@media(max-width:992px) {

  .hero-wrapper {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .hero-left,

  .hero-right {

    justify-content: center;

  }

  .hero-image img {

    max-width: 260px;

  }

  .hero-content {

    order: -1;

  }

}

/* Mobile */

@media(max-width:768px) {

  .hero {

    padding: 90px 0;

  }

  .hero-image {

    display: none;

  }

  .hero-content h1 {

    font-size: 2.4rem;

  }

  .hero-content .lede {

    font-size: 1rem;

  }

}

/* ---------- Page header (inner pages) ---------- */
.page-header {
  position: relative;
  padding: 200px 0 90px;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 18, 25, 0.55), var(--maroon-deep) 92%);
}

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

.breadcrumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-top: 14px;
}

.breadcrumb a {
  color: var(--cream);
  opacity: 0.7;
}

.breadcrumb a:hover {
  color: var(--gold-bright);
  opacity: 1;
}

/* ---------- Sections ---------- */
section {
  padding: 100px 0;
  position: relative;
}

.section-head {
  max-width: 640px;
  margin: 0 0 50px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.alt-bg {
  background: var(--maroon);
}

.deep-bg {
  background: var(--maroon-deep);
}

/* ---------- About preview / split ---------- */
/*==========================================
  SPLIT SECTION
==========================================*/

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
}

.split.reverse {
  grid-template-columns: 1fr 1fr;
}

.split.reverse .split-media {
  order: 2;
}

.split-media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.split-media img {
  width: 100%;
  /* Match the source photo's own 4:3 proportions instead of forcing a fixed
     pixel height. A fixed height made object-fit:cover crop away whatever
     didn't fit — most noticeably the person on the right of the shot — and
     how much got cropped changed with viewport width. Sizing to the photo's
     real aspect ratio means the full frame always shows, so nothing (and
     no one) gets cut off. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  transition: transform .5s ease;
}

.split:hover .split-media img {
  transform: scale(1.04);
}

/* Decorative Ring */

.split-media .ring-decor {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 95px;
  height: 95px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: .5;
}

/* Text */

.split>div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split h2 {
  margin: 10px 0 18px;
}

.split .lede {
  margin-bottom: 30px;
  line-height: 1.8;
}

.split .btn {
  width: fit-content;
}

/*==========================================
 Responsive
==========================================*/

@media (max-width:992px) {

  .split,
  .split.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 80px;
  }

  .split.reverse .split-media {
    order: 0;
  }
}

@media (max-width:768px) {

  .split {
    gap: 30px;
    margin-bottom: 70px;
  }

  .split h2 {
    font-size: 2rem;
  }

  .split .lede {
    margin-bottom: 22px;
  }
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
  margin-top: 60px;
}

.stat {
  text-align: center;
}

.stat .num {
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 2.7rem;
  color: var(--gold-bright);
}

.stat .label {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-top: 6px;
}

@media (max-width:760px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
}

.service-card {
  position: relative;
  background: var(--maroon-deep);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
}

.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.service-card:hover img {
  transform: scale(1.06);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 18, 25, 0) 30%, rgba(6, 13, 18, 0.92) 100%);
  z-index: 1;
}

.service-card-body {
  position: relative;
  z-index: 2;
  padding: 26px 22px;
  width: 100%;
}

.service-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
  opacity: 0.85;
}

.service-card h3 {
  margin: 8px 0 6px;
}

.service-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.service-link svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.service-card:hover .service-link {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width:1080px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.process-step {
  padding: 34px 26px;
  border: 1px solid var(--line);
  position: relative;
}

.process-step .step-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.85;
}

.process-step h3 {
  margin-top: 10px;
}

@media (max-width:980px) {
  .process {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:560px) {
  .process {
    grid-template-columns: 1fr;
  }
}

/* ---------- Gallery ---------- */
.view-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 34px;
}

.view-tab {
  font-family: 'Oswald', sans-serif;
  font-size: 19px;
  letter-spacing: 0.03em;
  padding: 10px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--cream);
  opacity: 0.55;
  cursor: pointer;
  transition: all .25s ease;
}

.view-tab:hover {
  opacity: 0.85;
}

.view-tab.active {
  opacity: 1;
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

.portfolio-view {
  display: none;
}

.portfolio-view.active {
  display: block;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}

.filter-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line);
  color: var(--cream);
  opacity: 0.8;
  background: transparent;
  transition: all .25s ease;
}

.filter-btn:hover {
  opacity: 1;
  border-color: var(--gold);
}

.filter-btn.active {
  background: var(--gold);
  color: var(--maroon-deep);
  border-color: var(--gold);
  opacity: 1;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
  transition: transform .55s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item .tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: linear-gradient(0deg, rgba(6, 13, 18, 0.85), transparent);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}

.gallery-item:hover .tag {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item.hide {
  display: none;
}

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

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

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 13, 0.94);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vh 4vw;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  border: 1px solid var(--line);
}

.lightbox-close {
  position: absolute;
  top: 26px;
  right: 32px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-size: 20px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  background: transparent;
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.testimonial {
  border: 1px solid var(--line);
  padding: 34px 30px;
}

.testimonial .stars {
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.testimonial p {
  font-style: italic;
  opacity: 0.92;
  font-size: 1.35rem
}

.testimonial-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.testimonial-who img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.testimonial-who .name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
}

.testimonial-who .role {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

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

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: 100px 0;
  background: linear-gradient(180deg, rgba(9, 18, 25, 0.4), rgba(9, 18, 25, 0.85)), url('../images/hero-bg.jpg') center/cover;
}

.cta-band h2 {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.info-list {
  margin-top: 30px;
}

.info-item {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.info-item .icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
}

.info-item .icon svg {
  width: 17px;
  height: 17px;
}

.info-item h4 {
  margin: 0 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.info-item p {
  margin: 0;
  opacity: 0.9;
  font-size: 1.35rem
}

.form-field {
  margin-bottom: 22px;
}

.form-field label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 1.10rem;
  padding: 10px 2px;
  outline: none;
  transition: border-color .25s ease;
}

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

.form-field select option {
  background: var(--maroon-deep);
  color: var(--cream);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

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

.form-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  opacity: 0.55;
  margin-top: 10px;
}

.form-success {
  display: none;
  border: 1px solid var(--gold);
  padding: 16px 18px;
  margin-bottom: 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.form-success.show {
  display: block;
}

.map-wrap {
  border: 1px solid var(--line);
  filter: grayscale(0.3) sepia(0.25) saturate(1.4);
}

.map-wrap iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}

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

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 80px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
}

.footer-brand img {
  width: auto;
  height: 42px;
  border-radius: 0;
  border: none;
  margin-bottom: 16px;
}

.footer-brand p {
  opacity: 0.75;
  font-size: 1.125rem;
}

.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a {
  opacity: 0.78;
  font-size: 1.125rem;
  transition: opacity .2s ease, color .2s ease;
}

.footer-col a:hover {
  opacity: 1;
  color: var(--gold-bright);
}

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: border-color .25s ease, color .25s ease;
}

.social-row a:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.social-row svg {
  width: 16px;
  height: 16px;
}

.social-row i {
  font-size: 15px;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

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

@media (max-width:560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 14px;
}

.footer-col ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
  transition: all 0.3s ease;
}

.footer-col ul li a i {
  font-size: 16px;
  color: var(--gold);
  min-width: 16px;
}

.footer-col ul li a:hover {
  color: var(--gold-bright);
  opacity: 1;
  transform: translateX(5px);
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--maroon-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}

.wa-float:hover {
  transform: scale(1.08);
}

.wa-float svg {
  width: 26px;
  height: 26px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  background: rgba(9, 18, 25, 0.7);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- Misc pages ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.value-card {
  border: 1px solid var(--line);
  padding: 32px 28px;
}

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

@media (max-width:560px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

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

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-transform: uppercase;
}

.faq-q .plus {
  font-size: 20px;
  color: var(--gold);
  transition: transform .3s ease;
}

.faq-item.open .plus {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.faq-item.open .faq-a {
  max-height: 200px;
}

.faq-a p {
  padding-top: 14px;
  opacity: 0.85;
}

/*=========================================
TOP BAR
=========================================*/

.top-bar {

  background: var(--gold-deep);

  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  font-size: 1rem;
  font-weight: 700;

}

.topbar-wrapper {

  display: flex;

  justify-content: space-between;

  align-items: center;

  /* padding:10px 0; */

  flex-wrap: wrap;

  gap: 15px;

}

.topbar-left,

.topbar-right {

  display: flex;

  align-items: center;

  gap: 18px;

}

.topbar-left a,

.topbar-right span {

  color: black;

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 8px;

  transition: .3s;

}

.topbar-left a:hover {

  color: var(--gold);

}

/* Renamed from ".divider" — that name collided with the decorative
   section divider (icon + lines) defined near the top of this file, and
   being later in the cascade it was silently overriding it everywhere
   (every "Don't see what you need?" CTA band was losing its flex layout
   and rendering as a bare 1x18px bar). This is just the small vertical
   separator between the two phone numbers in the top bar. */
.topbar-divider {

  width: 1px;

  height: 18px;

  background: rgba(255, 255, 255, .2);

}

.social-icons {

  display: flex;

  gap: 10px;

}

.social-icons a {

  width: 34px;

  height: 34px;

  border: 1px solid rgba(255, 255, 255, .15);

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: black;

  transition: .3s;

}

.social-icons a:hover {

  background: var(--gold);

  color: #111;

  border-color: var(--gold);

}

@media(max-width:768px) {

  .top-bar {

    display: none;

  }

}

/* ---------- Product cards (Products page) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--maroon-mid);
  border: 1px solid var(--line);
  overflow: hidden;
}

.product-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}

.product-card:hover img {
  transform: scale(1.06);
}

.product-card .tag {
  position: static;
  display: inline-block;
  margin: 18px 22px 0;
  padding: 0;
  background: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

.product-card-body {
  padding: 8px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-body h3 {
  margin: 6px 0 10px;
  font-size: 1.35rem;
}

.product-blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.product-card .service-link {
  position: static;
  opacity: 1;
  transform: none;
}

@media (max-width:980px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Keep the person in the workshop photo in frame when it's cropped by
   object-fit: cover (the subject sits toward the right of the source photo) */
.split-media img.subject-right {
  object-position: 100% 50%;
}

/* Product cards: image + title + category tag open the lightbox for that
   product; "Enquire Now" still navigates normally since it isn't part of
   these click targets. */
.product-card img,
.product-card-body h3,
.product-card .tag {
  cursor: pointer;
}

.product-card-body h3 {
  transition: color .2s ease;
}

.product-card-body h3:hover {
  color: var(--gold);
}