:root{
  --navy:#173d63; --navy2:#0f2c4a; --red:#bd202b; --green:#16804f;
  --gold:#e3ad1f; --cream:#f8f1df; --paper:#fffaf0; --ink:#17324a;
  --muted:#6f7477; --line:#e8dcc4;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55}
a{text-decoration:none;color:inherit}.topbar{background:var(--navy2);color:white;display:flex;justify-content:center;gap:40px;padding:7px 20px;font-size:13px;letter-spacing:.04em}.topcall{font-weight:800}
.site-header{height:88px;background:rgba(255,250,240,.97);position:sticky;top:0;z-index:50;display:flex;align-items:center;padding:10px max(4vw,22px);gap:28px;border-bottom:1px solid var(--line);box-shadow:0 4px 20px #173d6314}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand img{width:66px;height:66px;object-fit:contain}.brand strong{display:block;font-family:"DM Serif Display",serif;text-transform:uppercase;letter-spacing:.08em;font-size:20px;color:var(--navy)}.brand span{font-family:"Marck Script",cursive;color:var(--navy);font-size:22px}
nav{display:flex;gap:22px;font-weight:700;font-size:14px}nav a:hover{color:var(--red)}
.menu{display:none;background:none;border:0;font-size:28px;color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:800;border:2px solid transparent;cursor:pointer}.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 20px #bd202b2d}.btn-red:hover{background:#a41923}.btn-cream{background:var(--cream);color:var(--navy);border-color:#e4d4b6}.btn-navy{background:var(--navy);color:white}.btn-outline{background:white;border-color:var(--navy);color:var(--navy)}.btn-big{font-size:18px;padding:15px 26px}.btn-full{width:100%}
.hero{min-height:590px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;position:relative;overflow:hidden;background:
  radial-gradient(circle at 80% 30%,#d8eef2 0 13%,transparent 35%),
  linear-gradient(115deg,#fffaf0 0 48%,#d8e9ea 48% 100%);padding:60px max(6vw,28px)}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:8px;background:linear-gradient(90deg,var(--green) 0 25%,var(--gold) 25% 50%,var(--red) 50% 75%,var(--navy) 75%)}
.hero-copy{max-width:700px;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:.17em;color:var(--red);font-weight:800;font-size:12px}.hero h1,.section h2{font-family:"DM Serif Display",serif;line-height:1.03;color:var(--navy);margin:.35em 0}.hero h1{font-size:clamp(48px,6vw,82px)}.hero h1 em{font-family:"Marck Script",cursive;color:var(--red);font-weight:400}.hero p{font-size:18px;max-width:630px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 20px}.trust-row{display:flex;gap:22px;flex-wrap:wrap;font-weight:700;font-size:14px}
.hero-art{position:relative;display:grid;place-items:center;min-height:480px}.hero-logo{width:min(430px,80%);filter:drop-shadow(0 24px 28px #173d6335);z-index:2}.stitch-card{position:absolute;right:0;bottom:35px;background:var(--gold);color:var(--navy);padding:20px 26px;transform:rotate(-2deg);box-shadow:0 14px 28px #173d6330;max-width:270px}.stitch-card strong{font-family:"Marck Script",cursive;font-size:34px;line-height:1}.stitch-card span{display:block;margin-top:8px;font-size:13px;font-weight:700}
.section{padding:82px max(6vw,28px)}.section-heading{max-width:800px;margin-bottom:30px}.section h2{font-size:clamp(38px,5vw,58px)}
.services{background:white}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff;box-shadow:0 12px 30px #173d630d;border-top:7px solid}.service-card.navy{border-top-color:var(--navy)}.service-card.green{border-top-color:var(--green)}.service-card.red{border-top-color:var(--red)}.service-card.gold{border-top-color:var(--gold)}.service-card .icon{font-size:34px}.service-card h3{font-family:"DM Serif Display";font-size:24px;margin:8px 0}
.fabric{background:var(--cream)}.fabric-intro{max-width:850px}.fabric-intro p{max-width:780px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.tab{border:1px solid #d6c7ab;background:#fff;padding:10px 14px;border-radius:999px;font-weight:700;color:var(--navy);cursor:pointer}.tab.active{background:var(--navy);color:white;border-color:var(--navy)}
.fabric-builder{display:grid;grid-template-columns:1.2fr 1fr .72fr;gap:24px;align-items:start}.boat-preview{background:white;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 12px 30px #173d630f}.boat-preview svg{width:100%;display:block}.preview-label{padding:9px 6px 2px;font-size:14px}.preview-label span{color:var(--muted)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{border:2px solid transparent;background:#fff;border-radius:13px;padding:8px;cursor:pointer;text-align:left;color:var(--ink)}.swatch.active{border-color:var(--red);box-shadow:0 0 0 3px #bd202b18}.swatch-chip{height:52px;border-radius:8px;border:1px solid #0002;box-shadow:inset 0 0 0 1px #fff3}.swatch b{display:block;font-size:11px;margin-top:7px}.swatch small{display:block;font-size:9px;color:var(--muted)}
.choice-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 12px 30px #173d630d}.choice-card h3{font-family:"DM Serif Display";font-size:26px;margin:0 0 12px}.choice-card label{display:block;font-size:12px;font-weight:800;margin:12px 0}.choice-card input,.choice-card select{width:100%;font:inherit;margin-top:5px;border:1px solid #d7d2c7;border-radius:10px;padding:11px;background:#faf9f5;color:var(--ink)}.choice-note{font-size:12px;color:var(--muted)}#copied{height:18px;font-size:12px;color:var(--green);font-weight:700;margin-top:8px;text-align:center}
.family{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center;background:white}.photo-wrap{position:relative}.photo-wrap:before{content:"";position:absolute;inset:-18px 22px 22px -18px;background:var(--gold);z-index:0;border-radius:22px}.photo-wrap img{position:relative;z-index:1;width:100%;display:block;border-radius:18px;box-shadow:0 18px 35px #173d6325}.family-copy blockquote{font-family:"Marck Script";font-size:32px;color:var(--red);margin:26px 0}
.contact{display:grid;grid-template-columns:1fr 430px;gap:50px;align-items:center;background:linear-gradient(135deg,var(--navy2),var(--navy));color:white}.contact h2{color:white}.contact .eyebrow{color:#ffd360}.contact-card{background:#fff;color:var(--ink);padding:30px;border-radius:20px;text-align:center}.phone-big{font-family:"DM Serif Display";font-size:40px;color:var(--red)}
footer{display:flex;align-items:center;gap:14px;padding:24px max(6vw,28px);background:#0b2034;color:white}.footer-logo{width:58px;height:58px;object-fit:contain}.footer-right{margin-left:auto;color:#c8d5df;font-size:13px}
@media(max-width:1050px){.service-grid{grid-template-columns:repeat(2,1fr)}.fabric-builder{grid-template-columns:1fr 1fr}.choice-card{grid-column:1/-1}.header-call{display:none}nav{gap:13px}}
@media(max-width:760px){.topbar{justify-content:space-between;gap:10px}.site-header{height:78px;padding:8px 16px}.brand img{width:54px;height:54px}.brand strong{font-size:15px}.brand span{font-size:18px}.menu{display:block}nav{display:none;position:absolute;top:78px;left:0;right:0;background:white;padding:18px;box-shadow:0 14px 25px #173d6320;flex-direction:column}nav.open{display:flex}.hero{grid-template-columns:1fr;padding-top:45px}.hero-art{min-height:350px}.hero h1{font-size:50px}.service-grid{grid-template-columns:1fr}.fabric-builder{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(3,1fr)}.choice-card{grid-column:auto}.family,.contact{grid-template-columns:1fr}.contact{gap:20px}.contact-card{width:100%}footer{align-items:flex-start;flex-wrap:wrap}.footer-right{margin-left:0;width:100%}}

/* ---------- About Us ---------- */

.about-us {
  background: #fffaf0;
}

.about-story {
  max-width: 950px;
  margin: 0 auto;
}

.about-copy {
  background: #fff;
  padding: 2.5rem;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(23, 61, 99, 0.10);
  border-top: 5px solid #bd202b;
}

.about-copy h3 {
  color: #173d63;
  font-family: "DM Serif Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-top: 0;
}

.about-copy p {
  font-size: 1.08rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.about-copy strong {
  color: #173d63;
}

@media (max-width: 700px) {
  .about-copy {
    padding: 1.5rem;
  }
}


/* =========================================================
   ABOUT US PAGE
   ========================================================= */

.about-page-header {
  background: #fffaf0;
  border-bottom: 1px solid rgba(23, 61, 99, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.about-nav-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.about-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #173d63;
  text-decoration: none;
  font-family: "DM Serif Display", serif;
  font-size: 1.35rem;
}

.about-brand img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.about-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.about-nav a {
  color: #173d63;
  text-decoration: none;
  font-weight: 700;
}

.about-nav a:hover,
.about-nav a.active {
  color: #bd202b;
}

.about-nav .about-call {
  background: #bd202b;
  color: white;
  padding: 11px 17px;
  border-radius: 999px;
}

.about-nav .about-call:hover {
  color: white;
  transform: translateY(-1px);
}


/* HERO */

.about-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55px;
}

.about-hero-text h1 {
  color: #173d63;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 0.98;
  margin: 10px 0 24px;
}

.about-lead {
  font-size: 1.25rem;
  line-height: 1.75;
  color: #333;
}

.about-hero-photo img {
  display: block;
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 20px 55px rgba(23, 61, 99, 0.17);
}


/* STORY */

.about-story-page {
  background: #f8f1df;
  padding: 80px max(30px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.about-story-photo img {
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.about-story-text h2 {
  margin: 7px 0 25px;
  color: #173d63;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.3rem, 5vw, 4rem);
}

.about-story-text p {
  font-size: 1.08rem;
  line-height: 1.85;
  margin: 0 0 20px;
}

.about-home-message {
  padding: 20px 24px;
  border-left: 5px solid #16804f;
  background: #fffaf0;
  font-family: "DM Serif Display", serif;
  font-size: 1.4rem !important;
  color: #173d63;
}


/* FAMILY GALLERY */

.family-gallery-section,
.joyce-at-work {
  padding: 80px 30px;
}

.family-gallery-section {
  background: #fffaf0;
}

.joyce-at-work {
  background: white;
}

.family-gallery-section .section-heading,
.joyce-at-work .section-heading {
  max-width: 800px;
  text-align: center;
  margin: 0 auto 45px;
}

.family-gallery-section h2,
.joyce-at-work h2 {
  font-family: "DM Serif Display", serif;
  color: #173d63;
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 8px 0 15px;
}

.family-gallery {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 210px;
  gap: 16px;
}

.family-photo {
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.family-photo-large {
  grid-column: span 8;
  grid-row: span 2;
}

.family-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.family-photo:hover img {
  transform: scale(1.025);
}


/* JOYCE WORK GALLERY */

.work-gallery {
  max-width: 1180px;
  margin: 0 auto;
  columns: 3 290px;
  column-gap: 16px;
}

.work-gallery img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 16px;
  break-inside: avoid;
}


/* ABOUT CTA */

.about-cta {
  background: #173d63;
  color: white;
  padding: 65px max(30px, calc((100% - 950px) / 2));
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
}

.about-cta-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.about-cta .eyebrow {
  color: #e3ad1f;
}

.about-cta h2 {
  color: white;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin: 6px 0 12px;
}

.about-cta p {
  line-height: 1.7;
}

.about-big-call {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 24px;
  background: #e3ad1f;
  color: #173d63;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}


/* FOOTER */

.about-footer {
  background: #102c48;
  color: white;
  text-align: center;
  padding: 45px 20px;
}

.about-footer img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.about-footer a {
  color: white;
}


/* MOBILE */

@media (max-width: 800px) {

  .about-nav-wrap {
    padding: 12px 0;
    align-items: flex-start;
  }

  .about-brand span {
    display: none;
  }

  .about-brand img {
    width: 58px;
    height: 58px;
  }

  .about-nav {
    justify-content: flex-end;
    gap: 11px;
    font-size: 0.9rem;
  }

  .about-hero,
  .about-story-page {
    grid-template-columns: 1fr;
  }

  .about-hero {
    padding: 45px 22px;
    gap: 30px;
  }

  .about-story-page {
    padding: 55px 22px;
    gap: 35px;
  }

  .family-gallery-section,
  .joyce-at-work {
    padding: 55px 20px;
  }

  .family-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 230px;
  }

  .family-photo,
  .family-photo-large {
    grid-column: span 1;
    grid-row: span 1;
  }

  .family-photo-large {
    grid-column: span 2;
  }

  .about-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-cta-logo {
    margin: 0 auto;
  }
}


@media (max-width: 520px) {

  .about-nav-wrap {
    display: block;
  }

  .about-brand {
    justify-content: center;
    margin-bottom: 10px;
  }

  .about-nav {
    justify-content: center;
  }

  .about-nav .about-call {
    width: 100%;
    text-align: center;
  }

  .family-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .family-photo,
  .family-photo-large {
    grid-column: span 1;
    height: auto;
  }

  .family-photo img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}


/* =========================================================
   ABOUT US PAGE
   ========================================================= */

.about-page-header {
  background: #fffaf0;
  border-bottom: 1px solid rgba(23, 61, 99, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.about-nav-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.about-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #173d63;
  text-decoration: none;
  font-family: "DM Serif Display", serif;
  font-size: 1.35rem;
}

.about-brand img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.about-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.about-nav a {
  color: #173d63;
  text-decoration: none;
  font-weight: 700;
}

.about-nav a:hover,
.about-nav a.active {
  color: #bd202b;
}

.about-nav .about-call {
  background: #bd202b;
  color: white;
  padding: 11px 17px;
  border-radius: 999px;
}

.about-nav .about-call:hover {
  color: white;
  transform: translateY(-1px);
}


/* HERO */

.about-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55px;
}

.about-hero-text h1 {
  color: #173d63;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 0.98;
  margin: 10px 0 24px;
}

.about-lead {
  font-size: 1.25rem;
  line-height: 1.75;
  color: #333;
}

.about-hero-photo img {
  display: block;
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 20px 55px rgba(23, 61, 99, 0.17);
}


/* STORY */

.about-story-page {
  background: #f8f1df;
  padding: 80px max(30px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.about-story-photo img {
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.about-story-text h2 {
  margin: 7px 0 25px;
  color: #173d63;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.3rem, 5vw, 4rem);
}

.about-story-text p {
  font-size: 1.08rem;
  line-height: 1.85;
  margin: 0 0 20px;
}

.about-home-message {
  padding: 20px 24px;
  border-left: 5px solid #16804f;
  background: #fffaf0;
  font-family: "DM Serif Display", serif;
  font-size: 1.4rem !important;
  color: #173d63;
}


/* FAMILY GALLERY */

.family-gallery-section,
.joyce-at-work {
  padding: 80px 30px;
}

.family-gallery-section {
  background: #fffaf0;
}

.joyce-at-work {
  background: white;
}

.family-gallery-section .section-heading,
.joyce-at-work .section-heading {
  max-width: 800px;
  text-align: center;
  margin: 0 auto 45px;
}

.family-gallery-section h2,
.joyce-at-work h2 {
  font-family: "DM Serif Display", serif;
  color: #173d63;
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 8px 0 15px;
}

.family-gallery {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 210px;
  gap: 16px;
}

.family-photo {
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.family-photo-large {
  grid-column: span 8;
  grid-row: span 2;
}

.family-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.family-photo:hover img {
  transform: scale(1.025);
}


/* JOYCE WORK GALLERY */

.work-gallery {
  max-width: 1180px;
  margin: 0 auto;
  columns: 3 290px;
  column-gap: 16px;
}

.work-gallery img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 16px;
  break-inside: avoid;
}


/* ABOUT CTA */

.about-cta {
  background: #173d63;
  color: white;
  padding: 65px max(30px, calc((100% - 950px) / 2));
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
}

.about-cta-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.about-cta .eyebrow {
  color: #e3ad1f;
}

.about-cta h2 {
  color: white;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin: 6px 0 12px;
}

.about-cta p {
  line-height: 1.7;
}

.about-big-call {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 24px;
  background: #e3ad1f;
  color: #173d63;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}


/* FOOTER */

.about-footer {
  background: #102c48;
  color: white;
  text-align: center;
  padding: 45px 20px;
}

.about-footer img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.about-footer a {
  color: white;
}


/* MOBILE */

@media (max-width: 800px) {

  .about-nav-wrap {
    padding: 12px 0;
    align-items: flex-start;
  }

  .about-brand span {
    display: none;
  }

  .about-brand img {
    width: 58px;
    height: 58px;
  }

  .about-nav {
    justify-content: flex-end;
    gap: 11px;
    font-size: 0.9rem;
  }

  .about-hero,
  .about-story-page {
    grid-template-columns: 1fr;
  }

  .about-hero {
    padding: 45px 22px;
    gap: 30px;
  }

  .about-story-page {
    padding: 55px 22px;
    gap: 35px;
  }

  .family-gallery-section,
  .joyce-at-work {
    padding: 55px 20px;
  }

  .family-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 230px;
  }

  .family-photo,
  .family-photo-large {
    grid-column: span 1;
    grid-row: span 1;
  }

  .family-photo-large {
    grid-column: span 2;
  }

  .about-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-cta-logo {
    margin: 0 auto;
  }
}


@media (max-width: 520px) {

  .about-nav-wrap {
    display: block;
  }

  .about-brand {
    justify-content: center;
    margin-bottom: 10px;
  }

  .about-nav {
    justify-content: center;
  }

  .about-nav .about-call {
    width: 100%;
    text-align: center;
  }

  .family-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .family-photo,
  .family-photo-large {
    grid-column: span 1;
    height: auto;
  }

  .family-photo img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}


/* Project email form */

.choice-card textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 80px;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid #ddd8cb;
  border-radius: 10px;
  background: #faf9f5;
  color: #173d63;
}

#emailChoice {
  margin-top: 4px;
}

#emailStatus,
#copied {
  margin-top: 10px;
  min-height: 1.2em;
  font-size: .9rem;
  font-weight: 700;
  color: #16804f;
}

#emailChoice:disabled {
  opacity: .7;
  cursor: wait;
}

/* Keep Joyce's head visible in these gallery photos */
.family-gallery img[src*="reunion2"],
.family-gallery img[src*="grandkids3"] {
  object-position: center top;
}

/* =========================================================
   FAMILY GALLERY CUSTOM LAYOUT
   Large family photo left + tall reunion photo right
   ========================================================= */

@media (min-width: 801px) {

  .family-gallery {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 210px;
  }

  /* grandkids3 — large image on left */
  .family-gallery .family-photo-large {
    grid-column: 1 / span 8;
    grid-row: 1 / span 2;
  }

  /* reunion2 — tall image on right */
  .family-gallery .family-photo-tall {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
  }

  /* remaining three photos underneath */
  .family-gallery > .family-photo:nth-child(2) {
    grid-column: 1 / span 4;
    grid-row: 3;
  }

  .family-gallery > .family-photo:nth-child(3) {
    grid-column: 5 / span 4;
    grid-row: 3;
  }

  .family-gallery > .family-photo:nth-child(5) {
    grid-column: 9 / span 4;
    grid-row: 3;
  }

  /* Center the new large photo */
  .family-gallery img[src*="grandkids3"] {
    object-position: center 20%;
  }

  /* Keep the top of reunion2 visible */
  .family-gallery img[src*="reunion2"] {
    object-position: center top;
  }
}

/* Tablet/mobile: return to normal flowing gallery */
@media (max-width: 800px) {

  .family-gallery .family-photo,
  .family-gallery .family-photo-large,
  .family-gallery .family-photo-tall {
    grid-column: auto;
    grid-row: auto;
  }

  .family-gallery .family-photo-large {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {

  .family-gallery .family-photo,
  .family-gallery .family-photo-large,
  .family-gallery .family-photo-tall {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Click-to-enlarge photo lightbox */
.family-gallery img,
.work-gallery img {
  cursor: zoom-in;
}

.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 25, 40, 0.92);
  padding: 30px;
  align-items: center;
  justify-content: center;
}

.image-lightbox.open {
  display: flex;
}

.image-lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 10000;
  border: 0;
  background: transparent;
  color: white;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px) {
  .image-lightbox {
    padding: 14px;
  }

  .image-lightbox img {
    max-width: 100%;
    max-height: 86vh;
  }
}

/* Fabric selector material note */
.fabric-color-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.fabric-color-note strong {
  color: var(--navy);
}


/* =========================================================
   SEAT PATTERN SELECTOR
   ========================================================= */

.seat-pattern-picker {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}

.seat-pattern-label {
  font-weight: 800;
  color: var(--navy);
  margin-right: 4px;
}

.seat-pattern-option {
  border: 1px solid #d6c7ab;
  background: white;
  color: var(--navy);
  padding: 9px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.seat-pattern-option:hover {
  border-color: var(--navy);
}

.seat-pattern-option.active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

/* Sunbrella Shade stripe swatches */
.shade-stripe-chip {
  height: 68px;
  background-size: 100% 100%;
}


/* Sunbrella Shade style selector */
.shade-style-picker {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}

.shade-style-label {
  font-weight: 800;
  color: #173d63;
  margin-right: 4px;
}

.shade-style-option {
  border: 1px solid #d6c7ab;
  background: white;
  color: #173d63;
  padding: 9px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.shade-style-option.active {
  background: #173d63;
  border-color: #173d63;
  color: white;
}

/* Slight woven appearance for Shade solids/textures */
.shade-solid-chip {
  position: relative;
  overflow: hidden;
}

.shade-solid-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.06) 0,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,.035) 1px,
      rgba(0,0,0,.035) 2px
    );
  pointer-events: none;
}

/* Marine Canvas collection selector */
.marine-collection-picker {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}

.marine-collection-label {
  font-weight: 800;
  color: #173d63;
}

.marine-collection-option {
  border: 1px solid #d6c7ab;
  background: white;
  color: #173d63;
  padding: 9px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.marine-collection-option.active {
  background: #173d63;
  border-color: #173d63;
  color: white;
}


/* Isinglass / clear marine vinyl explanation */
.isinglass-info {
  display: none;
  max-width: 760px;
  margin: 12px 0 20px;
  padding: 14px 18px;
  background: rgba(255,255,255,.65);
  border: 1px solid #d8cfbd;
  border-radius: 14px;
  color: #173d63;
}

.isinglass-info strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 800;
}

.isinglass-info span {
  display: block;
  line-height: 1.5;
}

/* Seat Colors information box */
.seat-colors-info {
  margin-top: 12px;
  margin-bottom: 20px;
}

/* Material information boxes */
.material-info-box {
  max-width: 720px;
  margin-top: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,61,99,.18);
  border-radius: 14px;
  color: #173d63;
  line-height: 1.5;
}

.material-info-box strong {
  font-weight: 700;
}

.material-info-box p {
  margin: 6px 0 0;
}

.material-info-box[hidden] {
  display: none !important;
}

/* Hide obsolete right-side seat upholstery note */
.fabric-color-note {
  display: none !important;
}

/* Fabric planner: preview left, swatches right, form below preview */
.fabric-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fabric-builder > .boat-preview {
  grid-column: 1;
  grid-row: 1;
}

.fabric-builder > .swatches {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.fabric-builder > .choice-card {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  align-self: start;
}

.fabric-builder > .fabric-color-note {
  display: none !important;
}

@media (max-width: 800px) {
  .fabric-builder {
    grid-template-columns: 1fr;
  }

  .fabric-builder > .boat-preview,
  .fabric-builder > .swatches,
  .fabric-builder > .choice-card {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Isinglass thickness selector */
.isinglass-thickness-picker {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffaf0;
  border: 1px solid rgba(23, 61, 99, .18);
  border-radius: 12px;
}

.isinglass-thickness-picker button {
  border: 2px solid #173d63;
  background: white;
  color: #173d63;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.isinglass-thickness-picker button.active {
  background: #173d63;
  color: white;
}

.isinglass-thickness-picker small {
  width: 100%;
  opacity: .75;
}

/* -------------------------------------------------------
   Isinglass: use the normal color-picker position for gauges
   ------------------------------------------------------- */

.fabric-builder > #isinglassThicknessPicker {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0;
  width: 100%;
}

/* Only Isinglass hides ordinary fabric/color swatches */
.fabric-builder.isinglass-mode > #swatches {
  display: none !important;
}

/* Gauge selector is hidden everywhere except Isinglass */
.fabric-builder:not(.isinglass-mode) > #isinglassThicknessPicker {
  display: none !important;
}

@media (max-width: 800px) {
  .fabric-builder > #isinglassThicknessPicker {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Marine Canvas information box */
.marine-canvas-info {
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffaf0;
  border: 1px solid rgba(23, 61, 99, .18);
  border-radius: 12px;
  color: #173d63;
}

.marine-canvas-info strong {
  display: block;
  margin-bottom: 4px;
}

.marine-canvas-info span {
  display: block;
  line-height: 1.5;
}

/* Seat Colors information box */
.seat-colors-info {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffaf0;
  border: 1px solid rgba(23, 61, 99, .18);
  border-radius: 12px;
  color: #173d63;
}

.seat-colors-info strong {
  display: block;
  margin-bottom: 4px;
}

.seat-colors-info span {
  display: block;
  line-height: 1.5;
}

/* Mesh & Shade information box */
.shade-info {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffaf0;
  border: 1px solid rgba(23, 61, 99, .18);
  border-radius: 12px;
  color: #173d63;
}

.shade-info strong {
  display: block;
  margin-bottom: 4px;
}

.shade-info span {
  display: block;
  line-height: 1.5;
}

/* Marine collection explanation */
.marine-collection-info {
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 13px 16px;
  background: #fffaf0;
  border: 1px solid rgba(23, 61, 99, .18);
  border-radius: 12px;
  color: #173d63;
  max-width: 900px;
}

.marine-collection-info strong {
  display: block;
  margin-bottom: 4px;
}

.marine-collection-info span {
  display: block;
  line-height: 1.5;
}

/* Other custom project has no predefined color picker */
.fabric-builder.other-mode > #swatches {
  display: none !important;
}

/* Fabric planner two-column layout:
   preview + form left, swatches right */
.fabric-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fabric-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fabric-left > .boat-preview,
.fabric-left > .choice-card {
  width: 100%;
  max-width: none;
}

.fabric-builder > .swatches {
  min-width: 0;
}

/* Other has no swatches */
.fabric-builder.other-mode > .swatches {
  display: none !important;
}

/* When there are no swatches, let left side remain its normal width */
.fabric-builder.other-mode {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 800px) {
  .fabric-builder {
    grid-template-columns: 1fr;
  }

  .fabric-left {
    gap: 24px;
  }

  .fabric-builder > .swatches {
    grid-column: 1;
  }
}


/* Mobile fabric planner order:
   Preview -> color/material choices -> project form */
@media (max-width: 800px) {

  .fabric-builder {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /*
   * On mobile, let the preview and form participate
   * individually in the parent layout.
   */
  .fabric-left {
    display: contents;
  }

  .fabric-left > .boat-preview {
    order: 1;
  }

  .fabric-builder > .swatches {
    order: 2;
    width: 100%;
  }

  .fabric-left > .choice-card {
    order: 3;
    width: 100%;
    margin-top: 0;
  }
}


/* Alternate the homepage Joyce section */
.joyce-home .photo-wrap {
  order: 2;
}

.joyce-home .family-copy {
  order: 1;
}

@media (max-width: 800px) {
  .joyce-home .photo-wrap {
    order: 1;
  }

  .joyce-home .family-copy {
    order: 2;
  }
}


/* Make Facebook easy to spot in the footer */
.footer-right a {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-right a:hover {
  text-decoration-thickness: 2px;
}

/* Facebook icon beside footer branding */
.footer-facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}

.footer-facebook:hover {
  transform: translateY(-2px);
  opacity: .9;
}

.footer-right a {
  margin-top: 0;
}

/* Match footer logo and Facebook icon sizes */
.footer-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  text-decoration: none;
}

.footer-home-link .footer-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0;
}

.footer-facebook {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  font-size: 34px;
}

/* CTA button row shared with homepage */
.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.about-cta-actions .about-big-call {
  margin-top: 0;
}

.about-big-facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: #fff;
  color: #173d63;
  font-weight: 700;
  text-decoration: none;
}

.about-big-facebook:hover {
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .about-cta-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Full-width selectable "send me a copy" button */
.copy-self {
  position: relative;
  display: block;
  width: 100%;
  margin: 14px 0;
  cursor: pointer;
}

.copy-self input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.copy-self span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  border: 2px solid #173d63;
  border-radius: 999px;
  background: #fff;
  color: #173d63;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.copy-self:hover span {
  transform: translateY(-1px);
}

.copy-self input:checked + span {
  background: #173d63;
  color: #fff;
}

.copy-self input:focus-visible + span {
  outline: 3px solid #e3ad1f;
  outline-offset: 2px;
}

/* Mobile hero: stack logo and yellow card instead of overlapping */
@media (max-width: 760px) {
  .hero-art {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .hero-logo {
    width: min(330px, 86vw);
    max-width: 100%;
    position: relative;
    z-index: 2;
  }

  .stitch-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(330px, 86vw);
    max-width: 100%;
    transform: rotate(-1deg);
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/* ===== Interactive service cards ===== */

.service-flip {
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  perspective: 1200px;
  cursor: pointer;
  overflow: visible;
}

.service-flip-inner {
  position: relative;
  width: 100%;
  min-height: 330px;
  transition: transform .55s ease;
  transform-style: preserve-3d;
}

.service-flip.is-open .service-flip-inner {
  transform: rotateY(180deg);
}

.service-front,
.service-back {
  position: absolute;
  inset: 0;
  padding: 30px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
  border-radius: 18px;
  overflow: hidden;
}

.service-flip.navy .service-front {
  background: #173d63;
  color: #fff;
}

.service-flip.green .service-front {
  background: #16804f;
  color: #fff;
}

.service-flip.red .service-front {
  background: #bd202b;
  color: #fff;
}

.service-flip.gold .service-front {
  background: #e3ad1f;
  color: #173d63;
}

.service-back {
  transform: rotateY(180deg);
  background: #fffaf0;
  color: #173d63;
  border: 2px solid #e8dcc5;
  overflow-y: auto;
}

.service-back h3 {
  margin-top: 0;
  padding-right: 34px;
}

.service-more {
  display: inline-block;
  margin-top: 18px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.service-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #173d63;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.service-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.service-gallery img {
  display: block;
  width: 100%;
  height: 105px;
  object-fit: cover;
  border-radius: 8px;
}

.quote-help {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: #f8f1df;
}

.quote-help strong {
  display: block;
  margin-bottom: 6px;
}

.quote-help p {
  margin: 6px 0;
}

.service-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #173d63;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.service-flip:focus-visible {
  outline: 3px solid #e3ad1f;
  outline-offset: 5px;
}

/* Phone/tablet: keep the same flip interaction */
@media (max-width: 800px) {
  .service-flip-inner {
    min-height: 420px;
  }

  .service-front,
  .service-back {
    padding: 24px;
  }

  .service-gallery img {
    height: 120px;
  }
}

@media (max-width: 520px) {
  .service-flip-inner {
    min-height: 500px;
  }

  .service-front,
  .service-back {
    padding: 22px;
  }

  .service-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-gallery img {
    height: 110px;
  }

  .service-back {
    overflow-y: auto;
  }
}