/* =====================================================================
   HANDAN WOKUAI TRADING CO., LTD. — paper kite workshop stylesheet
   Palette:
     workbench paper   #F2F3EC   body background
     kite ink          #26312E   primary text
     wisteria splash   #7B5EA6   accent (links, buttons, spool marks)
     spar bamboo       #8A6B3D   rails and frames
     cloud bind        #FFFFFF   sky field and paper faces
     mist tail         #D9DCC9   tail streamers and separators
     pine shadow       #3A4A44   deep recessed panels (white text)
     kite vermilion    #BF4A36   painted kite faces ONLY
     azurite kite      #2C6E8A   painted kite faces ONLY
   ===================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #F2F3EC;
  color: #26312E;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.65;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: #7B5EA6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: #2C6E8A;
}

h1,
h2,
h3,
h4 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  color: #26312E;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

h1 {
  font-size: 2.7rem;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 2rem;
  margin-top: 8px;
}

h3 {
  font-size: 1.3rem;
}

p {
  margin: 0 0 16px 0;
}

/* ---------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------- */
.skipwire {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: #3A4A44;
  color: #FFFFFF;
  padding: 10px 18px;
  z-index: 300;
}

.skipwire:focus {
  left: 12px;
  top: 12px;
}

/* ---------------------------------------------------------------------
   Navigation: SPAR PERCH RAIL .kiteperch
   --------------------------------------------------------------------- */
.kiteperch {
  position: relative;
  background-color: #F2F3EC;
  padding: 0 20px 96px 20px;
  z-index: 40;
}

.kiteperch-rail {
  position: relative;
  height: 22px;
  background-color: #8A6B3D;
  border-top: 3px solid #6E542C;
  border-bottom: 3px solid #6E542C;
  box-shadow: 0 4px 0 #D9DCC9;
  max-width: 1240px;
  margin: 0 auto;
}

.kiteperch-lash {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 28px;
  background-color: #26312E;
  border-radius: 3px;
}

.kiteperch-lash.lash-a { left: 12%; }
.kiteperch-lash.lash-b { left: 38%; }
.kiteperch-lash.lash-c { left: 63%; }
.kiteperch-lash.lash-d { left: 86%; }

.kiteperch-sheet {
  position: absolute;
  left: 0;
  top: -8px;
  background-color: #FFFFFF;
  border: 1px solid #8A6B3D;
  border-bottom: 4px solid #8A6B3D;
  padding: 12px 20px 12px 16px;
  max-width: 340px;
  transform: rotate(-0.6deg);
  box-shadow: 0 3px 0 #D9DCC9;
}

.kiteperch-glyph {
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background-color: #7B5EA6;
  color: #FFFFFF;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
}

.kiteperch-brand {
  display: inline;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #26312E;
}

.kiteperch-tags {
  list-style: none;
  margin: 26px auto 0 auto;
  padding: 0;
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: flex-end;
}

.kiteperch-item {
  position: relative;
  padding-top: 8px;
}

.kiteperch-tag {
  position: relative;
  display: block;
  width: 128px;
  padding: 18px 10px;
  background-color: #FFFFFF;
  border: 2px solid #7B5EA6;
  transform: rotate(1deg);
  text-align: center;
  color: #26312E;
  text-decoration: none;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 0.92rem;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.kiteperch-item:nth-child(even) .kiteperch-tag {
  transform: rotate(-1deg);
  border-color: #8A6B3D;
}

.kiteperch-tag:hover {
  background-color: #7B5EA6;
  color: #FFFFFF;
  transform: rotate(0deg);
}

.kiteperch-tag.is-current {
  background-color: #2C6E8A;
  border-color: #2C6E8A;
  color: #FFFFFF;
}

.kiteperch-tail {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 26px;
  background-color: #26312E;
}

.kiteperch-tail::before,
.kiteperch-tail::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 12px;
  height: 12px;
  background-color: #7B5EA6;
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
}

