/* ================================================================
   FAN-FOLDED BROCHURE · style.css
   Theme: LOTUS WRAP parcel paper with MARKET INK text.
   Accent: LOTUS PINK (#C97B8E) on fold edges, panel numbers,
   stamps. Support tones: WRAP GREY #8E8B82, PARCEL SLATE #272521,
   TISSUE CREAM #FAF7EE, POND STEM #5E6B4E.
   Skeleton law: cover sheet, then six alternating zig-zag fold
   panels with diagonal clip-path edges; back cover as footer.
   No row systems, no bands, no nav docks, no fixed bars.
   ================================================================ */

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

html {
  scroll-behavior: auto;
}

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

a {
  color: inherit;
}

.brochure-page {
  overflow-x: hidden;
  background-color: #F4F0E6;
}

/* Reusable type scale ------------------------------------------ */
.brochure-eyebrow {
  display: inline-block;
  color: #C97B8E;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: bold;
}

.brochure-lead-para {
  max-width: 60ch;
  margin: 18px 0 0 0;
}

/* ================================================================
   1. COVER PANEL
   One wide cream sheet, pink fold edge, monogram stamp,
   two-line headline, standfirst, smooth-scroll anchor line.
   ================================================================ */
.cover-panel {
  position: relative;
  background-color: #FAF7EE;
  padding: clamp(72px, 12vh, 130px) 24px clamp(60px, 9vh, 100px) 24px;
  border-bottom: 10px solid #C97B8E;
  overflow-x: hidden;
}

.cover-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.cover-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background-color: #272521;
  border: 6px solid #C97B8E;
  color: #FAF7EE;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 0.06em;
  margin: 0 0 28px 4px;
  user-select: none;
}

.cover-headline {
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.04;
  color: #2B2A24;
  font-weight: bold;
  max-width: 15ch;
  letter-spacing: -0.01em;
}

.cover-underscore {
  color: #C97B8E;
}

.cover-standfirst {
  max-width: 58ch;
  margin: 26px 0 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: #2B2A24;
}

.cover-anchor-line {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.anchor-smooth-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.02em;
  border-bottom: 2px solid #C97B8E;
  padding-bottom: 4px;
  color: #2B2A24;
}

.anchor-smooth-link:hover {
  color: #C97B8E;
}

.anchor-fold-tri {
  display: inline-block;
  color: #C97B8E;
  font-size: 15px;
}

.cover-address-line {
  margin-top: 40px;
  max-width: 62ch;
  font-size: 14px;
  color: #5E5B54;
  border-top: 1px solid #DDD6C4;
  padding-top: 16px;
}

.cover-address-line strong {
  color: #2B2A24;
}

/* Also used on later pages as a slim mast heading */
.cream-slim-mast {
  position: relative;
  background-color: #FAF7EE;
  padding: 52px 24px 30px 24px;
  border-bottom: 8px solid #C97B8E;
  overflow-x: hidden;
}

.cream-slim-mast .cover-inner {
  padding: 0 8px;
}

/* ================================================================
   2. THE FAN-FOLD BODY
   Full-width panels, alternating cream and dark, each ending with
   a clip-path slant so zig-zag folds read. Earlier the fold list:
   P1 recap / P2 the trade / P3 the vendors / P4 the rounds /
   P5 the feedback / P6 contact.
   ================================================================ */

/* Panel tabs appear like rotated edge labels along the fold */
.panel-zone {
  position: relative;
}

.panel-zone-tag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 5;
}

.panel-zone-tag span {
  display: inline-block;
  background-color: #C97B8E;
  color: #FAF7EE;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 7px 16px;
  border-radius: 0 0 6px 6px;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transform-origin: left top;
}

.panel-tab-mark {
  position: absolute;
  top: 26px;
  right: 40px;
  color: #C97B8E;
  font-size: 12px;
  letter-spacing: 0.32em;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 5;
}

.panel-tab-mark--dark {
  color: #F4F0E6;
}

/* Diagonal fold slant utility: cream panels tilt down to dark,
   dark panels tilt back to cream. Applied to last band child.
   Only these specific classes carry clip-path. */
