:root {
  --rootcellar: #26201C;
  --carving: #E2D8CA;
  --totem: #C5702D;
  --running: #100E0C;
  --loompanel: #372F37;
  --andessky: #616684;
  --chuno: #968E80;
  --totem-deep: #9A5520;
  --panel-edge: #4A4048;
  --rule-soft: #5A5058;
  --beam-edge: #7A4A1C;
  --vat-lip: #C5702D;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #26201C;
  color: #E2D8CA;
  font-family: Georgia, Cambria, "Times New Roman", serif;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0 0 1.1em 0;
}

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

a:hover,
a:focus {
  text-decoration: underline;
}

.mono {
  font-family: "Courier New", Courier, monospace;
}

/* ============================================================
   WARP BEAM NAV
   ============================================================ */

.warpbeamnav {
  position: relative;
  width: 100%;
  background-color: #26201C;
  padding: 0 0 74px 0;
}

.warpbeamnav::before {
  content: none;
  display: block;
  height: 14px;
  width: 100%;
  background-color: #100E0C;
  border-top: 3px solid #C5702D;
  border-bottom: 3px solid #C5702D;
}

.warpbeamnav::after {
  content: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 34px;
  background-color: #C5702D;
  border-top: 3px solid #9A5520;
  border-bottom: 3px solid #9A5520;
}

.warpbeambrand {
  position: absolute;
  top: 17px;
  left: 54px;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E2D8CA;
}

.warpbeamtrack {
  position: absolute;
  top: 14px;
  right: 40px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.warpthread {
  position: relative;
  width: 84px;
  height: 66px;
  padding-top: 62px;
}

.warpthread::before {
  content: none;
  position: absolute;
  top: 0;
  left: 14px;
  width: 1px;
  height: 48px;
  background-color: #372F37;
}

.warpthread.tall::before {
  height: 58px;
}

.warpthread.short::before {
  height: 38px;
}

.warpthread::after {
  content: none;
  position: absolute;
  top: 46px;
  left: 10px;
  width: 9px;
  height: 9px;
  border: 1px solid #968E80;
  border-radius: 50%;
  background-color: #26201C;
}

.warpthread.tall::after {
  top: 56px;
}

.warpthread.short::after {
  top: 36px;
}

.warplink {
  position: absolute;
  top: 30px;
  left: 24px;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E2D8CA;
  white-space: nowrap;
}

.warplink:hover,
.warplink:focus {
  color: #C5702D;
  text-decoration: none;
}

.warplink.active {
  color: #C5702D;
}

.warpbeamtrack .warplink {
  top: 4px;
}

.warpthread.tall .warplink {
  top: 0;
}

/* ============================================================
   WARP FACE HERO
   ============================================================ */

.warpthreadfield {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  pointer-events: none;
}

.warpthreadfield i {
  display: block;
  width: 2px;
  height: 100%;
  background-color: #372F37;
}

.warpthreadfield i:nth-child(3n) {
  background-color: #2E2722;
}

.warpthreadfield i:nth-child(4n) {
  width: 1px;
}

.warpface {
  display: grid;
  grid-template-columns: 42% 58%;
  background-color: #26201C;
  border-bottom: 1px solid #4A4048;
}

.warpfaceweave {
  position: relative;
  background-color: #1E1915;
  min-height: 460px;
  border-right: 1px solid #4A4048;
  overflow-x: hidden;
}

/* warp threads rendered as discrete spans, no gradients */
.warpfaceweave::after {
  content: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  height: 6px;
  background-color: #C5702D;
}

.warpweft {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background-color: #C5702D;
  z-index: 2;
}

.warpweft.one {
  top: 27%;
}

.warpweft.two {
  top: 58%;
  height: 4px;
  background-color: #9A5520;
}

.warpweft.three {
  top: 76%;
  height: 3px;
}

.warpshuttle {
  position: absolute;
  top: calc(44% - 7px);
  left: 24%;
  width: 128px;
  height: 22px;
  background-color: #372F37;
  border: 2px solid #C5702D;
  border-radius: 11px;
  z-index: 3;
}

.warpshuttle::before {
  content: none;
  position: absolute;
  top: 6px;
  left: 30px;
  width: 48px;
  height: 6px;
  background-color: #968E80;
}

.warpshuttle::after {
  content: none;
  position: absolute;
  top: 8px;
  right: 14px;
  width: 10px;
  height: 2px;
  background-color: #E2D8CA;
  box-shadow: 0 4px 0 #E2D8CA;
}

.warpfacelabel {
  position: absolute;
  bottom: 22px;
  left: 26px;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #968E80;
  z-index: 4;
}

.warpfacetext {
  padding: 62px 60px 66px 56px;
  background-color: #26201C;
}

.warpfacetext .eyebrow {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #968E80;
  margin-bottom: 26px;
}

.warpfacetext .eyebrow::before {
  content: none;
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: #C5702D;
  vertical-align: 4px;
  margin-right: 12px;
}

.warpheadline {
  font-size: 46px;
  color: #E2D8CA;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.warpdisplay {
  display: block;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 0.96;
  letter-spacing: 0.02em;
  color: #C5702D;
  margin: 6px 0 26px 0;
}

.warpfacetext .lede {
  font-size: 17px;
  color: #E2D8CA;
  max-width: 560px;
  margin-bottom: 30px;
}

.inlinearrow {
  color: #C5702D;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid #9A5520;
  padding-bottom: 1px;
}

.inlinearrow:hover {
  border-bottom-color: #C5702D;
  text-decoration: none;
}

.warpcta {
  display: block;
  width: 100%;
  background-color: #C5702D;
  color: #100E0C;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 26px;
  border: none;
  border-bottom: 4px solid #9A5520;
  text-align: left;
  position: relative;
}

.warpcta span.cta-arrow {
  position: absolute;
  right: 24px;
  top: 16px;
  font-size: 18px;
}

.warpcta:hover,
.warpcta:focus {
  background-color: #E2D8CA;
  color: #100E0C;
  text-decoration: none;
}

/* ============================================================
   TREADLE CHART ROWS
   ============================================================ */

.treadlechart {
  background-color: #26201C;
  padding: 84px 56px 88px 56px;
  border-bottom: 1px solid #372F37;
}

.treadleintro {
  max-width: 760px;
  margin-bottom: 52px;
}

.treadleintro h2 {
  font-size: 34px;
  color: #E2D8CA;
  margin-bottom: 16px;
}

.treadleintro p {
  color: #E2D8CA;
  font-size: 17px;
}

.treadlelayout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 48px;
  align-items: start;
}