.kiteperch-tail::before { top: 4px; }
.kiteperch-tail::after { top: 16px; background-color: #8A6B3D; }

.kiteperch-toggle {
  display: none;
  background-color: #7B5EA6;
  color: #FFFFFF;
  border: 0;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
  max-width: 1240px;
  margin: 26px auto 0 auto;
  width: 100%;
  text-align: left;
}

/* ---------------------------------------------------------------------
   HERO: WIND WINDOW SCENE .windwindow
   --------------------------------------------------------------------- */
.windwindow {
  position: relative;
  background-color: #FFFFFF;
  border-top: 2px solid #D9DCC9;
  border-bottom: 2px solid #D9DCC9;
  padding: 60px 20px 0 20px;
  overflow-x: hidden;
}

.windwindow-sky {
  position: relative;
  max-width: 1240px;
  min-height: 520px;
  margin: 0 auto;
}

.windwindow-cloud {
  position: absolute;
  background-color: #FFFFFF;
  border: 2px dashed #7B5EA6;
  border-radius: 26px 34px 20px 30px;
  height: 54px;
}

.windwindow-cloud.cloud-one {
  top: 24px;
  left: 30%;
  width: 260px;
  transform: rotate(-1.4deg);
}

.windwindow-cloud.cloud-two {
  top: 108px;
  left: 6%;
  width: 190px;
  height: 44px;
  transform: rotate(1.1deg);
  border-color: #8A6B3D;
}

.windwindow-cloud.cloud-three {
  top: 190px;
  left: 52%;
  width: 240px;
  height: 48px;
  transform: rotate(-0.8deg);
}

.windwindow-cloud.cloud-four {
  top: 330px;
  left: 26%;
  width: 210px;
  height: 42px;
  transform: rotate(1.6deg);
  border-color: #8A6B3D;
}

.windwindow-headline {
  position: relative;
  z-index: 6;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.windwindow-strip {
  display: inline-block;
  background-color: #FFFFFF;
  border: 2px solid #26312E;
  padding: 10px 20px;
  font-size: 2.3rem;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  color: #26312E;
  margin: 0 0 10px 0;
  clip-path: polygon(0 8%, 96% 0, 100% 88%, 4% 100%);
}

.windwindow-strip.strip-two { margin-left: 40px; }
.windwindow-strip.strip-three { margin-left: 12px; }

.windwindow-accent {
  color: #7B5EA6;
}

.windwindow-sash {
  position: absolute;
  left: 4%;
  bottom: 60px;
  width: 300px;
  height: 340px;
  border: 8px solid #8A6B3D;
  border-bottom-width: 14px;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px #D9DCC9;
}

.windwindow-sash-upper {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  height: 150px;
  background-color: #2C6E8A;
}

.windwindow-sash-mullion {
  position: absolute;
  top: -8px;
  bottom: 0;
  left: 50%;
  width: 8px;
  background-color: #8A6B3D;
  transform: translateX(-50%);
}

.windwindow-sill {
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -20px;
  height: 18px;
  background-color: #8A6B3D;
  border-bottom: 4px solid #6E542C;
}

.windwindow-reel {
  position: absolute;
  right: 12px;
  bottom: 4px;
  width: 46px;
  height: 46px;
  background-color: #7B5EA6;
  border-radius: 50%;
  border: 4px solid #26312E;
  animation: wokuaiSpin 9s linear infinite;
}

.windwindow-reel::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 36px;
  width: 26px;
  height: 6px;
  background-color: #26312E;
  border-radius: 3px;
}

.windwindow-kite {
  position: absolute;
  z-index: 4;
}

.windwindow-kite-diamond {
  top: 40px;
  right: 12%;
  width: 140px;
  height: 190px;
  background-color: #BF4A36;
  clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%);
  border: 0;
}

.windwindow-kite-diamond::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #26312E;
  transform: translateX(-50%);
}

.windwindow-hexagon {
  top: 250px;
  right: 36%;
  width: 110px;
  height: 118px;
  background-color: #2C6E8A;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.windwindow-string {
  position: absolute;
  border-top: 2px solid #26312E;
  transform-origin: left center;
  z-index: 3;
}

.windwindow-string.string-one {
  top: 120px;
  right: 19%;
  width: 340px;
  transform: rotate(9deg);
}

.windwindow-string.string-two {
  top: 300px;
  right: 42%;
  width: 300px;
  transform: rotate(-8deg);
}

