/* Stickin' Together Fisheries — static rebuild of the old Divi/WordPress theme. */

:root {
  --accent: #2ea3f2;
  --brand-blue: #0c71c3;
  --text: #666;
  --heading: #333;
  --dark: #1a1a1a;
  --container: min(80%, 1080px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 500 14px/1.7 "Open Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; opacity: .85; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-weight: 500;
  line-height: 1em;
  letter-spacing: 1px;
  margin: 0;
  padding-bottom: 10px;
}

.container { width: var(--container); margin: 0 auto; }

/* ---------- Top bar + header ---------- */

.top-bar {
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 0;
}
.top-bar .container { display: flex; gap: 16px; flex-wrap: wrap; }
.top-bar a { color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.top-bar svg { width: 12px; height: 12px; fill: currentColor; }

.site-header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  position: relative;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
}
.logo img { height: 46px; width: auto; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.main-nav a {
  color: rgba(0, 0, 0, .6);
  font-size: 16px;
  font-weight: 600;
  transition: opacity .4s;
}
.main-nav a:hover { opacity: .7; }
.main-nav a.current { color: var(--accent); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--accent);
}
.menu-toggle svg { width: 28px; height: 28px; fill: currentColor; display: block; }

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid var(--accent);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    padding: 5% 10%;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: block; padding: 10px 5%; border-bottom: 1px solid rgba(0, 0, 0, .03); }
}

/* ---------- Divi-style building blocks ---------- */

.section { padding: 54px 0; position: relative; }
.row { width: var(--container); margin: 0 auto; padding: 27px 0; position: relative; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5.5%; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5.5%; }

@media (max-width: 980px) {
  .cols, .cols-3 { grid-template-columns: 1fr; gap: 30px; }
  .section { padding: 50px 0; }
}

.divider { width: 150px; height: 23px; margin: 0 auto 23px; position: relative; }
.divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 3px solid var(--brand-blue);
}

.display {
  font-family: "Oswald", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 60px;
  line-height: 1.3em;
  color: var(--dark);
  letter-spacing: 1px;
}
.roboto { font-family: "Roboto", Helvetica, Arial, sans-serif; color: var(--dark); }
.lead { font-size: 24px; line-height: 1.4em; }
.center { text-align: center; }
.narrow { max-width: 800px; margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
  .display { font-size: 40px; }
  .lead { font-size: 19px; }
}