.treadlebank {
  position: sticky;
  top: 40px;
  padding-top: 14px;
}

.treadlebank .banklabel {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #968E80;
  margin-bottom: 20px;
}

.treadlebar {
  height: 12px;
  background-color: #372F37;
  border-left: 4px solid #968E80;
  margin-bottom: 18px;
  position: relative;
}

.treadlebar::after {
  content: none;
  position: absolute;
  right: 12px;
  top: 4px;
  width: 6px;
  height: 4px;
  background-color: #968E80;
}

.treadlebar.t1 { width: 84%; }
.treadlebar.t2 { width: 66%; border-left-color: #616684; }
.treadlebar.t3 { width: 92%; }
.treadlebar.t4 { width: 58%; border-left-color: #616684; }

.treadlebanknote {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #968E80;
  margin-top: 24px;
  border-top: 1px solid #4A4048;
  padding-top: 18px;
}

.treadlerows {
  display: flex;
  flex-direction: column;
}

.treadlerow {
  display: grid;
  grid-template-columns: 42px 1fr 22px;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid #4A4048;
  align-items: start;
}

.treadlerow:first-child {
  border-top: 1px solid #4A4048;
}

.treadlerow .rowmark {
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #968E80;
  padding-top: 5px;
}

.treadlerow h3 {
  font-size: 21px;
  color: #E2D8CA;
  margin-bottom: 8px;
}

.treadlerow p {
  color: #E2D8CA;
  font-size: 16px;
  margin: 0;
  max-width: 660px;
}

.treadlerow .tiedot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #C5702D;
  margin-top: 7px;
}

.treadlerow.lift .tiedot {
  margin-top: 14px;
}

.treadlerow.sky .tiedot {
  background-color: #616684;
}

.treadlerow.low .tiedot {
  margin-top: 22px;
}

.treadleclose {
  max-width: 820px;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 3px solid #C5702D;
}

.treadleclose p {
  font-size: 18px;
  color: #E2D8CA;
  margin-bottom: 0;
}

/* ============================================================
   DYE VAT FOOTER
   ============================================================ */

.dyevat {
  position: relative;
  background-color: #100E0C;
  color: #E2D8CA;
  padding: 56px 24px 44px 24px;
  border-top: 10px solid #C5702D;
  text-align: center;
}

.dyevat::before {
  content: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #9A5520;
}

.dyevatbrand {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E2D8CA;
  margin-bottom: 14px;
}

.dyevatblurb {
  max-width: 560px;
  margin: 0 auto 26px auto;
  font-size: 15px;
  color: #E2D8CA;
}

.dyevatlinks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0 auto 28px auto;
  padding: 0;
  max-width: 760px;
}

