:root{
  --ink:#122033;
  --navy:#16324f;
  --deep:#0c1c2e;
  --foam:#f4f7f8;
  --line:#d5dee6;
  --water:#1f6f8b;
  --sand:#c4a574;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--foam);
  font:18px/1.5 Georgia, "Iowan Old Style", Palatino, serif;
}
a{color:var(--water)}
img{max-width:100%;height:auto;display:block}
.skip{
  position:absolute;left:-999px;top:0;background:#fff;padding:.5rem;
}
.skip:focus{left:.5rem;z-index:5}
.demo-bar{
  background:#3d3428;
  color:#f6efe4;
  text-align:center;
  font:14px/1.4 system-ui, sans-serif;
  padding:.55rem 1rem;
}
.ribbon{
  display:flex;align-items:center;gap:1rem;
  background:var(--deep);color:#fff;
  padding:.8rem 1.1rem;
  position:sticky;top:0;z-index:3;
}
.brand{
  display:block;line-height:0;
}
.brand img{
  width:168px;height:auto;
}
.ribbon-phone{
  margin-left:auto;color:#fff;text-decoration:none;
  font:15px/1 system-ui, sans-serif;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:.45rem .75rem;
}
nav{display:flex;gap:1rem}
nav a{color:#d7e3ee;text-decoration:none;font:15px/1 system-ui, sans-serif}
.nav-toggle{display:none}
main{max-width:1080px;margin:0 auto;padding:0 1.1rem 5.5rem}
.hero{
  min-height:34rem;
  display:grid;
  place-items:center;
  padding:3.2rem 1rem;
  background:
    linear-gradient(rgba(8,18,28,.38), rgba(8,18,28,.48)),
    url("images/hero-dock.jpg") center/cover no-repeat;
  color:#fff;
  text-align:center;
}
.hero-copy{max-width:42rem}
.hero .tagline{
  margin:0 0 .4rem;
  font:clamp(1.7rem, 4vw, 2.7rem)/1.15 Georgia, serif;
  color:#f3f6f8;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hero h1{
  margin:.2rem 0 .8rem;
  font-size:clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight:500;
  color:#fff;
}
.hero .relocated{
  margin:.2rem 0 .35rem;
  color:#ffd2c8;
  font:1.35rem/1.3 Georgia, serif;
}
.hero .lede{color:#fff;margin:0}
.eyebrow{
  margin:0 0 .4rem;color:var(--water);
  font:13px/1.2 system-ui, sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
h1{font-size:clamp(2.1rem, 5vw, 3.6rem);line-height:1.05;margin:.2rem 0 .8rem;color:var(--deep)}
.lede{max-width:38rem;font-size:1.15rem}
h2{font-size:1.7rem;margin:0 0 1rem;color:var(--deep)}
section{padding:1.6rem 0;border-top:1px solid var(--line)}
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
}
figure{margin:0;background:#fff;border:1px solid var(--line)}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
figcaption{
  padding:.4rem .55rem;font:13px/1.3 system-ui, sans-serif;color:#4d5d6c;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
article, .process, .about, .reviews, .contact{
  background:#fff;
}
.cards article, .process, .about p, .reviews, form{
  border:1px solid var(--line);padding:1rem 1.1rem;
}
.cards article{background:#fff}
.cards h3{margin:.1rem 0 .4rem}
.cards ul{margin:.4rem 0 0;padding-left:1.1rem}
.cards p{margin:.3rem 0}
.process ol{margin:0;padding-left:1.2rem}
.process li{margin:.45rem 0}
.opening{font-family:system-ui, sans-serif;font-size:.95rem;color:#8a4b12}
.review-marquee{overflow:hidden;border:1px solid var(--line);background:#fff}
.review-track{
  display:flex;gap:.8rem;width:max-content;
  animation:review-scroll 48s linear infinite;
  padding:.8rem;
}
.review-marquee:hover .review-track{animation-play-state:paused}
.review-track blockquote{
  flex:0 0 22rem;margin:0;padding:.2rem .3rem;
  border:0;background:transparent;
}
.review-track p{margin:0 0 .6rem;font-size:.98rem}
.review-track footer{font:13px/1.3 system-ui, sans-serif;color:#4d5d6c}
.review-source{margin:.7rem 0 0;font:14px/1.4 system-ui, sans-serif}
@keyframes review-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .review-track{animation:none;flex-wrap:wrap;width:auto}
  .review-track blockquote[aria-hidden="true"]{display:none}
}
.review-link, .phone{
  display:inline-block;text-decoration:none;color:#fff;background:var(--navy);
  font:15px/1 system-ui, sans-serif;padding:.7rem .9rem;border-radius:6px;
}
.phone{font-size:1.05rem}
.note{font-size:.95rem;color:#3e5164}
form{display:grid;gap:.7rem;max-width:34rem}
label{display:grid;gap:.25rem;font:14px/1.3 system-ui, sans-serif}
input, textarea{
  font:16px/1.4 system-ui, sans-serif;padding:.55rem .6rem;
  border:1px solid #b7c4cf;border-radius:4px;width:100%;
}
.form-warn{margin:0;font:14px/1.4 system-ui, sans-serif;color:#6b3b12}
button[type=submit]{
  justify-self:start;background:var(--water);color:#fff;border:0;
  font:15px/1 system-ui, sans-serif;padding:.75rem 1rem;border-radius:6px;cursor:pointer;
}
.form-status{min-height:1.2rem;margin:0;font:14px/1.4 system-ui, sans-serif}
.form-status.error{color:#8d1d1d}
.form-status.ok{color:#1d5c32}
.trap{position:absolute;left:-9999px}
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:4;
  background:var(--navy);color:#fff;text-align:center;text-decoration:none;
  font:16px/1 system-ui, sans-serif;padding:.9rem;
  margin:0;
}
footer{
  background:var(--deep);color:#d5e0ea;text-align:center;
  font:13px/1.5 system-ui, sans-serif;padding:1.2rem 1rem 1.4rem;
}
footer p{margin:.25rem 0}
@media (max-width:800px){
  .brand img{width:132px}
  .gallery, .cards{grid-template-columns:1fr 1fr}
  .ribbon-phone{display:none}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--deep);flex-direction:column;padding:.6rem 1rem 1rem}
  nav.open{display:flex}
  .nav-toggle{
    display:inline-block;margin-left:auto;background:transparent;color:#fff;
    border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:.4rem .65rem;
    font:14px/1 system-ui, sans-serif;
  }
  .callbar{display:block;position:fixed;bottom:0;left:0;right:0}
  main{padding-bottom:6.2rem}
  form{padding-bottom:1.2rem}
}
@media (max-width:560px){
  .gallery, .cards{grid-template-columns:1fr}
}