*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-size: 16px;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  background-color: #D8F2F0;
  color: #22385C;
  line-height: 1.68;
  overflow-x: hidden;
}

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin-top: 0; }
a { color: #22385C; }

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

.keelrig-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #DCB05C;
  color: #22385C;
  padding: 10px 18px;
  z-index: 40;
}
.keelrig-skip:focus { left: 12px; top: 12px; }

/* ---------- NAV: KEEL RIG CABLE ---------- */
.keelrig {
  background-color: #22385C;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 4px solid #DCB05C;
}
.keelrig-rail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}
.keelrig-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 1.28rem;
  letter-spacing: 0.04em;
  color: #D8F2F0;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
}
.keelrig-brand-dot {
  width: 11px;
  height: 11px;
  background-color: #9C8C3C;
  display: inline-block;
  box-shadow: 0 0 0 3px #22385C, 0 0 0 4px #C8A882;
}
.keelrig-nav {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.keelrig-cable {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 1px;
  background-color: #DCB05C;
  transform: rotate(-2.6deg);
  transform-origin: left center;
}
.keelrig-tie {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: #F0FAF8;
  color: #22385C;
  text-decoration: none;
  padding: 8px 14px 8px 11px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 1px solid #22385C;
  transition: background-color 140ms ease, color 140ms ease;
}
.keelrig-tie:nth-child(2) { transform: translateY(-6px); }
.keelrig-tie:nth-child(3) { transform: translateY(6px); }
.keelrig-tie:nth-child(4) { transform: translateY(-6px); }
.keelrig-tie:nth-child(5) { transform: translateY(6px); }
.keelrig-tie:nth-child(6) { transform: translateY(-6px); }
.keelrig-tie:hover, .keelrig-tie:focus {
  background-color: #DCB05C;
  color: #22385C;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #9C8C3C;
}
.keelrig-tie:hover .keelrig-cleat, .keelrig-tie:focus .keelrig-cleat { background-color: #22385C; }
.keelrig-cleat {
  width: 7px;
  height: 7px;
  background-color: #3E8896;
  display: inline-block;
  flex: 0 0 auto;
}
.keelrig-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  background-color: #F0FAF8;
  border: 1px solid #DCB05C;
  padding: 10px 11px;
  cursor: pointer;
}
.keelrig-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #22385C;
}
.keelrig-drawer { display: none; }

