/* AudsMedia LLC - Broadcast Scheduling Office at Night
   Palette drawn from a voice booth and a mixing desk.
   SESSION BOOTH wall #201A17
   SCRIPT CREAM text #F0E8DA
   APRICOT DUNE accent #D49A6A
   MIXER FUME secondary #4A4038
   BOOTH PANEL cards #2B2420
   REEL AMBER small accents #8A5A34
   NIGHT PAD footer band #171310
*/

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #201A17;
  color: #F0E8DA;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

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

a {
  color: #D49A6A;
  text-decoration: none;
}

a:hover {
  color: #F0E8DA;
}

p {
  margin: 0 0 1.1em 0;
  color: #EFE3CE;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 0.6em 0;
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top-level bands sectioned by class ---------- */
.page-body {
  padding-bottom: 0;
}

/* Scroll-reveal movement. Text stays fully opaque at all times so that
   contrast is never lost. When JS is present (.js on the html element) the
   reveal cards sit a few pixels low until main.js adds .visible, which
   slides them home with a gentle transform. Without JS nothing moves and
   the content is fully visible as fallback. */
html.js .reveal {
  transition: transform 0.65s ease;
}

html.js .reveal:not(.visible) {
  transform: translateY(12px);
}

/* ================= FADER RAIL NAV ================= */
.faderrail {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #201A17;
  border-bottom: 1px solid #4A4038;
  box-shadow: 0 2px 0 #171310;
}

.faderrail .railbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
}

.faderrail .brandcell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.faderrail .brandplate {
  background-color: #D49A6A;
  color: #171310;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  font-weight: 900;
  padding: 8px 15px;
  border-radius: 6px 6px 2px 2px;
  box-shadow: 0 2px 0 #4A4038;
}

.onairglyph {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.onairlamp {
  width: 26px;
  height: 10px;
  background-color: #D49A6A;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #F0E8DA, 0 0 0 4px #2B2420;
}

.onairlabel {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.22em;
  color: #D49A6A;
  font-weight: 700;
}

.faderrail .channeltrack {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-right: auto;
  margin-left: 18px;
  padding-bottom: 6px;
}

.faderrail .chan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 5px;
  min-width: 86px;
  text-align: center;
}

.faderrail .chan a {
  display: block;
  background-color: #2B2420;
  color: #F0E8DA;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  border-top: 3px solid #D49A6A;
  padding: 7px 6px 9px 6px;
  border-radius: 0 0 3px 3px;
}