.dyevatlinks li {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E2D8CA;
}

.dyevatlinks li + li::before {
  content: none;
  color: #968E80;
  display: inline-block;
  padding: 0 14px;
}

.dyevatlinks a {
  color: #E2D8CA;
}

.dyevatlinks a:hover,
.dyevatlinks a:focus {
  color: #C5702D;
  text-decoration: underline;
}

.dyevatcontact {
  font-size: 15px;
  line-height: 1.9;
  color: #E2D8CA;
  margin-bottom: 22px;
}

.dyevatcontact a {
  color: #C5702D;
}

.dyevatcopy {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #968E80;
  border-top: 1px solid #372F37;
  padding-top: 20px;
  max-width: 760px;
  margin: 0 auto;
}

.dyevatcopy .spindle {
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 1px solid #968E80;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}

/* ============================================================
   HOMEPAGE ADDITIONAL SECTIONS (studio story, archive, visit)
   ============================================================ */

.loftstory {
  background-color: #26201C;
  padding: 86px 56px;
  border-bottom: 1px solid #372F37;
}

.loftstorygrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1180px;
  margin: 0 auto;
}

.loftstory h2 {
  font-size: 32px;
  color: #E2D8CA;
  margin-bottom: 20px;
}

.loftstory p {
  color: #E2D8CA;
  font-size: 16px;
}

.loftstory .sidecard {
  background-color: #372F37;
  padding: 34px 32px;
  border-left: 5px solid #C5702D;
}

.sidecard h3 {
  font-size: 18px;
  color: #E2D8CA;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

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

.sidecard li {
  font-size: 15px;
  color: #E2D8CA;
  padding: 10px 0;
  border-bottom: 1px solid #4A4048;
}

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

.sidecard li .kr {
  font-family: "Courier New", Courier, monospace;
  color: #968E80;
  font-size: 12px;
  letter-spacing: 0.12em;
  display: inline-block;
  min-width: 64px;
}

.archiveboard {
  background-color: #1E1915;
  padding: 86px 56px;
  border-bottom: 1px solid #372F37;
}

.archiveboard .archiveinner {
  max-width: 1180px;
  margin: 0 auto;
}

.archiveboard h2 {
  font-size: 32px;
  color: #E2D8CA;
  margin-bottom: 18px;
}

.archiveboard .archivelead {
  max-width: 760px;
  color: #E2D8CA;
  font-size: 16px;
  margin-bottom: 46px;
}

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

.archivecell {
  background-color: #26201C;
  border-top: 4px solid #616684;
  padding: 28px 26px;
}

.archivecell:nth-child(2) {
  border-top-color: #C5702D;
}

.archivecell:nth-child(3) {
  border-top-color: #968E80;
}

.archivecell h3 {
  font-size: 18px;
  color: #E2D8CA;
  margin-bottom: 12px;
}

.archivecell p {
  color: #E2D8CA;
  font-size: 15px;
  margin-bottom: 0;
}

.visitstrip {
  background-color: #26201C;
  padding: 86px 56px 92px 56px;
}

.visitinner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
}

.visitinner h2 {
  font-size: 30px;
  color: #E2D8CA;
  margin-bottom: 18px;
}

.visitinner p {
  color: #E2D8CA;
  font-size: 16px;
}

.visitfacts {
  background-color: #372F37;
  padding: 30px 30px;
  border-top: 4px solid #C5702D;
}

.visitfacts dt {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #968E80;
  margin-bottom: 4px;
}

.visitfacts dd {
  margin: 0 0 18px 0;
  color: #E2D8CA;
  font-size: 15px;
}

.visitfacts dd:last-child {
  margin-bottom: 0;
}

