/* Two presentation options. The default water-blue design remains in styles.css. */

/* Option 2: bright, spacious company profile */
html[data-design="2"] {
  --ink: #193b49;
  --muted: #5e7d88;
  --paper: #fff;
  --green: #1785a7;
  --lime: #daf5f7;
  --line: #d6e8ed;
}
html[data-design="2"] .site-header {
  background: #fff;
  border-bottom-color: #d7e8ed;
}
html[data-design="2"] .brand-mark { font-family: 'DM Sans', sans-serif; font-weight: 700; }
html[data-design="2"] .nav-contact { border-radius: 4px; }
html[data-design="2"] .hero {
  height: min(660px, 65vw);
  min-height: 520px;
  color: var(--ink);
  background: #f3fafb;
}
html[data-design="2"] .hero-image {
  inset: 0 0 0 47%;
  background-position: 58% center;
  transform: none;
}
html[data-design="2"] .hero-shade {
  inset: 0 0 0 47%;
  background: linear-gradient(90deg, rgba(13, 65, 82, .12), transparent 30%);
}
html[data-design="2"] .hero-content {
  left: 8%;
  width: 35%;
  top: 49%;
  transform: translateY(-50%);
}
html[data-design="2"] .hero h1,
html[data-design="2"] .intro-body h2,
html[data-design="2"] .gallery-head h2,
html[data-design="2"] .section-heading h2,
html[data-design="2"] .contact h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .035em;
}
html[data-design="2"] .hero h1 {
  font-size: clamp(36px, 3.8vw, 58px);
  line-height: 1.55;
  margin-bottom: 22px;
}
html[data-design="2"] .hero-copy { color: #567581; }
html[data-design="2"] .hero .eyebrow.light { color: var(--green); }
html[data-design="2"] .hero .light-link { color: var(--green); }
html[data-design="2"] .hero-caption { color: #80a3ae; }
html[data-design="2"] .hero-count { color: #fff; }
html[data-design="2"] .hero-count span { color: #fff; }
html[data-design="2"] .intro { padding-top: 135px; padding-bottom: 145px; }
html[data-design="2"] .intro-bottom > p { color: #54727c; }
html[data-design="2"] .intro-number { color: rgba(23, 133, 167, .045); }
html[data-design="2"] .gallery {
  background: #f3f9fa;
  padding-top: 115px;
  padding-bottom: 115px;
}
html[data-design="2"] .gallery-grid { gap: 24px; grid-template-columns: 1fr 1fr; }
html[data-design="2"] .gallery-card-sunset { margin-top: 0; }
html[data-design="2"] .gallery-card img,
html[data-design="2"] .gallery-card-sunset img { height: 420px; }
html[data-design="2"] .gallery-card figcaption {
  background: #fff;
  border-bottom: 0;
  padding: 19px 22px;
}
html[data-design="2"] .gallery-card figcaption strong { font-family: var(--sans); }
html[data-design="2"] .company { padding-top: 125px; padding-bottom: 140px; }
html[data-design="2"] .company-layout { grid-template-columns: .8fr 1.5fr; gap: 8%; }
html[data-design="2"] .company-statement {
  background: #e8f6f8;
  border-left: 5px solid #8bcedd;
}
html[data-design="2"] .company-statement p { font-family: var(--sans); font-weight: 600; }
html[data-design="2"] .contact { background: #dff1f5; color: var(--ink); }
html[data-design="2"] .contact .eyebrow.light { color: var(--green); }
html[data-design="2"] .contact-text > p:last-child { color: #567985; }
html[data-design="2"] .contact-button { border-color: #b2d7e0; background: #fff; }
html[data-design="2"] .contact-button,
html[data-design="3"] .contact-button {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}
html[data-design="2"] .contact-button small { color: #6f909a; }
html[data-design="2"] .contact-button:hover { background: #effaff; }
html[data-design="2"] .contact-stamp { color: rgba(23, 133, 167, .4); border-color: rgba(23, 133, 167, .2); }
html[data-design="2"] .site-footer { background: #fff; }

/* Option 3: dark Sado sea and sunset */
html[data-design="3"] {
  --ink: #eaf5f6;
  --muted: #aac3c8;
  --paper: #0b2834;
  --green: #ffad81;
  --lime: #ffccaa;
  --line: #395665;
}
html[data-design="3"] body { background: var(--paper); }
html[data-design="3"] .site-header {
  background: #071f2a;
  border-bottom-color: #234452;
}
html[data-design="3"] .brand-mark { color: #ffad81; }
html[data-design="3"] .brand small { color: #a6bfc8; }
html[data-design="3"] .nav-contact { background: #f2a376; color: #142e39; }
html[data-design="3"] .nav-contact span { color: #142e39; }
html[data-design="3"] .hero {
  min-height: 600px;
  height: min(740px, 71vw);
  background: #10323f;
}
html[data-design="3"] .hero-image {
  inset: 0 0 0 50%;
  background-image: url('assets/sado-sunset.jpg');
  background-position: center 49%;
  transform: none;
}
html[data-design="3"] .hero-shade {
  background: linear-gradient(90deg, #10323f 0%, #10323f 42%, rgba(16, 50, 63, .4) 57%, transparent 72%),
    linear-gradient(0deg, rgba(8, 30, 40, .28), transparent 50%);
}
html[data-design="3"] .hero-content {
  left: 9%;
  top: 48%;
  transform: translateY(-50%);
  max-width: 49%;
}
html[data-design="3"] .hero h1 { font-size: clamp(40px, 5vw, 70px); }
html[data-design="3"] .hero .eyebrow.light { color: #ffcaad; }
html[data-design="3"] .hero-copy { color: #d2e4e8; }
html[data-design="3"] .hero .light-link { color: #ffd2b7; }
html[data-design="3"] .hero-count span { color: #ffc5a1; }
html[data-design="3"] .intro { background: #0b2834; }
html[data-design="3"] .intro-bottom > p { color: #bbd0d4; }
html[data-design="3"] .intro-number { color: rgba(198, 229, 234, .045); }
html[data-design="3"] .section-label i { background: #627d88; }
html[data-design="3"] .circle-link { border-color: #67828a; }
html[data-design="3"] .circle-link:hover { color: #142c37; }
html[data-design="3"] .gallery {
  background: #123442;
  padding-top: 120px;
  padding-bottom: 125px;
}
html[data-design="3"] .gallery-head p:last-child { color: #b1cad0; }
html[data-design="3"] .gallery-grid { gap: 42px; grid-template-columns: 1fr 1fr; }
html[data-design="3"] .gallery-card-flowers { margin-top: 0; }
html[data-design="3"] .gallery-card-sunset { margin-top: 85px; }
html[data-design="3"] .gallery-card img { height: 520px; }
html[data-design="3"] .gallery-card-sunset img { height: 470px; }
html[data-design="3"] .gallery-card figcaption { border-bottom-color: #4c6973; }
html[data-design="3"] .gallery-card figcaption span { color: #9dbfc8; }
html[data-design="3"] .gallery-note { color: #a7c0c7; }
html[data-design="3"] .company { background: #0b2834; }
html[data-design="3"] .company-statement {
  background: linear-gradient(145deg, #184354, #10323f);
  border: 1px solid #345b68;
}
html[data-design="3"] .company-statement small { color: #9bbac2; }
html[data-design="3"] .company-table dt { color: #a3bec6; }
html[data-design="3"] .contact {
  background: #f2a376;
  color: #14323e;
}
html[data-design="3"] .contact .eyebrow.light,
html[data-design="3"] .contact-text > p:last-child { color: #36525c; }
html[data-design="3"] .contact-button { border-color: rgba(20, 50, 62, .45); }
html[data-design="3"] .contact-button small { color: #36525c; }
html[data-design="3"] .contact-button b { color: #14323e; }
html[data-design="3"] .contact-button:hover { background: rgba(255, 255, 255, .2); }
html[data-design="3"] .contact-stamp { border-color: rgba(20, 50, 62, .25); color: rgba(20, 50, 62, .45); }
html[data-design="3"] .site-footer { background: #071f2a; }
html[data-design="3"] .site-footer > p,
html[data-design="3"] .footer-bottom { color: #aac3c8; }
html[data-design="3"] .footer-bottom a { color: #ffc5a1; }
html[data-design="3"] .photo-credit { display: none; }

@media (max-width: 900px) {
  html[data-design="2"] .hero-content { left: 6%; width: 39%; }
  html[data-design="2"] .hero h1 { font-size: 34px; }
  html[data-design="2"] .hero-copy { font-size: 11px; }
  html[data-design="3"] .hero-content { left: 7%; max-width: 54%; }
  html[data-design="3"] .hero h1 { font-size: 43px; }
}
@media (max-width: 650px) {
  html[data-design="2"] .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  html[data-design="2"] .hero-content {
    position: relative;
    inset: auto;
    order: 1;
    width: auto;
    transform: none;
    padding: 75px 7% 62px;
  }
  html[data-design="2"] .hero h1 { font-size: 38px; }
  html[data-design="2"] .hero-image {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: 330px;
    background-position: center 55%;
  }
  html[data-design="2"] .hero-shade,
  html[data-design="2"] .hero-caption,
  html[data-design="2"] .hero-count { display: none; }
  html[data-design="2"] .intro { padding-top: 84px; padding-bottom: 95px; }
  html[data-design="2"] .gallery { padding-top: 78px; padding-bottom: 82px; }
  html[data-design="2"] .gallery-grid { display: block; }
  html[data-design="2"] .gallery-card-sunset { margin-top: 28px; }
  html[data-design="2"] .gallery-card img,
  html[data-design="2"] .gallery-card-sunset img { height: 360px; }
  html[data-design="2"] .company { padding-top: 80px; padding-bottom: 85px; }
  html[data-design="2"] .company-layout { display: block; }
  html[data-design="2"] .company-table { margin-top: 30px; }
  html[data-design="3"] .site-nav { background: #071f2a; }
  html[data-design="3"] .menu-toggle span { background: var(--ink); }
  html[data-design="3"] .hero { height: 690px; min-height: 0; max-height: none; }
  html[data-design="3"] .hero-image { inset: 0 0 0 26%; background-position: center 44%; }
  html[data-design="3"] .hero-shade {
    background: linear-gradient(0deg, #10323f 0%, rgba(16, 50, 63, .92) 26%, rgba(16, 50, 63, .22) 72%, transparent);
  }
  html[data-design="3"] .hero-content {
    left: 7%;
    right: 7%;
    top: auto;
    bottom: 56px;
    transform: none;
    max-width: none;
  }
  html[data-design="3"] .hero h1 { font-size: 40px; }
  html[data-design="3"] .hero-caption,
  html[data-design="3"] .hero-count { display: none; }
  html[data-design="3"] .gallery { padding-top: 82px; padding-bottom: 86px; }
  html[data-design="3"] .gallery-grid { display: block; }
  html[data-design="3"] .gallery-card img,
  html[data-design="3"] .gallery-card-sunset img { height: 390px; }
  html[data-design="3"] .gallery-card-sunset { margin-top: 38px; }
}