.windwindow-bench {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  background-color: #F2F3EC;
  border: 3px solid #8A6B3D;
  border-top: 0;
  padding: 26px 30px 30px 30px;
  box-shadow: 0 6px 0 #D9DCC9;
}

.windwindow-intro {
  max-width: 760px;
  color: #26312E;
  font-size: 1.05rem;
}

.windwindow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 14px;
}

.windwindow-cta {
  display: inline-block;
  background-color: #7B5EA6;
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 34px;
  border-radius: 60px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 0 0 2px #7B5EA6;
}

.windwindow-cta:hover {
  background-color: #2C6E8A;
  color: #FFFFFF;
  box-shadow: 0 0 0 2px #2C6E8A;
}

.windwindow-tag-link {
  position: relative;
  display: inline-block;
  background-color: #FFFFFF;
  border: 2px solid #8A6B3D;
  color: #26312E;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 20px 12px 34px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}

.windwindow-tag-link:hover {
  color: #7B5EA6;
}

/* ---------------------------------------------------------------------
   KITE FLIGHT GALLERY .kiteflight
   --------------------------------------------------------------------- */
.kiteflight {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px 60px 20px;
}

.kiteflight-head {
  max-width: 780px;
  margin-bottom: 40px;
}

.kiteflight-kicker {
  display: inline-block;
  background-color: #3A4A44;
  color: #FFFFFF;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.kiteflight-rack {
  position: relative;
  background-color: #FFFFFF;
  border: 2px solid #D9DCC9;
  padding: 40px 40px 50px 40px;
}

.kiteflight-post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  background-color: #8A6B3D;
  border-left: 3px solid #6E542C;
  border-right: 3px solid #6E542C;
}

.kiteflight-post.post-left { left: 18px; }
.kiteflight-post.post-right { right: 18px; }

.kiteflight-crossrail {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #8A6B3D;
  border-top: 3px solid #6E542C;
  border-bottom: 3px solid #6E542C;
}

.kiteflight-crossrail.rail-one { top: 120px; }
.kiteflight-crossrail.rail-two { top: 320px; }
.kiteflight-crossrail.rail-three { top: 520px; }

.kiteflight-hang {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding: 0 30px 0 40px;
}

.kiteflight-cell {
  flex: 1 1 320px;
  max-width: 560px;
  padding-top: 6px;
}

.kiteflight-cell.cell-b { margin-top: 34px; }
.kiteflight-cell.cell-c { margin-top: 12px; }
.kiteflight-cell.cell-d { margin-top: 46px; }
.kiteflight-cell.cell-e { margin-top: 8px; }
.kiteflight-cell.cell-f { margin-top: 38px; }

.kiteflight-kitefigure {
  position: relative;
  width: 96px;
  height: 108px;
  margin: 0 0 10px 6px;
}

.kiteflight-kitefigure .kf-string {
  position: absolute;
  left: 46px;
  top: -22px;
  width: 2px;
  height: 26px;
  background-color: #26312E;
}

.kf-shape {
  position: absolute;
  left: 0;
  top: 2px;
  width: 96px;
  height: 104px;
}

.kf-diamond {
  background-color: #BF4A36;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.kf-hexagon {
  background-color: #FFFFFF;
  border: 2px solid #2C6E8A;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.kf-hexagon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #2C6E8A;
  transform: translateX(-50%);
}

.kf-swallow {
  background-color: #FFFFFF;
  border: 2px solid #26312E;
  clip-path: polygon(0 30%, 50% 0, 100% 30%, 82% 100%, 50% 74%, 18% 100%);
}

.kf-box {
  background-color: #F2F3EC;
  border: 2px solid #8A6B3D;
  clip-path: polygon(20% 0, 80% 0, 100% 26%, 100% 74%, 80% 100%, 20% 100%, 0 74%, 0 26%);
}

.kf-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #8A6B3D;
  transform: translateX(-50%);
}

.kf-butterfly {
  background-color: #2C6E8A;
  clip-path: polygon(50% 40%, 88% 0, 100% 34%, 74% 62%, 96% 100%, 50% 76%, 4% 100%, 26% 62%, 0 34%, 12% 0);
}

