/* ==========================================================================
   INGRAM JUNIPER, LLC — rolling ladder library system
   Palette:
     paper-deck      #F1EFE7   body background (cool paper)
     ink-shelf       #292C28   primary text
     bookbind-chestnut #8A5A38 accent (bound ledger leather)
     deep-stack      #26221C   stacks band + footer
     cream-spine     #F9F5EA   raised panels, door faces
     track-nickel    #6A7276   rails, rollers, hairlines
     lantern-glow    #D29A48   TINY lamp dots inside stacks band only
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color: #F1EFE7;
  color: #292C28;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  line-height: 1.25;
  color: #26221C;
  letter-spacing: 0.01em;
}

p {
  margin-bottom: 1.05em;
}

a {
  color: #8A5A38;
  text-decoration: none;
}

a:hover {
  color: #26221C;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
}

/* ==========================================================================
   NAVIGATION — LADDER RAIL BAR
   ========================================================================== */

.trackrail {
  background-color: #292C28;
  position: relative;
  z-index: 40;
  border-bottom: 2px solid #8A5A38;
}

.trackrail-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
  position: relative;
}

.trackrail-rail {
  position: relative;
  height: 22px;
  border-top: 4px solid #6A7276;
}

.trackrail-wheel {
  position: absolute;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #6A7276;
  border: 3px solid #ECEAE2;
}

.trackrail-wheel.w1 { left: 12%; }
.trackrail-wheel.w2 { left: 32%; }
.trackrail-wheel.w3 { left: 52%; }
.trackrail-wheel.w4 { left: 72%; }
.trackrail-wheel.w5 { left: 90%; }

.trackrail-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}

.trackrail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #F9F5EA;
  border: 1px solid #8A5A38;
  border-bottom: none;
  padding: 12px 20px 14px;
  position: relative;
}

.trackrail-brand::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background-color: #C9C3B4;
}

.trackrail-name {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #26221C;
  text-transform: uppercase;
}

.trackrail-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A5A38;
  font-weight: 400;
}

.trackrail-glyph {
  width: 26px;
  height: 34px;
  position: relative;
}