.faderrail .chan.tall a { border-top-width: 6px; }
.faderrail .chan.short a { border-top-width: 2px; }
.faderrail .chan a:hover { background-color: #D49A6A; color: #171310; }

.faderrail .bookcell {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.faderrail .bookbtn {
  background-color: #D49A6A;
  color: #171310;
  font-family: "Arial", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 11px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.faderrail .bookbtn:hover { background-color: #F0E8DA; color: #171310; }

/* mobile toggle */
.rail-toggle {
  display: none;
  background: none;
  border: 1px solid #D49A6A;
  color: #D49A6A;
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* fader track groove line at bar bottom */
.fadergroove {
  height: 9px;
  background-color: #171310;
  border-top: 1px solid #4A4038;
  overflow: hidden;
}

.fadergroove .knob {
  width: 34px;
  height: 9px;
  background-color: #D49A6A;
  border-radius: 0 0 3px 3px;
  margin-left: 62%;
}

/* mobile drawer */
.rail-drawer {
  display: none;
  background-color: #171310;
  border-top: 1px solid #4A4038;
  padding: 12px 20px 18px 20px;
}

.rail-drawer a {
  display: block;
  color: #F0E8DA;
  font-family: Arial, sans-serif;
  font-weight: 600;
  padding: 9px 0;
  border-bottom: 1px solid #2B2420;
}

.rail-drawer a:last-child { border-bottom: none; }
.rail-drawer.open { display: block; }

/* ================= MIX DESK HERO ================= */
.mixdesk {
  overflow: hidden;
}

.consolewall {
  background-color: #201A17;
  background-image:
    radial-gradient(circle at 18% 30%, #2B2420 0, #2B2420 1px, transparent 1px);
  background-size: 60px 60px;
  border-bottom: 2px solid #4A4038;
  padding: 46px 0 40px 0;
}

.consolegrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: start;
}

.deckstack { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 18px; }
.reeldeck {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: #171310;
  border: 4px solid #4A4038;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}
.reeldeck .hub {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #8A5A34;
  border: 3px solid #2B2420;
}
.reeldeck .tick { position: absolute; width: 2px; height: 6px; background-color: #8A5A34; }
.reeldeck .tick.t1 { top: 4px; left: 34px; }
.reeldeck .tick.t2 { bottom: 4px; left: 34px; }
.reeldeck .tick.t3 { left: 4px; top: 34px; }
.reeldeck .tick.t4 { right: 4px; top: 34px; }

.faderbank {
  grid-column: 3 / span 6;
  background-color: #2B2420;
  border: 1px solid #4A4038;
  border-radius: 4px;
  padding: 14px 16px 6px 16px;
}

.faderlabel {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #D49A6A;
  text-align: center;
  margin-bottom: 8px;
}

.fabs-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fabs-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fabtrack {
  flex: 1 1 40px;
  height: 46px;
  background-color: #4A4038;
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.fabtrack .railgroove { width: 100%; height: 6px; background-color: #171310; margin-bottom: 6px; }

.fabtrack .faderthumb {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 7px;
  height: 30px;
  transform: translateX(-50%);
  background-color: #D49A6A;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #171310;
}

.fabtrack.pos-1 .faderthumb { top: 6px; }
.fabtrack.pos-2 .faderthumb { top: 16px; }
.fabtrack.pos-3 .faderthumb { top: 4px; }
.fabtrack.pos-4 .faderthumb { top: 22px; }

.onairblock {
  grid-column: 9 / span 2;
  align-self: center;
  background-color: #D49A6A;
  color: #171310;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  padding: 14px 6px;
  border-radius: 5px;
}

.wallclock {
  grid-column: 11 / span 2;
  align-self: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #F0E8DA;
  border: 6px solid #2B2420;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallclock .clockhand.h1 { position: absolute; width: 4px; height: 22px; background: #171310; top: 12px; left: 35px; transform-origin: bottom center; }
.wallclock .clockhand.m1 { position: absolute; width: 3px; height: 30px; background: #8A5A34; top: 8px; left: 36px; transform-origin: bottom center; transform: rotate(32deg); }
.wallclock .dot { width: 8px; height: 8px; background: #D49A6A; border-radius: 50%; }

.producerchair {
  background-color: #2B2420;
  border-top: 2px solid #4A4038;
  border-bottom: 1px solid #171310;
  padding: 46px 0 52px 0;
  position: relative;
}

.producergrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.h1block .eyebrow {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  color: #D49A6A;
  margin-bottom: 12px;
}

.h1block h1 {
  font-size: 2.7rem;
  font-weight: 800;
  color: #F0E8DA;
  margin: 0 0 6px 0;
}

.h1block .lede {
  max-width: 56ch;
  color: #EFE3CE;
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 16px 0 0 0;
}

.sessionstamp {
  display: inline-block;
  background-color: #D49A6A;
  color: #171310;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  padding: 7px 10px;
  border-radius: 3px;
  transform: rotate(-2deg);
  margin-top: 8px;
}

.ctawrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.btn-primary {
  display: inline-block;
  background-color: #D49A6A;
  color: #171310;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 22px;
  border-radius: 4px;
  border: 2px solid #D49A6A;
}

.btn-primary:hover { background-color: #F0E8DA; border-color: #F0E8DA; color: #171310; }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: #F0E8DA;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 11px 20px;
  border-radius: 4px;
  border: 2px solid #F0E8DA;
}

.btn-outline:hover { border-color: #D49A6A; color: #F0E8DA; }

/* chair decoration: coffee ring + pencil */
.chairdecor {
  position: relative;
}

.coffeering {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 7px solid #8A5A34;
  transform: rotate(-8deg);
}

.coffeering .inner { width: 150px; height: 150px; border: 2px solid #201A17; border-radius: 50%; margin: 22px auto; }

.pencilcross {
  width: 190px;
  height: 10px;
  transform: rotate(-14deg);
  background-image: linear-gradient(90deg, #F0E8DA 0, #F0E8DA 62%, #8A5A34 62%, #8A5A34 100%);
  display: none;
}

/* ---------- section headings common ---------- */
.kicker {
  display: inline-block;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.28em;
  font-size: 0.76rem;
  color: #D49A6A;
  margin-bottom: 8px;
}

.sectionhead h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #F0E8DA;
  margin: 0;
}

.sectionhead .sub {
  color: #EFE3CE;
  max-width: 64ch;
  margin-top: 10px;
}

/* ===== NIGHT DESK NARRATIVE BAND ===== */
.stationnotes {
  background-color: #2B2420;
  border-top: 2px solid #4A4038;
  padding: 52px 0 46px 0;
  position: relative;
}

.stationnotes .note-span {
  max-width: 900px;
  position: relative;
  z-index: 1;
}

.stationnotes .eyebrow { color: #D49A6A; }
.stationnotes h2 { color: #F0E8DA; font-size: 1.9rem; margin-bottom: 16px; }
.stationnotes p { color: #EADCC6; }
.stationnotes p:first-of-type { font-size: 1.08rem; }

/* ================= SCHEDULING MATRIX ================= */
.schedmatrix {
  background-color: #201A17;
  padding: 64px 0 10px 0;
}

.schedmatrix .matrixband {
  margin-top: 30px;
  background-color: #171310;
  padding: 3px;
  border: 2px solid #4A4038;
  border-radius: 6px;
}

.gridframe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background-color: #4A4038;
  border: 2px solid #4A4038;
}

.tile {
  background-color: #2B2420;
  padding: 26px 26px 22px 26px;
  position: relative;
}

.tile.wide { grid-column: span 3; }
.tile.full { grid-column: span 2 / span 2; }

.tile .idx {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #D49A6A;
}

.tile h3 {
  font-size: 1.28rem;
  color: #F0E8DA;
  margin: 0 0 10px 0;
  padding-right: 46px;
}

.tile p {
  color: #EADCC6;
  font-size: 0.98rem;
  margin: 0 0 16px 0;
}

.tile .details {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.tile.wide .detailslink-pad { padding-top: 4px; }

/* ================= LANDING: sidebar counters band (session counts) =================
   NOTE: full layout of this band folds into the pages structure */
.counterband {
  background-color: #171310;
  border-top: 2px solid #4A4038;
  padding: 26px 0;
  position: relative;
  z-index: 1;
}

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

.countercell { display: flex; flex-direction: column; position: relative; z-index: 1; }

.countercell .cnum {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #D49A6A;
  line-height: 1;
}

.countercell .clabel {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #EFE3CE;
  margin-top: 6px;
}

/* ================= SESSION SWIMLANES ================= */
.swimlanes .sweepband {
  margin-top: 30px;
  background-color: #171310;
  border-top: 2px solid #8A5A34;
  border-bottom: 2px solid #8A5A34;
  border-radius: 4px;
  padding: 26px 22px;
}

.laneshead {
  display: flex;
  gap: 30px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.laneshead .lname { font-family: "Arial Narrow", Arial, sans-serif; font-weight: 800; letter-spacing: 0.16em; font-size: 0.82rem; }

.laneshead .l-client { color: #F0E8DA; }
.laneshead .l-desk { color: #D49A6A; }
.laneshead .l-delivery { color: #8A5A34; }

.laneboard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lane {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.lane .lanetag {
  flex: 0 0 190px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  padding: 8px 0 8px 16px;
  border-left: 4px solid #D49A6A;
}

.lane .readytag {
  color: #F0E8DA;
  border-left-color: #2B2420;
}

.lane.lane-desk .lanetag { color: #D49A6A; }
.lane.lane-client .lanetag { color: #F0E8DA; }
.lane.lane-deliver .lanetag { color: #8A5A34; }

.lanecard {
  background: #2B2420;
  padding: 12px 16px 12px 18px;
  width: 186px;
  border-top: 3px solid #D49A6A;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 0 0 1px #4A4038;
  flex: 0 0 auto;
}

.lanecard .stepname { font-family: Arial, sans-serif; font-weight: 800; color: #F0E8DA; font-size: 0.92rem; margin-bottom: 4px; }

.lanecard .stepcap { font-size: 0.84rem; color: #EADCC6; margin: 0; line-height: 1.5; }

.lanecard.on-deliver { border-left: 4px solid #8A5A34; }
.lanecard.on-client { border-left: 4px solid #F0E8DA; }

.swimarria { display: flex; align-items: center; margin-top: 6px; }
.arrowseg { color: #8A5A34; font-size: 1.3rem; font-family: Arial, sans-serif; font-weight: 900; line-height: 1; }

.note-nohl-perf {
  color: #EFE3CE;
  width: 860px;
  max-width: 100%;
  border-bottom: 1px dashed #4A4038;
  margin: 2px 0 0 190px;
  font-size: 0.9rem;
  padding-bottom: 4px;
}

.swimsummary {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.swimsummary p { color: #EFE3CE; max-width: 60ch; margin: 0; }
.swimsummary .swimcta { font-family: Arial, sans-serif; font-weight: 700; color: #D49A6A; }

/* ================= ACCENT STRIP (booking band) ================= */
.bookband {
  margin-top: 60px;
}

.bookband .bandtwo {
  display: grid;
  grid-template-columns: 3fr 2fr;
}

.band-left {
  background-color: #D49A6A;
  color: #171310;
  padding: 40px 34px;
}

.band-left h2 { color: #171310; margin: 0 0 8px 0; font-size: 1.7rem; }
.band-left p { color: #171310; max-width: 52ch; margin: 0 0 20px 0; }
.band-left p b { color: #201A17; }

.btn-darkband {
  display: inline-block;
  background-color: #171310;
  color: #F0E8DA;
  font-family: Arial, sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 4px;
  border: 2px solid #171310;
}
.btn-darkband:hover { background-color: #201A17; border-color: #201A17; color: #D49A6A; }

.band-right {
  background-color: #4A4038;
  color: #F0E8DA;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.band-right h3 { margin: 0 0 6px 0; font-family: "Arial Narrow", Arial, sans-serif; letter-spacing: 0.2em; font-size: 0.95rem; color: #D49A6A; }
.band-right .factline { font-family: Arial, sans-serif; font-size: 0.98rem; color: #F0E8DA; }
.band-right .factline a { color: #F0E8DA; font-weight: 600; }
.band-right .factline a:hover { color: #D49A6A; }
.band-right .factline .fkey { color: #EADCC6; }

/* ================= PROCESS (secondary pages internal) ================= */
.pageintro {
  background-color: #2B2420;
  border-top: 2px solid #8A5A34;
  border-bottom: 2px solid #171310;
  padding: 56px 0 46px 0;
}

.pageintro .garden-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
}

.pie-idx { font-family: "Arial Black", Arial, sans-serif; color: #D49A6A; font-size: 0.9rem; }

.procesgrid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid #4A4038;
  background-color: #4A4038;
  gap: 2px;
}

.procstep { background-color: #2B2420; padding: 24px; }
.procstep .pn { color: #D49A6A; font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: 0.78rem; letter-spacing: 0.14em; }
.procstep h3 { font-size: 1.15rem; color: #F0E8DA; margin: 8px 0 10px 0; }
.procstep p { color: #EADCC6; font-size: 0.94rem; margin: 0; }

/* services detail body inside homepage-style frame */
.servicebody {
  background-color: #201A17;
  margin-top: 30px;
}

.chapo {
  color: #F0E8DA;
  font-size: 1.08rem;
}

.ser-entry {
  border-top: 1px solid #4A4038;
  padding: 30px 0 6px 0;
}

.ser-entry h3 { font-family: "Arial Narrow", Arial, sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: 0.03em; color: #F0E8DA; margin: 0 0 10px 0; }
.ser-entry h3 span { color: #D49A6A; }
.ser-entry p { color: #EADCC6; font-size: 1rem; }
.ser-entry ul { color: #EADCC6; margin: 0 0 1.2em 0; padding-left: 22px; }
.ser-entry li { margin-bottom: 8px; }

/* ================= CONTACT PAGE ================= */
.contactbody { background-color: #201A17; padding-top: 60px; }

.contactgrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contactcard {
  background-color: #2B2420;
  border: 1px solid #4A4038;
  border-radius: 6px;
  padding: 26px;
  position: relative;
  z-index: 1;
}

.contactform .frow { margin-bottom: 16px; }
.contactform label { display: block; font-family: Arial, sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: #EFE3CE; margin-bottom: 6px; }
.contactform input, .contactform textarea { width: 100%; background-color: #171310; color: #F0E8DA; border: 1px solid #4A4038; border-radius: 4px; padding: 12px 13px; font-family: Arial, sans-serif; font-size: 1rem; }
.contactform textarea { resize: vertical; min-height: 130px; }
.contactform input:focus, .contactform textarea:focus { outline: none; border-color: #D49A6A; }

.formnote { font-size: 0.86rem; color: #EADCC6; margin-top: 10px; }

.factsgroup { display: flex; flex-direction: column; gap: 16px; }
.factcard { background-color: #2B2420; border-left: 4px solid #D49A6A; padding: 15px 18px; position: relative; z-index: 1; }
.factcard .fk { color: #D49A6A; font-family: "Arial Narrow", Arial, sans-serif; font-weight: 800; letter-spacing: 0.14em; font-size: 0.72rem; margin-bottom: 3px; }
.factcard .fv { color: #F0E8DA; font-family: Arial, sans-serif; font-size: 0.98rem; }
.factcard .fv a { color: #F0E8DA; }
.factcard .fv a:hover { color: #D49A6A; }

.faqwrap { margin-top: 56px; }
.faqwrap .sectionhead { margin-bottom: 24px; }
.accordion { background-color: #171310; border: 1px solid #4A4038; border-radius: 5px; margin-bottom: 12px; overflow: hidden; }
.accordion .acc-q { margin: 0; width: 100%; background: none; border: none; text-align: left; color: #F0E8DA; font-family: Arial, sans-serif; font-weight: 700; font-size: 1rem; padding: 17px 20px; cursor: pointer; position: relative; padding-right: 44px; }
.accordion .acc-q::after { content: ""; }
.accordion .acc-a { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.accordion .acc-a p { color: #EADCC6; margin: 0; }
.accordion.open .acc-a { max-height: 400px; padding: 3px 20px 18px 20px; }
.accordion .acc-q .arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #D49A6A; font-weight: 900; }

/* FAQ on legal-reuse no-quote care: FAQ headings avoid apostrophes in html */

/* ================= INDEX CARD FOOTER ================= */
.indexcards {
  background-color: #171310;
  border-top: 3px solid #D49A6A;
  padding: 46px 0 20px 0;
  position: relative;
  margin-top: 60px;
}

.indexcards .cardstack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.idxcard {
  background-color: #F0E8DA;
  color: #171310;
  border-radius: 8px;
  padding: 30px 30px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 22px #201A17;
}

.idxcard.tilt-r { transform: rotate(-1deg); }
.idxcard.tilt-l { transform: rotate(1deg); }

.idxcard .cc-brand { font-family: "Courier New", monospace; font-weight: 800; color: #171310; font-size: 1.2rem; letter-spacing: 0.03em; margin-bottom: 8px; border-bottom: 2px dashed #C9A65A; padding-bottom: 8px; }
.idxcard .contactmail { font-family: "Courier New", monospace; color: #171310; font-size: 0.96rem; line-height: 1.8; }
.idxcard .contactmail div { margin-bottom: 4px; }
.idxcard .contactmail .addr { color: #3A2E22; }
.idxcard .contactmail strong { color: #171310; }

.idxcard.dark { background-color: #2B2420; color: #F0E8DA; }
.idxcard.dark .cc-brand { color: #F0E8DA; border-bottom-color: #8A5A34; }

.navcardgroups { display: flex; flex-direction: row; justify-content: space-between; gap: 20px; }

.navgroup { flex: 1 1 auto; min-width: 0; }
.navgroup h4 { font-family: "Arial Narrow", Arial, sans-serif; letter-spacing: 0.14em; font-size: 0.76rem; color: #D49A6A; margin: 0 0 8px 0; }
.navgroup a { display: block; color: #F0E8DA; font-family: Arial, sans-serif; font-size: 0.9rem; margin-bottom: 7px; }
.navgroup a:hover { color: #D49A6A; }
.navgroup .ltxt { color: #EADCC6; font-family: Arial, sans-serif; font-size: 0.86rem; line-height: 1.6; }

.mailingbtnline { margin-top: 16px; }

.copyrightline {
  margin-top: 28px;
  color: #D49A6A;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
}
.copyrightline a { color: #D49A6A; }
.copyrightline a:hover { color: #F0E8DA; }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
  .channeltrack { display: none !important; }
  .faderrail .bookcell { display: none; }
  .rail-toggle { display: block; }
  .bookcell-toggleplus { display: inline-flex; align-items: center; }

  .gridframe { grid-template-columns: 1fr 1fr; }
  .tile.wide { grid-column: span 2; }
  .lane .lanetag { flex: 0 0 150px; }
  .lanecard { width: 100%; flex: 1 1 100%; }
  .lane { flex-direction: column; align-items: stretch; }
  .swimarria { display: none; }
  .producergrid { grid-template-columns: 1fr; }
  .chairdecor { display: none; }
  .consolegrid { grid-template-columns: repeat(4, 1fr); }
  .deckstack { display: none; }
  .onairblock { grid-column: span 2; }
  .faderbank { grid-column: span 4; }
  .wallclock { grid-column: span 2; }
  .bandtwo { grid-template-columns: 1fr; }
  .contactgrid { grid-template-columns: 1fr; }
  .indexcards .cardstack { grid-template-columns: 1fr; }
  .procesgrid { grid-template-columns: 1fr 1fr; }
  .countergrid { grid-template-columns: 1fr 1fr 1fr; }
  .cardrack-top { grid-template-columns: 1fr; }
  .navcardgroups { flex-direction: column; }
  .pageintro .garden-head { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .gridframe { grid-template-columns: 1fr; }
  .tile.wide { grid-column: span 1; }
  .countergrid { grid-template-columns: 1fr; }
  .procesgrid { grid-template-columns: 1fr; }
  .h1block h1 { font-size: 1.9rem; }
  .facelist .face-cell { flex: 1 1 100%; }
}