.fold-zone {
  position: relative;
}

.fold-zone--light-to-dark {
  background-color: #FAF7EE;
}

.fold-zone--dark-to-light {
  background-color: #272521;
}

/* P1 recap strip ------------------------------------------------- */
.recap-panel {
  background-color: #FAF7EE;
  padding: clamp(56px, 8vh, 92px) 24px clamp(74px, 10vh, 110px) 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
  overflow-x: hidden;
}

.recap-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.recap-cell {
  border-left: 5px solid #C97B8E;
  padding-left: 18px;
}

.recap-cell-num {
  color: #C97B8E;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.recap-cell-phrase {
  font-size: 21px;
  font-weight: bold;
  color: #2B2A24;
  line-height: 1.3;
  margin-top: 6px;
}

/* Generic tall panel prose holder ------------------------------- */
.panel-sheet {
  position: relative;
  padding: clamp(84px, 12vh, 128px) 24px clamp(96px, 12vh, 136px) 24px;
  min-height: 78vh;
}

.panel-sheet--cream {
  background-color: #FAF7EE;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 20% 100%, 0 calc(100% - 44px));
}

.panel-sheet--ink {
  background-color: #272521;
  color: #FAF7EE;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 80% 100%, 0 100%);
}

.panel-sheet--cream-flip {
  background-color: #FAF7EE;
  clip-path: polygon(0 calc(100% - 44px), 0 100%, 100% 100%, 100% 0, 0 0);
}

.panel-sheet--ink-flip {
  background-color: #272521;
  color: #FAF7EE;
}

.panel-sheet--tissue {
  background-color: #FAF7EE;
}

.panel-sheet--slate {
  background-color: #272521;
  color: #F4F0E6;
}

.panel-sheet--tissue-tilt {
  background-color: #FAF7EE;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), 0 100%);
}

.panel-sheet--slate-tilt {
  background-color: #272521;
  color: #F4F0E6;
}

.panel-sheet--cover-second {
  background-color: #F4F0E6;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

.panel-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.panel-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #C97B8E;
  background-color: transparent;
  font-weight: bold;
  font-size: 26px;
}

.panel-sheet--ink .panel-number {
  color: #C97B8E;
}

.panel-sheet--cream .panel-number {
  color: #C97B8E;
}

.panel-title {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  margin: 22px 0 8px 0;
  font-weight: bold;
}

.panel-sheet--cream .panel-title {
  color: #2B2A24;
}

.panel-sheet--ink .panel-title {
  color: #FAF7EE;
}

.panel-tag-line {
  font-size: 15px;
  letter-spacing: 0.06em;
  margin: 0;
}

.panel-sheet--cream .panel-tag-line {
  color: #C97B8E;
}

.panel-sheet--ink .panel-tag-line {
  color: #C97B8E;
}

.panel-prose-col {
  margin: 28px 0 0 0;
}

.panel-prose-margin {
  margin: 18px 0 0 0;
}

.panel-title--compact {
  font-size: 22px;
  margin-top: 0;
}

.panel-prose-col .fold-reveal-r,
.panel-prose-col .fold-reveal-a {
  margin-top: 16px;
}

.prose-kicker {
  color: #C97B8E;
  font-size: 12px;
  margin-top: 16px;
}

.panel-source-link {
  color: #C97B8E;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #C97B8E;
}

.panel-sheet--ink .panel-source-link:hover {
  color: #FAF7EE;
}

.panel-sheet--cream .panel-source-link:hover {
  color: #272521;
}

/* P6 contact / address block (parcel label) --------------------- */
.contact-block-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 26px;
  margin-top: 28px;
  align-items: start;
}

.contact-address-label {
  background-color: #F4F0E6;
  border: 2px dashed #C97B8E;
  border-radius: 8px;
  padding: 20px 20px;
}

.contact-address-label h2 {
  color: #C97B8E;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin: 0 0 10px 0;
}

.contact-address-label p {
  margin: 6px 0;
}