.trackrail-glyph span { position: absolute; background-color: #8A5A38; }
.trackrail-glyph .gl-rail-l { left: 3px; top: 0; width: 3px; height: 34px; }
.trackrail-glyph .gl-rail-r { right: 3px; top: 0; width: 3px; height: 34px; }
.trackrail-glyph .gl-tread-1 { left: 3px; top: 7px; width: 20px; height: 2px; }
.trackrail-glyph .gl-tread-2 { left: 3px; top: 15px; width: 20px; height: 2px; }
.trackrail-glyph .gl-tread-3 { left: 3px; top: 23px; width: 20px; height: 2px; }

.trackrail-tabs {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  list-style: none;
  flex-wrap: wrap;
}

.trackrail-tab a {
  display: block;
  background-color: #F1EFE7;
  color: #26221C;
  border: 1px solid #6A7276;
  border-bottom: 2px solid #8A5A38;
  padding: 9px 16px 8px;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
}

.trackrail-tab a:hover {
  background-color: #8A5A38;
  color: #F9F5EA;
  text-decoration: none;
  border-color: #8A5A38;
}

.trackrail-tab.tab-lift a { margin-top: 0; }
.trackrail-tab.tab-drop a { margin-top: 14px; }
.trackrail-tab.tab-mid a { margin-top: 7px; }

.trackrail-burger {
  display: none;
  background-color: #8A5A38;
  color: #F9F5EA;
  border: 1px solid #F9F5EA;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
}

/* ==========================================================================
   HERO — HALF-OPEN DOOR
   ========================================================================== */

.slidingdoor {
  position: relative;
  background-color: #F1EFE7;
  padding: 62px 0 0;
  border-bottom: 1px solid #6A7276;
}

.slidingdoor-stage {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
}

.slidingdoor-track {
  position: relative;
  height: 16px;
  background-color: #26221C;
  border-top: 5px solid #6A7276;
  border-bottom: 3px solid #6A7276;
}

.slidingdoor-roller {
  position: absolute;
  top: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #F9F5EA;
  border: 3px solid #6A7276;
}

.slidingdoor-roller.r1 { left: 6%; }
.slidingdoor-roller.r2 { left: 30%; }
.slidingdoor-roller.r3 { left: 56%; }
.slidingdoor-roller.r4 { left: 80%; }

.slidingdoor-frame {
  position: relative;
  height: 560px;
  background-color: #26221C;
  border: 1px solid #6A7276;
  border-top: none;
  overflow: hidden;
}

.slidingdoor-alcove {
  position: absolute;
  inset: 0;
  padding: 34px 38px 34px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.slidingdoor-shelf {
  height: 108px;
  border-bottom: 5px solid #6A7276;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 0 14px 0 6px;
  background-color: #322D25;
}

.spine {
  display: block;
  background-color: #8A5A38;
  border-radius: 2px 2px 0 0;
}

.spine.s-ink { background-color: #4A443B; }
.spine.s-cream { background-color: #F9F5EA; }
.spine.s-chest { background-color: #8A5A38; }

.slidingdoor-door {
  position: absolute;
  top: 0;
  right: 0;
  width: 54%;
  height: 100%;
  background-color: #F9F5EA;
  border-left: 6px solid #8A5A38;
  box-shadow: -10px 0 26px #1C1914;
  padding: 48px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slidingdoor-door::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 26px;
  bottom: 26px;
  border: 1px solid #DDD6C6;
  pointer-events: none;
}

.slidingdoor-eyebrow {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6A7276;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.slidingdoor-headline {
  font-size: 2.85rem;
  line-height: 1.14;
  font-weight: 700;
  position: relative;
  z-index: 2;
  color: #26221C;
}

.slidingdoor-headline .hl-rail { display: block; }
.slidingdoor-headline .hl-assets { display: block; color: #8A5A38; }
.slidingdoor-headline .hl-renew { display: block; }

.slidingdoor-ladder {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  width: 92px;
  height: 150px;
}

.slidingdoor-ladder .lad-rail {
  position: absolute;
  width: 5px;
  height: 150px;
  background-color: #8A5A38;
}
.slidingdoor-ladder .lad-rail.lr-left { left: 6px; top: 0; }
.slidingdoor-ladder .lad-rail.lr-right { right: 6px; top: 0; }
.slidingdoor-ladder .lad-tread {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 4px;
  background-color: #8A5A38;
}
.slidingdoor-ladder .lad-t1 { top: 26px; }
.slidingdoor-ladder .lad-t2 { top: 56px; }
.slidingdoor-ladder .lad-t3 { top: 86px; }
.slidingdoor-ladder .lad-t4 { top: 116px; }
.slidingdoor-ladder .lad-hook {
  position: absolute;
  left: 0;
  top: -10px;
  width: 92px;
  height: 12px;
  background-color: #D29A48;
  border-radius: 3px;
}

.slidingdoor-base {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 26px 44px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: center;
  border-top: 4px solid #6A7276;
}

.slidingdoor-lede {
  font-size: 1.02rem;
  color: #292C28;
  max-width: 640px;
}

.slidingdoor-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plaque-solid {
  display: block;
  background-color: #8A5A38;
  color: #F9F5EA;
  border: 2px solid #26221C;
  padding: 15px 24px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
}

.plaque-solid:hover {
  background-color: #26221C;
  color: #F9F5EA;
  text-decoration: none;
}

.plaque-outline {
  display: block;
  background-color: #F9F5EA;
  color: #26221C;
  border: 2px solid #8A5A38;
  padding: 15px 24px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.plaque-outline:hover {
  background-color: #8A5A38;
  color: #F9F5EA;
  text-decoration: none;
}

.plaque-glyph {
  display: inline-block;
  width: 14px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -3px;
  background-color: #8A5A38;
  position: relative;
}

.plaque-glyph::before,
.plaque-glyph::after {
  content: "";
  position: absolute;
  left: 2px;
  width: 10px;
  height: 2px;
  background-color: #F9F5EA;
}
.plaque-glyph::before { top: 5px; }
.plaque-glyph::after { top: 9px; }

/* ==========================================================================
   SECTION INTRO
   ========================================================================== */

.sectionlead {
  padding: 62px 0 10px;
}

.sectionlead-kicker {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8A5A38;
  margin-bottom: 12px;
  font-weight: 700;
}

.sectionlead-title {
  font-size: 2.1rem;
  margin-bottom: 16px;
}

.sectionlead-body {
  max-width: 820px;
  color: #292C28;
}

/* ==========================================================================
   TRACK ALCOVES — service doors flush to one track
   ========================================================================== */

.alcotefield {
  position: relative;
  padding: 30px 0 0;
}

.alcotefield-wall {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
}

.alcove {
  position: relative;
  margin: 0 auto 26px;
  background-color: #2C2820;
  border: 1px solid #6A7276;
  border-left: 10px solid #8A5A38;
  padding: 30px 34px 30px 40px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 26px;
  align-items: start;
}

.alcove.w-a { width: 88%; }
.alcove.w-b { width: 80%; margin-left: 0; }
.alcove.w-c { width: 92%; margin-right: 0; margin-left: auto; }
.alcove.w-d { width: 84%; margin-left: 0; }
.alcove.w-e { width: 90%; margin-left: auto; margin-right: 0; }
.alcove.w-f { width: 86%; margin-left: 0; }

.alcove-lintel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-color: #8A5A38;
}

.alcove.a-lintel1 .alcove-lintel { height: 8px; }
.alcove.a-lintel2 .alcove-lintel { height: 12px; }
.alcove.a-lintel3 .alcove-lintel { height: 6px; }
.alcove.a-lintel4 .alcove-lintel { height: 14px; }
.alcove.a-lintel5 .alcove-lintel { height: 10px; }
.alcove.a-lintel6 .alcove-lintel { height: 16px; }

.alcove-atag {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8A5A38;
  border: 1px solid #8A5A38;
  padding: 2px 8px;
  background-color: #2C2820;
}

.alcove-door {
  background-color: #F9F5EA;
  border: 1px solid #C9C3B4;
  padding: 22px 20px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alcove-pull {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #8A5A38;
  background-color: #F1EFE7;
}

.alcove-body h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #F9F5EA;
}

.alcove-body p {
  color: #E7E2D5;
  font-size: 0.98rem;
  margin-bottom: 10px;
}

.alcove-body .alcove-link {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #D29A48;
}

.alcove-body .alcove-link:hover {
  color: #F9F5EA;
}

.alcove-glyph {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.glyph-tag {
  width: 34px;
  height: 44px;
  background-color: #F9F5EA;
  border: 2px solid #8A5A38;
  position: absolute;
  left: 10px;
  top: 5px;
}
.glyph-tag::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8A5A38;
}

.glyph-key {
  width: 40px;
  height: 40px;
  border: 4px solid #8A5A38;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
}
.glyph-key::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -2px;
  width: 22px;
  height: 5px;
  background-color: #8A5A38;
}

.glyph-gauge {
  width: 44px;
  height: 44px;
  border: 3px solid #8A5A38;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 8px;
}
.glyph-gauge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 20px;
  background-color: #8A5A38;
  transform-origin: bottom center;
  transform: rotate(38deg);
}

.glyph-arc {
  position: absolute;
  left: 6px;
  bottom: 8px;
  width: 42px;
  height: 42px;
  border: 3px solid #8A5A38;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.glyph-arc::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8A5A38;
}
.glyph-arc::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8A5A38;
}

.glyph-stamp {
  width: 42px;
  height: 30px;
  background-color: #8A5A38;
  position: absolute;
  left: 6px;
  top: 14px;
  border-radius: 3px;
}
.glyph-stamp::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 9px;
  width: 24px;
  height: 12px;
  background-color: #8A5A38;
  border-radius: 6px 6px 0 0;
}

.glyph-seal {
  width: 44px;
  height: 44px;
  border: 3px solid #8A5A38;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: #F9F5EA;
}
.glyph-seal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -11px 0 0 -3px;
  width: 6px;
  height: 22px;
  background-color: #8A5A38;
  border-radius: 3px;
}

.alcotefield-track {
  height: 10px;
  background-color: #6A7276;
  margin-top: 6px;
}

/* ==========================================================================
   ROCK-SLAB TALLY STRIP
   ========================================================================== */

.tallystrip {
  background-color: #26221C;
  padding: 26px 0;
}

.tallystrip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}

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

.tallyslab {
  background-color: #3A362D;
  border: 1px solid #6A7276;
  border-bottom: 4px solid #8A5A38;
  padding: 10px 12px 12px;
  display: flex;
  gap: 3px;
  align-items: flex-end;
  min-height: 46px;
}

.tallyslab .stroke {
  display: block;
  width: 3px;
  background-color: #8A5A38;
}

.slab-s1 .stroke { height: 20px; }
.slab-s2 .stroke { height: 26px; }
.slab-s3 .stroke { height: 16px; }
.slab-s4 .stroke { height: 30px; }
.slab-s5 .stroke { height: 22px; }

.tallystrip-text {
  color: #F9F5EA;
  font-size: 1rem;
  max-width: 720px;
  margin: 0;
}

/* ==========================================================================
   FOOTER — ROLLER TRACK BASE
   ========================================================================== */

.rollertrack {
  background-color: #26221C;
  padding-top: 0;
}

.rollertrack-rail {
  position: relative;
  height: 18px;
  background-color: #6A7276;
  border-top: 6px solid #1C1914;
}

.rollertrack-roller {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #F9F5EA;
  border: 3px solid #26221C;
}

.rollertrack-roller.pr1 { left: 18%; }
.rollertrack-roller.pr2 { left: 50%; }
.rollertrack-roller.pr3 { left: 82%; }

.rollertrack-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 26px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  justify-content: space-between;
}

