/* ============================================================
   JTWDBW LLC — Lathe Station Stylesheet
   Motif: metal lathe carriage end feed bench, pure CSS
   Palette: WAY-OIL / SLAG-INK / LANOLIN-GOLD / CUT-SAFETY / OIL-TEAL
   ============================================================ */

:root {
  --way-oil: #EDEDE4;
  --slag-ink: #262B28;
  --lanolin-gold: #C9A03B;
  --cut-safety: #D9542E;
  --oil-teal: #2E6B62;
  --bone-chuck: #E9E6D8;
  --cast-deep: #232826;
  --gold-dim: #A8862F;
  --bone-line: #D2CDBA;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  background: #EDEDE4;
  color: #262B28;
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  color: #A8862F;
  text-decoration: underline;
}

a:hover {
  color: #D9542E;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif;
  line-height: 1.18;
  color: #262B28;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1.1em;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   CHUCK-FACE DIAL HEADER (.chucknav)
   Faceplate band in CAST-DEEP, thin LANOLIN-GOLD index line
   ============================================================ */

.chucknav {
  background: #232826;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid #C9A03B;
  box-shadow: 0 2px 0 #000000;
}

.chucknav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px 16px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.chuckbrand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-right: auto;
}

.chuck-glyph {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #C9A03B;
  position: relative;
  background: #232826;
  flex: 0 0 auto;
}

.chuck-glyph::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid #C9A03B;
}

.chuck-glyph::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #C9A03B;
}

.brandplate {
  background: #232826;
  border: 1px solid #C9A03B;
  border-radius: 4px;
  padding: 6px 16px;
}

.brandplate-name {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: #EDEDE4;
}

.brandplate-tag {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C9A03B;
}