.contact-address-note {
  font-size: 13px;
  color: #555249;
}

/* ================================================================
   3. FAN-FOLD VISUAL ORNAMENTS (leaf marks, fold rules)
   ================================================================ */
.leaf-mark {
  position: absolute;
  width: 14px;
  height: 26px;
  background-color: #5E6B4E;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-28deg);
  visibility: hidden;
}

.fold-rule {
  height: 3px;
  width: 120px;
  background-color: #C97B8E;
  margin: 26px 0 0 0;
}

.fold-rule--center {
  margin-left: auto;
  margin-right: auto;
}

.stamp-orbit {
  position: absolute;
  pointer-events: none;
  width: 120px;
  height: 120px;
  right: 24px;
  top: 90px;
  border: 2px solid #C97B8E;
  border-radius: 50%;
  opacity: 1;
  z-index: 0;
}

.panel-sheet--cream .stamp-orbit {
  border-color: #E3D3C2;
}

.panel-sheet--ink .stamp-orbit {
  border-color: #6E6A60;
}

.stamp-ring-sm {
  position: absolute;
  width: 78px;
  height: 78px;
  border: 1px solid #E3D3C2;
  border-radius: 50%;
}

/* series item cards inside panels */
.series-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.service-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 24px 0 0 0;
  padding: 0;
}

.service-menu li {
  margin: 0;
}

.service-menu a {
  color: #C97B8E;
  border: 1px solid #C97B8E;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  display: inline-block;
}

.service-menu a:hover {
  background-color: #C97B8E;
  color: #272521;
}

.panel-sheet--ink .service-menu a {
  border-color: #C97B8E;
}

