/* Path: caturus-expansion-site/public/css/site.css */
:root {
  /* Placeholder palette: swap for the approved Caturus brand tokens before launch. */
  --navy: #0b2545;
  --blue: #1f5fa8;
  --cyan: #2ab7ca;
  --green: #2e8b57;
  --sand: #f4f6f9;
  --ink: #1c2530;
  --muted: #5b6b7c;
  --line: #e3e8ef;
  --white: #ffffff;
  --red: #b3261e;
  --radius: 10px;
  --shadow: 0 6px 20px rgba(11, 37, 69, 0.08);
  --maxw: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
}
a { color: var(--blue); }
img { max-width: 100%; display: block; }
.container { width: min(var(--maxw), 100% - 2rem); margin-inline: auto; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--cyan); color: var(--navy); padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* One focus indicator everywhere (WCAG 2.4.7, 2.4.11): blue on the light surfaces, cyan on the navy header, heroes, and footer where blue would sit near 3:1. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--cyan); }

/* Screen-reader-only text: link hints ("opens in a new tab", "PDF") and structural headings the visual design omits. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--white); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { color: var(--white); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; font-size: 1.05rem; }
.brand span { font-weight: 400; opacity: 0.85; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.site-nav a { color: var(--white); text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 6px; font-weight: 500; }
.site-nav a:hover, .site-nav a:focus-visible { background: rgba(255, 255, 255, 0.12); }
.site-nav a[aria-current="page"] { background: var(--blue); }
.nav-toggle { display: none; background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 0.45rem 0.8rem; font: inherit; cursor: pointer; }

/* Home hero: the copy sits in the upper-left corner, anchored to the viewport edge rather than the centered site grid, over the darkest part of the scrim. The Project, Contact, and legal pages use the compact solid banner further down. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  min-height: clamp(520px, 45vw, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(2rem, 5vw, 4rem);
}
/* Photo layer: the aerial site plan (base project green, expansion project blue) behind the Home hero since the 2026-10-05 review batch, replacing the Still_S01 render; it fronted the Project page before that. The full 16:9 frame at hero height, centered, sides feathered into the navy (a full-width cover crop showed only the middle band on wide screens). The plan crops to roughly 8:7, so cover trims about a third of its height; the position keeps the two project zones and their labels (INLET METERING through HEAVY HAUL ROAD) and gives up the open field above the base project and the MOF corner below the shoreline strip. Nudge the percentage up to keep more of the shoreline strip, down to keep more of the north. An 8:7 contained layer was tried first and sat as a narrow near-square block in the middle of the frame. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  background: url("/assets/site-plan-hero.jpg") center 65% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
/* Top-left-weighted scrim, lighter overall: darkest behind the copy in the upper left, thinning to a faint tint over the plan at the bottom right. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 37, 69, 0.62) 0%, rgba(11, 37, 69, 0.42) 30%, rgba(11, 37, 69, 0.16) 65%, rgba(11, 37, 69, 0.08) 100%);
}
/* The copy leaves the centered site grid: a full-width row with a small viewport gutter, copy in the left 36rem, an empty second column keeping it from spreading across the frame. */
.hero > .container { position: relative; z-index: 1; width: auto; margin-inline: 0; padding-inline: clamp(1.25rem, 3vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
.hero > .container > * { grid-column: 1; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; margin: 0 0 0.75rem; max-width: 20ch; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
.hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 62ch; margin: 0 0 1.75rem; opacity: 0.95; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Home hero only: the calls to action stack down the left edge under the lede at one width (the widest label sets it). The other heroes keep the wrapped row above. */
.home-hero .actions { flex-direction: column; align-items: stretch; width: max-content; max-width: 100%; }
.home-hero .actions .btn { text-align: center; }
.hero .kicker { color: var(--cyan); }

.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; color: var(--blue); margin: 0 0 0.35rem; }

.btn { display: inline-block; padding: 0.7rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 600; border: 2px solid transparent; }
.btn-primary { background: var(--cyan); color: var(--navy); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--blue); }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-alt { background: var(--sand); }
.section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 0.5rem; color: var(--navy); }
.section .intro { max-width: 70ch; color: var(--muted); margin: 0 0 2rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: start; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 0.5rem; color: var(--navy); font-size: 1.15rem; }
.card p { margin: 0 0 0.5rem; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card-accent { border-top: 4px solid var(--cyan); }
.card-emergency { border-top: 4px solid var(--red); }
.card .big { font-size: 1.6rem; font-weight: 800; color: var(--navy); text-decoration: none; display: inline-block; margin: 0.25rem 0 0.5rem; }
.card-emergency .big { color: var(--red); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.checklist li { padding-left: 1.75rem; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--green); }

/* The scope table sizes to its content with a floor instead of spanning the section (2026-10-05 review batch: two columns left after the Base Project column went) and takes the spacing the removed intro paragraph used to give it. */
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
table.data { width: auto; min-width: min(100%, 34rem); max-width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.data th, table.data td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
table.data th { background: var(--navy); color: var(--white); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.timeline li { background: var(--white); border-left: 4px solid var(--blue); border-radius: 6px; padding: 1rem; box-shadow: var(--shadow); }
.timeline time { display: block; font-weight: 700; color: var(--blue); font-size: 0.9rem; margin-bottom: 0.25rem; }

.map-frame { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--sand); }
.map-caption, .note { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }

.figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.figure { margin: 0; }
.figure a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--sand); }
.figure img { width: 100%; height: auto; }
.figure figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }

.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.85); padding: 2rem 0; margin-top: 2rem; font-size: 0.9rem; }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.site-footer a { color: var(--white); }
.site-footer p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }

.page-404 main { padding: 4rem 0; }

/* Compact solid-navy banner (no photo layer, no scrim): the Project and Contact heroes since the 2026-10-05 review batch, and the legal pages, which add one reading column. */
.hero-operations, .hero-contact, .hero-legal { min-height: 0; }
.hero-operations::before, .hero-contact::before, .hero-legal::before { display: none; }
.hero-operations::after, .hero-contact::after, .hero-legal::after { display: none; }
.legal { max-width: 76ch; }
.legal h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin: 2.25rem 0 0.5rem; }
.legal h3 { font-size: 1.05rem; color: var(--navy); margin: 1.5rem 0 0.35rem; }
.legal p, .legal li { margin: 0 0 0.75rem; }
.legal ul, .legal ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.legal .meta { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 760px) {
  /* The collapsed menu exists only when site.js has stamped html.js; without script the links stay in flow so the site remains navigable. */
  .js .nav-toggle { display: inline-block; }
  /* Text spans the full width here, so the directional scrim gives way to a uniform one and the hero shrinks to its copy. */
  .hero { min-height: 0; }
  .hero > .container { grid-template-columns: minmax(0, 1fr); }
  .hero::after { background: linear-gradient(rgba(11, 37, 69, 0.64), rgba(11, 37, 69, 0.56)); }
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; background: var(--navy); padding: 0.5rem 1rem 1rem; }
  .js .site-nav.open { display: flex; }
}