.kf-dragon {
  background-color: #BF4A36;
  clip-path: polygon(0 46%, 40% 8%, 74% 22%, 100% 48%, 70% 72%, 36% 88%);
}

.kf-dragon::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -22px;
  width: 54px;
  height: 14px;
  background-color: #BF4A36;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}

.kiteflight-card {
  position: relative;
  background-color: #F2F3EC;
  border: 2px solid #26312E;
  padding: 20px 22px;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 96% 100%, 0 100%);
}

.kiteflight-card.card-stamped {
  border: 4px double #BF4A36;
}

.kiteflight-wtag {
  position: absolute;
  top: -12px;
  right: 16px;
  background-color: #7B5EA6;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 9px;
}

.kiteflight-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.22rem;
}

.kiteflight-card p {
  margin: 0 0 10px 0;
  color: #26312E;
  font-size: 0.97rem;
}

.kiteflight-link {
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   ACCENT STRIP: STRING TENSION STRIP .stringtension
   --------------------------------------------------------------------- */
.stringtension {
  background-color: #3A4A44;
  color: #FFFFFF;
  padding: 30px 20px 34px 20px;
  position: relative;
}

.stringtension-inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.stringtension-bobbin {
  flex: 0 0 auto;
  position: relative;
  width: 62px;
  height: 62px;
  background-color: #26312E;
  border: 4px solid #D9DCC9;
  border-radius: 50%;
}

.stringtension-bobbin::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border: 3px solid #7B5EA6;
  border-radius: 50%;
}

.stringtension-sag {
  flex: 1 1 380px;
  position: relative;
  height: 46px;
}

.stringtension-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 24px;
  border-top: 3px solid #FFFFFF;
  border-radius: 50% 50% 0 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.stringtension-arrow {
  position: absolute;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #D9DCC9;
}

.stringtension-arrow.arrow-a { left: 22%; }
.stringtension-arrow.arrow-b { right: 24%; transform: rotate(180deg); }

.stringtension-note {
  flex: 1 1 360px;
  color: #FFFFFF;
  font-size: 1rem;
  margin: 0;
}

/* ---------------------------------------------------------------------
   HOMEPAGE NARRATIVE / SERVICE WEAVE
   --------------------------------------------------------------------- */
.wokuaistory {
  max-width: 1240px;
  margin: 0 auto;
  padding: 66px 20px 40px 20px;
}

.wokuaistory-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.wokuaistory-main {
  flex: 1 1 560px;
}

.wokuaistory-aside {
  flex: 1 1 300px;
  background-color: #FFFFFF;
  border: 2px solid #D9DCC9;
  border-left: 8px solid #7B5EA6;
  padding: 26px 24px;
}

.wokuaistory-aside h3 {
  margin-top: 0;
}

.wokuaistory-list {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
}

.wokuaistory-list li {
  padding: 9px 0 9px 22px;
  border-bottom: 1px dashed #D9DCC9;
  position: relative;
}

.wokuaistory-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 10px;
  height: 10px;
  background-color: #7B5EA6;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.wokuaistory-quote {
  background-color: #F2F3EC;
  border: 2px solid #8A6B3D;
  padding: 20px 22px;
  margin: 26px 0;
  font-style: italic;
  color: #26312E;
}

.wokuai-detail {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 20px 50px 20px;
}

.wokuai-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.wokuai-detail-card {
  flex: 1 1 340px;
  background-color: #FFFFFF;
  border: 2px solid #26312E;
  padding: 24px;
}