.series-diamond {
  width: 54px;
  height: 54px;
  background-color: transparent;
  border: 2px solid #C97B8E;
  transform: rotate(45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.series-diamond b {
  transform: rotate(-45deg);
  color: #C97B8E;
}

.series-diamond--slate {
  border-color: #C97B8E;
}

.series-copy p {
  margin: 6px 0;
}

.series-copy h3 {
  font-size: 19px;
  margin: 0 0 4px 0;
}

.panel-sheet--ink .series-copy h3 {
  color: #FAF7EE;
}

.panel-sheet--cream .series-copy h3 {
  color: #2B2A24;
}

.series-copy a {
  color: #C97B8E;
  text-decoration: none;
  font-weight: bold;
}

/* ================================================================
   4. CONTACT FORM (ticket style) and its mailto fallback layout
   ================================================================ */
.ticket-card {
  background-color: #F4F0E6;
  border-left: 10px solid #C97B8E;
  padding: 24px 24px 26px 24px;
  display: grid;
  gap: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.ticket-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticket-full-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticket-label {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #555249;
}

.ticket-input,
.ticket-textarea {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  color: #2B2A24;
  background-color: #FAF7EE;
  border: 1px solid #C9C2B0;
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
}

.ticket-card textarea {
  min-height: 110px;
  resize: vertical;
}

.ticket-submit {
  justify-self: start;
  background-color: #C97B8E;
  color: #FAF7EE;
  border: 0;
  padding: 12px 26px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
}

.ticket-submit:hover {
  background-color: #B86A7D;
}

.mailto-note {
  font-size: 14px;
  color: #67705A;
  margin: 6px 0 0 0;
}

/* FAQ note list in margin of a fold */
.faq-notes {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}

.faq-margin {
  margin-top: 28px;
}

.faq-margin h3 {
  font-size: 18px;
  margin: 0 0 6px 0;
  display: block;
}

.panel-sheet--ink .faq-margin h3 {
  color: #FAF7EE;
}

.panel-sheet--cream .faq-margin h3 {
  color: #2B2A24;
}

.faq-margin p {
  margin: 8px 0 0 0;
}

.faq-item-number {
  color: #C97B8E;
  font-weight: bold;
  letter-spacing: 0.2em;
}

.direct-contact-list li {
  list-style: none;
  margin: 8px 0;
  color: inherit;
}

/* contact page hero-panel-as-cover uses an invitation */
.invite-block {
  max-width: 60ch;
}

/* ================================================================
   5. SERVICES MAP INSIDE PANELS (list of the six services)
   ================================================================ */
.service-map {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.service-chip {
  border: 1px solid #C9C2B0;
  padding: 14px 14px 16px 14px;
  background-color: #F4F0E6;
  border-radius: 4px;
}

.service-chip h3 {
  font-size: 17px;
  color: #2B2A24;
  margin: 0 0 6px 0;
}

.service-chip p {
  font-size: 14px;
  margin: 0;
  color: #555249;
}

.service-chip a {
  color: #C97B8E;
  font-weight: bold;
  text-decoration: none;
}

/* ================================================================
   6. COVER-BACK FOOTER STRIP (single centered text block)
   ================================================================ */
.back-cover-footer {
  background-color: #C97B8E;
  color: #272521;
  padding: clamp(30px, 5vh, 54px) 24px 10px 24px;
}

.footer-centered {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 34px 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.footer-palm {
  font-size: 12px;
  letter-spacing: 0.5em;
  color: #8E8B82;
  margin-bottom: 10px;
}

.footer-line-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin: 12px 0;
}

.footer-line-links a {
  color: #272521;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid transparent;
}

.footer-line-links a:hover {
  border-bottom-color: #272521;
}

.footer-legal-cluster a {
  color: #8E8B82;
  text-decoration: none;
}

.footer-phone {
  font-weight: bold;
  letter-spacing: 0.02em;
}

.footer-bottom-note {
  font-size: 13px;
  color: #8E8B82;
  margin-top: 10px;
}

.back-cover--ink {
  background-color: #272521;
  color: #E9E2D2;
}

.back-cover--ink .footer-palm {
  color: #C97B8E;
}

.back-cover--ink .footer-line-links a {
  color: #FAF7EE;
}

.back-cover--ink .footer-line-links a:hover {
  border-bottom-color: #C97B8E;
}

.back-cover--ink .footer-legal-cluster a {
  color: #C97B8E;
}

.back-cover--ink .footer-phone {
  color: #FAF7EE;
}

.back-cover--ink .footer-bottom-note {
  color: #BBB4A2;
}

.footer-legal-meta {
  font-size: 13px;
  margin-top: 8px;
}

/* ================================================================
   7. GO-TO-TOP round floating button, fixed bottom-right
   ================================================================ */
.go-to-top-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #C97B8E;
  color: #272521;
  border: 3px solid #FAF7EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 0 0 1px #272521;
}

.go-to-top-btn:hover {
  background-color: #FAF7EE;
  color: #C97B8E;
}

.go-to-top-btn svg {
  display: block;
}

/* ================================================================
   8. SCROLL-REVEAL ... hidden states NEVER apply without
   .primary-js on <html>. Default fully visible (noscript safe).
   ================================================================ */
html.primary-js .fold-reveal-r,
html.primary-js .fold-reveal-d {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateY(18px);
}

html.primary-js .fold-reveal-a {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateX(-16px);
}

html.primary-js .fold-reveal-b {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateX(16px);
}

html.primary-js .fold-reveal-c {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateY(24px);
}

html.primary-js .fold-reveal-e {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateY(14px);
}

html.primary-js .fold-reveal-f {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateY(12px);
}

html.primary-js .fold-reveal-pack {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
}

html.primary-js .fold-reveal-note {
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
}

html.primary-js .fold-reveal-r.is-revealed,
html.primary-js .fold-reveal-a.is-revealed,
html.primary-js .fold-reveal-b.is-revealed,
html.primary-js .fold-reveal-c.is-revealed,
html.primary-js .fold-reveal-d.is-revealed,
html.primary-js .fold-reveal-e.is-revealed,
html.primary-js .fold-reveal-f.is-revealed,
html.primary-js .fold-reveal-pack.is-revealed,
html.primary-js .fold-reveal-note.is-revealed {
  opacity: 1;
  transform: none;
}

/* ================================================================
   9. RESPONSIVE
   ================================================================ */
.media-grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}