@media (prefers-color-scheme: dark) {
  .brandplate-name { color: #EDEDE4; }
}

/* --- five bone dial plates --- */

.chuckdialplate {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.navtoggle {
  display: none;
  background: #C9A03B;
  color: #232826;
  border: none;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
}

.dialplate {
  background: #E9E6D8;
  color: #262B28;
  text-decoration: none;
  display: block;
  border-radius: 50%;
  position: relative;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.05;
  border: 2px solid #C9A03B;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dialplate span {
  display: block;
  padding: 0 8px;
}

.dialplate::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: 8px;
  background: #D9542E;
  transform: translateX(-50%);
}

.dialplate:hover {
  background: #C9A03B;
  color: #232826;
  transform: translateY(-2px);
}

.dialplate-a { width: 84px; height: 84px; padding-top: 27px; }
.dialplate-b { width: 92px; height: 92px; padding-top: 31px; }
.dialplate-c { width: 78px; height: 78px; padding-top: 24px; }
.dialplate-d { width: 96px; height: 96px; padding-top: 33px; }
.dialplate-e { width: 80px; height: 80px; padding-top: 25px; }

@media (max-width: 860px) {
  .navtoggle { display: inline-block; }
  .chuckdialplate {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
  }
  .chuckdialplate.is-open { display: flex; }
  .dialplate {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    padding: 13px 16px !important;
    text-align: left;
  }
  .dialplate::before { display: none; }
  .dialplate span { padding: 0; }
}

/* ============================================================
   HERO — CARRIAGE SADDLE SCENE (.carriagesaddle)
   ============================================================ */

.carriagesaddle {
  background: #EDEDE4;
  padding: 56px 0 0;
}

.saddle-intro {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.saddle-kicker {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #2E6B62;
  font-weight: 700;
  margin: 0 0 18px;
}

.saddle-headline {
  font-size: 46px;
  margin: 0 0 22px;
  max-width: 760px;
}

.saddle-headline .displayword {
  display: block;
  font-size: 84px;
  letter-spacing: 0.04em;
  color: #D9542E;
  margin-top: 4px;
}

.saddle-copy {
  max-width: 660px;
  font-size: 17px;
  color: #262B28;
}

.saddle-inline-link {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #A8862F;
  text-decoration: underline;
  white-space: nowrap;
}

.saddle-inline-link:hover { color: #D9542E; }

/* --- the lathe bench band --- */

.lathebench {
  background: #E9E6D8;
  border-top: 3px solid #232826;
  border-bottom: 3px solid #232826;
  padding: 46px 24px 0;
}

.lathebench-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  min-height: 250px;
  position: relative;
  padding-bottom: 54px;
}

/* --- headstock + three-jaw chuck --- */

.headstock {
  width: 190px;
  flex: 0 0 auto;
  position: relative;
  padding-bottom: 34px;
}

.headstock-block {
  width: 150px;
  height: 120px;
  background: #262B28;
  border-radius: 6px 6px 0 0;
  position: relative;
  margin: 0 auto;
}

.headstock-bolts {
  position: absolute;
  top: 10px;
  left: 10px;
}

.headstock-bolts i,
.headstock-bolts b {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9A03B;
  margin-bottom: 8px;
}

.headstock-bolts b { margin-bottom: 0; }

.chuckface {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #262B28;
  border: 5px solid #C9A03B;
  position: absolute;
  top: 24px;
  right: -8px;
  box-shadow: inset 0 0 0 5px #3A413C;
}

.chuckring-1 {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid #C9A03B;
}

.chuckring-2 {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 2px dashed #C9A03B;
}

.chuckjaw {
  position: absolute;
  width: 12px;
  height: 20px;
  background: #C9A03B;
  border-radius: 2px;
  left: 50%;
  margin-left: -6px;
  transform-origin: 50% 54px;
}

.chuckjaw.j1 { top: 6px; }
.chuckjaw.j2 { bottom: 6px; transform: rotate(180deg); }
.chuckjaw.j3 { top: 6px; transform: rotate(120deg); }

.bench-feet {
  display: flex;
  justify-content: space-between;
  width: 150px;
  margin: 0 auto;
}

.bench-feet i {
  display: block;
  width: 26px;
  height: 30px;
  background: #232826;
  border-radius: 0 0 4px 4px;
}

/* --- the bed with double way rails --- */

.lathebed {
  flex: 1 1 auto;
  align-self: flex-end;
  padding-bottom: 34px;
  position: relative;
}

.wayrails {
  position: relative;
  height: 26px;
  background: #262B28;
  border-radius: 3px;
}

.wayrails::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 3px;
  background: #C9A03B;
}

.wayrails::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 3px;
  background: #C9A03B;
}

.waysupports {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}

.waysupports i {
  display: block;
  width: 20px;
  height: 30px;
  background: #232826;
}

/* --- carriage saddle --- */

.carriage {
  position: absolute;
  top: -54px;
  left: 32%;
  width: 150px;
}

.carriage-body {
  height: 46px;
  background: #232826;
  border-radius: 5px;
  position: relative;
  border: 2px solid #C9A03B;
}

.carriage-handwheel {
  position: absolute;
  right: -22px;
  top: -14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid #C9A03B;
  background: #E9E6D8;
}

.carriage-handwheel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #C9A03B;
}

.carriage-handwheel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 18px;
  background: #232826;
  transform: translate(-50%, -50%);
}

.crossdial {
  position: absolute;
  left: 14px;
  top: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E9E6D8;
  border: 3px solid #C9A03B;
}

.crossdial-needle {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 15px;
  background: #D9542E;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(38deg);
}

.bitclamp {
  position: absolute;
  left: 30px;
  top: -22px;
  width: 58px;
}

.bitclamp-jaw {
  height: 16px;
  background: #262B28;
  border: 2px solid #C9A03B;
  border-radius: 3px;
  position: relative;
}

.bitclamp-jaw::before,
.bitclamp-jaw::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A03B;
  transform: translateY(-50%);
}

.bitclamp-jaw::before { left: 4px; }
.bitclamp-jaw::after { right: 4px; }