.wokuai-detail-card.kdc-b { border-top: 8px solid #2C6E8A; }
.wokuai-detail-card.kdc-c { border-top: 8px solid #7B5EA6; }

.wokuai-detail-card h3 {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   FOOTER: DOORFRAME SIGNS BASE .doorway
   --------------------------------------------------------------------- */
.doorway {
  background-color: #F2F3EC;
  padding: 60px 20px 0 20px;
  border-top: 2px solid #D9DCC9;
}

.doorway-frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 130px 0 130px;
}

.doorway-lintel {
  background-color: #8A6B3D;
  border-top: 4px solid #6E542C;
  border-bottom: 4px solid #6E542C;
  padding: 22px 28px;
  color: #26312E;
}

.doorway-lintel h2 {
  margin: 0 0 8px 0;
  color: #FFFFFF;
  font-size: 1.5rem;
}

.doorway-lintel p {
  margin: 0;
  color: #FFFFFF;
  font-size: 0.98rem;
}

.doorway-body {
  position: relative;
  background-color: #FFFFFF;
  border-left: 6px solid #8A6B3D;
  border-right: 6px solid #8A6B3D;
  padding: 34px 30px;
  min-height: 220px;
}

.doorway-post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  background-color: #F2F3EC;
  border: 2px solid #8A6B3D;
}

.doorway-post.post-left { left: -110px; }
.doorway-post.post-right { right: -110px; }

.doorway-sign {
  display: block;
  background-color: #FFFFFF;
  border: 2px solid #7B5EA6;
  margin: 10px auto;
  width: 68px;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  color: #26312E;
  font-weight: 700;
  font-size: 0.86rem;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
}

.doorway-sign:hover {
  background-color: #7B5EA6;
  color: #FFFFFF;
}

.doorway-hours {
  max-width: 620px;
}

.doorway-hours h3 {
  margin-top: 0;
}

.doorway-glyph {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #7B5EA6;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.3rem;
  border-radius: 50%;
  margin-top: 8px;
}

.doorway-sill {
  max-width: 1100px;
  margin: 0 auto;
  background-color: #D9DCC9;
  border-top: 3px solid #8A6B3D;
  padding: 22px 24px;
  color: #26312E;
  font-size: 0.94rem;
}

.doorway-sill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 10px 0;
}

.doorway-sill a {
  color: #26312E;
  font-weight: 700;
}

.doorway-sill a:hover {
  color: #7B5EA6;
}

.doorway-glyph-small {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #BF4A36;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  margin-right: 6px;
  vertical-align: middle;
}

.doorway-copy {
  margin: 0;
  color: #26312E;
}

/* ---------------------------------------------------------------------
   INNER PAGE shared heading band
   --------------------------------------------------------------------- */
.pageband {
  background-color: #3A4A44;
  color: #FFFFFF;
  padding: 54px 20px;
}

.pageband-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.pageband h1 {
  color: #FFFFFF;
  margin-bottom: 10px;
}

.pageband p {
  color: #FFFFFF;
  max-width: 780px;
  margin: 0;
}

.pageband-crumb {
  margin: 0 0 16px 0;
  font-size: 0.86rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #D9DCC9;
}

.pageband-crumb a {
  color: #D9DCC9;
}

/* ---------------------------------------------------------------------
   Services page detail blocks
   --------------------------------------------------------------------- */
.svcrail {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 20px 40px 20px;
}

.svcrail-item {
  background-color: #FFFFFF;
  border: 2px solid #D9DCC9;
  border-left: 8px solid #7B5EA6;
  padding: 28px 30px;
  margin-bottom: 26px;
}

.svcrail-item:nth-child(2n) {
  border-left-color: #2C6E8A;
}

.svcrail-item:nth-child(3n) {
  border-left-color: #8A6B3D;
}

.svcrail-item h2 {
  font-size: 1.55rem;
  margin-top: 0;
}

.svcrail-index {
  display: inline-block;
  background-color: #26312E;
  color: #FFFFFF;
  font-size: 0.76rem;
  letter-spacing: 1px;
  padding: 4px 10px;
  margin-bottom: 12px;
}

.svcprocess {
  background-color: #FFFFFF;
  border: 2px solid #26312E;
  max-width: 1240px;
  margin: 0 auto 40px auto;
  padding: 34px 30px;
}

.svcprocess-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 24px 0 0 0;
  padding: 0;
  list-style: none;
}

.svcprocess-steps li {
  flex: 1 1 200px;
  background-color: #F2F3EC;
  border-top: 5px solid #7B5EA6;
  padding: 18px;
}

.svccta {
  max-width: 1240px;
  margin: 0 auto 60px auto;
  background-color: #3A4A44;
  color: #FFFFFF;
  padding: 36px 34px;
}

.svccta h2 {
  color: #FFFFFF;
  margin-top: 0;
}

.svccta a.svccta-link {
  display: inline-block;
  margin-top: 10px;
  background-color: #7B5EA6;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 40px;
}