.btn {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7em;
  padding: .3em 1em;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all .3s ease;
}
.btn:hover { background: rgba(255, 255, 255, .2); border-color: transparent; opacity: 1; }
.btn-blue { color: var(--brand-blue); box-shadow: 6px 6px 18px 0 rgba(109, 109, 109, .49); }
.btn-blue:hover { background: rgba(12, 113, 195, .08); }
.btn-shadow { box-shadow: 6px 6px 18px 0 rgba(0, 0, 0, .3); }
.btn-oswald {
  color: var(--dark);
  border-radius: 0;
  letter-spacing: 4px;
  font-family: "Oswald", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.btn-oswald:hover { border-color: var(--dark); background: transparent; }

/* Shape dividers, taken verbatim from the original Divi sections. */
.band, .before-go, .gallery-header { position: relative; }
.shape { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; background-repeat: repeat-x; }
.shape-top { top: 0; }
.shape-bottom { bottom: 0; }

/* ---------- Home ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - 110px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  color: #fff;
  background: rgba(109, 109, 109, .49) url("../wp-content/uploads/2018/11/background.jpg") center / cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(69, 152, 193, .14); }
.hero-content {
  position: relative;
  width: min(92%, 1400px);
  margin: 0 auto;
  padding-top: 7vh;
  display: flex;
  justify-content: flex-end;
}
.hero-text { max-width: 560px; text-align: right; }
.hero h1 {
  font-family: "Oswald", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 80px;
  line-height: 1.3em;
  color: #fff;
  text-shadow: .08em .08em .08em rgba(0, 0, 0, .4);
  padding: 0;
}
.hero p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.2em;
  text-shadow: .08em .08em .08em rgba(0, 0, 0, .4);
}
.scroll-down {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  animation: bob 2s ease-in-out infinite;
}
.scroll-down svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2.5; display: block; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

@media (max-width: 767px) {
  .hero { background-attachment: scroll; min-height: 80vh; }
  .hero h1 { font-size: 50px; }
  .hero p { font-size: 17px; }
}

.discover { padding: 110px 0; }
.discover h1 { text-align: center; }
.discover .divider { margin-top: 23px; }
.discover .body-copy {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.9em;
  padding-top: 30px;
}
.discover .opps { text-align: center; }
.discover .feature-img { margin-top: 90px; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3); width: 100%; }
.discover .btn-wrap { text-align: center; margin-top: 50px; }
@media (max-width: 980px) {
  .discover { padding: 60px 0; }
  .discover .feature-img { margin-top: 30px; }
}

.band {
  padding: 210px 0;
  background: rgba(0, 106, 193, .3);
  text-align: center;
}
.band .shape { height: 100px; background-size: 100% 100px; }
.band .shape-top { background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1280 0L640 70 0 0v140l640-70 640 70V0z' fill-opacity='.5'/%3E%3Cpath d='M1280 0H0l640 70 640-70z'/%3E%3C/g%3E%3C/svg%3E"); }
.band .shape-bottom { background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M0 140l640-70 640 70V0L640 70 0 0v140z' fill-opacity='.5'/%3E%3Cpath d='M0 140h1280L640 70 0 140z'/%3E%3C/g%3E%3C/svg%3E"); }
.band .lead { margin: 30px auto 50px; }
@media (max-width: 980px) { .band { padding: 140px 0; } }

.expect { padding: 110px 0 120px; }
.expect .lead { padding-top: 30px; }

.video-slider { margin-top: 54px; }
.video-main { position: relative; background: #000; aspect-ratio: 16 / 9; }
.video-main video { width: 100%; height: 100%; display: block; background: #000; }
.video-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.video-thumbs button {
  padding: 0;
  border: 0;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: center / cover no-repeat;
  position: relative;
}
.video-thumbs button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  transition: background .3s;
}
.video-thumbs button:hover::after, .video-thumbs button.active::after { background: transparent; }

.gallery-teaser {
  background: url("../wp-content/uploads/2018/11/bear.jpg") center / cover no-repeat fixed;
  padding: 0;
}
.gallery-teaser .cols { width: 100%; gap: 0; }
.gallery-teaser .panel {
  grid-column: 2;
  background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .85) 50%);
  padding: 8% 6% 6%;
}
.gallery-teaser .display, .gallery-teaser .lead, .gallery-teaser .copy { max-width: 450px; }
.gallery-teaser .divider { margin: 30px 0 0; }
.gallery-teaser .lead { padding-top: 30px; }
.gallery-teaser .copy { padding-bottom: 60px; }
@media (max-width: 980px) {
  .gallery-teaser { background-attachment: scroll; padding-top: 50vw; }
  .gallery-teaser .panel { grid-column: 1; }
}

.before-go { padding: 110px 0 140px; }
.before-go .lead { padding-top: 30px; margin-bottom: 40px; }
.before-go .shape { height: 30px; background-size: 33.333% 30px; }
.before-go .shape-bottom { background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='30px' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2372ace5'%3E%3Cpath d='M853.893,86.998c-38.859,0-58.811-16.455-77.956-35.051c18.295-10.536,40.891-18.276,73.378-18.276 c38.685,0,64.132,12.564,85.489,28.347C916.192,72.012,900.8,86.998,853.893,86.998z M526.265,80.945 c-6.517-0.562-13.599-0.879-21.41-0.879c-70.799,0-91.337,27.229-134.433,35.662c14.901,3.72,32.118,6.07,52.898,6.07 C470.171,121.797,500.34,103.421,526.265,80.945z' fill-opacity='.3'/%3E%3Cpath d='M663.458,109.671c-67.137,0-80.345-23.824-137.193-28.726C567.086,45.555,597.381,0,665.691,0 c61.857,0,85.369,27.782,110.246,51.947C736.888,74.434,717.459,109.671,663.458,109.671z M217.68,94.163 c55.971,0,62.526,24.026,126.337,24.026c9.858,0,18.508-0.916,26.404-2.461c-57.186-14.278-80.177-48.808-138.659-48.808 c-77.063,0-99.96,48.569-151.751,48.569c-40.006,0-60.008-12.206-80.011-29.506v16.806c20.003,10.891,40.005,21.782,80.011,21.782 C160.014,124.57,158.608,94.163,217.68,94.163z M1200.112,46.292c-57.493,0-56.935,46.595-115.015,46.595 c-53.612,0-59.755-39.618-115.602-39.618c-15.267,0-25.381,3.751-34.69,8.749c36.096,26.675,60.503,62.552,117.342,62.552 c69.249,0,75.951-43.559,147.964-43.559c39.804,0,59.986,10.943,79.888,21.777V85.982 C1260.097,68.771,1239.916,46.292,1200.112,46.292z' fill-opacity='.5'/%3E%3Cpath d='M1052.147,124.57c-56.84,0-81.247-35.876-117.342-62.552c-18.613,9.994-34.005,24.98-80.912,24.98 c-38.859,0-58.811-16.455-77.956-35.051c-39.05,22.487-58.479,57.724-112.48,57.724c-67.137,0-80.345-23.824-137.193-28.726 c-25.925,22.475-56.093,40.852-102.946,40.852c-20.779,0-37.996-2.349-52.898-6.07c-7.895,1.545-16.546,2.461-26.404,2.461 c-63.811,0-70.366-24.026-126.337-24.026c-59.072,0-57.665,30.407-137.669,30.407c-40.006,0-60.008-10.891-80.011-21.782V140h1280 v-37.212c-19.903-10.835-40.084-21.777-79.888-21.777C1128.098,81.011,1121.397,124.57,1052.147,124.57z'/%3E%3C/g%3E%3C/svg%3E"); }

.get-in-touch { background: #72ace5; padding: 110px 0; }

/* ---------- Divi contact form ---------- */

.contact-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; row-gap: 33px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #eee;
  color: #999;
  font: 14px "Open Sans", Arial, sans-serif;
  padding: 16px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand-blue); color: #3e3e3e; }