.cuttingbit {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 22px solid #D9542E;
  margin: 0 auto;
  transform: rotate(180deg);
}

/* --- tailstock + estop --- */

.tailstock {
  width: 130px;
  flex: 0 0 auto;
  align-self: flex-end;
  padding-bottom: 34px;
  position: relative;
}

.tailstock-body {
  width: 100px;
  height: 104px;
  background: #262B28;
  border-radius: 6px 6px 0 0;
  margin: 0 auto;
  border: 2px solid #232826;
  position: relative;
}

.tailstock-quill {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid #C9A03B;
  background: #E9E6D8;
  position: absolute;
  top: 26px;
  left: 26px;
}

.tailstock-quill::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #262B28;
}

.estop {
  position: absolute;
  top: -26px;
  right: 6px;
  width: 54px;
}

.estop-mushroom {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #D9542E;
  border: 4px solid #232826;
  box-shadow: 0 4px 0 #7A2E19;
}

.estop-base {
  width: 30px;
  height: 14px;
  background: #232826;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
}

/* --- way-oil droplet trail --- */

.oiltrail {
  position: absolute;
  bottom: 14px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.oiltrail i {
  display: block;
  width: 9px;
  height: 13px;
  background: #2E6B62;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(45deg);
}

.oiltrail i:nth-child(odd) { width: 7px; height: 10px; }
.oiltrail i:nth-child(3n) { width: 11px; height: 15px; }

/* --- primary CTA functional bar --- */

.saddle-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #C9A03B;
  color: #232826;
  text-decoration: none;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.03em;
  padding: 20px 34px;
  border-top: 3px solid #232826;
}

.saddle-cta:hover {
  background: #D9542E;
  color: #232826;
}

.saddle-cta .arrow {
  font-size: 26px;
  line-height: 1;
}

@media (max-width: 860px) {
  .saddle-headline { font-size: 34px; }
  .saddle-headline .displayword { font-size: 58px; }
  .lathebench-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
  .carriage { left: 8%; }
}

/* ============================================================
   SECTION BASICS
   ============================================================ */

.section {
  padding: 64px 0;
}

.section-intro {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-h2 {
  font-size: 32px;
  margin: 0 0 12px;
  position: relative;
  padding-left: 20px;
}

.section-h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 6px;
  background: #C9A03B;
}

.section-lead {
  max-width: 760px;
  font-size: 17px;
  color: #262B28;
  margin-bottom: 34px;
}

.section-wells {
  background: #232826;
  color: #EDEDE4;
}