/* ============================================================
   INTERIOR PAGES (services, contact)
   ============================================================ */

.pagehead {
  background-color: #1E1915;
  padding: 66px 56px 56px 56px;
  border-bottom: 1px solid #4A4048;
}

.pageheadinner {
  max-width: 980px;
  margin: 0 auto;
}

.pagehead .eyebrow {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #968E80;
  margin-bottom: 18px;
}

.pagehead h1 {
  font-size: 40px;
  color: #E2D8CA;
  margin-bottom: 16px;
}

.pagehead p {
  color: #E2D8CA;
  font-size: 17px;
  max-width: 720px;
  margin: 0;
}

.servicestack {
  background-color: #26201C;
  padding: 70px 56px;
  border-bottom: 1px solid #372F37;
}

.servicestackinner {
  max-width: 980px;
  margin: 0 auto;
}

.servicerow {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 28px;
  padding: 34px 0;
  border-bottom: 1px solid #4A4048;
}

.servicerow:first-child {
  border-top: 1px solid #4A4048;
}

.servicerow .smark {
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #C5702D;
  padding-top: 6px;
}

.servicerow h2 {
  font-size: 24px;
  color: #E2D8CA;
  margin-bottom: 12px;
}

.servicerow p {
  color: #E2D8CA;
  font-size: 16px;
  max-width: 720px;
}

.servicerow p:last-child {
  margin-bottom: 0;
}

.processblock {
  background-color: #1E1915;
  padding: 70px 56px;
  border-bottom: 1px solid #372F37;
}

.processinner {
  max-width: 980px;
  margin: 0 auto;
}

.processinner h2 {
  font-size: 30px;
  color: #E2D8CA;
  margin-bottom: 18px;
}

.processinner p {
  color: #E2D8CA;
  font-size: 16px;
  max-width: 760px;
}

.processsteps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 36px;
}

.processstep {
  background-color: #372F37;
  padding: 28px 28px;
  border-bottom: 4px solid #616684;
}

.processstep:nth-child(2) {
  border-bottom-color: #C5702D;
}

.processstep:nth-child(3) {
  border-bottom-color: #968E80;
}

.processstep:nth-child(4) {
  border-bottom-color: #C5702D;
}

.processstep h3 {
  font-size: 17px;
  color: #E2D8CA;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.processstep p {
  font-size: 15px;
  margin-bottom: 0;
}

.ctablock {
  background-color: #26201C;
  padding: 64px 56px 74px 56px;
}

.ctablockinner {
  max-width: 980px;
  margin: 0 auto;
  border-left: 6px solid #C5702D;
  padding-left: 34px;
}

.ctablock h2 {
  font-size: 28px;
  color: #E2D8CA;
  margin-bottom: 14px;
}

.ctablock p {
  color: #E2D8CA;
  font-size: 16px;
  max-width: 720px;
}

.ctabutton {
  display: inline-block;
  background-color: #C5702D;
  color: #100E0C;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-bottom: 4px solid #9A5520;
  margin-top: 8px;
}

.ctabutton:hover,
.ctabutton:focus {
  background-color: #E2D8CA;
  color: #100E0C;
  text-decoration: none;
}

.contactlayout {
  background-color: #26201C;
  padding: 70px 56px 84px 56px;
}

.contactinner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 58px;
  align-items: start;
}

.contactform {
  background-color: #372F37;
  padding: 36px 34px;
  border-top: 5px solid #C5702D;
}

.contactform h2 {
  font-size: 23px;
  color: #E2D8CA;
  margin-bottom: 8px;
}

.contactform .formnote {
  font-size: 14px;
  color: #E2D8CA;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E2D8CA;
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  background-color: #26201C;
  border: 1px solid #616684;
  color: #E2D8CA;
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-size: 15px;
  padding: 12px 13px;
  border-radius: 0;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #C5702D;
}

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

.contactsubmit {
  display: inline-block;
  width: 100%;
  background-color: #C5702D;
  color: #100E0C;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: none;
  border-bottom: 4px solid #9A5520;
  cursor: pointer;
  margin-top: 6px;
}

.contactsubmit:hover,
.contactsubmit:focus {
  background-color: #E2D8CA;
  color: #100E0C;
}

.formstatus {
  margin-top: 16px;
  font-size: 14px;
  color: #C5702D;
  min-height: 20px;
}