.contact-form textarea { height: 150px; resize: vertical; display: block; }
.contact-form .actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.contact-form .btn { color: #fff; }
.on-white .btn { color: var(--accent); }
.form-status { margin-top: 12px; font-weight: 600; text-align: right; }
@media (max-width: 767px) { .contact-form .fields { grid-template-columns: 1fr; } }
.hidden-field { position: absolute; left: -9999px; }

/* ---------- Gallery page ---------- */

.gallery-header {
  background: #4f8ec1;
  padding: 80px 0 180px;
  text-align: center;
}
.gallery-header h1 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.5em;
  color: #fff;
  padding: 0;
  margin-bottom: 20px;
}
.gallery-header .divider { width: 80px; height: 10px; margin-bottom: 20px; }
.gallery-header .divider::before { border-top-color: #f7d584; }
.gallery-header p {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.8em;
  color: rgba(255, 255, 255, .8);
  max-width: 600px;
  margin: 0 auto;
}
.gallery-header p a { color: #fff; text-decoration: underline; }
.gallery-header .shape { height: 100px; background-size: 100% 100px; }
.gallery-header .shape-bottom { background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M725.29 101.2C325.22 122.48 0 0 0 0v140h1280V0s-154.64 79.92-554.71 101.2z' fill-opacity='.3'/%3E%3Cpath d='M556.45 119.74C953.41 140 1280 14 1280 14v126H0V0s159.5 99.48 556.45 119.74z' fill-opacity='.5'/%3E%3Cpath d='M640 140c353.46 0 640-140 640-139v140H0V0s286.54 140 640 140z'/%3E%3C/g%3E%3C/svg%3E"); }

.photo-grid { width: min(80%, 1280px); margin: 0 auto; padding: 76px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 5.5%; }
.photo-grid figure { margin: 0; }
.photo-grid a { display: block; position: relative; overflow: hidden; }
.photo-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s; }
.photo-grid a:hover img { transform: scale(1.03); }
.photo-grid a::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .29); opacity: 0; transition: opacity .3s; }
.photo-grid a:hover::after { opacity: 1; }
.photo-grid figcaption { text-align: center; margin-top: 12px; font-size: 15px; color: #555; }
@media (max-width: 980px) { .photo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .photo-grid { grid-template-columns: 1fr; } }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 40px;
  flex-direction: column;
  gap: 12px;
}
.lightbox.open { display: flex; }
.lightbox img { max-height: calc(100vh - 120px); max-width: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.lightbox p { color: #ccc; margin: 0; }
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  padding: 10px 16px;
  opacity: .7;
}
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: 10px; right: 10px; }
.lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- Posts & Information page ---------- */

