/* ============================================================
   LIXIXO LP — candyclouds.autos
   PINATA FRINGE motif. LIGHT icing-cream theme.
   Palette:
     icing-cream   #FAF3E7  body background
     cocoa-ink     #3B2620  primary text
     cherry-cup    #C4384F  accent
     taffy-band    #F7D9C4  raised faces
     frost-deep    #7C2B3A  deeper panels
     sherbet-lily  #E9A16C  sparing tertiary
     wrap-edge     #E8D6BC  thin separators
     suds-pale     #FBEEDF  soft band variant
   No rgba, no opacity, no gradients on text.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  line-height: 1.2;
  color: #3B2620;
}

p {
  margin-bottom: 1em;
}

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

a:hover {
  text-decoration: underline;
}

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

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */
.reveal-item {
  transition: transform 700ms ease, opacity 700ms ease;
}

.reveal-item.is-waiting {
  opacity: 0;
  transform: translateY(28px);
}

.reveal-item.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   NAVIGATION — FRINGE VALANCE
   ------------------------------------------------------------ */
.valance {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: #C4384F;
  border-bottom: 4px solid #7C2B3A;
}

.valance-band {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.valance-fold {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 8px 16px 14px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background-color: #C4384F;
  color: #FAF3E7;
  border-right: 2px solid #7C2B3A;
}

.valance-fold::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12px;
  background-color: #FAF3E7;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.valance-fold.alt-a {
  background-color: #F7D9C4;
  color: #3B2620;
}

.valance-fold.alt-a::after {
  background-color: #FAF3E7;
}

.valance-fold.alt-b {
  background-color: #C4384F;
  color: #FAF3E7;
}

.valance-fold.alt-b::after {
  background-color: #FAF3E7;
}

.valance-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 16px 4px;
  background-color: #7C2B3A;
  color: #FAF3E7;
  position: relative;
}

.valance-brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12px;
  background-color: #FAF3E7;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.bowknot {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.bowknot-core {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #C4384F;
  border: 2px solid #FAF3E7;
}

.bowknot-loop {
  position: absolute;
  top: 8px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.bowknot-loop.left {
  left: 0;
  border-right: 10px solid #E9A16C;
}

.bowknot-loop.right {
  right: 0;
  border-left: 10px solid #E9A16C;
}

.valance-wordmark {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FAF3E7;
}

.fresh-tab {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 6px;
  padding: 5px 12px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: #3B2620;
  color: #E9A16C;
  border-radius: 3px;
}

.tiecord {
  height: 6px;
  background-color: #7C2B3A;
  position: relative;
}

.tiecord::before,
.tiecord::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 22px;
  background-color: #E9A16C;
  border-radius: 0 0 4px 4px;
}

.tiecord::before {
  left: 8%;
}

.tiecord::after {
  right: 8%;
}

.valance-toggle {
  display: none;
  width: 100%;
  padding: 14px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background-color: #7C2B3A;
  color: #FAF3E7;
  border: none;
  cursor: pointer;
  text-align: center;
}

/* ------------------------------------------------------------
   HERO — PINATA HANG
   ------------------------------------------------------------ */
.pinatahang {
  background-color: #F7D9C4;
  border-bottom: 4px solid #E8D6BC;
  padding: 54px 0 64px;
}

.pinatahang-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.pinatahang-copy {
  flex: 1 1 55%;
  min-width: 300px;
}

.pinatahang-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-color: #3B2620;
  color: #E9A16C;
}