.section-wells .section-h2 { color: #EDEDE4; }
.section-wells .section-lead { color: #E9E6D8; }
.section-wells p { color: #E9E6D8; }

.section-bone {
  background: #E9E6D8;
}

/* ============================================================
   BIT-CLAMP LADDER RUN (.clampway)
   Six service tags at different widths and offsets
   ============================================================ */

.clampway {
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 24px 20px;
  position: relative;
}

.clampway-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 3px;
  background: #232826;
}

.clamptag {
  position: relative;
  background: #E9E6D8;
  border: 2px solid #232826;
  border-left: 8px solid #C9A03B;
  border-radius: 4px;
  padding: 22px 26px 22px;
  margin-bottom: 26px;
  box-shadow: 4px 4px 0 #D2CDBA;
}

.clamptag-mark {
  position: absolute;
  top: -13px;
  right: 18px;
  width: 30px;
  height: 30px;
  background: #262B28;
  color: #C9A03B;
  border-radius: 50%;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}

.clamptag h3 {
  font-size: 21px;
  margin: 0 0 8px;
}

.clamptag p {
  margin: 0;
  font-size: 16px;
  color: #262B28;
}

.clamptag-link {
  display: inline-block;
  margin-top: 10px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #A8862F;
}

.clamptag-droplet {
  position: absolute;
  bottom: -8px;
  left: 44px;
  width: 11px;
  height: 15px;
  background: #2E6B62;
  border-radius: 50%;
  transform: rotate(45deg);
}

.clamptag-ticks {
  position: absolute;
  bottom: 10px;
  right: 24px;
  display: flex;
  gap: 5px;
}

.clamptag-ticks i {
  display: block;
  width: 3px;
  height: 14px;
  background: #D9542E;
}

.clamptag-w1 { margin-left: 60px; width: 78%; }
.clamptag-w2 { margin-left: 110px; width: 68%; }
.clamptag-w3 { margin-left: 30px; width: 84%; }
.clamptag-w4 { margin-left: 140px; width: 64%; }
.clamptag-w5 { margin-left: 76px; width: 74%; }
.clamptag-w6 { margin-left: 20px; width: 80%; }

/* ============================================================
   ACCENT STRIP — slim CAST-DEEP band, editorial prose only
   ============================================================ */

.coolantstrip {
  background: #232826;
  border-top: 2px solid #2E6B62;
  border-bottom: 2px solid #2E6B62;
  padding: 22px 24px;
}

.coolantstrip-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.coolant-droplet {
  width: 16px;
  height: 22px;
  background: #2E6B62;
  border-radius: 50%;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.coolantstrip-text {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 15.5px;
  color: #EDEDE4;
  margin: 0;
}

/* ============================================================
   END-BRACKET FOOTER (.endbracket)
   Vertical spindle-bore arch on LEFT with change gears
   ============================================================ */

.endbracket {
  background: #232826;
  color: #EDEDE4;
  padding: 54px 0 0;
  border-top: 4px solid #C9A03B;
}

.endbracket-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.spindlebore {
  flex: 0 0 130px;
  position: relative;
  align-self: stretch;
  min-height: 220px;
}

.spindle-arch {
  position: absolute;
  left: 44px;
  top: 0;
  bottom: 0;
  width: 42px;
  border: 3px solid #C9A03B;
  border-radius: 21px 21px 0 0;
  border-bottom: none;
  background: #1A1E1C;
}

.spindle-arch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 0;
  width: 3px;
  background: #C9A03B;
  transform: translateX(-50%);
}

.changegear {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #2E6B62;
  background: #232826;
}

.changegear::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #2E6B62;
}

.gear-g1 { top: 46px; }
.gear-g2 { top: 110px; left: 8px; }
.gear-g3 { top: 174px; }

.endbracket-main {
  flex: 1 1 auto;
}

.endplaque {
  border: 1px solid #C9A03B;
  border-radius: 4px;
  padding: 12px 18px;
  display: inline-block;
  margin-bottom: 20px;
}

.endplaque-name {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #EDEDE4;
}

.endplaque-tag {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A03B;
}

.endblurb {
  max-width: 460px;
  color: #E9E6D8;
  font-size: 15px;
  margin: 0 0 26px;
}

.endcols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.endcol-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A03B;
  margin-bottom: 14px;
}

.handwheel-glyph {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #C9A03B;
  position: relative;
}

.handwheel-glyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 9px;
  background: #C9A03B;
  transform: translate(-50%, -50%);
}

.endcol-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.endcol-list li {
  margin-bottom: 9px;
}

.endcol-list a {
  color: #E9E6D8;
  text-decoration: none;
  font-size: 15px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.endcol-list a:hover {
  color: #C9A03B;
  text-decoration: underline;
}

.endstrip {
  background: #1A1E1C;
  border-top: 1px solid #2E6B62;
}

.endstrip-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 13px;
  color: #C9CBBE;
}

.endstrip-inner a {
  color: #C9A03B;
  text-decoration: none;
}

.endstrip-mini-chuck {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #C9A03B;
  vertical-align: middle;
  margin-right: 8px;
}

@media (max-width: 860px) {
  .endbracket-inner { flex-direction: column; gap: 24px; }
  .spindlebore { min-height: 120px; width: 130px; }
  .endcols { gap: 40px; }
}