.contactaside h2 {
  font-size: 23px;
  color: #E2D8CA;
  margin-bottom: 18px;
}

.contactaside p {
  color: #E2D8CA;
  font-size: 15px;
}

.contactfacts {
  margin: 26px 0 0 0;
  padding: 0;
}

.contactfacts dt {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #968E80;
  margin-bottom: 4px;
}

.contactfacts dd {
  margin: 0 0 20px 0;
  color: #E2D8CA;
  font-size: 15px;
  line-height: 1.7;
}

.contactfacts a {
  color: #C5702D;
}

.faqblock {
  background-color: #1E1915;
  padding: 70px 56px 84px 56px;
  border-top: 1px solid #372F37;
}

.faqinner {
  max-width: 980px;
  margin: 0 auto;
}

.faqinner h2 {
  font-size: 30px;
  color: #E2D8CA;
  margin-bottom: 30px;
}

.faqitem {
  border-bottom: 1px solid #4A4048;
  padding: 6px 0;
}

.faqitem:first-of-type {
  border-top: 1px solid #4A4048;
}

.faqtoggle {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 0;
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #E2D8CA;
  cursor: pointer;
  position: relative;
  padding-right: 40px;
}

.faqtoggle:hover {
  color: #C5702D;
}

.faqtoggle::after {
  content: none;
  position: absolute;
  right: 4px;
  top: 17px;
  font-size: 22px;
  color: #C5702D;
}

.faqitem.open .faqtoggle::after {
  content: none;
}

.faqanswer {
  display: none;
  padding: 0 0 22px 0;
  max-width: 760px;
}

.faqitem.open .faqanswer {
  display: block;
}

.faqanswer p {
  color: #E2D8CA;
  font-size: 15px;
  margin: 0;
}

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

.servicerow.reveal {
  border-left: 3px solid #26201C;
  padding-left: 18px;
}

.servicerow.reveal.revealed {
  border-left: 3px solid #C5702D;
  padding-left: 18px;
  transition: border-color 0.6s ease-out;
}

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

@media (max-width: 980px) {
  .warpface {
    grid-template-columns: 1fr;
  }
  .warpfaceweave {
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid #4A4048;
  }
  .warpfacetext {
    padding: 44px 30px 48px 30px;
  }
  .warpheadline {
    font-size: 34px;
  }
  .warpdisplay {
    font-size: 68px;
  }
  .treadlelayout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .treadlebank {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-top: 0;
    border-bottom: 1px solid #4A4048;
    padding-bottom: 22px;
  }
  .treadlebank .banklabel {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .treadlebar {
    margin-bottom: 0;
  }
  .treadlebanknote {
    grid-column: 1 / -1;
    margin-top: 6px;
    border-top: none;
    padding-top: 6px;
  }
  .loftstorygrid,
  .visitinner,
  .contactinner {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .archivegrid {
    grid-template-columns: 1fr;
  }
  .processsteps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .warpbeamnav {
    padding-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .warpbeamnav::after {
    width: 28px;
  }
  .warpbeambrand {
    position: static;
    font-size: 13px;
    letter-spacing: 0.1em;
    padding-top: 18px;
    padding-bottom: 8px;
    width: 100%;
  }
  .warpbeamtrack {
    position: static;
    width: 100%;
    flex-wrap: wrap;
    gap: 0 14px;
    padding-bottom: 6px;
  }
  .warpthread {
    width: auto;
    height: auto;
    padding: 0;
  }
  .warpthread::before,
  .warpthread::after {
    display: none;
  }
  .warpthread .warplink,
  .warpbeamtrack .warplink {
    position: static;
    display: inline-block;
    padding: 3px 9px 3px 0;
    font-size: 12px;
  }
  .treadlechart,
  .loftstory,
  .archiveboard,
  .visitstrip,
  .pagehead,
  .servicestack,
  .processblock,
  .ctablock,
  .contactlayout,
  .faqblock {
    padding-left: 24px;
    padding-right: 24px;
  }
  .warpheadline {
    font-size: 29px;
  }
  .warpdisplay {
    font-size: 54px;
  }
  .treadlerow {
    grid-template-columns: 34px 1fr;
  }
  .treadlerow .tiedot {
    display: none;
  }
  .servicerow {
    grid-template-columns: 52px 1fr;
    gap: 16px;
  }
}