.pinatahang-title {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.pinatahang-title .cherryword {
  color: #C4384F;
}

.pinatahang-text {
  font-size: 17px;
  max-width: 56ch;
  margin-bottom: 26px;
}

.knotbuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.knotbutton {
  display: inline-block;
  padding: 14px 26px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background-color: #C4384F;
  color: #FAF3E7;
  border: 3px solid #7C2B3A;
  border-radius: 4px;
}

.knotbutton:hover {
  background-color: #7C2B3A;
  text-decoration: none;
}

.knotbutton.ghost {
  background-color: #FAF3E7;
  color: #7C2B3A;
  border: 3px solid #C4384F;
}

.knotbutton.ghost:hover {
  background-color: #E9A16C;
  color: #3B2620;
}

/* --- the CSS pinata --- */
.pinatahang-art {
  flex: 1 1 40%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pinatacord {
  width: 4px;
  height: 46px;
  background-color: #7C2B3A;
}

.pinatarings {
  width: 34px;
  height: 20px;
  border: 4px solid #C4384F;
  border-radius: 50%;
  background-color: #FAF3E7;
  margin-bottom: -2px;
}

.pinatabody {
  position: relative;
  width: 210px;
  height: 150px;
}

.pinata-star {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 0;
  height: 0;
  margin-left: -22px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 30px solid #C4384F;
}

.pinata-traps {
  position: relative;
  width: 210px;
  height: 120px;
  margin-top: 26px;
  background-color: #C4384F;
  border-bottom: 6px solid #7C2B3A;
}

.pinata-band {
  height: 20px;
  width: 100%;
  background-color: #E9A16C;
  border-bottom: 3px solid #7C2B3A;
}

.pinata-band.short {
  width: 88%;
  margin-left: 12%;
  background-color: #FAF3E7;
}

.pinata-band.mid {
  width: 94%;
  margin-left: 3%;
  background-color: #F7D9C4;
}

.pinata-fringe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background-color: #7C2B3A;
  border-radius: 0 0 8px 8px;
}

.pinata-spikes {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 2px;
}

.pinata-spike {
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 22px solid #E9A16C;
}

.pinata-spike.alt {
  border-top-color: #C4384F;
}

.pullcords {
  display: flex;
  justify-content: center;
  gap: 42px;
  margin-top: 14px;
}

.pullcord {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pullcord-line {
  width: 3px;
  height: 54px;
  background-color: #7C2B3A;
}

.pullcord-knot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #C4384F;
  border: 3px solid #7C2B3A;
}

.pullcord-tassel {
  width: 10px;
  height: 20px;
  margin-top: 3px;
  background-color: #E9A16C;
  border-radius: 0 0 4px 4px;
}

/* ------------------------------------------------------------
   BODY SECTIONS
   ------------------------------------------------------------ */
.ribbonnote {
  background-color: #7C2B3A;
  color: #FAF3E7;
  padding: 40px 0;
  border-bottom: 4px solid #C4384F;
}

.ribbonnote-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
}

.ribbonnote-emblem {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background-color: #C4384F;
  color: #FAF3E7;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #E9A16C;
}

.ribbonnote-copy {
  flex: 1 1 60%;
  min-width: 260px;
}

.ribbonnote-copy h2 {
  font-size: 26px;
  color: #FAF3E7;
  margin-bottom: 8px;
}

.ribbonnote-copy p {
  color: #FAF3E7;
  margin-bottom: 0;
}

.sugarcraft {
  padding: 62px 0;
  background-color: #FAF3E7;
  border-bottom: 4px solid #E8D6BC;
}

.section-head {
  margin-bottom: 34px;
}

.section-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-color: #F7D9C4;
  color: #7C2B3A;
  border-left: 5px solid #C4384F;
}

.section-head h2 {
  font-size: 38px;
  margin-bottom: 10px;
}

.section-head p {
  font-size: 17px;
  max-width: 68ch;
}