/* ============================================================
   INNER PAGE BLOCKS (services / contact)
   ============================================================ */

.page-masthead {
  background: #232826;
  color: #EDEDE4;
  padding: 50px 0 46px;
  border-bottom: 4px solid #C9A03B;
}

.page-masthead-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-masthead-kicker {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #2E6B62;
  font-weight: 700;
  margin: 0 0 14px;
}

.page-masthead h1 {
  font-size: 40px;
  color: #EDEDE4;
  margin: 0 0 14px;
}

.page-masthead p {
  max-width: 720px;
  color: #E9E6D8;
  font-size: 17px;
  margin: 0;
}

.prose p {
  color: #262B28;
}

.service-detail {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.service-block {
  border-top: 2px solid #D2CDBA;
  padding: 36px 0 30px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.service-block:first-child { border-top: none; }

.service-num {
  flex: 0 0 74px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #C9A03B;
  line-height: 1;
}

.service-body h2 {
  font-size: 25px;
  margin: 0 0 10px;
}

.service-body p {
  color: #262B28;
  margin: 0 0 12px;
}

.process-steps {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.process-step {
  flex: 1 1 220px;
  background: #E9E6D8;
  border: 2px solid #232826;
  border-top: 6px solid #C9A03B;
  border-radius: 4px;
  padding: 20px 22px;
}

.process-step h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.process-step p {
  font-size: 15px;
  margin: 0;
  color: #262B28;
}

/* --- contact form --- */

.contact-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contact-aside {
  flex: 1 1 300px;
}

.contact-form-wrap {
  flex: 1 1 440px;
}

.contact-card {
  background: #E9E6D8;
  border: 2px solid #232826;
  border-radius: 6px;
  padding: 26px 28px;
  margin-bottom: 22px;
}

.contact-card h3 {
  font-size: 19px;
  margin: 0 0 12px;
}

.contact-card p {
  color: #262B28;
  font-size: 15.5px;
  margin: 0 0 8px;
}

.contact-card a {
  color: #A8862F;
}

.formfield {
  margin-bottom: 16px;
}

.formfield label {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #262B28;
  margin-bottom: 6px;
}

.formfield input,
.formfield textarea {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 15.5px;
  padding: 11px 13px;
  border: 2px solid #232826;
  border-radius: 4px;
  background: #EDEDE4;
  color: #262B28;
}

.formfield input:focus,
.formfield textarea:focus {
  outline: none;
  border-color: #C9A03B;
}

.formsubmit {
  background: #C9A03B;
  color: #232826;
  border: 2px solid #232826;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 30px;
  border-radius: 4px;
  cursor: pointer;
}

.formsubmit:hover { background: #D9542E; }

.formnote {
  font-size: 13.5px;
  color: #2E6B62;
  margin-top: 12px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
}

.faq-item {
  border-bottom: 2px solid #D2CDBA;
  padding: 18px 0;
}

.faq-q {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
  color: #262B28;
}

.faq-a {
  margin: 0;
  color: #262B28;
}

/* ============================================================
   SCROLL REVEAL — noscript-safe (default visible, JS adds .js-on)
   ============================================================ */

.reveal {
  transform: none;
}

.js-on .reveal {
  transform: translateY(18px);
}

.js-on .reveal.is-revealed {
  transform: none;
  transition: transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .js-on .reveal { transform: none; }
}

/* ============================================================
   CONTENT BLOCKS
   ============================================================ */

.textgrid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

.textgrid-col {
  flex: 1 1 320px;
}

.textgrid-col h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #262B28;
}

.textgrid-col p {
  color: #262B28;
}

.statline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.statline span {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2E6B62;
  border: 2px solid #2E6B62;
  border-radius: 999px;
  padding: 4px 14px;
}

.inline-service {
  font-weight: 700;
  color: #A8862F;
}