.svccta a.svccta-link:hover {
  background-color: #FFFFFF;
  color: #26312E;
}

/* ---------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------- */
.contactwrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.contactcol {
  flex: 1 1 440px;
}

.contactpanel {
  background-color: #FFFFFF;
  border: 2px solid #D9DCC9;
  padding: 28px 26px;
}

.contactpanel h2 {
  margin-top: 0;
}

.contactfield {
  margin-bottom: 16px;
}

.contactfield label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.contactfield input,
.contactfield textarea {
  width: 100%;
  font-size: 1rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #26312E;
  background-color: #F2F3EC;
  border: 2px solid #8A6B3D;
  padding: 11px 13px;
  border-radius: 3px;
}

.contactfield input:focus,
.contactfield textarea:focus {
  outline: 3px solid #7B5EA6;
}

.contactsubmit {
  background-color: #7B5EA6;
  color: #FFFFFF;
  border: 0;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 14px 32px;
  border-radius: 40px;
  cursor: pointer;
}

.contactsubmit:hover {
  background-color: #2C6E8A;
}

.contactinfo-item {
  padding: 14px 0;
  border-bottom: 1px dashed #D9DCC9;
}

.contactinfo-item strong {
  display: block;
  color: #26312E;
}

.contactinfo-item span,
.contactinfo-item a {
  color: #26312E;
}

.contactfaq {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
}

.contactfaq h2 {
  margin-bottom: 20px;
}

.contactfaq-item {
  background-color: #FFFFFF;
  border: 2px solid #26312E;
  margin-bottom: 14px;
}

.contactfaq-q {
  display: block;
  width: 100%;
  text-align: left;
  background-color: #FFFFFF;
  border: 0;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #26312E;
  padding: 18px 20px;
  cursor: pointer;
}

.contactfaq-q:hover {
  background-color: #F2F3EC;
}

.contactfaq-a {
  padding: 0 20px 18px 20px;
  margin: 0;
  color: #26312E;
}

.contactfaq-a[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------
   Scroll reveal (safe without JS)
   --------------------------------------------------------------------- */
.wokuai-reveal {
  animation: none;
}

html.js-wokuai .wokuai-reveal {
  visibility: visible;
  transform: none;
  transition: transform 0.5s ease;
}

html.js-wokuai .wokuai-reveal.wokuai-hidden {
  visibility: hidden;
  transform: translateY(14px);
}

@keyframes wokuaiSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .doorway-frame { padding: 0 116px; }
}

@media (max-width: 900px) {
  h1 { font-size: 2.1rem; }
  .windwindow-strip { font-size: 1.7rem; }

  .kiteperch-toggle { display: block; }

  .kiteperch-tags {
    display: none;
    flex-direction: column;
    gap: 14px;
    justify-content: flex-start;
  }

  .kiteperch-tags.is-open {
    display: flex;
  }

  .kiteperch-tag {
    width: 100%;
    clip-path: none;
    transform: none;
    padding: 16px;
    border-left: 8px solid #7B5EA6;
  }

  .kiteperch-tail { display: none; }

  .doorway-frame { padding: 0 20px; }
  .doorway-post { position: static; width: auto; margin-bottom: 14px; }
  .doorway-sign { writing-mode: horizontal-tb; width: auto; display: inline-block; padding: 10px 16px; margin: 0 8px 8px 0; }

  .windwindow-sash { width: 210px; height: 240px; }
  .windwindow-sash-upper { height: 96px; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.72rem; }
  h2 { font-size: 1.5rem; }
  .windwindow-strip { font-size: 1.25rem; padding: 8px 12px; }
  .windwindow-strip.strip-two { margin-left: 14px; }
  .windwindow-sash { position: static; margin: 20px auto; width: 240px; }
  .windwindow-hexagon { display: none; }
  .windwindow-sky { min-height: 420px; }
  .kiteflight-rack { padding: 28px 18px 34px 18px; }
  .kiteflight-hang { padding: 0 4px; }
  .kiteperch-sheet { position: static; max-width: 100%; transform: none; margin-bottom: 8px; }
  .kiteperch { padding-bottom: 40px; }
  .stringtension-inner { flex-direction: column; align-items: flex-start; }
}