.bookplate {
  background-color: #F9F5EA;
  border: 2px solid #8A5A38;
  padding: 18px 22px;
  max-width: 430px;
}

.bookplate-name {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #26221C;
  margin-bottom: 8px;
  display: block;
}

.bookplate-blurb {
  color: #292C28;
  font-size: 0.92rem;
  margin: 0;
}

.rollertrack-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  align-items: center;
}

.rollertrack-chip a {
  display: inline-block;
  background-color: #3A362D;
  color: #F9F5EA;
  border: 1px solid #6A7276;
  padding: 9px 15px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.rollertrack-chip a:hover {
  background-color: #8A5A38;
  color: #F9F5EA;
  text-decoration: none;
}

.rollertrack-plinth {
  background-color: #1C1914;
  border-top: 1px solid #3A362D;
}

.rollertrack-plinth-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
}

.rollertrack-plinth p,
.rollertrack-plinth a {
  color: #E7E2D5;
  font-size: 0.82rem;
  margin: 0;
  font-family: Verdana, Geneva, sans-serif;
}

.rollertrack-plinth a:hover { color: #D29A48; }

.plinth-ladder {
  display: inline-block;
  width: 11px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  position: relative;
  border-left: 2px solid #8A5A38;
  border-right: 2px solid #8A5A38;
}

.plinth-ladder::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background-color: #8A5A38;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */

.reveal-here {
  transition: transform 600ms ease;
}

.reveal-here.is-idle {
  transform: translateY(22px);
}

.reveal-here.is-shown {
  transform: translateY(0);
}

.no-js .reveal-here {
  transform: none;
}

/* ==========================================================================
   CONTENT BLOCKS (homepage copy, services, contact)
   ========================================================================== */

.readingbody {
  padding: 54px 0 30px;
}

.readingbody-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.readingbody h2 {
  font-size: 1.85rem;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid #8A5A38;
}

.readingbody h3 {
  font-size: 1.22rem;
  margin: 24px 0 10px;
  color: #8A5A38;
}

.readingbody p { color: #292C28; }

.sidepanel {
  background-color: #F9F5EA;
  border: 1px solid #C9C3B4;
  border-top: 5px solid #8A5A38;
  padding: 24px 26px;
}

.sidepanel-title {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6A7276;
  font-weight: 700;
  margin-bottom: 14px;
}

.sidepanel ul { list-style: none; }

.sidepanel li {
  border-bottom: 1px solid #DDD6C6;
  padding: 11px 0;
  font-size: 0.94rem;
}

.sidepanel li:last-child { border-bottom: none; }

.sidepanel a { font-weight: 700; }

/* Accordion */

.accordion {
  border: 1px solid #C9C3B4;
  background-color: #F9F5EA;
}

.accordion-item + .accordion-item { border-top: 1px solid #C9C3B4; }

.accordion-head {
  width: 100%;
  text-align: left;
  background-color: #F9F5EA;
  border: none;
  border-left: 6px solid #8A5A38;
  padding: 16px 20px;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #26221C;
  cursor: pointer;
}

.accordion-head:hover { background-color: #EFEADD; }

.accordion-head .acc-sign {
  float: right;
  color: #8A5A38;
  font-family: Verdana, Geneva, sans-serif;
}

.accordion-body {
  padding: 0 20px 16px 26px;
  color: #292C28;
  display: none;
}

.accordion-item.open .accordion-body { display: block; }

/* Counters */

.counterrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.countercell {
  flex: 1 1 150px;
  background-color: #F9F5EA;
  border: 1px solid #C9C3B4;
  border-bottom: 4px solid #8A5A38;
  padding: 16px 18px;
  text-align: center;
}

.countercell .cnum {
  display: block;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #8A5A38;
}

.countercell .clabel {
  display: block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #292C28;
  margin-top: 4px;
}

/* ==========================================================================
   PROCESS & CTA (services)
   ========================================================================== */

.processfield {
  padding: 54px 0 20px;
}

.processfield-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
}

.processrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid #C9C3B4;
  background-color: #F9F5EA;
}

.processstep {
  padding: 22px 22px 24px;
  border-right: 1px solid #DDD6C6;
  border-top: 5px solid #8A5A38;
}

.processstep:last-child { border-right: none; }

.processstep .pnum {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #6A7276;
  display: block;
  margin-bottom: 8px;
}

.processstep h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.processstep p { font-size: 0.92rem; margin: 0; }

.ctaband {
  margin-top: 44px;
  background-color: #26221C;
  border-left: 10px solid #8A5A38;
  padding: 30px 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
}

.ctaband p {
  color: #F9F5EA;
  margin: 0;
  max-width: 660px;
  font-size: 1.02rem;
}

.ctaband .plaque-solid {
  border-color: #F9F5EA;
  min-width: 230px;
}

/* ==========================================================================
   SERVICES DETAIL PAGE
   ========================================================================== */

.servicedeck {
  padding: 50px 0 24px;
}

.servicedeck-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
}

.servicerow {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border: 1px solid #C9C3B4;
  background-color: #F9F5EA;
  margin-bottom: 22px;
}

.servicerow-plate {
  background-color: #292C28;
  border-right: 6px solid #8A5A38;
  padding: 24px 22px;
}

.servicerow-plate .srv-index {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D29A48;
  display: block;
  margin-bottom: 10px;
}

.servicerow-plate h3 {
  color: #F9F5EA;
  font-size: 1.24rem;
}

.servicerow-body {
  padding: 24px 28px;
}

.servicerow-body p { color: #292C28; margin-bottom: 12px; }
.servicerow-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contactgrid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px 20px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: start;
}

.contactform {
  background-color: #F9F5EA;
  border: 1px solid #C9C3B4;
  border-top: 6px solid #8A5A38;
  padding: 28px 30px;
}

.contactform label {
  display: block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #292C28;
  margin-bottom: 6px;
}

.contactform input,
.contactform textarea {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 0.98rem;
  color: #26221C;
  background-color: #FFFFFF;
  border: 1px solid #6A7276;
  padding: 11px 13px;
  margin-bottom: 16px;
}

.contactform input:focus,
.contactform textarea:focus {
  outline: 3px solid #D29A48;
  border-color: #8A5A38;
}

.contactform textarea { resize: vertical; min-height: 130px; }

.contactform button {
  background-color: #8A5A38;
  color: #F9F5EA;
  border: 2px solid #26221C;
  padding: 14px 26px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.contactform button:hover { background-color: #26221C; }

.formnote {
  font-size: 0.82rem;
  color: #6A7276;
  margin-top: 12px;
}

.contactaside {
  background-color: #26221C;
  border-left: 10px solid #8A5A38;
  padding: 26px 28px;
}

.contactaside h3 {
  color: #F9F5EA;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.contactaside p,
.contactaside a {
  color: #E7E2D5;
  font-size: 0.94rem;
}

.contactaside a:hover { color: #D29A48; }

.contactaside .block { margin-bottom: 22px; }

.contactaside .minihead {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D29A48;
  display: block;
  margin-bottom: 6px;
}

.faqfield {
  padding: 40px 0 30px;
}

.faqfield-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 26px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .slidingdoor-frame { height: 640px; }
  .slidingdoor-door { width: 66%; padding: 34px 30px; }
  .slidingdoor-headline { font-size: 2.1rem; }
  .slidingdoor-base { grid-template-columns: 1fr; }
  .readingbody-grid { grid-template-columns: 1fr; }
  .servicerow { grid-template-columns: 1fr; }
  .servicerow-plate { border-right: none; border-bottom: 6px solid #8A5A38; }
  .contactgrid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .trackrail-burger { display: inline-block; }
  .trackrail-tabs {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
  }
  .trackrail-tabs.open { display: flex; }
  .trackrail-tab.tab-lift a,
  .trackrail-tab.tab-drop a,
  .trackrail-tab.tab-mid a { margin-top: 0; }
  .trackrail-tab a { border-left: 5px solid #8A5A38; }
  .slidingdoor-frame { height: 720px; }
  .slidingdoor-door { width: 82%; padding: 30px 24px; }
  .slidingdoor-headline { font-size: 1.7rem; }
  .alcove { width: 100% !important; grid-template-columns: 1fr; }
  .alcove-door { flex-direction: row; min-height: 0; justify-content: flex-start; }
  .tallystrip-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ctaband { flex-direction: column; align-items: flex-start; }
}