:root {
  --fog: #e7ece8;
  --ink: #122026;
  --mute: #5b6b70;
  --river: #0b4a58;
  --water: #1f7a86;
  --copper: #c45c28;
  --sand: #f4efe4;
  --left: #0e2f38;
  --right: #3b2116;
  --line: #c5d0cc;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --sans: "Figtree", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
}
a { color: var(--water); }
a:hover { color: var(--copper); }

.tag {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--water);
  font-weight: 700;
}
h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.95;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.lead { color: var(--mute); max-width: 46rem; font-size: 1.08rem; }

.quay {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 4vw;
  background: #0b4a58;
  color: #e7ece8;
}
.word {
  color: #e7ece8;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.word span {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}
.word small { font-size: 0.7rem; opacity: 0.75; margin-top: 0.15rem; }
#nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
#nav a { color: #d5e4e2; text-decoration: none; font-size: 0.86rem; }
#nav a.is-here, #nav a:hover { color: #f3c19a; }
.quay-end { display: flex; align-items: center; gap: 0.6rem; }
.lang { display: flex; border: 1px solid rgba(255,255,255,.25); }
.lang-btn {
  border: 0;
  background: transparent;
  color: #d5e4e2;
  padding: 0.32rem 0.65rem;
  font: 700 0.75rem var(--sans);
  cursor: pointer;
}
.lang-btn.is-on { background: var(--copper); color: #fff; }
.burger {
  display: none;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: #fff;
}

.ford {
  position: relative;
  padding: 7vh 6vw 0;
  background: linear-gradient(180deg, #12343c 0%, #0b4a58 55%, #1f7a86 100%);
  color: #eef5f3;
  overflow: hidden;
}
.ford .mile { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; color: #f3c19a; }
.ford .city {
  display: block;
  font-family: var(--display);
  font-size: clamp(4.2rem, 16vw, 12rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
}
.ford .firm {
  display: block;
  max-width: 18ch;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  text-transform: uppercase;
  line-height: 0.95;
}
.ford .lead { color: #c9dbd8; max-width: 40rem; }
.ford-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 1rem; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  font-weight: 700;
}
.btn.river { background: var(--copper); color: #fff; }
.btn.bank { border: 1px solid #e7ece8; color: #e7ece8; }
.ford-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  list-style: none;
  padding: 0 0 3rem;
  margin: 0;
}
.ford-meta a { color: #f3c19a; }
.current { display: block; width: 100%; height: 72px; fill: var(--fog); }

.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bank { padding: 3.2rem 5vw; }
.left-bank { background: var(--left); color: #e7ece8; }
.right-bank { background: var(--right); color: #f6eee6; }
.left-bank .tag { color: #7ed0d6; }
.right-bank .tag { color: #f3c19a; }
.bank ul { padding-left: 1.1rem; }
.bank li + li { margin-top: 0.4rem; }

.piers, .left, .host, .right, .bridge, .cross, .code, .notes, .faq, .pier {
  padding: 4.5rem 6vw;
}
.pier-list { list-style: none; margin: 0; padding: 0; }
.pier-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.pier-list em, .spans span {
  font-family: var(--display);
  font-size: 2rem;
  font-style: normal;
  color: var(--copper);
  line-height: 1;
}
.pier-list h3, .host-grid h3, .right-grid h3, .cross-list h3, .notes-grid h3, .spans h3, .slate h3 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}
.pier-list p, .host-grid p, .right-grid p, .cross-list p, .notes-grid p, .spans p { margin: 0; color: var(--mute); }

.two, .host-grid, .right-grid, .notes-grid, .cross-list, .pier {
  display: grid;
  gap: 1.2rem;
}
.two, .pier { grid-template-columns: 1.2fr 0.9fr; }
.host-grid, .right-grid, .notes-grid, .cross-list { grid-template-columns: 1fr 1fr; }
.slate, .host-grid article, .right-grid article, .cross-list article, .notes-grid article {
  background: var(--sand);
  border-left: 6px solid var(--water);
  padding: 1.2rem 1.15rem;
}
.right-grid article { border-left-color: var(--copper); }
.slate ol { margin: 0; padding-left: 1.1rem; }
.slate li + li { margin-top: 0.45rem; }

.spans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.spans li { background: #fff; padding: 1.1rem; border-top: 6px solid var(--river); }

.code ul { margin: 0; padding-left: 1.15rem; font-size: 1.05rem; }
.code li + li { margin-top: 0.55rem; }

.faq-list details { border-top: 1px solid var(--line); padding: 0.9rem 0; }
.faq-list summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; }
.faq-list p { color: var(--mute); margin: 0.55rem 0 0; }

.pier-copy address { font-style: normal; margin: 1.1rem 0; line-height: 1.8; }
#pierForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--left);
  color: #d7e6e4;
  padding: 1.2rem;
}
#pierForm label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; }
#pierForm .full, #pierForm button, .form-ok { grid-column: 1 / -1; }
#pierForm input, #pierForm select, #pierForm textarea {
  border: 1px solid #2d5c66;
  background: #0a2430;
  color: #e7ece8;
  padding: 0.65rem 0.7rem;
  font: 400 1rem var(--sans);
}
#pierForm button {
  border: 0;
  background: var(--copper);
  color: #fff;
  padding: 0.85rem 1rem;
  font: 700 0.95rem var(--sans);
  cursor: pointer;
}
.form-ok { margin: 0; color: #f3c19a; }

.colophon {
  padding: 1.4rem 6vw 2rem;
  background: var(--river);
  color: #c9dbd8;
  font-size: 0.9rem;
}
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot-links a { color: #f3c19a; }

@media (max-width: 980px) {
  #nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0b4a58;
    flex-direction: column;
    padding: 0.9rem 6vw 1.2rem;
  }
  #nav.is-open { display: flex; }
  .quay { position: sticky; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .split-hero, .two, .host-grid, .right-grid, .notes-grid, .cross-list, .pier, .spans, #pierForm { grid-template-columns: 1fr; }
  .pier-list li { grid-template-columns: 3rem 1fr; }
}

@media (max-width: 560px) {
  .ford { padding: 5vh 6vw 0; }
}