.storyladder {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.storyladder-col {
  flex: 1 1 300px;
  padding: 26px;
  background-color: #F7D9C4;
  border-top: 6px solid #C4384F;
  border-radius: 4px;
}

.storyladder-col.frost {
  background-color: #7C2B3A;
  color: #FAF3E7;
  border-top-color: #E9A16C;
}

.storyladder-col.frost h3,
.storyladder-col.frost p {
  color: #FAF3E7;
}

.storyladder-col h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------
   SIX TASSEL TIERS
   ------------------------------------------------------------ */
.tasseltiers {
  padding: 0 0 8px;
}

.tierstrip {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 168px;
  border-bottom: 4px solid #7C2B3A;
}

.tierstrip.c-1 { background-color: #F7D9C4; }
.tierstrip.c-2 { background-color: #7C2B3A; color: #FAF3E7; }
.tierstrip.c-3 { background-color: #FBEEDF; }
.tierstrip.c-4 { background-color: #F7D9C4; }
.tierstrip.c-5 { background-color: #7C2B3A; color: #FAF3E7; }
.tierstrip.c-6 { background-color: #FBEEDF; }

.tiercap {
  flex: 0 0 auto;
  width: 108px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 22px;
}

.tasseldrop {
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tasseldrop-knot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #C4384F;
  border: 3px solid #3B2620;
}

.tasseldrop-teeth {
  width: 30px;
  height: 62px;
  margin-top: 4px;
  background-color: #C4384F;
  border-radius: 2px;
  position: relative;
}

.tasseldrop-teeth::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 14px;
  background-color: #C4384F;
  -webkit-mask: repeating-linear-gradient(90deg, #C4384F 0 4px, transparent 4px 8px);
  mask: repeating-linear-gradient(90deg, #C4384F 0 4px, transparent 4px 8px);
}

.tasseldrop.k-short .tasseldrop-teeth { height: 44px; }
.tasseldrop.k-mid .tasseldrop-teeth { height: 54px; }
.tasseldrop.k-long .tasseldrop-teeth { height: 68px; }

.tierbody {
  flex: 1 1 auto;
  padding: 30px 26px 34px;
}

.tierlabel {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 20px 7px 14px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 19px;
  font-weight: 800;
  background-color: #C4384F;
  color: #FAF3E7;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.tierbody p {
  max-width: 74ch;
}

.tierbody a {
  font-weight: 700;
  color: #C4384F;
}

.tierstrip.c-2 .tierbody p,
.tierstrip.c-5 .tierbody p {
  color: #FAF3E7;
}

.tierstrip.c-2 .tierbody a,
.tierstrip.c-5 .tierbody a {
  color: #E9A16C;
}

.tiernum {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #C4384F;
  border-left: 4px dashed #E8D6BC;
}

.tierstrip.c-2 .tiernum,
.tierstrip.c-5 .tiernum {
  color: #E9A16C;
  border-left-color: #C4384F;
}

.tiersidetassel {
  flex: 0 0 auto;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 30px;
}

.sidetassel-cord {
  width: 3px;
  height: 30px;
  background-color: #3B2620;
}

.sidetassel-body {
  width: 22px;
  height: 40px;
  background-color: #E9A16C;
  border-radius: 0 0 5px 5px;
}

/* ------------------------------------------------------------
   PARTY SEASON ACCENT STRIP
   ------------------------------------------------------------ */
.partyseason {
  background-color: #7C2B3A;
  color: #C4384F;
  padding: 44px 0;
  border-top: 6px solid #C4384F;
  border-bottom: 6px solid #C4384F;
}

.partyseason-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.partyseason-badge {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background-color: #C4384F;
  color: #FAF3E7;
}

.partyseason-copy {
  flex: 1 1 60%;
  min-width: 260px;
  color: #E9A16C;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   FOOTER — CONFETTI POOL
   ------------------------------------------------------------ */
.confettipool {
  background-color: #3B2620;
  color: #FAF3E7;
  padding: 0 0 26px;
}

.confetti-band {
  position: relative;
  height: 34px;
  background-color: #7C2B3A;
}

.confetti-chip {
  position: absolute;
  top: 8px;
  width: 14px;
  height: 14px;
  background-color: #E9A16C;
}

.confetti-chip.round {
  border-radius: 50%;
  background-color: #C4384F;
}

.confetti-chip.sq2 {
  background-color: #F7D9C4;
}

.confettipool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 44px 0 30px;
}

.spoolgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  flex: 1 1 300px;
}

.ribbonspool {
  flex: 1 1 140px;
  min-width: 140px;
  background-color: #C4384F;
  padding: 20px 18px;
  border-radius: 4px;
  position: relative;
}

.ribbonspool::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-color: #7C2B3A;
}

.spooltitle {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FAF3E7;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #E9A16C;
}

.ribbonspool a {
  display: block;
  color: #FAF3E7;
  font-size: 15px;
  padding: 4px 0;
}

.ribbonspool a:hover {
  color: #E9A16C;
}

.gifttag {
  flex: 1 1 280px;
  min-width: 260px;
  background-color: #FAF3E7;
  color: #3B2620;
  padding: 26px;
  border-radius: 4px;
  border: 4px dashed #C4384F;
  position: relative;
}

.gifttag::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 26px;
  width: 26px;
  height: 26px;
  background-color: #C4384F;
  border-radius: 50%;
  border: 3px solid #3B2620;
}

.gifttag-title {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #7C2B3A;
  margin-bottom: 10px;
}

.gifttag p {
  color: #3B2620;
}

.giftbow {
  color: #C4384F;
  font-size: 22px;
  font-weight: 700;
}

.poolfloor {
  border-top: 2px solid #7C2B3A;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  font-size: 14px;
  color: #FAF3E7;
}

.poolfloor a {
  color: #E9A16C;
}

.poolfloor-tassel {
  display: inline-block;
  width: 8px;
  height: 14px;
  background-color: #C4384F;
  border-radius: 0 0 3px 3px;
  margin-right: 6px;
}

.poolcopy {
  width: 100%;
  margin-top: 12px;
  font-size: 13px;
  color: #F7D9C4;
}

/* ------------------------------------------------------------
   SECONDARY PAGES
   ------------------------------------------------------------ */
.pagebanner {
  background-color: #7C2B3A;
  color: #FAF3E7;
  padding: 46px 0 40px;
  border-bottom: 6px solid #C4384F;
}

.pagebanner h1 {
  color: #FAF3E7;
  font-size: 42px;
  margin-bottom: 10px;
}

.pagebanner p {
  color: #E9A16C;
  font-size: 17px;
  max-width: 70ch;
  margin-bottom: 0;
}

.servicestack {
  padding: 56px 0;
}

.serviceblock {
  padding: 30px 0;
  border-bottom: 3px dashed #E8D6BC;
}

.serviceblock:last-child {
  border-bottom: none;
}

.serviceblock-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.serviceblock-num {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #C4384F;
  color: #FAF3E7;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #7C2B3A;
}

.serviceblock-head h2 {
  font-size: 28px;
}

.serviceblock p {
  max-width: 82ch;
  font-size: 17px;
}

.processladder {
  background-color: #F7D9C4;
  padding: 56px 0;
  border-top: 4px solid #E8D6BC;
  border-bottom: 4px solid #E8D6BC;
}

.processrow {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
}

.processstep {
  flex: 1 1 200px;
  background-color: #FAF3E7;
  border-top: 5px solid #C4384F;
  padding: 22px;
  border-radius: 4px;
}

.processstep-num {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7C2B3A;
  margin-bottom: 8px;
}

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

.ctaband {
  background-color: #C4384F;
  color: #FAF3E7;
  padding: 48px 0;
  text-align: center;
}

.ctaband h2 {
  color: #FAF3E7;
  font-size: 32px;
  margin-bottom: 12px;
}

.ctaband p {
  color: #FAF3E7;
  max-width: 68ch;
  margin: 0 auto 22px;
}

.ctaband .knotbutton {
  background-color: #FAF3E7;
  color: #7C2B3A;
  border-color: #3B2620;
}

.ctaband .knotbutton:hover {
  background-color: #E9A16C;
  color: #3B2620;
}

/* --- contact --- */
.contactgrids {
  padding: 56px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.contactformwrap {
  flex: 1 1 420px;
  min-width: 300px;
}

.fieldrow {
  margin-bottom: 18px;
}

.fieldrow label {
  display: block;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7C2B3A;
  margin-bottom: 6px;
}

.fieldrow input,
.fieldrow textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", serif;
  color: #3B2620;
  background-color: #FAF3E7;
  border: 2px solid #C4384F;
  border-radius: 4px;
}

.fieldrow textarea {
  min-height: 150px;
  resize: vertical;
}

.formstatus {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #7C2B3A;
}

.contactdetails {
  flex: 1 1 320px;
  min-width: 280px;
  background-color: #F7D9C4;
  padding: 28px;
  border-radius: 4px;
  border-top: 6px solid #C4384F;
}

.contactdetails h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.contactdetails p {
  margin-bottom: 12px;
}

.detail-split {
  margin: 14px 0;
  border-top: 2px solid #E8D6BC;
}

.faqzone {
  padding: 56px 0;
  background-color: #FBEEDF;
  border-top: 4px solid #E8D6BC;
}

.faqitem {
  background-color: #FAF3E7;
  border-left: 6px solid #C4384F;
  margin-bottom: 16px;
  border-radius: 4px;
}

.faqask {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #3B2620;
  background-color: #F7D9C4;
  border: none;
  cursor: pointer;
}

.faqask:hover {
  background-color: #E9A16C;
}

.faqreply {
  padding: 18px 22px;
  font-size: 16px;
  border-top: 2px solid #E8D6BC;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .valance-toggle {
    display: block;
  }

  .valance-band {
    display: none;
  }

  .valance-band.is-open {
    display: flex;
  }

  .valance-fold {
    flex: 1 1 50%;
  }

  .valance-brand {
    flex: 1 1 100%;
    justify-content: center;
  }

  .fresh-tab {
    flex: 1 1 100%;
    text-align: center;
    margin: 6px 0;
  }

  .pinatahang-title {
    font-size: 38px;
  }

  .tierstrip {
    flex-wrap: wrap;
  }

  .tiercap {
    width: 70px;
  }

  .tiernum {
    width: 100%;
    border-left: none;
    border-top: 3px dashed #E8D6BC;
    padding: 12px;
  }

  .tierstrip.c-2 .tiernum,
  .tierstrip.c-5 .tiernum {
    border-top-color: #C4384F;
  }
}

@media (max-width: 520px) {
  .pinatahang-title {
    font-size: 31px;
  }

  .pagebanner h1 {
    font-size: 32px;
  }
}