.posts-page { background: #f4f4f4; padding: 110px 0 70px; }
.posts-hero { background: rgba(91, 152, 193, .32); padding: 30px 0 120px; text-align: center; }
.posts-hero .display { max-width: 450px; margin: 0 auto; padding-top: 27px; }
.posts-hero .divider { margin-top: 30px; }
.post-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.5%; margin-top: 27px; align-items: start; }
.post-card { background: #fff; padding: 19px; }
.post-card h2 {
  font-family: "Oswald", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1.25em;
  color: var(--dark);
  padding-bottom: 12px;
}
.post-card h2 a { color: inherit; }
.post-card .meta { color: #aaa; font-size: 14px; margin-bottom: 6px; }
.post-card .meta a { color: #aaa; }
.post-card .excerpt { font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.9em; color: #666; }
@media (max-width: 980px) { .post-cards { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Blog-style single posts with sidebar ---------- */

.with-sidebar { display: grid; grid-template-columns: 1fr 21.5%; gap: 0 5.5%; position: relative; }
.with-sidebar::before {
  content: "";
  position: absolute;
  top: -58px;
  bottom: 0;
  right: calc(21.5% + 2.75%);
  border-left: 1px solid #e2e2e2;
}
.main-col { padding: 58px 0 50px; min-width: 0; }
.sidebar { padding-top: 58px; }
.sidebar h4 { font-size: 34px; line-height: 1.1em; padding-bottom: 10px; color: #333; }
.sidebar ul { list-style: none; margin: 0 0 30px; padding: 0; }
.sidebar li { margin-bottom: 8px; line-height: 1.5; }
.sidebar a { color: #666; }
.sidebar a:hover { color: var(--accent); }
@media (max-width: 980px) {
  .with-sidebar { grid-template-columns: 1fr; }
  .with-sidebar::before { display: none; }
  .sidebar { border-top: 1px solid #e2e2e2; padding-top: 30px; }
}

.entry-title { font-size: 60px; line-height: 1.1em; padding-bottom: 10px; }
.post-meta { font-size: 14px; color: #666; margin-bottom: 6%; }
.post-meta a { color: #666; }
@media (max-width: 767px) { .entry-title { font-size: 36px; } }

.entry h1 { font-size: 58px; font-weight: 700; line-height: 1.1em; margin: 30px 0 40px; }
.entry h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 40px 0 20px; }
.entry p { font-size: 15px; }
.entry .large { font-size: 20px; line-height: 1.2em; color: #555; }
.entry ul { padding-left: 1em; margin: 0 0 1em; }
.entry li { margin-bottom: 4px; }
.entry.bold p, .entry.bold li { font-weight: 700; }
.indent { padding: 0 5%; }
@media (max-width: 767px) { .entry h1 { font-size: 36px; } }

.blog-list article { margin-bottom: 60px; }
.blog-list h2 { font-size: 26px; padding-bottom: 6px; }
.blog-list h2 a { color: #333; }
.blog-list .post-meta { margin-bottom: 12px; }

/* Crew form call-to-action boxes */
.cta {
  color: #fff;
  text-align: center;
  padding: 40px 60px;
  margin-top: 40px;
  box-shadow: 6px 6px 18px 0 rgba(0, 0, 0, .3);
  display: block;
}
.cta:hover { opacity: 1; }
.cta h2 { color: #fff; font-size: 58px; line-height: 1em; padding-bottom: 10px; text-transform: none; font-weight: 500; letter-spacing: 1px; margin: 0; }
.cta p { color: #fff; font-size: 14px; margin-bottom: 20px; }
.cta .btn { pointer-events: none; }
.cta:hover .btn { background: rgba(255, 255, 255, .2); border-color: transparent; }
.cta-blue { background: #478ac1; }
.cta-purple { background: #a54ee8; }
.entry .cta-note, .cta-note {
  margin-top: 54px;
  border: 3px double #000;
  border-radius: 5px;
  box-shadow: 6px 6px 18px -2px rgba(0, 0, 0, .3);
  text-align: center;
  font-size: 22px;
  line-height: 1.1;
  padding: 4px 10px;
  text-shadow: 0 .08em 0 rgba(0, 0, 0, .1);
}
@media (max-width: 767px) {
  .cta { padding: 30px 20px; }
  .cta h2 { font-size: 30px; }
  .cta-note { font-size: 17px; }
}

/* Meet the crew */
.crew-page { padding: 80px 0 100px; }
.crew-intro { margin-bottom: 60px; }
.crew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 3%; }
.crew-card { background: #fff; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3); }
.crew-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crew-text { padding: 22px 24px 26px; }
.crew-text h2 {
  font-family: "Oswald", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  color: var(--dark);
  padding-bottom: 4px;
}
.crew-role { color: var(--brand-blue); font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.crew-text p:last-child { font-size: 15px; line-height: 1.7; }
@media (max-width: 980px) { .crew-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .crew-page { padding: 50px 0 60px; }
  .crew-intro { margin-bottom: 36px; }
  .crew-grid { grid-template-columns: 1fr; }
}

/* Contact page */
.contact-page { padding: 54px 0 57px; }
.contact-page h1 { font-size: 68px; line-height: 1em; padding-bottom: 10px; }
.contact-page .contact-info { font-size: 26px; line-height: 1.6em; margin-top: 20px; }
.contact-page .contact-form { margin-top: 30px; }
.contact-page .contact-form .fields { row-gap: 16px; }
@media (max-width: 767px) {
  .contact-page h1 { font-size: 40px; }
  .contact-page .contact-info { font-size: 19px; }
}

/* ---------- Footer ---------- */

.site-footer { background: #222; color: #fff; }
.footer-widgets { padding: 60px 0 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 5.5%; }
.footer-widgets h4 { color: var(--accent); font-size: 18px; font-weight: 500; letter-spacing: 1px; padding-bottom: 10px; }
.footer-widgets a { color: #fff; }
.footer-widgets p { line-height: 1.7em; margin: 0; }
@media (max-width: 600px) { .footer-widgets { grid-template-columns: 1fr 1fr; gap: 30px 5.5%; padding: 40px 0; } }
@media (max-width: 400px) { .footer-widgets { grid-template-columns: 1fr; } }

.milestone { max-width: 203px; text-align: center; }
.milestone .ms-head { background: #333; padding: 10px; }
.milestone .ms-head strong { display: block; font-size: 16px; }
.milestone .ms-head span { font-size: 14px; }
.milestone .ms-body { background: #fff; color: #333; padding: 12px 10px; font-size: 14px; }

.bottom-nav-bar { background: #2e2e2e; padding: 15px 0 5px; }
.bottom-nav { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; letter-spacing: 1px; }
.bottom-nav a { color: #bbb; font-size: 18px; text-transform: uppercase; }
.bottom-nav a.current { color: var(--accent); }
.footer-bottom { background: rgba(0, 0, 0, .32); padding: 15px 0 5px; }
.footer-bottom p { color: #666; font-size: 18px; padding-bottom: 10px; margin: 0; }
@media (max-width: 767px) { .bottom-nav a, .footer-bottom p { font-size: 14px; } }

.back-to-top {
  position: fixed;
  right: 0;
  bottom: 125px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  border: 0;
  border-radius: 5px 0 0 5px;
  padding: 5px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  z-index: 50;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.5; display: block; }
/* Alex's only photo is 240x320, so show it whole instead of cropping and enlarging it. */
.crew-card img.crew-portrait { object-fit: contain; background: #dde5ec; }