/* ---------- HERO: SPARROW RIG SAILS ---------- */
.sparrowrig {
  max-width: 1200px;
  margin: 0 auto;
  padding: 54px 24px 0;
  position: relative;
}
.sparrowrig-sky {
  max-width: 660px;
  position: relative;
  z-index: 5;
}
.sparrowrig-kicker {
  margin: 0 0 16px;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3E8896;
  font-weight: 700;
  border-left: 4px solid #C8A882;
  padding-left: 12px;
}
.sparrowrig-headline {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: clamp(2.1rem, 5vw, 3.55rem);
  line-height: 1.14;
  margin: 0 0 22px;
  color: #22385C;
  letter-spacing: -0.01em;
}
.sparrowrig-display {
  font-style: italic;
  color: #DCB05C;
  font-size: 1.22em;
  letter-spacing: 0.005em;
}
.sparrowrig-lede {
  font-size: 1.06rem;
  color: #22385C;
  max-width: 620px;
  margin: 0 0 8px;
}
.sparrowrig-link {
  color: #22385C;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #DCB05C;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sparrowrig-link:hover { text-decoration-color: #9C8C3C; }
.sparrowrig-scene {
  position: relative;
  height: 340px;
  margin-top: -170px;
  z-index: 1;
  pointer-events: none;
}
.sparrowrig-mast {
  position: absolute;
  right: 26%;
  bottom: 0;
  width: 5px;
  height: 330px;
  background-color: #22385C;
}
.sparrowrig-mainsail {
  position: absolute;
  right: 26%;
  bottom: 96px;
  width: 0;
  height: 0;
  border-left: 220px solid #D8F2F0;
  border-top: 226px solid #D8F2F0;
  border-right: 0 solid #D8F2F0;
  border-bottom: 0 solid #D8F2F0;
  transform: skewY(-3deg);
}
.sparrowrig-jib {
  position: absolute;
  right: 24%;
  bottom: 108px;
  width: 0;
  height: 0;
  border-right: 158px solid #F0FAF8;
  border-top: 196px solid #F0FAF8;
  border-left: 0 solid #F0FAF8;
  border-bottom: 0 solid #F0FAF8;
  transform: skewY(5deg);
}
.sparrowrig-seam {
  position: absolute;
  right: 26%;
  bottom: 96px;
  width: 3px;
  height: 220px;
  background-color: #22385C;
  transform: rotate(46deg);
  transform-origin: bottom center;
}
.sparrowrig-boom {
  position: absolute;
  right: 3%;
  bottom: 94px;
  width: 300px;
  height: 5px;
  background-color: #22385C;
  transform: rotate(9deg);
}
.sparrowrig-deck {
  position: relative;
  height: 46px;
  background-color: #C8A882;
  border-top: 4px solid #22385C;
  border-bottom: 4px solid #22385C;
  z-index: 3;
  background-image: repeating-linear-gradient(90deg, #C8A882 0 56px, #B3966F 56px 58px);
}
.sparrowrig-cta {
  padding: 26px 0 4px;
}
.sparrowrig-bar {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: #DCB05C;
  color: #22385C;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 15px 30px;
  border: 2px solid #22385C;
  transition: background-color 140ms ease;
}
.sparrowrig-bar:hover, .sparrowrig-bar:focus {
  background-color: #C8A882;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #22385C;
}

/* ---------- SECTIONS: SAIL CLOTH RUN ---------- */
.sailcloth {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 20px;
}
.sailcloth-head { max-width: 780px; margin-bottom: 36px; }
.sailcloth-eyebrow {
  margin: 0 0 10px;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3E8896;
  font-weight: 700;
}
.sailcloth-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.22;
  margin: 0 0 16px;
  color: #22385C;
}
.sailcloth-intro { font-size: 1.04rem; color: #22385C; margin: 0; }

.sailcloth-run {
  border-top: 2px solid #22385C;
}
.sailcloth-panel {
  background-color: #F0FAF8;
  border-bottom: 1px solid #22385C;
  border-left: 3px solid #3E8896;
  padding: 26px 30px 24px 28px;
  position: relative;
}
.sailcloth-panel:hover { background-color: #E6F6F4; }
.sailcloth-name {
  font-size: 1.28rem;
  margin: 0 0 10px;
  color: #22385C;
  letter-spacing: 0.01em;
}
.sailcloth-name a {
  color: #22385C;
  text-decoration: none;
  border-bottom: 2px solid #DCB05C;
  padding-bottom: 2px;
}
.sailcloth-name a:hover { border-bottom-color: #9C8C3C; }
.sailcloth-text {
  margin: 0 0 10px;
  color: #22385C;
  max-width: 900px;
}
.sailcloth-text:last-child { margin-bottom: 0; }
.sailcloth-grommets::before,
.sailcloth-grommets::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #9C8C3C;
  background-color: #F0FAF8;
  border-radius: 50%;
  box-shadow: 13px 0 0 -2px #F0FAF8, 13px 0 0 0 #9C8C3C;
}
.sailcloth-grommets::before { top: 10px; right: 24px; }
.sailcloth-grommets::after { bottom: 10px; right: 24px; }

.sailcloth-prose { max-width: 860px; }
.sailcloth-sub {
  font-size: 1.16rem;
  color: #22385C;
  margin: 30px 0 10px;
  padding-left: 14px;
  border-left: 4px solid #C8A882;
}
.sailcloth-prose p { color: #22385C; margin-bottom: 14px; }
.sailcloth-prose a {
  color: #22385C;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #DCB05C;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sailcloth-prose a:hover { text-decoration-color: #9C8C3C; }
.sailcloth-yard { padding-top: 56px; }
.sailcloth-note { padding-top: 40px; }

/* ---------- ACCENT: KEEL DECK BAND ---------- */
.keeldeck {
  background-color: #3E8896;
  border-top: 3px solid #22385C;
  border-bottom: 3px solid #22385C;
  position: relative;
  padding: 0 0 34px;
  margin-top: 40px;
}
.keeldeck-planks {
  height: 14px;
  background-color: #C8A882;
  background-image: repeating-linear-gradient(90deg, #C8A882 0 38px, #DCB05C 38px 62px, #22385C 62px 63px);
  border-bottom: 3px solid #22385C;
  margin-bottom: 26px;
}
.keeldeck-line {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  color: #F0FAF8;
  font-size: 1.1rem;
  line-height: 1.62;
}

/* ---------- FOOTER: RUDDER TRAY CLOSER ---------- */
.ruddertray {
  background-color: #D8F2F0;
  padding: 54px 24px 40px;
  border-top: 1px solid #8E9C9C;
  margin-top: 0;
}
.ruddertray-blade {
  max-width: 1152px;
  margin: 0 auto 34px;
  height: 16px;
  background-color: #22385C;
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 6% 50%);
}
.ruddertray-inner { max-width: 1152px; margin: 0 auto; }
.ruddertray-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 1rem;
}
.ruddertray-links a {
  color: #22385C;
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 2px;
  border-bottom: 1px solid #D8F2F0;
}
.ruddertray-links a:hover { border-bottom-color: #9C8C3C; }
.ruddertray-dot { color: #8E9C9C; }
.ruddertray-body { border-top: 1px solid #8E9C9C; padding-top: 22px; }
.ruddertray-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: #22385C;
  margin: 0 0 8px;
  letter-spacing: 0.03em;
}
.ruddertray-blurb { max-width: 720px; color: #22385C; margin: 0 0 16px; font-size: 0.97rem; }
.ruddertray-meta {
  color: #22385C;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.9;
}
.ruddertray-meta a { color: #22385C; font-weight: 700; text-decoration: underline; text-decoration-color: #DCB05C; text-underline-offset: 3px; }
.ruddertray-meta a:hover { text-decoration-color: #9C8C3C; }
.ruddertray-sep { color: #8E9C9C; margin: 0 8px; }
.ruddertray-cleat {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #9C8C3C;
  margin-right: 8px;
}

/* ---------- SHARED PAGE PIECES ---------- */
.pagehead {
  max-width: 1200px;
  margin: 0 auto;
  padding: 58px 24px 10px;
}
.pagehead-kicker {
  margin: 0 0 12px;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3E8896;
  font-weight: 700;
}
.pagehead-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.16;
  margin: 0 0 16px;
  color: #22385C;
}
.pagehead-lede { max-width: 760px; font-size: 1.06rem; color: #22385C; margin: 0; }

/* Services detail rows */
.sailcloth-detail {
  background-color: #F0FAF8;
  border: 1px solid #8E9C9C;
  border-left: 4px solid #3E8896;
  padding: 26px 30px;
  margin-bottom: 20px;
}
.sailcloth-detail h3 { margin: 0 0 10px; font-size: 1.3rem; color: #22385C; }
.sailcloth-detail p { margin: 0 0 12px; color: #22385C; }
.sailcloth-detail p:last-child { margin-bottom: 0; }
.sailcloth-detail-tag {
  display: inline-block;
  background-color: #C8A882;
  color: #22385C;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  margin-bottom: 12px;
  border: 1px solid #22385C;
}

/* Process list */
.sailcloth-steps { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: rigstep; }
.sailcloth-steps li {
  position: relative;
  background-color: #F0FAF8;
  border-bottom: 1px solid #22385C;
  border-left: 3px solid #C8A882;
  padding: 20px 26px 18px 62px;
  counter-increment: rigstep;
}
.sailcloth-steps li::before {
  content: counter(rigstep);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  background-color: #3E8896;
  color: #F0FAF8;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  border: 1px solid #22385C;
}
.sailcloth-steps h3 { margin: 0 0 6px; font-size: 1.08rem; color: #22385C; }
.sailcloth-steps p { margin: 0; color: #22385C; font-size: 0.98rem; }

/* Contact page */
.sailcloth-contactgrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  align-items: start;
  padding-bottom: 10px;
}
.keelform {
  background-color: #F0FAF8;
  border: 1px solid #8E9C9C;
  border-top: 4px solid #3E8896;
  padding: 28px 30px;
}
.keelform-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #22385C;
  margin-bottom: 6px;
}
.keelform-field { margin-bottom: 18px; }
.keelform-input, .keelform-textarea {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 1rem;
  color: #22385C;
  background-color: #D8F2F0;
  border: 1px solid #22385C;
  padding: 11px 13px;
}
.keelform-input:focus, .keelform-textarea:focus {
  outline: 3px solid #DCB05C;
  outline-offset: 1px;
}
.keelform-textarea { min-height: 150px; resize: vertical; }
.keelform-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #DCB05C;
  color: #22385C;
  border: 2px solid #22385C;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 13px 26px;
  cursor: pointer;
}
.keelform-submit:hover { background-color: #C8A882; }
.keelform-status {
  margin: 16px 0 0;
  font-size: 0.94rem;
  color: #22385C;
  min-height: 1.2em;
}
.sailcloth-aside {
  background-color: #22385C;
  color: #F0FAF8;
  padding: 28px 28px 26px;
  border-top: 5px solid #DCB05C;
}
.sailcloth-aside h2 { color: #F0FAF8; margin: 0 0 14px; font-size: 1.2rem; }
.sailcloth-aside p { color: #F0FAF8; margin: 0 0 12px; font-size: 0.97rem; }
.sailcloth-aside a { color: #DCB05C; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sailcloth-aside a:hover { color: #F0FAF8; }
.sailcloth-aside-dl { margin: 0; }
.sailcloth-aside-dl dt {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C8A882;
  margin-top: 14px;
  font-weight: 700;
}
.sailcloth-aside-dl dd { margin: 2px 0 0; color: #F0FAF8; font-size: 0.97rem; }

.sailcloth-faq { max-width: 880px; }
.sailcloth-faq-item {
  border-bottom: 1px solid #22385C;
  background-color: #F0FAF8;
}
.sailcloth-faq-trigger {
  width: 100%;
  text-align: left;
  background-color: transparent;
  border: 0;
  padding: 18px 18px 18px 18px;
  font-family: Georgia, serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: #22385C;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.sailcloth-faq-trigger::after {
  content: "+";
  font-size: 1.3rem;
  color: #3E8896;
  font-weight: 700;
}
.sailcloth-faq-item.is-open .sailcloth-faq-trigger::after { content: "\2212"; }
.sailcloth-faq-panel {
  padding: 0 18px 18px;
  color: #22385C;
  font-size: 0.98rem;
  display: none;
}
.sailcloth-faq-item.is-open .sailcloth-faq-panel { display: block; }

.sailcloth-contact-band {
  max-width: 1200px;
  margin: 10px auto 0;
  padding: 0 24px 30px;
}
.sailcloth-contact-band-in {
  background-color: #C8A882;
  border: 2px solid #22385C;
  padding: 22px 28px;
  color: #22385C;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  justify-content: space-between;
}
.sailcloth-contact-band-in strong { font-size: 1.06rem; }
.sailcloth-contact-band-in a {
  color: #22385C;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #22385C;
  text-underline-offset: 3px;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.js-reveal .reveal.is-revealed { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .sailcloth-contactgrid { grid-template-columns: 1fr; }
  .sparrowrig-scene { height: 280px; margin-top: -120px; }
  .sparrowrig-mainsail { border-left-width: 160px; border-top-width: 190px; }
  .sparrowrig-jib { border-right-width: 118px; border-top-width: 164px; }
  .sparrowrig-mast { height: 270px; }
  .sparrowrig-boom { width: 210px; }
}

@media (max-width: 780px) {
  .keelrig-nav { display: none; }
  .keelrig-toggle { display: flex; }
  .keelrig.is-open .keelrig-drawer {
    display: block;
    border-top: 1px solid #3E8896;
    padding: 6px 24px 18px;
  }
  .keelrig-drawer a {
    display: block;
    color: #D8F2F0;
    text-decoration: none;
    padding: 11px 0;
    border-bottom: 1px solid #3E8896;
    font-weight: 700;
  }
  .keelrig-drawer a:hover { text-decoration: underline; text-decoration-color: #DCB05C; }
  .sparrowrig-scene { height: 210px; margin-top: -40px; }
  .sparrowrig-mainsail { border-left-width: 118px; border-top-width: 150px; }
  .sparrowrig-jib { border-right-width: 88px; border-top-width: 128px; }
  .sparrowrig-mast { height: 210px; }
  .sparrowrig-boom { width: 160px; }
  .sparrowrig-seam { height: 160px; }
}

@media (max-width: 520px) {
  .sparrowrig { padding-top: 36px; }
  .sparrowrig-scene { display: none; }
  .sparrowrig-headline { font-size: 2rem; }
  .sailcloth { padding-top: 48px; }
  .sailcloth-panel { padding: 22px 20px; }
  .keelform { padding: 22px 20px; }
  .sailcloth-contact-band-in { flex-direction: column; }
}